Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Tutoriel Bootstrap 3 Table des matières Pré-requis à ce tutoriel ..............

Tutoriel Bootstrap 3 Table des matières Pré-requis à ce tutoriel ............................................................................................................................ 1 Qu’est-ce que Bootstrap ? ....................................................................................................................... 1 A quoi sert-il ? ......................................................................................................................................... 2 Pourquoi utiliser Bootstrap plutôt qu’un autre framework CSS ? .......................................................... 2 Comment s’en servir ? ............................................................................................................................. 2 Présentation de la version actuelle : la version 3 .................................................................................... 2 Installation ............................................................................................................................................... 2 Intégration ............................................................................................................................................... 3 La grille de Bootstrap............................................................................................................................... 4 Utilisation des éléments Bootstrap ......................................................................................................... 7 Les listes .............................................................................................................................................. 7 Les descriptions ................................................................................................................................... 7 Les images ........................................................................................................................................... 7 Les icônes ............................................................................................................................................ 8 Les boutons ......................................................................................................................................... 7 Les tableaux ......................................................................................................................................... 8 Les formulaires .................................................................................................................................... 9 A vous de jouer !.................................................................................................................................... 10 Arrivée de la version 4 ........................................................................................................................... 10 Pré-requis à ce tutoriel Il vous faudra des notions de HTML et CSS. Si vous allez plus loin, il vous faudra aussi des notions de Jquery mais cela n’est pas utile pour ce tutoriel. Qu’est-ce que Bootstrap ? Bootstrap est un framework CSS développé par les équipes de Twitter. C’est le plus populaire des frameworks CSS. Il offre un ensemble de composants structurés qui sert à créer les bases de vos pages web et à organiser le code. A quoi sert-il ? Il permet de construire en très peu de temps et facilement des sites web esthétiques et responsives (cela signifie que les pages s'adaptent automatiquement au support utilisé pour les visualiser). Bootstrap vous facilite le travail en termes de : - productivité car il suffit généralement d’utiliser les classes prédéfinies pour obtenir un bon résultat - maintenance car le code est clair et beaucoup de développeurs connaissent Bootstrap Pourquoi utiliser Bootstrap plutôt qu’un autre framework CSS ? Avantages - Présentation similaire quel que soit le navigateur utilisé et parfaite compatibilité - Temps gagné par l’utilisation d’une base qui a fait ses preuves - Normalisation de la présentation avec un ensemble homogène de styles - Framework CSS le plus utilisé et donc très documenté (vidéos, documentations, forums…) Inconvénient - Temps d’apprentissage pour maîtriser le framework mais la prise en main est rapide même pour un débutant, c’est l’objet de ce tutoriel. Comment s’en servir ? Bootstrap propose un système de grille qui permet d’agencer les éléments de vos pages et d’adapter les pages au support utilisé pour les visualiser. Il propose aussi un style pour les boutons, formulaires et autres éléments de vos pages. Ce style peut facilement être modifié tout en conservant tous les avantages de Bootstrap. Présentation de la version actuelle : la version 3 Elle intègre totalement l’aspect responsive alors que cette fonctionnalité était séparée dans les précédentes versions. Aussi, on peut considérer cette version comme « mobile-first », c’est-à-dire développée et pensée pour les appareils mobiles afin de couvrir tous les besoins. Installation Allez sur le site http://getbootstrap.com/getting-started/#download et cliquez sur le bouton de téléchargement « Download Bootstrap ». Dézippez le fichier et le placer dans le dossier www de votre serveur local ou web. Le dossier contient 3 sous-dossiers : CSS : • bootstrap.css comporte les classes de base de Bootstrap • bootstrap-theme.css contient des règles de styles particulières pour créer un thème spécifique pour Bootstrap FONTS : • glyphicons-halflings-regular.svg comporte la collection d'icônes au format svg • glyphicons-halflings-regular.ttf comporte la collection d'icônes au format ttf • glyphicons-halflings-regular.woff comporte la collection d'icônes au format woff • glyphicons-halflings-regular.eot comporte la collection d'icônes au format eot JS : • bootstrap.js contient le code JavaScript des composants de Bootstrap Les fichiers min (bootstrap.min.css, bootstrap.min.js et bootstrap-theme.min.css) contiennent le même code que leurs équivalents (bootstrap.css, bootstrap.js et bootstrap-theme.css) mais ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur chargement. Ils sont à utiliser en environnement de production, une fois que le développement est terminé. Les fichiers bootstrap-theme.css.map et bootstrap.css.map permettent de retrouver l'emplacement original d'une ligne de code à partir du code minifié. Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables au fonctionnement de Bootstrap. Intégration Vous pouvez créer une nouvelle page avec le code ci-dessous ou choisir de partir d’un template (par exemple sur : www.startbootstrap.com ). Code <!DOCTYPE html> <html lang="fr"> <head> <title>Bootstrap demo</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">    </head> <body> <h1>Hello, world!</h1> </body> </html> Explication du code <meta name="viewport" content="width=device-width, initial-scale=1"> permet d’ouvrir la fenêtre à la largeur de l’écran avec « width=device-width » et de régler le zoom avec « initial-scale=1 ». La balise META viewport permet de fixer certaines valeurs pour les Media Queries. Les Media Queries permettent d'adapter la restitution d’une page à différentes caractéristiques des terminaux (taille écran, zoom, définition…). <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> est la déclaration du fichier CSS pour son utilisation dans la suite du code. Faites attention à spécifier le bon chemin d’accès. Ce fichier est le cœur de Bootstrap. La partie commentée (balises ) permet de gérer les spécificités d’Internet Explorer. Votre code doit se trouver entre le balises <body></body> au-dessus des balises <script>. La grille de Bootstrap Bootstrap propose un système de grille qui permet d’agencer les éléments de vos pages et d’adapter les pages au support utilisé (détecté par les Media Queries) pour les visualiser. La grille de Bootstrap est composée de 12 colonnes de même largeurs qui occupent ensemble la largeur de l’écran. On peut avoir plusieurs lignes sur cette grille et elles ne sont pas forcément de même hauteurs. La hauteur d’une ligne est celle du plus gros élément qu’elle contient. Le tableau ci-dessous présente pour chaque type de support la largeur de référence utilisée par les Media Queries et la classe Bootstrap adaptée à cette largeur d’écran. Petit écran (smartphone) Ecran réduit (tablette) Ecran moyen (ordinateur) Grand écran (ordinateur) Largeur de référence < 768 px (pixels) >= 768 px >= 992 px >= 1200 px Classe Bootstrap col-xs-* col-sm-* col-md-* col-lg-* Dans la classe Bootstrap, on précise à la place de * le nombre de colonnes sur lequel l’élément possédant cette classe doit être affiché. Exemple 1 <!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> </head> <style> body {padding-top: 10px;} [class*="col-"], footer { background-color: lightgreen; border: 2px solid black; border-radius: 6px; line-height: 40px; text-align: center;} </style> <body> <div class="container"> <div class="row"> <div class="col-lg-1">1 col</div> <div class="col-lg-2">2 colonnes</div> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-6">6 colonnes</div> </div> <div class="row"> <div class="col-lg-12">12 colonnes</div> </div> <div class="row"> <div class="col-lg-4">4 colonnes</div> <div class="col-lg-8">8 colonnes</div> </div> </div> </body> </html> N.B : pour tester les exemples, il suffit de réduire la fenêtre de votre navigateur pour observer l’évolution de l’agencement des éléments de la page. Sur un écran moyen ou grand (détecté comme de largeur supérieure ou égale à 992 px), on obtient : Sur un écran petit ou réduit (détecté comme de largeur inférieure à 992 px), on obtient : Explication de l’exemple 1 La classe « container » contient et centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran. Il est recommandé de l’utiliser. On utilise la classe « row » pour obtenir plusieurs lignes ou rangées. On place ensuite les éléments au sein de chaque rangée et on les dimensionne en indiquant le nombre de colonnes qu’ils occupent. Exemple 2 <body> <div class="container"> <div class="row"> <div class="col-lg-1 col-md-6">1 col</div> <div class="col-lg-2 col-md-6">2 colonnes</div> <div class="col-lg-3 col-md-2">3 colonnes</div> <div class="col-lg-6 col-md-10">6 colonnes</div> </div> <div class="row"> <div class="col-lg-12">12 colonnes <div class="row"> <div class="col-lg-2 col-lg-offset-2">Colonne 1</div> <div class="col-lg-2 col-lg-offset-2">Colonne 2</div> <div class="col-lg-2 col-lg-offset-1">Colonne 3</div> </div> </div> </div> </div> </body> Sur un écran moyen ou grand (détecté comme de largeur supérieure ou égale à 992 px), on obtient : Sur un écran réduit (détecté comme de largeur inférieure à 992 px et supérieure à 768 px), on obtient : Explication de l’exemple 2 On peut inclure des lignes dans des lignes comme on le voit dans la ligne « 12 colonnes » dans laquelle se trouve une ligne avec 3 éléments distincts. On peut aussi utiliser la classe col-lg-offset-* pour sauter le nombre de colonnes indiquées à la place de *. En utilisant les classes col-lg-* et col-md-* avec des valeurs différentes à la place de *, on prévoit deux agencements différents de la page. Un bon exercice est de prévoir un troisième agencement différent pour les petits écrans (inférieurs à 768 px). Utilisation des éléments Bootstrap Grâce au système de grille, on peut prévoir des agencements complexes des éléments selon les supports de visualisation. Voyons les différents éléments de base qu’il est possible d’utiliser. Les listes Bootstrap applique un style sur listes (rappel : <ul><li></li><li></li><li></li></ul>) : par défaut, les éléments de la liste (<li></li>) sont affichés avec une indentation et une puce. Les descriptions Les descriptions ont aussi un style (rappel : <dl><dt></dt><dd></dd><dt></dt><dd></dd></dl>) : par défaut, le titre de la description (<dt></dt>) est affiché en gras et on trouve en dessous les détails (<dd></dd>) avec une indentation. Il est possible de faire une présentation horizontale avec uploads/s3/ tutoriel-bootstrap-3-pragmantic.pdf