codestory

Die Anleitung zu Bootstrap Display Utility

View more Tutorials:

1- Bootstrap Display Utility

Display Utility (Das Utility Display) ist ein Teil im Bootstrap. Es baut ein System der Klasse, damit Sie die Elemente anzeigen oder verstecken kontrollieren. Sie kontrollieren, wie die Elemente anzeigen und mit der Größe-Änderungen vom Vater-Element agieren. Diese Klasse haben die Namen in folgenden Format:

.d-{breakpoint}-{value}

Davon:
  • {breakpoint}: unzwanghaft.
  • {value}: zwanghaft

{breakpoint}:

{breakpoint}Die Bezeichnung
sm(Small). Es funktioniert wenn die Breite des Element >= 567px ist
md(Medium). Es funktioniert wenn die Breite des Element >= 768px ist
lg(Large). Es funktioniert wenn die Breite des Element >= 992px ist
xl(Extra Large). Es funktioniert wenn die Breite des Element >= 1200px ist
printdie Ausdruck betreffen

{value}:

{value}Die Bezeichnung
nonedas Element verstecken machen.
inlinewie {display: inline}.
blockwie  {display: block}.
inline-blockwie  {display: inline-block}.
tablewie  {display: table}. Es bewirrt, dass das Element das gleiche Verhalten wie Element <table> hat.
table-rowwie  {display: tabled-row}. Es bewirrt, dass das Element das gleiche Verhalten wie Element <tr> hat..
table-cellwie  {display: table-cell}. Es bewirrt, dass das Element das gleiche Verhalten wie Element  <td> hat..
flexwie  {display: flex}. in Unterricht Bootstrap Flex die Details sehen.
inline-flexwie  {display: inline-flex}. in Unterricht  Flex Utility die Details sehen.​​​​​​​.

2- Class .d-inline, .d-block, .d-inline-block

Wenn Sie CSS gelernt haben, gewöhnen Sie sich sicher an : {display: inline}, {display: block}, {display: inline-block}. Bootstrap verwendet die Klasse .d-inline, .d-block, .d-inline-block statt von den obengemeinten property vom CSS.  Diese Approaches funktionieren gleich.

.d-block

Das die Klasse .d-block angewendete Element ist ein Rechteck-Block. Es bricht die Line vor und hinter vom ihm. Deshalb werden sie auf die unterschiedlichen Reihen liegen. Wenn das Element die bestimmte Breite nicht festgelegt nicht wird, hat es die Breite von 100%.
Das Beispiel von der Klasse .d-block:
d-block-example
<div class="container-fluid">
   <h3 class="mb-3">.d-block example</h3>
   <div class="d-block border" style="width:150px;">
      .d-block (width:150px)
   </div>
   <div class="d-block border">
      .d-block
   </div>
   <div class="d-block border" style="height:90px;">
      .d-block (height:90px)
   </div>
</div>

.d-inline

Das Element, das die Klasse .d-inline angewendet wird, ist kein Rechtsteck-Block. Deshalb können Sie ihm die Breite und die Höhe nicht einstellen. Sie liegen oft auf einer gleichen Reihe (row). Wenn die Breite vom Vate-Element aber zu klein ist, werden einige Elemente in die unten Reihe verschoben werden. Die Inhalt eines Element kann auf einer oder vielen Linie (Line) liegen.
Das Beispiel über .d-inline:
d-inline-example
<h3 class="mb-3">.d-inline example</h3>

<div class="container-fluid">
   <div class="d-inline border border-primary" style="width:100px;">
      I am a .d-inline (width:100px not worked!)
   </div>
   <div class="d-inline border border-info">
      I am a .d-inline
   </div>
   <div class="d-inline border border-danger" style="height:90px;">
      I am a .d-inline (height:90px not worked!)
   </div>
</div>

.d-inline-block

Das Element, das die Klasse .d-inline-block angewendet wird, ist ein Rechtsteck-Block . Sie können auf einer Reihe liegen. Wenn die Breite des Vater-Element zu klein ist, werden einige Elemente in die unten Reihe verschoben werden. Wenn das Element die bestimmte Breite festgelegt wird, wird seine Reihe von der Inhalt abhängig sein
Das Beispiel mit .d-inline-block:
d-inline-block-example
<h3 class="mb-3">.d-inline-block example</h3>

<div class="container-fluid">
   <div class="d-inline-block border border-primary" style="width:100px;">
      .d-inline (width:100px)
   </div>
   <div class="d-inline-block border border-info">
      .d-inline (no width, no height)
   </div>
   <div class="d-inline-block border border-danger" style="height:90px;">
      .d-inline (height:90px)
   </div>
</div>

3- Class .d-flex, .d-inline-flex

Flex (.d-flex, .d-inline-flex) ist ein wichtigstes Utility im Bootstrap, deshalb wird es in einem eigenen Artikel vorgestellt:

4- Class .d-table, .d-table-row, .d-table-cell

Die KlasseDie Bezeichnung
.d-tablewie {display: table}. Es bewirkt, dass das Element das gleiche Verhalten wie das Element <table> haben.
.d-table-rowwie {display: table-row}. Es bewirkt, dass das Element das gleiche Verhalten wie das Element <tr> haben.
.d-table-cellwie  {display: tabled-cell}. Es bewirkt, dass das Element das gleiche Verhalten wie das Element <td> haben​​​​​​​.

.d-table-row

Das die Klasse .d-table-row angewendete Element muss das Kind vom Element ".d-table" sein, Es kann unabhängig nicht erscheinen. Sie können margin, padding, height, width für es nicht einstellen. Diese property wird durch sein Sub-Element ".d-table-cell" entschieden
Das Element ".d-table-row" kann border nur einstellen wenn es das Kind vom Element ".d-table {border-collapse: collapse}" ist.
d-table-row-example
<div class="container-fluid">
   <h3 class="mb-3 text-danger">.d-table + .d-table-row</h3>

   <h4>.d-table {border-collapse: collapse}</h4>
   <div class="d-table" style="border-collapse: collapse;">
      <div class="d-table-row border border-primary">
         .d-table-row .border .border-primary
      </div>
      <div class="d-table-row border border-success" >
         .d-table-row .border .border-success
      </div>
   </div>

   <h4 class="mt-3">.d-table {border-collapse: collapse} + width: 100% </h4>
   <div class="d-table w-100" style="border-collapse: collapse;">
      <div class="d-table-row border border-primary">
         .d-table-row .border .border-primary
      </div>
      <div class="d-table-row border border-success" >
         .d-table-row .border .border-success
      </div>
   </div>

</div>

.table-cell

Das die Klasse .d-table-cell angewendeten Elemente werden das Verhalten wie das Element <td> haben. Sie können padding, width, height, border aber nicht margin für es einstellen. Die Elemente ".d-table-cell" können die direkten Sub-Elementen vom ".d-table-row" oder ".d-table" ​​​​​​​sein.
d-table-cell-example
<div class="container-fluid">
   <h3 class="mb-3 text-danger">.d-table-cell</h3>

   <div class="d-table">
      <div class="d-table-row">
         <div class="d-table-cell border p-4" style="width:200px;height:50px;">
            .d-table-cell .border .p-4 (padding)
            {width:200px;height:50px;}
         </div>
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
      </div>
      <div class="d-table-row">
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
      </div>
   </div>

</div>

5- Das Element (.d-none) verstecken

Die Klasse .d-none wendet für ein Element an, das dieses Element versteckt. Es ist wie Sie Css property {display: none} benutzen. Umgekehrt wenn Sie eine der Klasse .d-inline, .d-inline-block, .d-block verwenden, wird das Element anzeigen.
Die Klasse .d-inline, .d-inline-block, .d-block wurde oben gemeint.
Die anderen Klasse in der Situation "Responsive":
  • .d-none
  • .d-sm-none
  • .d-md-none
  • .d-lg-none
  • .d-xl-none
Unten sind sie einige Situationen von der Anwendung der obengemeinten Klasse für ein Element und die Erklärungen ihrer Operation:
Die KlasseDie Erklärung
.d-noneDas Element wird in allen Bildschirmsgröße versteckt.
.d-none .d-sm-blockDas Element wird in Bildschirmsgröße von  xs (Extra Small) (<567px) versteckt.
.d-sm-none .d-md-blockDas Element wird in Bildschirmsgröße von  [567px-768px) versteckt.
.d-md-none .d-lg-blockDas Element wird in Bildschirmsgröße von  [768px-992px) versteckt.
.d-lg-none .d-xl-blockDas Element wird in Bildschirmsgröße von  [992px-1200px) versteckt.
.d-xl-noneDas Element wird in Bildschirmsgröße von  xl (Extra Large) (>=1200px) versteckt.
.d-blockDas Element wird in Bildschirmsgröße anzeigen
.d-block .d-sm-noneDas Element wird in Bildschirmsgröße von  xs (Extra Small) (<567px) anzeigen.
.d-none .d-sm-block .d-md-noneDas Element wird in Bildschirmsgröße von  [567px,768px) anzeigen.
.d-none .d-md-block .d-lg-noneDas Element wird in Bildschirmsgröße von  [768px,992px) anzeigen.
.d-none .d-lg-block .d-xl-noneDas Element wird in Bildschirmsgröße von [992px,1200px) anzeigen.
.d-none .d-xl-blockDas Element wird in Bildschirmsgröße von  xl (Extra Large) (>=1200px) anzeigen​​​​​​​.
d-none-responsive-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Display</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-danger p-2">
         <h3 class="mb-3 text-danger">.d-none</h3>

         <div class="d-none d-sm-block bg-info">
            .d-none .d-sm-block
         </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>

6- anzeigen wenn In (.d-print-*)

Manchmal möchte der Benutzer die Inhalt einer Seite ausdrucken. Aber eigentlich gibt es auf Seite die unnötigen Inhalte zum Ausdrucken, die die Papiers für den Benutzer kostet. Bootstrap gibt einige Klasse, damit Sie die Gebiete beim Ausdrucken verstecken oder anzeigen können.
Unten ist es die Klasse über das Anzeigen oder Versteckung der Elementen wenn ausdrucken:
  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex
Zum Beispiel
d-print-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Display</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid">
         <h3 class="d-print-none">Print Example</h3>

         <div class="d-print-block border bg-info mb-2 p-2">
             <p>.d-print-block</p>
             <p>Print this Content.</p>
             <p>Print this Content.</p>
             <p>Print this Content.</p>
         </div>
         <div class="d-print-none border bg-danger p-2">
             <p>.d-print-none</p>
             <p>Do not print this Content.</p>
             <p>Do not print this Content.</p>
         </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>

View more Tutorials: