Типография

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h6

Заголовок с .small

Параграфы

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda, cum dolor dolore esse ex exercitationem expedita fugit harum, illum laboriosam nisi nulla placeat quo tempora temporibus velit vitae voluptates?

p.lead

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda, cum dolor dolore esse ex exercitationem expedita fugit harum, illum laboriosam nisi nulla placeat quo tempora temporibus velit vitae voluptates?

p.small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda, cum dolor dolore esse ex exercitationem expedita fugit harum, illum laboriosam nisi nulla placeat quo tempora temporibus velit vitae voluptates?

p.mark

Mark: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda, cum dolor dolore esse ex exercitationem expedita fugit harum, illum laboriosam nisi nulla placeat quo tempora temporibus velit vitae voluptates?

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

p.text-danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, dolor doloribus ducimus error et ex fuga illo impedit nam, necessitatibus, nihil perspiciatis possimus quasi quibusdam quis quos repudiandae suscipit. Natus!

p.text-left.text-primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, atque dicta eaque rerum suscipit veritatis. Consectetur, consequuntur doloribus exercitationem explicabo, labore nam nostrum nulla odio quasi, recusandae tenetur ut.

p.text-right.text-success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, atque dicta eaque rerum suscipit veritatis. Consectetur, consequuntur doloribus exercitationem explicabo, labore nam nostrum nulla odio quasi, recusandae tenetur ut.

p.text-justify.text-info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, atque dicta eaque rerum suscipit veritatis. Consectetur, consequuntur doloribus exercitationem explicabo, labore nam nostrum nulla odio quasi, recusandae tenetur ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid atque cupiditate deserunt dolorem doloremque dolores eligendi error exercitationem, illum laudantium maiores necessitatibus nihil, placeat repellendus rerum sed sequi veniam?

p.text-nowrap.text-warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, atque dicta eaque rerum suscipit veritatis. Consectetur, consequuntur doloribus exercitationem explicabo, labore nam nostrum nulla odio quasi, recusandae tenetur ut.

Цитаты

В одну линию blockquote>p+footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem

Обратная blockquote.blockquote-reverse>p+small или blockquote.pull-right>p+small

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem

В несколько линий blockquote>p+footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid architecto cumque dolorum, ea fugiat fugit illum ipsum omnis quaerat quia ratione repellat unde? Debitis expedita labore molestiae nemo repellat?

Lorem

Аббревиатура

p.initialism

lorem

Адрес

address

Lorem ipsum dolor sit amet

Фоны

.bg-primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam blanditiis, cupiditate excepturi explicabo ipsam nemo quo similique ullam ut veniam voluptate voluptatem voluptates! Cumque dolores iure quia velit. Reiciendis.

.bg-success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam blanditiis, cupiditate excepturi explicabo ipsam nemo quo similique ullam ut veniam voluptate voluptatem voluptates! Cumque dolores iure quia velit. Reiciendis.

.bg-info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam blanditiis, cupiditate excepturi explicabo ipsam nemo quo similique ullam ut veniam voluptate voluptatem voluptates! Cumque dolores iure quia velit. Reiciendis.

.bg-warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam blanditiis, cupiditate excepturi explicabo ipsam nemo quo similique ullam ut veniam voluptate voluptatem voluptates! Cumque dolores iure quia velit. Reiciendis.

.bg-danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam blanditiis, cupiditate excepturi explicabo ipsam nemo quo similique ullam ut veniam voluptate voluptatem voluptates! Cumque dolores iure quia velit. Reiciendis.

Page Header

.page-header

Код

Тег code

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda et facere id magni nemo optio totam, voluptates. Amet autem dicta dignissimos iure modi nesciunt quas quasi, repellendus similique ut.

Тег kbd

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda et facere id magni nemo optio totam, voluptates. Amet autem dicta dignissimos iure modi nesciunt quas quasi, repellendus similique ut.

Тег kbd>kbd

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda et facere id magni nemo optio totam, voluptates. Amet autem dicta dignissimos iure modi nesciunt quas quasi, repellendus similique ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at cumque ex laborum libero reiciendis sed. Aliquam consectetur cupiditate ducimus earum expedita fugit illum quibusdam voluptatum! Distinctio molestias ratione rem!

Тег pre

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda et facere id magni nemo optio totam, voluptates. Amet autem dicta dignissimos iure modi nesciunt quas quasi, repellendus similique ut.

Тег pre.pre-scrollable

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda et facere id magni nemo optio totam, voluptates. Amet autem dicta dignissimos iure modi nesciunt quas quasi, repellendus similique ut.

Тег pre.pre-scrollable > code

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda et facere id magni nemo optio totam, voluptates.Amet autem dicta dignissimos iure modi nesciunt quas quasi, repellendus similique ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, atque consectetur expedita itaque laboriosam minima omnis quasi? Ab commodi, consectetur debitis ex iusto nulla odio omnis placeat provident, repellat repudiandae!

Списки

Списки

Обычный ul>li*4

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Без отступа ul.list-unstyled>li*4

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Горизонтальный ul.list-inline>li*4

  • List item one
  • List item two
  • List item three
  • List item four

Упорядоченный список ol>li*4

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Список определений

Обычный dl>(dt+dd)*4

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Список определений dl.dl-horizontal>(dt+dd)*4

Definition List Title
Definition list division.
Startup
Definition list division.
Startup
Definition list division.
Startup
I’ll let Bill O’Reilly will explain this one.

Кнопки

Мелкие button.btn.btn-xs

Маленькие button.btn.btn-sm

Основные button.btn

Большие button.btn.btn-lg

Таблицы

Таблицы

Обычные table.table>(thead>tr>th*3>{Head_$})+(tbody>tr*3>td*3>{Item_$})

Head_1 Head_2 Head_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3

Зебры table.table.table-striped>(thead>tr>th*3>{Head_$})+(tbody>tr*3>td*3>{Item_$})

Head_1 Head_2 Head_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3

С границами table.table.table-bordered>(thead>tr>th*3>{Head_$})+(tbody>tr*3>td*3>{Item_$})

Head_1 Head_2 Head_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3

Компактная table.table.table-condensed>(thead>tr>th*3>{Head_$})+(tbody>tr*3>td*3>{Item_$})

Head_1 Head_2 Head_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3

Разноцветная таблица

Head_1 Head_2 Head_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3

Адаптивная таблица .table-responsive>table.table>(thead>tr>th*3>{Head_$})+(tbody>tr*3>td*3>{Item_$})

Head_1 Head_2 Head_3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi at beatae cum, distinctio dolorem eaque esse eum laboriosam minima mollitia nisi officia pariatur porro quia sed, voluptatem. Ab, omnis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut debitis doloremque earum eius eum, excepturi fuga impedit iste itaque laboriosam molestias neque pariatur porro quaerat repellat reprehenderit sed, unde! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, atque earum est mollitia nisi, numquam, praesentium provident ratione repellat sapiente soluta veritatis voluptas. Ab consectetur eligendi facere repellat suscipit ut.
Item_1 Item_2 Item_3
Item_1 Item_2 Item_3

Изображения

Выравнивание изображений

Изображение по центру img.align-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam aspernatur cumque deleniti deserunt dolor libero officiis quasi, rem sed! Eum mollitia odio tempore voluptatum. Doloribus facilis maiores unde veritatis.

Изображение слева img.align-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde.

Изображение справа img.align-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa iure perferendis sunt vero voluptatum. Accusamus deserunt dignissimos iure laudantium repellat! Commodi consequatur dolorem illo iusto. Ducimus illo ipsam laudantium unde.

Адаптивное изображение

Код img.img-responsive

Формы изображений

Закругленная img.img-rounded

Круглая img.img-circle

Миниатюры изображений

Код img.img-thumbnail

Медиа компоненты

По верхнему краю .media>(.media-left>a>img.media-object)+(.media-body>h4.media-heading+p)

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

По середине .media>(.media-left.media-middle>a>img.media-object)+(.media-body>h4.media-heading+p)

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

По нижнему краю .media>(.media-left.media-bottom>a>img.media-object)+(.media-body>h4.media-heading+p)

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

Вложенные

  • Lorem

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aspernatur autem blanditiis culpa debitis deserunt distinctio esse et eveniet ipsam libero minima natus nihil quo recusandae repellat reprehenderit ut vel?

    Lorem

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

    Lorem

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

По правому краю .media>(.media-body>h4.media-heading+p)+(.media-right>a>img.media-object)

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae cum id impedit in omnis perspiciatis recusandae repellat repudiandae, voluptates? Aperiam doloribus facere illo neque, nesciunt nobis! Deserunt ipsum, officiis.

Элементы ввода

Большой input:text.form-control.input-lg

Средний input:text.form-control

Маленький input:text.form-control.input-sm

Расширенный элемент ввода .input-group>(span.input-group-addon+input:text.form-control)

@

Выбор большойselect.form-control.input-lg>option*3

Выбор средний select.form-control>option*3

Выбор маленький select.form-control.input-sm>option*3

Текст textarea.form-control

Формы

Вертикальная форма

Горизонтальная форма form.form-horizontal

Однострочная форма form.form-inline

Статическая форма form.form-inline

mrwadson@mail.ru

Сообщение

Предупреждение .alert.alert-warning

Предупреждение! Обнаружены проблемы с совместимостью системы.

Ошибка .alert.alert-danger

Ошибка! Отправка данных не завершена.

Успешно .alert.alert-success

Успех! Сообщение отправлено успешно.

Информация .alert.alert-info

Инфо! Выпуск первой версии Twitter Bootstrap состоялся в августе 2011 года.

Сообщение с крестиком .alert.alert-info>span.close[data-dismiss=alert]{×}

× Инфо! Выпуск первой версии Twitter Bootstrap состоялся в августе 2011 года.

За подсветку кода отвечает библиотека highlight.js.

Пример оформления кода взят сbrowsersync.

$ npm install browser-sync gulp --save-dev
// require the module as normal
var browserSync = require ("browser-sync");