この記事では主に bootstrap3.0 のグリッド システムの原理を紹介します。必要な方は参考にしてください。
Bootstrap にはレスポンシブ、モバイルのセットが組み込まれています。デバイスファースト フローでは、画面デバイスまたはビューポートのサイズが増加すると、システムが自動的に最大 12 列に分割します。ここでは、Bootstrap のグリッド システムをレイアウトと呼びます
グリッド システム (レイアウト)
Bootstrap には、応答性の高い、モバイル デバイス優先の流体グリッド システムが組み込まれています。画面デバイスまたはビューポート (ビューポート) を使用すると、サイズが増加します。システムは自動的に最大 12 列に分割します。
ここでは Bootstrap のグリッド システムをレイアウトと呼びます。行と列の一連の組み合わせによってページ レイアウトが作成され、作成したレイアウトにコンテンツを配置できます。ここでは、Bootstrap グリッド システムがどのように機能するかを簡単に紹介します:
行に適切な配置とパディングを与えるには、行を .container に含める必要があります。行を使用して水平方向に一連の列 (cpumn) を作成します。コンテンツは列 (cpumn) 内に配置する必要があり、行 (row) の直接の子にできるのは列 (cpumn) のみです。 .row や .cp-xs-4 などの事前定義されたグリッド クラスを使用して、グリッド レイアウトをすばやく作成できます。 Bootstrap ソース コードで定義されたミックスインを使用して、セマンティック レイアウトを作成することもできます。パディングを設定して、列 (cpumn) の間にギャップ (ガター) を作成します。次に、最初と最後の margin に負の値を設定して、パディングの効果を相殺します。グリッド システムの列は、1 ～ 12 の値を指定することでその範囲を表します。たとえば、3 つの .cp-xs-4 を使用して、3 つの等しい幅の列を作成できます。 margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.cp-xs-4来创建。
DW6编码实现
Okay勒，下面开始写代码了额。首先上一张图看看我使用的编辑器，之前在学校学习Html+CSS的时候使用较多的工具。
然后新建一个HTML文档，选择类型HTML5
创建好后，另存为与上一节的讲解中js、css文件夹的同一目录下。
layout.html就是我刚刚创建的文件。Bootstrap.html也是上一节中创建的第一个html页面。
现在可以将Bootstrap.html中的代码全部Copy到layout.html页面。
然后在body标签下添加如下代码
<h1>Hello, world!</h1> <h2class="page-header">区域一</h2> <p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p> <h2class="page-header">区域二</h2> <p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p> <h2class="page-header">区域三</h2> <p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
这几个标签大家应该都能看的明白，最基础最简单的。
添加完后layout.html页面所有代码如下
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <!--Bootstrap--> <linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p> <p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries--> <!--WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://--> <!--[ifltIE9]> <scriptsrc="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>> <scriptsrc="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>> <![endif]--> </head> <body> <h1>Hello,world!</h1> <h2class="page-header">区域一</h2> <p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p> <h2class="page-header">区域二</h2> <p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p> <h2class="page-header">区域三</h2> <p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p> <scriptsrc="js/jquery-2.0.3.min.js"></script> <scriptsrc="js/bootstrap.min.js"></script> </body> </html>
当然效果也很简单，我还是把截图放上，可以进行对比。
优化一：可以发现上图的页面效果占满全屏，我们可以通过Bootstrap 样式类对上面的内容进行居中。
<p class="container"> .........之前上面添加在body标签下的代码 </p>
效果如下
可以发现container这个类设置了宽度，并且可以让内容显示在页面的中间。
优化二：将三个区域显示在同一排，并且平均分成三栏。
首先为三个区域添加一个容器，可以使用p，并且为p添加一个类
.
然后我们为每个小的区域也添加一个容器p，并且为p添加一个类
简单代码实现如下
<p class="container"> <h1>Hello,world!</h1> <pclass="row"> <pclass="col-xs-4"> <h2class="page-header">区域一</h2> <p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p> </p> <pclass="col-xs-4"> <h2class="page-header">区域二</h2> <p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p> </p> <pclass="col-xs-4"> <h2class="page-header">区域三</h2> <p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p> </p> </p> </p>
效果如下
的确排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个cp-xs-6的类、占用四个网格就添加一个cp-xs-4的类，然后在同一排的周围进行使用带有row类的容器。
总结
本节主要学习的布局（栅格系统），通过简单的实例来理解它的工作原理。
使用过的类有:
1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width
🎜🎜次に、新しい HTML ドキュメントを作成し、 HTML5 と入力します 🎜🎜🎜🎜作成後、同じ名前で保存します前回と同様 節の説明ではjsフォルダとcssフォルダの同じディレクトリにあります。 🎜🎜🎜🎜layout.html は今作成したファイルです。 Bootstrap.html は、前のセクションで作成された最初の HTML ページでもあります。 🎜🎜これで、Bootstrap.html のすべてのコードをlayout.html ページにコピーできます。 🎜🎜次に、body タグの下に次のコードを追加します。🎜🎜最適化 1: 次のことが可能です。写真のページ効果は全画面を占め、Bootstrap スタイル クラスを使用して上記のコンテンツを中央に配置できます。 🎜rrreee🎜効果は以下の通りです🎜🎜🎜🎜 コンテナクラスによって幅が設定され、コンテンツがページの中央に表示されることがわかります。 🎜🎜最適化 2: 3 つの領域を同じ行に表示し、3 つの列に均等に分割します。 🎜🎜最初に 3 つの領域のコンテナを追加します。p を使用して、pのクラスを追加できます。🎜🎜次に、各小さな領域 p のコンテナも追加します。そして、p
のクラスを追加します🎜🎜簡単なコード実装は次のとおりです
🎜rrreee🎜効果は次のとおりです🎜🎜🎜🎜は確かに横一列に並んでいて、その後3列に分かれています。上記のグリッド システムの 6 つの原則を組み合わせてみましょう。少しはわかりましたか、とにかくよくわかりました。より複雑なグリッド レイアウト ページも同じ方法で作成できます。対応するグリッド レイアウト クラスを、レイアウトで使用されるコンテナーに追加するだけです。たとえば、コンテンツが 6 つのグリッドを占める場合は、cp-xs-6 クラスを追加し、4 つのグリッドを占める場合は、cp-xs-4 クラスを追加して、同じ行コンテナーの周囲に行クラスを使用します。 🎜🎜概要🎜🎜 このセクションでは主にレイアウト (グリッド システム) を研究し、簡単な例を通してその動作原理を理解します。 🎜🎜使用されるクラスは次のとおりです:🎜🎜1..container: .container を使用してページ上のコンテンツをラップし、中央揃えを実現します。 max-width は、グリッド システムに一致するように、さまざまなメディア クエリまたは値の範囲でコンテナに設定されます。 🎜🎜2..cp-xs-4: このクラスは「-」によって 3 つの部分に分かれています。3 番目の部分の番号は一般的な参照として使用され、その範囲は 1 ～ 12 です。つまり、領域は 12 列に分割できます。これは行クラスと組み合わせて使用する必要があります。 🎜
実際、このレイアウトは、TR 行と TD 列を備えた HTM1 のテーブル レイアウトに非常に似ています。
これは一時的な理解であり、コードをコピーして貼り付けるだけで効果を確認できます。もちろん、事前に css ファイルと js ファイルを準備する必要があります。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
CSS を使用してページ コンテンツのアスペクト比を維持する方法
以上がbootstrap3.0のグリッドシステム原理についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
