Адаптивные видео в Bootstrap

Вы уже знаете, как подключить bootstrap к вашему блогу. Теперь сделаем видео в блоге адаптивным.
Это очень просто.
Добавляем в нужное место блога ваше видео и заходим в HTML.
Находим в коде добавленное видео и удаляем оборачивающий его блок <div></div>
Заменяем его на div с классом class="embed-responsive embed-responsive-16by9" так, чтобы получилось вот так:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Не забудьте добавить к вашему тегуiframe классclass="embed-responsive-item"

Вот и все. Теперь в вашем блоге есть полностью адаптированное видео!

Создание форм

Bootstrap позволяет добавлять оформление для любых форм на странице. Формы, созданные на Bootstrap, могут быть горизонтальными и вертикальными.

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

Элементы <input>, <textarea> и <select> при добавлении к ним класса .form-control становятся блочными и занимают 100% ширины родительского блока.

Основные моменты при создании и оформлении формы представим в виде следующих этапов:

• Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса), горизонтальная (.form-horizontal) и в одну строку (.form-inline).
• Добавить к необходимым текстовым элементам управления <input>, <textarea>, <select> класс .form-control, чтобы установить им ширину, равную 100% (всю доступную ширину родительского элемента).
• Поместить каждую надпись (<label>) и элемент управления в контейнер <div>...</div> с классом .form-group. Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.

Вертикальная форма (по умолчанию)

Вертикальная форма - это макет формы, в которой её элементы распологаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом .form-group.

<form>
  <div class="form-group">
    <label for="inputEmail">Адрес email:</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Введите email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Пароль:</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Запомнить
    </label>
  </div>
  <button type="submit" class="btn btn-default">Войти</button>
</form>

Пример

Адрес email:

Пароль:

Запомнить

Строчная форма

Строчная форма означает, что все её элементы и их названия (<label>) будут располагаться в одну строку с равнением к левому краю.

Обратите внимание: строчная форма будет отображаться как классическая на экранах размером менее 768 пикселей в ширину.

Единственное правило, которое превратит классическую форму в строчную: добавить класс .form-inline к тегу <form> В следующем примере пример создания строчной формы с двумя полями и кнопкой подтверждения:

<form role="form" class="form-inline">
 <div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control" id="email" placeholder="Введите >
 </div>
 <div class="form-group">
  <label for="pass">Пароль</label>
  <input type="password" class="form-control" id="pass" placeholder="Пароль">
 </div>
 <button type="submit" class="btn btn-success">Войти</button>
</form>

Пример

Email

Пароль

Горизонтальная форма

Такой вид формы значительно отличается синтаксисом от двух предыдущих. Есть два правила для создания горизонтальных форм в Bootstrap:

• добавить класс .form-horizontal к тегу <form>
• добавить класс .control-label ко всем элементам <label&ht;

Вы можете использовать блочную вёрстку Bootstrap для более тонкой настройки отображения форм. Вот пример кода горизональной формы:

<form class="form-horizontal">
 <div class="form-group">
  <label for="mail" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="mail" placeholder="Email">
  </div>
 </div>
 <div class="form-group">
  <label for="pass" class="col-sm-2 control-label">Пароль</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="pass" placeholder="Пароль">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox">
    <label>
     <input type="checkbox"> Запомнить меня
    </label>
   </div>
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-success">Подтвердить</button>
  </div>
 </div>
</form>

Пример

Email

Пароль

Запомнить меня

Чекбоксы и радиокнопки

Чекбоксы используются для выбора нескольких параметров, радиокнопки — для выбора единственного варианта.

<div class="checkbox">
 <label>
  <input type="checkbox" value="check1">
  Обычный чекбокс, который можно отметить
 </label>
</div>
<div class="checkbox disabled">
 <label>
  <input type="checkbox" value="check2" disabled>
  Заблокированный чекбокс, не отмечается
 </label>
</div>

Пример

Обычный чекбокс, который можно отметить

Заблокированный чекбокс, не отмечается

И аналогичный пример для радиокнопок:

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="radio1" value="option1" checked>
  Первый элемент списка из радиокнопок, её можно выбирать
 </label>
</div>
<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="radio22" value="option2" disabled>
  Вторая опция списка, заблокированная
 </label>
</div>
<div class="radio disabled">
  <label>
  <input type="radio" name="optionsRadios" id="radio3" value="option3">
  Третья смешная опция
 </label>
</div>

Пример

Первый элемент списка из радиокнопок, её можно выбирать

Вторая опция списка, заблокированная

Третья смешная опция

Чтобы заблокировать выбор чекбокса или радиокнопки, им добавляют атрибут disabled.

Строчные чекбоксы и радиокнопки

Используйте классы .checkbox-inline и .radio-inline для того, чтобы сделать эти элементы строчными:

<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Пример

1 2 3

Или так

<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="radio1" value="option1"> 1
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="radio2" value="option2"> 2
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="radio3" value="option3"> 3
</label>

Пример

1 2 3

Выпадающие списки

Здесь всё предельно просто: тегу <select> нужно назначить класс .form-control.

<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

Пример

1 2 3 4 5

Если вы хотите добавить списку возможность выбора нескольких вариантов, добавьте ему атрибут multiple:

<select class="form-control"multiple>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

Пример

1 2 3 4 5

Статические надписи вместо полей

Поля формы можно заменять текстовыми элементами, для этого используется класс .form-control-static для элемента :

<form class="form-horizontal">
 <div class="form-group">
  <label class="col-sm-2 control-label">Электропочта</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>
 <div class="form-group">
  <label for="pass" class="col-sm-2 control-label">Пароль</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="pass" placeholder="Пароль">
  </div>
 </div>
</form>

Пример

Электропочта

email@example.com

Пароль

Контекстные классы

В Bootstrap есть три класса для оформления различных состояний полей в форме:

• успех, класс .has-success
• предупреждение, класс .has-warning
• ошибка, класс .has-error

Этот класс необходимо назначить элементу .form-group:

<div class="form-group has-success">
 <label class="control-label" for="succ">Поле без ошибок</label>
 <input type="text" class="form-control" id="succ">
</div>
<div class="form-group has-warning">
 <label class="control-label" for="warn">Поле с предупреждением</label>
 <input type="text" class="form-control" id="warn">
</div>
<div class="form-group has-error">
 <label class="control-label" for="err">Поле с ошибкой</label>
 <input type="text" class="form-control" id="err">
</div>
<div class="has-success">
 <div class="checkbox">
  <label>
  <input type="checkbox" id="check-succ" value="option1">
  Чекбокс без ошибок
 </label>
 </div>
</div>
<div class="has-warning">
 <div class="checkbox">
 <label>
  <input type="checkbox" id="check-warn" value="option1">
  чекбокс с предупреждением
  </label>
 </div>
</div>
<div class="has-error">
 <div class="checkbox">
  <label>
  <input type="checkbox" id="checkboxError" value="option1">
  Чекбокс с ошибкой
 </label>
 </div>
</div>

Пример

Поле без ошибок

Поле с предупреждением

Поле с ошибкой

Чекбокс без ошибок

чекбокс с предупреждением

Чекбокс с ошибкой

Размеры полей

Чтобы поменять размер элемента формы, ему можно назначить один из классов:

.input-sm .input-lg

<form>
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-lg" placeholder="Большой">
    </div>
    <div class="col-xs-6">
      <select class="form-control input-lg">
        <option>Большой - 1</option>
        <option>Большой - 2</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control" placeholder="Средний">
    </div>
    <div class="col-xs-6">
      <select class="form-control">
        <option>Средний - 1</option>
        <option>Средний - 2</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-sm" placeholder="Маленький">
    </div>
    <div class="col-xs-6">
      <select class="form-control input-sm">
        <option>Маленький - 1</option>
        <option>Маленький - 2</option>
      </select>
    </div>
  </div>
</form>

Пример

Большой - 1 Большой - 2

Средний - 1 Средний - 2

Маленький - 1 Маленький - 2

Модульные сетки

Bootstrap характерен своей продуманной и гибкой системой модульных сеток, в основе которой лежит 12-колоночный макет.

1	1	1	1	1	1	1	1	1	1	1	1
2		2		2		2		2		2
3			3			3			3
4				4				4
6						6
12

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

1	1	1	1	1	1	1	1	1	1	1	1
2		8								2
3			9
4				1	3			4

Создание колонок

Так, чтобы создать макет из трёх колонок используем

с классом container, внутри которого будут располагаться наши колонки. Сами колонки находятся внутри

с классом row и содержат имена вида col-xs-N, где N — число колонок от 1 до 12 (пример 1).

Пример 1. Макет с тремя колонками

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трёхколоночный макет</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
   [class*="col-"] {
    background-color: #eee;
    border-right: 2px solid #fff;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 2rem;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="row">
    <div class="col-xs-3">3 колонки</div>
    <div class="col-xs-7">7 колонок</div>
    <div class="col-xs-2">2 колонки</div>
   </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Стиль добавлен лишь для наглядного выделения колонок.

Класс container создаёт макет фиксированной ширины, значение которой зависит от размера устройства. Для мониторов максимальная ширина составляет 1170 пикселей, для смартфонов макет будет занимать всю доступную ширину. Если вам не требуется ограничивать ширину макета, то вместо класса container следует использовать container-fluid (пример 2).

Пример 2. Резиновый макет

<div class="container-fluid">
 <div class="row">
  <div class="col-xs-4">4 колонки</div>
  <div class="col-xs-6">6 колонок</div>
  <div class="col-xs-2">2 колонки</div>
 </div>
</div>

Отступы между колонок

Колонки изначально плотно прилегают друг к другу, что не всегда полезно для макета. Для добавления пустого пространства между колонками предназначен класс col-xs-offset-N, где N изменяется от 0 до 12. Отступ добавляется слева от текущей колонки (пример 3).

Пример 3. Добавление отступов

<div class="container">
 <div class="row">
  <div class="col-xs-3">3 колонки</div>
  <div class="col-xs-5 col-xs-offset-1">5 колонок</div>
  <div class="col-xs-2 col-xs-offset-1">2 колонки</div>
 </div>
</div>

Результат данного примера в браузере

Помните, что отступы добавляются к общему числу колонок, сумма которых не должна превышать 12, в противном случае колонки начнут перемещаться на другую строку.

Сдвиг колонок

Каждую колонку можно сдвигать влево или вправо на указанное число колонок. Опять же это делается с помощью классов. col-xs-pull-N — сдвигает колонку влево на заданное число, а col-xs-push-N сдвигает вправо (пример 4). Здесь N может меняться от 0 до 12.

Пример 4. Сдвиг колонок вправо

<div class="container">
 <div class="row"
  <div class="col-xs-3">3 колонки</div>
  <div class="col-xs-5 col-xs-push-1">5 колонок</div>
  <div class="col-xs-2 col-xs-push-2">2 колонки</div>
 </div>
</div>

Заметьте, что сдвиг это не дополнительная колонка как при использовании offset, так что суммировать все значения не нужно. Ещё надо следить за тем, чтобы колонки не накладывались друг на друга.

Вложенные колонки

При вёрстке сложных макетов двенадцати колонок может не хватить, к тому же в одной колонке могут встречаться ещё дополнительные. Так что нам потребуются вложения одних колонок в другие. Делается это похожим образом (пример 5).
Пример 5. Вложенные колонки

<div class="container">
 <div class="row">
  <div class="col-xs-12">Заголовок</div>
  <div class="col-xs-5">
   <div class="row">
    <div class="col-xs-12">Колонка 1</div>
    <div class="col-xs-6">Колонка 1-1</div>
    <div class="col-xs-6">Колонка 1-2</div>
   </div>
  </div>
  <div class="col-xs-5 col-xs-offset-2">Колонка 2</div>
 </div>
</div>

Чтобы создать вложенные колонки опять добавляем <div> с классом row, который содержит желаемую структуру вложенных колонок. Таким образом можно сверстать какие угодно сложные макеты.
Заметьте, что заголовок заполняет всю ширину макета, потому что он занимает все 12 колонок. Дополнительный контейнер row для подобных вещей вводить не обязательно, перенос остальных колонок на другую строку произойдет автоматически (рис. 4).

knopki-

Пример постраничной навигации

• «
• 1
• 2
• 3
• 4
• 5
• »

Пример кодa постраничной навигации

<ul class="pagination">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>

Кнопки

Пример код кнопки

<button type="button" class="btn btn-default">Кнопка</button>
<button type="button" class="btn btn-primary">Основная</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-warning">Внимание</button>
<button type="button" class="btn btn-danger">Ошибка</button>
<button type="button" class="btn btn-link">Ссылка</button>

Типы элементов

Стили кнопок в Bootstrap могут применяться к элементам<button> и <input type="button">, а также к ссылкам<a>Кнопке нужно присвоить класс .btnи один из классов, чтобы добавить ей стиль. Для примера возьмем.btn-default.

<a class="btn btn-default" href="#" role="button">Кнопка</a>
<button class="btn btn-default" type="submit">Кнопка</button>
<input class="btn btn-default" type="button" value="Кнопка">

В результате мы получим три одинаково выглядящих элемента.

Размеры кнопок

Код кнопок

<button type="button" class="btn btn-primary btn-lg">Большая</button>
<button type="button" class="btn btn-primary btn-md">Средняя</button>
<button type="button" class="btn btn-primary btn-sm">Маленькая</button>
<button type="button" class="btn btn-primary btn-xs">Еще меньше</button>

.btn-lg

Большая

.btn-md

Средняя

.btn-sm

Маленькая

.btn-xs

Еще меньше

Блочные кнопки

Вы можете превратить строчные кнопки в блочные элементы. Для этого присвойте им класс .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Блочная кнопка</button>
<button type="button" class="btn btn-default btn-lg btn-block">Блочная кнопка</button>

Активные и заблокированные кнопки

Кнопке можно назначить активный (нажатый) вид, а также заблокированное состояние. Класс .activeотображает, как кнопка выглядит во время нажатия, а класс .disabled делает ее неактивной.

Полная справка по кнопкам в Bootstrap

Класс	Описание
.btn	Добавляет базовое оформление к кнопке
.btn-default	Стандартный вид кнопки
.btn-primary	Основная кнопка
.btn-success	Подтверждение
.btn-info	Кнопка для информационных сообщений
.btn-warning	Кнопка для предупреждающих сообщений
.btn-danger	Кнопка отмены, очистки формы
.btn-link	Кнопка, которая выглядит как ссылка
.btn-lg	Большой размер кнопки
.btn-sm	Маленькая размер
.btn-xs	Еще меньший размер
.btn-block	Блочный вид кнопки (она занимает всю ширину родительского элемента)
.active	Кнопка выглядит нажатой
.disabled	Неактивная кнопка

Tablicy

В Бутстрапе есть возможность добавлять оформление к любым таблицам. Для того, чтобы созданная вами таблица была оформлена в стиле Bootstrap, ей нужно назначить класс table:

<table class="table">

По умолчанию Bootstrap добавляет таблицам такой стиль:

• небольшие внутренние отступы внутри ячеек
• горизонтальные серые разделительные границы между строками

Таблица в стандартном оформлении будет выглядеть так:

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Код таблицы

<table class="table">
 <thead>
 <tr>
 <th>Имя</th>
 <th>Фамилия</th>
 <th>Адрес</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Иван</td>
 <td>Васильев</td>
 <td>Москва</td>
 </tr>
 <tr>
 <td>Мария</td>
 <td>Ткаченко</td>
 <td>Киев</td>
 </tr>
 <tr>
 <td>Jullia</td>
 <td>Hilmer</td>
 <td>New-York</td>
 </tr>
 </tbody>
 </table>

Чередование фона в строках

Класс .table-striped, назначенный таблице, добавит серый фон её нечётным строкам:

<table class="table table-striped">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Вертикальные и горизонтальные границы в ячейках

Класс .table-bordered добавляет горизонтальные и вертикальные границы ко всем ячейкам вашей таблицы:

<table class="table table-bordered">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Подсветка ячеек при наведении

Класс.table-hover, назначенный таблице, добавит серый фон строкам таблицы при наведении курсора мыши.

<table class="table table-hover">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Компактные отступы

Класс.table-condensedвы можете уменьшить внутренние отступы для ячеек таблицы, чтобы она выглядела более компактно. Это удобно для больших таблиц.

<table class="table table-condensed">

Пример

Имя	Фамилия	Адрес
Иван	Васильев	Москва
Мария	Ткаченко	Киев
Jullia	Hilmer	New-York

Контекстные фоны ячеек

Классы контекста можно применять, чтобы добавить различный цвет фона строкам &kt;tr> или ячейкам <dd> вашей таблицы:

Пример

Класс	Описание
.active	Добавляет класс с серым фоном, который используется при наведении на ячейку или строку
.success	Используется для сообщения об успехе
.info	Нейтральное информационное сообщение
.warning	Предупреждение, требующее внимания
.danger	Используется для сообщения об ошибке, опасности или каком-то негативном действии

Responsive (отзывчивые) таблицы

Класс.table-responsiveделает таблицу восприимчивой к размерам экрана, на котором отображается страница. На небольших устройствах (до 769 пикселей по ширине) таблица будет отображаться с горизонтальным скроллом, если не влезает в экран полностью. При отображении на любом экране шире 768 пикселей таблица будет отображаться как обычно.

<div class="table-responsive">
 <table class="table">
   ... 
 </table> 
</div>

Обратите внимание: класс нужно назначить не самой таблице, а родительскому элементу, в котором она будет находиться.

Bootstrap-chto-eto-i-ustanovka-bootstrap

Что такое Bootstrap

Каждая веб=страница состоит из типовых элементов: блоков меня, колонок, форм обратной связи и многого другого. для того, чтобы писать меньше кода и получать готовую адаптированную верстку приходится задействовать библиотеки (фреймворки). Одним из таких фреймворков и является Bootstrap

Какие плюсы несёт в себе использование библиотеки.

Высокая скорость разработки

Фактически Bootstrap представляет собой конструктор, фрагменты которого вы включаете в свой проект при необходимости. Это уменьшает время разработки, потому что не требуется придумывать и писать их самостоятельно.

Адаптивный дизайн

Bootstrap направлен на создание макета под разные устройства — ноутбуки, планшеты, смартфоны. При этом код пишется один, а масштабирование в зависимости от ширины устройства берёт на себя фреймворк.

Открытая программа

Вы можете свободно изучать исходные коды библиотеки, изменять и расширять её под собственные нужды.

Совместимость с браузерами

Компоненты библиотеки написаны и протестированы с учётом работы разных браузеров. Это гарантирует, что макет будет выглядеть одинаково независимо от выбранного браузера.

Низкий порог вхождени

Чтобы использовать библиотеку в своей работе, требуется обладать минимальными знаниями по HTML, CSS и JavaScript. Это позволяет создавать эффектные сайты даже начинающим разработчикам.

Единая работа компонент

Bootstrap не просто вставляет какие-то элементы на страницу, но сразу же устанавливает их оформление и взаимодействие с пользователем через JavaScript. Вы получаете полностью работающий набор компонент, который достаточно добавить и настроить под себя.

Недостатки, конечно же, тоже имеются и они вытекают в основном из универсальности системы.

Во-первых, файлы библиотеки, даже сжатые, занимают довольно много места и увеличивают нагрузку на сервер. С повышением опыта нужно загружать и устанавливать только требуемые компоненты Bootstrap, сокращая тем самым объём файлов.
Во-вторых, предлагаемые в библиотеке стили могут не подходить под дизайн разрабатываемого сайта и придётся много переделывать. В таких случаях, как известно, проще написать всё самому с нуля. В общем, Bootstrap годится для типовых сайтов, дизайн которых ориентирован на библиотеку. А сайтов, которые предлагают темы и шаблоны, в том числе бесплатные, в последнее время родилось довольно много. Достаточно поискать по ключевым словам «Bootstrap Theme».

Установка Bootstrap

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

Скачать можно по этому адресу:http://getbootstrap.com/getting-started/#download
В папках со стилями и скриптами приложено две версии файлов — исходная и компактная (в имени содержится min). Компактная отличается лишь размером файла и снижением читаемости кода. Лучше всего на рабочий сайт добавлять именно эту версию, так мы чуть ускорим загрузку веб-страниц.
Копируем все папки в наш проект и в корне создаём index.html. В итоге структура нашего проекта будет выглядеть следующим образом.

Содержимое index.html включает в себя ссылку на стилевой файл bootstrap.css и внизу страницы мы вызываем bootstrap.js. Больше пока ничего не нужно.

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Bootstrap</title>
  <link href="css/bootstrap.css" rel="stylesheet">
 </head>
 <body>
  <h1>Привет, мир!</h1>
  <script src="js/bootstrap.js"></script>
 </body>
</html>

Если в процессе работы потребуется переопределить стили каких-то элементов, то вы можете подключить ещё один собственный стилевой файл и в нём задать необходимые свойства. Bootstrap также предлагает сразу настроить желаемые параметры прямо у них на сайте, отметить требуемые компоненты и скачать персонифицированную версию рабочих файлов. Это делается по следующей ссылке:

http://getbootstrap.com/customize/
Также в дальнейшем нам понадобится библиотека jQuery, её надо скачать и добавить вызов перед bootstrap.js.

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

Подключение Bootstrap

Здесь вообще все просто. Достаточно вставить такой код в шаблон вашего блога, сразу после открывающего тега <head>:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Текст заголовка который может быть не один на странице

Для оформления кода на странице используется тег <pre> для больших блоков кода с полосой прокрутки используется дополнительный класс <pre class="pre-scrollable">

Пишется так<div class="h1"> здесь текст вашего заголовка</div>
Можно добавить к тексту заголовка подзаголовок

Заголовок подтекст к заголовку

код

    <div class="page-header">
        <h1>Заголовок 
            <small>подтекст к заголовку</small>
        </h1>
    </div>

Стоит напомнить, что по умолчанию абзацы оформлены так:

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

Оформление уведомлений.

Вы успешно дочитали до этого места

Это ещё не конец статьи

Читать мало, нужно всё применять на практике

Да, это не смешно

Этот код будет выглядеть так

<div class="h1">Оформление уведомлений.</div>
<div class="alert alert-success" role="alert">Вы успешно дочитали до этого места</div>
<div class="alert alert-info" role="alert">Это ещё не конец статьи</div>
<div class="alert alert-warning" role="alert">Читать мало, нужно всё применять на практике</div>
<div class="alert alert-danger" role="alert">Да, это не смешно</div>

Справочник по оформлению текста Bootstrap СSS

<h1> - <h6>
или
.h1- .h6

Предназначен для создания заголовков h1 - h6.
Например:
<h1>Заголовок h1</h1> <p class="h2">Заголовок 2 уровня</p>

Заголовок h1

Заголовок 2 уровня

.small

Позволяет задать выделенному тексту более мелкий размер шрифта (85% от размера шрифта родительского элемента).

Абзац с более мелким размером шрифта.

.lead

Предназначен для выделения абзаца по сравнению с остальным содержимом.

Выделенный абзац.

<mark>

Предназначен для создания выделенного текста.Например:

выделенный текст.

<del>

Предназначен для выделения текста, удаленного из текущего документа. Например:

удалённый текст.

<s>

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

текст, утративший свою актуальность.

<ins>

Предназначен для выделения вставленного текста в существующий документ. Например:

вставленный текст.

<u>

Предназначен для создания подчеркнутого текста. Например:

подчеркнутый текст.

<strong>

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

жирный текст.

<em>

Предназначен для привлечения внимания к тексту с помощью выделения его курсивом. Например:

курсивный текст.

.text-left

Предназначен для выравнивания текста по левому краю.

.text-center

Предназначен для выравнивания текста по центру.

.text-right

Предназначен для выравнивания текста по правому краю.

.text-justify

Предназначен для выравнивания текста по ширине.

.text-nowrap

Запрещает перенос слов.

.text-lowercase

Предназначен для изменения регистра всех букв на строчные. Например:

Очень интересный текст.

.text-uppercase

capitalize Предназначен для изменения регистра первых букв всех слов на прописные. Например:

Очень интересный текст.

<abbr>

Предназначен для создания аббревиатур. Например: CMS

<address>

Статья написана abcinblog.blogspot.com Страница в Простые советы.

<blockquote>

Предназначен для создания цитат.

Текст цитаты

Автор

.blockquote-reverse

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

Текст цитаты

Автор

<ul>

Предназначен для создания маркированного списка. Например:

• Кофе
• Молоко

<ol>

1. Кофе
2. Молоко

.list-unstyled

Предназначен для создания списков без использования стилей. Например:

1. Кофе
2. Молоко

.list-inline

Предназначен для создания списков, элементы которых располагаются в одну строку. Например:

1. Кофе
2. Молоко

<dl>

Предназначен для создания списков определений. Например:

Кофе

- горячий напиток тёмного цвета

Молоко

- прохладный напиток белого цвета

.dl-horizontal

Предназначен для создания списков определений, в котором термины и описания этих терминов располагаются в одну строку.

Кофе

- горячий напиток тёмного цвета

Молоко

- прохладный напиток белого цвета

<code>

Предназначен для оформления фрагментов кода в тексте. Например: Элемент h1. Элемент h1.

Именно двумя последними стилями я ползовался в этом посте.

<kbd>

Предназначен для оформления текста, который представляет собой клавиши или сочетания клавиш на клавиатуре. Например: Alt+F4

<pre>

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

Программный код,
состоящий из нескольких строк

Например:

<pre class="pre-scrollable">
Программный код с прокруткой
</pre>

  Программный код с прокруткой

Если будет много много строк кода

еще больше строк.

Например:

<div class="h1">Оформление уведомлений.</div>
<div class="alert alert-success" role="alert">Вы успешно дочитали до этого места</div>
<div class="alert alert-info" role="alert">Это ещё не конец статьи</div>
<div class="alert alert-warning" role="alert">Читать мало, нужно всё применять на практике</div>
<div class="alert alert-danger" role="alert">Да, это не смешно</div>

<samp>

Предназначен для отображения текста, который появляется на выходе в результате работы компьютерной программы.
Например:
<samp>
Текст на выходе из компьютерной программы
</samp>

Текст на выходе из компьютерной программы

<var>

Предназначен для оформления переменных.
Например:
<var>y</var> = <var>x</var><sup>2</sup>
y = x²