Bootstrap muss täglich Javascript-Kenntnisse im Rastersystem (Layout) erlernen

1. Rastersystem (Layout)
Bootstrap verfügt über ein integriertes, reaktionsfähiges, auf Mobilgeräte ausgerichtetes Fluid-Grid-System. Wenn das Bildschirmgerät oder die Größe des Ansichtsfensters zunimmt, wird das System automatisch in bis zu 12 Spalten unterteilt.

Ich nenne das Rastersystem in Bootstrap hier ein Layout. Durch eine Reihe von Kombinationen von Zeilen und Spalten wird ein Seitenlayout erstellt. Anschließend können Ihre Inhalte in dem von Ihnen erstellten Layout platziert werden. Hier ist eine kurze Einführung in das Funktionsprinzip des Bootstrap-Grid-Systems:

Das Implementierungsprinzip des Gittersystems ist sehr einfach: Definieren Sie einfach die Behältergröße, teilen Sie sie in 12 gleiche Teile (es gibt auch 24 oder 32 gleiche Teile, aber 12 Teile sind am häufigsten) und passen Sie dann die Innengröße an und Außenränder und schließlich die Kombination der Medienabfrage, um ein leistungsstarkes, reaktionsfähiges Rastersystem zu erstellen. Das Rastersystem im Bootstrap-Framework unterteilt den Container in 12 gleiche Teile.

Wenn Sie es verwenden, können Sie den LESS- (oder Sass-) Quellcode neu kompilieren, um den Wert von 12 entsprechend der tatsächlichen Situation zu ändern (dh in 24 oder 32 zu ändern). Natürlich können Sie ihn auch in mehr aufteilen , es wird jedoch nicht empfohlen, es auf diese Weise zu verwenden).

2. Nutzungsregeln
Bootstrap verfügt über eine Reihe reaktionsfähiger, mobilfreundlicher Funktionen.

1. Die Datenzeile (.row) muss im Container (.container) enthalten sein, um eine entsprechende Ausrichtung und Auffüllung zu gewährleisten. Zum Beispiel:

<div class="container">
 <div class="row"></div>
</div>

2. Spalten (.column) können zu Zeilen (.row) hinzugefügt werden, aber die Summe der Spaltenanzahl darf die Gesamtzahl der gleichgeteilten Spalten, z. B. 12, nicht überschreiten. Zum Beispiel:

<div class="container">
<div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-8"></div>

3. Der spezifische Inhalt sollte innerhalb des Spaltencontainers (Spalte) platziert werden und nur die Spalte (Spalte) kann als direktes untergeordnetes Element des Zeilencontainers (.row) verwendet werden

4. Erstellen Sie einen Abstand zwischen den Spalten, indem Sie den Abstand festlegen. Gleichen Sie dann den Effekt des Auffüllens aus, indem Sie negative Ränder für die erste und letzte Spalte festlegen

Um besser zu verstehen, wie das Rastersystem des Bootstrap-Frameworks funktioniert, schauen wir uns eine Skizze an:

Eine kurze Erklärung des Bildes:

1. Der äußerste Rand hat einen großen weißen Bereich, der dem sichtbaren Bereich des Browsers entspricht. Es gibt einen Responsive-Effekt im Rastersystem des Bootstrap-Frameworks, das mit vier Browsertypen ausgestattet ist (extra kleiner Bildschirm, kleiner Bildschirm, mittlerer Bildschirm und großer Bildschirm). Seine Haltepunkte (Pixel-Trennpunkte) sind 768px, 992px und 1220px.

2. Der zweite Rand (1) entspricht dem Container (.container). Für unterschiedliche Browserauflösungen sind die Breiten unterschiedlich: automatisch, 750px, 970px und 1170px. Wird in den Zeilen 736 bis 756 von bootstrap.css eingestellt:

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 @media (min-width: 768px) {
 .container {
 width: 750px;
 }
 @media (min-width: 992px) {
 .container {
 width: 970px;
 }
 @media (min-width: 1200px) {
 .container {
 width: 1170px;
 }

Die horizontalen Balken Nr. 3 und 2 veranschaulichen, dass die Zeile (.row) des Containers in 12 gleiche Teile, also Spalten, unterteilt ist. Jede Spalte hat ein „padding-left:15px“ (rosa Teil im Bild) und ein „padding-right:15px“ (lila Teil im Bild). Dies führt auch dazu, dass der Abstand links der ersten Spalte und der Abstand rechts der letzten Spalte 30 Pixel der Gesamtbreite einnehmen, was die Seite unansehnlich macht. Wenn Sie einen bestimmten Abstand einhalten müssen, ist dieser Ansatz natürlich gut. Wie in den Zeilen 767–772 in bootstrap.css gezeigt:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;

4. Die horizontale Leiste Nr. 3 ist der Zeilencontainer (.row), der die Werte „Rand links“ und „Rand rechts“ als „-15px“ definiert, die zum Versetzen nach links verwendet werden padding und Der rechte Abstand der letzten Spalte. Sie können dies in den Zeilen 763–767 von bootstrap.css sehen:

.row {
 margin-right: -15px;
 margin-left: -15px;

5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果，第一列和最后一列与容器（.container）之间没有间距。

横条５只是想向大家展示，你可以根据需要，任意组合列与列，只是他们的组合数之和不要超过总列数。

3、栅格选项
 　　通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。

      

从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理解：如果在一个元素上使用多个不同的上面的样式类，那么元素会根据在不同尺寸选择最合适（匹配最理想的）的样式类。简单的举例进行说明：比如在一个元素上我们使用了两个样式类：.col-md-和.col-lg。可以对照上面的截图来看

第一种情况：尺寸》=1200px;那么会选择.col-lg。

第二种情况：尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。

第三种情况：如果尺寸《992px;那么这两个样式类都将不会作用于元素上。

4、基本用法
 　网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，我们都以中屏（970px）为例进行介绍，其他屏幕的使用也类似这一种。

1）、列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性，例如：

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
 <div class="col-md-3">.col-md-3</div>
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-3">.col-md-3</div>
 </div>
</div>

使用上面的结构，你将看到下图的效果：

实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。在bootstrap.css文件的第1088行～1126行：

/*确保所有列左浮动*/

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 float: left;
 }
/*定义每个列组合的宽度（使用的百分比）*/

 .col-md-12 {
 width: 100%;
 }
 .col-md-11 {
 width: 91.66666667%;
 }
 .col-md-10 {
 width: 83.33333333%;
 }
 .col-md-9 {
 width: 75%;
 }
 .col-md-8 {
 width: 66.66666667%;
 }
 .col-md-7 {
 width: 58.33333333%;
 }
 .col-md-6 {
 width: 50%;
 }
 .col-md-5 {
 width: 41.66666667%;
 }
 .col-md-4 {
 width: 33.33333333%;
 }
 .col-md-3 {
 width: 25%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 .col-md-1 {
 width: 8.33333333%;
 }

5、列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>

如上面的示例代码，得到的效果如下

实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。在bootstrap.css中第1205行～1241行所示：

 .col-md-offset-12 {
 margin-left: 100%;
}
 .col-md-offset-11 {
 margin-left: 91.66666667%;
 }
 .col-md-offset-10 {
 margin-left: 83.33333333%;
 }
 .col-md-offset-9 {
 margin-left: 75%;
 }
 .col-md-offset-8 {
 margin-left: 66.66666667%;
 }
 .col-md-offset-7 {
 margin-left: 58.33333333%;
 }
 .col-md-offset-6 {
 margin-left: 50%;
 }
 .col-md-offset-5 {
 margin-left: 41.66666667%;
 }
 .col-md-offset-4 {
 margin-left: 33.33333333%;
 }
 .col-md-offset-3 {
 margin-left: 25%;
 }
 .col-md-offset-2 {
 margin-left: 16.66666667%;
 }
 .col-md-offset-1 {
 margin-left: 8.33333333%;
 }
 .col-md-offset-0 {
 margin-left: 0;
 }

注意：

不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示，如：

39bbc163833ae4e036fa5108a4263823
  16ecfe3539b844ce687c27cdaf266e84.col-md-316b28748ea4df4d9c2150843fecfba68
  bf5bfe97e3d3689f860a8c8f5029911fcol-md-offset-316b28748ea4df4d9c2150843fecfba68
  73d7fb51e5466eba95fd51d69eca064acol-md-416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。

如上面的示例代码，得到的效果如下

6、列排序
 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

我们来看一个简单的示例：

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
</div>

默认情况之下，上面的代码效果如下：

“col-md-4”居左，“col-md-8”居右，如果要互换位置，需要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“e58b8c04eee469969a34b2677761cf58”添加类名“col-md-push-8”，调用其样式。

也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“c90c57cf1a19b62ea8a1aeefa477f708”上添加类名“col-md-pull-4”：

Bootstrap仅通过设置left和right来实现定位效果。在boostrap.css文件的第1127行~第1204行可以看到具体的代码：

.col-md-pull-12 {
 right: 100%;
 }
 .col-md-pull-11 {
 right: 91.66666667%;
 }
 .col-md-pull-10 {
 right: 83.33333333%;
 }
 .col-md-pull-9 {
 right: 75%;
 }
 .col-md-pull-8 {
 right: 66.66666667%;
 }
 .col-md-pull-7 {
 right: 58.33333333%;
 }
 .col-md-pull-6 {
 right: 50%;
 }
 .col-md-pull-5 {
 right: 41.66666667%;
 }

 .col-md-pull-4 {
 right: 33.33333333%;
 }

 .col-md-pull-3 {
 right: 25%;
 }

 .col-md-pull-2 {
 right: 16.66666667%;
 }
 .col-md-pull-1 {
 right: 8.33333333%;
 }
 .col-md-pull-0 {
 right: 0;
 }

 .col-md-push-12 {
 left: 100%;
 }
 .col-md-push-11 {
 left: 91.66666667%;
 }
 .col-md-push-10 {
 left: 83.33333333%;
 }
 .col-md-push-9 {
 left: 75%;
 }
 .col-md-push-8 {
 left: 66.66666667%;
 }
 .col-md-push-7 {
 left: 58.33333333%;
 }
 .col-md-push-6 {
 left: 50%;
 }
 .col-md-push-5 {
 left: 41.66666667%;
 }
 .col-md-push-4 {
 left: 33.33333333%;
 }
 .col-md-push-3 {
 left: 25%;
 }
 .col-md-push-2 {
 left: 16.66666667%;
 }
 .col-md-push-1 {
 left: 8.33333333%;
 }
 .col-md-push-0 {
 left: 0;
}

7、列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。来看一个简单示例：

<div class="container">
 <div class="row">
  <div class="col-md-8">
  我的里面嵌套了一个网格
   <div class="row">
   <div class="col-md-6">col-md-6</div>
   <div class="col-md-6">col-md-6</div>
   </div>
  </div>
 <div class="col-md-4">col-md-4</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">
 我的里面嵌套了一个网格
  <div class="row">
   <div class="col-md-4">col-md-4</div>
   <div class="col-md-4">col-md-4</div>
   <div class="col-md-4">col-md-4</div>
  </div>
 </div>
 </div>
</div>

效果如下：

注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

本文都是通过最简单的案例，来剖析案例中涉及到的布局要点，希望对大家的学习有所帮助。