Пример

Переключаемое контекстное меню для отображения списков ссылок. Становится интерактивным с помощью плагина javascript dropdown plugin.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Действие</a></li>
  <li><a tabindex="-1" href="#">Другое действие</a></li>
  <li><a tabindex="-1" href="#"></a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Отделенный пункт</a></li>
</ul>

Разметка

Что касается конкретно выпадающего меню, здесь используется HTML. Вам нужно вставить схему выпадающего меню внутрь класса .dropdown или другого элемента, который указывает position: relative;. После этого просто создайте меню.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Действие</a></li>
    <li><a tabindex="-1" href="#">Другое действие</a></li>
    <li><a tabindex="-1" href="#">Еще что-нибудь</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Отделенный пункт</a></li>
  </ul>
</div>

Опции

Выровняйте пункты меню по правой стороне и добавьте дополнительные выпадающие уровни.

Выравнивание пунктов меню

Добавьте .pull-right к классу .dropdown-menu для выравнивания пунктов меню по правой стороне.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Подуровни выпадающего меню

Присоедините дополнительный уровень выпадающего меню, который будет появляться при наведении курсора, как в OS X, только с небольшими дополнениями в разметке. Добавьте класс .dropdown-submenu в любой пункт li в существующем выпадающем меню.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">Другие опции</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Примеры

Две основные опции вместе с двумя специфическими разновидностями.

Отдельная группа кнопок

Поместите группы кнопок с помощью класса .btn в класс .btn-group.

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Множественные группы кнопок

Совместите наборы <div class="btn-group"> в <div class="btn-toolbar"> для компонентных комплексов.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Вертикальные группы кнопок

Расположите набор кнопок вертикально.

<div class="btn-group btn-group-vertical">
  ...
</div>

Флажки и радио-кнопки

Группы кнопок могут также функционировать как радио-кнопки, когда активной может быть только одна из них, или как флажки (чек-боксы), где активным может быть любое количество кнопок. Смотрите документацию Javascript.

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

Внимание! Каждую кнопку в выпадающем списке требуется индивидуально вписать в свой класс .btn-group внутри класса .btn-toolbar для точного отображения.

Обзор и примеры

Для запуска выпадающего меню используйте любую кнопку, помещая ее в .btn-group и сопровождая ее требующейся разметкой.

<div class="btn-group">
  <a class="btn dropdown-toggle" Переключение данных="dropdown" href="#">
    Действие
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Работа с кнопками всех размеров

Выпадающие списки кнопок могут работать при любом размере: .btn-large, .btn-small, или .btn-mini.

Требуемый javascript

Выпадающие списки кнопок требуют плагин выпадающего меню Bootstrap для успешного функционирования.

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

Разделение выпадающих списков

Настраивая стиль и разметку группы кнопок, мы легко можем создать отделенную кнопку. Стандартным действием отделенных кнопок есть функция переключения выпадающего списка с левой стороны на правую с помощью контекстных ссылок.

<div class="btn-group">
  <button class="btn">Действие</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Размеры

Применяйте дополнительные классы кнопок .btn-mini, .btn-small или .btn-large для настройки размеров.

<div class="btn-group">
  <button class="btn btn-mini">Действие</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Выпадающие вверх списки

Выпадающие вверх списки меню могут быть включены с помощью добавления отдельного класса в родительский класс.dropdown-menu. Это развернет направление .caret зеркально и меню при этом будет раскрываться вверх.

<div class="btn-group dropup">
  <button class="btn">Выпадающие вверх списки</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Облегченные настройки по умолчанию Та же разметка, разные классы

Все навигационные компоненты — вкладки, кнопки и списки — используют общую разметку и стили с помощью класса .nav.

Основные вкладки

Возьмите обычный список<ul> ссылок и добавьте класс .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Основные кнопки

Возьмите тот же HTML, но используйте .nav-pills

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Домой</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Состояние отключения

К любому компоненту навигации (вкладкам, кнопкам или спискам) добавьте .disabled для выделения серым цветом и отмену эффекта наведения курсора. Ссылки можно будет нажимать, пока вы не отмените это действие с помощью javascript.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Домой</a></li>
  ...
</ul>

Выравнивание компонентов

Чтобы выровнять навигационные ссылки, используйте дополнительные классы .pull-left или .pull-right. Оба класса добавляют соответствующее обтекание.

Вертикальное выравнивание

Вкладки и кнопки по умолчанию располагаются горизонтально. Но стоит вам добавть к ним класс .nav-stacked, они станут располагаться вертикально.

Вертикальные вкладки

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Вертикальные кнопки

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Выпадающие меню

Добавьте выпадающие меню, используя дополнительно немного HTML и плагин выпадающего меню javascript.

Вкладки с выпаданием

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Выпадающий список
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Кнопки с выпаданием

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Выпадающий список
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Навигационные списки

Самый простой способ создания групп навигационных списков — с помощью дополнительных заголовков. Лучше всего использовать их в боковом поле, наподобие «the Finder» в OS X.

Пример навигационного списка

Возьмите список ссылок и добавьте class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">Домой</a></li>
  <li><a href="#">Библиотека</a></li>
  ...
</ul>

Примечание
Для создания вложенности в навигационном списке добавьте class="nav nav-list" к любому вложенному пункту <ul>.

Горизонтальные разделители

Добавьте горизонтальный разделитель, создавая пустой список с помощью класса .divider, как, например:

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Навигация с переключением вкладок

В Bootstrap есть возможность переключения между контентом и вкладками. Это объединено в четырех стилях: top (по умолчанию), right, bottom и left.

Пример навигации с переключением вкладок

Чтобы сделать вкладки переключаемыми, создайте класс .tab-pane с уникальным ID для каждой вкладки и поместите их в класс .tab-content.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Раздел 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Раздел 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Я в Разделе 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Привет, я в Разделе 2.</p>
    </div>
  </div>
</div>

Затененные вкладки

Чтобы затенить вкладки, добавьте класс .fade в каждый класс .tab-pane.

Требуется плагин jQuery

Все переключаемые вкладки созданы с помощью нашего простого плагина jQuery. Узнайте больше о том, как создавать переключаемые вкладки, на странице документации javascript.

Переключение в любом направлении

Вкладки снизу

Разверните порядок HTML и добавьте класс, чтобы установить вкладки снизу.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Вкладки слева

Замените класс, чтобы поставить вкладки слева.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Вкладки справа

Замените класс, чтобы поставить вкладки справа.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Основная навигационная панель

Начнем с того, что навигационные панели статичны (не прижаты к верху) и содержат в себе название проекта и основные возможности навигации. Разместите панель в любом месте внутри .container. Это устанавливает ширину вашего сайта и содержимого.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Компоненты навигационной панели

Бренд

Простая ссылка для отображения вашего бренда или названия проекта требует всего лишь анкерный тег (якорь).

<a class="brand" href="#">Название проекта</a>

Навигационные ссылки

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

<ul class="nav">
  <li class="active">
    <a href="#">Домой</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

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

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Формы

Чтобы правильно отобразить и расположить форму внутри навигационной панели, добавьте соответствующие классы, как показано в примере выше. Для создания формы по умолчанию добавьте .navbar-form и один из классов: .pull-left или .pull-right для корректного выравнивания.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Подтвердить</button>
</form>

Форма поиска

Для создания более специализированной формы поиска добавьте класс .navbar-search в form и .search-query для ввода специализированных стилей в панели навигации.

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

Выравнивание компонентов

Выровняйте навигационные ссылки, формы поиска или текст, используя дополнительные классы .pull-left или .pull-right. Оба класса задают соответствующее обтекание.

Использование выпадающих списков

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

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Account
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

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

Текст

Добавьте строки текста внутрь класса .navbar-text, как правило, с тегом <p> для правильного размещения и цвета.

Дополнительные разновидности отображения

Зафиксируйте панель навигации вверху или внизу экрана с помощью дополнительногшо класса ближнего div .navbar.

Фиксирование вверху

Добавьте класс .navbar-fixed-top и помните о скрытых участках под ним. Обязательно добавьте как минимум отступ в 40px padding в <body>. Добавление должно выполняться после ядра Bootstrap CSS и до дополнительной зависимой CSS.

<div class="navbar navbar-fixed-top">
  ...
</div>

Фиксирование внизу

Добавьте класс.navbar-fixed-bottom.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

Статическая верхняя панель навигации

Создайте навигационную панель на всю ширину экрана. Она будет исчезать с поля зрения, если вы добавите класс .navbar-static-top. Это не похоже на класс .navbar-fixed-top, вам не нужно менять отступы в теле текстаbody.

<div class="navbar navbar-static-top">
  ...
</div>

Динамическая панель навигации

Чтобы создать динамическую панель, которая зависит от изменений окна экрана, добавьте содержимое вашей навигационной панели в div, .nav-collapse.collapse и добавьте кнопку переключения панели .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
 
      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Название проекта</a>
 
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Разновидность инверсии

Измените внешний вид навигационной панели с помощью добавления класса .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

Примеры

Отдельный пример показывает как это могло бы отражаться в множественных страницах.

<ul class="breadcrumb">
  <li><a href="#">Домой</a> <span class="divider">/</span></li>
  <li><a href="#">Библиотека</a> <span class="divider">/</span></li>
  <li class="active">Данные</li>
</ul>

Стандартное разбиение на страницы

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

<div class="pagination">
  <ul>
    <li><a href="#">Prev</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="#">Next</a></li>
  </ul>
</div>

Опции

Неактивные и активные состояния

Ссылки могут настраиваться для любых потребностей. Используйте класс .disabled для преобразования ссылок в неактивные и .active для указания на текущую страницу.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

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

<div class="pagination">
  <ul>
    <li class="disabled"><span>Prev</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Выравнивание

Добавьте один или два дополнительных класса, чтобы изменить выравнивание постраничных ссылок: .pagination-centered и .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

Страницы

Быстрые предыдущие и следующие ссылки для простого разбиения на страницы с обычной разметкой и стилями. Идеально подходит для простых сайтов типа блогов или журналов.

Пример по умолчанию

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

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

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

Вы также можете выровнять элементы по краям блока:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Дополнительное неактивное состояние

Ссылки на страницы также используют общий дополнительный класс .disabled для постраничного вывода на экран.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

Labels

Бейджи

Элемент Hero

Легкий, гибкий элемент для показа ключевой информации на вашем сайте. Идеально подходит для маркетинговых сайтов и больших проектов.

<div class="hero-unit">
  <h1>Заголовок</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Узнать больше
    </a>
  </p>
</div>

Заголовок страницы

Простая оболочка для h1 правильно разделяет содержимое страницы на сегменты. По умолчанию использует small в h1, как и многие другие компоненты (с дополнительными стилями).

<div class="page-header">
  <h1>Пример заголовка страницы <small>Подтекст для заголовка</small></h1>
</div>

Миниатюры по умолчанию

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

Точные настройки

При помощи дополнительной разметки мы получаем возможность добавлять в миниатюры любой тип HTML-содержимого: заголовки, абзацы или кнопки.

h3>Для чего используют миниатюры

Миниатюры (в предыдущих версиях, до v1.4 .media-grid) идеально подходят для фото, видео, результатов поиска изображений, маркетинговых целей, портфолио и др. Могут быть представлены в виде ссылок или статического содержимого.

Простая, гибкая разметка

Разметка миниатюр проста: все, что нужно, это ul любым количеством элементов li. Она также позволяет отобразить любой тип содержимого с помощью небольшого количества элементов.

Использование размеров столбцов

Наконец, компоненты миниатюр используют существующую систему классов: .span2 or .span3 для управления размерами миниатюр.

Разметка

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

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Для стандартного HTML контента миниатюр разметка слегка меняется. Чтобы иметь возможность добавлять уровень блоков в любое место, мы заменили <a> на <div> как видно из примера:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
      <h3>Ярлык миниатюры</h3>
      <p>Заголовок миниатюры...</p>
    </div>
  </li>
  ...
</ul>

Другие примеры

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

Сообщение по умолчанию

Поместите любой текст и дополнительную кнопку в класс .alert для обычного предупреждения.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">?</button>
  <strong>Предупреждение!</strong> Посмотрите на себя - вы не очень-то хорошо выглядите.
</div>

Кнопки отмены

Мобильные браузеры Safari и Opera дополнительно к атрибуту data-dismiss="alert" требуют href="#" для отмены сообщений при использовании тега <a>.

<a href="#" class="close" data-dismiss="alert">?</a>

Кроме того, вы можете использовать элемент <button> с атрибутом данных, который мы выбрали для наших документов. Используя <button>, вы должны включить в свою форму type="button" или ваша форма не будет подтверждена.

<button type="button" class="close" data-dismiss="alert">?</button>

Отмена данных посредством javascript

Используйте плагин сообщений jQuery для простой и быстрой отмены сообщений.

Опции

Для длинного сообщения используйте элемент с классом .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">?</button>
  <h4>Предупреждение!</h4>
  Посмотрите на себя - вы не очень-то...
</div>

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

Используйте дополнительные классы, чтобы изменить смысл сообщения.

Ошибка или опасность

<div class="alert alert-error">
  ...
</div>

Успешное действие

<div class="alert alert-success">
  ...
</div>

Информация

<div class="alert alert-info">
  ...
</div>

Примеры и разметка

Основной

Индикатор процесса по умолчанию с вертикальным градиентом.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Полосы

Используется градиент для создания эффекта полос. Не поддерживается в IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Анимированный

Добавьте .active в .progress-striped для анимированного движения полос справа налево. Не поддерживается ни в одной версии IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Вертикальный

Поместите множественные индикаторы в один и тот же класс .progress, чтобы отобразить их вертикально.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Опции

Дополнительные цвета

Индикаторы процесса используют те же кнопки и классы сообщений для согласующихся стилей.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Полосатые индикаторы

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

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

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

Индикаторы процесса используют градиенты CSS3, переходы и анимацию для достижения всех своих эффектов. Эти характеристики не поддерживаются в IE7-9 и в более старых версиях Firefox.

Версии, вышедшие ранее, чем Internet Explorer 10 и Opera 12, не поддерживают анимацию.

Классы .well

Используйте классы .well для выделения текста в отдельную ячейку.

<div class="well">
  ...
</div>

Дополнительные классы

Настройка отступов и закругленных углов с помощью двух дополнительных классов модификаторов.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

Иконка скрытия

Используйте для скрытия всплывающих окон и сообщений.

<button class="close">&times;</button>

iOS устройства требуют использование href=»#» для вызова событий.

<a class="close" href="#">&times;</a>

Вспомогательные классы

Простые сфокусированные классы для отображения на маленьком дисплее или для пользовательских настроек.

Класс .pull-left

Обтекание элемента слева

class="pull-left"

.pull-left {
  float: left;
}

Класс .pull-right

Обтекание элемента справа

class="pull-right"

.pull-right {
  float: right;
}

Класс .muted

Измените цвет элемента на #999

class="muted"

.muted {
  color: #999;
}

Класс .clearfix

Отменяет обтекание любого элемента

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}