Bootstrap のグリッドレイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。-ブートストラップのチュートリアル-php.cn

Bootstrap のグリッドレイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。

青灯夜游

リリース： 2021-11-01 11:11:50

転載

2440 人が閲覧しました

この記事では、Bootstrap のグリッドレイアウトについて説明し、垂直方向の配置と水平方向の配置について説明します。

Bootstrap のグリッドレイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。

1. ブートストラップグリッドレイアウト

前のセクションでは、ブートストラップのグリッドを紹介しましたが、このグリッドは Web で使用されます。ページレイアウトは重要かつ難しい点です。レイアウトは Web デザインの出発点であり基礎です。理解するには時間を費やす必要があります。少なくとも、私が書いたチュートリアルの内容は理解してください。なぜなら、私が書いた内容は最も一般的に使用され、基本的なものだからです。。もちろん、ある程度の基礎を持ったWebデザイナーであれば一目で理解できる内容だと思いますが、今日はグリッドレイアウトについて詳しく学んでいきます。 [関連する推奨事項: "ブートストラップチュートリアル "]

このセクションでは、汎用フレキシブルボックス (Flex) のいくつかの機能について説明します。

2. 垂直方向の配置

2.1 行タグで垂直方向の配置を設定します

By 設定行 align-items-start、align-items-center、align-items-end をタグに追加して、行の垂直方向の配置を変更します。上記のコンテナー。3 つのラベルは、上揃え、中央揃え、下揃えです。以下はデモコードとレンダリングです。コード内の 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>

ログイン後にコピー

Bootstrap のグリッドレイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。

2.2 Col タグで垂直方向の配置を設定する

col タグの align に を追加します。 -self-start、align-self-center、align-self-end は行内の列の垂直方向の配置を変更できます。上記の 3 つのラベルが一番上になります。整列、中央揃え、下揃え。以下はデモコードとレンダリングです。コード内の 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>

ログイン後にコピー

Bootstrap のグリッドレイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。

3. 水平方向の配置

##3.1 行タグで垂直方向の配置を設定する##行タグ # に

justify-content-start

、justify-content-center、justify-content-end、# を追加します。 #justify-content-around、justify-content-between、justify-content-evenly は、行内の列の水平方向の配置を変更できます。以下はデモコードとレンダリングです。コード内の 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: 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>

ログイン後にコピー

プログラミング関連の知識については、 Bootstrap のグリッドレイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。プログラミングビデオ