bootstrap3.0のグリッドシステム原理について-CSSチュートリアル-php.cn

この記事では主に 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&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;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&#39;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&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;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&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</p>
</p>
</p>

ログイン後にコピー

效果如下

的确排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个cp-xs-6的类、占用四个网格就添加一个cp-xs-4的类，然后在同一排的周围进行使用带有row类的容器。

总结

本节主要学习的布局（栅格系统），通过简单的实例来理解它的工作原理。

使用过的类有:

1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width

DW6 エンコーディングの実装

それでは、コードを書き始めましょう。まず、最後の写真で私が使用しているエディタを見てください。私は学校で Html+CSS を学習していたときに多くのツールを使用しました。 🎜🎜

🎜🎜次に、新しい HTML ドキュメントを作成し、 HTML5 と入力します 🎜🎜

🎜🎜作成後、同じ名前で保存します前回と同様節の説明ではjsフォルダとcssフォルダの同じディレクトリにあります。 🎜🎜

🎜🎜layout.html は今作成したファイルです。 Bootstrap.html は、前のセクションで作成された最初の HTML ページでもあります。 🎜🎜これで、Bootstrap.html のすべてのコードをlayout.html ページにコピーできます。 🎜🎜次に、body タグの下に次のコードを追加します。
🎜rrreee🎜これらのタグは最も基本的で単純なものであり、誰でも理解できるはずです。 🎜🎜layout.html ページのすべてのコードを追加した後のコードは次のとおりです🎜rrreee🎜もちろん、効果は非常に単純ですが、比較のためにスクリーンショットを載せておきます。 🎜🎜

🎜🎜最適化 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 サイトをご覧ください。