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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Bootstrap Webページレイアウトグリッドの実装
  • Bootstrap グリッドシステムレイアウトの詳細な説明
  • ブートストラップグリッドシステムの使い方の分析
  • 魔法のBootstrapグリッドシステムとの初めての出会い
  • 第 4 章: Bootstrap グリッド システムのオフセット列とネストされた列
  • 第3章 Bootstrap グリッドの基礎
  • BootStrap3 学習ノート (I) グリッドシステム
  • Bootstrap 3とFoundation 5のグリッドシステムの類似点と相違点
  • Bootstrap グリッド システムの説明

<<:  Windows での MySQL 8.0.16 のインストールと設定方法のグラフィック チュートリアル

>>:  Dockerはredis 5.0.7をインストールし、外部構成とデータの問題をマウントします

推薦する

VirtualBox での CentOS 8.1 仮想マシンのインストールを最小限に抑える詳細なチュートリアル

1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...

Windows で MySQL インストーラーを使用して MySQL サービスをインストールするチュートリアル図

MYSQL は、MYSQL サービスやその他のコンポーネントをインストールするためのインストーラ方式...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...

Docker execは複数のコマンドを実行します

docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...

Linux プログラムの実行中に動的ライブラリをロードできない場合の解決策

Linux でダイナミック ライブラリをロードできません次のような異常事態が発生した場合./test...

Windows での mysql-5.7.28 のダウンロード、インストール、および構成に関する詳細なグラフィックとテキストのチュートリアル

最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...

サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう: 序文:このアイデアは、Bilibili のアップロード者 Steven ...

UbuntuにMySQLデータベースをインストールする方法

Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

VMware マルチノード環境を構成する方法

このチュートリアルでは CentOS 7 64 ビットを使用します。各仮想マシンに 2GB のメモリ...

Dockerは異常なコンテナ操作を排除する

この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...

mysql と oracle のデフォルトのトランザクション分離レベルの説明

1. トランザクション特性(ACID) (1)原子性トランザクションに関係するプログラムによって実行...

Linux で MySQL をインストールする簡単な方法

Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

SQL実装 LeetCode (176. 2番目に高い給与)

[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...