Навигация Содержание
Главная / Bootstrap

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

18.6K
3
Содержание:
  1. Комментарии

Настройки 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>
<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>
.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>.
<kbd> Предназначен для оформления текста, который представляет собой клавиши или сочетания клавиш на клавиатуре. Например: <kbd>Alt+F4</kbd>
<pre> Предназначен для оформления программного кода, состоящего из нескольких строк. Если вы дополнительно добавите класс .pre-scrollable к элементу <pre>, то вы получите блок имеющий максимальную высоту 350px и элементы прокрутки по оси y.
Например: 
<pre>
Программный код,
состоящий из нескольких строк
</pre>

<samp>
Текст на выходе из компьютерной программы
</samp>
<var> Предназначен для оформления переменных.

Например: 

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

Комментарии: 3

Аноним
Аноним
09.09.2015, 00:38
Было бы шикарно, если бы был такой справочник по data атрибутам. Какой для чего использовать и где это уместно. За это так же спасибо.
Александр Мальцев
Александр Мальцев
09.09.2015, 14:09
Спасибо, возможно сделаю.
Аноним
Аноним
29.05.2015, 11:04
Крутой справочник, как раз это и искал.