Цвета bootstrap: Цвета. Утилиты · Bootstrap. Версия v4.0.0

Цвета. Утилиты · Bootstrap. Версия v4.0.0

Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.

Цвет

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-muted</p>
<p>.text-white</p>

Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus. Заметьте, что классы . text-white and .text-muted не имеют ссылочной стилизации.

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>

Цвет фона

Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color, так что в некоторых случаях вам понадобится утилиты .text-*.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>

Градиентный фон

Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

<div>.bg-gradient-primary</div>
<div>.bg-gradient-secondary</div>
<div>.bg-gradient-success</div>
<div>.bg-gradient-danger</div>
<div>.bg-gradient-warning</div>
<div>.bg-gradient-info</div>
<div>.bg-gradient-light</div>
<div>.bg-gradient-dark</div>

Специфические случаи

Иногда контекстуальные классы нельзя применять из-за специфики другого селектора. В некоторых случаях эффективным «костылем» может стать оборачивание содержимого вашего элемента в <div> с классом.

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Цвета. Утилиты · Bootstrap. Версия v4.3.1

Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.

Цвет

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-body</p>
<p>.text-muted</p>
<p>.text-white</p>
<p>.text-black-50</p>
<p>.text-white-50</p>

Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus. Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>

Цвет фона

Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color, так что в некоторых случаях вам понадобится утилиты .text-*.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>
<div>.bg-transparent</div>

Градиентный фон

Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.

• .bg-gradient-primary
• .bg-gradient-secondary
• .bg-gradient-success
• .bg-gradient-danger
• .bg-gradient-warning
• .bg-gradient-info
• .bg-gradient-light
• .bg-gradient-dark

Специфические случаи

Иногда контекстуальные классы нельзя применять из-за специфики другого селектора. В некоторых случаях эффективным «костылем» может стать оборачивание содержимого вашего элемента в <div> с классом.

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

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

1- Text Color (Цвет текста)

Text Colors:

text-color-example

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-body</p>
<p>.text-muted</p>
<p>.text-white</p>
<p>.text-black-50</p>
<p>.text-white-50</p>

Link Colors:

Все классы выше (За исключением .text-white & .text-muted) могут применить к Link для настройки цвета для Link. Bootstrap поддерживает статус hover и focus соответствующий каждому цвету выше.

text-color-link-example

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>

2- Background Color (Цвет фона)

Индентично цвету текста (Text color), Bootstrap так же предоставляет классы для настройки фонового цвета элементам.

bg-color-example

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>
<div>.bg-transparent</div>

Цвета · Bootstrap v4.6

Посмотреть на GitHub
Оригинал

Передайте смысл через цвет с помощью нескольких вспомогательных классов цвета. Также включает поддержку стилизации ссылок с помощью состояний наведения.

Работа со спецификой

Иногда контекстные классы не могут быть применены из-за специфики другого селектора. В некоторых случаях достаточным обходным путем является обертывание содержимого Вашего элемента в <div> с классом.

Передача смысла вспомогательным технологиям

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

Цвет

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-body</p>
<p>.text-muted</p>
<p>.text-white</p>
<p>.text-black-50</p>
<p>.text-white-50</p>

Классы контекстного текста также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют дополнительных стилей ссылок, кроме подчеркивания.

<p><a href="#">Primary ссылка</a></p>
<p><a href="#">Secondary ссылка</a></p>
<p><a href="#">Success ссылка</a></p>
<p><a href="#">Danger ссылка</a></p>
<p><a href="#">Warning ссылка</a></p>
<p><a href="#">Info ссылка</a></p>
<p><a href="#">Light ссылка</a></p>
<p><a href="#">Dark ссылка</a></p>
<p><a href="#">Приглушенная ссылка</a></p>
<p><a href="#">Белая ссылка</a></p>

Цвет фона

Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса. Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет, поэтому в некоторых случаях Вы захотите использовать утилиты .text-*.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>
<div>.bg-transparent</div>

Градиент фона

Когда для параметра $enable-gradients установлено значение true (по умолчанию false), Вы можете использовать классы утилит .bg-gradient-. Узнайте о наших параметрах Sass, чтобы включить эти и другие классы.

• .bg-gradient-primary
• .bg-gradient-secondary
• .bg-gradient-success
• .bg-gradient-danger
• .bg-gradient-warning
• .bg-gradient-info
• .bg-gradient-light
• .bg-gradient-dark

Bootstrap 4. Цвета

Цвет текста

Классы, чтобы сделать текст цветным.

• text-primary
• text-secondary
• text-success
• text-info
• text-warning
• text-danger
• text-light
• text-dark
• text-white
• text-muted

text-muted Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

text-primary Nullam id dolor id nibh ultricies vehicula ut id elit.

text-secondary Nullam id dolor id nibh ultricies vehicula ut id elit.

text-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

text-info Maecenas sed diam eget risus varius blandit sit amet non magna.

text-warning Etiam porta sem malesuada magna mollis euismod.

text-danger Donec ullamcorper nulla non metus auctor fringilla.

text-white Etiam porta sem malesuada ultricies vehicula.

При использовании белого цвета text-white не забывайте изменить фон, чтобы увидеть текст.

<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Etiam porta sem malesuada ultricies vehicula.</p>

Эти классы можно использовать и для ссылок. Обратите внимание, что белый цвет использовать нельзя.

Muted link
Primary link
Success link
Info link
Warning link
Danger link

<a href="#">Muted link</a>
<a href="#">Primary link</a>
<a href="#">Success link</a>
<a href="#">Info link</a>
<a href="#">Warning link</a>
<a href="#">Danger link</a>

Фон

Для заливки фона можно использовать классы:

• bg-primary
• bg-secondary
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-light
• bg-dark
• bg-white

bg-primary Nullam id dolor id nibh ultricies vehicula ut id elit.

bg-secondary Nullam id dolor id nibh ultricies vehicula ut id elit.

bg-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

bg-info Maecenas sed diam eget risus varius blandit sit amet non magna.

bg-warning Etiam porta sem malesuada magna mollis euismod.

bg-danger Donec ullamcorper nulla non metus auctor fringilla.

Другие цвета

Также встречаются другие классы для работы со цветом.

• alert-success
• alert-info
• alert-warning
• alert-danger

alert-success — использует цвет для успешных операций

alert-info — использует цвет для информации

alert-warning — использует цвет для предупреждения

alert-danger Цвет для опасности!

<div role="alert">  <b>alert-success</b> - использует цвет для успешных операций</div>
<div role="alert"><b>alert-info</b> - использует цвет для информации</div>
<div role="alert"><strong>alert-warning</strong> - использует цвет для предупреждения</div>
<div role="alert"><b>alert-danger</b> Цвет для опасности!</div>

Если в подобных блоках используются ссылки, то их тоже можно подсветить аналогичными цветами через класс .alert-link. Показан один пример.

<div role="alert">
  <strong>Жирный текст</strong> <a href="#">Это ссылка</a> А это текст.
</div>

Вернуться к началу раздела Bootstrap

Реклама

Знакомимся с Bootstrap 4: нововведения, основные стили

Масштабная статья, охватывающая практически все тонкости и нюансы четвёртой версии одного из самых популярных фреймворков Bootstrap 4. Это первая часть данной статьи. В ней будут рассмотрены нововведения и основные стили фреймворка.

Глубокое погружение в решение общих проблем, связанных с веб-дизайном.

В этой статье мы рассмотрим практические основы, необходимые для создания отзывчивых веб-сайтов, используя Bootstrap 4.

Вы можете быть удивлены тому, а зачем я вообще написал столь огромный гайд на 17 000 слов про Bootstrap. В конце концов поддержка Flexbox и Grid набирает силу. Зачем же нам тогда Bootstrap?

Что же, у меня для вас хорошие новости, в силу своего опыта я написал множество статей про Flexbox и Grid. Поэтому могу с уверенностью сказать, что по-прежнему существует множество ситуаций, когда вам поможет знание последней версии Bootstrap. То есть не существует идеального инструмента для решения той или иной ситуации.

Кстати, если вы плохо знаете CSS, рекомендуем сначала изучить его. Сначала Flexbox, затем CSS Grid, а уже потом и Bootstrap 4.

Но если вы чувствуете себя готовым, давайте продолжим.

Bootstrap 4 — это последняя версия широко распространенного фреймворка для front-end разработчиков Bootstrap.

В Bootstrap 4 есть много новых интересных функций и возможностей, которые упрощают процесс работы над проектом. Самым важным обновлением является интеграция с Flexbox.

Несколько лет назад Bootstrap стал резко популярен, но недавно, перед выпуском новой версии Bootstrap я прекратил использовать фреймворк. Да, на то были причины.

С появлением Flexbox и CSS Grid мне было легче создавать модули для реагирования с использованием встроенной поддержки CSS.

Среди опытных разработчиков, я предполагаю, что Bootstrap менее популярен. Это личное мнение, а не подтвержденный факт. Но, это не значит, что Bootstrap безнадёжен. Вот несколько причин для изучения:

Быстрое прототипирование

Конечно, существует множество других инструментов и фреймворков для прототипирования. Например, вы, возможно, слышали о Bulma и Materialize.

В данном случае, Bootstrap является их конкурентом. Кто-то считает многие его функции лишними, но тем не менее, Bootstrap позволяет выбирать, какие модули нужны лично вам.

Отзывчивый веб-дизайн

Для начинающих, отзывчивый веб-дизайн — это большое дело. Легко смеяться над этим, когда вы опытный разработчик, но вспомните времена, когда вы только начинали. Согласитесь, было трудновато, а Bootstrap как раз решает эту проблему без особых усилий.

Старая кодовая база

Когда я временно перестал использовать Bootstrap для личных и коммерческих проектов, мне все равно пришлось реорганизовать и поддерживать старую базу кода на работе. Нравится вам это или нет, многие старые кодовые файлы написаны в Bootstrap.

Новая версия стала ещё умнее

Намного умнее. Теперь Bootstrap построен поверх Flexbox и содержит много всяких вкусных штук, которые мы рассмотрим ниже.

Простота настройки

Новая версия Bootstrap 4 ещё лучше персоанализируется.

Я проклинал Bootstrap, за необходимость использования «Less» и «Sass» для любой значимой настройки. Хотя эта неприятность всё ещё продолжает существовать, версия 4 намного более настраиваема, чем все предыдущие.

Bootstrap не скоро исчезнет. Вы можете узнать больше о том, стоит ли учиться или нет, почитав ветку форума на freeCodeCamp.

Основы работы Bootstrap, рассмотрение изменений последней версии, советы профессионалов, возможность применить изученное практически сразу же, рассмотрение «мелочей» и многое другое.

Большинство людей говорят, что «все сайты Bootstrap выглядят одинаково». Я не согласен. Правильнее было бы говорить, что «все плохо построенные сайты Bootstrap выглядят одинаково».

Мы, всё-таки, стремимся к созданию красивых сайтов.

Далее вы можете увидеть примеры, которые мы создадим по окончанию данной статьи:

• Ещё раз: предполагается, что у вас есть хорошее представление о том, как работают HTML и CSS. Если вы не знаете CSS очень хорошо, рекомендую начать с этого.
• Вы должны хорошо знать, как работает Flexbox. Прочтите этот подробный справочник или рассмотрите этот пример, про обновления Flexbox.

Этот раздел предназначен для более опытных разработчиков. Если вы новичок в Bootstrap, пропустите этот раздел и вернитесь к нему после чтения других разделов статьи.

Ниже список изменений последней версии Bootstrap 4:

Значение по умолчанию для border-box было изменено

Ранние версии Bootstrap-а устанавливают значение border-box в поле content-box. Большинство специалистов находят это раздражающим. Теперь эта неприятность была устранена.

Консервативный CSS Resets

CSS Resets прошли долгий путь изменений, и теперь в новой версии Bootstrap имеют название «Reboot».

«Reboot» основан на нормализации. Он избегает margin-top, использует inherit, блок rem и собственный стек шрифтов для оптимального рендеринга текста. Я советую потратить хотя бы минут 10 на изучения этой вещи.

Этот раздел предназначен для тех, кто не знаком с работой Bootstrap. Вы можете пропустить этот раздел, если вы более опытный разработчик.

Давай начнем.

Обычно работа над созданием базовой веб-страницы выглядит следующим образом:

1. Работаем над HTML;
2. Делаем красиво с помощью CSS.

Рассмотрим код ниже:

<h2>Hello World</h2>
<h3>Hi, there. Hello again</h3>
<a href="example.com">Link to my website</a>

Вот, что будет выведено:

Представленный выше макет имеет два заголовочных элемента и один ссылочный элемент/тег.

И именно это вы и ожидаете увидеть, однако полученный результат и показывает всю суть. Давайте углубимся в эту суть, чтобы понять почему это так важно.

Еще раз посмотрите на результат выше. Элемент <h2> по умолчанию больше, чем элемент <h3>, а элемент <a> по умолчанию имеет синий цвет.

А заметили ли вы что все это мы получили без использования каких-либо CSS-стилей? Но почему?

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

Как мы можем предотвратить такое поведение нашей веб-страницы?

Решение очень простое. Мы можем переопределить стили по умолчанию, с помощью собственных CSS-стилей.

К примеру:

h2 {
  color: blue
}a {
  color: black
}

В этом примере я поменял местами цвета. Теперь ссылочный элемент черный, а элемент <h2> синий.

Это было легко.

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

Итак, работает это все примерно так:

На внешний вид любой веб-страницы влияют дефолтные стили браузера, стили различных фреймворков таких, как Bootstrap, и написанные вами CSS-стили.

Не беспокойтесь, если пока ничего не поняли, далее я вам все поясню с примерами.

Предположим, что я написал собственную CSS-библиотеку с названием cowbell. Cowbell делает всего одну вещь. Я подключил свою библиотеку, это возможно сделать разными способами, я сделал это через cdn-ссылку. И на своей странице я получил то значение background-color, которое было прописано в библиотеке cowbell.

Без подобной библиотеки, мне бы пришлось для этого прописать следующее:

.cowbell {
   background-color: cowbell
}

Обратите внимание, что все что я сделал включает в себя класс .cowbell с эквивалентным значением background-color.

Кстати, чтобы никто не говорил потом, такого цвета как “cowbell” не существует.

После того как вы включили cowbell-библиотеку на свою страницу, как ей пользоваться? Очень просто! Вы просто добавляете класс .cowbell к любому элементу, который вы хотите сделать цвета cowbell.

Что-то вроде этого:

<!--- это мой невероятный HTML-документ -->
<body>
  Это мой невероятный сайт.
</body>

Так как я уже определил класс .cowbell внутри библиотеки, то нет необходимости беспокоиться по поводу написания функционала. В примере выше добавление класса .cowbell в <body> сделает весь документ цвета cowbell.

Теперь вы использовали CSS-библиотеку!

С точки зрения внутренней структуру, такой подход очень схож с тем, как работает Bootstrap. Точно также устроены CSS-классы в Bootstrap, которые созданы внутри библиотеки.

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

Опять же таки, как это работает? Вы просто добавляете класс .cowbell к любому элементу.

Точно также библиотека Bootstrap содержит в себе большой CSS-файл, в котором располагается огромное количество полезных классов, гибких модулей и общих CSS-свойств.

Давайте же начнем разбирать слой за слоем структуру Bootstrap!

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

В целях простоты дальнейшего изложения материала, я буду использовать cdn. Простите меня за жаргон. CDN – это Content Delivery Network или сеть доставки содержимого.

Самой простой способ понять, что такое CDN – это представьте себе заказ на пару шорт с фиктивного сайта под названием Anazon. Ваш заказ был получен и успешно обработан нашим фиктивным сервисом Anazon. К сожалению, Anazon заметили, что вы проживаете в Антарктиде, а это действительно далеко от их основного склада. Плохие новости.

К счастью, Anazon обладает обширной сетью дистрибьютеров со своими складскими помещениями по всему миру. Превосходно.

Теперь, Anazon решает какой из складов располагается ближе всего к вашему дому в Антарктиде, после чего будет осуществлена доставка вашей пары шорт из этого склада. Точно также, когда вы в следующий раз разместите свой заказ, Anazon проверит что этот склад все еще ближе всего к вам и доставит ваш заказ в течении 24 часов. Ну просто замечательно.

Это очень занимательно, как устроена работа Content Delivery Network. Получается, что CDN как склад, который хранит в себе все самые распространённые библиотеки, наподобие Bootstrap.

Если вы посетите веб-сайт, который имеет ссылку на CDN-ресурс, то браузер загрузит кэш-версию библиотеки. Эта версия «хранится» в памяти вашего Браузера. Если таковая не будет обнаружена, то производится запрос на получение этого ресурса, то есть версия будет подгружена.

Загрузка ресурса с CDN имеет преимущество в виде более быстрого получения желаемого ресурса. Как наша пара шорт!

Ниже представлена ссылка на CDN Bootstrap-а.

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"

Добавьте к вашей странице эту ссылку, и вы будете готовы продвигаться дальше. Например, добавьте эту ссылку в ваш любой HTML-макет:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

В данном разделе мы продолжим создание базовой демонстрационной веб-страницы с использованием Bootstrap. Для наших демок я буду использовать codepen.io.

Процесс добавление Bootstrap 4 к проекту очень прост. Нажмите на раздел настроек CSS и выберите Bootstrap из предложенных вариантов.

Как только это будет сделано, то все необходимые настройки для запуска наших демок готовы. И мы сможем использовать их во всех последующих разделах данной статьи.

Так что же отличает Bootstrap от остальных?

Изображения выше показывает результат применения Bootstrap (снизу), а без Bootstrap (сверху).

Я продолжу с уже всем известным примером “Hello World”, тем более мы уже использовали его в предыдущем разделе. Итак, из приведенных выше примеров разницу заметить довольно непросто, особенно если вы мало работали в области веб-разработки. Но, я думаю, что вы можете заметить, что некоторые дефолтные стили Bootstrap переопределили дефолтные стили браузера.

Итак, мы имеем разные шрифты, интервалы между каждым блоком текста изменены, и ссылка теперь имеет другой стиль.

Bootstrap работает!

Теперь, когда я уверен, что вы понимаете, как в целом работают CSS-библиотеки. Значит запоминаем некоторое количество основных Bootstrap-стилей и классов, которые вы считаете, вам пригодятся.

Некоторые очень умные ребята потратили большое количество времени для того, чтобы создать библиотеку Bootstrap. Они проделали большое количество «грязной» работы за вас. Все что вам нужно сделать, это подключить то, что они сделали и пожинать плоды!

Я буду использовать метод «вопрос — ответ», чтобы объяснить использование Bootstrap-стилей.

Давайте начнем!

Для того, чтобы начать практическое изучение концепции данного раздела, мы начнем со следующего примера. Это глупая поэма про кроликов.

<h2> Bunnie Poems </h2>
<p> The following is a mostly unintelligent poem about Bunnies. Don't think too hard about them.
 <br /> Enjoy!
</p><h3> The Bunnie Who Had No Ears </h3><p> Mr Bunnie. How big the ears of your ancestors </p>
<p> How fluffy the pride of your family </p>
<p> But, wait... </p>
<p> How is it that you have no ears </p>
<p> With your eyes you hear, and your nose you see? </p>
<p> How sad, Mr Bunny </p>
<p> See him hop, hop, hop about on legs so very strong.</p>
<p> But ears, he has none <p>
<p> Live long, and make your ancestors proud </p>

Результатом данного примера будет следующее:

Результат, как видно из примера, находится под влиянием дефолтных стилей браузера. Это называется стиль пользовательского агента.

Первым шагом по устранению данной проблемы является подключение Bootstrap. Пожалуйста, подключите Bootstrap как было сказано ранее, и тогда вы увидите следующий результат:

Пока мы не написали никаких стилей наша страница выглядит вполне элегантно. С Bootstrap-ом у нас появились хорошие отступы и сменилось семейство шрифтов. Заметили эти изменения?

Дефолтные Bootstrap-стили переопределили дефолтные стили браузера. Без каких-либо особых усилий мы получили элегантно-выглядящую страницу.

Вы могли обратить внимание, что текст теперь имеет абсолютно другой шрифт. Bootstrap 4 придерживается идеи собственных шрифтовых стеков. Это очень просто. В силу того, что существует множество различных операционных систем таких, как: Android, MacOS, Windows и Linux, а каждая из них имеет свои предустановленные шрифты.

Bootstrap 4 устанавливает свой стек шрифтов, который использует по умолчанию шрифт sans-serif, доступный на текущем устройстве.

Это гораздо более умная вещь, и при этом гибкость изменения не теряется. Вы можете переопределять подобное поведение с помощью собственных шрифтов.

Я же собирался довольно подробно объяснить, как настроить собственные стеки шрифтов CSS, но Marcin Wichary опередил меня. В данной статье он проделал отличную работу по объяснению, я вряд ли у меня получится сделать это лучше.

И поэтому после добавления Bootstrap мы имеем хорошо выглядящие шрифты на всех наших платформах, вне зависимости от операционной системы устройства.

Иногда необходимо, чтобы заголовки были реально большими. Например, для размещения такого заголовка сверху страницы.

Давайте посмотрим на базовый пример, который мы настроили ранее. Здесь мы можем наблюдать заголовки h2 и h3, имеющие размер по умолчанию. Если по каким-то причинам вам необходимо, чтобы они были большего размера, то Bootstrap 4 как раз то, что вам нужно.

Добавьте любой из этих классов display-1 display-2 display-3 или display-4.

К примеру:

<h3> The Bunnie Who Had No Ears </h3>

Я добавил класс display-4 к элементу h3. Как можно видеть ниже, теперь этот заголовок стал значительно больше. Больше чем заголовок h2!

Классы, отвечающие за отображение, привязаны не только к заголовочным элементам от h2 до h6. По факту, вы можете добавлять их к любому элементу на странице.

В примере ниже, я добавил класс display-3 к одному из элементов <p>.

      <p> But, wait... </p>

Разница заключается в выходном размере элемента. Использование класса display-1 приведет к большему размеру чем использование класса display-4. Разницу вы можете наблюдать на изображении ниже:

Очень просто. Добавьте класс text-center к элементу, который необходимо отцентрировать для того, чтобы текст внутри этого блока встал по центру.

      <p>How is it that you have no ears </p>

Для выравнивания теста и его стилизации по правой и левой стороне, используйте класс text-justify, как показано ниже:

<p>How is it that you have no ears </p>

Для этого существует 3 класса, специально предназначенных для выполнения этой задачи: .text-lowercase, .text-uppercase и .text-capitalize.

Если же вы примените класс text-lowercase к уже прописному тексту, то текст отобразится нижним регистром.

<p>WE BELIEVE IN YOU BUNNY</p>

На выходе мы получим текст в нижнем регистре вместо того, что записано в кавычках: “WE BELIEVE IN YOU BUNNY”.

Класс text-capitalize преобразует первую букву каждого слова в прописную, а использование класса text-uppercase сделает тоже самое, но уже со всеми буквами в слове.

Как и во всех остальных классах для работы с текстом, просто добавьте класс text-left или text-right, чтобы добиться желаемого эффекта.

Добавление классов .font-weight-bold,.font-weight-normal и
.font-italic, сделают за вас данную задачу. Если вы до этого работали с третьей версией Bootstrap, то скорее всего заметите, что название классов различаются.

Ниже дан пример:

<p> How sad, Mr Bunny </p>
<p>See him hop, hop, hop about on legs so very strong.</p>
<strong> But ears, he has none </strong>

Обратите внимание, что в примерах используется класс font-weight-normal внутри тега <strong>. По умолчанию, использование тега <strong> приведет к тому, что текст внутри него будет жирным. Это поведение «нормализуется» при добавлении класса font-weight-normal к данному тегу.

Также обратите внимание, что класс, отвечающий за создание курсива НЕ называется font-weight-italic, а просто имеет название font-italic.

Bootstrap имеет класс с названием blockquote, который позволяет создавать блок цитирования, то есть его применяют для стилизации тега <blockquote> или любого текстового блока, например тега <p>.

Пример:

<blockquote>
  Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies
</blockquote>

Результатом этого примера будет: “Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies”, уникальный Bootstrap-стиль для оформления текста кавычками.

Практика добавлять автора после кавычек является довольно распространенной. Тоже самое происходит, когда вы цитируете какой-либо ресурс в виде блока текста. Для того чтобы сделать это с помощью Bootstrap используйте класс blockquote-footer:

<blockquote>
  Men have ears. Men have Noses. Men have Mouths.We do too. We are Bunnies
  <div>Ohans Bunny </div>
</blockquote>

Для этого примера я использовал класс blockquote-footer внутри тега blockquote. Это не является обязательным. Вы можете применять класс blockquote-footer к любому текстовому блоку, например, к тегу <p>.

Ниже приведён результат нашего примера:

Создаётся впечатление, что мне всегда нужно это делать, когда я хочу создать какой-либо упорядоченный список в html. И опять-таки благодаря Bootstrap сделать это очень просто. Для этого используйте класс list-unstyled, как показано ниже:

<ul>
  <li>Thank you</li>
  <li>Muchas Gracias</li>
  <li>Merci</li>
</ul>

Выше пример оформления списка по умолчанию, ниже приведен пример без этого оформления:

Как видно из данного примера в нем отсутствуют точки и отступы.

Иногда возникают ситуации, когда вам необходимо разместить элементы списка горизонтально или же это называется один за другим, в отличии от дефолтного размещения элементов по вертикали. Используйте класс list-inline в теге самого неупорядоченного списка, и класс list-inline-item внутри каждого из элементов списка.

Пример:

<ul>
  <li>Thank you</li>
  <li>Muchas Gracias</li>
  <li>Merci</li>
</ul>

В этом примере мы создали неупорядоченный список, в котором элементы расположены один за другим, иначе говоря, мы выровняли их по горизонтали.

Теперь наш список расположен, как и ожидалось, по горизонтали.

Цвета – это визуальный язык, который большинство из нас обрабатывает, прежде чем осознают какой перед ними цвет.

В сфере дизайна и Bootstrap-а, как правило, цвета могут быть применены к большому количеству элементов. Тексту, заднему фону, границам и еще много к чему.

Спросите у пятилетнего ребенка, как бы он назвал цвета, и он ограничится красным, зеленым, синим.

На данный момент существует более 100 названий цветов в CSS. Такое изобилие цветов создает сложности в запоминании всех этих названий. Скорее всего будет странно, если названия класса будут типа: color-blue color-red, и так на все 100 цветов.

Исходя из этого, цвета в Bootstrap распределены немного иначе. В Bootstrap существует несколько ключевых слов или определенных названий для цветов, которым соотносятся соответствующие цвета.

Например, ключевое слово primary всегда соответствует синему цвету, success зелёному, danger красному и так далее.

Для того, чтобы отображать текст определёнными цветами необходимо использовать класс .text-*, где ‘*’ это, соответствующее цвету ключевое слово. Таковыми могут быть:
– primary
– secondary
– success
– danger
– warning
– infolight
– dark.

Пример:

<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>

Результатом примера выше будет следующее:

Как мы видим Bootstrap предоставляет несколько цветов для работы с текстом.

Важно отметить, что применение класса text-light результирует светлый цвет. Такой эффект отлично подходит, если у вас имеется темный задний фон.

К примеру, я буду использовать класс text-light при наличии синего заднего фона. Выглядит отлично!

Использование класса text-light при наличии тёмного заднего фона дает отличные результаты, и хорошо читаемый текст.

Все мы любим изображения. Если же вы не любите различные изображения, картинки, то вы относитесь к тем немногим не любителям картинок. Из опыта вы должны знать, что стилизованные неправильно изображения могут легко выйти из-под контроля.

Для того чтобы ваше изображение не зависело от используемого устройства, добавьте класс .img-fluid к элементу изображения.

Например:

В наше пример с поэмой про кроликов, я добавил изображение милого котёнка:

 <img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg"/>

По умолчанию, изображения полностью не отображается, из-за размера самого изображения. Добавьте класс .img-fluid к изображению для полностью гибкого изображения.

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg"/>

Как мы видим из примера выше, то наше полностью гибкое изображение милого котёнка отлично отображается как на мобильных устройствах (слева), так и на более крупных устройствах (справа).

Иногда хочется какого-то разнообразия. И поэтому, Bootstrap 4 дает вам возможность наличия изображений с закруглёнными краями. Просто добавьте класс rounded, как показано на следующем примере:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
   />

Обратите внимание, что пример выше имеет более чем один класс. Это отличный пример того, как применять несколько классов к одному элементу.

Внимательно посмотрите на, полученный ниже, результат. Вы должны увидеть, что изображение имеет слегка закруглённые края. Во многих случаях я нахожу закруглённые края более эстетически приятными, чем обычные, квадратные.

В предыдущем примере закругленные края были у всех сторон изображения. Однако также есть возможность сделать круглую границу изображения, и только на какой-то одной стороне. Например, применение класса rounded-top, создаст изображение только с закруглённым верхом. Класс .rounded-bottom сделает тоже самое с противоположной стороной.

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
   />

Кроме того, вы, наверное, удивитесь, но вы также можете использовать класс rounded-left и класс rounded-right для того, чтобы скруглять границы справа и слева.

Конечно же есть! Bootstrap предоставляет возможность по созданию круглых изображений благодаря классу rounded-circle.

Пример:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
   />

Результатом данного примера будет скруглённое изображение милого котёнка.

Как и ожидалось результат – это полностью круглое изображение милого котёнка.

Вы без каких-либо проблем можете настроить данный параметр, Bootstrap 4 не пытается ограничить ваши возможности в этом. Те закруглённые края, которыее предоставляет Bootstrap по умолчанию, могут легко вами переопределяться. Позвольте мне показать вам пример.

Если по какой-то причине вы добавили закруглённые края вашему изображению, то вы легко можете убрать их с помощью класса rounded-0.

Например:

Я добавил border radius равным 50px и применил его к нашему изображению милого котёнка:

img {
  border-radius: 50px
}

Вот, что получилось:

Получилось изображение котёнка очень странной формы. Давайте разберем структуру произошедшего.

В нашем html-макете у нас есть следующее:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
     />

Из этого примера вы можете видеть, что к изображению уже применён класс ounded-bottom. Поэтому Bootstrap полностью контролирует нижнюю часть изображения. Добавления свойства border-radius приведет к изменению только верхней части изображения, или по-другому говоря, изменится только то, к чему Bootstrap не имеет отношения.

Имеет ли это какой-то смысл? Думаю, да.

Если вы уберете класс rounded-bottom, и вообще любые rounded-классы из изображения, то ваше свойство применится ко всему изображению. Посмотрите на результат ниже:

Теперь изображение милого котёнка имеет полностью закруглённые края, которые полностью подчиняются, написанному нами CSS-свойству.

В приведённому выше примере, мы убрали класс rounded-bottom из нашего макета для того, чтобы границы изображения остались в нашем распоряжении. В зависимости от ваших нужд, вы можете полностью избавиться от каких-либо .rounded классов Bootstrap-а, чтобы стилизовать изображение с помощью свойства border-radius.

Если же вам нравится эффект, который образуется от сочетания Bootstrap-классов и CSS-свойств, то вы можете оставлять их и экспериментировать как вам угодно. В нашем примере вы можете оставить класс .rounded-top и вместе с ним использовать свойство border-radius.

Выравнивание – это важная составляющая дизайна. Вы большую часть времени будете по-разному размещать элементы на странице, пока они не встанут как надо.

Для выравнивания изображений по правой или левой стороне необходимо использовать один из этих классов: float-right или float-left.

Пример:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
     />

Как видно bunny был смещен влево. Теперь он располагается рядом с текстом.

Для того чтобы, изображение перемещалось в желаемом направлении, вам необходимо убрать класс img-fluid у изображения и установить фиксированное значение ширины изображения, вот так:

img {
  width: 150px
}

Причиной этому является то, что класс img-fluid заставляет изображение занимать всю доступную ширину экрана на устройстве. Поэтому оно не может смещаться влево или вправо до тех пор, пока занимает все пространство. Следовательно, нам необходимо ограничить ширину изображения с помощью CSS-свойств, то есть как сделал я в примере выше.

Нет ничего невозможно в создании изображений с текстовым описанием. Это полезно в различных галереях и других случаях, когда вы хотите передать больше информации об изображении с помощью блока текста.

Правильным способом, как это сделать является помещение изображения в тег <figure>, а желаемый текст в тег <figcaption>.

Ниже приведен пример данного способа:

<figure>
  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" 
    />
  <figurecaption>
    My name is katey and I am only 2 and a half months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" 
   />
  <figurecaption>
    My name is jando and I am only 3 months old. Clearly, I love to have fun!
  </figurecaption>
</figure>

И вот, что у нас получилось:

Пока что ничего сверхъестественного. Но давайте стилизуем это.

Bootstrap предоставляет возможность использования двух классов figure-img и figure-caption, которые, как вы наверное уже догадались, применяются к изображению и блоку текста соответственно.

Позвольте мне продемонстрировать это на примере.

Вернемся к нашему примеру и добавим в него класс figure-img и класс figure-caption, как в примере ниже:

<figure>
  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
  <figurecaption>
    My name is katey and I am only 2 and a half months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg"/>
  <figurecaption>
    My name is jando and I am only 3 months old. Clearly, I love to have fun!
  </figurecaption>
</figure>

В представленном примере добавляются интервалы между изображениями и подписями к ним, а также текст становится приятно-светлого цвета.

Посмотрите на этот результат:

Обратите внимание, что для создания получившегося эффекта, я добавил класс img-fluid и класс rounded к изображениям. Это привело к тому, что изображения стали гибкими, и их края слегка закруглены.

Центрирование изображений в Bootstrap 4 сделано довольно хитро. Первое что нужно сделать, это убедиться в том, что изображение, которые вы пытается центрировать не занимает всю доступные ширину или 100%. Также у изображения необходимо убрать класс img-fluid, если таковой имеется.

Давайте посмотрим на пример.

Ниже представлен макет из предыдущего примера:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
     />

После чего, я убрал класс img-fluid:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
   />

Затем добавил ограничение по ширине изображения, путем создания своего собственного класса, значение установил 200px:

.img-restricted {
  width: 200px
}

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

Изображение ограничено по ширине на 200px. По умолчанию оно выровнено по горизонтали до начала страницы, НЕ центра.

А теперь давайте разместим изображение по центру.

Существует два способа центрирования изображения в Bootstrap:

1. Использование класса text-center;
2. Использование класса mx-auto.

Данные способы работает немного по-разному.

Для класса text-center изображение, которое будет размещаться по центру, должно сохранять свое display-значение по умолчанию, и представлять из себя inline-block, то есть быть встроенным (inline). Кроме того, сам класс text-center должен быть добавлен в родительский элемент изображения, в нашем случае это <div>, и ни в коем случае не в само изображение.

Сразу извиняюсь, если как-то сбил вас с толку. Давайте просто посмотрим на пример:

<div>
  <img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
     />
</div>

Обратите внимание, что класс text-center был добавлен в родительский элемент <div>, а не в элемент изображения <img>.

Таким образом, мы получили центрованное изображение!

А теперь посмотрите, как будет выглядеть неправильная разметка:

<div>
  <img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
   />
</div>

Данная разметка неправильна, потому что класс text-center применен к элементу изображения. Такое действие не разместит изображение по центру.

Почему же класс text-center работает? Изображения являются inline-block элементами по умолчанию, поэтому к ним будут применяться классы родителя, в нашем случае это класс text-center.

Теперь давайте рассмотрим второй способ центрирования изображений, а именно, использование класса mx-auto.

Если вы по каким-либо причинам вы изменили дефолтное display-значение изображения и сделали свое изображение block-элементом, то класс text-center работать перестанет.

К примеру:

.img-restricted {
   display: block
}

Как только вы установили значение свойства display равное block, то к вашему изображению больше не будут применяться классы родительского элемента, потому что оно больше не является inline-элементом.

Как видно из результата выше, установка значения block приводит к смещению изображение на позицию по умолчанию, а значит оно больше НЕ центрировано.

По этой причине, вам необходимо будет центрировать изображение, как и все остальные блочные элементы. Просто добавьте класс mx-auto к элементу <img>, как показано ниже:

<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" 
    />

И вы увидите, что изображение снова размещено по центру:

После данного раздела вы должны быть готовы центрировать любое изображение, которое только захотите.

Такая возможность появилась в Bootstrap 4, и я считаю её очень полезной. Зачастую вам необходимо потратить много времени, чтобы добавить дополнительные внешние и внутренние отступы. В предыдущих версиях для этого вы должны были написать свои стили. Иногда такой подход не работал из-за необычных задач. Однако все это было учтено в последней версии Bootstrap.

Теперь интервалы в Bootstrap имеют диапазон от .25rem до 3rem. Этого должно быть достаточно для решения большинства задач.

Предположим, что внешний отступ (margin) будет обозначаться буквой m, а внутренний буквой p. Также пускай диапазон значений будет от 0 до 5.

С помощью таких необычных обозначений вы можете добавить интервалы по всему периметру элемента. Для внешних отступов m-*, а для внутренних отступов p-*.

К примеру, m-0, m-1, m-2, m-3, m-4 и m-5 являются действующими названиями классов для добавления внешних отступов. Точно также можно добавить внутренний отступ, используя классы p-0, p-1, p-2, p-3, p-4 и p-5.

Посмотрим, как это работает на предыдущем примере. Добавим интервалы к нашим изображениям и подписям к ним. Классы выше добавляем к тегу <figure>, получаем следующее:

<figure>
  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" 
     />
  <figurecaption>
    My name is flerri and I am only 2 months old.
  </figurecaption>
</figure>

Что изменилось?

Я добавил класс p-5 и ничего более. Давайте посмотрим на результат:

К первому элементу был добавлен внутренний отступ со значением 3rem. Такое значение эквивалентно Bootstrap-классу p-5. Получилось отлично!

Давайте пойдем дальше и добавим внутренние отступы ко всем элементам:

<figure>
  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" 
     />
  <figurecaption>
    My name is flerri and I am only 2 months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" 
    />
  <figurecaption>
    My name is katey and I am only 2 and a half months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" 
    />
  <figurecaption>
    My name is jando and I am only 3 months old. Clearly, I love to have fun!
  </figurecaption>
</figure>

Теперь все элементы имеют дополнительные интервалы.

Очень впечатляющий результат для такого небольшого количества кода.

В предыдущем разделе я рассказывал, что диапазон классов находится от 0 до 5. Ноль уберет какие-либо интервалы у элемента, в то время как интервал будет увеличиваться при использовании значений от 1 до 5.

К примеру, внешний отступ со значением m-2 будет меньше чем отступ со значением m-5, точно также и с внутренним отступом p-1 меньшем чем p-3.

Для самых любознательных 1 равняется значению 0.25rem, 2 это 0.5rem, 3 это 1rem, 4 это 1.5rem, и 5 это 3rem.

Чтобы продемонстрировать вышесказанное я добавил разные значения каждому из изображений:

<figure>
  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" 
      />
  <figurecaption>
    My name is flerri and I am only 2 months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" 
   />
  <figurecaption>
    My name is katey and I am only 2 and a half months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" 
    />
  <figurecaption>
    My name is jando and I am only 3 months old. Clearly, I love to have fun!
  </figurecaption>
</figure>

Ниже полученный результат:

Каждый из элементов figure имеет разное значение внутренних отступов, и как видно из результата значение отступа увеличивается от первого элемента к третьему.

Бывают ситуации, когда вам не нужно добавлять интервалы по всему периметру элемента. Возможно вам нужно добавить интервал только справа, слева или сверху, снизу.

И в Bootstrap есть такая возможность! Я был просто удивлен, и думаю, что вы тоже будете удивлены тому, насколько это полезно при создании материала.

Просто вместо того, чтобы использовать обычный m-* класс, добавьте дополнительный символ t, b, l или r для соответственно top, bottom, left и right.

К примеру, mt-1, mb-1, ml-1 и mr-1 это действующие названия классов. Диапазон от 0 до 5 точно также изменяет значение интервала.

Добавочные символы t, b, l или r точно также работают для внутреннего отступа.

Далее я изменил интервалы, добавив только внутренний отступ для нижней части каждого из элементов.

<figure>
  <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" 
  />
  <figurecaption>
    My name is flerri and I am only 2 months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" 
  />
  <figurecaption>
    My name is katey and I am only 2 and a half months old.
  </figurecaption>
</figure><figure>
  <img src="https://static.pexels.com/photos/416160/pexels-photo-416160.jpeg" 
  />
  <figurecaption>
    My name is jando and I am only 3 months old. Clearly, I love to have fun!
  </figurecaption>
</figure>

Как вы можете видеть я использовал класс pb-3. Данный класс добавит внутренний отступ только к нижней части элемента со значением 1rem.

Довольно много информации про интервалы (отступы). Это последний пример, я обещаю.

Возможность добавить интервалы, например, сверху и снизу есть. Точно также вы можете добавить интервалы с левой стороны и с правой стороны.

Итак, как это реализовано в Bootstrap?

Добавочный символ x отвечает за левую и правую сторону, а символ y за верх и низ. То есть, вам необходимо использовать классы mx-* и my-* или px-* и py-* соответственно.

К примеру, mx-1 добавит внешний отступ со значением 0.25rem вдаль левой и правой стороны, а my-1 сделает тоже самое с верхней и нижней стороной.

Если вы все еще путаетесь в этом, то изображение выше должно помочь вам все запомнить.

Это все по поводу интервалов (отступов), но поверьте мне вся информации по отступам крайне важна!

Вводный абзац чаще всего является первым абзацем в эссе или статье. Целью такого абзаца – это привлечение внимание читателя.

Для того чтобы видоизменить (стилизовать) вводный абзац добавьте к нему класс .lead. Например, я добавлю класс .lead к первому абзацу поэмы про кроликов:

<p> The following is a mostly unintelligent poem about Bunnies. 
Don't think too hard about them. <br /> Enjoy!
</p>

Результатом будет слегка увеличившийся в размерах абзац, как показано ниже:

Для тех, кому интересно насколько изменился вводный абзац, то размер шрифта был увеличен на 25%, и значение font-weight было установлено в 300. В результате получился больший по размерам и более легкий тестовый тон.

В данных разделах мы рассмотрели все, что вам необходимо знать для создания простейшего проекта с использованием Bootstrap 4. Теперь мы можем переходить к изучению отзывчивого дизайна с помощью Bootstrap 4.

Следующая статья

Ссылка на оригинальную статью
Перевод: Александр Давыдов

Оформляем текст с Bootstrap | Vaden Pro

Помимо оформления форм, таблиц и прочих приятных мелочей вместе с Bootstrap мы получаем набор стилей для оформления текста, которые применяются сразу, как мы подключаем bootstrap.min.css и, как обычно, передают в наше распоряжение набор классов позволяющих оформлять теги имеющие отношение к текстам на свое усмотрение.

Стандартно любые текста получают размер шрифта в 14px с полуторным интервалом, абзацы получают в добавок 10 пиксельные отступы сверху и снизу.

По остальным нюансам оформления пройдемся подробнее:

Заголовки

Простым подключением файла мы меняем шрифт, цвет и стандартные отступы наших тегов h2-h6, что делает их на порядок более удобными для восприятия:

При желании, внутрь заголовка можно добавить подпись, которая выведется серым цветом и на порядок меньшим шрифтом. Для этого нам придется воспользоваться тегом <small> внутри нашего заглавного тега. Результат будет следующий:

Помимо всего прочего мы получаем в свое распоряжение набор классов .h2-.h6, применение которых к любым тегам оформит их в точности также, как сами заголовки. Это сделано для того, чтобы было удобнее формировать сео-структуру страницы, придавая необходимое оформление элементам разметки там, где это для нас удобно.

Выделение текста

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

Выравнивание текста

Для этих целей используется следующий набор классов:

• .text-left – отравняет текст по левому краю
• .text-center – выравниваем по центру
• .text-right – правый край
• .text-justify – отравнять текст по обоим краям
• .text-nowrap – текст проигнорирует рамки контейнеров и будет идти до конца одной строкой

Визуально результат их действия выглядит следующим образом:

Выводим цитаты

Для оформления цитат в html предусмотрен специальный тег <blockquote>, Bootstrap добавляет ему красивый внешний вид. Так, код:

<blockquote>
   Веб-разработчики ценящие свое время давно пришли к созданию собственных 
   фреймворков или же использованию уже готовых.
   <footer>Автор неизвестен</footer>
</blockquote>

Будет выглядеть следующим образом:

При желании можно воспользоваться классом .blockquote-reverse, примененным к тегу цитаты, для получения следующего результата:

Меняем регистр текста

Для данных целей предназначено три класса:

• . text-lowercase – сделает вывод всех букв в нижнем регистре
• . text-uppercase – трансформирует все в верхний регистр
• . text-capitalize – задаст верхний регистр всем первым буквам в словах

Пример:

<p>Меняем регистр букв</p> 
<p>Меняем регистр букв</p> 
<p>Меняем регистр букв</p>

Оформляем список определений

Хоть мало кто этим пользуется, да и вообще мало кто о этом знает, но по стандартам html для оформления списков определений и им подобной информации существуют специальные теги dl, dt, dd. Тем не менее красивое оформление в Bootstrap предусмотрено и для них:

Код примера:

<dl>
   <dt>Определение термина</dt>
   <dd>- Автор определения</dd>
   <dt>Определение термина</dt>
   <dd>- Автор определения</dd>
</dl>

Подсветка кода

Воспользовавшись тегом <code>, мы выделим элементы текста бежеватым фоном и изменим их цвет на красным.

В целом, чтобы обратить внимание пользователя на что-то в тексте не дурно, но как по мне со своим прямым назначением данное оформление не справляется, поскольку для полноценной подсветки синтаксиса кода по-прежнему придется пользоваться внешними плагинами, а в базовой комплектации мы получаем по сути слегка доработанную версию тега <mark>

Пример:

<p>Для оформления таблиц мы пользуемся рядом тегов, 
в частности <code>tr</code> и <code>td</code>.<p>

Предформатированный текст

Текст внутри тега <pre>, который сам делает его моноширинным и сохраняет его исходное форматирование (за что он и получает такое странное название- предформатированный) будет выглядеть следующим образом:

Код примера:

<pre>Содержимое контейнера pre будет выделено особым образом</pre>

Выделение текста цветом

По своему усмотрению, добавив соответствующие классы тегам p мы можем задать цвета тексту внутри них. В Bootstrap для этого используется шесть стандартных цветовых гамм:

<p>Оформление muted</p>
<p>Оформление primary</p>
<p>Оформление success</p>
<p>Оформление info</p>
<p>Оформление warning</p>
<p>Оформление danger</p>

В результате чего получаем:

Выделение текста фоном

То же самое мы можем проделать в отношении фона тегов с текстом. Классы отвечающие за название цвета те же самые, только начинаться они теперь будут с bg.

<p>Фон primary</p>
<p>Фон success</p>
<p>Фон info</p>
<p>Фон warning</p>
<p>Фон danger</p>

Результат:

Подводя итоги

Мы разобрали основные моменты связанные с оформлением текстов в Bootstrap. Пользуйтесь на здоровье и проводите приятно время сэкономленное на работе.

Узнать о прочих возможностях данного фреймворка можно почитав вводную статью нашего курса.

Оценок: 5 (средняя 4.6 из 5)

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Bootstrap 4 цвета

Цвета текста

Bootstrap 4 имеет несколько контекстных классов, которые можно использовать для предоставления «значения через цвета».

Классы цветов текста: .text-muted ,
.text-primary , .text-success , .text-info ,
.text-warning , .text-dangerous , .text-secondary , .text-white ,
.text-dark , .text-body (цвет тела по умолчанию / часто черный) и .текстовый свет :

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный текст.

Темно-серый текст.

Основной текст.

Светло-серый текст.

Попробуй сам »

Классы контекстного текста также можно использовать в ссылках, которые добавят более темный цвет при наведении курсора:

Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью .text-black-50 или .text-white-50 классы:

Пример

Черный текст с непрозрачностью 50% на белом фоне

Белый текст с непрозрачностью 50% на черном фоне

Попробуй сам »

Цвета фона

Классы фоновых цветов: .bg-primary ,
.bg-success , .bg-info , .bg-warning , .bg-dangerous , .bg-secondary , .bg-dark и .БГ-свет .

Обратите внимание, что цвета фона не определяют цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом .text- * .

Пример

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный цвет фона.

Темно-серый цвет фона.

Светло-серый цвет фона.

Попробуй сам »

Цветовые классы начальной загрузки для текста, фона, ссылок и др.

В этом уроке я покажу вам примеры встроенных цветовых классов Bootstrap для различных элементов. В Bootstrap есть специальные классы для раскрашивания текста, ссылок, кнопок и т. Д.

пример текста фоновые ссылки навигационная панель

Обычно имена классов используют контекст, который может отражать назначение текста или какого-либо другого элемента.Например, при использовании текста или кнопки красного цвета имя класса содержит слово « –danger» , отражающее некоторую опасную или критическую информацию или действие. Точно так же -warning — это оранжевый цвет для контекста, в котором вы тревожите посетителя для определенного действия.

Таким же образом Bootstrap 4 имеет стандартный шаблон для использования имен классов, например. –Успех, –первичный, –вторичный, –светлый, –темный, –предупреждение и т. Д.

Этим именам предшествуют имена элементов или короткие коды.Например, текст- для текста, btn- для кнопок, bg- для фона.

В последнем разделе вы также можете увидеть пример настройки цветов навигационной панели.

Bootstrap 4 класса для раскрашивания текста

Во-первых, взгляните на пример всех встроенных классов для раскрашивания простого текста в Bootstrap 4.

См. Онлайн-демонстрацию и код

Разметка для раскрашивания текста:

Доступны следующие классы для раскраски текста:

• темный текст / * Черноватый * /
• текст белый
• текстовая лампа
• text-primary / * Стандартный синий цвет * /
• вторичный текст / * Сероватый цвет * /
• текст-предупреждение / * Оранжевый цвет * /
• text-success / * Зеленый цвет * /
• text-dangerous / * Красный цвет * /
• text-info / * Голубой цвет * /
• текст без звука

Пример использования контекстных классов цвета фона

Точно так же вы можете использовать стандартные классы цвета фона для установки фона различных элементов.

В следующем примере показано использование классов контекстного цвета фона в элементах абзацев, div и различных заголовков (h2-h6). Наряду с цветом фона также используются классы контекстного цвета текста.

См. Онлайн-демонстрацию и код

В разметке:

Bootstrap 4 цветовых класса для кнопок

До сих пор вы можете увидеть образец раскраски в Bootstrap. Мы видели, что текст можно раскрасить, используя контекстные имена, используя text- [context class]. Аналогичным образом замените «текст» на «bg» для установки цвета фона.

Кнопки можно раскрасить таким же образом в Bootstrap.Просто замените «текст» или «bg» в классах выше на «btn», и те же стандартные цвета будут применены к кнопкам.

Следующие классы кнопок доступны в Bootstrap версии 4:

• БТН-первичный
• btn-вторичный
• btn-success
• btn-info
• бтн-свет
• btn-темный
• БТН-Опасность
• btn-предупреждение

Просмотрите демонстрацию в Интернете, щелкнув ссылку ниже для кнопок обычного размера:

См. Онлайн-демонстрацию и код

Узнайте больше о кнопках Bootstrap 4 с 15 примерами.

Пример раскраски элементов списка

Как и стандартные встроенные классы текста, фона и кнопок, шаблон, который можно использовать для раскраски элементов списка, аналогичен.

Используйте контекстные классы Bootstrap 4 для создания списков со следующими цветами:

• список-группа-элемент-первичный
• список-группа-пункт-опасность
• список-группа-элемент-успех
• список-группа-элемент-информация
• список-группа-элемент-вторичный
• список-группа-элемент-предупреждение
• список-группа-элемент-темный
• список-группа-элемент-свет

См. Пример использования этих классов:

См. Онлайн-демонстрацию и код

Вы можете увидеть подробное руководство по списку Bootstrap здесь: списки Bootstrap 4

Пример раскраски ссылок

Если вы хотите раскрасить ссылки с помощью классов Bootstrap, просто назначьте классы контекстного текста тегам .Например:

Ссылка синего цвета

См. Пример, в котором я использовал все доступные классы текста для создания ссылок с цветами:

См. Онлайн-демонстрацию и код

В разметке:

Как видите, в нескольких ссылках также используются классы цвета фона.

Использование цвета текста и фона в примере таблицы Bootstrap 4

Тем не менее, Bootstrap 4 имеет встроенные контекстные классы для раскрашивания заголовков таблиц (thead-dark или thead-light) и строк таблицы с помощью контекстных классов и т. Д.

Вы также можете использовать классы цвета фона и текста в таблице. В следующем примере цвет фона устанавливается на уровне таблицы, который применяется ко всей таблице. Цвет текста также устанавливается с помощью контекстного класса текста.

Кроме того, заголовок таблицы имеет отдельный цвет фона и текста. Взгляни:

См. Онлайн-демонстрацию и код

В разметке:

Чтобы узнать больше о контекстных классах таблиц и других функциях, посетите учебник по таблицам Bootstrap 4.

Установка фона для примера навигатора

Вы можете использовать классы цвета фона для установки фона панели навигации в Bootstrap 4. Для этого просто используйте класс фона в теге