Die Anleitung zu Bootstrap Container

View more Tutorials:

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.

Class .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>

Class .container

Nach der Breite des Bildschirm von der Geräte verteilt  Bootstrap in 5 Typen:
  1. Die Geräte, deren Breite kleiner als 567px ist, wird Extra Small (besonders klein) genannt.
  2. Die Geräte, deren Breite größer als oder so gleich wie 567px ist, wird Small (klein) oder sm-Gerät genannt .
  3. Die Geräte, deren Breite größer als oder so gleich wie  768px ist, wird Medium (durchschnittlich) oder md-Gerät genannt .
  4. Die Geräte, deren Breite größer als oder so gleich wie  992px ist, wird  Large (groß) oder lg-Gerät genannt .
  5. 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>

View more Tutorials: