Марат-блог

067 637-86-38
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная » Инструкции » Bootstrap » Справочник Bootstrap СSS для основного текста

Справочник Bootstrap СSS для основного текста

Настройки Bootstrap для текста по умолчанию

Bootstrap задаёт к элементам <body> и <p> следующие свойства с помощью стилей CSS:

  • элементу <body> устанавливается размер шрифта (font-size) 14px и междустрочный интервал (line-height), равный 1,428.
  • Элементам <p> задаются отступы снизу (margin), равные половине их междустрочного интервала line-height (10px по умолчанию).

Список элементов и классов Bootstrap

Список элементов и классов Bootstrap представлен в нижерасположенной таблице. Элементы Bootstrap – это элементы HTML, которые имеют определённые стили CSS и выглядят немного по-другому для того, чтобы они гармонично вписывались в интерфейс сайта, создаваемый с помощью платформы Twitter Bootstrap 3. Классы задаются к элементам Bootstrap и применяют к ним дополнительные стили.

Элемент | класс Описание

<h1> - <h6> или

.h1 -.h6

 Предназначен для создания заголовков h1 - h6.
Например: 
<h1> Заголовок h1 </h1>
<p class="h2"> Заголовок 2 уровня </p>
<small> Предназначен для создания дополнительного текста в заголовке, который меньше по размеру и имеет более светлый цвет.
Например: 
<h1>H1<small>H1</small></h1>
<p class="h2">2<small>2</small></p>
.small Позволяет задать выделенному тексту более мелкий размер шрифта (85% от размера шрифта родительского элемента). 
Например: 
<p calss="small">
Абзац с более мелким размером шрифта.
</p>
.lead Предназначен для выделения абзаца по сравнению с остальным содержимом.
Например: 
<p calss="lead">
Выделенный абзац.
</p>
<mark> Предназначен для создания выделенного текста.
Например: 
<p>
<mark>выделенный текст</mark>.
</p>
<del> Предназначен для выделения текста, удаленного из текущего документа.
Например: 
<p>
<del>удалённый текст</del>.
</p>
<s> Предназначен для выделения текста, который уже утратил свою актуальность.
Например: 
<p>
<s>текст, утративший свою актуальность</s>.
</p>
<ins> Предназначен для выделения вставленного текста в существующий документ.
Например: 
<p>
<ins>вставленный текст</ins>.
</p>
<u> Предназначен для создания подчеркнутого текста.
Например: 
<p>
<u>подчеркнутый текст</u>.
</p>
<strong> Предназначен для привлечения внимания к тексту с помощью выделения его жирным начертанием.
Например: 
<p>
<strong>жирный текст</strong>.
</p>
<em> Предназначен для привлечения внимания к тексту с помощью выделения его курсивом.
Например: 
<p>
<em>курсивный текст</em>.
</p>
.text-left Предназначен для выравнивания текста по левому краю.
Например: 
<p class="text-left">
...
</p>
.text-center Предназначен для выравнивания текста по центру.
Например: 
<p class="text-center">
...
</p>
.text-right Предназначен для выравнивания текста по правому краю. 
Например: 
<p class="text-right">
...
</p>
.text-justify Предназначен для выравнивания текста по ширине. 
Например: 
<p class="text-justify">
...
</p>
.text-nowrap Запрещает перенос слов.
Например: 
<p class="text-nowrap">
Очень длинный текст.
</p>
.text-lowercase Предназначен для изменения регистра всех букв на строчные. 
Например: 
<p class="text-lowercase">
Очень интересный текст.
</p>
очень интересный текст.
.text-uppercase Предназначен для изменения регистра всех букв на прописные. 
Например: 
<p class="text-uppercase">
Очень интересный текст.
</p>
ОЧЕНЬ ИНТЕРЕСНЫЙ ТЕКСТ.
.text-capitalize Предназначен для изменения регистра первых букв всех слов на прописные. 
Например: 
<p class="text-capitalize">
Очень интересный текст.
</p>
Очень Интересный Текст.
<abbr> Предназначен для создания аббревиатур. 
Например: 
<abbr title="Союз независимых государств">
  СНГ
</abbr>
СНГ
Для уменьшения размера текста внутри элемента <abbr> по отношению к остальному тексту добавьте дополнительный класс .initialism: 
<abbr title="Союз независимых государств" 
      class="initialism">
  СНГ
</abbr>
СНГ
<address> Предназначен для оформления информации об авторе статьи или контактной информации. 
Например: 
<address>
Статья написана itchief.ru.
Страница в <a href="#" >Facebook</a>.
</address>
Статья написана itchief.ru. Страница в Facebook.
<blockquote> Предназначен для создания цитат. 
<blockquote>
  <p>Текст цитаты</p>
  <small><cite>Автор</cite></small>
</blockquote>

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

<blockquote class="blockquote-reverse">
  <p>Текст цитаты</p>
  <small><cite>Автор</cite></small>
</blockquote>
<ul> Предназначен для создания маркированного списка. 
Например: 
<ul>
  <li>Кофе</li>
  <li>Молоко</li>
</ul>
  • Кофе
  • Молоко
<ol> Предназначен для создания нумерованного списка. 
Например: 
<ol>
  <li>Кофе</li>
  <li>Молоко</li>
</ol>
  1. Кофе
  2. Молоко
.list-unstyled Предназначен для создания списков без использования стилей.
Например: 
<ol class="list-unstyled">
  <li>Кофе</li>
  <li>Молоко</li>
</ol> 

Кофе
Молоко
.list-inline Предназначен для создания списков, элементы которых располагаются в одну строку. 
Например: 
<ol class="list-inline">
  <li>Кофе</li>
  <li>Молоко</li>
</ol> 

Кофе     Молоко
<dl> Предназначен для создания списков определений. 
Например: 
<dl>
  <dt>Кофе</dt>
  <dd>- горячий напиток тёмного цвета</dd>
  <dt>Молоко</dt>
  <dd>- прохладный напиток белого цвета</dd>
</dl>
Кофе
- горячий напиток тёмного цвета
Молоко
- прохладный напиток белого цвета
.dl-horizontal Предназначен для создания списков определений, в котором термины и описания этих терминов располагаются в одну строку. 
<dl class="dl-horizontal">
  <dt>Кофе</dt>
  <dd>- горячий напиток тёмного цвета</dd>
  <dt>Молоко</dt>
  <dd>- прохладный напиток белого цвета</dd>
</dl>
Кофе - горячий напиток тёмного цвета
Молоко - прохладный напиток белого цвета
<code> Предназначен для оформления фрагментов кода в тексте.
Например: Элемент <code>h1</code>. 
Элемент h1.
<kbd> Предназначен для оформления текста, который представляет собой клавиши или сочетания клавиш на клавиатуре. Например: <kbd>Alt+F4</kbd>
<pre>

Предназначен для оформления программного кода, состоящего из нескольких строк. Если вы дополнительно добавите класс .pre-scrollable к элементу <pre>, то вы получите блок имеющий максимальную высоту 350px и элементы прокрутки по оси y. 
Например:
<samp> Предназначен для отображения текста, который появляется на выходе в результате работы компьютерной программы.
Например: 
<samp>
Текст на выходе из компьютерной программы
</samp>
Текст на выходе из компьютерной программы
<var> Предназначен для оформления переменных.

Например:

<var>y</var> = <var>x</var><sup>2</sup>
y = x2