Sketches

The result of this example is shown in Fig. 2
Fig. 2. Button group
Width Alignment

A group of buttons can be aligned to the width, then they will adjust to the width available to them and occupy it completely (Fig. 3). This is often used to create a rubber menu.
Fig. 3. Buttons occupying the entire width.
For justification, add the btn-group-justified class to
as shown in Example 3.
Example 3. Aligning buttons to width
 
    Sepulki 
    Sepulcaria 
    Stateing 
  div> 
  Bootstrap drop down menu 
  This type of menu has firmly won a place in operating systems and programs.  The sites are also used quite often due to their compactness and hierarchical structure - each menu item may contain a submenu, and that in turn is another.  However, because of this, there are some problems associated with the convenience of perception.  By the type of menu it is impossible to immediately understand how many items it contains, and the submenus enclosed make navigation difficult.  For these reasons, Microsoft in some of its programs abandoned the drop-down menu in favor of the ribbon interface, like in Word.  But most importantly, there is a tool, and how to use it is up to you to decide, based on your tasks. 
  In Bootstrap, the menu itself and the button to call it are two different elements combined into one block with the dropdown class.  Inside we add a button with the data-toggle attribute and a dropdown value. 
  Traditionally, a small down arrow is indicated next to the text - it means that the user deals with the drop-down menu, and not with the usual button or text.  To create it, simply insert   span> after the label on the button (example 1). 
  Example 1. Drop-down menu 
 
  
 
  Сепулька

  
  
Сепулькарии

  
  
Сепуление

 

  div>   The result of this example is shown in Fig.  2 
  Fig. 2. Применение разделителя в меню 
 Блокирование пунктов меню 
 Если некоторые пункты меню требуется сделать неактивными, то к элементу 
 следует добавить класс disabled (пример 3).  Пример 3. Блокированный пункт меню 

 
 
  Сепулька

  
  
Сепулькарии

  Сепуление

 

  div>  Такой пункт меню будет виден, но он отображается другим цветом, на него нельзя щёлкнуть, а при наведении на пункт курсора мыши указатель меняется (рис. 3). 
  Fig. 3. Блокированный пункт меню 
 Открытое меню 
 Пользователю можно сразу показать открытое меню, тогда ему не придётся лишний раз щёлкать по нему чтобы посмотреть, что за ним скрывается. Просто добавьте класс open к родительскому 
.   Вид кнопок 
 Кроме добавления традиционных кнопок допустимо вставить кнопку, у которой стрелка от текста визуально отделена (рис. 4). 
  Fig. 4. Вид кнопки со стрелкой 
 Для создания такого элемента сделаем две кнопки — одна с текстом, другая со стрелкой и объединим их в группу, добавив класс btn-group (пример 4). 
 Пример 4. Кнопка со стрелкой 

 
 
 
  Сепулька

  
  
Сепулькарии

  Сепуление

 

  div>  Поскольку мы теперь имеем дело с двумя кнопками, возможны разные эксперименты. Например, можно задать разный цвет у кнопки с текстом и стрелкой или поменять их местами. 

 
 В данном случае белая стрелка на зелёном фоне будет слева от текста «Меню». 
 Вкладки в Bootstrap 
 Вкладки как элемент интерфейса пришли из делопроизводства. В обычные деловые папки вставляют небольшие кусочки картона с надписями, которые позволяют быстро сориентироваться в содержании и перейти к нужному разделу. На сайтах вкладки применяются там, где требуется компактно и наглядно скомпоновать информацию по блокам. Переход по вкладкам происходит без перезагрузки страницы, что ускоряет работу и упрощает пользователю жизнь. 
 Код вкладок состоит из двух частей — это отображение самих вкладок, а также информации с ними связанных. 
 Вначале создаём список 
 с классами nav и nav-tabs. Важны оба класса, иначе мы не получим желаемый вид. Каждая вкладка формируется элементом , для текущей открытой вкладки требуется добавить класс active. Текст на вкладках делается с помощью ссылок, для каждой из них следует добавить атрибут data-toggleсо значением tab. Сама ссылка указывает на элемент с идентификатором, который должен отображаться при открытии вкладки. Вот что в итоге получится. 

  Сепульки

  Сепулькарии

  Сепуление

  Даже с этим куцым кодом вкладки должны уже работать и визуально переключаться. 
 Переходим к выводимому тексту. Оборачиваем всё элементом 
 с классом tab-content, внутри для каждой вкладки делаем отдельный  с классом tab-pane. Плюс добавляем уникальный идентификатор, связывающий текст с самой вкладкой. Последний штрих — для текущей вкладки указываем класс active. 
 
  Важный элемент цивилизации ардритов с планеты Энтеропия.
   div>
 
  Устройства для сепуления.
   div>
 
  Занятие ардритов с планеты Энтеропия.
   div>
  div>  Соединяем вместе два фрагмента и получаем итоговый код для создания вкладок. 
 Пример 1. Создание вкладок 

  Сепульки

  Сепулькарии

  Сепуление



 
  Важный элемент цивилизации ардритов с планеты Энтеропия.
   div>
 
  Устройства для сепуления.
   div>
 
  Занятие ардритов с планеты Энтеропия.
   div>
  div>   The result of this example is shown in Fig.  one. 
  Fig. 1. Вид вкладок 
 Плавный переход 
 Переход между вкладками происходит мгновенно, но можно сделать это с небольшим эффектом, если добавить класс fade к блоку с текстом. Тогда текст будет плавно исчезать и появляться. Для активной вкладки обязательно надо включить ещё один класс in, без него возникнут ошибки. 

 
  Важный элемент цивилизации ардритов с планеты Энтеропия.
   div>
 
  Устройства для сепуления.
   div>
 
  Занятие ардритов с планеты Энтеропия.
   div>
  div>  Вкладки на всю ширину 
 Размер вкладки зависит от длины текста в ней, но можно насильно изменить их ширину, чтобы вкладки занимали всё доступную ширину. Просто добавьте класс nav-justified к элементу 
. 
  Вот как выглядят подобные вкладки (рис. 2). 
  Fig. 2. Вкладки на всю ширину 
 При уменьшении размера окна такие вкладки меняют свой вид и выстраиваются не по горизонтали, а друг под другом (рис. 3). 
  Fig. 3. Вид вкладок при уменьшении размера окна 
 Вид вкладок 
 Традиционно вкладки имеют вид унаследованный из жизни — выступающие из папки кусочки картона с надписью. Заменив класс nav-tabs на nav-pills получим вкладки в виде пилюль (рис. 4). 
  Fig. 4. Изменение вида вкладок 
 Код будет таким. 
  Вкладки также можно расположить вертикально, для этого предназначен класс nav-stacked. 
  Вид таких вкладок продемонстрирован на рис.  five. 
  Fig. 5. Вертикальное расположение вкладок 
 Хлебные крошки в Bootstrap 
 Название «хлебные крошки» пошло из детских сказок. Помните историю про мальчика, который по пути рассыпал хлебные крошки и по ним сумел найти обратную дорогу домой. Впрочем, в одной из версий крошки склевали птицы и это дало толчок новым приключениям героя. На сайтах навигация в виде хлебных крошек применяется чтобы показать путь к текущему документу и его положение в иерархии сайта (рис. 1). 
  Fig. 1. Вид хлебных крошек 
 Серый текст показывает название текущего документа, а ссылки ведут на предыдущие документы, при этом первая ссылка, как правило, всегда указывает на главную страницу сайта. 
 Для создания хлебных крошек используется список 
 с классом breadcrumb, элементы  формируют сами «крошки». Текущий пункт ссылкой не является и к нему добавляется класс active (пример 1).  Пример 1. Хлебные крошки 

  Дом

  Лес

  Опушка
 
  Пряничный домик

  Нумерация страниц в Bootstrap 
 Для блогов общее количество постов разбивается на отдельные страницы, чтобы меньше загружать трафик и для упрощения восприятия информации. Навигация между страницами происходит одним из двух способов: 
 1. выводятся номера всех страниц со стрелками, ведущими на предыдущую и следующую страницу (рис. 1); 
  Fig. 1. Нумерация всех страниц 
 2. выводятся только ссылки на предыдущую и следующую страницу (рис. 2). 
  Fig. 2. Ссылки на предыдущую и следующую страницу 
  All pages 
 Нумерация делается с помощью элемента 
 с классом pagination. Номера добавляются через элементы , при этом мы сами настраиваем их количество. Например, если нам нужны ссылки для перехода на первую и последнюю страницу или ссылки ведущие на предыдущую и следующую страницу (пример 1).  Пример 1. Нумерация страниц 

  «

  1

  2

  3

  4

  5

  »

  Текущий пункт навигации выделяется через класс active добавляемый к 
. Если требуется заблокировать какой-то пункт, то добавьте к нему класс disabled. Блокирование нужно, чтобы не вводить пользователя в заблуждение. Так, если он находится на первой странице, то переход на предыдущую страницу невозможен, потому как её просто в данный момент нет. При наведении курсора мыши на такой пункт указатель меняет свой вид.  Для уменьшения или увеличения размера ссылок используйте соответственно классы pagination-sm и pagination-lg, добавив их к 
. Сам класс pagination никуда не уходит при этом. Вот как будет выглядеть код для большего размера. 
  Предыдущая и следующая страница 
 Второй тип навигации по страницам содержит только ссылки на предыдущую и следующую страницу. Соответственно, упрощается код и вид нумерации, поскольку в списке будет всего два пункта. При этом для 
используем класс pager, как показано в примере 2.  Пример 2. Переход по страницам 

  Назад

  Вперёд

  Ссылки выводятся достаточно близко друг от друга и чтобы их разнести и выровнять по левому и правому краям добавьте к ним классы previous и next (пример 3). 
 Пример 3. Выравнивание ссылок 

  Сюда

  Туда

   The result of this example is shown in Fig.  3 
  Fig. 3. Выравнивание ссылок 
 Эскиз  ( уменьшенное изображение) в Bootstrap 
 Эскиз — это уменьшенное изображение, одновременно являющееся ссылкой на страницу, либо на то же изображение увеличенное в размерах. Часто используют синоним «ноготки» (от англ. thumbnail — ноготь) или кальку «тамбы». 
 В отличие от обычных изображений эскизы вписываются в модульную сетку и размеры картинок подстраиваются под ширину макета. Поэтому вначале мы должны сделать сетку, а уже в колонки вставить ссылки с фотографиями. Пусть будет четыре колонки для средних экранов и две колонки для маленьких экранов. В каждую колонку добавляем элемент  с классом thumbnail и элемент  (пример 1). 
 Пример 1. Создание эскизов 

 
  
   div>
 
  
   div>
 
  
   div> 
 
  
   div> 
  div>   The result of this example is shown in Fig.  one. 
  Fig. 1. Вид эскизов для среднего экрана 
 При уменьшении ширины окна браузера вид макета немного меняется (рис. 2). 
  Fig. 2. Вид эскизов для маленького экрана 
 Внутрь элемента с классом thumbnail разрешается добавлять не только изображения, но и поясняющий текст к нему. Это позволяет гибко настраивать вид в соответствии со своим дизайном (пример 2). 
 Пример 2. Эскизы с текстом и кнопкой 

 
  
   
   Котёнок Наф-Наф

   Перейти

    div>
   div>
 
  
   
   Котёнок Ниф-Ниф

   Перейти

    div>
   div>
 
  
   
   Котёнок Нуф-Нуф

   Перейти

    div>
   div> 
 
  
   
   Котёнок Няф-Няф

   Перейти

    div>
   div> 
  div>  В данном примере под каждым изображением добавлен заголовок и кнопка для перехода (рис. 3). Фотография по прежнему выступает ссылкой. 
  Fig. 3. Эскизы с заголовками 
 Сообщения в Bootstrap 
 Чтобы дать пользователю знать о результатах его действий применяются информационные сообщения — для разных целей используются разные цвета. К элементу 
 добавьте класс alert и один из классов показанных в примере 1.  Пример 1. Виды сообщений 
У нас всё хорошо

Всё в порядке, просто сообщаем об этом

Кажется, что-то пошло не так

Ой-ой, всё плохо!
 
  The result of this example is shown in Fig.  one. 
  Fig. 1. Вид сообщений 
 Ссылки в сообщениях 
 Чтобы ссылки в сообщениях на цветном фоне выглядели гармонично к элементу  надо добавить класс alert-link, как показано в примере 2. 
 Пример 2. Ссылки 
У нас всё хорошо

Всё в порядке, просто сообщаем об этом

Кажется, что-то пошло не так

Ой-ой, всё плохо!
 
  The result of this example is shown in Fig.  2 
  Fig. 2. Вид ссылок в сообщениях 
 Закрытие сообщений 
 Исходно пользователь не может убрать сообщения с экрана, чтобы добавить эту возможность вставьте в 
 с сообщением класс alert-dismissible и сделайте кнопку закрытия, как показано в примере 3.  Пример 3. Закрытие сообщения 

 
 Совет дня. Теперь вы можете закрыть это надоедливое сообщение, щёлкнув по крестику в углу.
  div>   The result of this example is shown in Fig.  3 
  Fig. 3. Сообщение с кнопкой закрытия 
 После закрытия сообщения вернуть его можно лишь обновив страницу. 
 Всплывающая подсказка 
 Всплывающая подсказка может быть добавлена к любому элементу HTML с помощью универсального атрибута title. Тогда при наведении курсора на элемент появится текст, заданный внутри title. Оформление такого текста возложено на браузер и никак не меняется через стили. Поэтому часто применяют пользовательские подсказки сделанные через JavaScript. Их можно гибко настраивать по своему вкусу, добавляя возможности, которых лишена встроенная подсказка. Например, можно задавать положение подсказки относительно элемента. 
 Bootstrap переопределяет атрибут title, так что текст пишем в этом атрибуте, но также добавляем атрибут data-toggle со значением tooltip. Он будет сообщать скрипту, что следует изменить вид всплывающей подсказки. Также можно добавить и другие атрибуты управляющие видом, например data-placement указывает положение подсказки: left — слева; right — справа; top — сверху; bottom — снизу (пример 1). Учтите, что если для вывода подсказки недостаточно места, то она окажется за краем окна браузера. 
 Пример 1. Создание всплывающей подсказки 
Популярность языка JavaScript порождена его широкими возможностями 
  по взаимодействию с элементами веб-страницы через 
  
  data-toggle="tooltip" data-placement="bottom">DOM.
 
 Перед закрывающим тегом