Bootstrap - Типография
Добро пожаловать, будущие веб-разработчики! Сегодня мы погружаемся в чудесный мир типографии Bootstrap. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это путеше ствие с множеством примеров, объяснений и, может быть, парой отцовских шуток. Так что давайте начнем!
По умолчанию / глобальные настройки Bootstrap
Bootstrap приходит с некоторыми стандартными настройками типографии, которые делают ваш текст look великолепно сразу после установки. Это как иметь личного стилиста для вашего веб-сайта!
Вот базовый пример того, как Bootstrap стилизует текст:
<p>Этот абзац стилизован с помощью Bootstrap.</p>Вы можете подумать: "Это выглядит как обычный текст!" И вы правы! Но Bootstrap внес了一些 тонкие улучшения. Он установил стандартную семью шрифтов (обычно без засечек), удобный размер шрифта и приятный интерлиньяж. Именно эти мелочи делают Bootstrap таким мощным.
Заголовки
Заголовки в Bootstrap resemble diferentes tamanos de café en su cafetería favorita - vienen en seis sabores, desde h1 hasta h6.
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>Каждый заголовок имеет свой размер и вес, создавая четкую иерархию в вашем контенте. Это как organize tu armario - у всего есть свое место!
Настройка заголовков
Но что, если вы хотите использовать стили заголовков, не используя собственно тег заголовка? Bootstrap вас защитит с классами .h1 до .h6.
<p class="h1">Этот абзац выглядит как заголовок 1</p>
<span class="h3">Этот span выглядит как заголовок 3</span>Это здорово, когда вы хотите的外观 заголовка без семантического значения. Это как носить смокинг-футболку - формально, но не слишком formally.
Заголовки для отображения
Когда обычные заголовки не справляются, Bootstrap предлагает заголовки "display". Это как supermodels заголовков - большие, жирные и привлекающие внимание.
<h1 class="display-1">Отображение 1</h1>
<h1 class="display-2">Отображение 2</h1>
<h1 class="display-3">Отображение 3</h1>
<h1 class="display-4">Отображение 4</h1>Эти заголовки для отображения perfect для тех времен, когда вам нужно сделать большое заявление. Используйте их мудро, однако - слишком много, и ваша страница может начать кричать!
Ведущий текст
Класс .lead - это способ Bootstrap сделать абзац выделяющимся. Это как дать вашему тексту megaphone.
<p class="lead">Этот абзац - ведущий. Он выделяется из обычных абзацев.</p>Используйте это для вводного текста или важной информации, которую вы хотите выделить.
Сокращения
Bootstrap стилизует сокращения и акронимы с точечной линией. Это как дать вашим читателям secret decoder ring!
<p>Всемирная организация здравоохранения (ВОЗ) была основана в 1948 году.</p>Наведите указатель мыши на сокращение, и вы увидите полное слово.
Цитата
Цитаты в Bootstrap стилизованы, чтобы выделяться из остального текста. Они как cool kids в мире абзацев.
<blockquote class="blockquote">
<p>Две вещи безграничны: вселенная и человеческая глупость; и я не уверен насчет вселенной.</p>
</blockquote>Указание источника
Вы можете добавить источник к своей цитате, используя тег <footer> с классом blockquote-footer.
<blockquote class="blockquote">
<p>Две вещи безграничны: вселенная и человеческая глупость; и я не уверен насчет вселенной.</p>
<footer class="blockquote-footer">Альберт Эйнштейн</footer>
</blockquote>Это как давать credit где он принадлежит, но с стилем!
Выравнивание
Bootstrap позволяет вам легко выравнивать текст с помощью классов. Это как учить ваш текст tan - влево, по центру, вправо!
<p class="text-left">Текст выровнен по левому краю.</p>
<p class="text-center">Текст выровнен по центру.</p>
<p class="text-right">Текст выровнен по правому краю.</p>Внутритекстовые элементы
Bootstrap предоставляет стили для различных внутритекстовых элементов. Это как швейцарский армейский нож для вашего текста!
Вот таблица commonly используемых внутритекстовых элементов:
| Элемент | Описание |
|---|---|
<mark> |
Подчеркнутый текст |
<del> |
Удаленный текст |
<s> |
Зачеркнутый текст |
<ins> |
Вставленный текст |
<u> |
Подчеркнутый текст |
<small> |
Меньший текст |
<strong> |
Жирный текст |
<em> |
Курсивный текст |
Пример:
<p>Вы можете использовать эти элементы, чтобы <mark>подчеркнуть</mark>, <del>удалить</del>, <s>зачеркнуть</s>, <ins>вставить</ins>, <u>подчеркнуть</u>, сделать текст <small>меньшим</small>, <strong>жирным</strong> или <em>курсивным</em>.</p>Списки
Bootstrap стилизует списки, чтобы сделать их более визуально привлекательными. Это как дать вашим спискам преображение!
<ul>
<li>Элементunordered списка 1</li>
<li>Элементunordered списка 2</li>
</ul>
<ol>
<li>Элемент ordered списка 1</li>
<li>Элемент ordered списка 2</li>
</ol>Выравнивание списка описания
Bootstrap позволяет вам выравнивать термины и описания в списках описания. Это как organize dictionary, но cooler!
<dl class="row">
<dt class="col-sm-3">Кофе</dt>
<dd class="col-sm-9">Черный горячий напиток</dd>
<dt class="col-sm-3">Молоко</dt>
<dd class="col-sm-9">Белый холодный напиток</dd>
</dl>Это создает двухколоночный макет для вашего списка описания.
Responsive sizes шрифтов
Bootstrap 4 ввел responsive sizes шрифтов. Это как ваш текст делает йогу - он flexes и адаптируется к разным размерам экрана!
Чтобы enable responsive sizes шрифтов, добавьте эту строку в ваш CSS:
html {
font-size: 1rem;
}Затем, используйте класс .font-size-responsive на ваших элементах:
<p class="font-size-responsive">Этот текст будет adjust его размер на разных устройствах.</p>И вот и все,folks! Полное руководство по типографии Bootstrap. Помните, типография - это голос вашего контента - дайте ему петь! Счастливого кодирования, и пусть ваши веб-сайты всегда look fabulous!
Credits: Image by storyset