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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows での MySQL 8.0.16 のインストールと設定方法のグラフィック チュートリアル
>>: Dockerはredis 5.0.7をインストールし、外部構成とデータの問題をマウントします
HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。 1...
目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...
1 MySQLをダウンロードするダウンロードアドレス: http://downloads.mysq...
コンテナを作成する [root@server1 ~]# docker run -it --name ...
以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...
目次キル命令実行原理命令実行特性クエリ実行の強制終了の原則接続終了の実装原則中断される可能性はありま...
1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...
1. はじめにtable_cache は非常に重要な MySQL パフォーマンス パラメータであり、...
原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
通常、クリック イベントは、メッセージ リマインダーのさまざまな状況に分割されます。これらが処理され...
数十 MB 程度の小さいものから 1G 以上の大きいものまで、ビデオ ファイルなどのファイルのアップ...
JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...
ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...
目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...