betacode

Руководство Bootstrap Sizing Utility

View more Tutorials:

Сайт бесплатного изучения языков:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Bootstrap Sizing

Bootstrap Sizing является утилитой Bootstrap, которая предоставляет вам несколько классов для настройки ширины и высоты для элемента.
Class .w-*
КлассОписание
w-25Эквивалентно использованию Css {width: 25%}.
w-50Эквивалентно использованию  Css {width: 50%}.
w-75Эквивалентно использованию  Css {width: 75%}.
w-100Эквивалентно использованию  Css {width: 100%}.
w-autoЭквивалентно использованию​​​​​​​ Css {width: auto}.
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-*
КлассОписание
h-25Эквивалентно использованию  Css {height: 25%}.
h-50Эквивалентно использованию  Css {height: 50%}.
h-75Эквивалентно использованию  Css {height: 75%}.
h-100Эквивалентно использованию  Css {height: 100%}.
h-autoЭквивалентно использованию  Css {height: auto}.
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
КлассОписание
.mw-100Эквивалентно использованию  Css {max-width: 100%}.
.mh-100Эквивалентно использованию  Css {max-height: 100%}.
mw-100-example

<h4>Image with max-width:100%</h4>

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

View more Tutorials: