betacode

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

View more Tutorials:

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

1- Bootstrap Display Utility

Display Utility (Утилита для отображения) является частью Bootstrap, она строит систему классов, которая помогает вам контролировать отображение (или скрытие) элементов. Контролирует как элемент будет отображаться и реагировать с изменениями размера родительского элемента. Эти классы имеют названия по следующему формату:
.d-{breakpoint}-{value}
При этом:
  • {breakpoint}: Не обязательно.
  • {value}: Обязательно
{breakpoint}:
{breakpoint}Описание
sm(Small). Работает при ширине элемента >= 567px
md(Medium). Работает при ширине элемента >= 768px
lg(Large). Работает при ширине элемента >= 992px
xl(Extra Large). Работает при ширине элемента >= 1200px
printсвязано с распечатием.
{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.

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

Если вы уже изучили 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>

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

Flex (.d-flex, .d-inline-flex) является самой важной утилитой в Bootstrap, из-за этого она представлена в отдельной статье:

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

КлассОписание
.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>

5- Скрыть элемент (.d-none)

Класс .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>

6- Отображать при распечатывании (.d-print-*)

Иногда пользователь хочет распечатать содержание страницы, но на самом деле есть ненужное содержание для распечатывания, которое создает только трату бумаги для пользователя. 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>

View more Tutorials: