Die Anleitung zu Bootstrap Container

Bootstrap Container

1. Bootstrap Container

Im HTML ist ein container ein Element, das die anderen Elemente enthalten kann, z.B <div>, <span>, .. Die Klasse .container oder .container-fluid können für diese Elemente verwendet werden. OK jetzt werde ich Sie den Unterschied von 2 Klassen oben erklären.

.container-fluid

Die Klasse .container-fluid wird bei der Anwendung für ein Element dieses Element seine Breite von 100% haben macht.

container-fluid-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Container Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h4>.container-fluid Example</h4>
      
      <div class="container-fluid" style="background: #cdd;">
           .container-fluid
      </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>

.container

Nach der Breite des Bildschirm von der Geräte verteilt Bootstrap in 5 Typen:

Die Geräte, deren Breite kleiner als 567px ist, wird Extra Small (besonders klein) genannt.
Die Geräte, deren Breite größer als oder so gleich wie 567px ist, wird Small (klein) oder sm-Gerät genannt .
Die Geräte, deren Breite größer als oder so gleich wie 768px ist, wird Medium (durchschnittlich) oder md-Gerät genannt .
Die Geräte, deren Breite größer als oder so gleich wie 992px ist, wird Large (groß) oder lg-Gerät genannt .
Die Geräte, deren Breite größer als oder so gleich wie 1200px ist, wird Extra Large (besonders groß) oder xl-Gerät genannt .

Wenn ein Element die Klasse .container angewendet wird, was dann passiert?

container-example

<h4 style="color:#ff9249">.container Example:</h4>

<div class="container" style="background: #cdd;">
   .container
</div>

Der Fall 1: Wenn die Breite des Gerät kleiner als 567px ist, hat das Element die Breite in Höhe von 100%.

Der Fall 2: Wenn die Breite des Gerät größer als oder so gleich wie 567px und kleiner als 768px ist, wird das Element in der Mittel anzeigen und hat die Breite von 567px.

Der Fall 3: Wenn die Breite des Gerät größer als oder so gleich wie 768px und kleiner als 992px ist, wird das Element in der Mittel anzeigen und die Breite in Höhe von 768px haben

Der Fall 4: Wenn die Breite des Gerät größer als oder so gleich wie 992px und kleiner als 1200px ist, wird das Element in der Mittel anzeigen und die Breite von 992px haben.

Der Fall 5: Wenn die Breite des Gerät größer als oder so gleich wie 1200px ist, wird das Element in der Mittel anzeigen und die Breite von 1200px haben.

container-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Container Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h4 style="color:#ff9249">.container Example:</h4>

      <div class="container" style="background: #cdd;">
         .container
      </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>

Die Anleitung zu Bootstrap Container

1. Bootstrap Container

Anleitungen Bootstrap

Anleitungen Bootstrap

Neueste Artikel