Utiliser Spip-r autour
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