Bootstrap все буквы большими – Как в bootstrap сделать чтобы текст уменьшался вместе с блоком на разных устройствах?

Содержание

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 и, как обычно, передают в наше распоряжение набор классов позволяющих оформлять теги имеющие отношение к текстам на свое усмотрение.

Текст Bootstrap

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

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

Заголовки

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

Bootstrap заголовки

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

Подпись в заголовке Bootstrap

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

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

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

Bootstrap mark

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

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

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

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

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

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

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

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

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

Цитата в Bootstrap

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

Bootstrap реверсная цитата

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

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

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

Пример:

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

Регистр букв Bootstrap

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

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

Список Bootstrap

Код примера:

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

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

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

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

<mark>

Пример:

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

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

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

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

Bootstrap pre

Код примера:

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

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

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

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

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

Bootstrap цвет текста

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

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

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

Результат:

Фон текста  Bootstrap

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

Мы разобрали основные моменты связанные с оформлением текстов в 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></h2>

h2. Заголовок bootstrap

<h3></h3>

h3. Заголовок bootstrap

<h4></h4>

h4. Заголовок bootstrap

<h5></h5>

h5. Заголовок bootstrap

<h5></h5>

h5. Заголовок bootstrap

<h6></h6>

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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Работа с текстом. Основы 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *