Bootstrap-Rasteranalyse

Mitte (Container)

1. Mitte: Ein Container mit dem Klassennamen .container. Die Breite des Containers hat auf beiden Seiten des Containers unterschiedliche Werte Lassen Sie es einfach leer.
   Die Mittelbreite jeder Größe ist wie folgt:

   屏幕设备	版心宽度
   max-width:768px	xs 继承父元素宽度（即width:100%）
   min-width:768px	sm 750px
   min-width:992px	md 970px
   min-width:1200px	lg 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;
  }}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

1. Unabhängig von der Bildschirmbreite hat der Container.Container links und rechts immer einen Abstand von 15 Pixeln, um zu verhindern, dass der Inhalt direkt den Rand des Browsers berührt. Verschachteln Sie niemals einen anderen Container innerhalb eines Containers. Der Layout-Container von Container-Fluid ist derselbe wie der Layout-Container für Bildschirme, die kleiner als 768 Pixel sind. Er legt keinen festen Breitenwert fest und erbt ihn . Die Breite des übergeordneten Elements.

2. .container Container wird verwendet, um Breitenbeschränkungen für die Reaktionsbreite bereitzustellen. Als Reaktion auf Größenänderungen wird der Container tatsächlich geändert. Zeilen und Spalten basieren auf Prozentsätzen, sodass keine Änderungen erforderlich sind.

Zeile (Zeile)

Zeile: Ein Container mit dem Klassennamen .row, es ist Spalte (Spalte); Es gibt insgesamt Platz und es ist in 12 Spalten unterteilt.

1. An beiden Enden der Zeile gibt es zwei negative 15-Pixel-Randwerte, um die Füllwerte auf beiden Seiten des Containers auszugleichen. .row ist ungültig, wenn es außerhalb des Containers verwendet wird.

Spalte

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

Jede Spalte hat einen Seitenabstand von 15 Pixel. Verwenden Sie col niemals außerhalb eines .row-Containers, da col sonst ungültig wird.

1. Der Füllwert jeder Spaltenspalte bietet einen Rand für ihren Inhalt, sodass der Inhalt nicht am Rand des Browsers klebt und die Spalten nicht zusammenkleben.

2. == Spalten werden nach Prozentsätzen zugewiesen (relativ zum Prozentsatz der Mittelbreite, also je breiter die Mitte, desto größer die Breite jeder Spalte)==.

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为：.col-sm-1
//       大屏幕   类名为：.col-lg-1
@media (min-width:768px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width:1200px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
}

栅格嵌套

Nachdem Sie Container/Zeile/Spalte festgelegt haben, können Sie ein neues Raster erstellen System und fügen Sie einfach Zeilen direkt zur Spalte hinzu. Es ist nicht erforderlich, einen Container hinzuzufügen, da die Füllwerte auf beiden Seiten der Spalte die negativen Randwerte auf beiden Seiten der Zeile ausgleichen können, und die Spalte ist entspricht einem Container.

Offsets (Offsets)

Offset-Offsets werden hauptsächlich durch den Spaltenrand-Linkswert bestimmt . Bei einem Versatz um eine Spalte beträgt der Abstand nach links: 8,3333333 % (1/12). Bei einem Versatz um zwei Spalten beträgt der Abstand nach links: 16,66666667 % (d. h. 2/12).

Spaltensortierung (Push und Pull)

.col-xs-offset-0 {
    margin-left: 0;
}.col-xs-offset-1 {
    margin-left: 8.33333333%;
}...
@median (min-width:768px) {
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    ...
}
...

In praktischen Anwendungen ist es mehr Informationen zum Aufrufen der Position und zum Sortieren, sodass Sie das feste Layout von p in HTML von oben nach unten und von links nach rechts durchbrechen können.

1. Pull und Push werden durch die rechten und linken Werte der Position implementiert. Der Pull-1-Wert rechts:8,33333333 % (1/). 12); push-1 value => left:8.33333333%(1/12);

Das obige ist der detaillierte Inhalt vonBootstrap-Rasteranalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!