Руководство Bootstrap Display Utility
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
Display Utility (Утилита для отображения) является частью Bootstrap, она строит систему классов, которая помогает вам контролировать отображение (или скрытие) элементов. Контролирует как элемент будет отображаться и реагировать с изменениями размера родительского элемента. Эти классы имеют названия по следующему формату:
.d-{breakpoint}-{value}
При этом:
- {breakpoint}: Не обязательно.
- {value}: Обязательно
{breakpoint}:
| {breakpoint} | Описание |
| sm | (Small). Работает при ширине элемента >= 567px |
| md | (Medium). Работает при ширине элемента >= 768px |
| lg | (Large). Работает при ширине элемента >= 992px |
| xl | (Extra Large). Работает при ширине элемента >= 1200px |
| связано с распечатием. |
{value}:
| {value} | Описание |
| none | Скрывает элемент. |
| inline | Похож на {display: inline}. |
| block | Похож на {display: block}. |
| inline-block | Похож на {display: inline-block}. |
| table | Похож на {display: table}. Элемент имеет действие схожее с элементом <table>. |
| table-row | Похож на {display: tabled-row}. Элемент имеет действие схожее с элементом <tr>. |
| table-cell | Похож на {display: table-cell}. Элемент имеет действие схожее с элементом <td>. |
| flex | Похож на {display: flex}. Смотрите более подробно в статье Bootstrap Flex. |
| inline-flex | Похож на {display: inline-flex}. Смотрите более подробно в статье Flex Utility. |
Если вы уже изучили CSS, то вы точно знакомы с: {display: inline}, {display: block}, {display: inline-block}. Bootstrap использует классы .d-inline, .d-block, .d-inline-block вместо property выше у CSS. Оба подхода работают индентично.
.d-block
К элементу применяется класс .d-block это прямоугольный блок (block). Он отделяет строку (Line break) спереди и сзади, поэтому они будут расположены на разных строках (row). Если данный элемент не имеет фиксированную ширину, он будет иметь ширину100%.
Пример с классом .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
Элементы, к которым применяется класс .d-inline не будут прямоугольным блоком, поэтому вы не сможете задать ему ширину и высоту. Они обычно расположены на 1 строке (row). Но если родительский элемент имеет слишком маленькую ширину, некоторые элементы могут быть сдвинуты на нижнюю строку. Содержание одного элемента может быть расположено на одной или разных строках (Line).
Пример с .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
Элемент, который применяет класс .d-inline-block является прямоугольным блоком. Они могут располагаться на одной строке. Но если ширина родительского элемента слишком мала, некоторые элементы будут сдвинуты на нижнюю строку. Если данный элемент не имеет фиксированную ширину, его ширина будет зависеть от содержания.
Пример с .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>
Flex (.d-flex, .d-inline-flex) является самой важной утилитой в Bootstrap, из-за этого она представлена в отдельной статье:
| Класс | Описание |
| .d-table | Похож на {display: table}. Делает так, чтобы элемент имел действие похожее на элемент <table>. |
| .d-table-row | Похож на {display: table-row}. Делает так, чтобы элемент имел действие похожее на элемент <tr>. |
| .d-table-cell | Похож на {display: tabled-cell}. Делает так, чтобы элемент имел действие похожее на элемент <td>. |
.d-table-row
Элемент, который применяет класс .d-table-row является подэлементом ".d-table", он не может появиться независимо, вы так же не можете настроить margin, padding, height, width для него, данные property решаются подэлементом ".d-table-cell".
Элемент ".d-table-row" может настроить только border если является подэлементом у ".d-table {border-collapse: collapse}".
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
Элементы, к которым применен класс .d-table-cell будет иметь поведение похожее на элемент <td>. Вы можете настроить для него padding, width, height, border, но не можете настроить margin. Элементы ".d-table-cell" могут быть прямыми подэлементами у ".d-table-row" или ".d-table".
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>
Класс .d-none примененный к элементу скроет его, индентично использованию Css property {display: none}. Напротив, если вы примените один из классов .d-inline, .d-inline-block, .d-block, элемент отобразится.
Классы .d-inline, .d-inline-block, .d-block упомянутые выше.
Другие классы применяют в ситуации "Responsive":
- .d-none
- .d-sm-none
- .d-md-none
- .d-lg-none
- .d-xl-none
Ниже являются некоторые ситуации применения классов выше к элементу, и объяснение их работы:
| Класс | Объяснение |
|---|---|
| .d-none | Элемент будет скрыт со всеми размерами экрана. |
| .d-none .d-sm-block | Элемент будет скрыт с размером экрана xs (Extra Small) (<567px). |
| .d-sm-none .d-md-block | Элемент будет скрыт с размером экрана [567px-768px). |
| .d-md-none .d-lg-block | Элемент будет скрыт с размером экрана 768px-992px). |
| .d-lg-none .d-xl-block | Элемент будет скрыт с размером экрана [992px-1200px). |
| .d-xl-none | Элемент будет скрыт с размером экрана xl (Extra Large) (>=1200px). |
| .d-block | Элемент будет отображен со всеми размерами экрана. |
| .d-block .d-sm-none | Элемент будет отображен с размером экрана xs (Extra Small) (<567px). |
| .d-none .d-sm-block .d-md-none | Элемент будет отображен с размером экрана [567px,768px). |
| .d-none .d-md-block .d-lg-none | Элемент будет отображен с размером экрана [768px,992px). |
| .d-none .d-lg-block .d-xl-none | Элемент будет отображен с размером экрана [992px,1200px). |
| .d-none .d-xl-block | Элемент будет отображен с размером экрана xl (Extra Large) (>=1200px). |
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>
Иногда пользователь хочет распечатать содержание страницы, но на самом деле есть ненужное содержание для распечатывания, которое создает только трату бумаги для пользователя. Bootstrap предоставляет некоторые классы помогает вам скрыть или отобразить зоны при распечатывании.
Ниже является список реляционных классов к отображению или скрытию элемента при распечатывании:
- .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
Пример:
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>
*
