====== Классы Bootstrap ======

===== Текст =====

==== .lead ====

Ведущий основной текст
Создайте выделенный параграф путем добавления .lead.

==== .small ====

Мелкий текст
Для уменьшения выделения встроенного текста или блока текста, используйте тег <small>, чтобы задать ему размер, который будет составлять 85% от размера его родительского элемента. Заголовки должны установлены собственные (отдельные) font-size для вложенных элементов <small>.

В качестве альтернативы, можно использовать встроенный элемент с классом .small-где в середине <small>

==== Жирный шрифт ====

Для выделения фрагмента текста с тяжелым насыщенным шрифтом.

Следующий фрагмент текста отображается как жирный текст.
  
  <strong>rendered as bold text</strong>

==== Курсив ====

Для выделения фрагмента текста курсивом

Следующий фрагмент текста отображается курсивным текстом.

  <em>rendered as italicized text</em>
  

Свободно используйте <b> и <i> в HTML5. Тег <b> предназначен для выделения слова или фразы без передачи дополнительного значения, в то время как <i> в основном для цитирования, технических терминов и т.д  

==== Выравнивание классов ====

Легко выровнять текст компонентов с помощью классов выравнивания текста.

  <p class="text-left">Выравнивание по левому краю.</p>
  <p class="text-center">Выравнивание по центру.</p>
  <p class="text-right">Выравнивание по правому краю.</p>
  <p class="text-justify">Выравнивание текста по ширине</p>
===== Контейнеры =====

==== .container ====

Контейнеры
Простое центрирование контента страницы включая это содержимое в .container. Контейнер установлен в width на различных контрольных точках медиа запросов для соответствия с нашей системой разметки.

Следует отметить, что, благодаря padding и фиксированной ширины, контейнеры не вложены по умолчанию.

==== .container-fluid ====

Резиновые блоки
Превратите любую фиксированную ширину сетки макет в полную ширину макета, изменив последний .container на .container-fluid.

===== Столбцы =====

==== .row ====

Строка разметки, должна находиться в контейнере, потомки только столбцы типа .col-xs-4


==== Функционал разметки ====


Посмотрите, как аспекты системы рзметки Bootstrap работают между несколькими устройствами с управляемой таблицей.

^ ^Очень маленькие устройство Телефоны (<768px) ^ Малые устройства Планшеты (≥768px) ^ Средние устройства Настольные (≥992px) ^ Большие устройства Настольные (≥1200px) ^
^Поведение разметки | Горизонтальный все время | Терпеть неудачу при начатии, горизонтальный выше контрольной точки|||
^Ширина контейнера | Нет (автом.) | 750px | 970px | 1170px|
^Класс префикса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
^# колонок | 12||||
^Ширина колонки | Авто | 60px | 78px | 95px |
^Промежуточная ширина | 30px(15px) на каждой стороне колонки ||||
^Вкладка | Да ||||
^Отступ | Да ||||
^Выравнивание колонки | Да |

Классы разметки относятся к устройствам с экраном шириной, превышающим или равным крайним точкам размеров, и переопределяемые классы разметки ориентированых на небольшие устройства. Поэтому, применяя любой .col-md- класс к элементу не только влияет на его стиль на средних устройств, но и на больших устройств, если класс .col-lg- упущен.

Не хотите чтобы ваши колонки просто складывались на небольших устройствах? Используйте очень маленькие xs или средние md классы разметки устройства добавляя .col-xs-* .col-md-* к вашим столбцам. Смотрите пример ниже для лучшего понимания как это работает.


==== Смещенные колонки ====

Переместить колонки направо с помощью .col-md-offset-* класса. Эти классы увеличивают отступ слева столбца * колонки. Например, .col-md-offset-4 сдвигает .col-md-4 пропуская один такой же столбец
  
==== Выравнивание колонок ====

Легко изменить порядок наших встроенных столбцов разметки с .col-md-push-* и .col-md-pull-* модифицированными классами.

  <div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>