Bootstrapグリッドの垂直および水平配置の詳細な説明

1. Bootstrap グリッドレイアウト

前のセクションでは、Bootstrap のグリッドを紹介しました。グリッドは、Web ページのレイアウトにおける重要なポイントであり、難しさでもあります。レイアウトは、Web デザインの出発点であり、基礎です。時間をかけて理解する必要があります。私が書いたチュートリアルで紹介した内容を少なくとも理解してください。私が書いたのは、最も一般的に使用される基本的なものだからです。もちろん、ある程度の基礎を身につけたWebデザイナーであれば、これらの内容は一目見れば理解できると思います。今日はグリッドレイアウトについてさらに詳しく学んでいきましょう。

このセクションでは、一般的なクラス Flex のいくつかの機能について説明します。

2. 垂直方向の配置

2.1 行タグの垂直方向の配置を設定する

align-items-start、align-items-center、align-items-end を行タグに追加することで、コンテナ内の行の垂直方向の配置を変更できます。上記の 3 つのタグは、それぞれ上揃え、中央揃え、下揃えです。以下は、デモコードと効果の図です。コード内の CSS コードは、効果を確認しやすくするために背景色と間隔を設定します。

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <meta name="キーワード" content="">
    <meta name="説明" コンテンツ="">
    <link href="bootstrap5/bootstrap.min.css" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="スタイルシート">
    <スタイル>
      .row{背景色: rgba(0, 0, 255, 0.178);高さ: 260px;余白:30px;}
      .col{背景色: rgba(101, 101, 161, 0.842);高さ: 80px;パディング: 30px;マージン: 10px;}
    </スタイル>
    <title>垂直配置のデモ</title>
  </head>
  <本文>
        <div class="コンテナ">

          <div class="行の配置-項目-開始">
            <div class="col"> </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>

          <div class="行の要素の中央揃え">
            <div class="col"> </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>

          <div class="行の配置-項目-終了">
            <div class="col"> </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>

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

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

col タグに align-self-start、align-self-center、align-self-end を追加することで、行内の列の垂直方向の配置を変更できます。上記の 3 つのタグは、それぞれ上揃え、中央揃え、下揃えです。以下は、デモコードと効果の図です。コード内の CSS コードは、効果を確認しやすくするために背景色と間隔を設定します。

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <meta name="キーワード" content="">
    <meta name="説明" コンテンツ="">
    <link href="bootstrap5/bootstrap.min.css" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="スタイルシート">
    <スタイル>
      .row{背景色: rgba(0, 0, 255, 0.178);高さ: 260px;余白:30px;}
      .col{背景色: rgba(101, 101, 161, 0.842);高さ: 80px;パディング: 30px;マージン: 10px;}
    </スタイル>
    <title>垂直配置のデモ</title>
  </head>
  <本文>
        <div class="コンテナ">

          <div class="行の配置-項目-開始">
            <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>
  </本文>
</html>

3. 水平方向の配置

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

行タグに justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between、justify-content-evenly を追加することで、行内の列の水平方向の配置を変更できます。以下は、デモコードと効果の図です。コード内の CSS コードは、効果を確認しやすくするために背景色と間隔を設定します。

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <meta name="キーワード" content="">
    <meta name="説明" コンテンツ="">
    <link href="bootstrap5/bootstrap.min.css" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="スタイルシート">
    <スタイル>
     .row{背景色: rgba(0, 0, 255, 0.178);高さ: 120px;余白:10px;}
      .col-4{背景色: rgba(101, 101, 161, 0.842);高さ: 30px;パディング: 10px;マージン: 10px;}
    </スタイル>
    <title>垂直配置のデモ</title>
  </head>
  <本文>
        <div class="コンテナ">

          <div class="行の両端揃え-コンテンツの開始">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="行の中央揃え">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="行の両端揃え-コンテンツ終了">
            <div class="col-4"> </div>
## <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

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

          <div class="行の両端揃え-コンテンツの間">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="行の両端揃え-コンテンツ-均等">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>
        </div>

Bootstrap グリッドの垂直および水平配置の詳細な説明に関するこの記事はこれで終わりです。Bootstrap グリッドの垂直および水平配置に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: