Bootstrap 302-Grid の美しさの紹介と Application_html/css_WEB-ITnose

この記事の主な内容:

■ グリッドの概要
■ グリッドの適用
■ 複数のグリッド

グリッドの概要

Bootstrap では、ページは 12 等分に分割されます。これがいわゆるグリッドです。 。

Bootstrap では、これらの型はクラス名によって制御され、「.col-xx-6」に似た形式に従います。

2 つの 6 がページ全体を占めています。したがって、クラス名の末尾の数字は、そのクラスが占めるスペースの数を示します。

別の例として、3 つの 4 もページ全体を占めています。

別の例として、4 つの 3 がページ全体を占めています。

別の例として、6 つの 2 もページ全体を占めています。

また、「.col-xx-10 .col-xx-offset-2」のようなクラス名の場合、offsetはオフセット、2は2セル右にオフセットすることを意味します。

最後から 2 番目の行で、「.col--xx-3」が「.col-xx-3 .col-xx-offset-2」の後に配置されている場合、サイズが 12 セルを超えると、「.col--xx-3」が自動的に次の行の先頭まで実行されます。

グリッドの適用

ID が body のセクションにグリッドを適用するにはどうすればよいですか?
→index.html内で、bodyというIDのセクションにclass="container"属性を追加
→mainというIDのセクションにclass="col-md-8"属性を追加
→クラスを追加サイドバーのIDを持つセクションに「container」属性を追加します。 class="col-md-4"属性を追加します

ヘッダー部分とフッター部分にグリッドを適用するにはどうすればよいですか？
→id 付き div ページの class="container" 属性を削除すると、

になります。
→ ヘッダーに class="container" 属性を追加すると、
→class="container" 属性をフッターに追加すると、次のようになります:

上記、ヘッダー、ボディ、フッターパーツはすべて適用されます。 グリッド、ボディ メイン部分は 8 セルを占め、ボディのサイドバー部分は 4 セルを占めます。

これまでのところとても良いです。ただし、ブラウザの幅をスマートフォンの画面サイズまで縮小すると、いくつかの不調和な側面が現れます。

たとえば、元の 1 行のタイトルは 2 行に引き伸ばされます。

たとえば、完全に表示できたはずの画像を完全に表示するには、水平スクロール バーをスライドする必要があります:

たとえば、元々右側にあった部分が下部に圧縮されているなど。

これらの問題を解決するにはどうすればよいですか?

複数のグリッド

複数のグリッドとは、ページ要素がセル サイズを表す複数のクラス名を持つことができることを意味します。ページ幅が異なると、異なるクラスが有効になります。

Bootstrap 3 では、
".col-lg-xx" はページ幅 >=1200 ピクセルを意味します。
「.col-md-xx」はページ幅>=992ピクセルを意味します。
「.col-sm-xx」はページ幅>=768ピクセルを意味します。
「.col-xs-xx」は、ページ幅が 768 ピクセル未満であることを意味します。

html 要素に複数のクラス名を付けることができ、ld の場合はそれが占有するセルの数、md の場合は占有するセルの数などを示します。

sm の場合、つまり顔の幅が 768 ピクセル以上の場合を考慮する必要があるとします。
→メインのIDのセクションで、クラスにcol-sm-9を追加します
→サイドバーのIDのセクションで、クラスにcol-sm-3を追加します

さて、調整しますページ幅を約 800 ピクセルのサイズにします。

この時点では、前に設定したように、メインの ID を持つセクションが 9 セルを占め、サイドバーの ID を持つセクションが 3 セルを占めることがわかります。

次に、xs、つまりページ幅が 768 ピクセル未満の場合を考えてみましょう。
→メインのIDのセクションで、クラスにcol-xs-6を追加します
→サイドバーのIDのセクションで、クラスにcol-xs-6を追加します

さて、調整しますページ幅を約 590 ピクセルのサイズにします。

この時点では、前に設定したように、main の ID を持つセクションが 6 セルを占め、サイドバーの ID を持つセクションが 6 セルを占めることがわかります。

ただし、ページ幅が 768 ピクセル未満の場合、左側と右側の両方が 6 セルを占めるように設定することは、実際のプロジェクトでは表示されない可能性があります。上記は単なるデモです。この状況に対応するクラス名も削除する必要があります。次の状態に戻ります:

参考: WilderMinds

Bootstrap 3 Beauty カテゴリには以下が含まれます:

Bootstrap 3 Beauty 01-ページのダウンロードと紹介

Bootstrap 3 Beauty 02-Grid の紹介とアプリケーション