ブートストラップにグリッドレイアウトはありますか?-ブートストラップのチュートリアル-php.cn

ブートストラップにはグリッドレイアウトがありますか

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

ブートストラップにグリッドレイアウトはありますか?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 16, 2022 am 11:10 AM

bootstrap

ブートストラップにはグリッドレイアウトがあります。グリッドレイアウトとは、行を 12 のグリッドに分割し、レイアウトのために 12 のグリッドを異なる div 要素に割り当てることを指します。列の占有率を設定できます。グリッドの数は、列の占有率を設定するために使用されます。列の幅と列の数は、モジュール式ページレイアウトの定義に使用されます。

ブートストラップにグリッドレイアウトはありますか?

このチュートリアルの動作環境: Windows 10 システム、ブートストラップバージョン 5、DELL G3 コンピューター

ブートストラップにはグリッドレイアウトがありますか

ブートストラップにはグリッドレイアウトがあります

1. グリッドレイアウトとは何ですか?

Web ページのレイアウトを作成する場合、これまではテーブルを分割して Web ページを大小の表に分割し、その表から要素を埋め込んでいくテーブルレイアウトが使用されていました。その後、div css レイアウトに発展しました。 div CSS経由でfloatします。 float:right と float:left のレイアウト。

ブートストラップではグリッドレイアウトが使用されるようになりました。簡単に言うと、行は 12 個のグリッドに分割されます。レイアウト用に 12 個のグリッドをさまざまな DIV 要素に割り当てます。

Bootstrap にグリッドレイアウトを導入し、ページをテーブルのようなレイアウトに分割しました。
各行は 12 列で構成され、列が占める列の数を設定することで列の幅を設定します
#さまざまなデバイス幅に対応する 5 つのレスポンシブサイズを備えたレスポンシブレイアウトをサポートします
フレックスボックスフローレイアウトを使用してページレイアウトを実現します。
div を使用してコンテナ、行、列のレイアウトを実現します

2。グリッドレイアウトを実装するにはどうすればよいですか?

まず第一に、ブートストラップ、Webpack の読み込み、CND 参照の使用など、さまざまな方法があります。バージョン 3.37 を CDN からローカルコンピューターに直接ダウンロードしました。次に、リンクタグを使用してそれを参照します。これは、Jquery を参照するのと似ています。

次に、レイアウトに従ってグリッドを割り当てます。たとえば、3 列の大きな水平レイアウトを実装するとします。次に、12/3=4 個のグリッドを各 DIV に割り当てます。

3 つの列が等しくない場合は、左側に約 3 個、中央に 5 個、右側に 4 個のグリッドが存在します。

具体的な操作:

最初にグリッドを格納するコンテナ div を配置し、その div にコンテナクラスを追加してコンテナを実装します。
is 行クラスをサブ要素に追加して行レイアウトを実装し、col-* を使用して列レイアウトを実装します。
クラス名がcontainer-fluidの場合、デフォルトは占有されます。 width は 100%、ページ全体を占めます
col- を使用する場合、サイズが設定されていない場合、デフォルトで幅はインテリジェントに均等に分割されます。が設定されている場合、ページスペースは比例的に分割されます
ただし、同じ行内の * のサイズは 12 を超えることはできません。12 未満の場合もあり、空白が存在します。 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">
  <!--  引入bootstrap.css文件-->
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .row {
      border: 1px dashed #000;
      margin-top: 20px;
    }
    .col {
      border: 1px solid #0069d9;
      background: #f1b0b7;
    }
  </style>
</head>
<body>
<!--  不设置*的大小，默认平分列的宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--设置container-fluid默认占满宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--当设置*的大小时，默认按照比例分割宽度-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-5">第三列</div>
  </div>
</div>
<!--小于12时，会出现空白区域-->
<div>
  <div>
    <div class="col col-sm-3">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-3">第三列</div>
  </div>
</div>
<!--当超出12时，会自动换行-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-5">第二列</div>
    <div class="col col-sm-7">第三列</div>
  </div>
</div>
<!--首先引入jQuery文件，再引入poper文件，最后引入bootstrap文件-->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

ログイン後にコピー

3. グリッドレイアウトクラスパラメーターの意味は何ですか?

グリッドクラスには4つのcol-lg-1、col-md-1、col-sm-1、col-xs-1があり、大画面(large)、中画面(middl)、小画面(smll)、極度の画面に対応します。小さい画面（xs）。このうち、col は列を意味し、真ん中はサイズの略称、最後は div によって割り当てられたグリッドサイズ (例は 1/12 を占める)

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7325

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Eclipseにブートストラップを導入する方法 Apr 05, 2024 am 02:30 AM

5 つのステップで Eclipse に Bootstrap を導入します。 Bootstrap ファイルをダウンロードして解凍します。 Bootstrap フォルダーをプロジェクトにインポートします。ブートストラップの依存関係を追加します。 Bootstrap CSS と JS を HTML ファイルにロードします。ブートストラップの使用を開始して、ユーザーインターフェイスを強化します。

アイデアをブートストラップに導入する方法 Apr 05, 2024 am 02:33 AM

IntelliJ IDEA に Bootstrap を導入する手順: 新しいプロジェクトを作成し、「Web アプリケーション」を選択します。「Bootstrap」Maven 依存関係を追加します。 HTML ファイルを作成し、ブートストラップ参照を追加します。 Bootstrap CSS ファイルへの実際のパスに置き換えます。 HTML ファイルを実行してブートストラップスタイルを使用します。ヒント: CDN を使用して、ブートストラップをインポートしたり、HTML ファイルテンプレートをカスタマイズしたりできます。

ブートストラップメディエーション効果テスト結果をstataで読み取る方法 Apr 05, 2024 am 01:48 AM

Stata でのブートストラップ媒介効果テストの解釈手順: 係数の符号を確認します: 媒介効果の正または負の方向を決定します。検定の p 値: 0.05 未満は、仲介効果が有意であることを示します。信頼区間を確認します。ゼロが含まれていない場合は、仲介効果が有意であることを示します。中央値の p 値を比較すると、0.05 未満であるため、仲介効果の重要性がさらに裏付けられます。

大型モデル間の1対1バトル75万ラウンド、GPT-4が優勝、Llama 3が5位にランクイン Apr 23, 2024 pm 03:28 PM

Llama3 に関しては、新しいテスト結果が発表されました。大規模モデル評価コミュニティ LMSYS は、Llama3 が 5 位にランクされ、英語カテゴリでは GPT-4 と同率 1 位にランクされました。このリストは他のベンチマークとは異なり、モデル間の 1 対 1 の戦いに基づいており、ネットワーク全体の評価者が独自の提案とスコアを作成します。最終的に、Llama3 がリストの 5 位にランクされ、GPT-4 と Claude3 Super Cup Opus の 3 つの異なるバージョンが続きました。英国のシングルリストでは、Llama3 がクロードを追い抜き、GPT-4 と並びました。この結果について、Meta の主任科学者 LeCun 氏は非常に喜び、リツイートし、

ブートストラップを使用してメディエーション効果をテストする方法 Apr 05, 2024 am 03:57 AM

ブートストラップテストは、リサンプリングテクノロジーを使用して統計テストの信頼性を評価し、媒介効果の有意性を証明するために使用されます。まず、直接効果、間接効果、および媒介効果の信頼区間を計算します。次に、統計的テストの有意性を計算します。 Baron and Kenny または Sobel 法に従った仲介タイプ、重要性、そして最後に自然な間接効果の信頼区間を推定します。

ブートストラップメディエーションテストの結果の見方 Apr 05, 2024 am 03:30 AM

ブートストラップメディエーションテストは、データを複数回リサンプリングすることによってメディエーション効果を評価します: 間接効果信頼区間: メディエーション効果の推定範囲を示します。間隔にゼロが含まれない場合、効果は有意です。 p 値: 信頼区間にゼロが含まれない確率を評価し、0.05 未満の値が有意であることを示します。サンプルサイズ: 分析に使用されるデータサンプルの数。ブートストラップサブサンプリング時間: 繰り返されるサンプリングの数 (500 ～ 2000 回)。信頼区間にゼロが含まれず、p 値が 0.05 未満の場合、媒介効果は有意であり、媒介変数が独立変数と従属変数の間の関係を説明していることを示します。

ブートストラップとスプリングブートの違いは何ですか Apr 05, 2024 am 04:00 AM

Bootstrap と Spring Boot の主な違いは次のとおりです。 Bootstrap は Web サイトスタイル用の軽量 CSS フレームワークであるのに対し、Spring Boot は Java Web アプリケーション開発用の強力なすぐに使用できるバックエンドフレームワークです。 Bootstrap は CSS と HTML に基づいていますが、Spring Boot は Java と Spring フレームワークに基づいています。 Bootstrap は Web サイトのルックアンドフィールの作成に重点を置いているのに対し、Spring Boot はバックエンド機能に重点を置いています。 Spring Boot を Bootstrap と統合して、完全に機能的で美しいものを作成できます。

ブートストラップテストメディエーションエフェクト stata コマンドの結果をエクスポートする方法 Apr 05, 2024 am 03:39 AM

Stata でのブートストラップメディエーション効果テストの結果をエクスポートします。結果を保存します。ブートストラップポスト変数リストを作成します。ローカル変数: coef se ci 結果をエクスポートします (CSV): 区切り文字付きの結果をエクスポートします。csv, varlist(`vars') カンマ nolabel を置き換えます

See all articles

ブートストラップにグリッドレイアウトはありますか?

ブートストラップにはグリッドレイアウトがありますか

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

ブートストラップにグリッドレイアウトはありますか?

ブートストラップにはグリッド レイアウトがありますか

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

ブートストラップにはグリッドレイアウトがありますか