codestory

Die Anleitung zu Bootstrap Grid System

  1. Grid System
  2. die Kombination: col-sm-*,col-md-*, ..
  3. col, col-sm,.. col-auto, col-sm-auto,..
  4. Gallery mit der Verwendung von Grid erstellen
  5.  .w-100 verwenden

1. Grid System

Grid System (Das Gitter System) ist eine der wichtigsten Definition im Bootstrap, es zeigt, wie Sie die Einheiten in die Interface aufgliedern. Und wie kann Ihre Webseite mit den verschiedenen Bildschirmsgeräte kompatibel sein .
Die erste Behauptung von uns ist , dass das Gittersystem (Grid System) vom Bootstrap viele Zeilen hat aber sie haben 12 feste Säule. Auf die Zelle (cell) können Sie die Interface-einheiten stellen. Zum Beispiel : das ist unten eine Oberfläche, die in vielen Zellen geteilt wird.
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 4
span 4
span 4
span 4
span 8
span 6
span 6
span 12
Bootstrap4 hat 5 verschiedenen Css-Klasses :
Css Class Prefix
Die Bezeichnung
.col-
Für die besonders kleinen Geräte (Extra Small), mit der Breite von kleiner als 576px
.col-sm-
Für die kleinen Geräte (Small), mit der Breite von kleiner als oder so gleich wie 567px.
.col-md-
Für die durchschnittlichen Geräte (Medium), mit der Breite von größer als oder so gleich wie 768px
.col-lg-
Für die größen Geräte (Large), mit der Breite von größer als oder so gleich wie 992px
.col-xl-
Für die besonders größen Geräte (Extra Large), mit der Breite von größer als oder so gleich wie 1200px.
Die Beispiele ist die beste Maßnahme um die Grundsatz der Operation des Netzsystem im Bootstrap zu erklären.
col-sm-*
sm: ist die Abkürzung von "Small" (klein). Es erwähnt die Geräte mit dem kleinen Bildschirm und der Breite des Bildschirm von größer als oder so gleich wie 567px. (Die Geräte mit der Breite des Bildschirm von kleiner als 567px wird besonders klein genannt (extra small)).
col-sm-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-sm-3 bg-primary">
               <p>col-sm-3</p>
            </div>
            <div class ="col-sm-9 bg-success">
               <p>col-sm-9</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Das Beispiel oben durchführen und beobachten
If ".container" (der Behälter) ist >= 567px breit, die Einheiten ".col-sm-*" werden in einer Zeile (row), und sie füllen die Breite vom .container. Aber wenn die Breite vom .container kleiner als 567px ist, werden die Einheiten ".col-sm-*" in vielen unterschiedlichen Zeilen liegen. Sie erfüllen die Breite vom .container noch. Wir schließen, dass 567px eine besondere Wert der Einheiten ".col-sm-*" ist:
col-md-*
md: ist die Abkürzung vom "Medium", es erwähnt die Geräte mit der durchschnittlichen Bildschirm, dessen Breite größer als oder so gleich wie 768px ist. Das ist die Größe der Tablet.
col-md-example.js
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 bg-primary">
              <p>col-md-2</p>
            </div>
            <div class ="col-md-3 bg-secondary">
               <p>col-md-3</p>
            </div>
            <div class ="col-md-7 bg-success">
               <p>col-md-7</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Die Wert vom 768px ist besonder für die Einheiten ".col-md-*".
col-lg-*, col-xl-*
lg: ist die Abkürzung vom "Large", die die Geräte mit der Bildschirmsbreite vom größer als oder so gleich wie 992px erwähnt.
xl: ist die Abkürzung vom "Extra Large", die die Geräte mit der Bildschirmsbreite von größer als oder so gleich wie 1200px erwähnt.
Der Operationsgrundsatz vom ".col-lg-*"& ".col-xl-*" ist so gleich wie vom ".col-sm-*", ".col-md-*".
col-*
Die Geräte, deren Bildschirmsbreite von kleiner als 567px ist, wird besonders klein genannt (extra small).
col-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-2 bg-primary">
              <p>col-2</p>
            </div>
            <div class ="col-3 bg-secondary">
               <p>col-3</p>
            </div>
            <div class ="col-7 bg-success">
               <p>col-7</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Die Einheiten ".col-*" werden in einer Zeile (row) obwohl Sie die Breite vom ".container" reduzieren machen. Allerdings können Sie die Breite vom ".container" kleiner als 320px machen.

2. die Kombination: col-sm-*,col-md-*, ..

Eine Einheit (element) kann die Klasse col-*, col-sm-*, col-md-*... mit einander kombinieren. Das folgende Beispiel zeigt Ihnen, wie Bootstrap diese Klasse anwendet.
combine-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 col-sm-6 bg-primary">
              <p style="font-style:italic;">col-md-2</p>
              <p style="font-weight:bold;">col-sm-6</p>
            </div>
            <div class ="col-md-10 col-sm-6 bg-success">
               <p style="font-style:italic;">col-md-10</p>
               <p style="font-weight:bold;">col-sm-6</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

3. col, col-sm,.. col-auto, col-sm-auto,..

col, col-sm, col-md, col-lg, col-xl
Die oben Beispiele zeigen Ihnen wie die Klasse col-*, col-sm-*, col-md-*, col-lg-*, col-xl-* (die Breite festlegen) zu benutzen. Das folgende Beispiel ist die Verwendung der Klasse col, col-sm, col-md, col-lg, col-xl (die Breite nicht festlegen):
equal-width-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col bg-success">
               <p>col</p>
            </div>
         </div>

         <hr>

         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
col-auto, col-sm-auto, col-md-auto, col-lg-auto, col-xl-auto
Die *-auto benutzenden Elemente haben die automatischen Breite nach ihrer Inhaltslänge.
auto-column-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">

        <div class= "row">
           <div class ="col bg-primary">
             <p>col</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col bg-secondary">
              <p>col</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>

        <hr>

        <div class= "row">
           <div class ="col-auto bg-primary">
             <p>col-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-auto bg-secondary">
              <p>col-auto</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>

        <hr>

         <div class= "row">
            <div class ="col-auto bg-primary">
              <p>col-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-auto bg-secondary">
               <p>col-auto</p>
               Short Content
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>

</html>
col-sm-auto
auto-width-example2.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">

        <div class= "row">
           <div class ="col-sm bg-primary">
             <p>col-sm</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm bg-secondary">
              <p>col-sm</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>

        <hr>

        <div class= "row">
           <div class ="col-sm-auto bg-primary">
             <p>col-sm-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm-auto bg-secondary">
              <p>col-sm-auto</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>

        <hr>

         <div class= "row">
            <div class ="col-sm-auto bg-primary">
              <p>col-sm-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-sm-auto bg-secondary">
               <p>col-sm-auto</p>
               Short Content
            </div>
            <div class ="col-sm-2 bg-success">
               <p>col-sm-2</p>
            </div>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>

</html>

4. Gallery mit der Verwendung von Grid erstellen

Angenommen, Sie haben ein Element ".row", und 2 Sub-Elemente ".col-**" , die die gesamten Anzahl der Säule größer als 12 haben, Was wird passieren?
  • Die Anwort ist : 2 Sub-Elemente werden auf 2 verschiedenen Reihen anzeigen.
greater-12columns-example
<!-- 5 + 8 > 12 -->
<div class= "row">
   <div class ="col-5 bg-primary">
      <p>col-5</p>
   </div>
   <div class ="col-8 bg-secondary">
      <p>col-8</p>
   </div>
</div>
greater-12columns-example2
<div class= "container-fluid">
   <h4>(col-sm-*) 5 + 8 > 12</h4>

   <!-- (col-sm-*) 5 + 8 > 12 -->
   <div class= "row">
      <div class ="col-6 col-sm-5 bg-primary">
         <p>.col-6 <b>.col-sm-5</b></p>
      </div>
      <div class ="col-6 col-sm-8 bg-secondary">
         <p>.col-6 <b>.col-sm-8</b></p>
      </div>
   </div>

</div>
col-12, col-*-12
Angenommen, Sie haben ein Element ".row" und einige Sub-Elementen. Ein Sub-Element hat die Anzahl der Säule in Höhe von 12. Was wird passieren?
  • Die Anwort ist: Das Sub-Element, die die Anzahl der Säule in Höhe von 12 hat, wird auf einer Reihe anzeigen und erfüllt die Breite der Reihe
element-12columns-example
<div class= "container-fluid">
   <h4>Element with 12 columns</h4>
    
   <div class= "row">
      <div class ="col-2 bg-primary">
         <p>.col-2</p>
      </div>
      <div class ="col-12 bg-secondary">
         <p>.col-12</p>
      </div>
      <div class ="col-5 bg-danger">
         <p>.col-5</p>
      </div>
   </div>
</div>
Gallery
Die Verwendung der oben Eigenschaften vom Grid hilft Ihnen bei der Erstellung eines schönen Gallery (die Gallerie) und bei der Änderung der Größe des Gerät
grid-gallery-example
<div class= "container-fluid">
   <h4>Gallery</h4>

   <div class= "row">
      <div class ="col-12 col-sm-6 col-md-4 bg-primary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-secondary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-danger">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-success">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-info">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-dark">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
   </div>
</div>
OK, Unten ist ein mehr kompliziertes Beispiel. Die Verwendung von Grid für die Erstellung eines Gallery, in diesem Beispiel verwende ich einige Utility-Klassen vom Bootstrap.
complex-gallery-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Grid</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .height100 {
         height: 100%;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
         <h4>Complex Gallery</h4>
         <div class= "row d-inline-flex">
            <!-- Gallery Item 1 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal1.png"/>
                  </div>
                  <h2>Sheep</h2>
                  <p>Info..</p>
               </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal2.png"/>
                  </div>
                  <h2>Horse</h2>
               </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal3.png"/>
                  </div>
                  <h2>Duck</h2>
               </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal4.png"/>
                  </div>
                  <h2>Goat</h2>
               </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal5.png"/>
                  </div>
                  <h2>Chicken</h2>
               </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal6.png"/>
                  </div>
                  <h2>Cow</h2>
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
.d-flex, .flex-column (?) .p-2 (?)

5.  .w-100 verwenden

Im Bootstrap4 macht die Klasse w-100 die Einheiten (Element) mit der Breite .container (width = 100%) erfüllen. Es wird die Elementen von ihrer Linke und Rechte in 2 verschiedene Zeile (row). Allerdings haben alle Elemente noch ein gleiches Vaterelement ( .row )
.w-100
<div class= "container-fluid">
   <div class= "row">
      <div class ="col bg-primary">
         col (1)
      </div>
      <div class ="col bg-secondary">
         col (2)
      </div>
      
      <div class ="w-100"></div>
      
      <div class ="col bg-success">
         col (3)
      </div>
      <div class ="col-3 bg-danger">
         col-3 (4)
      </div>
   </div>
</div>
Ihre Frage wird jetzt gestellt, warum Bootstrap die Klasse .w-100 erstellt, warum werden 2 Klasse .row benutzt um das ähnliche Ergebnis zu bekommen?
Die erste Vorteil: Mit der Klasse .w-100 können Sie die Elemente, die auf 2 Zeile gezeigt werden, in einer Zeile umwandeln und umgekehrt. Zum Beispiel haben Sie 5 Elemente auf einen .container. Und Sie möchten, wenn die Breite vom .container < 567px ist, zeigen sie auf 2 Zeile. Umgekehrt werden sie auf einer Zeile anzeigen.
.w-100 d-*-none
<div class= "container-fluid">
   <div class= "row">

      <div class ="col bg-primary">
         <p>col (1)</p>
      </div>
      <div class ="col bg-secondary">
         <p>col (2)</p>
      </div>

      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>

      <div class ="col bg-success">
         <p>col (3)</p>
      </div>
      <div class ="col-3 bg-danger">
         <p>col-3 (4)</p>
      </div>
      <div class ="col bg-warning">
         <p>col (5)</p>
      </div>
   </div>

</div>
Die 2.Vorteil: Sie können die Reihenfolge der Einheiten ändern wenn sie zu einem ".row" gehören. Sie können die Reihenfolge der Einheiten nicht ändern wennn sie auf 2 unterschiedlichen ".row" liegen.
.w-100 order-*-*
<div class= "container-fluid">

   <div class= "row">
      <div class ="col order-sm-12 bg-primary">
         <p>col (1)</p>
         <p>order-sm-12</p>
      </div>
      <div class ="col order-sm-11 bg-secondary">
         <p>col (2)</p>
         <p>order-sm-11</p>
      </div>

      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>

      <div class ="col order-sm-2 bg-success">
         <p>col (3)</p>
         <p>order-sm-2</p>
      </div>
      <div class ="col-3 order-sm-3 bg-danger">
         <p>col-3 (4)</p>
         <p>order-sm-3</p>
      </div>
      <div class ="col  order-sm-1 bg-warning">
         <p>col (5)</p>
         <p>order-sm-1</p>
      </div>
   </div>

</div>

Anleitungen Bootstrap

Show More

Neueste Artikel

Show More