Bootstrapの行と列のレイアウト設計（ネットワークシステム設計）

開発 2023-09-05 18:36:36 訪問数: null

目次

00-基礎知識

01. Bootstrap のグリッド システムは、画面幅を 12 列に分割します。

01-等幅列レイアウト

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>等宽列布局网页效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">等宽列布局网页效果</h3>
<div class="row">
    <div class="col border py-3 bg-light">二分之一</div>
    <div class="col border py-3 bg-light">二分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
</div>
</body>
</html>

ランニング効果は以下の通りです。
ここに画像の説明を挿入

02-列の幅を指定する

サンプルコード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置一个列宽布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">指定某一列的宽度</h3>
<div class="row">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-7 border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>
<div class="row">
    <div class="col-3 border py-3 bg-light">左</div>
    <div class="col border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>
</body>
</html>

質問: Bootstrap のクラスcol、クラスcol-7、クラスcol-3の違いは何ですか?
答え：

  1. クラス列:

    • これは、グリッド列を定義するための基本クラスです。
    • Col クラスのみを使用する場合は、デフォルトで等幅列になり、使用可能な列幅が自動的に均等に分割され、各列は同じスペースを占有します。
    • 例：<div class="col">...</div>

  2. クラス列-7:

    • これは、col-7 などの数値接尾辞が付いたクラスで、指定された幅のグリッド列を定義するために使用されます。
    • 数値接尾辞は、その列が占有するグリッド列の数​​を示します。この場合、col-7 は、その列がグリッド システム内の 7 列を占める必要があることを意味します。
    • このクラスを使用すると、不等幅の列を作成して、設計のニーズに応じて異なる幅を割り当てることができます。
    • 例：<div class="col-7">...</div>

  3. クラス列-3:

    • クラス Col-3 は、col-3 などの数値接尾辞を持つクラスでもあり、異なる幅のグリッド列を定義するために使用されます。
    • 数値接尾辞は、その列が占有するグリッド列の数​​を示します。この場合、col-3 は、その列がグリッド システム内の 3 列を占める必要があることを意味します。
    • Col-7 と同様に、col-3 では、デザインのニーズに合わせて幅が等しくない列を作成できます。
    • 例:<div class="col-3">...</div>
      コードを実行すると、次のような効果が得られます。
      ここに画像の説明を挿入

03 - 内容に応じて列の幅を自動的に変更する

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>根据内容自动改变列的宽度</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
	
	<style>
	  h3 {
      
      
		color: red;
	  }
	</style>

</head>
<body class="container">
<h3 class="mb-4">根据内容自动改变列的宽度</h3>
<div class="row">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-md-auto border py-3 bg-light">醉里且贪欢笑,要愁那得工夫。近来始觉古人书,信著全无是处。</div>
    <div class="col border py-3 bg-light">右</div>
</div>
<div class="row justify-content-md-center">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-md-auto border py-3 bg-light">醉里且贪欢笑,要愁那得工夫。</div>
    <div class="col border py-3 bg-light">右</div>
</div>
</body>
</html>

これは主にクラスcol-md-auto:によって実現されます
col-md-auto。

  • col-md-automdこのクラスは、中程度の画面 (画面サイズ。通常は 768 ピクセル以上の画面幅を指します) のコンテンツに応じて列要素の幅を自動的に調整する必要があることを定義するために使用されます。
  • クラスが適用される列要素にcol-md-autoテキストまたはその他のコンテンツが含まれる場合、列はそのコンテンツのサイズに合わせて幅を自動的に調整します。
  • このクラスは、レスポンシブ レイアウトの作成によく使用されます。これにより、中程度の画面サイズで、コンテンツの量に応じて列の幅が自動的に調整され、コンテンツがオーバーフローしたり、混雑しすぎたりすることがなくなります。
    ランニング効果は次の図に示されています。
    ここに画像の説明を挿入

04- 5 つの事前定義された列幅.col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*

.col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*小から大までの 5 つの事前定義された幅 (特小、小、中、中、特大) があります。
ブートストラップを使用する場合、さまざまな CSS クラスを使用してさまざまな列幅を定義できます。以下は、5 つの一般的な定義済み列幅クラスのサンプル コードです。

  1. .col-*: 列の幅をビューポートの幅のすべての寸法で均等に分割します。
<div class="container">
  <div class="row">
    <div class="col">1/3</div>
    <div class="col">1/3</div>
    <div class="col">1/3</div>
  </div>
</div>
  1. .col-sm-*: ビューポートの幅サイズが 576 ピクセル以上の場合、列の幅は均等に分割されます。サイズが 576 ピクセル未満の場合、列は積み重ねられます。つまり、各列が行全体の幅を占めます。
<div class="container">
  <div class="row">
    <div class="col-sm">1/2</div>
    <div class="col-sm">1/2</div>
  </div>
</div>
  1. .col-md-*: ビューポートの幅サイズが 768px 以上の場合、列幅は均等に分割されます。サイズが 768px 未満の場合、列は積み上げられます。つまり、各列が行全体の幅を占めます。
<div class="container">
  <div class="row">
    <div class="col-md">1/4</div>
    <div class="col-md">1/4</div>
    <div class="col-md">1/4</div>
    <div class="col-md">1/4</div>
  </div>
</div>
  1. .col-lg-*: ビューポートの幅サイズが 992px 以上の場合、列幅は均等に分割されます。サイズが 992px 未満の場合、列は積み上げられます。つまり、各列が行全体の幅を占めます。
<div class="container">
  <div class="row">
    <div class="col-lg">1/2</div>
    <div class="col-lg">1/2</div>
  </div>
</div>
  1. .col-xl-*: ビューポートの幅サイズが 1200 ピクセル以上の場合、列の幅は均等に分割されます。サイズが 1200 ピクセル未満の場合、列は積み重ねられます。つまり、各列が行全体の幅を占めます。
<div class="container">
  <div class="row">
    <div class="col-xl">1/3</div>
    <div class="col-xl">1/3</div>
    <div class="col-xl">1/3</div>
  </div>
</div>

これらのサンプル コードは、さまざまな列幅クラスを使用してレスポンシブ グリッド レイアウトを作成し、さまざまな画面サイズでさまざまな列幅をレンダリングする方法を示しています。

高度なサンプルコード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平排列布局的网页效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">水平排列</h3>
<!--在视口尺寸大于等于576px时等分列宽-->
<div class="row">
    <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
    <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>
<!--在视口尺寸大于等于768px时等分列宽-->
<div class="row">
    <div class="col-md-8 border py-3 bg-light">col-md-8</div>
    <div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>
</body>
</html>

上記のコードの最初の div については次のようになります。

<div class="row">
    <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
    <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>

ビューポートの幅が 576 ピクセル以上の場合、<div class="row">最初の列は次のように表示されます。

  1. <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>: 576 ピクセル未満のビューポートでは、この列は行全体の幅を占めますが、576 ピクセル以上のビューポートでは、クラスを使用するため、親の幅の 8/12 (2/3) を占めますcol-sm-8。コンテナの幅の残りの 4/12 (1/3) が次の列に残されます。

  2. <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>: 576px 未満のビューポートでは、この列は行全体の幅を占めますが、 576px 以上のビューポートでは、その使用のためにcol-sm-4親コンテナの幅の 4/12 (1/3) を占めます。前の列を合わせると行全体が埋められます。

したがって、ビューポートの幅が 576 ピクセル以上の場合、<div class="row">最初の列は水平に整列し、1 つは幅の 2/3 を占め、もう 1 つは幅の 1/3 を占めます。
関連する実行中のスクリーンショットは次のとおりです。
ここに画像の説明を挿入
ここに画像の説明を挿入

上記のコードの 2 番目の div は次のようになります。

<div class="row">
    <div class="col-md-8 border py-3 bg-light">col-md-8</div>
    <div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>

  1. ビューポートの幅が 768 ピクセル未満の場合、Bootstrap はデフォルトで列をスタックし、各列が行全体の幅を占めます。したがって、 または の<div class="col-md-8 border py-3 bg-light">col-md-8</div>いずれかが<div class="col-md-4 border py-3 bg-light">col-md-4</div>、垂直方向の配置で上下に 1 つずつ、幅全体を占めます。

  2. ビューポートの幅が 768px 以上の場合 (mdレベル以上)、2 番目の列は、<div class="row">指定された列幅に従って親コンテナの幅を占めます。具体的には：

    • <div class="col-md-8 border py-3 bg-light">col-md-8</div>: 親コンテナの幅の 8/12 (2/3) を占めます。

    • <div class="col-md-4 border py-3 bg-light">col-md-4</div>: 親コンテナの幅の 4/12 (1/3) を占めます。

    これら 2 つの列は同じ行に水平に配置され、1 つは幅の 2/3 を占め、もう 1 つは幅の 1/3 を占めます。
    ランニング効果は次の図に示されています。
    ここに画像の説明を挿入

    携帯電話で測定された効果は次のとおりです。
    ここに画像の説明を挿入
    上記の紹介によると、Haohongjun のモバイル ブラウザのビューポート サイズは 576 ピクセルより小さくなければならないことがわかります。

タブレットに対する測定された効果は次のとおりです。
ここに画像の説明を挿入
上記の紹介によると、Haohongjun のタブレット上のブラウザのビューポート サイズは 768 ピクセル以上である必要があることがわかります。

05 - 異なるビューポート幅は異なる列スキームに従って分割されます

576px 未満のデバイスでは全角列が 8 部、576px 以上のデバイスでは半角列が 4 部表示されます (合計 12 部)。
サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>不同视口宽度按不同的分列方案划分</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">不同视口宽度按不同的分列方案划分</h3>
<!--在小于576px的设备上显示为一个全宽列和一个半宽列，在大于等于576px型设备上显示为一列，分别占8份和4份(一共12份)-->
<div class="row">
    <div class="col-12 col-sm-8 border py-3 bg-light">.col-12 .col-sm-8</div>
    <div class="col-6 col-sm-4 border py-3 bg-light">.col-6 .col-sm-4</div>
</div>
</body>
</html>

ランニング効果は次の図に示されています。
ここに画像の説明を挿入
ここに画像の説明を挿入

06-列コンテンツのボックスモデルの余白を削除する

ここに画像の説明を挿入
no-gutter クラスを使用すると、列コンテンツの左右のマージン、つまり margin-left と margin-right を削除できます。

Bootstrap のクラスは、水平方向に隙間がないように、列 ( ) コンテンツ間の左右のマージンno-guttersを削除するために使用されます。これにより、列の間に水平方向の空白がなく、水平方向に配置された列が作成され、よりコンパクトなレイアウトが可能になります。これは列の上下のマージンには影響しないため、垂直方向にはデフォルトの上下のマージンが残ります。col

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>删除列内容的左右外边距</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">删除列内容的左右外边距</h3>

<div class="row">
  <div class="col border py-3 bg-light">Column 1</div>
  <div class="col border py-3 bg-light">Column 2</div>
</div>

<div class="row no-gutters">
  <div class="col border py-3 bg-light">Column 1</div>
  <div class="col border py-3 bg-light">Column 2</div>
</div>

</body>
</html>

ランニング効果は以下の通りです。
ここに画像の説明を挿入

07-列が 12 個を超える場合はどうすればよいですか?

1 行に 12 列を超える列が配置されている場合、余分な列は新しい行に表示されます。

08-列の順序を並べ替えます

08-1- クラス .order-* を使用して列を並べ替えます

クラス .order-* を使用して列を並べ替えることができます。ブートストラップでは、.order-1 から .order-12 までの合計 12 レベルの順序が提供され、すべての主要なブラウザーで有効になります。

注: .order-* クラスのない要素は、デフォルトで最初に順序付けされます。

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>重新排列各列的顺序</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">重新排列各列的顺序</h3>
<div class="row">
    <div class="col order-12 py-3 border bg-light">
        order-12
    </div>
    <div class="col order-1 py-3 border bg-light">
        order-1
    </div>
    <div class="col order-6 py-3 border bg-light">
        order-6
    </div>
	
	<!--没有定义.order-* 类的元素默认排在最前面。-->
    <div class="col py-3 border bg-light">
        col
    </div>
</div>
</body>
</html>

ここに画像の説明を挿入

08-2 - class .order-first および class .order-last を使用して列を並べ替えます

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用order-first和order-last类</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-4">使用order-first和order-last类排列顺序</h3>
<div class="row">
    <div class="col order-last py-3 border bg-light">
        order-last
    </div>
    <div class="col py-3 border bg-light">
        col
    </div>
    <div class="col order-first py-3 border bg-light">
        order-first
    </div>
</div>
</body>
</html>

ランニング効果は以下の通りです。
ここに画像の説明を挿入

09-列の位置にオフセットを追加します（列オフセットの実現）

09-1 - .offset-md-* クラスを使用して列オフセットを実装する

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用.offset-md-*类实现列偏移</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">使用.offset-md-*类实现列偏移</h3>
<div class="row">
    <div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-3 .offset-md-3</div>
    <div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 offset-md-4 py-3 border bg-light">.col-md-4 .offset-md-4</div>
</div>
</body>
</html>

ランニング効果は次の図に示されています。
ここに画像の説明を挿入

09-2- ml-auto と mr-auto を使用して左右のマージンを調整し、列のオフセットを実現します

ml-auto クラスは要素の左マージンに適用され、コンテナの境界線または別の要素が接触するまでこの要素が右に移動し、右揃えの効果が得られます。
mr-auto クラスは要素の右マージンに適用され、コンテナの境界線または別の要素が接触するまでこの要素が左に移動し、左揃えの効果が得られます。
これら 2 つのクラスは、ナビゲーション バー、ボタン グループ、その他のレイアウト内の要素の位置を調整して、視覚効果とユーザー エクスペリエンスを向上させるためによく使用されます。
サンプルコード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用margin类实现列偏移</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">使用margin类实现列偏移</h3>
<div class="row">
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
</div>
<div class="row">
    <div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
    <div class="col-auto mr-auto py-3 border bg-light">.col-auto .mr-auto</div>
    <div class="col-auto py-3 border bg-light">.col-auto</div>
</div>
</body>
</html>

ランニング効果は次の図に示されています。
ここに画像の説明を挿入

10 - 行と列のネスト

特定の行と列で形成されるボックス内に行と列を入れ子にすることができます。サンプル コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行列嵌套布局网页效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">行列嵌套布局效果</h3>
<div class="row">
    <div class="col-6">
        <!--嵌套行和列-->
        <div class="row border no-gutters">
            <div class="col-3"><img src="1.jpg" alt=""></div>
            <div class="col-9 pl-3">
                哈密瓜主产于吐哈盆地（即吐鲁番盆地和哈密盆地的统称），它形态各异，风味独特，瓜肉肥厚，清脆爽口。
            </div>
        </div>
    </div>
    <div class="col-6">
        <!--嵌套行和列-->
        <div class="row border no-gutters">
            <div class="col-3"><img src="2.jpg" alt=""></div>
            <div class="col-9 pl-3">
                葡萄为著名水果，生食或制葡萄干，并酿酒，酿酒后的酒脚可提酒石酸，根和藤药用能止呕、安胎。
            </div>
        </div>
    </div>
</div>
</body>
</html>

ランニング効果は以下の通りです。
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/wenhao_ir/article/details/132667178
おすすめ
ランキング
k8s 通过set-context 控制namespace 进行隔离
Offensive and Defense World Web の初心者ゾーンのいくつかの質問に対する解決策
Macはpipのインストールが遅いという問題を恒久的に解決します
Spring-SSM整合详细版本-纯注解
5G率は、実際には5GのBBの致死率の最も弱い兵器システムであります
第3章 バス
MySQLデータベース-SQLステートメント（1）（高レベルのアプリケーション）（詳細なグラフィックとテキスト）
インターフェース設計法（2）—1。インターフェースとコンポーネントの概念
Netty フレームワークを理解する
partedコマンドの詳細説明 - パーティション
アーカイブ
もっと
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)

コードワールド

© 2018 codetd.com