Bootstrapは、レスポンシブでモバイルファーストストリーミンググリッドシステムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大12列に分割されます。
グリッドシステムは、行と列のあるテーブルに似ています。容器に設定されたタイプのコンテナに配置する必要があります。それはdivであり、コンテンツは列に配置されます。 Webデザインのグリッドは、コンテンツのレイアウトに使用され、Webサイトを簡単に閲覧できます。以下は、ブートストラップグリッドレイアウトを使用する例です。
<div> <div> col2 </div> <div> col10 </div> </div>
ディスプレイ効果は次のとおりです。
class = "row"のスタイルは行を表すために追加され、class = "col-sm-2"のスタイルが追加されて列を表すように追加されます。システムは画面全体を12パートに分割し、COL-SM-2は列が2つの部分に及ぶことを意味し、COL-SM-10比は列が10部にまたがることを意味します。表示された効果は、上の図に示すように、1つの行に2つの列があり、最初の列が2つの部分を説明し、2番目の列が10パートを考慮していることを示します。
ブートストラップはレスポンシブなフロントエンドフレームワークであり、グリッドシステムに反映され、異なるディスプレイサイズに対応するデバイスであり、異なるディスプレイ効果を示すことができます。以下に示すように：
<div> <div> .col-xs-12 .col-md-8 </div> <div> .col-xs-6 .col-md-e4 </div> </div>
COL-MD-8は、このリストが、通常のデスクトップやラップトップなどの中規模の画面の下で8つの部分を占めることを意味します。 Col-XS-12は、この列がタブレットなどの小さな画面の下で12コピーを占めることを意味します。上記のコードは、行に2つの列があり、通常のデスクトップとラップトップの次の行があることを示しています。最初の列は8つの部分を占め、2番目の列は4つの部分を占め、次の列は2つの列、最初の列は12パートを説明し、2番目の列は6つの部分を占めます。このようにして、さまざまなディスプレイデバイスでさまざまな効果が達成されます。ブラウザを変更することにより、これら2つの状況をシミュレートできます。
次の図は、ブートストラップのグリッドシステムが複数の画面デバイスでどのように機能するかを示しています
上記は、編集者が導入した3番目のブートストラップグリッドの基本の完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！