Présentation et prise en main

Présentation au sujet: "Présentation et prise en main"— Transcription de la présentation:

1 Présentation et prise en main
Bootstrap Présentation et prise en main

2 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

3 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 »

4 Connaissances préalables
HTML5/CSS3 jQuery (mise en œuvre des plugins) LESS (pour aller plus loin)

5 jQuery Bibliothèque JavaScript libre et multiplateforme
Facilite l’écriture de script côté client dans le code HTML des pages Web Utilise Ajax

6 Ajax Asynchronous JavaScript and XML
Architecture informatique pour site web dynamiques

7 Ajax

8 LESS

9 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)

10 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

11 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

12 Normalize.css

13 Arborescence Bootstrap

14 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

15 Template de base

16 Grille Bootstrap

17 Grille Bootstrap

18 Grille Bootstrap

19 Grille Bootstrap

20 Grille Bootstrap

21 Grille Bootstrap

22 Grille Bootstrap

23 Liens utiles Cours en ligne sur Boostrap :
Site Officiel de Bootstrap : Site Officiel de jQuery : Page projet de normalize.css : Templates Bootstrap :