Bootstrap Бутстрап Глобальный размер шрифта
Настройки по умолчанию Bootstrap
Глобальный размер шрифта по умолчанию Bootstrap — 14px, с высотой строки 1,428.
Это применяется к < BODY > и ко всем абзацам.
Кроме того, все элементы < p > имеют нижнее поле, равное половине вычисляемой высоты линии (10px по умолчанию).
Типографии
Элементы, приведенные ниже, являются HTML-элементами, которые по умолчанию будут стилизованы немного по-другому, чем параметры браузера. Посмотрите на примеры «попробовать», чтобы увидеть результат/отличия.
Классы, приведенные ниже, используются для дальнейшего стиля элементов.
| Элемент/класс | Описание | |
|---|---|---|
| <h2> — <h6> or .h2 — .h6 | h2-H6 рубрики | |
| <small> | Создает светлый, дополнительный текст в любом заголовкеЗаголовок (вторичный текст) | |
| .small | Обозначает меньший текст (значение 85% от размера родительского элемента): меньший текст | |
| .lead | Выделяет текст: выделить текст | |
| <mark> or .mark | Выделение текста: выделенный текст | |
| <del> | Обозначает удаленный текст: | |
| <s> | Указывает больше не соответствующий текст: больше | |
| <ins> | Указывает вставленный текст: вставленный текст | |
| <u> | Обозначает подчеркнутый текст: подчеркнутый текст | |
| <strong> | Указывает полужирный текст: полужирный текст | |
| <em> | Указывает курсив текста: курсив текст | |
| .text-left | Указывает текст, выровненный по левому краю | |
| .text-center | Обозначает текст, выровненный по центру | |
| .text-right | Указывает текст с выравниванием по правому краю | |
| .text-justify | Обозначает обоснованный текст | |
| .text-nowrap | Обозначает отсутствие текста переноса | |
| .text-lowercase | Обозначает текст в нижнем регистре: строчный текст | |
| .text-uppercase | Обозначает прописной текст: прописной текст | |
| .text-capitalize | Обозначает прописной текст: прописной текст | |
| <abbr> | Элемент < abbr > указывает аббревиатуру или акроним. Аббревиатуры с атрибутом title имеют пунктирную нижнюю границу и курсор справки при наведении, обеспечивая дополнительный контекст при наведении. | |
| .initialism | Отображает текст внутри элемента < abbr > в немного меньшем размере шрифта | |
| <address> | Представляет контактную информацию | |
| <blockquote> | Указывает блоки содержимого из другого источника |
Оформляем текст с Bootstrap | Vaden Pro
Помимо оформления форм, таблиц и прочих приятных мелочей вместе с Bootstrap мы получаем набор стилей для оформления текста, которые применяются сразу, как мы подключаем bootstrap.min.css и, как обычно, передают в наше распоряжение набор классов позволяющих оформлять теги имеющие отношение к текстам на свое усмотрение.
Стандартно любые текста получают размер шрифта в 14px с полуторным интервалом, абзацы получают в добавок 10 пиксельные отступы сверху и снизу.
По остальным нюансам оформления пройдемся подробнее:
Заголовки
Простым подключением файла мы меняем шрифт, цвет и стандартные отступы наших тегов h2-h6, что делает их на порядок более удобными для восприятия:
При желании, внутрь заголовка можно добавить подпись, которая выведется серым цветом и на порядок меньшим шрифтом. Для этого нам придется воспользоваться тегом <small> внутри нашего заглавного тега. Результат будет следующий:
Помимо всего прочего мы получаем в свое распоряжение набор классов .h2-.h6, применение которых к любым тегам оформит их в точности также, как сами заголовки. Это сделано для того, чтобы было удобнее формировать сео-структуру страницы, придавая необходимое оформление элементам разметки там, где это для нас удобно.
Выделение текста
Чтобы выделить фрагмент текста, который, к примеру, может быть полезен пользователю, мы можем воспользоваться тегом
Выравнивание текста
Для этих целей используется следующий набор классов:
- .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. Пользуйтесь на здоровье и проводите приятно время сэкономленное на работе.
Узнать о прочих возможностях данного фреймворка можно почитав вводную статью нашего курса.
Оценок: 4 (средняя 4.5 из 5)
- 11295 просмотров
Понравилась статья? Расскажите о ней друзьям:
Еще интересное
Типографика. Содержание · Bootstrap. Версия v4.2.1
Документация и примеры типографии Bootstrap, включая глобальные настройки, заголовки, текст документа, списки и т.д.
Глобальные настройки
Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.
- Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов
font-familyдля всех ОС и девайсов. - Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию
font-size(обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера. - Используйте атрибуты
$font-family-base,$font-size-baseи$line-height-baseкак типографическую базу для<body>. - Задавайте глобальные цвета ссылок через
$link-colorи применяйте подчеркивание ссылок только в:hover. - Используйте
$body-bgдля заданияbackground-colorдля<body>(по умолчанию стоит#fff).
Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.
Заголовки
Все HTML-заголовки (<h2>—<h6>) доступны в BS4.
| Заголовок | Пример |
|---|---|
|
|
h2. Заголовок bootstrap |
|
|
h3. Заголовок bootstrap |
|
|
h4. Заголовок bootstrap |
|
|
h5. Заголовок bootstrap |
|
|
h5. Заголовок bootstrap |
|
|
h6. Заголовок bootstrap |
<h2>h2. Заголовок bootstrap </h2>
<h3>h3. Заголовок bootstrap </h3>
<h4>h4. Заголовок bootstrap </h4>
<h5>h5. Заголовок bootstrap </h5>
<h5>h5. Заголовок bootstrap </h5>
<h6>h6. Заголовок bootstrap </h6>Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h2 — .h6 также доступны.
h2. Заголовок bootstrap
h3. Заголовок bootstrap
h4. Заголовок bootstrap
h5. Заголовок bootstrap
h5. Заголовок bootstrap
h6. Заголовок bootstrap
<p>h2. Заголовок bootstrap </p>
<p>h3. Заголовок bootstrap </p>
<p>h4. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h6. Заголовок bootstrap </p>Настройка заголовков
Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.
Заголовок отображения С выцветшим вторичным текстом
<h4>
Заголовок отображения
<small>С выцветшим вторичным текстом</small>
</h4>«Заголовок дисплея»
Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» — большего размера, слегка более вычурный.
| Display 1 |
| Display 2 |
| Display 3 |
| Display 4 |
<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>«Лид»
Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>Блочные текстовые элементы
Стили для обычных блочных элементов HTML5.
Тэг-выделитель для подсветки текста.
Удаленный текст.
Зачеркнутый.
Строка — дополнение к документу.
Подчеркнутая
Мелкий шрифт (типа нижний индекс).
Жирный текст.
Курсив.
<p>Тэг-выделитель для <mark>подсветки</mark> текста.</p>
<p><del>Удаленный текст.</del></p>
<p><s>Зачеркнутый.</s></p>
<p><ins>Строка - дополнение к документу.</ins></p>
<p><u>Подчеркнутая</u></p>
<p><small>Мелкий шрифт (типа нижний индекс).</small></p>
<p><strong>Жирный текст.</strong></p>
<p><em>Курсив.</em></p>Классы .mark и .small дают стили, одинаковые с тэгами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.
Также, свободно пользуйтесь тэгами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.
Классы текстовых утилит
Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.
Сокращения
Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.
Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>Цитаты
Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote> для создания цитаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Наименование источника
Добавьте <footer> для идентификации источника. Оберните имя источника в <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer>
</blockquote>Выравнивание
Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>Списки
Без элементов стилизации
Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>Блочные
Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов .list-inline и .list-inline-item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul>
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>Описание и выравнивание
Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсом.
- Списки описания
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Вложенность
-
- Список вложенных определений
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Truncated term is truncated</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt>Nesting</dt>
<dd>
<dl>
<dt>Nested definition list</dt>
<dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>Отзывчивая «типографика»
Этот термин означает масштабирование текста и компонентов простой регулировкой коренного элемента font-size в медиа-запросах. Bootstrap не делает этого по умолчанию, но вы можете легко сделать это сами.
Вот пример. Выбирайте какие угодно font-size и медиа-запросы.
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}Bootstrap 3 — Работа с текстом
На этом уроке Вы познакомитесь с основными классами Twitter Bootstrap 3, позволяющими создавать заголовки, абзацы, цитаты и пр.
В Twitter Bootstrap 3 доступны все HTML-заголовки от <h2> до <h6>. Вы также можете использовать классы от .h2 до.h6 на любые другие элементы веб-страницы, если вы хотите использовать такие же стили как в заголовках.
<h2>h2. Заголовок Bootstrap</h2> <h3>h3. Заголовок Bootstrap</h3> <h4>h4. Заголовок Bootstrap</h4> <h5>h5. Заголовок Bootstrap</h5> <h5>h5. Заголовок Bootstrap</h5> <h6>h6. Заголовок Bootstrap</h6>
Выше приведенный пример будет выглядеть примерно так:
Более того, вы можете использовать теги <small> или тег <span> с классом .small для создания дополнительного текста в любом заголовке, который будет меньше по размеру и светлее, чем основной текст.
<h2>h2. Заголовок Bootstrap <small>Дополнительный текст</small></h2> <h3>h3. Заголовок Bootstrap <small>Дополнительный текст</small></h3> <h4>h4. Заголовок Bootstrap <small>Дополнительный текст</small></h4> <h5>h5. Заголовок Bootstrap <small>Дополнительный текст</small></h5> <h5>h5. Заголовок Bootstrap <small>Дополнительный текст</small></h5> <h6>h6. Заголовок Bootstrap <small>Дополнительный текст</small></h6>
Вышеприведенный пример будет выглядеть примерно так:
h3. Заголовок Bootstrap Дополнительный текст
h4. Заголовок Bootstrap Дополнительный текст
h5. Заголовок Bootstrap Дополнительный текст
h5. Заголовок Bootstrap Дополнительный текст
h6. Заголовок Bootstrap Дополнительный текст
Вы также можете сделать, чтобы заголовок <h2> отображался иначе, чем остальные заголовки на странице, используя компонент с классом «page-header». Кроме того, вы можете использовать тег <small>, чтобы создать подтекст к Заголовку.
<div>
<h2>Заголовок
<small>подтекст к заголовку</small>
</h2>
</div>
Выше приведенный пример будет выглядеть примерно так:
По умолчанию основной размер шрифта (font-size) в Bootstrap — 14px, при высоте строки (line-height) 1.428. Эти параметры применяются к тегу <body> и всем разделам. Кроме того, отступ снизу для абзацев (<p>) составляет половину высоты строки (10px по умолчанию). Вы также можете сделать любой абзац выделенным, просто добавив к нему класс .lead.
<p>Так выглядит обычный абзац Twitter Bootstrap.</p> <p>Так выглядит абзац Twitter Bootstrap, выделенный с помощью класса .lead</p>
HTML код выше приведенного примера будет выглядеть примерно так:
Вы можете легко выровнять текст внутри абзаца и другие элементы, используя классы для выравнивания текста.
<p>Текст, выровненный по левому краю.</p> <p>Текст, выровненный по центру.</p> <p>Текст, выровненный по правому краю.</p> <p>Текст, выровненный по ширине.</p> <p>Текст, без выравнивания.</p>
Выше приведенный пример будет выглядеть примерно так:
Форматирование текста с помощью Twitter Bootstrap
Вы можете свободно использовать теги форматирования текста, такие как <strong>, <i>, <small>, чтобы выделить текст полужирным, курсивом, или уменьшить размер шрифта так же, как и в простом HTML.
<p><b>Полужирное начертание текста</b></p> <p><big>Текст, с увеличенным размером шрифта</big></p> <p><code>Программный код</code></p> <p><em>Акцентированный текст (курсивное начертание)</em></p> <p><i>Курсивное начертание текста</i></p> <p><mark>Выделенный текст</mark></p> <p><small>Текст с уменьшенным размером шрифта</small></p> <p><strong>Акцентированный текст (жирное начертание)</strong></p> <p><sub>Нижний</sub> и <sup>верхний</sup> индексы текста</p> <p><ins>Этот тег используется для выделения текста, добавленного в новую версию документа
(отображается подчеркнутым)</ins></p> <p><del>Этот тег используется для выделения текста, удаленного из документа
(отображается как перечеркнутый)</del></p>
Выше приведенный пример будет выглядеть примерно так:
Классы для задания регистра текста
Вы также можете преобразовать текст в нижний или верхний регистр, или начинать каждое слово с прописных букв.
<p>Машины должны работать. Люди должны думать.</p> <p>Машины должны работать. Люди должны думать.</p> <p>Машины должны работать. Люди должны думать.</p>
Вспомогательные классы для придания тексту дополнительной информации с помощью цвета
Цвета — это мощный способ передачи важной информации в веб-дизайне. Bootstrap имеет несколько вспомогательных классов, которые могут быть использованы для придания тексту дополнительной информации. Например, зеленый цвет текста обозначает успех, оранжевый – предупреждение, красный — ошибки и т.д.
<p>Приглушенный текст</p> <p>Важный текст</p> <p>Текст успеха</p> <p>Текст примечания</p> <p>Текст предупреждения</p> <p>Текст ошибки</p>
Выше приведенный пример будет выглядеть примерно так:
Создание цитат
Чтобы оформить любой HTML как цитату, заключите его в теги <blockquote>. Для прямого цитирования мы рекомендуем <p>.
<blockquote>
<p>У моих детей, конечно, будет компьютер. Но первым делом они получат книги.</p>
<small><cite>Билл Гейтс</cite></small>
</blockquote>
Выше приведенный пример будет выглядеть примерно так:
В качестве альтернативы вы можете выровнять цитату по правому краю, применяя класс .pull-right к элементу <blockquote>.
<blockquote>
<p>У моих детей, конечно, будет компьютер. Но первым делом они получат книги.</p>
<small><cite>Билл Гейтс</cite></small>
</blockquote>
Выше приведенный пример будет выглядеть примерно так:
Типографика в Bootstrap 4 | WebReference
Bootstrap включает в себя стили, которые определяют, как показываются текстовые элементы.
Основной текст
По умолчанию в Bootstrap 4 font-size равен 16px (применяется к элементу <html>), к элементу <body> также применяется font-size равное 1rem.
Bootstrap использует «родной набор шрифтов» (системные шрифты пользователя) с запасным вариантом Helvetica Neue, Arial и sans-serif. У всех заголовков и элементов <p> удалено margin-top. Для заголовков margin-bottom задано как .5rem, а для элементов <p> оно задано как 1rem.
Вы можете полностью поменять любое из этих значений в соответствии с вашим собственным проектом.
Заголовки
Вот пример элементов заголовка, как они показываются в Bootstrap 4.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h2>h2 (Полужирный 36px)</h2>
<h3>h3 (Полужирный 30px)</h3>
<h4>h4 (Полужирный 24px)</h4>
<h5>h5 (Полужирный 18px)</h5>
<h5>h5 (Полужирный 14px)</h5>
<h6>h6 (Полужирный 12px)</h6>Классы заголовков
Bootstrap также включает в себя классы заголовков от .h2 до .h6 на случай, если вам нужно отобразить некоторый строчный текст в стиле определённого заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>.h2 (Полужирный 36px)</p>
<p>.h3 (Полужирный 30px)</p>
<p>.h4 (Полужирный 24px)</p>
<p>.h5 (Полужирный 18px)</p>
<p>.h5 (Полужирный 14px)</p>
<p>.h6 (Полужирный 12px)</p>Подзаголовки
Вы можете создать подзаголовок или дополнительный текст, поместив текст в элемент <small> внутри заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h2>Заголовок 1 <small>Подзаголовок</small></h2>
<h3>Заголовок 2 <small>Подзаголовок</small></h3>
<h4>Заголовок 3 <small>Подзаголовок</small></h4>
<h5>Заголовок 4 <small>Подзаголовок</small></h5>
<h5>Заголовок 5 <small>Подзаголовок</small></h5>
<h6>Заголовок 6 <small>Подзаголовок</small></h6>Заголовки дисплея
Заголовки дисплея предназначены для того, чтобы выделяться больше, чем обычные заголовки. Существует четыре размера заголовка дисплея (.display-1, .display-2, .display-3 и .display-4). Так, например, элемент <h2> может быть представлен в четырёх разных размерах с помощью классов заголовков дисплея.
Чтобы создать отображаемый заголовок, добавьте один из перечисленных выше классов к элементу заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h2>Дисплей 1</h2>
<h2>Дисплей 2</h2>
<h2>Дисплей 3</h2>
<h2>Дисплей 4</h2>Ведущий текст
Вы можете выделить абзац с помощью класса .lead.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>
Это ведущий текст статьи — он выделяется в начале статьи.
</p>
<p>
Это обычный текст обычного размера…
</p>Помеченный текст
Элемент <mark> в HTML представляет текст, помеченный или выделенный для справочных целей, из-за его уместности в другом контексте. Вот пример отображения этого элемента.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Пример <mark>помеченного текста</mark>.</p>Аббревиатуры
Элемент <abbr> в HTML представляет собой аббревиатуру или акроним. Атрибут title можно использовать для расширения аббревиатуры.
В Bootstrap аббревиатуры с атрибутом title отображаются со светлой пунктирной нижней границей и курсором справки при наведении.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<abbr title="Профессор">Проф.</abbr>Вы можете добавить класс .initialism для отображения аббревиатуры несколько меньшим размером шрифта.
<abbr title="Structured Query Language">SQL</abbr> используется для запросов к базам данных.Цитаты
Чтобы применить стили Bootstrap к элементу <blockquote>, используйте класс .blockquote.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote>
<p>Самый важный момент вашей жизни происходит сейчас.
Самый важный человек в вашей жизни — тот, с кем вы сейчас находитесь,
а самая важная деятельность в вашей жизни — то, чем вы сейчас занимаетесь.</p>
</blockquote>Источник цитаты
Bootstrap отображает элементы <cite> и <footer>, вложенные в элемент <blockquote>, следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote>
<p>Многие из нас качаются на волнах верований всех сортов.
Мы погружены в здравый смысл и мудрость нашей культуры,
традиций, общины, профессии, семьи и друзей.</p>
<footer>Том Кэмбелл, <cite>Моя большая теория всего</cite></footer>
</blockquote>Выравнивание цитат
Вы можете использовать текстовые утилиты Bootstrap для выравнивания цитаты, например, .text-center.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote>
<p>Многие из нас качаются на волнах верований всех сортов.
Мы погружены в здравый смысл и мудрость нашей культуры,
традиций, общины, профессии, семьи и друзей.</p>
<footer>Том Кэмбелл, <cite>Моя большая теория всего</cite></footer>
</blockquote>И .text-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote>
<p>Многие из нас качаются на волнах верований всех сортов.
Мы погружены в здравый смысл и мудрость нашей культуры,
традиций, общины, профессии, семьи и друзей.</p>
<footer>Том Кэмбелл, <cite>Моя большая теория всего</cite></footer>
</blockquote>Списки
Bootstrap применяет разные стили и содержит набор классов специально для списков.
Нестилизованные списки
Вы можете использовать класс .list-unstyled для отображения списков без list-style и margin-left по умолчанию.
Строчные списки
Вы можете использовать классы .list-inline и .list-inline-item для отображения списков в виде display: inline-block и для применения некоторых отступов.
Список описаний
В Bootstrap списки описаний отображаются следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<dl>
<dt>Архат</dt>
<dd>«Совершенный», преодолевший три яда желания, ненависти и неведения.</dd>
<dt>Бодхи</dt>
<dd>Пробуждённая мудрость.</dd>
<dt>Дзен</dt>
<dd>Медитативное погружение, при котором устраняются все дуалистические различия.</dd>
</dl>Горизонтальный список описаний
Вы можете выровнять термины и описания по горизонтали добавив класс .row к элементу <dl>, а затем любой из предопределённых классов системы сетки к элементам <dt> и <dd>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<dl>
<dt>Архат</dt>
<dd>«Совершенный», преодолевший три яда желания, ненависти и неведения.</dd>
<dt>Бодхи</dt>
<dd>Пробуждённая мудрость.</dd>
<dt>Дзен</dt>
<dd>Медитативное погружение, при котором устраняются все дуалистические различия.</dd>
</dl>Обратите внимание, что это работает только при широкой области просмотра. Если вы не видите никакой разницы между отображением этого примера и предыдущего, тогда откройте предварительный просмотр в новом окне. Если он по-прежнему не отличается, вам потребуется устройство большего размера для просмотра данного примера.
В Bootstrap 3 используется класс .dl-horizontal, а Bootstrap 4 использует класс .row.
Код
В Bootstrap элемент <code> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Атрибут <code>accesskey</code> может использоваться для любого элемента HTML5.Ввод с клавиатуры
В Bootstrap элемент <kbd> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Чтобы сохранить документ на Mac, нажмите <kbd><kbd>Command</kbd>+<kbd>S</kbd></kbd>Форматированный текст
В Bootstrap элемент <pre> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<pre>Этот текст был
отформатирован с помощью
элемента pre. Браузер должен
показать все пробелы,
как они были введены.
</pre>Вы также можете добавить класс .pre-scrollable, чтобы установить max-height как 350 пикселей и задать полосу прокрутки по оси Y.
Образец текста
В Bootstrap элемент <samp> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Компьютер говорит <samp>Недостаточно памяти</samp>. Я всегда думал, что у меня хорошая память!Переменные
В Bootstrap элемент <var> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<var>E</var> = <var>m</var> <var>c</var><sup>2</sup>Автор и редакторы
Автор: Йен Диксон
Последнее изменение: 06.11.2019
Редакторы: Влад Мержевич
Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5
Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5
Всем привет!
Продолжаем изучать основы «bootstrap 3».
Пришло время поработать над тестом. Что именно мы научимся в этом уроке?
Мы научимся выравнивать текст, выставлять размер, менять цвет, делать текст жирным, курсивом, зачеркнутым либо подчеркнутым… И это еще далеко не весь список. Итак, приступаем к уроку №5 и учимся работать с текстом.
1. Заголовки в Bootstrap
Если вы изучали основы HTML, то должны знать, что заголовки обозначаются тегами <h2> — <h6>. Так вот, в Bootstrap 3 пишем аналогично:
<h2>h2. Bootstrap заголовок</h2> <h3>h3. Bootstrap заголовок</h3> <h4>h4. Bootstrap заголовок</h4> <h5>h5. Bootstrap заголовок</h5> <h5>h5. Bootstrap заголовок</h5> <h6>h6. Bootstrap заголовок</h6>
Результат:
Если вам нужно создать в заголовке вторичный текст, можно использовать тег <small>.
Закрывающий тег обязателен.
<h2>h2. Bootstrap заголовок <small>Вторичный текст</small></h2> <h3>h3. Bootstrap заголовок <small>Вторичный текст</small></h3> <h4>h4. Bootstrap заголовок <small>Вторичный текст</small></h4> <h5>h5. Bootstrap заголовок <small>Вторичный текст</small></h5> <h5>h5. Bootstrap заголовок <small>Вторичный текст</small></h5> <h6>h6. Bootstrap заголовок <small>Вторичный текст</small></h6>
Результат:
2. Параграф в Bootstrap
<p>текст в Bootstrap</p>
Выделение параграфа классом «lead»
<p>текст в Bootstrap </p>
Для уменьшения текста на 85% от размера родительского элемента, используют тег <small>.
Закрывающий тег обязателен.
<small>1.текст в Bootstrap</small> <p>2. текст в<small> Bootstrap</small></p> <p>3. текст в<small> Bootstrap</small></p>
Результат:
3. Выделение текста в Bootstrap
Полужирный текст
<b>Полужирный текст</b>
Жирный текст
<strong>Жирное начертание</strong>
Курсивное начертание
<i>Курсивное начертание текста</i>
Выделенный текст фоновым цветом
<mark>Выделенный текст</mark>
Выделение программного кода
<code>Программный код</code>
Результат:
4. Нижний и верхний индексы текста в Bootstrap
Нижний
<sub>Нижний</sub>
Верхний
<sup>верхний</sup>
Пример:
<p>Н<sub>2</sub>O</p> <p>см<sup>2</sup></p>
Результат:
Н2O
см2
5. Подчеркивание текста в Bootstrap
Подчеркнутый тест
<ins> Отображается подчеркнутый тест </ins>
Перечеркнутый текст
<del>Отображается перечеркнутый текст </del>
Результат:
Отображается подчеркнутый тест
Отображается перечеркнутый текст
6. Размеры текста
Увеличить размер текста на одну единицу
<big>Текст с увеличенным размером шрифта</big>
Уменьшить размер текста на одну единицу
<small>Текст с уменьшенным размером шрифта</small>
Результат:
Текст с увеличенным размером шрифта
Текст с уменьшенным размером шрифта
7. Выравнивание текста и заголовка
Чтобы выровнять текст или заголовок, достаточно добавить class:
«text-left» — Выравнивание по левому краю
«text-center» — Выравнивание по центру
«text-right» — Выравнивание по правому краю
«text-justify» — Выравнивание текста по ширине
Для параграфа
<p>Выравнивание по левому краю.</p> <p>Выравнивание по центру.</p> <p>Выравнивание по правому краю.</p> <p>Выравнивание текста по ширине</p>
Для заголовка
<h2>Выравнивание по левому краю.</h2> <h3>Выравнивание по центру.</h3> <h4>Выравнивание по правому краю.</h4> <h5>Выравнивание текста по ширине</h5>
Результат:
8. Цитата
Полоса с левой стороны
<blockquote> <p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p> <small>Жюль Верн</small> </blockquote>
Результат:
Полоса с правой стороны
Добавить нужно класс «pull-right»
<blockquote> <p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p> <small>Жюль Верн</small> </blockquote>
Результат:
8. Цвет текста для информации
Способ передачи важной информации в веб-дизайне
<p>Приглушенный текст</p> <p>Важный текст</p> <p>Текст успеха</p> <p>Текст примечания</p> <p>Текст предупреждения</p> <p>Текст ошибки</p>
Результат:
Продолжение по основам Bootstrap 3 следует…
Не пропустите!…
Подписывайтесь на обновления блога!
Предыдущая запись
Сетка. Основы bootstrap 3 для начинающих. Урок №4
Следующая запись
Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6
Текст в Bootstrap — htmllab
Текст в Bootstrap
Текст в Bootstrap оформляется набором классов. Название этих классов дублирует название CSS-свойств. Для большинства HTML-элементов также прописаны CSS-свойства, например заголовки h2-h6 в Bootstrap оформляются шрифтом без засечек, а размер текста задается: h2 — 36px, h3 — 30px, h4 — 24px, h5 — 18px, h5 — 14px, h6 — 12px. Если внутри заголовка будет HTML элемент small, то этот текст будет меньшего размера и покрашен серым текстом. Bootstrap задаёт по умолчанию глобально размер текста font-size равным 14px с высотой строки line-height — 1.428.
Текст в Bootstrap
Если параграф содержит класс .lead, он играет «лидирующую» роль — выделяется более крупным размером текста. HTML-элемент mark делает выделение не ярко желтым, а бледно бежевым цветом. Для выравнивания текста в Bootstrap применяются классы:
<p>Выравнивание по левому краю.</p>
<p>Выравнивание по центру.</p>
<p>Выравнивание по правому краю.</p>
<p>Выравнивание по ширине.</p>
<p>Текст без переносов.</p>Классы трансформации текста 🙂 :
<p>текст с text-lowercase.</p>
<p>ТЕКСТ С TEXT-LOWERCASE.</p>
<p>Текст С Text-lowercase.</p>Блочная цитата имеет бордюр с левой стороны, который можно расположить справа классом .blockquote-reverse:
<blockquote >
<p>Скажи-ка, дядя, ведь не даром
Москва, спаленная пожаром,
Французу отдана?.</p>
<footer>Лермонтов <cite title="Бородино">Бородино</cite></footer>
</blockquote>Если нужно сделать список (ul, ol) горизонтальным, применяется класс .list-inline (display: inline-block;)
Подробней об оформлении текста в Bootstrap