ホームページ > 記事 > ウェブフロントエンド > Bootstrap のグリッド レイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。
Bootstrap のグリッド レイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。
- 青灯夜游転載
- 2021-11-01 11:11:502321ブラウズ
この記事では、Bootstrap のグリッド レイアウトについて説明し、垂直方向の配置と水平方向の配置について説明します。
1. ブートストラップ グリッド レイアウト
前のセクションでは、ブートストラップのグリッドを紹介しましたが、このグリッドは Web で使用されます。ページ レイアウトは重要かつ難しい点です。レイアウトは Web デザインの出発点であり基礎です。理解するには時間を費やす必要があります。少なくとも、私が書いたチュートリアルの内容は理解してください。なぜなら、私が書いた内容は最も一般的に使用され、基本的なものだからです。 。もちろん、ある程度の基礎を持ったWebデザイナーであれば一目で理解できる内容だと思いますが、今日はグリッドレイアウトについて詳しく学んでいきます。 [関連する推奨事項: "ブートストラップ チュートリアル "]
このセクションでは、汎用フレキシブル ボックス (Flex) のいくつかの機能について説明します。
2. 垂直方向の配置
2.1 行タグで垂直方向の配置を設定します
By 設定行 align-items-start、align-items-center、align-items-end をタグに追加して、行の垂直方向の配置を変更します。上記のコンテナー。3 つのラベルは、上揃え、中央揃え、下揃えです。以下はデモ コードとレンダリングです。コード内の CSS コードは、効果を見やすくするために背景色と間隔を設定します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
.col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
</style>
<title>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row align-items-start">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row align-items-center">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row align-items-end">
<div> </div>
<div></div>
<div></div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
2.2 Col タグで垂直方向の配置を設定する
col タグの align に を追加します。 -self-start、align-self-center、align-self-end は行内の列の垂直方向の配置を変更できます。上記の 3 つのラベルが一番上になります。整列、中央揃え、下揃え。以下はデモ コードとレンダリングです。コード内の CSS コードは、効果を見やすくするために背景色と間隔を設定します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
.col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
</style>
<title>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row align-items-start">
<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>
</body>
</html>
3. 水平方向の配置
##3.1 行タグで垂直方向の配置を設定する##行タグ # に
justify-content-start、justify-content-center、justify-content-end、# を追加します。 #justify-content-around、justify-content-between、justify-content-evenly は、行内の列の水平方向の配置を変更できます。以下はデモ コードとレンダリングです。コード内の CSS コードは、効果を見やすくするために背景色と間隔を設定します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
.col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
</style>
<title>垂直对齐演示</title>
</head>
<body>
<div>
<div class="row justify-content-start">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-center">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-end">
<div> </div>
## <div></div>
<div></div>
</div>
<div class="row justify-content-around">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-between">
<div> </div>
<div></div>
<div></div>
</div>
<div class="row justify-content-evenly">
<div> </div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>プログラミング関連の知識については、
以上がBootstrap のグリッド レイアウトについて説明し、垂直方向と水平方向に整列する方法を見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。