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をインストールし、外部構成とデータの問題をマウントします

推薦する

HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法

HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。 1...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

Windows での MySQL5 グリーン バージョンのインストールの概要 (推奨)

1 MySQLをダウンロードするダウンロードアドレス: http://downloads.mysq...

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

MySQL killコマンドの実行原理の詳細な説明

目次キル命令実行原理命令実行特性クエリ実行の強制終了の原則接続終了の実装原則中断される可能性はありま...

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...

MySQL 5.6 での table_open_cache パラメータの最適化と適切な構成の詳細な説明

1. はじめにtable_cache は非常に重要な MySQL パフォーマンス パラメータであり、...

iptables の再起動後に Docker の iptables ルールの完全なプロセスが失われる

原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...

複数クリックを防ぐVueの実践

通常、クリック イベントは、メッセージ リマインダーのさまざまな状況に分割されます。これらが処理され...

JavaScript は大容量ファイルのアップロード処理を実装します

数十 MB 程度の小さいものから 1G 以上の大きいものまで、ビデオ ファイルなどのファイルのアップ...

JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...

deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...