レスポンシブレイアウトをサポートするフロントエンドプラグインとして、ブートストラップは重要な役割を果たします。携帯電話、タブレット、PCでWebを閲覧する場合でも、良い結果を得ることができます。これらはすべて、ブートストラップによって私たちにもたらされます！
今日は、主にページのレイアウトについてお話します。これは最も基本的なことです。サイトを設計するときは、グローバルで統一された標準ページを設計する必要があります。この種のページレイアウトページを呼び出します。ページに反映されるのはレイアウト要素です。これはもちろん、ブートストラップでは不可欠です。
Bootstrapのレイアウトはラスターシステムです。つまり、行と列で構成されています。使用する場合は、ページコンテンツとラスターシステムに.containerコンテナをラップする必要があります。
A.Containerクラスは、固定された幅のあるコンテナに使用され、レスポンシブレイアウトをサポートします。
<div> ... </div> .container-fluidクラスは、幅100％のコンテナに使用され、すべてのビューポートを占有します。 <div> ... </div>
ブートストラップでは、行と列は行とcolで表され、最大12列ユニットが連続してあります。 COL-MD-1は1つのユニットの幅を表し、COL-MD-7は7つのユニットの幅を表します。それらは一緒に追加され、最大12ユニットになります。
<div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </di v> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> < div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .col-md-8 </div> <div> .col-md-4 </div > </div> <div> div> .col-md-4 </div> </div> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
2行目と3行目は同様の効果を示します
3つのネストされた列には、列に列があることもあります。このネストでMDをSMに変更する必要があります
<div> <div>レベル1：.col-sm-9 <div> <div>レベル2：.col-xs-8 .col-sm-6 </div> <div>レベル2：.col-xs-4 .col-sm-6 </div> </div> </div>
効果はこれに似ています
上記は、編集者が紹介したブートストラップページレイアウトの基本的な知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！