Composants
Présentation des composants intégrés sous forme de classes et balises Bootstrap
Classes et balises Bootstrap
- Images Bootstrap : class .rounded (img aux coins très légèrement arrondis), .rounded-circle (img dans un rond), .img-thumbnail (img dans une vignette) et .img-responsive (soit display: block; max-width: 100%; height: auto;)
- Typographie Bootstrap : par défaut : font-size à 14px et line-height à 1.428
Bootstrap utilise en plus des balises classique p et autre h1, les balises :
- <mark> (surligneur)
- <abbr> (double soulignement et, avec un attribut title, popup au survol )
- <blockquote> (trait vertical gauche)
- <dl> (Description Lists)
- <code> (surligneur avec arrondis)
- <kbd> (surligneur noir)
- <pre> (affiche les espaces et BR)
- Classes de couleur de texte : .text-muted, .text-primary, .text-success, .text-info, .text-warning, et .text-danger
- Classes de couleur de fond : .bg-primary, .bg-success, .bg-info, .bg-warning, et .bg-danger
- Bootstrap utilise des classes pour les balises <table> : comme .table-striped qui colorie une ligne sur deux
- Boites Bootstrap (classes à utiliser dans un div) :
• .jumbotron (très grande boite grise avec coin arrondis)
• .well (longue boite grise avec padding)
• .alert-success, .alert-info, .alert-warning ou .alert-danger (longue boite grise en couleur)
• .btn, .btn-default, .btn-primary... pour des boutons en couleur et aux coins arrondis
• .glyphicon avec la class .glyphicon-nomdelicone pour afficher des icônes
• .Badges (petit rond pour ue numérotation) - ProgessBar Bootstrap avec la classe .progress pour une progessbar statique
- Numéro de page Bootstrap avec la classe .pagination (à utiliser sur un ul) pour afficher des petits boutons de numéro de page
- Suivant et précédent avec la classe .pager à utiliser sur un ul pour afficher les boutons suivant et précédent
- Liste à puces Bootstrap à utiliser sur un ul avec les classes .list-group ou .panel (simple encadrement), .list-inline (ul horizontale), .dropdown-menu (menu déroulant)
- Afficher/masquer avec la classe .collapse pour afficher/masquer du contenu à partir d'un bouton
- Barre de navigation Bootstrap avec la classe .navbar associée aux classes .navbar-default ou .navbar-inverse
- Formulaire Bootstrap avec la classe .form-control donne du style à vos input, textarea et autre select (largeur de 100%)
- positionnement d'objet (float) avec les classes .media-object, .media et .media-left ou .media-right
- Carrousel Bootstrap (slideshow) avec les classes .carousel, .slide, .carousel-indicators (petits ronds), .carousel-inner (contenu), .carousel-control (contrôle)
- PopUp Bootstrap avec la classe .modal pour ouvrir une fenêtre popup ou en utilisant l'attribut de balise data-toggle="tooltip" pour ouvrir une petite fenêtre
- liens interne avec l'attribut de balise data-spy="scroll"
- Menu toujours affiché avec l'attribut de balise data-spy="affix"
Pour aller plus loin...
- W3Schools Bootstrap 4
- 960 Grid System
- Grilles-framework-css-webdesign
- Simplifiez vous la vie avec LESS
- Prenez en main Bootstrap
- Brackets
- Le framework Bootstrap avec l'éditeur Brackets