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" 属性を削除すると、