Download WordPress Themes, Happy Birthday Wishes

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.

bootstrap-grid

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:

  • xs (pour les téléphones)
  • sm (pour les tablettes)
  • md (pour les ordinateurs de bureau)
  • lg (pour les plus grands ordinateurs de bureau)

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:

  • Créez une ligne (<div class = « row »>).
  • Ajoutez le nombre de colonnes que vous souhaitez dans la grille (balises avec les classes appropriées .col – * – *).
  • Notez que les nombres en .col – * – * doivent toujours ajouter un maximum de 12 pour chaque ligne.

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 :

Bootstrap - exemple grid

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.

  • .col- (largeur d’écran inférieure à 576 pixels)
  • .col-sm- (largeur de l’écran égale ou supérieure à 576 pixels)
  • .col-md- ( largeur d’écran égale ou supérieure à 768 pixels)
  • .col-lg- (gros périphériques – largeur d’écran égale ou supérieure à 992px)
  • .col-xl- (largeur d’écran égale ou supérieure à 1200px)

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 :

Bootstrap - colonnes égaux

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 :

Bootstrap grid - colonnes inégales