CSSグリッドとブートストラップの違い

ほとんどの場合、厳密なレイアウト要件が必要で、その要件に従ってページ上でコンテンツをフローさせたい場合は、CSS グリッドを使用します。

Bootstrap のグリッド システムは CSS Flexbox レイアウト システムに基づいており、CSS グリッドは印刷ベースの ID の影響を受けます。 Bootstrap は CSS Grid の直接の競合相手であり、2 つのフレームワークのグリッド レイアウト システム間で重要な比較を行うことができます。

行方向または列方向のレイアウトを制御したい場合は、Bootstrap が提供する Flexbox ベースのグリッドを使用する必要があります。一方、行と列の両方でレイアウトを制御したい場合は、解決策として CSS グリッドを使用する必要があります。

CSS グリッドとは何ですか?

交差する一連の垂直線と水平線は、グリッドとして理解されます。 CSS3 では、グリッド レイアウトを使用してページをさまざまな部分に分割できます。

グリッド プロパティは、行と列に基づいたグリッド レイアウト システムを提供します。これにより、Web デザインにおける要素のレイアウトやフローティングが不要になります。グリッド レイアウトは、HTML の代わりに CSS を使用してグリッド構造を作成する方法を提供します。

CSS グリッド レイアウトは、ページを主要なセクションに分割したり、プリミティブ コントロールに基づいて HTML の多くのコンポーネント間のサイズ、位置、階層関係を確立したりする場合に特に効果的です。

次の例を参照してください例−

<div class="grid_container">
   <div class="grid_items">01</div>
   <div class="grid_items">02</div>
   <div class="grid_items">03</div>
   <div class="grid_items">04</div>
   <div class="grid_items">05</div>
   <div class="grid_items">06</div>
   <div class="grid_items">07</div>
   <div class="grid_items">08</div>
   <div class="grid_items">09</div>
</div>

これは、ユーザーが項目を行に配置し、 columns . ただし、テーブルとは対照的に、CSS グリッドを使用するとレイアウトのデザインが非常に簡単になります。grid-template-rows 属性と Grid-template-columns 属性を使用することで、グリッドに表示される列と行を指定できます。

Bootstrap とは何ですか?

モバイル デバイス上で応答性が高く、ユーザーフレンドリーな Web サイトをデザインする場合、Bootstrap として知られる HTML、CSS、および JavaScript フレームワークが最も適しています。人気のあるオプションです。ツールのダウンロードや使用には費用はかかりません。これは、Web サイト開発プロセスをよりシンプルかつ効率的にするフロントエンド フレームワークです。

これには、HTML と HTML に基づくデザイン テンプレートが含まれています。タイポグラフィ、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセル、その他多くのもの用の CSS。それに加えて、JavaScript で書かれたプラグインもサポートしています。レスポンシブなデザインの構築が容易になります。 .

Bootstrap Grid とは何ですか?

Bootstrap が使用するグリッド構造は応答性があり、これは、マテリアルが 3 つの構造になっている場合、列が画面のサイズに基づいて再配置されることを意味します。

#Bootstrap グリッド システムには 4 つのクラスが含まれています。 −

• xxs (携帯電話の場合 - 幅 768 ピクセル未満の画面)

• #sm (タブレット - 幅 768 ピクセル以上の画面)

• md (小型ノートパソコンの場合 - 幅 992 ピクセル以上の画面)

• lg (ラップトップおよびデスクトップの場合 - 幅 1200 ピクセル以上の画面)

次の

例を見てください。 −

<div class="row">
   <div class="col-xs-9 col-md-7">col-xs-9 and col-md-7</div>
   <div class="col-xs-3 col-md-5">col-xs-3 and col-md-5</div>
</div>

<div class="row">
   <div class="col-xs-6 col-md-10">col-xs-6 and col-md-10</div>
   <div class="col-xs-6 col-md-2">col-xs-6 and col-md-2</div>
</div>

<div class="row">
   <div class="col-xs-6">col-xs-6</div>
   <div class="col-xs-6">col-xs-6</div>
</div>

• 適切な配置とパディングを行うには、行は「.container」(固定幅) または「.container-fluid」(全幅) 内に含まれている必要があります。 。

• 行を使用して水平列グループを作成します。

• 一時的なものにできるのは列のみです。コンテンツは列内に配置する必要があります。

• グリッド レイアウトは、「.row」や「.col-sm-4」などの事前定義クラスを使用してすばやく作成できます。

• 列間にパディングを行うと、ギャップ (列間のスペース) が作成されます。 「.rows」に負のマージンを使用して、最初と最後の列のパディングをオフセットします。

• スパンする列の数を定義してグリッド列を作成します (12 のオプションが利用可能)。たとえば、3 つの等しい幅の列は 3 つの「.col-sm-4」で表すことができます。

• 列幅はパーセンテージで表現されるため、常に柔軟であり、親要素に比例します。

CSS グリッドとブートストラップの違い

次の表は、CSS グリッドとブートストラップの主な違いを示しています -

#比較の基本CSS グリッドブートストラップ##マークレスポンシブページの読み込み速度列制限結論

マークアップがより明確で読みやすくなりました。グリッドのレイアウトは HTML ではなく CSS で行われます。	レイアウトを構築するには、各行に div タグが必要で、各 div 要素内でクラス階層を定義します。これによりコードが長くなります。
HTMLは変更しなくても、各種メディアクエリを追加したり、各HTML要素のグリッドレイアウトを記述するだけでCSSを変更できます。	確立されたクラス階層を使用して、さまざまなデバイス サイズのコンテンツ領域のレイアウトを個別に設計できます。ただし、クラスの数が増えると、ラベル付けはさらに面倒になります。
は、ほとんどのブラウザーとバージョンで強力にサポートされています。何もダウンロードする必要はなく、Web サイトの読み込みが速くなります。	スタイルシートの添付ファイルをダウンロードする必要があるため、Web サイトの読み込みが遅くなります。
列数に制限のない柔軟なレイアウトを提供します。したがって、任意の数の列を作成することは難しくありません。	グリッドは 12 列に分割されているため、合計が 12 にならないレイアウトは実装できません。

Bootstrap を使用するには、より多くの HTML を記述する必要がありますが、CSS Grid を使用するには、より多くの CSS を記述する必要があります。

設計要件によっては、ブートストラップの使用がオプションではない場合があります。より単純なレイアウトの場合は、適度な時間で開始できるブートストラップが簡単な選択です。

Bootstrap は単なるグリッド システムではなく、モーダル、ツールヒント、ポップアップ、プログレス バーなどの事前定義クラスの包括的なフロントエンド ツールキットであることを思い出してください。 CSS グリッドを使用して同じ結果を得るには、JS または JQuery を使用してファイルを記述する必要があります。

以上がCSSグリッドとブートストラップの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。