Sprechen Sie über das Grid-System in Bootstrap

In diesem Artikel erfahren Sie mehr über das Grid-System in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „Bootstrap-Grundlagen-Tutorial“

Das Rastersystem im Bootstrap-Framework unterteilt den Container in 12 gleiche Teile. Wenn Sie es verwenden, können Sie den LESS/SASS-Quellcode entsprechend dem tatsächlichen neu kompilieren Situation, diesen Wert zu ändern. So funktioniert das Rastersystem des Bootstrap-Frameworks:

1. Die Datenzeile (.row) muss im Container (.container) enthalten sein, damit sie entsprechend ausgerichtet und aufgefüllt werden kann

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

2 . Spalten (.column) können zur Zeile (.row) hinzugefügt werden, aber die Summe der Anzahl der Spalten darf die Gesamtzahl der gleichmäßig aufgeteilten Spalten nicht überschreiten (z. B.: 12)

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

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

4. Erstellen Sie den Abstand zwischen den Spalten, indem Sie den Abstand festlegen (Auffüllen) und dann übergeben als Negative Ränder für die erste Spalte und den letzten Stapel festlegen, um den Effekt des Auffüllens auszugleichen

mit reaktionsfähigen Effekten im Bootstrap-Grid-System mit vier Browsertypen (ultrakleiner Bildschirm, kleiner Bildschirm, mittlerer Bildschirm und großer Bildschirm), seine Haltepunkte sind 768px, 992px, 1220px

Container (.container), für verschiedene Browserauflösungen ist auch seine Breite unterschiedlich: automatisch, 760px, 970px, 1170px;

.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;
  }

Zeile Container (.row) unterteilt die Zeile des Containers in 12 gleiche Teile, also Spalten. Jede Spalte hat einen Abstand links: 15 Pixel und einen Abstand rechts: 15 Pixel; dies führt auch dazu, dass der Abstand links der ersten Spalte und der Abstand rechts der letzten Spalte die mittlere Breite von 30 Pixeln einnehmen Container (.row) definiert die Werte margin-left und margin-right von -15px, die verwendet werden, um den linken Abstand der ersten Spalte und den rechten Abstand der letzten Spalte zu versetzen, sodass zwischen der ersten Spalte eine Lücke entsteht Spalte und die letzte Spalte und der Container (.container) Es gibt keinen Abstand ) als Beispiel.

1. Spaltenkombination

Bei der Spaltenkombination wird die Anzahl der zusammengeführten Spalten geändert (die Gesamtzahl der Spalten darf 12 nicht überschreiten), was nur dem colspan-Attribut der Tabelle ähnelt beinhaltet zwei Merkmale: schweben Sie in der Breite prozentual Spaltenversatz

Manchmal tun wir das nicht. Wenn Sie möchten, dass zwei benachbarte Spalten nahe beieinander liegen, aber keinen Rand oder andere technische Mittel verwenden möchten, können Sie den Spaltenversatz (Offset) verwenden, um dies zu erreichen. Um den Spaltenversatz zu verwenden, fügen Sie einfach den Klassennamen .col-md-offset-* (das Sternchen stellt die Anzahl der zu versetzenden Spaltenkombinationen dar) zum Spaltenelement hinzu. Die Spalte mit diesem Klassennamen wird versetzt, z. B.: in das Spaltenelement Fügen Sie oben .col-md-offset-4 hinzu, um anzuzeigen, dass die Spalte um die Breite von 4 Spalten nach rechts versetzt ist

.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;
}

Der Effekt ist wie folgt:

Implementierung Prinzip:

Verwenden Sie ein Zwölftel. Ein linker Rand bedeutet so viele Versätze, wie es linke Ränder gibt. Stellen Sie sicher, dass die Spalte mit dem Offset übereinstimmt. Die Gesamtzahl der Spalten sollte 12 nicht überschreiten, da die Spalten sonst in unterbrochenen Zeilen angezeigt werden Legen Sie die Schwebedistanz fest. Im Bootstrap-Grid-System erfolgt dies durch Hinzufügen des Klassennamens. col-md-push-* und col-md-pull-*

<div>
       <div>
          <div>col-md-4</div>
          <div>col-md-8</div>
       </div>
   </div>

效果如下：

col-md-4居左，col-md-8居右，如果要互换位置，就需要将col-md-4向右移动8个列的距离，也就是添加类名.col-md-push-8;同时需要将col-md-8向左移动4个列的距离，也就是添加类名.col-md-pull-4

bootstrap仅通过设置left和right来实现定位效果。

.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;
  }

列嵌套

列嵌套可以在一个列中添加一个或做个行（row）容器，然后在这个行容器中插入列，在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度

<div>
       <div>
           <div>
               我在里面嵌套了一个网格
               <div>
                   <div>col-md-6</div>
                   <div>col-md-6</div>
               </div>
           </div>
           <div>col-md-4</div>
       </div>
       <div>
           <div>col-md-4</div>
           <div>
               我在里面嵌套了一个网格
               <div>
                   <div>col-md-4</div>
                   <div>col-md-4</div>
                   <div>col-md-4</div>
               </div>
           </div>
       </div>
   </div>

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonSprechen Sie über das Grid-System in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!