Шаблоны блоков разметки текста

Шаблоны блоков позволяют вставить на страницу "рамку" с гибкой шириной, которая может содержать HTML-разметку. Блоки могут быть с одной или несколькими колонками текста. При уменьшении ширины экрана до ширины мобильного устройства (<768px) блоки будут размещены один под другим.

Блок с одной колонкой

<div class="row">
  <div class="col-sm-12">
    Пример текста
  </div>
</div>

Пример текста

Блок на 2 колонки одинаковой ширины (пропорции 1/1)

<div class="row">
  <div class="col-sm-6">
    Первая колонка
  </div>
  <div class="col-sm-6">
    Вторая колонка
  </div>
</div>
Первая колонка
Вторая колонка

 

Блок на 2 колонки (пропорции 1/2)

<div class="row">
  <div class="col-sm-4">
    Первая колонка
  </div>
  <div class="col-sm-8">
    Вторая колонка
  </div>
</div>
Первая колонка
Вторая колонка

Блок на 2 колонки (пропорции 2/1)

<div class="row">
  <div class="col-sm-8">
    Первая колонка
  </div>
  <div class="col-sm-4">
    Вторая колонка
  </div>
</div>
Первая колонка
Вторая колонка

Блок на 3 колонки одинаковой ширины (пропорции 1/1/1)

<div class="row">
  <div class="col-sm-4">
    Первая колонка
  </div>
  <div class="col-sm-4">
    Вторая колонка
  </div>
  <div class="col-sm-4">
    Третья колонка
  </div>
</div>
Первая колонка
Вторая колонка
Третья колонка

Блок на 4 колонки одинаковой ширины (пропорции 1/1/1/1)

<div class="row">
  <div class="col-sm-3">
    Первая колонка
  </div>
  <div class="col-sm-3">
    Вторая колонка
  </div>
  <div class="col-sm-3">
    Третья колонка
  </div>
  <div class="col-sm-3">
    Четвертая колонка
  </div>
</div>
Первая колонка
Вторая колонка
Третья колонка
Четвертая колонка

Шаблоны выделенного текста

Для выделения в тексте страницы отдельных абзацев, например, цитат, можно использовать такие блоки.

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

<div class="alert alert-warning" role="alert">
  <i class="fa fa-exclamation-triangle fa-2x pull-left ">&nbsp;</i> 
  Это шаблон "Внимание!!!". Обращаем внимание на то, что .....
</div>

<div class="alert alert-info" role="alert">
  <i class="fa fa-info-circle fa-2x pull-left ">&nbsp;</i> 
  Это шаблон "К сведению...". Чтобы это сделать, надо учесть что...
</div>

<div class="alert alert-success" role="alert">
  <i class="fa fa-check-circle fa-2x pull-left ">&nbsp;</i> 
  Это шаблон "Успех". Вы успешно освоили приемы карате...
</div>

<div class="alert alert-danger" role="alert">
  <i class="fa fa-times-circle fa-2x pull-left ">&nbsp;</i> 
  Это шаблон "Запрет!". Категорически запрещается поступать таким образом...
</div>

<div class="alert bg-primary">
  <i class="fa fa-lightbulb-o fa-2x pull-left ">&nbsp;</i> 
  Это шаблон "Идея". Скромная идея поможет вам достичь нескромных таких результатов.... 
</div>
  Это шаблон "Идея". Скромная идея поможет вам достичь нескромных таких результатов....

Комбинации шаблонов

Можно совмещать шаблоны - вставлять в шаблон блока другие шаблоны.

<div class="row">
  <div class="col-sm-4">
    <div class="alert alert-info" role="alert">
      <i class="fa fa-info-circle fa-2x pull-left ">&nbsp;</i> 
      Это шаблон &quot;К сведению...&quot;. Чтобы это сделать, надо учесть что...
    </div>
  </div>
  <div class="col-sm-4">
    <div class="alert alert-success" role="alert">
      <i class="fa fa-check-circle fa-2x pull-left ">&nbsp;</i>
      Это шаблон &quot;Успех&quot;. Вы успешно освоили приемы карате...
    </div>
  </div>
  <div class="col-sm-4">
    <div class="alert alert-danger" role="alert">
      <i class="fa fa-times-circle fa-2x pull-left ">&nbsp;</i>
      Это шаблон &quot;Запрет!&quot;. Категорически запрещается поступать таким образом...
    </div>
  </div>
</div>
<p>&nbsp;</p>

 

Шаблон масштабируемой картинки

Шаблон позволяет для любой картинки добавить масштабируемости. Он добавляет стили max-width: 100%; , height: auto; и display: block; к изображению.

<img src="..." class="img-responsive" alt="Responsive image">

Обычная вставка в текст.

minions-despicable-me-2-wallpapers-desktop-backgrounds-22.jpg

Вставка с использованием шаблона. Responsive image

Комбинация блоков с рисунком.

Responsive image

Responsive image

Responsive image

Responsive image

Responsive image

 

Варианты оформления рисунка

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Responsive image

Responsive image

Responsive image