На этом уроке Вы познакомитесь с основными классами Twitter Bootstrap 3, позволяющими создавать заголовки, абзацы, цитаты и пр.
Создание заголовков
В Twitter Bootstrap 3 доступны все HTML-заголовки от
Выше приведенный пример будет выглядеть примерно так:
Вышеприведенный пример будет выглядеть примерно так:
h1. Заголовок Bootstrap Дополнительный текст
h2. Заголовок Bootstrap Дополнительный текст
h3. Заголовок Bootstrap Дополнительный текст
h4. Заголовок Bootstrap Дополнительный текст
h5. Заголовок Bootstrap Дополнительный текст
h6. Заголовок Bootstrap Дополнительный текст
Создание заголовков страниц
Вы также можете сделать, чтобы заголовок
отображался иначе, чем остальные заголовки на странице, используя компонент с классом «page-header». Кроме того, вы можете использовать тег , чтобы создать подтекст к Заголовку.
Выше приведенный пример будет выглядеть примерно так:
Создание абзацев
По умолчанию основной размер шрифта (font-size) в Bootstrap — 14px, при высоте строки (line-height) 1.428. Эти параметры применяются к тегу и всем разделам. Кроме того, отступ снизу для абзацев (
HTML код выше приведенного примера будет выглядеть примерно так:
Вы можете легко выровнять текст внутри абзаца и другие элементы, используя классы для выравнивания текста.
Выше приведенный пример будет выглядеть примерно так:
Форматирование текста с помощью Twitter Bootstrap
Вы можете свободно использовать теги форматирования текста, такие как , , , чтобы выделить текст полужирным, курсивом, или уменьшить размер шрифта так же, как и в простом HTML.
Выше приведенный пример будет выглядеть примерно так:
Классы для задания регистра текста
Вы также можете преобразовать текст в нижний или верхний регистр, или начинать каждое слово с прописных букв.
Вспомогательные классы для придания тексту дополнительной информации с помощью цвета
Выше приведенный пример будет выглядеть примерно так:
Создание цитат
Чтобы оформить любой HTML как цитату, заключите его в теги
. Для прямого цитирования мы рекомендуем
Выше приведенный пример будет выглядеть примерно так:
Выше приведенный пример будет выглядеть примерно так:
Работа с типографикой в Bootstrap
В этой статье рассмотрим, как в Bootstrap 3 и 4 осуществляется оформление и работа с текстовой информацией.
Шрифты в Bootstrap
В Bootstrap 3 по умолчанию для основного содержимого используется следующие шрифты:
В Bootstrap 4 стек шрифтов был изменён на следующий:
Это изменение позволило отображать текстовый контент на различных устройствах и операционных системах с помощью «родных» шрифтов.
При желании данный набор шрифтов можно установить и для Bootstrap 3. Для этого необходимо собрать свою сборку (например, на странице Customize and download), в которой в качестве переменной @font-family-sans-serif задать стек шрифтов Bootstrap 4.
Если вариант использование данной возможности и без создания пользовательской сборки, посредством добавления данной инструкции в свой файл CSS.
Подключение своего шрифта к странице
При необходимости вы можете также подключить нестандартный шрифт к странице. Для этого, например можно воспользоваться сервисом Google Font или другим способом (например, использовать какой-то скачанный шрифт).
1. Подключаем шрифт (например, Roboto) с помощью элемента link :
2. Определяем область его использования, т.е. выбираем элементы, внутри которых текстовый контент будет отображаться с помощью этого шрифта. Данный шрифт (например, Roboto) при этом должен стоять в свойстве font-family перед всеми другими шрифтами:
Оформление заголовков
В Bootstrap 3 и 4 HTML-заголовкам
задано уже некоторое оформление по умолчанию (например, размер шрифта, margin отступы снизу и сверху, толщина шрифта и т.д.).
Пример создания HTML заголовков:
Классы h1, h2, h3, h4, h5 и h6
Отображение второстепенного контента в заголовках
Классы display для заголовков
Класс page-header для оформления h1
Синтаксис данного класса:
Пример использования класса page-header :
Размер шрифта и высота строки
Но так как в стилях Bootstrap 4 элементу html явно не устанавливается размер шрифта, то данное значение будет браться из браузера.
Например, в десктопной версии браузера Chrome настройка размера шрифтов осуществляется на странице «Настройки» в разделе «Вид страниц». По умолчанию данное значение равно 16px. Если данное значение, например, увеличить до 18px, то 1rem в Bootstrap 4 будет уже равен 18px.
Изменение размера шрифта
Если вы хотите изменить размер шрифта, т.е. сделать его для некоторого блока больше или меньше, то можете воспользоваться CSS. Для этого необходимо открыть свой файл CSS и написать инструкцию (выбрать элементы и указать им свойство font-size с необходимым значением):
Если же вы хотите сделать размер шрифта на разных устройствах разным, то можно воспользоваться медиа запросами:
Эти варианты можно использовать для создания адаптивных заголовков и текста.
Кроме этого, бывают ситуации, когда вы задаёте блоку фиксированную высоту, а контент, который содержит данный блок, в него не помещается.
Но можно поступить и по-другому, а именно показать пользователю, что это не весь контент, добавив после него три точки.
Для этого можно скачать js-плагин dotdotdot. Подключить его к странице и назначить необходимым элементам.
Возможен, конечно, и другой вариант решения данной проблемы в зависимости от задачи. Можно, например, сделать не скрытие контента, а дать возможность его прокрутки.
Текст
Документация и примеры для управления текстом по выравниванию, переносу, обтекании текста и многиму другому.
Выравнивание текста
Легко выравнивайте текст в соответствии с выравниванием компонентов с помощью классов выравнивания. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки ширины окна просмотра, что и система сеток.
Текст с выравниванием по левому краю для всех размеров области просмотра.
Выровненный по центру текст на всех размерах области просмотра.
Текст с выравниванием по правому краю для всех размеров области просмотра.
Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.
Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.
Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.
Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.
Перенос текста и переполнение
Разрыв слов
Трансформация текста
Трансформируйте текст в компонентах с помощью классов заглавных букв.
Текст в нижнем регистре.
Текст в верхнем регистре.
Размер шрифта
Толщина текста и курсив
Изменяйте толщину (жирность) или выделите текст курсивом.
Жирный текст (относительно родительского элемента).
Нормальная толщина текста.
Легкий текст (относительно родительского элемента).
Текст без стиля шрифта
Высота строки
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
Моноширинный текст (ширина каждого символа одинакова)
Это моноширинный текст
Сброс цветов
Оформление текста
Украшайте текст в компонентах классами оформления текста.
Под этим текстом есть линия.
По этому тексту проходит линия.
Переменные
Карты
Утилиты с размером шрифта генерируются из этой карты в сочетании с нашим API утилит.
Текст
Документация и примеры общих текстовых утилит для управления выравниванием, обтеканием, весом и т.д.
Выравнивание текста
Легко выравнивайте текст по компонентам с помощью классов выравнивания текста. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки по ширине области просмотра, что и система сетки.
Текст с выравниванием по левому краю для всех размеров области просмотра.
Выровненный по центру текст на всех размерах области просмотра.
Текст с выравниванием по правому краю для всех размеров области просмотра.
Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.
Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.
Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.
Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.
Перенос текста и переполнение
Разрыв слова
Преобразование текста
Преобразование текста в компонентах с помощью классов капитализации текста.
Текст в нижнем регистре.
Текст в верхнем регистре.
Размер шрифта
Толщина шрифта и курсив
Более жирный текст (относительно родительского элемента).
Текст с нормальной толщиной.
Текст с легкой толщиной.
Более легкий текст (относительно родительского элемента).
Текст с обычным шрифтом
Высота линии
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Моноширинный
Это в моноширинном пространстве
Сброс цвета
Оформление текста
Украшайте текст в компонентах классами оформления текста.
Под этим текстом есть линия.
В этом тексте проходит линия.
Переменные
Карты
Утилиты с размером шрифта генерируются из этой карты в сочетании с нашим API утилит.
API утилит
Bootstrap 5 Colors
MDB is supported by an extensive Material Design color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
Theme
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/free/_variables.scss file.
Note: Theme colors are also available as CSS classes. You can use them directly in your project without compiling scss code. Have a look at the examples below.
Background
Background gradient
Colorize text with color utilities.
Links
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
Components
We also use theme colors as predefined colors for some components, for example, buttons.
Opacity
Text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
How it works
Example
Background
Full palette
All MDB colors are available as Sass variables and a Sass map in scss/free/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
