Руководство для начинающих по новейшим классам Bootstrap Utility

Bootstrap 4 был выпущен как стабильная версия (наконец-то!) И принес много новых интересных функций для нас. Одним из них является набор обновленных служебных классов Bootstrap, на которых мы сосредоточимся в этой статье.

Представляем классы Bootstrap Utility

Служебные классы Bootstrap предназначены для применения к различным элементам на странице, чтобы как-то быстро их стилизовать без необходимости написания пользовательских правил CSS. Во многих случаях вы просто предоставляете класс для своего элемента и сразу же наблюдаете результат. Если вы никогда раньше не использовали служебные классы, не бойтесь: в большинстве случаев они довольно простые, но мощные. Они очень удобны, потому что вам не нужно изобретать велосипед, и вы можете сосредоточиться на более сложных задачах при создании веб-приложения.

Доступно множество вспомогательных классов Bootstrap, которые устанавливают положение элемента, настраивают его свойства display и float, корректируют поля и отступы, окрашивают текст и фон и многое другое. Полный список этих классов можно найти на официальном сайте getbootstrap.com , и в этой статье я расскажу о некоторых интересных служебных классах Bootstrap, которые могут значительно упростить вашу жизнь как разработчика. Итак, начнем?

сгибать

Flex — это новая и ожидаемая особенность Bootstrap 4. Она позволяет нам легко управлять компоновкой и выравниванием элемента с помощью нескольких классов. Однако обратите внимание, что эта функция основана на свойстве display: flex Интересно, что система сетки Bootstrap теперь также опирается на flexbox.

Сам по себе Flex — довольно большая тема, и мы не будем подробно ее обсуждать в этой статье. Позвольте мне быстро показать некоторые результаты, которые вы можете достичь с помощью этой функции.

Во-первых, можно легко контролировать направление ваших элементов (то есть будут ли они отображаться слева направо или справа налево). Например:

 <div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

При этом три элемента будут выровнены по правому краю, а первый элемент будет расположен в крайнем правом положении:

Порядок элементов может дополнительно контролироваться с помощью классов, таких как order-NN

 <div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Обратите внимание, что эта функция поддерживает отзывчивость с такими классами, как order-sm-1

Элементы также могут быть выровнены определенным образом по оси X или Y. Например:

 <div class="d-flex align-items-center bd-highlight mb-3">
  <div>Flex item</div>
</div>

Это будет центрировать элемент по оси Y:

терка

Float — это новая утилита, которая заменяет старые добрые «тяги» . В Bootstrap 3 вы бы написали:

 <div class="pull-left">Pull to the left!</div>

 <div class="float-left">Float to the left!</div>

 <div class="float-md-right"></div>

 <div class="d-lg-none">Hide on screens wider than lg</div>

 <div class="d-print-none">Screen Only (Hide on print only)</div>

 <div class="w-25">Width 25%</div>

 <div class="h-25">Height 25%</div>

 <div class="mx-3"></div>

 <p class="text-center">Text is centered!</p>

 <p class="text-xl-center">Text is centered only on very large screens!</p>

 <p class="text-capitalize">capiTaliZed</p>

 <p class="font-weight-bold">Bold text.</p>
<p class="font-weight-light">Light weight text.</p>

 <p class="text-danger bg-dark">Text</p>

 <div class="border"></div>

 <div class="border-top"></div>

 <div class="border-top-0"></div>

 <div class="border-top-0 border-right-0"></div>

 <div class="border border-danger"></div>

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="SOME_URL_HERE"></iframe>
</div>

 <button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>