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 :

Rappel sur les grilles Bootstrap 3

Rappel sur les grilles Bootstrap 3

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 :

<!-- Cours Bootstrap 3 --> <!-- www.opentuto.com --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- La balise meta permettant à Bootstrap 3 d'analyser la largeur de l'écran --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>opentuto - Page multigrille</title> <!--Chargement de la feuille de style de Bootstrap 3 --> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <!--  Début de corps de la plage --> <div class="row"> <!--   Chargement de la grille par le biais de la creation d'une ligne--> <!--  Zone principale --> <div class="col-md-10 col-sm-8 col-xs-6"> <h2>Zone principale - élément 1</h2> </div> <!-- Zone secondaire  --> <div class="col-md-2 col-sm-4 col-xs-6"> <h2>Zone secondaire - élément 2</h2> </div> <!-- Fermeture de la ligne --> </div> <!--  Fin du corps de texte --> </div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- Cours Bootstrap 3 -->
<!-- www.opentuto.com -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
 
    <!-- La balise meta permettant à Bootstrap 3 d'analyser la largeur de l'écran -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>opentuto - Page multigrille</title>
 
    <!--Chargement de la feuille de style de Bootstrap 3 -->
    <link href="css/bootstrap.css" rel="stylesheet">
 
  </head>
 
  <body>
 
      <div class="container"> <!--  Début de corps de la plage -->
 
        <div class="row"> <!--   Chargement de la grille par le biais de la creation d'une ligne-->
 
                <!--  Zone principale -->
                <div class="col-md-10 col-sm-8 col-xs-6">
                       <h2>Zone principale - élément 1</h2>
                </div>
 
                <!-- Zone secondaire  -->
                <div class="col-md-2 col-sm-4 col-xs-6">
                       <h2>Zone secondaire - élément 2</h2>
                </div>
           <!-- Fermeture de la ligne -->
           </div>
      <!--  Fin du corps de texte -->
      </div>
 
  </body>
</html>

 

Visionnons maintenant cette page sur notre ordinateur de bureau :

Page multigrille sur un ordinateur de bureau

Page multigrille sur un ordinateur de bureau

En chargeant la page sur un écran de bureau, la grille “medium devices” (.col-md-10 et .col-md-2) 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.

Page multigrille sur une Tablette

Page multigrille sur une Tablette

Sur la tablette, le navigateur prend en compte les classes .col-sm-8 et .col-sm-4 correspondant à la grille dédiée aux tablettes (“small devices”).

Page multigrille sur smartphone

Page multigrille sur smartphone

Enfin, lorsque la page est affichée sur un smartphone, chaque zone a une largeur de 6 colonnes. Cela correspond à la classe .col-xs-6 de la grille “extra small devices” sélectionnée ici par Bootstrap 3.