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
btn-xs
btn-sm
btn-lg
de type (comme pour les label- ) :
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 :
- Getting start
- Css = liste des éléments
- Components = composants
- Javascript = objets et effets JS
- Customize = pour se personnaliser son ficher boostrap
Article publié le 26 décembre 2015, et actualisé en juillet 2016 .
Répondre à cet article