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をインストールし、外部構成とデータの問題をマウントします
1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...
MYSQL は、MYSQL サービスやその他のコンポーネントをインストールするためのインストーラ方式...
背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...
docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...
Linux でダイナミック ライブラリをロードできません次のような異常事態が発生した場合./test...
最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...
まず効果を見てみましょう: 序文:このアイデアは、Bilibili のアップロード者 Steven ...
Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
このチュートリアルでは CentOS 7 64 ビットを使用します。各仮想マシンに 2GB のメモリ...
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
1. トランザクション特性(ACID) (1)原子性トランザクションに関係するプログラムによって実行...
Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...
エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...
[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...