Cодержание
Руководство Bootstrap Sizing Utility
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
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%">
*
