Maison >interface Web >Tutoriel d'amorçage >Parlons de la disposition de la grille dans Bootstrap et voyons comment l'aligner verticalement et horizontalement

Parlons de la disposition de la grille dans Bootstrap et voyons comment l'aligner verticalement et horizontalement

青灯夜游avant: 2021-11-01 11:11:502449parcourir

Cet article vous fera découvrir la disposition de la grille dans Bootstrap et jettera un œil à l'alignement vertical et à l'alignement horizontal. J'espère qu'il vous sera utile !

1. Mise en page de la grille Bootstrap

Dans la section précédente, nous avons présenté la grille dans Bootstrap. La mise en page est un point clé et difficile dans la mise en page Web. Elle doit être le point de départ et le fondement de la conception Web. be Prenez le temps de le comprendre, comprenez au moins le contenu du tutoriel que j'ai écrit, car ce que j'ai écrit est le plus couramment utilisé et le plus basique. Bien sûr, pour un concepteur de sites Web ayant une certaine base, je pense que ces contenus peuvent être compris d'un seul coup d'œil. Aujourd'hui, nous en apprendrons davantage sur la disposition en grille. [Recommandation associée : "Tutoriel bootstrap"]

Cette section implique certaines fonctions de la boîte flexible à usage général (Flex).

2. Alignement vertical

2.1 Définissez l'alignement vertical dans la balise de ligne

en ajoutant align-items-start, align-items-center dans la ligne. La balise , align-items-end peut modifier l'alignement vertical des lignes dans le conteneur. Les trois balises ci-dessus sont respectivement l'alignement supérieur, l'alignement central et l'alignement inférieur. Ce qui suit est un code de démonstration et des rendus. Le code CSS dans le code définit la couleur d'arrière-plan et l'espacement pour une visualisation facile de l'effet. align-items-start、align-items-center、align-items-end可以更改行在容器中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-end">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Parlons de la disposition de la grille dans Bootstrap et voyons comment laligner verticalement et horizontalement

2.2 col标签中设置垂直对齐

通过在col标签中添加align-self-start、align-self-center、align-self-end可以更改列在行中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div class="col  align-self-start"> </div>
            <div class="col align-self-center"></div>
            <div class="col align-self-end"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Parlons de la disposition de la grille dans Bootstrap et voyons comment laligner verticalement et horizontalement

3、水平对齐

3.1 row标签中设置垂直对齐

通过在row标签中添加justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between、justify-content-evenly

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
     .row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
      .col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row justify-content-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-end">
            <div> </div>
## <div></div>
            <div></div>
          </div>

          <div class="row justify-content-around">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-between">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-evenly">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
    </body>
</html>

Parlons de la disposition de la grille dans Bootstrap et voyons comment laligner verticalement et horizontalement

2.2 Définissez l'alignement vertical dans la balise col

🎜 en ajoutant align-self-start, align-self-center, align- dans la col la balise self-end peut modifier l'alignement vertical de la colonne dans la ligne. Les trois étiquettes ci-dessus sont l'alignement supérieur, l'alignement central et l'alignement inférieur. Ce qui suit est un code de démonstration et des rendus. Le code CSS dans le code définit la couleur d'arrière-plan et l'espacement pour une visualisation facile de l'effet. 🎜rrreee🎜 Parlons de la disposition de la grille dans Bootstrap et voyons comment laligner verticalement et horizontalement

🎜🎜 🎜3. Alignement horizontal🎜🎜🎜🎜🎜3.1 Définissez l'alignement vertical dans la balise de ligne🎜🎜🎜🎜 en ajoutant justify-content-start, justify-content-center dans le code de la balise de ligne>, justify-content-end, justify-content-around, justify-content-between, justify- content-evenly Vous pouvez modifier l'alignement horizontal des colonnes dans une rangée. Ce qui suit est un code de démonstration et des rendus. Le code CSS dans le code définit la couleur d'arrière-plan et l'espacement pour une visualisation facile de l'effet. 🎜rrreee🎜🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：À quels fichiers le bootstrap doit-il faire référence ?Article suivant：À quels fichiers le bootstrap doit-il faire référence ?

Articles Liés

Voir plus