Mini-cours Bootstrap

Éviter le calvaire CSS

Bootstrap (v3.3.7)

Framework « client » (= bibliothèque CSS et Javascript)

HTML5 et CSS3

Responsive



Installation

Télécharger les fichiers Bootstrap dans un répertoire de votre site.

Entête et fin du HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mini-cours Bootstrap</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="monstyle.css" rel="stylesheet">
  </head>
  <body>
    ...
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
	  

Grille

Principe de base de Bootstrap : une grille de 12 colonnes.

Grille Bootstrap

Balise row : une ligne de 12 divisions.

Balise col-sm-8 : un élément sur 8 divisions sur écran « moyen » (sm).

Exemple :

    <div id="intro" class="container-fluid">
      <div class="row text-center">
	<div class="col-sm-8">
	  <h2>Bootstrap</h2>
	  <div class="row">
	    <div class="col-sm-6">
	      <p><i>Framework</i> « client » (= <strong>bibliothèque</strong> CSS et Javascript)</p>
	    </div>
	    <div class="col-sm-3">
	      <p>HTML5 et CSS3</p>
	    </div>
	    <div class="col-sm-3">
	      <p><i>Responsive</i></p>
	    </div>
	  </div>
	  <br /><br />
	  <button class="btn btn-default btn-lg">Allons-y !</button>
	</div>
	<div class="col-sm-4 center-logo">
	  <span class="glyphicon glyphicon-cloud logo"></span>
	</div>
      </div>
    </div>
	  

Différentes taille d'écran

  Extra small devices
Phones (<768px)
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)

Exemple


Sur 4 colonnes

col-sm-4

Sur 4 colonnes

col-sm-4

Sur 4 colonnes

col-sm-4



Sur 6 colonnes

col-sm-6

Sur 6 colonnes

col-sm-6



    <div class="container-fluid text-center">
      <div class="row">
	<div class="col-sm-4">
	  ...
	</div >
	<div class="col-sm-4">
	  ...
	  

Responsive

La grille s'adapte à la taille de l'écran.

Sur de petits écrans, les cellules d'une même ligne se rétractent verticalement (menu de navigation par exemple).

On peut définir pour chaque taille d'écran un nombre de colonnes différent.

Par exemple, afficher un trombinoscope sur un nombre de colonnes dépendant de la taille de l'écran.



Fonctionnement interne : @media permet d'adapter le code CSS selon la taille de l'écran.

	  <div class="row">
	    <div class="col-xs-12 col-sm-6 col-lg-3">
	      ...
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-3">
	      ...
	  

Classes principales

container
« Active » la grille Bootstrap. Tout contenu doit être inclus dans un div container ou container-fluid.
row
Insère les éléments contenus dans le div row les uns à la suite des autres sur une « ligne » de la grille.
col-*-*
Un bloc sur plusieurs colonnes. Exemple : col-xs-6 aura 6 colonnes adaptées à un écran de smartphone.
glyphicon
Pour insérer des symboles parmi un ensemble d'images prédéfinies : <span class="glyphicon glyphicon-pencil logo"></span>.
jumbotron
Boîte de texte mis en évidence.
etc.
(images, boutons, navbar…)

Exemples

Container-fluid

« Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux se fermaient si vite que je n’avais pas le temps de me dire : « Je m’endors. » Et, une demi-heure après, la pensée qu’il était temps de chercher le sommeil m’éveillait ; je voulais poser le volume que je croyais avoir encore dans les mains et souffler ma lumière ; je n’avais pas cessé en dormant de faire des réflexions sur ce que je venais de lire, mais ces réflexions avaient pris un tour un peu particulier ; il me semblait que j’étais moi-même ce dont parlait l’ouvrage : une église, un quatuor, la rivalité de François Ier et de Charles Quint. Cette croyance survivait pendant quelques secondes à mon réveil ; elle ne choquait pas ma raison mais pesait comme des écailles sur mes yeux et les empêchait de se rendre compte que le bougeoir n’était plus allumé. Puis elle commençait à me devenir inintelligible, comme après la métempsycose les pensées d’une existence antérieure ; le sujet du livre se détachait de moi, j’étais libre de m’y appliquer ou non ; aussitôt je recouvrais la vue et j’étais bien étonné de trouver autour de moi une obscurité, douce et reposante pour mes yeux, mais peut-être plus encore pour mon esprit, à qui elle apparaissait comme une chose sans cause, incompréhensible, comme une chose vraiment obscure. Je me demandais quelle heure il pouvait être ; j’entendais le sifflement des trains qui, plus ou moins éloigné, comme le chant d’un oiseau dans une forêt, relevant les distances, me décrivait l’étendue de la campagne déserte où le voyageur se hâte vers la station prochaine ; et le petit chemin qu’il suit va être gravé dans son souvenir par l’excitation qu’il doit à des lieux nouveaux, à des actes inaccoutumés, à la causerie récente et aux adieux sous la lampe étrangère qui le suivent encore dans le silence de la nuit, à la douceur prochaine du retour. »

Container

« Pour une surprise, c’en fut une. A travers la brume, c’était tellement étonnant ce qu’on découvrait soudain que nous nous refusâmes d’abord à y croire et puis tout de même quand nous fûmes en plein devant les choses, tout galérien qu’on était on s’est mis à bien rigoler, en voyant ça, droit devant nous…
« Figurez-vous qu’elle était debout leur ville, absolument droite. New York c’est une ville debout. On en avait déjà vu nous des villes bien sûr, et des belles encore, et des ports et des fameux même. Mais chez nous, n’est-ce pas, elles sont couchées les villes, au bord de la mer ou sur les fleuves, elles s’allongent sur le paysage, elles attendent le voyageur, tandis que celle là l’Américaine, elle ne se pâmait pas, non, elle se tenait bien raide, là, pas baisante du tout, raide à faire peur. »

col-xs

Mon enfant, ma soeur,
Songe à la douceur
D'aller là-bas vivre ensemble !
Aimer à loisir,
Aimer et mourir
Au pays qui te ressemble !
Les soleils mouillés
De ces ciels brouillés
Pour mon esprit ont les charmes
Si mystérieux
De tes traîtres yeux,
Brillant à travers leurs larmes.

Là, tout n'est qu'ordre et beauté,
Luxe, calme et volupté.

Des meubles luisants,
Polis par les ans,
Décoreraient notre chambre ;
Les plus rares fleurs
Mêlant leurs odeurs
Aux vagues senteurs de l'ambre,
Les riches plafonds,
Les miroirs profonds,
La splendeur orientale,
Tout y parlerait
À l'âme en secret
Sa douce langue natale.

col-sm et supérieur (empilage vertical)

Là, tout n'est qu'ordre et beauté,
Luxe, calme et volupté.

Vois sur ces canaux
Dormir ces vaisseaux
Dont l'humeur est vagabonde ;
C'est pour assouvir
Ton moindre désir
Qu'ils viennent du bout du monde.
- Les soleils couchants
Revêtent les champs,
Les canaux, la ville entière,
D'hyacinthe et d'or ;
Le monde s'endort
Dans une chaude lumière.

Là, tout n'est qu'ordre et beauté,
Luxe, calme et volupté.

col-* (plusieurs options)

Si tu peux voir détruit l'ouvrage de ta vie
Et sans dire un seul mot te mettre à rebâtir,
Ou perdre d'un seul coup le gain de cent parties
Sans un geste et sans un soupir ;

Si tu peux être amant sans être fou d'amour,
Si tu peux être fort sans cesser d'être tendre
Et, te sentant haï, sans haïr à ton tour,
Pourtant lutter et te défendre ;

Si tu peux supporter d'entendre tes paroles
Travesties par des gueux pour exciter des sots,
Et d'entendre mentir sur toi leurs bouches folles
Sans mentir toi-même d'un mot ;

Si tu peux rester digne en étant populaire,
Si tu peux rester peuple en conseillant les rois
Et si tu peux aimer tous tes amis en frère
Sans qu'aucun d'eux soit tout pour toi ;

Si tu sais méditer, observer et connaître
Sans jamais devenir sceptique ou destructeur ;
Rêver, mais sans laisser ton rêve être ton maître,
Penser sans n'être qu'un penseur ;

Si tu peux être dur sans jamais être en rage,
Si tu peux être brave et jamais imprudent,
Si tu sais être bon, si tu sais être sage
Sans être moral ni pédant ;

Si tu peux rencontrer Triomphe après Défaite
Et recevoir ces deux menteurs d'un même front,
Si tu peux conserver ton courage et ta tête
Quand tous les autres les perdront,

Alors les Rois, les Dieux, la Chance et la Victoire
Seront à tout jamais tes esclaves soumis
Et, ce qui vaut mieux que les Rois et la Gloire,
Tu seras un homme, mon fils.

Quelques images

Monet - Cathédrale de Rouen 1
Monet - Cathédrale de Rouen 2
Monet - Cathédrale de Rouen 3

Pour aller plus loin…