Présentation et prise en main Bootstrap Présentation et prise en main
Sommaire Présentation du Framework Connaissances préalables jQuery Ajax LESS Intérêts/Inconvénients Contenu du kit Normalize.css Arborescence Mise en place Template de base Grille Liens utiles
Présentation du Framework Framework CSS (HTML/Javascript) Aide à mettre en forme les pages web : organisation, aspect, animation… « ensemble de composants structurés qui sert à créer les bases et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance »
Connaissances préalables HTML5/CSS3 jQuery (mise en œuvre des plugins) LESS (pour aller plus loin)
jQuery Bibliothèque JavaScript libre et multiplateforme Facilite l’écriture de script côté client dans le code HTML des pages Web Utilise Ajax
Ajax Asynchronous JavaScript and XML Architecture informatique pour site web dynamiques
Ajax
LESS
Intérêts de Bootstrap Cross-browser Gain de temps de développement Ensemble homogène de styles Utilisation d’une grille pour positionner les éléments Eléments complémentaires : boutons esthétiques, barres de navigation, etc... (Web-responsive)
Inconvénients de Bootstrap Nécessité de connaitre le framework pour l’utiliser (perte de temps initiale) Normalisation de la présentation qui peut être redondante
Contenu du kit Bootstrap Une mise en page basée sur grille Normalize.css Du code fondé sur HTML5 et CSS3 Bibliothèque open source Plugins jQuery Résultat cross-browser Documentation
Normalize.css
Arborescence Bootstrap
Mise en place de Bootstrap Déclaration HTML5, prévoir le bon DOCTYPE Déclarer bootstrap.css Si utilisation de JavaScript, déclaration de bootstrap.js et jquery.js
Template de base
Grille Bootstrap
Grille Bootstrap
Grille Bootstrap
Grille Bootstrap
Grille Bootstrap
Grille Bootstrap
Grille Bootstrap
Liens utiles Cours en ligne sur Boostrap : http://openclassrooms.com/courses/prenez-en-main-bootstrap Site Officiel de Bootstrap : http://getbootstrap.com/ Site Officiel de jQuery : http://jquery.com/ Page projet de normalize.css : http://necolas.github.io/normalize.css/ Templates Bootstrap : https://wrapbootstrap.com/ http://bootstrapzero.com/