Comprendre BootStrap

Pour utiliser Bootstrap, il faut comprendre deux principes :
- le concept des grilles (sur 12 colonnes maxi),
- les noms des classes associées, et leur usage.

Article publié le 26 décembre 2015, et actualisé en juillet 2016

 
 
 
 
 
 
 
 
 
 
 
 

L’intégration de Bootstrap demande les inclusions en <HEAD de :
- une balise <link> vers la feuille de style Bootstrap ;
- une balise <meta name="viewport"> définissant le viewport, c’est-à-dire la surface de la fenêtre adaptée à la dimension du terminal client ;
une balise permettant un affichage correct sur le navigateur Internet Explorer ;
- les balises <script> qui activent les plugins jQuery de Bootstrap.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script src="bootstrap/js/bootstrap.min.js"></script>

 Utilisation des Grilles

La page est structurée en blocs sur douze colonnes.
On crée chaque bloc de structure horizontale par une <div class="row", et on dimensionne des largeurs contenues par des class="col-md-N",le tout placé dans un objet class='container'.
Un espacement vide avant,est provoqué par l’ajout [1]d’une classe class="col-md-offset-N" complémentaire.
Enfin, on peut mixer le design en fonction de plusieurs tailles d’écrans, en utilisant simultannément plusieurs classes de radical différents, voir en changeant de préfixe visible-* ou hidden-.

 D’autres classes

Les Menus sont gérés par des listes, dans un bloc classé en :
- class="navbar" pour un menu horizontal,
- class="nav" (& "nav-pills nav-stacked") pour un menu vertical, ou
- class="list-group" et "list-group-item"...
Le menu est partiellement masquable, avec class="collapse navbar-collapse"....

Certains blocs sont automatiquement reformattés :
- le bloc <blockquote>       
- les blocs de listes : <ul, <ol, <ul class="list-­‐unstyled", ou même <ul class="list-inline"> sans retour à la ligne.
- les blocs spéciaux <code et <pre .
- la classe img-responsive permet de redimensionner les images à la taille du bloc conteneur.

Les Tableaux peuvent prendre cinq classes spéciales :
- normal <table class="table",
- rayé <table class="table-striped",
- bordé <table class="table-bordered",
- resserré <table class="table-condensed"
- normal * <table class="table-responsive" !

Il y a aussi de nombreux types de classes pour les boutons <button type="button" class="btn btn-default">, définis par des classes :
- de taille :
btn taille
btn btn-xs btn-sm btn-lg
- de type (comme pour les label- ) :
btn type
btn-default btn-primary btn-success btn-info btn-warning btn-danger
- activé ou non : class="btn active / disabled"
- groupés : <div class="btn-group-*" (ou en btn-group-vertical)
- en multi-choix : class="dropdown-toggle" data-toggle="dropdown">.

 Les Composants

Divers composants sont intégrés et donc disponibles :
- dropdowns
- bouton groups
- Nav et Navbar
- breadcrumbs
- page header
- thumbnails (ou Glyphicons)
- alerts
....

 Objets complexes de bootstrap.js

- les boutons dynamiques
les scrollSpy (zone de défilement associés à un header)
- des carousels ou accordeons

 Structure de la documentation :

  1. Getting start
  2. Css = liste des éléments
  3. Components = composants
  4. Javascript = objets et effets JS
  5. Customize = pour se personnaliser son ficher boostrap

Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Les radicaux col-xs, col-sm , col-md , col-lg correspondent aux largeurs entre : smartphone = 768px, tablette = 992px et ordinateurs normaux 1170px ou larges !


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 26 décembre 2015, et actualisé en juillet 2016 .

Répondre à cet article