codestory

Die Anleitung zu Bootstrap Sizing Utility

  1. Bootstrap Sizing

1. Bootstrap Sizing

Bootstrap Sizing ist ein Utility vom Bootstrap, es bietet einige Klasse an damit Sie die Breite und die Höhe für das Element einstellen können.
Class .w-*
Die Klasse
Die Bezeichnung
w-25
der Verwendung von Css {width: 25%} entsprechen.
w-50
der Verwendung von Css {width: 50%} entsprechen.
w-75
der Verwendung von Css {width: 75%} entsprechen.
w-100
der Verwendung von Css {width: 100%} entsprechen.
w-auto
der Verwendung von Css {width: auto} entsprechen.
w-example
<div class="border p-1">

   <div class="w-25 p-3 bg-primary">Width 25%</div>
   <div class="w-50 p-3 bg-secondary">Width 50%</div>
   <div class="w-75 p-3 bg-info">Width 75%</div>
   <div class="w-100 p-3 bg-danger">Width 100%</div>
   <div class="w-auto p-3 bg-success">Width auto</div>

</div>
Class .h-*
Die Klasse
Die Bezeichnung
h-25
der Verwendung von Css {height: 25%} entsprechen.
h-50
der Verwendung von Css {height: 50%} entsprechen.
h-75
der Verwendung von Css {height: 75%} entsprechen.
h-100
der Verwendung von Css {height: 100%} entsprechen.
h-auto
der Verwendung von Css {height: auto} entsprechen.
h-example
<div class="border p-1 mt-3" style="height:155px;">
   <div class="h-25 bg-primary" style="display:inline-block; width: 55px;">
      .h-25
   </div>
   <div class="h-50 bg-secondary" style="display:inline-block; width: 55px;">
      .h-50
   </div>
   <div class="h-75 bg-info" style="display:inline-block; width: 55px;">
      .h-75
   </div>
   <div class="h-100 bg-danger" style="display:inline-block; width: 55px;">
      .h-100
   </div>
   <div class="h-auto bg-success" style="display:inline-block; width: 70px;">
      .h-auto
   </div>
</div>
.mw-100, .mh-100
Die Klasse
Die Bezeichnung
.mw-100
der Verwendung von Css {max-width: 100%} entsprechen.
.mh-100
der Verwendung von Css {max-height: 100%} entsprechen.
mw-100-example
<h4>Image with max-width:100%</h4>

<img class="mw-100" src="../images/flower.jpeg" alt="Max width 100%">

Anleitungen Bootstrap

Show More

Neueste Artikel

Show More