w3tutoriels.com

Bootstrap Grid

Le système de grille Bootstrap autorise jusqu’à 12 colonnes sur la page. Vous pouvez utiliser les 12 colonnes individuellement ou regrouper les colonnes pour créer des colonnes plus larges.

Le système Bootstrap grid est réactif et les colonnes sont réorganisées automatiquement en fonction de la taille de l’écran.

Classes de grille:

il existe quatre classes dans le système de grille Bootstrap:

Vous pouvez combiner les classes ci-dessus pour créer des mises en page plus dynamiques et flexibles.

Structure de base de Bootstrap grid:

<div class="row">  
  <div class="col-*-*"></div>  
</div>  
<div class="row">  
  <div class="col-*-*"></div>  
  <div class="col-*-*"></div>  
  <div class="col-*-*"></div>  
</div>  
<div class="row">  
  ...  
</div>

Suivez les instructions ci-dessous lors de la création d’une grille Bootstrap:

Exemple de grille bootstrap

Pour des colonnes égales:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <title>Test</title>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  
  <body>  
  
<div class="container">  
  <h1>Grid Exemple</h1>  
  
<div class="row">  
  <div class="col-md-3"style="background-color:lavender;">Raefskov</div>  
  <div class="col-md-3"style="background-color:lavenderblush;">Hadil</div>  
  <div class="col-md-3"style="background-color:lavender;">Hedi</div>  
  <div class="col-md-3"style="background-color:lavenderblush;">Ghri</div>  
</div>  
  
</div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  </body>  
</html>

Résultat :

Pour des colonnes inégales:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <title>Job</title>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  
  <body>  
  
<div class="container">  
  <h1>Grid Example</h1>  
  
<div class="row">  
  <div class="col-md-1"style="background-color:lavender;">Raefskov</div>  
  <div class="col-md-2"style="background-color:lavenderblush;">Hadil</div>  
  <div class="col-md-4"style="background-color:lavender;">Hedi</div>  
  <div class="col-md-5"style="background-color:lavenderblush;">Ghri</div>  
</div>  
  
</div>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  </body>  
</html>

Classes de Grid Bootstrap 4

Il y a 5 classes dans le système de grille Bootstrap 4.

Vous pouvez également combiner les classes ci-dessus pour créer des mises en page plus dynamiques et flexibles.

Structure de Grid Bootstrap 4

Voir la structure de base de la grille Bootstrap 4:

<!-- Contrôler la largeur de la colonne et son apparence sur différents périphériques -->  
<div class="row">  
  <div class="col-*-*"></div>  
  <div class="col-*-*"></div>  
</div>  
<div class="row">  
  <div class="col-*-*"></div>  
  <div class="col-*-*"></div>  
  <div class="col-*-*"></div>  
</div>  
  
<!-- Ou laissez Bootstrap gérer automatiquement la mise en page -->  
<div class="row">  
  <div class="col"></div>  
  <div class="col"></div>  
  <div class="col"></div>  
</div>

Commencez par créer une ligne (<div class = « row »>), puis ajoutez le nombre de colonnes souhaité (balises avec les classes .col – * – * appropriées).

Dans .col – * – *, la première étoile (*) représente la réactivité: sm, md, lg ou xl, tandis que la deuxième étoile représente un nombre, ce qui devrait donner un total de 12 pour chaque ligne.

Exemple de colonnes égales

Prenons un exemple pour voir comment créer une colonne de largeur égale sur tous les périphériques et toutes les largeurs d’écran:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Exemple</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container-fluid">  
  <h2>Three equal-width columns</h2>  
  <div class="row">  
    <div class="col" style="background-color:lavender;">.col</div>  
    <div class="col" style="background-color:orange;">.col</div>  
    <div class="col" style="background-color:lavender;">.col</div>  
  
  </div>  
</div>  
  
</body>  
</html>

Résultat :

Exemple de colonnes inégales

Prenons un exemple pour voir comment créer une colonne de largeur inégale prenant en charge les tablettes et la mise à l’échelle sur des bureaux de grande taille:

Exemple:

<!DOCTYPE html>  
<html lang="fr">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container-fluid">  
  <h1>Unequal Columns</h1>  
  <p>Redimensionnez la fenêtre du navigateur pour voir l'effet.</p>  
  <p>Les colonnes s'empileront automatiquement les unes sur les autres lorsque l'écran aura une largeur inférieure à 576px.</p>  
  <div class="row">  
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>  
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>  
  </div>  
</div>  
      
</body>  
</html>

Résultat :

 

Quitter la version mobile