Cours Bootstrap

Bootstrap 3 tutorial français pdf


Télécharger Bootstrap 3 tutorial français pdf

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


 

Maîtriser Bootstrap 3 Par la pratique

Pourquoi Bootstrap ?

•    Si vous souhaitez créer des pages web sans se soucier de la compatibilité entre les navigateurs (Internet explorer, Firefox, Google Chrome,…)

•    Si vous souhaitez créer des pages optimisées pour tous les supports (Desktop, Tablettes, Mobiles)

•    Si vous souhaitez accélérer vos développements en accédant à une gamme complète d’éléments : un système de grilles adapté aux interfaces multisupports, un ensemble de zones de saisie, de boutons et de contrôles de formulaires dynamiques, des infobulles  complexes,…

Les pré-requis:

Cette série de tutoriels Bootstrap 3 est destinée aux professionnels et aux amateurs de développement web. Une bonne connaissance des standards HTML5 et CSS3 est nécessaire. Des notions de JavaScript et de jQuery seront également utiles au lecteur pour bien appréhender l’usage de l’API de Bootstrap 3.

Sommaire

Chapitre 1: Prise en main de Bootstrap

•    Présentation de Bootstrap 3         

•    Compatibilité 

•    Installation de Bootstrap 3             

•    Personnalisation de Bootstrap 3                  ?         Première page HTML avec Bootstrap 3 

•    Outils de développement              

Chapitre 2: Bootstrap3 et le système de grille

•    Comprendre le concept de grille dans le webdesign           

•    Créer une page web multigrille avec Bootstrap 3                 

•    Décaler les éléments d’une grille                

•    Imbriquer plusieurs grilles dans Bootstrap 3           

•    Changer l’ordre des éléments dans une grille        ?         Gérer l’affichage multiligne dans Bootstrap 3        

•    Afficher et cacher du contenu dans Bootstrap 3 en fonction du support 

Chapitre 3: La typographie

•    Titres et paragraphes       

•    Les messages d’information         

•    Les badges           

•    Les labels Bootstarap 3 

•    Les icônes Bootstrap 3

Qu’est-ce que Bootstrap?

Bootstrap est une collection d’outils HTML, CSS et JavaScript destinés à aider les développeurs de sites et applications web.

Bootstrap a été crée en 2011 par Mark Otto et Jacob Thornton, deux salariés de l’entreprise Twitter. Son objectif au départ était de Proposer une bibliothèque de composants standard qui permettrait d’accélérer et d’uniformiser le développement des interface coté utilisateur.

Bootstrap est de plus en plus connu et est devenu « le framework front-end » le plus populaire pour développer des projets responsive et mobile-first sur le web.

Pourquoi utiliser Bootstrap?

Bootstrap est framework css open-source qui vous permet de :

•    Gagner du temps et augmenter votre productivité (une tonne d’éléments pré-configurés

(boutons, forms, listes, …),

•    Faciliter la maintenance de votre site (code normalisé donc très facile à maintenir),

•    Garantir un aspect unique à votre site quelque soit le navigateur utilisé (compatibilité entre navigateurs gérée par Bootstrap),

•    D’avoir un site responsive qui s’adapte automatiquement en fonction de votre écran/périphérique (Smartphone, Tablette, Ordinateur),

•    etc…

Historique de Bootstrap :

Après la création et l’utilisation du framework Bootstrap en interne, L’entreprise Twitter à décidé assez vite de publier la première version de Bootstrap : Bootstrap1 en Open Source. Son code est disponible depuis août 2011.

la deuxième version de Bootstrap : Bootstrap 2 est apparue le 31 janvier 2012, qui mettait à la disposition des développeurs de nouveaux composants graphiques: Progress Bars, Button Groups, Carousels,...etc, mais la nouveauté phare de Bootstrap 2 a été la mise en place d’un système permettant de créer des sites et application web complétement responsive qui s’adapte avec les supports mobiles tels que les smartphones et les tablettes

Le 18 août 2013, la troisième version de bootstrap : Bootstrap 3 a vu le jour après une refonte complete de la bibliothèque par Mark Otto et Jacob Thornton

 

Nouveautés de Bootstrap 3 :

Bootstrap 3 est toujours disponible sous licence Apache 2.0, cette dernière version débarque  avec une nouvelle apparence, nouveaux composants et d’autre correctifs et changements.  Nous citerons ci-dessous les nouveautés phares de Bootstrap 3:

•    Un nouveau thème flat et un autre thème optionnel pour les non-fans du flat design,

•    Un nouveau système de grilles complétement repensé. Il est basé sur la taille du support qui affiche la page,

•    Une nouvelle série de composants: panneaux, liste groupée, panneau escamotable et d’autres ont été supprimés ou modifiés,

•    Un nouvelpour personnaliser Bootstrap en ligne afin d’éliminer tout ce qui est inutile à votre projet,

•    De nouveauxglyphicônes,

•    etc…

Compatibilité de Bootstrap 3 avec les navigateurs

Bootstrap 3 et les navigateurs

Bootstrap 3 est construit pour fonctionner de manière optimale avec les derniers navigateurs sur Ordinateurs et sur les supports mobiles. Mais cela ne veut pas dire que Bootstrap 3 est incompatible avec les anciennes versions des navigateurs, bien qu’il existe des correctifs fournis par la communauté Bootstrap afin de corriger les  problèmes de compatibilité et certaines fonctionnalités de Bootstrap 3.

 

Téléchargement de Bootstrap 3

Pour utiliser la bibliothèque Bootstrap dans votre projet, il existe plusieurs méthodes, chacune correspondant à un niveau d’expertise et des cas d’utilisation. Pour faire simple, rendez-vous sur le site officiel à l’adresse suivante :-started/#download 

Cliquez sur le bouton Download Bootstrap. Une fois l’archive téléchargée et décompressée dans un dossier appelé Bootstrap3 par exemple, la structure de fichier ci-dessous apparait :

1     bootstrap/

2     ??? css/

3     ? ???

4     ? ???

5     ? ???

6     ? ???

7     ??? js/

8     ? ???

9     ? ???

10     ??? fonts/

11     ???

12     ???

13     ???

14     ???

Le dossier Bootstrap3 (dans lequel vous avez décompressé le fichier téléchargé), contient trois dossiers: css, js et font où chacun d’eux contient un certain nombre de fichiers.

Contenu et role des fichiers de Bootstrap 3

Dossier

Fichier

Description

css

feuille de style de Bootstrap.

version minimisée de la feuille de style .

feuille de style additionnelle contenant des éléments provenant de Bootstrap 2.

version minimisée de la feuille de style .

js

fichier JavaScript de Bootstrap.

version minimisée du fichier JavaScript .

font

Fichiers de police contenant la bibliothèque d’icônes

Glyphicon

Dossier

Fichier

Description

 

 
 

Comme vous l’avez certainement remarqué, les fichiers

css

 et

js

 existent en deux exemplaires :

               

les originaux et les minimisés.

Qu’est ce qu’un fichier css/js minimisé?

Un fichier css/js  minimisé est un fichier qui reprend le même contenu du fichier original en supprimant tous les sauts de ligne, commentaires et espaces inutiles.

Pour des raisons de performances, on opte souvent pour les fichiers minimisés dans les environnements de production et les fichiers originaux pendant la phase de développement. Avantages et inconvénients d’un fichier css/js minimisé:

Lorsqu’on utilise les fichiers minimisés dans nos projets, les pages web qui l’utilisent, bénéficient d’un temps de chargement beaucoup plus amélioré par rapport aux pages utilisant les fichiers originaux, cela est dû, à la taille des fichiers après leur minimisation (suppression de tous les sauts de ligne, commentaires et espaces inutiles).

Cependant, un fichier minimisé est difficile à lire et à modifier.

Installation de Bootstrap 3

Bootstrap utilise JQuery pour fonctionner, nous vous conseillons de télécharger la dernière version de JQuery en vous rendant sur le site officiel de cette bibliothèque:. Copiez le fichier téléchargé dans le dossier js de Bootstrap.

Personnaliser Bootstrap 3

Pourquoi a-t-on besoin de personnaliser Bootstrap 3

Bootstrap nous offre une série de composants (boutons, barres de navigation, menus, barres de progression,…) indépendants les uns des autres. Selon vos besoins pour un projet, vous pouvez vous débarrasser de certains composants jugés inutiles, dans le but d’alléger les feuilles de style css et les fichiers JavaScripte.

Sur l’adresse suivante:vous pouvez personnaliser votre bibliothèque Bootstrap selon vos besoin en décochant tout ce qui est inutile à votre projet!

Après avoir configurer votre bibliothèque Bootstrap 3, cliquez sur le bouton Compile and Download en bas de la page. Une fois téléchargée et décompressée, vous remarquerez que les fichiers source sont significativement allégés.

Première page HTML avec Bootstrap 3

Apres avoir installé Bootstrap 3 sur votre ordinateur, vous vous disposez donc de tous les éléments nécessaires à la création de votre première page HTML avec Bootstrap 3.

Le code ci-dessous vous permet de créer votre première page HTML avec Bootstrap 3:

1        <!DOCTYPE html> 

2        <html lang="fr"> 

3        <head>

4        <meta charset="utf-8"> 

5        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

6        <title>Opentuto - Bootstrap 3</title> 

7        <link href="" rel="stylesheet"> 

8        </head>

9        <body>

10        <div class="container"> 

11        <h1>Première page avec Bootstrap 3</h1> 

12        </div>

13        <script src=""></script> 

14        <script src=""></script> 

15        </body>

16        </html>

Explication du code:

Depuis sa deuxième version, Bootstrap vous offre la possibilité d’activer/désactiver le mode responsive à l’aider de la balise <meta>. Ajoutez la balise <meta> dans le <head> de votre page web pour activer le mode responsive et enlevez-la pour le désactiver.

<link href="" rel="stylesheet"> : chargement de la feuille de style par le navigateur.

<script src=""></script> : chargement de la bibliothèque JQuery par le navigateur. JQuery est essentiel pour le fonctionnement de Bootstrap 3.

<script src=""></script> : chargement du fichier source JavaScripte de la bibliothèque Bootstrap 3 par le navigateur.

<div class="container"> : permet de définir la largeur et la disposition du canevas de la page.

<h1>Première page avec Bootstrap 3</h1> : Titre Première page avec Bootstrap 3 est affiché.

Bonnes pratiques :

Mettez toujours les fichiers css dans le <head> de votre page et les fichiers Javascript juste avant de fermer le </body> comme l’exemple du source ci-dessus vous le montre.

La bibliothèque Bootstrap utilise JQuery pour fonctionner, il faut donc respecter l’ordre de déclaration des bibliothèques (Declarer apres ).

Outils de développement pour Bootstrap

Tout au long de ce cours, nous utiliserons un éditeur de fichiers source gratuit, appelé Notepad++. Il est disponible en téléchargement sur l’adresse suivante:-plus

Parmi ses avantages,  la coloration syntaxique du code source et son interface graphique disponible en plusieurs langues, ce qui lui permet d’être l’un des éditeurs de code source les plus utilisé pour le développement web et aussi pour l’édition des fichiers ordinaires.



Chapitre 2: Bootstrap3 et le système de grille

Comprendre le concept de grille dans le webdesign

I  – Qu’est ce qu’un système de grilles?

..une structure comprenant une série de lignes horizontales et verticales, utilisées pour organiser le contenu d’une page web.

Les grilles sont un élément essentiel en Webdesign, elle vous permet d’organiser harmonieusement le contenu présent sur vos pages.

Outre le fait de produire une mise page bien structurée, les grilles dans le webdesign servent d’armature pour organiser la page et son contenu et favorisent un travail plus rapide au niveau de l’intégration CSS.

II   – La grille de Bootstrap 3:

Bootstap 3 découpe le corps de la page en une grille composée de lignes de 12 colonnes de largeur égale:

Grille Bootstrap 3

Pour mettre en forme le contenu de notre page, nous allons commencer par la déclaration d’une

ligne (en utilisant la classe

.row

), puis nous y intégrerons notre contenu. celui-ci pourra être

divisé en plusieurs blocs, chacun occupant un nombre de colonnes déterminé qui sert à définir sa largeur.

Bootstrap 3 propose quatre systèmes de grilles, chacun correspondant à un type d’écrans :

Grille

Classes

Type d’écran

Taille d’écran

xs : extra small devices

.col-xs-*

Smartphone

< 768 pixels

sm : small devices

.col-sm-*

Tablette

< 992 pixels

md : medium devices

.col-md-*

Écran de bureau

< 1 200 pixels

lg : large devices

.col-lg-*

Grand écran de bureau

 1 200 pixels

L’astérisque correspondant au nombre de colonnes occupé par chaque élément.

 
         

2.1 – Exemple d’utilisation :

Nous allons créer le squelette d’une pageweb composée d’une ligne divisée en deux éléments: une partie centrale occupant 8 colonnes et une autre occupant 4 colonnes.

Commençons par la création d’une ligne à l’aide la classe .row. Et au sein de cette ligne nous ajouterons le premier élément (occupant 8 colonnes) en utilisant la classe .col-md-8 et pour le deuxième élément nous l’ajouterons aussi à l’aide de la classe .col-md-4.

 

1     <!DOCTYPE html> 

2     <html lang="fr"> 

3     <head>

4     <meta charset="utf-8"> 

5     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

6

7 <title>Exemple de grille</title> 

8

9 <link href="" rel="stylesheet"> 

10

11 </head> 

12

13 <body> 

14

15                         <div class="container"> 

16                         <div class="row"> <!-- création d'une ligne -->

17                         <div class="col-md-8"> <!-- 8 colonnes pour la zone principale -->

18                         <h2>Zone principale - élément 1</h2> 

19                         </div>

20

21                         <div class="col-md-4"> <!-- 4 colonnes pour la zone secondaire -->

22                         <h2>Zone secondaire élément 2</h2> 

23                         </div>

24                         </div>

25                         </div>

26

27  </body>

28  </html>

 

2.3 – Explication du code:

Les balises <meta>, <link> et <div class="container"> ont été expliqué dans une autre leçon :première page HTML avec Bootstrap 3.

<div class="row"> : permet la création d’une première ligne

<div class="col-md-8"> <h2>Zone principale</h2> </div> : création de la zone principale de notre page web, il occupe 8 colonnes de la grille destinée aux écrans des ordinateurs de bureau classiques (md).

<div> <h2>Widgets</h2> </div> : Création de la zone secondaire occupant 4 colonnes de la grille .

Comme nous avons utilisé le jeu de classe .col-md-*, la disposition 8 colonnes/4 colonnes s’affiche correctement sur tout écran dont la largeur est supérieure à 992 pixels.

Lorsque nous visionnerons le contenu de cette page sur un Smartphone ou une

Tablette,  Bootstrap 3 repositionnera automatiquement les éléments de notre page(à savoir la zone principale et la zone secondaire).

Dans ce cours « Comprendre le concept de grille dans le webdesign », nous avons découvert comment Bootstrap 3 organise les différentes zones d’une page web en utilisant la grille adaptée à un support déterminé.

Dans le cours suivant, nous allons voir comment créer des pages web optimisées pour chaque type de support (Smartphone, Tablette, Desktop)

Créer une page web multigrille

Dans le cours précédent: (Créer une page web multigrille avec Bootstrap 3), nous avons utilisé une grille dédiée aux écrans d’ordinateurs de bureau classiques (md). Dans ce cours nous allons apprendre à créer des pages web adaptées à plusieurs support (Smartphone, Tablette, Desktop). Pour cela, nous allons combiner plusieurs grilles.

Ici, nous souhaitons que la zone principale occupe:

•    9 colonnes sur un écran de bureau classique (.col-md-10)

•    7 colonnes sur une Tablette (.col-sm-8)

•    5 colonnes sur un Smartphone (.col-xs-6)

Rappel :

 

Pour obtenir le résultat désiré,  nous allons créer une section <div> qui prend en paramètre trois classes : <div class="col-md-10 col-sm-8 col-xs-6"> </div>

Comme nous avons précédemment dit, la grille Bootstrap 3 est composée de 12 colonnes, donc d’une façon symétrique, nous utilisons les classes suivantes pour définir la taille de la zone secondaire :

•    2 colonnes sur un écran de bureau classique (.col-md-2)

•    4 colonnes sur une Tablette (.col-sm-4)

•    6 colonnes sur un Smartphone (.col-xs-6)

Pour créer cette seconde zone, il suffit de créer une section <div> comme suit :

<div class="col-md-2 col-sm-4 col-xs-6"> </div> ci-dessous, l’exemple d’une page multi-grille :

1     <!-- Cours Bootstrap 3 -->

2     <!-- -->

3     <!DOCTYPE html> 

4     <html lang="en"> 

5     <head>

6     <meta charset="utf-8"> 

7

8     <!-- La balise meta permettant à Bootstrap 3 d'analyser la largeur de l'écran -->

9     <meta name="viewport" content="width=device-width, initial-scale=1.0">  10  

11 <title>opentuto - Page multigrille</title> 

12

13     <!--Chargement de la feuille de style de Bootstrap 3 -->

14     <link href="" rel="stylesheet"> 

15

16 </head> 

17

18 <body> 

19

20 <div class="container"> <!--  Début de corps de la plage --> 21  

22 <div class="row"> <!--   Chargement de la grille par le biais de la creation d'une ligne--> 23  

24          <!-- Zone principale -->

25          <div class="col-md-10 col-sm-8 col-xs-6"> 

26          <h2>Zone principale - élément 1</h2> 

27          </div>

28

29          <!-- Zone secondaire  -->

30          <div class="col-md-2 col-sm-4 col-xs-6"> 

31          <h2>Zone secondaire - élément 2</h2> 

32          </div>

33          <!-- Fermeture de la ligne -->

34          </div>

35          <!-- Fin du corps de texte -->

36          </div> 37  

38  </body>

39  </html>

Visionnons maintenant cette page sur notre ordinateur de bureau :

 

En chargeant la page sur un écran de bureau, la grille “medium devices” (.col-md-10 et .col-md2) est prise en compte pour mettre en forme les deux zones. La zone principale occupe donc 10 colonnes. La seconde partie a donc une largeur de 2 colonnes.

   

Décaler les éléments d’une grille

Dans les deux derniers cours (Créer une page web multigrille avec Bootstrap 3etComprendre le concept de grille dans le webdesign), nous avons mis en place des éléments occupant l’intégralité de la largeur du corps de la page (12 colonnes).

 

Mais en pratique, nous avons toujours tendance à créer des pages web composées de plus d’un élément. Par exemple, comment faire à l’aide de Bootstrap 3 pour créer une page composée de deux éléments séparés par un vide, où le premier élément occupera les 6 premières colonnes, un vide de deux colonnes et un deuxième élément de 4 colonnes (ce qui fait 12 colonnes de la grille de Bootstrap 3).

Pour le premiere élément de 6 colonnes, nous utiliserons la classe .col-md-6 qui le mettra en forme. Pour le deuxième élément, nous appellerons la classe .col-md-4. Le décalage (le vide entre les deux élément) sera obtenu à l’aide du jeu de classes .col-md-offset-*, l’astérisque correspondant au nombre de colonnes de décalage souhaité.

Le bout de code ci-dessous, nous permettra d’obtenir le décalage souhaité:

1  <!-- Maitrisez Bootstrap 3 par la pratique-->

2  <!-- -->

3

4 <div class="container"> 

5

6 <div class="row"> 

7

8          <!-- Premier élément occupe les 4 premières colonnes de notre grille --> 

9          <div class="col-md-6"> 

10          <h2>6 colonnes</h2> 

11          </div>

12

13

14          <!-- Deuxième élément occupe les 4 premières colonnes de notre grille --> 

15          <div class="col-md-4 col-md-offset-2"> 

16          <h2>4 colonnes avec décalage de 2 colonnes</h2> 

17          </div>

18

19 </div> 

20

21 </div>

Ce qui donne le résultat ce-dessous sur notre écran :

 

Nous avons vu que le jeu de classes  .col-md-offset-* nous permet de gérer le décalage (créer un vide entre les éléments) sur une grille “medium devices”, adaptée aux écrans d’ordinateurs de bureau classiques. Pour obtenir un décalage sur une grille “small devices” (tablettes), nous utiliserons .col-sm-offset-*. Concernant les smartphones, la grille “extra small devices” sera nécessaire avec .col-xs-offset-*. De la même manière, nous ferons appel à .col-lg-offset-* pour les écrans les plus larges.

Imbriquer plusieurs grilles dans Bootstrap 3

Pour créer des pages web complexes avec Bootstrap 3, il faut commencer à penser “Imbrication des grilles”, dans ce nouveau cours “Imbriquer plusieurs grilles dans Bootstrap 3” nous allons définir une première zone dans le corps de la page dont nous paramétrerons la largeur. Ensuite nous y insérerons une grille, elle-même découpée en 12 colonnes, dans laquelle nous pourrons mettre en forme d’autres contenus :



1        <!-- -->

2        <!-- Création du corps de la page. -->

3        <div class="container"> 

4        <!-- Déclaration de la première grille, au niveau du corps de la page. -->

5        <div class="row"> 

6

7                <!-- Création d'une première zone dont la largeur sera égale à 9 colonnes -->

8                <div class="col-md-9"> 

9                <h2>9 colonnes</h2> 

10             <!-- Création de la seconde grille, cette dernière aura une largeur égale de de la première zone que nous venons de 11 créer  -->

12                   <div class="row"> 

13                   <!-- Insertion d’une première section qui occupe 3 colonnes de notre nouvelle grille. -->

14                   <div class="col-xs-3"> 

15                   <p>.col-xs-3</p>

16                   </div>

17                   <!-- pareil pour l’élément précédent sauf que cette section occupera 5 colonnes de la grille-->

18                   <div class="col-xs-5"> 

19                   <p>.col-xs-5</p>

20                   </div>                                

21                   <!-- cette derniere section occupe le reste de la grille (4 colonnes) -->

22                   <div class="col-xs-4"> 

23                   <p>.col-xs-5</p>

24                   </div>

25                                                  

26             </div>

27             </div>

28

29        </div>

30        </div>

Observons maintenant comment sont organisées ces deux grilles imbriquées :

 

Nous obtenons donc une zone principale occupant 9 colonnes au niveau du corps de la page. Une seconde grille est insérée dans cet élément. Nous y avons créé trois zones : la première occupant 3 colonnes, la seconde 5 et la dernière 4 colonnes.

Changer l’ordre des éléments dans une grille

Par défaut, les zones générées en utilisant une grille sont réparties de gauche à droite. Les classes .col-md-push-* et .col-md-pull-* permettent d’inverser l’ordre des éléments :

1 <div class="container"> 

2

3 <div class="row"> 

4

5     <div class="col-md-4 col-md-push-8"> 

6     <p>Zone déclarée en premier!</p> 

7     </div>

8

9     <div class="col-md-8 col-md-pull-4"> 

10     <p>Zone déclarée en deuxième!</p> 

11     </div>

12

13 </div> 

14

15 </div>

En utilisant la classe .col-md-push-8, nous poussons cette section à la suite de la seconde zone qui est mise en forme à l’aide de la classe .col-md-8.

Mise en place de la seconde zone. Par la classe .col-md-pull-4, nous la tirons devant la zone déclarée précédemment (classe .col-md-4).

Observons maintenant comment sont organisées les deux éléments après inversion d’affichage :

 

Dans les cours/tutos précédents, nous avons donné des exemples des blocs repartis sur 12 colonnes. Ainsi, l’ensemble du contenu se retrouve disposé sur une seule et même ligne.

Et si la somme des colonnes occupées par les éléments de la grille est supérieure à 12 ?

Dans ce cas, Bootstrap 3 affiche automatiquement les blocs sur plusieurs lignes. Pour illustrer ce concept, nous allons créer cinq zones que nous répartirons sur 20 colonnes :

1 <div class="container"> 

2

3

4 <div class="row">  5  

6  <div class="col-md-6"> 

7  <h1>6 colonnes</h1> 

8  </div>

9

10  <div class="col-md-4"> 

11  <h1>4 colonnes</h1> 

12  </div>

13

14  <div class="col-md-4"> 

15  <h1>4 colonnes</h1> 

16  </div>

17

18  <div class="col-md-3"> 

19  <h1>3 colonnes</h1> 

20  </div>

21  <div class="col-md-3"> 

22  <h1>3 colonnes</h1> 

23  </div>

24

25 </div> 

26

27

28 </div>

Visionnons maintenant la page sur notre navigateur :

 

Afficher et cacher du contenu dans Bootstrap 3 en fonction de la taille de l’écran

Bootstrap 3 met à votre disposition une collection de classes permettant d’afficher ou de cacher du contenu en fonction de la taille de l’écran. tout cela pour vous simplifier la vie et vous faciliter  le développement d’une page multisupport.

Nous allons ici présenter les classes .hidden-* et .visible-* que nous utiliserons pour arriver à ce résultat :

 

Classe

Extra small devices (smartphone)

Small devices (tablette)

Medium

devices

(écran de bureau)

Large devices (grand écran)

 

.visible-xs

visible

caché

caché

caché

 

.visiblesm

caché

visible

caché

caché

Classe

Extra small devices (smartphone)

Small devices (tablette)

Medium

devices

(écran de bureau)

Large devices (grand écran)

 

.visible-

md

caché

caché

visible

caché

 

.visible-lg

caché

caché

caché

visible

 

.hiddenxs

caché

visible

visible

visible

 

.hiddensm

visible

caché

visible

visible

 

.hiddenmd

visible

visible

caché

visible

 

.hidden-lg

visible

visible

visible

caché

 

Le tableau ci-dessous vous donne une vue globale et complète Bootstrap 3 permettant de

 

                     

cacher, sur les plus petits supports, certains blocs dont le contenu est secondaire.

Exemple :

<div class="container"> 

1 <div class="row"> 

2

3  <div class="col-md-4 col-xs-6 bordure"> 

4  <h1>1er bloc</h1> 

5  <p>Lorem ipsum dolor sit amet, eu quo aperiri definitionem. Et vis enim munere graece, eros solum vix no, assum 6 dicant dictas mea ne.</p> 

7 </div> 

8

9  <div class="col-md-4 hidden-xs bordure"> 

10  <h1>2eme bloc</h1> 

11  <p>Usu elit admodum interpretaris no.</p>

12  </div>

13

14  <div class="col-md-4 col-xs-6 bordure"> 

15  <h1>3eme bloc</h1> 

16  <p>Veniam definitiones est et, qui no mazim quando. Eu eam case dissentiunt, eos minimum appetere praesent ea. Vim

17  eros utinam at, putant oblique an eos. Iriure torquatos et his, pri id timeam persius.</p>  18 </div> 

19

20 </div> 

</div>

Résultat de la page sur un ordinateur de bureau:

 

Le résultat de la page sur un ordinateur de bureau

 

Le résultat de la page sur un smartphone

Comme attendu, l’usage de la classe

.hidden-xs

 permet de cacher le deuxième bloc sur l’écran

de notre smartphone

Chapitre 3: La typographie

Typographie – Titres et paragraphes

En HTML, on utilise la balise <p> pour insérer un paragraphe et la balise <hx> pour insérer un titre.

Les titres – de h1 à h6

Les balises de <h1> à <h6> désignent les titres, Bootstrap 3 est livré avec un préformatage un peu particulier:

 

Balise

Taille

Padding-top

Padding-bottom

 

h1

36 px

20 px

10 px

 

h2

30 px

20 px

10 px

 

h3

24 px

20 px

10 px

 

h4

18 px

10 px

10 px

Balise

Taille

Padding-top

Padding-bottom

 

h5

14 px

10 px

10 px

 

h6

12 px

10 px

10 px



 

Pour créer des titres dans Bootstrap 3, rien de plus simple :

 

 

                 

1 <h1>Heading 1</h1>  2 <h2>Heading 2</h2>  3 <h3>Heading 3</h3>  4 <h4>Heading 4</h4> 

5  <h5>Heading 5</h5> 

6  <h6>Heading 6</h6>

 

Comment aligner des paragraphes avec Bootstrap 3

Bootstrap 3 vous permet d’organiser facilement vos paragraphes: aligner à gauche, aligner à droite ou au centre.

1 <p class="text-left">Texte à gauche</p>

2

3 <p class="text-right">Texte à droite</p> 

4

5 <p class="text-center">Texte Centré</p>

 

Mettre en valeur une partie du texte avec Bootstrap 3

Pour mettre en valeur un paragraphe de votre page, Bootstrap 3 met à votre disposition un certain nombre d’outils : les citations – la classe lead – les wells a – Les citations :

Pour inserer une citation dans votre page, il suffit d’utiliser la balise <blockquote>. avec Bootstrap 3, vous pouvez utiliser la balise comme suit :

1  <blockquote>

2  "Identify your problems but give your power and energy to solutions." 

3  <small>Tony Robbins</small> 

4  </blockquote>

La balise  <blockquote> indique le début de la citation et la balise <small> pour indiquer sa/ses référence(s).

 

b – Les wells

Les wells permettent d’insérer du texte ou tout autre contenu HTML (listes, liens, …) dans une boite. celle-ci a un arrière plan gris et des bordures aux coins arrondis.

Pour créer un weel, ajoutez la classe .well dans une section <div> comme suit :<div class="well">. Par défaut, les wells ont un padding de 19px et pour modifier le padding par defaut, utilisez les sous-classes .well-lg et .well-sl:

Classe

Padding

.well

19 px (padding par défaut)

.well .well-sm

9 px

.well .well-lg

24 px

Exemple d’utilisation des Wells:

 
     

<div class="well .well-sm">Nullam ultricies ligula vehicula, laoreet urna pharetra, aliquam dui. Vestibulum sit amet

1

venenatis mauris.</div>

 

Dans le cas où vous voudrez ajouter un résumé à la tête d’un long texte, Bootstrap 3 met à votre disposition la classe .lead pour différencier ce résumé et le texte entier de votre page.

<h1></h1>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus dolor vel ante mollis dapibus. Fusce pharetra sem nec risus condimentum lobortis. Pellentesque at augue nunc. Vivamus accumsan ante quis tellus convallis, a commodo</p>

1

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus dolor vel ante mollis dapibus. Fusce pharetra sem

2  nec risus condimentum lobortis. Pellentesque at augue nunc. Vivamus accumsan ante quis tellus convallis, a commodo libero tempor. Duis laoreet nunc arcu, id commodo tortor porttitor in. Quisque volutpat ultricies malesuada. Vestibulum

3  non nisl suscipit, dapibus arcu sed, pellentesque est. Morbi accumsan diam eget tristique fermentum. Phasellus vel nibh sed elit consequat consequat sit amet et dui. Curabitur eget egestas nisi, sed fringilla sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia, purus nec feugiat tempor, massa neque eleifend justo, ac aliquam libero dolor at est. Fusce a molestie sem, ac vulputate diam. Cras vel bibendum erat, non imperdiet turpis. Nulla tincidunt magna id lacus suscipit iaculis. </p>

Ce qui donnera l’aspect visuel suivant :

Exemple de la classe lead – bootstrap 3

Cette partie du cours intitulée: Typographie – Titres et paragraphes dans Bootstrap 3 Vous a permet de mettre en pratique les titres et les paragraphes dans Bootstrap 3 et aussi la découverte des éléments de mis en valeur du texte à l’instar des citation et Wells.

Les messages d’information dans Bootstrap 3

Les classes d’emphase

Bootstrap 3 met à votre disposition plusieurs classes d’emphase pour générer des messages d’information basiques. Le tableau ci-dessous décrit les différentes classes d’emphase :

Classe

Couleur

.text-muted

Gris

.text-primary

Bleu pâle

.text-success

Vert

.text-info

Bleu

.text-warning

Orange

.text-danger

Rouge

Créons à présent nos premiers messages d’information “basiques” :

 
     

1  <p class="text-muted">   Classe muted - Gris</p> 

2  <p class="text-primary"> Classe primary - Bleu pâle</p> 

3  <p class="text-success"> Classe success - Vert</p> 

4  <p class="text-info">    Classe info - Bleu</p> 

5  <p class="text-warning"> Classe warning - Orange</p> 

6  <p class="text-danger">  Classe danger - Rouge</p>

Les messages d’information ont l’aspect (simple coloration du message) suivant :

 

Les bandeaux d’alerte contextuels

Pour donner un aspect professionnel et beaucoup plus ergonomique aux messages d’information, Bootstrap 3 met à votre disposition les bandeaux d’alerte contextuels.

a – Les bandeaux d’alerte simples

Pour créer d’alerte, il convent de faire appel à la classe nous ajouterons à cette classe la sous classe désignant le contexte du message (information, danger,…). Bootstrap 3 mis à votre disposition quarte sous-classes :

 

1  <p class="alert alert-success">Bandeau d’alerte - la classe success</p> 

2  <p class="alert alert-info">Bandeau d’alerte - la classe info</p> 

3  <p class="alert alert-warning">Bandeau d’alerte - la classe warning</p> 

4  <p class="alert alert-danger">Bandeau d’alerte - la classe danger</p> Les bandeaux d’alerte simple ont l’aspect suivant :

 

b – Les bandeaux d’alerte complexes

Nous avons vu dans l’exemple précédent que les bandeaux d’alerte simples ne contiennent que du texte. Mais il est parfois nécessaire d’ajouter du contenu HTML plus complexe. En plus, avec l’API JavaScript de Bootstrap 3, vous avez la possibilité de faire disparaitre un bandeau d’alerte en utilisant soit la fonction fadeOut() de jQuery. Celle-ci, peut être appelée de deux façons : en ajoutant un bouton en forme de croix en haut à droite du bandeau ou en utilisant la fonction ad hoc JavaScript alert().

1     <!DOCTYPE html> 

2     <html lang="fr"> 

3     <head>

4     <meta charset="utf-8"> 

5     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

6

7 <title>Les bandeaux d’alerte complexes - Opentuto</title> 

8

9 <link href="" rel="stylesheet"> 

10

11     <!-- comme nous avons à utiliser l'API JavaScript de Bootstrap 3, nous devons 

12     appeler le framework JQuery. -->

13     <script src=""></script> 

14

15     <!-- Chargement de l'API JavaScript de Bootstrap 3. -->

16     <script src=""></script> 

17     </head>

18

19 <body> 

20

21          <div class="container"> 

22          <br/>

23          <div class="alert alert-dismissable alert-success"> 

24          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 

25

26 <p>Visitez notre premier opentuto : Bootstrap 3! <a href="

bootstrap-3-par-la-pratique/">Bootstrap 3</a></p>  27

28

<p><button id="myButton" type="button" class="btn btn-primary">Fermer</button></p>  29

30

</div> <!-- Fin du bandeau d'alerte -->

31

32

<script> 

33

$('#myButton').click(function(){ /* Après le clic sur l'élément dont l'id est "myButton" (le bouton dans notre

34           cas) "*/

35           $('.alert').alert('close'); /* Faire disparaitre le bandeau d'alerte*/

36           }); 

37           </script> 

38           </div>           

39           </div> 

40

41   </body>

</html>

Explication du code :

<div class="alert alert-dismissable alert-success"> : cette ligne permet de créer un bandeau d’alerte (classe .alert), que l’utilisateur peut faire disparaitre (classe .alert-dismissable), et que nous utiliserons la sous classe .alert-success pour définir l’aspect du message d’alerte.

<button type="button" data-dismiss="alert" aria-hidden="true">&times;</button> : création d’un bouton en forme de croix (&times;) en haut à droite du bandeau.

<p><button id="myButton" type="button">Fermer</button></p> : L’ajout du bouton, qui permet de fermer le bandeau.

 

Pour faire disparaire le bandeau d’alrte, cliquez soit en cliquant sur le bouton “Fermer”, soit en cliquant sur la croix en haut à droite.



438