Bootstrap - Display: Полное руководство для начинающих
Здравствуйте, будущие веб-разработчики! Сегодня мы погрузимся в одну из самых полезных функций Bootstrap: утилиты отображения. Как ваш добрый сосед-учитель информатики, я здесь, чтобы помочь вам осилить эту тему с помощью ясных объяснений и множества примеров. Так что налейте себе кружку кофе (или чая, если это ваш выбор) и начнем!
Что такое Display в Bootstrap?
Прежде чем мы перейдем к деталям, давайте поймем, что мы подразумеваем под "display" в Bootstrap. В веб-разработке "display" refers к тому, как элемент отображается на веб-странице. Bootstrap предоставляет набор классов, которые позволяют легко контролировать поведение отображения элементов.
Представьте, что вы arranging мебель в комнате. Иногда вы хотите, чтобы piece была видна, иногда вы хотите спрятать ее, а иногда вы хотите, чтобы она вели себя по-разному в зависимости от размера комнаты (или, в нашем случае, экрана).
Нотация
Bootstrap использует простую и интуитивно понятную нотацию для своих классов отображения. Общий формат:
.d-{value}Где {value} может быть одним из следующих:
| Значение | Описание |
|---|---|
| none | Скрывает элемент |
| inline | Отображает элемент как строчный элемент |
| inline-block | Отображает элемент как блочный контейнер на уровне строки |
| block | Отображает элемент как блочный элемент |
| table | Отображает элемент как таблицу |
| table-cell | Отображает элемент как ячейку таблицы |
| table-row | Отображает элемент как строку таблицы |
| flex | Отображает элемент как блочный контейнер flex |
| inline-flex | Отображает элемент как строчный контейнер flex |
Давайте рассмотрим несколько примеров:
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>В этом примере мы используем d-inline, чтобы два div элемента отображались строчно. Они будут出现在 рядом вместо вертиколяного стека.
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>Здесь мы используем d-block, чтобы span элементы (которые обычно отображаются строчно) отображались как блоки. Они будут stack вертиколяно.
Адаптивные варианты
Теперь, где это становится действительно интересным! Bootstrap позволяет применять различные свойства отображения в зависимости от размера экрана. Формат для этого:
.d-{breakpoint}-{value}Где {breakpoint} может быть:
| Точка разрыва | Описание |
|---|---|
| sm | Малые устройства (≥576px) |
| md | Средние устройства (≥768px) |
| lg | Крупные устройства (≥992px) |
| xl | Extra large устройства (≥1200px) |
Например:
<div class="d-none d-md-block">
Этот текст будет скрыт на малых экранах, но виден на средних и более крупных экранах.
</div>Этот div будет скрыт (d-none) по умолчанию, но будет отображаться как блок (d-md-block) на средних и более крупных экранах.
Скрытие элементов
Скрытие элементов - это распространенная задача в адаптивном设计中. Bootstrap упрощает это с помощью класса d-none:
<div class="d-none">Вы не можете меня увидеть!</div>Этот элемент будет полностью скрыт, независимо от размера экрана.
Но что, если вы хотите скрыть элемент только на определенных экранах? Вот где полезны адаптивные варианты:
<div class="d-lg-none">Я виден на всех экранах меньше, чем крупные.</div>
<div class="d-none d-lg-block">Я отображаюсь только на крупных экранах и выше.</div>Отображение в печати
Bootstrap даже позволяет вам контролировать, как элементы отображаются при печати страницы! Используйте классы d-print-{value} для этого:
<div class="d-none d-print-block">Я появляюсь только когда вы печатаете страницу!</div>
<div class="d-print-none">Я исчезаю, когда вы печатаете страницу!</div>Это особенно полезно для создания версий веб-страниц, удобных для печати, без необходимости использования отдельных стилей.
Объединение всего вместе
Давайте создадим небольшой пример, который использует несколько утилит отображения:
<div class="container">
<h1 class="d-none d-md-block">Добро пожаловать на мой сайт</h1>
<h2 class="d-md-none">Добро пожаловать</h2>
<p class="d-inline-block bg-light p-2">Я всегда inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-">Я отображаюсь inline на крупных экранах.</p>
<div class="d-flex justify-content-between">
<div>Элемент flex 1</div>
<div>Элемент flex 2</div>
<div class="d-none d-xl-block">Я отображаюсь только на extra large экранах</div>
</div>
<footer class="d-print-none">Этот footer не появится при печати.</footer>
</div>В этом примере:
- У нас есть большой заголовок для средних и более крупных экранов, и более小的 для малых экранов.
- У нас есть два абзаца, один из которых появляется только на крупных экранах.
- Мы используем flexbox, с третьим элементом, который появляется только на extra large экранах.
- Footer не будет напечатан.
Заключение
И вот оно, друзья! Мы рассмотрели все аспекты утилит отображения в Bootstrap. Помните, ключ к maîtriser их - это практика. Попробуйте создавать свои own макеты, experiment с различными размерами экранов и не бойтесь mix и match этих классов.
Ваш старый учитель информатики не может не подчеркнуть, насколько ценны эти утилиты в реальном веб-разработке. Они сэкономят вам countless часы написания кастомного CSS и отладки проблем с макетом.
Теперь, идите и создавайте адаптивные, адаптируемые макеты с уверенностью! И помните, в мире веб-разработки, как и в жизни, иногда最强有力的 инструмент - это знание, когда сделать что-то исчезнуть. Счастливого кодирования!
Credits: Image by storyset