Элементы bootstrap 3: Bootstrap 3 — Основные элементы для создания сетки — Программирование на Python и Objective-C в Mac OS

Содержание

Bootstrap 3 · Иконки, меню, навигация, табы, сообщения предупреждений и др.

Доступные символы

Включено 200 символов в формате шрифта из набора Glyphicon Halflings. Обычно Glyphicons Halflings недоступны бесплатно, но автор сделал их бесплатными специально для Bootstrap. Как благодарность, мы бы просили вас оставлять ссылку на Glyphicons, где есть такая возможность.

Как использовать

Для лучшей производительности, все значки нуждаются базовом классе и индивидуальном классе значков. Разместите следующий код в любом месте. Не забудьте поставить пробел между значком и текстом для правильного отступ (padding).

Не смешивайте с другими компонентами

Классы значков не могут сочетаться с другими элементами. Они спроектированы, чтобы быть отдельными элементами. Вместо этого добавте <span> и применить значок классов <span>

<span></span>

Примеры

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

<button type="button"><span></span> Star</button>

Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

Пример

Оберните кнопку выпадающего меню и список с помощью класса .dropdownили другого элемента, который объявляет position: relative;.

<div>
  <button type="button" data-toggle="dropdown">
        Dropdown
        <span></span>
      </button>
  <ul role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другое действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Что-то еще</a></li>
    <li role="presentation"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a></li>
  </ul>
</div>

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

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

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

Dropdowns автоматически позиционируется с помощью CSS в пределах нормального потока документа. Это означает, что выпадающее меню может быть обрезано родителями с определенными свойствами overflow или появляются за пределми области просмотра. Адресуйте эти вопросы по своему усмотрению, когда они возникают.

.pull-right устаревшее выравнивание

В версии 3.1, мы определили устаревшим выравнивание .pull-right для выпадающего меню. Для выравнивания меню справа, используйте .dropdown-menu-right. Компоненты, выровненные справа в навигационной панели используют реализован версию класса right-aligned, для автоматического выравнивания меню. Для переопределения их, используйте .dropdown-menu-left.

<ul role="menu" aria-labelledby="dLabel">
  ...
</ul>

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

<ul role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation">Название меню</li>
  ...
  <li role="presentation"></li>
  <li role="presentation">Название меню</li>
  ...
</ul>

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

Добавьте .disabled к <li> в выпадающем списке, чтобы отключить ссылку.

<ul role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Обычная ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Заблокированая ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другая ссылка</a></li>
</ul>

Сгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью JavaScript и нашего плагина кнопок, можно еще добавить стиль поведения переключателей или галочек (checkbox).

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

При использовании подсказок или информеров (popovers) в пределах .btn-group, необходимо определить параметр container: 'body', чтобы избежать нежелательных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).

Основной пример

Оберните серию кнопок с классом .btn класс .btn-group.

Левая
Средняя
Правая

<div>
  <button type="button">Левая</button>
  <button type="button">Средняя</button>
  <button type="button">Правая</button>
</div>

Кнопка панели инструментов

Объедините набор <div> с помощью <div> для более сложных компонентов.

<div role="toolbar">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Изменение размера

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

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Вложенность

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

<div>
  <button type="button">1</button>
  <button type="button">2</button>

  <div>
    <button type="button" data-toggle="dropdown">
        Dropdown
        <span></span>
      </button>
    <ul>
      <li><a href="#">Dropdown ссылка</a></li>
      <li><a href="#">Dropdown ссылка</a></li>
    </ul>
  </div>
</div>

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

Сделайте набор кнопок, составленных вертикально, а не горизонтально. Split кнопки выпадающего меню не поддерживаются.

Кнопка
Кнопка

<div>
  ...
</div>

Группа кнопок Justified

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

Обработка рамок

Из-за специфических HTML и CSS, используемой для обоснования кнопок (а именно display: table-cell), границы между которыми удвоятся. В регулярных группах кнопок, margin-left: -1px используется для стека границ вместо удаления их. Впрочем, margin не работает с display: table-cell. В результате этого, в зависимости от ваших настроек в Bootstrap, вы можете удалить или повторно изменить цвет рамок.

С

<a> элементами

Просто заключите серию .btns в .btn-group.btn-group-justified.

<div>
  ...
</div>

С

<button> элементами

Для использования групп кнопок по ширине с элементами <button>, вы должны заключить каждую кнопку в группу кнопок. Большинство браузеров не правильно применяют наш CSS для обоснования, элемента <button>, но так как мы поддерживаем кнопки выпадающего меню, мы можем обойти это

Левая

Средняя

Правая

<div>
  <div>
    <button type="button">Левая</button>
  </div>
  <div>
    <button type="button">Средняя</button>
  </div>
  <div>
    <button type="button">Правая</button>
  </div>
</div>

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

Одиночная кнопка выпадающего меню

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

<!-- Single button -->
<div>
  <button type="button" data-toggle="dropdown">Действие <span></span></button>
  <ul role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Расщепленная кнопка выпадающего меню

Аналогично создайте розщеплену кнопку выпадающего меню с такими же изменениями в розміткі, только с разделенной кнопкой.

По умолчанию

Меню с переключением

Primary

Меню с переключением

Success

Меню с переключением

Info

Меню с переключением

Warning

Меню с переключением

Danger

Меню с переключением

<!-- Split button -->
<div>
  <button type="button">Действие</button>
  <button type="button" data-toggle="dropdown">
 <span></span>
 <span>Меню с переключением</span>
 </button>
  <ul role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Изменение размера

Кнопки в выпадающем меню могут иметь любой размер.

<!-- Large button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Большая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

<!-- Small button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Малая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Очень малая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

Вариант списка сверху

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

<div>
  <button type="button">Поднимающееся меню</button>
  <button type="button" data-toggle="dropdown">
 <span></span>
 <span>Меню с переключением</span>
 </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

Разверните элементы управления формы добавив текст или кнопки до, после, с обеих сторон любого текстового поля формы. Используйте .input-group с .input-group-addon в начало или конец для одного элемента .form-control.

Кросс-браузерная совместимость

В данном случае избегайте использования элементов <select>, поскольку они в полной мере не могут стилізуватись в WebKit браузерах.

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

Когда используете подсказки или информеры (popovers) на элементах в пределах .input-group, вам необходимо определить параметр container: 'body', для избежания нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).

Не смешивайте с другими компонентами

Не смешивайте группы форм или классы столбцов разметки непосредственно с группами ввода. Вместо этого, внедрите группу ввода внутри группы формы или связанной разметки с элементом.

Основной пример

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

Мы не поддерживаем несколько дополнительных компонентов на одной стВместоороне.

Мы не поддерживаем несколько form-control в одной группе ввода.

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <input type="text">
  <span>.00</span>
</div>

<div>
  <span>$</span>
  <input type="text">
  <span>.00</span>
</div>

Изменение размера

Разместите один приложение или одну кнопку с любой стороны от формы ввода. Вы также можете разместить их по обе стороны от формы ввода. Мы не поддерживаем несколько приложений с одной стороны.

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

Дополнение для флажков и переключателей

Поместите любые опции галочек (checkbox) или переключателей в рамках дополнения формы ввода вместо текста.

<div>
  <div>
    <div>
      <span>
        <input type="checkbox">
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <span>
        <input type="radio">
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Дополнение для кнопок

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

<div>
  <div>
    <div>
      <span>
        <button type="button">Go!</button>
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text">
      <span>
        <button type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <div>
      <div>
        <button type="button" data-toggle="dropdown">Действие <span></span></button>
        <ul>
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то иное</a></li>
          <li></li>
          <li><a href="#">Отдельная ссылка</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text">
      <div>
        <button type="button" data-toggle="dropdown">Действие <span></span></button>
        <ul>
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то иное</a></li>
          <li></li>
          <li><a href="#">Отдельная ссылка</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <!-- Button and dropdown menu -->
  </div>
  <input type="text">
</div>

<div>
  <input type="text">
  <div>
    <!-- Button and dropdown menu -->
  </div>
</div>

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

Вкладки

Заметьте, что класс .nav-tabs требует базового класса .nav.

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Необходимость в JavaScript-плагине

Для переключения между различными вкладками, вам нужно использовать JavaScript-плагин для вкладок.

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

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

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Навигационные кнопки также доступны в вертикальной сборке. Просто добавьте .nav-stacked.

<ul>
  ...
</ul>

Выравнивание по ширине навигаций

При помощи .nav-justified можно легко создавать вкладки или кнопки, одинаковой ширины с их родительскими элементами, для более широких экранов по 768px. На меньших экранах, навигационные ссылки будут состоять.

WebKit и адаптивные навигационные меню, выровнены по ширине

По состоянию на v7.0.1, Safari проявляется ошибка, в котором при изменение размера окна ваш браузер по горизонтали вызывает ошибки рендеринга нивигации по ширине, которые были удалены при обновлении. Эта ошибка проявляется также в пример justified nav.

<ul>
  ...
</ul>
<ul>
  ...
</ul>

Заблокированные ссылки

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

Функциональности ссылки не изменны

Этот класс меняет лишь отражение <a>, но не его функциональность. Для блокировки функциональности ссылки используйте JavaScript.

<ul>
  ...
  <li><a href="#">Заблокированная ссылка</a></li>
  ...
</ul>

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

Создавайте выпадающее меню с небольшим добавлением HTML и JavaScript плагина для выпадающего меню.

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

<ul>
  ...
  <li>
    <a data-toggle="dropdown" href="#">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

Навигационные кнопки с выпадающем меню

<ul>
  ...
  <li>
    <a data-toggle="dropdown" href="#">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

Навигационная панель по умолчанию

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

Переполнение контента

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

Уменьшите количество или ширину NavBar пунктов.
Скройте определенные элементы NavBar в определенных размерах экрана с помощью классов адаптивных утилит.
Измените точку, в которой ваши NavBar переключается между свернутым и горизонтальной режимом. Настройте переменную @grid-float-breakpoint или добавmnt свой собственный медиа-запрос.

Необходимость в JavaScript

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

<nav role="navigation">
  <div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
      <a href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
      <form role="search">
        <div>
          <input type="text" placeholder="Search">
        </div>
        <button type="submit">Отправить</button>
      </form>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Зависимость плагина

Адаптивная навигационная панель в вашей версии Bootstrap требует плагина collapse.

Доступность навигационных панелей

Убедитесь, что добавили role="navigation" в каждой навигационной панели для улучшения их доступности.

Формы

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

Как ведущий, класс .navbar-form имеет большинство своего кода совместно с .form-inline через mixin. Некоторые элементы управления форм, таких как группы ввода, могут потребовать фиксированной для правильного отображения в navbar.

<form role="search">
  <div>
    <input type="text" placeholder="Search">
  </div>
  <button type="submit">Отправить</button>
</form>

Предостережения для мобильных устройств

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

Всегда добавляйте ярлыки

Программы чтения экрана (screen readers) будут иметь проблемы с вашими формами, если вы не будете добавлять ярлыки для каждого поля ввода. Для данных встроенных форм навигационных панелей, вы можете скрыть ярлыки используя класс .sr-only.

Кнопки

Добавьте класс .navbar-btn к элементам <и>, которые не находятся в <html> для вертикального их центрирование в навигационных панелях.

<button type="button">Войти</button>

Специфическая особенность использования

Как и стандартные классы кнопок, .navbar-btn может использоваться в элементах <a> и <input>. Тем не менее, ни один .navbar-btn или же стандартные классы кнопки не должны использоваться в элементах <a> внутри .navbar-nav.

Текст

Заключите строку текста в элемент с классом .navbar-text, обычно с тегом <p>, для правильного выравнивания и цвета.

<p>Signed in as Mark Otto</p>

Не контекстные ссылки

Люди, которые используют стандартные ссылки в пределах необычных компонентов навигационных панелей, могут применять класс .navbar-link для вставки правильных цветов в навигационных панелях по умолчанию и инвертированных навигационных панелях.

<p>Signed in as <a href="#">Mark Otto</a></p>

Компонент выравнивания

Выравнивайте навигационные ссылки, формы, кнопки, текст, используя вспомогательные классы .navbar-left или .navbar-right. Оба классы добавляют CSS float в указанном направлении. Например, чтобы выровнять навигационные ссылки, вложите их в отдельный <ul> с соответствующим вспомогательным классом.

Эти классы являются смешанной версией классов .pull-left и .pull-right, но они предназначены для медиа запросов, чтобы упростить обработку компонентов навигационных панелей для различных размеров устройств.

Фиксация вверху

Добавьте .navbar-fixed-top и подключите .container или .container-fluid для центровки и внутренних отступлений содержимого навигационной панели.

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

Необходимость установления padding для body

Фиксированная навигационная панель будет налагаться на остальные вашего содержимого, пока вы не добавите padding в верхней части <body>. Попробуйте установить свои собственные значения, или используйте фрагмент кода ниже. Справка: По умолчанию, навигационная панель имеет высоту 50px.

body { padding-top: 70px; }

Убедитесь, что это включено основного Bootstrap CSS.

Фиксация внизу

Добавьте .navbar-fixed-bottom и подключите .container или .container-fluid для центровки и внутренних отступлений содержимого навигационной панели.

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

Необходимость установления padding для body

Фиксированная навигационная панель будет налагаться на остальные вашего содержимого, пока вы не добавите padding в нижней части <body>. Попробуйте установить свои собственные значения, или используйте фрагмент кода ниже. Справка: По умолчанию, навигационная панель имеет высоту 50px.

body { padding-bottom: 70px; }

Убедитесь, что это включено основного Bootstrap CSS.

Статический верх

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

В отличие от классов .navbar-fixed-*, вам не нужно изменять любой padding и body.

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

Инвертированная навигационная панель

Изменить внешний вид панели навигации, добавив .navbar-inverse.

<nav role="navigation">
  ...
</nav>

Установите текущую страницу расположение в пределах навигационной иерархии.

Разделители автоматически добавляются в CSS через :before и content.

<ol>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Библиотека</a></li>
  <li>Данные</li>
</ol>

Добавьте ссылки постраничного разделения для вашего сайта с многостраничным компонентом, или простой альтернатива листания.

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

<ul>
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

Заблокированы и активные состояния

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

<ul>
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1 <span>(current)</span></a></li>
  ...
</ul>

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

<ul>
  <li><span>&laquo;</span></li>
  <li><span>1 <span>(current)</span></span></li>
  ...
</ul>

Изменение размера

Есть потребность увеличить или уменьшить блок постраничного вывода? Добавьте .pagination-lg или .pagination-sm для изменения размеров.

<ul>...</ul>
<ul>...</ul>
<ul>...</ul>

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

Основной пример

По умолчанию, листание имеет ссылки, выровненные по-центру.

<ul>
  <li><a href="#">Предыдущая</a></li>
  <li><a href="#">Следующая</a></li>
</ul>

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

В качестве альтернативы, вы можете выравнивать каждую ссылку:

<ul>
  <li><a href="#">&larr; Старая</a></li>
  <li><a href="#">Новая &rarr;</a></li>
</ul>

Заблокирован состояние

Листание ссылок также использует базовый вспомогательный класс .disabled.

<ul>
  <li><a href="#">&larr; Старая</a></li>
  <li><a href="#">Новая &rarr;</a></li>
</ul>

Пример

Пример заголовка Новый

<h4>Пример заголовка <span>Новый</span></h4>

Доступные варианты

Добавте любой из перечисленных ниже модификаторов классов, чтобы изменить внешний вид меткии.

Default
Primary
Success
Info
Warning
Danger

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Легко подсветить новые или непрочитанные записи добавив к ссылкам <span>, Bootstrap навигацию, и другое.

<a href="#">Inbox <span>42</span></a>

Самосвертывание

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

Кросс-браузерная совместимость

Значки не будут самозгортатись в Internet Explorer 8, потому что ему не хватает поддержки селектора :empty.

Адаптация под активные состояния

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

<ul>
  <li>
        <a href="#">
          <span>42</span>
          Главная
     </a>
        </li>
  ...
</ul>

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

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

Узнать больше

<div>
  <h2>Привет, мир!</h2>
  <p>...</p>
  <p><a role="button">Узнать больше</a></p>
</div>

Создайте большой экран на всю ширину, без закругленных углов, который размещен за пределами .container, но, вместо этого, который вмещает .container.

<div>
  <div>
    ...
  </div>
</div>

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

<div>
  <h2>Пример заголовка страницы <small>Дополнительный текст</small></h2>
</div>

Расширьте систему сетки Bootstrap с помощью компонента эскиза для легкого создания сетки с изображениями, видео, текстом, и так далее.

Основной пример

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

<div>
  <div>
    <a href="#">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Настраиваемое содержимое

Добавив немного разметки, можно включать любое содержимое HTML, такой как заголовки, параграфы, или кнопки в середине эскизов.

Ярлык эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопка Кнопка

Ярлык эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопка Кнопка

Ярлык эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопка Кнопка

<div>
  <div>
    <div>
      <img data-src="holder.js/300x200" alt="...">
      <div>
        <h4>Ярлык эскиза</h4>
        <p>...</p>
        <p><a href="#" role="button">Кнопка</a> <a href="#" role="button">Кнопка</a></p>
      </div>
    </div>
  </div>
</div>

Предоставьте контекстные интерактивные замечания для типовых действий пользователей. Чтобы была возможность закрытия таких замечаний, используйте плагин уведомлений jQuery.

Примеры

Для базовых замечаний, оберните любой текст и опциональную кнопку при помощи .alert, и одного из четырех контекстных классов (например, .alert-success).

Без класса по умолчанию

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

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Warning! Better check yourself, you’re not looking too good.

Oh snap! Change a few things up and try submitting again.

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Замечания, которые можно закрыть

Создавайте любые замечания добавив необязательные .alert-dismissable и кнопку закрытия.

×
Warning! Better check yourself, you’re not looking too good.

<div>
  <button type="button" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Обеспечьте правильное поведение на всех устройствах

Убедитесь, что используете элемент <button> с атрибутом data-dismiss="alert".

Ссылки в замечаниях

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

<div>
  <a href="#">...</a>
</div>
<div>
  <a href="#">...</a>
</div>
<div>
  <a href="#">...</a>
</div>
<div>
  <a href="#">...</a>
</div>

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

Кросс-браузерная совместимость

Индикатор выполнения использует переходы и анимацию CSS3 для обеспечения определенных эффектов. Эти функции не поддерживаются в Internet Explorer 9 и старше, или в старых версиях Firefox. Opera 12 не поддерживает анимации.

Основной пример

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

<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete</span>
  </div>
</div>

С меткой

Удалите класс .sr-only изнутри индикатора выполнения, чтобы показать видимый процент. Для низкого процента, рассмотрите возможность добавления min-width чтобы убедиться метка текста является полностью видимой.

<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

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

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

<div>
  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <span>40% Complete (success)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <span>20% Complete</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete (warning)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <span>80% Complete</span>
  </div>
</div>

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

Используйте градиент для создания полосатого эффекта. Это является недоступным в IE8.

<div>
  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <span>40% Complete (success)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <span>20% Complete</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete (warning)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <span>80% Complete (danger)</span>
  </div>
</div>

Индикатор с анимацией

Добавьте .active — .progress-striped для анимации левой или правой полосатости. Это является недоступным в IE9 и ниже.

<div>
  <div  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    <span>45% Complete</span>
  </div>
</div>

Сводный индикатор

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

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

<div>
  <div>
    <span>35% Complete (success)</span>
  </div>
  <div>
    <span>20% Complete (warning)</span>
  </div>
  <div>
    <span>10% Complete (danger)</span>
  </div>
</div>

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

По умолчанию

По умолчанию, медиа-объекты (изображения, видео, аудио) можно выравнивать по левому или по правому краю блока контента.

<div>
  <a href="#">
    <img src="..." alt="...">
  </a>
  <div>
    <h5>Заголовок медиа</h5>
    ...
  </div>
</div>

Список медиа

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

<ul>
  <li>
    <a href="#">
      <img src="..." alt="...">
    </a>
    <div>
      <h5>Заголовок медиа</h5>
      ...
    </div>
  </li>
</ul>

Список групп является гибким и мощным компонентом для отображения не только простых пунктов списка, но и для чего-то более сложного, что касается пользовательского содержимого.

Основной пример

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

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Значки

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

14
Cras justo odio
2
Dapibus ac facilisis in
1
Morbi leo risus

<ul>
  <li>
        <span>14</span>
        Cras justo odio
      </li>
</ul>

Связанные элементы

Ссылочные пункты списков групп создаются с помощью тегов <a> вместо пунктов списка (здесь также используется в качестве родительского элемента <div> вместо <ul>). Не нужно дополнительно обертывать каждый пункт родительским элементом.

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

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

Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанно. Также включают в себя состояние .active.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

<ul>
  <li>Dapibus ac facilisis in</li>
  <li>Cras sit amet nibh libero</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>
<div>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Cras sit amet nibh libero</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Настраиваемое содержимое

Добавляйте практически любой HTML, даже для связанного списка групп, как показано ниже.

<div>
  <a href="#">
    <h5>Заголовок пункта списка группы</h5>
    <p>...</p>
  </a>
</div>

Хотя не всегда необходимо, но иногда нужно во что-то упаковать DOM. Для таких случаев, попробуйте компонент панели.

Основной пример

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

<div>
  <div>
    Basic panel example
  </div>
</div>

Панель с заголовком

Можно легко добавлять заголовки контейнера к панели с .panel-heading. Вы можете также включать любой <h2>—<h6> вместе с классом .panel-title, чтобы добавить предвизначені заголовки.

Panel heading without title

Panel content

Название панели

Panel content

<div>
  <div>Panel heading without title</div>
  <div>
    Panel content
  </div>
</div>

<div>
  <div>
    <h4>Название панели</h4>
  </div>
  <div>
    Panel content
  </div>
</div>

Оберните кнопки или вторичный текст в .panel-footer. Заметьте, что эта панель с нижним колонтитулом не наследует цвета и рамки (borders), при использовании контекстных вариантов, поскольку они не предназначены, чтобы быть на переднем плане.

<div>
  <div>
    Panel content
  </div>
  <div>Panel footer</div>
</div>

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

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

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

С таблицами

Вставьте любую таблицу без рамок с классом .table внутрь панели, для создания простого дизайна. Если применяется класс .panel-body, мы добавляем еще границы вверху для разграничения.

Panel heading

Здесь произвольный текст. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- Table -->
  <table>
    ...
  </table>
</div>

Если панель не имеет тела, компоненты переносятся из заголовка панели таблицы корректно.

Panel heading

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>

  <!-- Table -->
  <table>
    ...
  </table>
</div>

Со списком групп

Легко включать список групп в пределы любой панели.

Panel heading

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- List group -->
  <ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>

Основной эффект ячейки

Используйте ячейку, чтобы получить простой эффект — будто внутренний текст находится в оболочке.

<div>...</div>

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

Чтобы контролировать отступы (padding) и закругления углов, используйте два дополнительных модификаторы классов.

Look, I’m in a large well!

<div>...</div>

Look, I’m in a small well!

<div>...</div>

Bootstrap 3 · Иконки, меню, навигация, табы, сообщения предупреждений и др.

Доступные символы

Как использовать

Не смешивайте с другими компонентами

<span></span>

Примеры

<button type="button"><span></span> Star</button>

Пример

<div>
  <button type="button" data-toggle="dropdown">
        Dropdown
        <span></span>
      </button>
  <ul role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другое действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Что-то еще</a></li>
    <li role="presentation"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a></li>
  </ul>
</div>

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

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

.pull-right устаревшее выравнивание

<ul role="menu" aria-labelledby="dLabel">
  ...
</ul>

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

<ul role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation">Название меню</li>
  ...
  <li role="presentation"></li>
  <li role="presentation">Название меню</li>
  ...
</ul>

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

Добавьте .disabled к <li> в выпадающем списке, чтобы отключить ссылку.

<ul role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Обычная ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Заблокированая ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другая ссылка</a></li>
</ul>

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

Основной пример

Оберните серию кнопок с классом .btn класс .btn-group.

Левая
Средняя
Правая

<div>
  <button type="button">Левая</button>
  <button type="button">Средняя</button>
  <button type="button">Правая</button>
</div>

Кнопка панели инструментов

Объедините набор <div> с помощью <div> для более сложных компонентов.

<div role="toolbar">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Изменение размера

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Вложенность

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

<div>
  <button type="button">1</button>
  <button type="button">2</button>

  <div>
    <button type="button" data-toggle="dropdown">
        Dropdown
        <span></span>
      </button>
    <ul>
      <li><a href="#">Dropdown ссылка</a></li>
      <li><a href="#">Dropdown ссылка</a></li>
    </ul>
  </div>
</div>

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

Кнопка
Кнопка

<div>
  ...
</div>

Группа кнопок Justified

Обработка рамок

С

<a> элементами

Просто заключите серию .btns в .btn-group.btn-group-justified.

<div>
  ...
</div>

С

<button> элементами

Левая

Средняя

Правая

<div>
  <div>
    <button type="button">Левая</button>
  </div>
  <div>
    <button type="button">Средняя</button>
  </div>
  <div>
    <button type="button">Правая</button>
  </div>
</div>

Одиночная кнопка выпадающего меню

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

<!-- Single button -->
<div>
  <button type="button" data-toggle="dropdown">Действие <span></span></button>
  <ul role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Расщепленная кнопка выпадающего меню

По умолчанию

Меню с переключением

Primary

Меню с переключением

Success

Меню с переключением

Info

Меню с переключением

Warning

Меню с переключением

Danger

Меню с переключением

<!-- Split button -->
<div>
  <button type="button">Действие</button>
  <button type="button" data-toggle="dropdown">
 <span></span>
 <span>Меню с переключением</span>
 </button>
  <ul role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Изменение размера

Кнопки в выпадающем меню могут иметь любой размер.

<!-- Large button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Большая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

<!-- Small button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Малая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Очень малая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

Вариант списка сверху

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

<div>
  <button type="button">Поднимающееся меню</button>
  <button type="button" data-toggle="dropdown">
 <span></span>
 <span>Меню с переключением</span>
 </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

Кросс-браузерная совместимость

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

Не смешивайте с другими компонентами

Основной пример

Мы не поддерживаем несколько дополнительных компонентов на одной стВместоороне.

Мы не поддерживаем несколько form-control в одной группе ввода.

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <input type="text">
  <span>.00</span>
</div>

<div>
  <span>$</span>
  <input type="text">
  <span>.00</span>
</div>

Изменение размера

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

Дополнение для флажков и переключателей

Поместите любые опции галочек (checkbox) или переключателей в рамках дополнения формы ввода вместо текста.

<div>
  <div>
    <div>
      <span>
        <input type="checkbox">
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <span>
        <input type="radio">
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Дополнение для кнопок

<div>
  <div>
    <div>
      <span>
        <button type="button">Go!</button>
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text">
      <span>
        <button type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <div>
      <div>
        <button type="button" data-toggle="dropdown">Действие <span></span></button>
        <ul>
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то иное</a></li>
          <li></li>
          <li><a href="#">Отдельная ссылка</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text">
      <div>
        <button type="button" data-toggle="dropdown">Действие <span></span></button>
        <ul>
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то иное</a></li>
          <li></li>
          <li><a href="#">Отдельная ссылка</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <!-- Button and dropdown menu -->
  </div>
  <input type="text">
</div>

<div>
  <input type="text">
  <div>
    <!-- Button and dropdown menu -->
  </div>
</div>

Вкладки

Заметьте, что класс .nav-tabs требует базового класса .nav.

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Необходимость в JavaScript-плагине

Для переключения между различными вкладками, вам нужно использовать JavaScript-плагин для вкладок.

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

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

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Навигационные кнопки также доступны в вертикальной сборке. Просто добавьте .nav-stacked.

<ul>
  ...
</ul>

Выравнивание по ширине навигаций

WebKit и адаптивные навигационные меню, выровнены по ширине

<ul>
  ...
</ul>
<ul>
  ...
</ul>

Заблокированные ссылки

Функциональности ссылки не изменны

<ul>
  ...
  <li><a href="#">Заблокированная ссылка</a></li>
  ...
</ul>

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

Создавайте выпадающее меню с небольшим добавлением HTML и JavaScript плагина для выпадающего меню.

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

<ul>
  ...
  <li>
    <a data-toggle="dropdown" href="#">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

Навигационные кнопки с выпадающем меню

<ul>
  ...
  <li>
    <a data-toggle="dropdown" href="#">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

Навигационная панель по умолчанию

Переполнение контента

Уменьшите количество или ширину NavBar пунктов.
Скройте определенные элементы NavBar в определенных размерах экрана с помощью классов адаптивных утилит.
Измените точку, в которой ваши NavBar переключается между свернутым и горизонтальной режимом. Настройте переменную @grid-float-breakpoint или добавmnt свой собственный медиа-запрос.

Необходимость в JavaScript

<nav role="navigation">
  <div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
      <a href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
      <form role="search">
        <div>
          <input type="text" placeholder="Search">
        </div>
        <button type="submit">Отправить</button>
      </form>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Зависимость плагина

Адаптивная навигационная панель в вашей версии Bootstrap требует плагина collapse.

Доступность навигационных панелей

Убедитесь, что добавили role="navigation" в каждой навигационной панели для улучшения их доступности.

Формы

<form role="search">
  <div>
    <input type="text" placeholder="Search">
  </div>
  <button type="submit">Отправить</button>
</form>

Предостережения для мобильных устройств

Всегда добавляйте ярлыки

Кнопки

<button type="button">Войти</button>

Специфическая особенность использования

Текст

Заключите строку текста в элемент с классом .navbar-text, обычно с тегом <p>, для правильного выравнивания и цвета.

<p>Signed in as Mark Otto</p>

Не контекстные ссылки

<p>Signed in as <a href="#">Mark Otto</a></p>

Компонент выравнивания

Фиксация вверху

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

Необходимость установления padding для body

body { padding-top: 70px; }

Убедитесь, что это включено основного Bootstrap CSS.

Фиксация внизу

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

Необходимость установления padding для body

body { padding-bottom: 70px; }

Убедитесь, что это включено основного Bootstrap CSS.

Статический верх

В отличие от классов .navbar-fixed-*, вам не нужно изменять любой padding и body.

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

Инвертированная навигационная панель

Изменить внешний вид панели навигации, добавив .navbar-inverse.

<nav role="navigation">
  ...
</nav>

Установите текущую страницу расположение в пределах навигационной иерархии.

Разделители автоматически добавляются в CSS через :before и content.

<ol>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Библиотека</a></li>
  <li>Данные</li>
</ol>

<ul>
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

Заблокированы и активные состояния

<ul>
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1 <span>(current)</span></a></li>
  ...
</ul>

<ul>
  <li><span>&laquo;</span></li>
  <li><span>1 <span>(current)</span></span></li>
  ...
</ul>

Изменение размера

<ul>...</ul>
<ul>...</ul>
<ul>...</ul>

Основной пример

По умолчанию, листание имеет ссылки, выровненные по-центру.

<ul>
  <li><a href="#">Предыдущая</a></li>
  <li><a href="#">Следующая</a></li>
</ul>

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

В качестве альтернативы, вы можете выравнивать каждую ссылку:

<ul>
  <li><a href="#">&larr; Старая</a></li>
  <li><a href="#">Новая &rarr;</a></li>
</ul>

Заблокирован состояние

Листание ссылок также использует базовый вспомогательный класс .disabled.

<ul>
  <li><a href="#">&larr; Старая</a></li>
  <li><a href="#">Новая &rarr;</a></li>
</ul>

Пример

Пример заголовка Новый

<h4>Пример заголовка <span>Новый</span></h4>

Доступные варианты

Добавте любой из перечисленных ниже модификаторов классов, чтобы изменить внешний вид меткии.

Default
Primary
Success
Info
Warning
Danger

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Легко подсветить новые или непрочитанные записи добавив к ссылкам <span>, Bootstrap навигацию, и другое.

<a href="#">Inbox <span>42</span></a>

Самосвертывание

Кросс-браузерная совместимость

Значки не будут самозгортатись в Internet Explorer 8, потому что ему не хватает поддержки селектора :empty.

Адаптация под активные состояния

<ul>
  <li>
        <a href="#">
          <span>42</span>
          Главная
     </a>
        </li>
  ...
</ul>

Узнать больше

<div>
  <h2>Привет, мир!</h2>
  <p>...</p>
  <p><a role="button">Узнать больше</a></p>
</div>

<div>
  <div>
    ...
  </div>
</div>

<div>
  <h2>Пример заголовка страницы <small>Дополнительный текст</small></h2>
</div>

Основной пример

<div>
  <div>
    <a href="#">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Настраиваемое содержимое

Ярлык эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопка Кнопка

Ярлык эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопка Кнопка

Ярлык эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопка Кнопка

<div>
  <div>
    <div>
      <img data-src="holder.js/300x200" alt="...">
      <div>
        <h4>Ярлык эскиза</h4>
        <p>...</p>
        <p><a href="#" role="button">Кнопка</a> <a href="#" role="button">Кнопка</a></p>
      </div>
    </div>
  </div>
</div>

Примеры

Без класса по умолчанию

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Warning! Better check yourself, you’re not looking too good.

Oh snap! Change a few things up and try submitting again.

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Замечания, которые можно закрыть

Создавайте любые замечания добавив необязательные .alert-dismissable и кнопку закрытия.

×
Warning! Better check yourself, you’re not looking too good.

<div>
  <button type="button" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Обеспечьте правильное поведение на всех устройствах

Убедитесь, что используете элемент <button> с атрибутом data-dismiss="alert".

Ссылки в замечаниях

<div>
  <a href="#">...</a>
</div>
<div>
  <a href="#">...</a>
</div>
<div>
  <a href="#">...</a>
</div>
<div>
  <a href="#">...</a>
</div>

Кросс-браузерная совместимость

Основной пример

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

<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete</span>
  </div>
</div>

С меткой

<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

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

<div>
  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <span>40% Complete (success)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <span>20% Complete</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete (warning)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <span>80% Complete</span>
  </div>
</div>

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

Используйте градиент для создания полосатого эффекта. Это является недоступным в IE8.

<div>
  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <span>40% Complete (success)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <span>20% Complete</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete (warning)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <span>80% Complete (danger)</span>
  </div>
</div>

Индикатор с анимацией

Добавьте .active — .progress-striped для анимации левой или правой полосатости. Это является недоступным в IE9 и ниже.

<div>
  <div  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    <span>45% Complete</span>
  </div>
</div>

Сводный индикатор

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

<div>
  <div>
    <span>35% Complete (success)</span>
  </div>
  <div>
    <span>20% Complete (warning)</span>
  </div>
  <div>
    <span>10% Complete (danger)</span>
  </div>
</div>

По умолчанию

<div>
  <a href="#">
    <img src="..." alt="...">
  </a>
  <div>
    <h5>Заголовок медиа</h5>
    ...
  </div>
</div>

Список медиа

<ul>
  <li>
    <a href="#">
      <img src="..." alt="...">
    </a>
    <div>
      <h5>Заголовок медиа</h5>
      ...
    </div>
  </li>
</ul>

Основной пример

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Значки

14
Cras justo odio
2
Dapibus ac facilisis in
1
Morbi leo risus

<ul>
  <li>
        <span>14</span>
        Cras justo odio
      </li>
</ul>

Связанные элементы

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

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

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

<ul>
  <li>Dapibus ac facilisis in</li>
  <li>Cras sit amet nibh libero</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>
<div>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Cras sit amet nibh libero</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Настраиваемое содержимое

Добавляйте практически любой HTML, даже для связанного списка групп, как показано ниже.

<div>
  <a href="#">
    <h5>Заголовок пункта списка группы</h5>
    <p>...</p>
  </a>
</div>

Основной пример

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

<div>
  <div>
    Basic panel example
  </div>
</div>

Панель с заголовком

Panel heading without title

Panel content

Название панели

Panel content

<div>
  <div>Panel heading without title</div>
  <div>
    Panel content
  </div>
</div>

<div>
  <div>
    <h4>Название панели</h4>
  </div>
  <div>
    Panel content
  </div>
</div>

<div>
  <div>
    Panel content
  </div>
  <div>Panel footer</div>
</div>

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

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

С таблицами

Panel heading

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- Table -->
  <table>
    ...
  </table>
</div>

Если панель не имеет тела, компоненты переносятся из заголовка панели таблицы корректно.

Panel heading

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>

  <!-- Table -->
  <table>
    ...
  </table>
</div>

Со списком групп

Легко включать список групп в пределы любой панели.

Panel heading

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- List group -->
  <ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>

Основной эффект ячейки

Используйте ячейку, чтобы получить простой эффект — будто внутренний текст находится в оболочке.

<div>...</div>

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

Look, I’m in a large well!

<div>...</div>

Look, I’m in a small well!

<div>...</div>

выравнивание по вертикали с Bootstrap 3

Гибкая компоновка коробки

С появлением CSS Flexible Box многие кошмары веб-дизайнеров ¹ были разрешены. Один из самых хакерских, вертикальное выравнивание. Теперь это возможно даже на неизвестных высотах .

«Два десятилетия взлома макетов подходят к концу. Может быть, не завтра, но скоро и на всю оставшуюся жизнь».
— Легендарный CSS Эрик Мейер на W3Conf 2013

Flexible Box (или вкратце Flexbox) — это новая система макетов, специально разработанная для макетов. В спецификации говорится :

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

Как это может помочь в этом случае? Ну что ж, посмотрим.

Используя Twitter Bootstrap, у нас есть .rowнесколько .col-*s. Все, что нам нужно сделать, — это отобразить желаемое значение .row² в виде поля гибкого контейнера, а затем выровнять все его гибкие элементы (столбцы) по align-itemsсвойствам по вертикали .

ПРИМЕР ЗДЕСЬ (Пожалуйста, внимательно прочитайте комментарии)

<div>
    <div> <!--
                    ^--  Additional class -->
        <div> ... </div>
        <div> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

Выход

Цветная область отображает отступы столбцов.

Уточнение по

align-items: center

8.3 Выравнивание по оси: align-itemsсвойство
Элементы Flex могут быть выровнены по поперечной оси текущей линии контейнера Flex, аналогично, justify-contentно в перпендикулярном направлении. align-itemsустанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные элементы flex .
align-items: center;
По значению центра поле поля гибкого элемента центрируется по поперечной оси в пределах линии.

Большая тревога

Важное примечание № 1: Twitter Bootstrap не определяет widthстолбцы столбцов на очень маленьких устройствах, если вы не назначите один из .col-xs-#классов столбцам.

Поэтому в этой конкретной демонстрации я использовал .col-xs-*классы для правильного отображения столбцов в мобильном режиме, поскольку он widthявно указывает столбец.

Но в качестве альтернативы вы можете отключить макет Flexbox, просто переключившись display: flex;на display: block;экран определенного размера. Например:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Или вы можете указать .vertical-align только для определенных размеров экрана, например, так:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

В этом случае, я бы с @KevinNelson «s подход .

Важное примечание № 2: префиксы поставщиков опущены из-за краткости. Синтаксис Flexbox был изменен в течение времени. Новый письменный синтаксис не будет работать в старых версиях веб-браузеров (но не такой старый, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).

Это означает, что вы также должны использовать свойства с префиксом поставщика, такие как display: -webkit-boxи так далее, в рабочем режиме.

Если вы нажмете «Toggle Compiled View» в демоверсии , вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer ).

Как вы видели в предыдущей демонстрации , столбцы (элементы flex) больше не так высоки, как их контейнер (коробка flex-контейнера..row Элемент).

Это из-за использования centerзначения для align-itemsсвойства. Значение по умолчанию — stretchэлементы могут заполнить всю высоту родительского элемента.=»col-«],
.vertical-align > [class*=» col-«] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}

Выход

Цветная область отображает отступы столбцов.

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

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

^{1. Вертикально выровняйте изображение внутри div с отзывчивой высотой.}^{2. Лучше использовать дополнительный класс, чтобы не изменять настройку Twitter Bootstrap по умолчанию .row.}

Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Всем привет!
В сегодняшнем уроке я расскажу, как отобразить нужные или скрыть ненужные элементы (блоки <div>, картинки, текст и т.д.) в зависимости от размера экрана или же от дисплея пользователя.
Я частенько пользуюсь скрытием блоков для мобильных устройств, так как не всегда они нужны для мобильных версий сайта.

В Bootstrap 3 есть специальные классы, с помощью которых можно скрыть или отобразить элемент.

Отображение элементов

Класс	Описание
visible-xs	Делает элемент видимым только на устройствах с очень маленьким экраном, у которых ширина экрана меньше 768px. На других устройствах эти элементы не видимы.
visible-sm	Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше чем 992px. На других устройствах эти элементы не видимы.
visible-md	Делает элемент видимым лишь на устройствах, имеющих экран шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы не видимы.
visible-lg	Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы не видимы.

Пример:


<p>
этот текст виден только на смартфонах.
</p>
<p>
этот текст виден только на планшетах.
</p>
<p>
этот текст виден только на устройствах со средним размером экрана.
</p>
<p>
этот текст виден только на устройствах с большим экраном.
</p>

Скрытие элементов

Класс	Описание
hidden-xs	Скрыть эти элементы только для устройств, имеющих экран шириной менее 768px. На других устройствах эти элементы видимы.
hidden-sm	Скрыть эти элементы только для устройств, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше 992px. На других устройствах эти элементы видимы.
hidden-md	Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы видимы.
hidden-lg	Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы видимы.

Пример:


<p>
Этот текст будет виден только на смартфонах.
</p>
<p>
Этот текст будет виден только на планшетах.
</p>
<p>
Этот текст будет виден только на устройствах со средним размером экрана.
</p>
<p>
Этот текст будет виден только на устройствах с большим экраном.
</p>

Скрытие и отображение элементов для печати

Класс	Описание
visible-print	Позволяет скрыть отображение блочного элемента в браузере. При печати этот элемент будет виден.
hidden-print	Скрыть элемент при печати страницы. При отображении в браузере этот элемент будет виден.

Пример:


<p>
Этот текст будет виден только для печати.
</p>
<p>
Этот текст будет виден только в браузере, а для печати будет скрыт.
</p>

Попробуйте. Я думаю, вы частенько будете пользоваться этой фишкой.
Удачи, жду на следующих уроках.

Для шпаргалки можете сохранить вот эту картинку себе:

Изображение можно увеличить

Предыдущая запись
Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
Следующая запись
Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

**css — В чем разница между col-lg- , col-md- и col-sm- * в Bootstrap?**

В чем разница между col-lg-*, col-md-* и col-sm-* в Twitter Bootstrap?

568

StreetCoder

8 Ноя 2013 в 21:34

11 ответов

Лучший ответ

Обновлено 2020 …

Бутстрап 5

В Bootstrap 5 (альфа) добавлен новый размер -xxl-:

col-* — 0 (хз)
col-sm-* — 576 пикселей
col-md-* — 768 пикселей
col-lg-* — 992 пикс.
col-xl-* — 1200 пикселей
col-xxl-* — 1400 пикселей

Демо-версия Bootstrap 5 Grid

Бутстрап 4

В Bootstrap 4 есть новый размер -xl-, см. эту демонстрацию . Также был удален инфикс -xs- , поэтому самые маленькие столбцы — это просто col-1, col-2 .. col-12 и т. Д.

col-* — 0 (хз)
col-sm-* — 576 пикселей
col-md-* — 768 пикселей
col-lg-* — 992 пикс.
col-xl-* — 1200 пикселей

Демо Bootstrap 4 Grid

Кроме того, Bootstrap 4 включает новые столбцы с автоматической компоновкой. Они также имеют чувствительные точки останова (col, col-sm, col-md и т. Д.), Но не имеют определенной ширины%. Таким образом, столбцы с автоматической компоновкой заполняют строку одинаковой ширины .

Бутстрап 3

Сетка Bootstrap 3 состоит из 4 уровня (или «точек останова») …

Очень маленький (для смартфонов .col-xs-*)
Маленький (для планшетов .col-sm-*)
Средний (для ноутбуков .col-md-*)
Большой (для ноутбуков / настольных компьютеров .col-lg-*).

Эти размеры сетки позволяют управлять поведением сетки при разной ширине. Различные уровни управляются медиа-запросами CSS.

Итак, в сетке из 12 столбцов Bootstrap …

col-sm-3 — это 3 из 12 столбцов (25%) при типичной маленькой ширине устройства (> 768 пикселей).

col-md-3 — это 3 из 12 столбцов (25%) при типичной средней ширине устройства (> 992 пикселя).

Меньший уровень (xs, sm или md) также определяет размер для большей ширины экрана . Итак, для столбца одинакового размера на всех уровнях просто установите ширину для наименьшего окна просмотра …

<div>..</div> то же самое, что,

<div>..</div>

Подразумеваются более крупные уровни. Потому что col-sm-3 означает 3 units on sm-and-up, если специально не переопределено более крупным уровнем, который использует другой размер.

xs (по умолчанию)> переопределено на sm> переопределено на md> переопределено на lg

Объедините классы, чтобы изменить ширину столбцов на различных размерах сетки . Это создает адаптивный макет.

<div>..</div>

Сетки sm, md и lg будут «складываться» по вертикали на экранах / окнах просмотра менее 768 пикселей. Вот где подходит сетка xs. Столбцы, использующие классы col-xs-*, не будут не складываться по вертикали и будут продолжать уменьшаться на самых маленьких экранах.

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

В этой статье объясняется подробнее о том, как сетка Bootstrap

556

Zim
16 Июл 2020 в 12:05

Ну, он используется, чтобы указать начальной загрузке, сколько столбцов должно быть размещено в строке в зависимости от размера экрана —

col-xs-2

Будет отображать только 2 столбца в строке на очень маленьком (xs) экране, так же, как sm определяет маленький экран, md (средний размер), lg (большой размер), но в соответствии с первым правилом начальной загрузки меньшего размера, если вы упомянули

xs-col-2 md-col-4

Тогда в каждой строке будут отображаться 2 столбца для размеров экрана от xs до sm (включительно) и изменятся, когда он станет следующего размера, то есть для md до lg (в комплекте), для лучшего понимания размеров экрана попробуйте запустить их в различных режимах экрана в режим разработчика Chrome (ctr + shift + i) и попробуйте различные пиксели или устройства

-1

Nemo Holmes
11 Дек 2017 в 18:32

Думаю, это изображение очень хорошо подходит для лучшего понимания концепции!

для получения более подробной информации перейдите по ссылке ниже:

https://getbootstrap.com/docs/3.4/css/

Purvi Barot
24 Дек 2019 в 04:46

Один конкретный случай: перед изучением системы сеток начальной загрузки убедитесь, что масштаб браузера установлен на 100% (сто процентов). Например: если разрешение экрана (1600 x 900 пикселей) и масштаб браузера 175%, то элементы bootstrap-ped будут сложены.

HTML

<div>
    <div>
        <div>class="col-lg-4"</div>
        <div>class="col-lg-4"</div>
    </div>
</div>

Масштабирование Chrome 100%

Браузер 100 процентов — элементы размещены горизонтально

Увеличение в Chrome 175%

Браузер 175 процентов — составные элементы

Ted
18 Окт 2017 в 14:48

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up

Varun Jain
6 Апр 2017 в 06:26

TL; DR

.col-X-Y означает на экране размером X и выше , растянуть этот элемент, чтобы заполнить столбцы Y .

Bootstrap предоставляет сетку из 12 столбцов на .row, поэтому Y = 3 означает ширину = 25%.

xs, sm, md, lg — размеры для смартфона, планшета, ноутбука и настольного компьютера соответственно.

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

Пример

<div>

Значение: 50% ширины на настольных компьютерах, 100% ширины на мобильных устройствах, планшетах и ноутбуках.

Alex R
11 Мар 2018 в 19:34

Размеры устройства и префикс класса:

Очень маленькие устройства Телефоны (.col-xs-
Маленькие устройства Планшеты (≥768 пикселей) — .col-sm-
Средние устройства Настольные компьютеры (≥992 пикселей) — .col-md-
Большие устройства Настольные компьютеры (≥1200 пикселей) — .col-lg-

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

Ссылка: Система сеток

Community
20 Июн 2020 в 09:12

Давайте упростим Bootstrap!

Обратите внимание на то, что col-sm занимает 100% ширины (другими словами, переходит в новую строку) ниже 576px, а col — нет. Вы можете заметить текущую ширину в центре вверху gif.

Вот код:

<div>
    <div>
        <div>col</div>
        <div>col</div>
        <div>col</div>
    </div>
    <div>
        <div>col-sm</div>
        <div>col-sm</div>
        <div>col-sm</div>
    </div>
</div>

Bootstrap по умолчанию выравнивает все столбцы (столбец) в одной строке с одинаковой шириной. В этом случае три col будут занимать 100% / 3 ширины каждый, независимо от размера экрана. Вы можете заметить это в gif.

А что, если мы хотим отображать только один столбец в строке, т.е. дать 100% ширину каждому столбцу, но только для небольших экранов ? Теперь идут классы col-xx!

Я использовал col-sm, потому что хотел разбить столбцы на отдельные строки ниже 576 пикселей. Эти 4 класса col-xx предоставляются Bootstrap для различных устройств отображения, таких как мобильные телефоны, планшеты, ноутбуки, большие мониторы и т. Д.

Таким образом, col-sm сломается ниже 576 пикселей, col-md сломается ниже 768 пикселей, col-lg сломается ниже 992 пикселей и col-xl сломается ниже 1200 пикселей

Обратите внимание, что в начальной загрузке 4 нет класса col-xs.

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

Но это еще не все. Теперь идет col-* и col-xx-* для настройки ширины.

Помните, что в приведенном выше примере я упоминал, что col или col-xx имеют одинаковую ширину в строке. Так что, если мы хотим придать больше ширины определенному col, мы можем это сделать.

Строка начальной загрузки разделена на 12 частей, поэтому в приведенном выше примере их было 3 col, поэтому каждая занимает 12/3 = 4 части. Вы можете рассматривать эти детали как способ измерения ширины.

Мы также могли бы записать это в формате col-*, то есть col-4 следующим образом:

<div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

И это не имело бы никакого значения, потому что по умолчанию бутстрап дает равную ширину col (4 + 4 + 4 = 12).

Но что, если мы хотим отдать 7 частей 1-му col, 3 части 2-му col и оставшиеся 2 части (12-7-3 = 2) 3-му col (7+ 3 + 2, итого 12), мы можем просто сделать это:

<div>
  <div>col-7</div>
  <div>col-3</div>
  <div>col-2</div>
</div>

И вы также можете настроить ширину классов col-xx-*.

<div>
    <div>col-sm-7</div>
    <div>col-sm-3</div>
    <div>col-sm-2</div>
</div>

Как это выглядит в действии?

Что, если сумма col больше 12? Затем col сместится / переместится на линию ниже. Да, в строке может быть любое количество столбцов!

<div>
        <div>col-12</div>
        <div>col-9</div>
        <div>col-6</div>
        <div>col-6</div>
    </div>

Что, если нам нужно 3 столбца подряд для больших экранов, но разделить эти столбцы на 2 строки для маленьких экранов?

<div>
    <div>col-12 col-sm TOP</div>
    <div>col col-sm</div>
    <div>col col-sm</div>
</div>

Вы можете поиграть здесь: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Community
20 Июн 2020 в 09:12

Я думаю, что сбивает с толку тот факт, что BootStrap 3 — это система, реагирующая сначала на мобильные устройства, и не может объяснить, как это влияет на иерархию col-xx-n в этой части документации Bootstrap. Это заставляет задуматься о том, что происходит на небольших устройствах, если вы выбираете значение для более крупных устройств, и заставляет задуматься, есть ли необходимость указывать несколько значений. (Вы не делаете)

Я бы попытался прояснить это, заявив, что … Более низкие типы зерна (xs, sm) пытаются сохранить внешний вид макета на меньших экранах, а большие типы (md, lg) будут правильно отображаться только на больших экранах, но будут переносить столбцы на меньших устройствах. Значения, приведенные в предыдущих примерах, относятся к порогу, при котором начальная загрузка ухудшает внешний вид, чтобы соответствовать доступному пространству экрана.

На практике это означает, что если вы сделаете столбцы col-xs-n, они сохранят правильный внешний вид даже на очень маленьких экранах, пока размер окна не упадет до такого ограничительного размера, что страница не может отображаться правильно. Это должно означать, что устройства с шириной 768 пикселей или меньше должны отображать вашу таблицу в том виде, в котором вы ее создали, а не в деградированном виде (одиночный или обернутый столбец). Очевидно, это все еще зависит от содержимого столбцов, и в этом все дело. Если страница пытается отобразить несколько столбцов с большими данными, бок о бок на маленьком экране, то эти столбцы, естественно, будут выглядеть ужасно, если вы не учли это. Следовательно, в зависимости от данных в столбцах вы можете решить, в какой момент макет будет изменен для адекватного отображения содержимого.

Например Если ваша страница содержит три столбца col-sm-n, начальная загрузка будет переносить столбцы в строки, когда ширина страницы упадет ниже 992 пикселей. Это означает, что данные все еще видны, но для их просмотра потребуется вертикальная прокрутка. Если вы не хотите, чтобы ваш макет ухудшался, выберите xs (при условии, что ваши данные могут адекватно отображаться на устройстве с более низким разрешением в трех столбцах)

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

Если вы выберете col-lg-n, столбцы будут отображаться правильно, пока ширина экрана не упадет ниже порогового значения xs в 1200 пикселей.

David Bridge
9 Фев 2015 в 17:59

Из документации Twitter Bootstrap:

маленькая сетка (≥ 768 пикселей) = .col-sm-*,
средняя сетка (≥ 992 пикселей) = .col-md-*,
большая сетка (≥ 1200 пикселей) = .col-lg-*.

trejder
24 Июн 2015 в 09:22

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

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

Например, если вы начинаете со столбцов: A B C

Вы сами решаете, когда они должны складываться следующим образом:

Если вы выберете col-lg, тогда столбцы будут складываться, когда ширина

Если вы выберете col-md, тогда столбцы будут складываться, когда ширина будет

Если вы выберете col-sm, тогда столбцы будут складываться, когда ширина будет

Если вы выберете col-xs, то столбцы никогда не будут складываться.

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

Если вы выберете col-sm, то столбцы станут горизонтальными при ширине> = 768 пикселей.

Если вы выберете col-md, то столбцы станут горизонтальными, если ширина> = 992px.

Если вы выберете col-lg, столбцы станут горизонтальными при ширине> = 1200 пикселей.

271

ryanman
22 Фев 2015 в 03:00

Создание сетки «col-md-число» В Bootstrap 3 и Bootstrap 4

Сетка Bootstrap состоит из 12 колонок, все колонки имеют одинаковую ширину.

Колонки можно объединять по несколько штук и размещать их в нужной позиции.
Чтоб объединить колонки, нужно указать класс «col-md-число«, число соответствует количеству колонок, которые объединяем.

Html
<html>

     <!— заголовок —>

     <head>

          <meta charset=»utf-8″>

          <title>Example</title>

<!— страница —>

<body>

<!— подключить библиотеку jQuery —>

<script src=»https://dir.by/example_lib/jquery/jquery-3.3.1.min.js»></script>

          <!— подключить библиотеку Bootstrap (js файл) —>

          <script src=»https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js»></script>



          <!— подключить библиотеку Bootstrap (css файл) —>

          <link rel=»stylesheet» href=»https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css»>



          <!— HTML элементы —>

          <div>



               1-ый ряд

               <div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

                    <div> 1ячейка </div>

               </div>

               2-ой ряд

               <div>

                    <div> 2 ячеек</div>

                    <div> 10 ячеек</div>

               </div>

               3-ий ряд

               <div>

                    <div> 3 ячеек</div>

                    <div> 9 ячеек</div>

               </div>

               4-ый ряд

               <div>

                    <div> 4 ячеек</div>

                    <div> 8 ячеек</div>

               </div>

               5-ый ряд

               <div>

                    <div> 5 ячеек</div>

                    <div> 8 ячеек</div>

               </div>



               6-ой ряд

               <div>

                    <div> 6 ячеек</div>

                    <div> 6 ячеек</div>

               </div>



               7-ой ряд

               <div>

                    <div> 4 ячеек</div>

                    <div> 4 ячеек</div>

                    <div> 4 ячеек</div>

               </div>



               8-ой ряд

               <div>

                    <div> 12 ячеек</div>

               </div>



          </div>

</body>

</html>

370+ Большой набор Bootstrap элементов на сайт

# Разработка 12 Сентября 2020Комментариев: 10

Здесь мы собрали большой набор готовых элементов для bootstrap 3 и bootstrap 4, включающий в себя более 370 готовых решений, которые подойдут каждому. Скачав и разместив код того или иного элемента на своём сайте, можно сэкономить реально кучу времени, не собирая ничего с нуля.

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

Эта сборка bootstrap элементов включает следующий функционал

Виджеты bootstrap
Чарты, статистики, граффики bootstrap
Навигация bootstrap
Оформление для личного кабинета bootstrap
Готовые якоря bootstrap для landing page
Toggle меню bootstrap
Мобильное меню bootstrap
Оформление карточки товаров bootstrap
Фотогалерея bootstrap
Оформление статей для блога
bootstrap инфографика
Резюме на базе bootstrap
Форма логин-пароль для bootstrap
Форма регистрации на сайте bootstrap
Иконки bootstrap
Блок поделиться в соц сетях
Интересные анимации и различные переходы
Кнопка меню гамбургер, открывающая целый блок
Табы bootstrap
Галерея изображений с переворотом фото к описанию
Адаптивная bootstrap таблица
Карточка с ценами для сайта
Плавно всплывающие блоки с описанием
Статусы посещений и различной статистикой
Дизайн блоки чтобы сайт выглядел более современно
bootstrap календарь событий
bootstrap меню с бесконечным списком пунктов
Блок наша команда с анимациями и описаниями
Красивые адабптивные виджеты соцсетей bootstrap
Красиво оформленные текстовые блоки
Тени box-shadow bootstrap

Виджет погоды
Свадебные приглашения
Граффики для фондовых бирж
Списки множественного выбора bootstrap
Функция уведомлений на сайте
Текстовый редактор на bootstrap
bootstrap эмулятор смартфона
Оформление страницы с ценами сайта
Функциональная корзина, с возможностью редактирования количества товаров
Табы навигации bootstrap
Различные кнопки для сайта button
Загрузчик файлов на сервер bootstrap
Различные выпадающие меню dropdown-menu
Прогресс бар bootstrap
Виджет поста на сайт
Таймлайн для описания деятельности по месяцам/годам
Фильтр товаров на bootstrap
Кнопка отправить на печать bootstrap
Факты о нас в цифрах
Адаптивная таблица сравнения товаров
Формы обратной связи для сайта
Установка рейтинга для чего либо на bootstrap
Форма заполнения для кредитных карт
Планировщик задач на bootstrap
Оформление и дизайн купонов
Тема продажи приложений
Блок отзывов на сайте
Блок отзывов каруселью для сайта
Записи для оформления блога
Виджет музыкального плеера bootstrap
Галерея с возможностью открыть фото во весь экран
Красивое разделение блоков dividers

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

Скачать

Вот собственно и все! будем надеяться что данный набор элементов и графики сильно поможет вам в быстрой разработке ваших сайтов на bootstrap

компонентов · Bootstrap 3.0.3 Documentation

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

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню внутри .dropdown или другого элемента, который объявляет position: relative; . Затем добавьте HTML-код меню.

  
  
  
      Действие  
      Другое действие  
      Здесь еще кое-что  
     
      Отдельная ссылка

Варианты центровки

Добавьте .потяните вправо с на . dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.

...

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

  
   Раскрывающийся заголовок 
  ...
   
   Раскрывающийся заголовок 
  ...

Отключенные пункты меню

Добавьте .disabled к

в раскрывающемся списке, чтобы отключить ссылку.
Обычная ссылка Отключенная ссылка Другая ссылка
Сгруппируйте серию кнопок в одну строку с помощью группы кнопок.Добавьте необязательное поведение переключателя JavaScript и стиля флажка с помощью нашего плагина кнопок.
Всплывающие подсказки и всплывающие окна в группах кнопок требуют специальной настройки
При использовании всплывающих подсказок или всплывающих окон для элементов в пределах .btn-group вам необходимо указать опцию container: 'body' , чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря округления углы при срабатывании всплывающей подсказки или всплывающего окна).
Базовый пример
Оберните серию кнопок .btn в .btn-group .

Панель инструментов кнопки
Объедините наборы
в
для более сложных компонентов.
... ... ...
Калибровка
Вместо применения классов размеров кнопок к каждой кнопке в группе просто добавьте .btn-group- * к .btn-group .
... ... ... ...
Вложенность
Поместите .btn-group в другую .btn-group , если вы хотите, чтобы выпадающие меню были смешаны с рядом кнопок.
Раскрывающаяся ссылка Раскрывающаяся ссылка
Вертикальное отклонение
Обеспечивает отображение набора кнопок вертикально, а не горизонтально.
Кнопка
Кнопка
Кнопка
Кнопка
...
Вариант согласованного звена
Сделайте так, чтобы группа кнопок растянулась с одинаковым размером, чтобы охватить всю ширину ее родительского элемента. Также работает с раскрывающимися списками кнопок в группе кнопок.
Использование для конкретных элементов
Это работает только с элементами , поскольку
Действие Другое действие Здесь еще кое-что Отдельная ссылка

Раскрывающееся меню с разделенными кнопками
Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками с теми же изменениями разметки, только с отдельной кнопкой.
Действие Другое действие Здесь еще кое-что Отдельная ссылка
Калибровка
Выпадающие кнопки работают с кнопками любого размера.
... ... ...
Вариант Dropup
Активируйте раскрывающееся меню над элементами, добавив .dropup к родительскому элементу.

Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового ввода.Используйте .input-group с .input-group-addon для добавления или добавления элементов к .form-control .
Кроссбраузерность
Избегайте использования здесь элементов
0,00 $ .00
Калибр
Добавьте классы относительного размера формы в .input-group. , и содержимое внутри автоматически изменит размер — нет необходимости повторять классы размеров элемента управления формы для каждого элемента.
@ @ @
Флажки и радио-надстройки
Поместите любой флажок или переключатель в аддон группы ввода вместо текста.

Дополнения для кнопок
Кнопки в группах ввода немного отличаются и требуют одного дополнительного уровня вложенности. Вместо .input-group-addon вам нужно будет использовать .input-group-btn для переноса кнопок. Это необходимо из-за стилей браузера по умолчанию, которые нельзя переопределить.

Кнопки с выпадающими списками
Действие Другое действие Здесь еще кое-что Отдельная ссылка Действие Другое действие Здесь еще кое-что Отдельная ссылка
Сегментированные кнопки

Nav, доступные в Bootstrap, имеют общую разметку, начиная с базового класса .nav , а также общие состояния.Поменяйте местами классы модификаторов для переключения между стилями.
Вкладки
Обратите внимание, что для класса .nav-tabs требуется базовый класс .nav .
На главную Профиль Сообщения
Таблетки
Возьмите тот же HTML, но используйте вместо него .nav-pills :
На главную Профиль Сообщения
Таблетки также можно штабелировать вертикально.Просто добавьте .nav-stacked .
...
Обосновано
Легко делайте вкладки или таблетки равной ширине родительской на экранах шире 768 пикселей с . с выравниванием по nav. На экранах меньшего размера навигационные ссылки складываются.
Safari и адаптивная оправданная навигация
Safari обнаруживает ошибку, при которой изменение размера вашего браузера по горизонтали вызывает ошибки рендеринга в выровненной навигации, которые очищаются при обновлении.Эта ошибка также проявляется в примере обоснованной навигации.
... ...
Отключенные ссылки
Для любого компонента навигации (вкладки, таблетки или список) добавьте .disabled для серых ссылок и отсутствия эффектов наведения .
Не влияет на функциональность связи
Этот класс изменяет только внешний вид , но не его функциональные возможности. Используйте собственный JavaScript, чтобы отключить ссылки здесь.
... Отключенная ссылка ...
Использование раскрывающихся списков
Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript.
Вкладки с раскрывающимися списками
... Раскрывающееся меню ... ...
Таблетки с выпадающими списками
... Раскрывающееся меню ... ...
Панель навигации по умолчанию
Панели навигации — это адаптивные мета-компоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.
Настроить точку схлопывания
В зависимости от содержимого на панели навигации вам может потребоваться изменить точку, в которой панель навигации переключается между свернутым и горизонтальным режимами. Настройте переменную @ grid-float-breakpoint или добавьте свой собственный медиа-запрос.
Требуется JavaScript
Если JavaScript отключен, а область просмотра достаточно узкая, чтобы сворачивать панель навигации, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах .Навбар-развал .
Бренд Ссылка Ссылка Раскрывающийся список Действие Другое действие Здесь еще кое-что Отдельная ссылка Еще одна отдельная ссылка Ссылка Раскрывающийся список Действие Другое действие Здесь еще кое-что Отдельная ссылка
Зависимость плагина
Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания.
Сделать доступными панели навигации
Не забудьте добавить role = "navigation" на каждую панель навигации, чтобы облегчить доступ.
Формы
Поместите содержимое формы в .navbar-form для правильного вертикального выравнивания и свертывания в узких окнах просмотра.Используйте параметры выравнивания, чтобы решить, где он находится в содержимом панели навигации.
Напомним, что .navbar-form разделяет большую часть своего кода с .form-inline через mixin.

Всегда добавлять ярлыки
Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода.Для этих встроенных форм навигационной панели вы можете скрыть метки с помощью класса .sr-only .
Пуговицы
Добавьте класс .navbar-btn к
Использование в зависимости от контекста
Как и стандартные классы кнопок, .navbar-btn можно использовать с элементами и . Однако ни .navbar-btn , ни стандартные классы кнопок не должны использоваться в элементах внутри .navbar-nav .
Текст
Обернуть строки текста в элемент с .navbar-text , обычно в тег
для правильного интерлиньяжа и цвета.
Вы вошли как Марк Отто
Не навигационные ссылки
Для людей, использующих стандартные ссылки, которые не входят в стандартный компонент навигации навигационной панели, используйте .navbar-link , чтобы добавить правильные цвета для параметров по умолчанию и инвертированных параметров навигационной панели.
Вы вошли как Марк Отто
Выравнивание компонентов
Выровняйте навигационные ссылки, формы, кнопки или текст с помощью служебных классов .navbar-left или .navbar-right . Оба класса добавят поплавок CSS в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их в отдельный
с применением соответствующего служебного класса.
Эти классы представляют собой смешанные версии .pull-left и .pull-right , но они ограничены медиа-запросами для упрощения работы с компонентами навигационной панели для устройств разных размеров.
Зафиксировано наверху
Добавьте .navbar-fixed-top .
...
Требуется обивка корпуса
Фиксированная панель навигации будет перекрывать другой ваш контент, если вы не добавите padding вверху .Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом. Совет: по умолчанию высота панели навигации составляет 50 пикселей.
body {padding-top: 70px; }
Не забудьте включить этот после в основной CSS Bootstrap.
Крепится к дну
Вместо этого добавьте .navbar-fixed-bottom .
...
Требуется обивка корпуса
Фиксированная панель навигации будет перекрывать другой ваш контент, если вы не добавите padding в нижнюю часть .Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом. Совет: по умолчанию высота панели навигации составляет 50 пикселей.
body {padding-bottom: 70px; }
Не забудьте включить этот после в основной CSS Bootstrap.
Статический верх
Создайте полноразмерную навигационную панель, которая прокручивается вместе со страницей, добавив .navbar-static-top . В отличие от классов .navbar-fixed- * , вам не нужно изменять какие-либо отступы в body .
...
Перевернутая панель навигации
Измените внешний вид навигационной панели, добавив .navbar-inverse .
...
Указывает расположение текущей страницы в иерархии навигации.
Разделители автоматически добавляются в CSS через : до и , содержимое .
На главную Библиотека Данные
Обеспечьте ссылки для разбивки на страницы для вашего сайта или приложения с помощью компонента многостраничной разбивки на страницы или более простой альтернативы пейджеру.
Простая разбивка на страницы, вдохновленная Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно пропустить, он легко масштабируется и обеспечивает большие области щелчка.
& laquo; 1 2 3 4 5 & raquo;
Отключенное и активное состояния
Ссылки настраиваются в зависимости от обстоятельств.Используйте .disabled для неактивных ссылок и .active для обозначения текущей страницы.
& laquo; 1 (текущий) ...
При желании можно заменить активные или отключенные якоря на , чтобы удалить функцию щелчка при сохранении заданных стилей.
& laquo; 1 (текущий) ...
Калибровка
Хотите больше или меньше нумерации страниц? Добавьте .pagination-lg или .pagination-sm для дополнительных размеров.
... ... ...
Быстрые предыдущие и следующие ссылки для простых реализаций разбивки на страницы с легкой разметкой и стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы.
Пример по умолчанию
По умолчанию ссылки в центре пейджера.
Предыдущий Далее
Выровненные звенья
Как вариант, вы можете выровнять каждую ссылку по сторонам:
& larr; Раньше Новее & rarr;
Дополнительное отключенное состояние
Ссылки на пейджер также используют общий .отключил служебный класс из нумерации страниц.
& larr; Раньше Новее & rarr;
Пример
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка New
Доступные варианты
Добавьте любой из нижеперечисленных классов модификаторов, чтобы изменить внешний вид метки.
Дефолт
Начальный
Успех
Информация
Предупреждение
Опасность
По умолчанию Первичный Успех Информация Предупреждение Опасность
Легко выделяйте новые или непрочитанные элементы, добавляя к ссылкам, навигации Bootstrap и т. Д.
Входящие 42
Самосворачивание
Когда нет новых или непрочитанных элементов, значки просто сворачиваются (с помощью CSS-селектора : пустой ), если в них нет содержимого.
Кроссбраузерность
Значки
не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора : пустой .
Адаптируется к активным состояниям навигации
Встроенные стили включены для размещения значков в активных состояниях при навигации по таблицам и спискам.
42 Дом ...
Легкий и гибкий компонент, который при желании может расширить всю область просмотра для демонстрации ключевого контента на вашем сайте.
Это простой герой, простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации.
Узнать больше
Привет, мир! ... Подробнее…
Чтобы сделать джумботрон на всю ширину и без закругленных углов, поместите его снаружи всех .container s и вместо этого добавьте внутрь .container .
...
Простая оболочка для h2 для надлежащего разделения и сегментирования разделов содержимого на странице. Он может использовать небольшой элемент h2 по умолчанию, а также большинство других компонентов (с дополнительными стилями).
Пример заголовка страницы Подтекст для заголовка
Расширьте сеточную систему Bootstrap с помощью компонента эскизов, чтобы легко отображать сетки изображений, видео, текста и многого другого.
Пример по умолчанию
По умолчанию эскизы Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой.
...
Пользовательское содержимое
С небольшой дополнительной разметкой можно добавить в эскизы любой HTML-контент, например заголовки, абзацы или кнопки.
Ярлык эскиза
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.
Кнопка Кнопка
Ярлык эскиза
Cras justo odio, dapibus ac facilisis in, egestas eget quam.Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.
Кнопка Кнопка
Ярлык эскиза
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.
Кнопка Кнопка
Ярлык эскиза ... Button Button
Предоставляет контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений. Для встроенного увольнения используйте плагин jQuery предупреждений.
Примеры
Оберните любой текст и дополнительную кнопку закрытия в .alert и один из четырех контекстных классов (например, .alert-success ) для основных предупреждающих сообщений.
Нет класса по умолчанию
Оповещения не имеют классов по умолчанию, только базовые классы и классы-модификаторы. Серое предупреждение по умолчанию не имеет особого смысла, поэтому вам необходимо указать тип через контекстный класс. Выбирайте из успеха, информации, предупреждения или опасности.
Молодец! Вы успешно прочитали это важное предупреждающее сообщение.
Внимание! Это предупреждение требует вашего внимания, но оно не очень важно.
Предупреждение! Проверьте себя, вы не слишком хорошо выглядите.
Ах да! Измените кое-что и попробуйте отправить еще раз.
... ... ... ...
Предупреждения, которые можно закрыть
Создавайте любые оповещения, добавляя опциональную .alert-dismissable и кнопку закрытия.
×
Предупреждение! Проверьте себя, вы не слишком хорошо выглядите.
Предупреждение! Лучше проверьте себя, вы не очень хорошо выглядите.
Обеспечить правильное поведение на всех устройствах
Обязательно используйте элемент

Global
Исходные файлы CSS	МЕНЬШЕ	SCSS
Первичный блок CSS	`пикселей`	`рем`
Блок медиа-запросов	`пикселей`	`пикселей`
Глобальный размер шрифта	`14 пикселей`	`16 пикселей`
Шрифты по умолчанию	Helvetica Neue, Helvetica, Arial, без засечек	Использует «собственный стек шрифтов» (системные шрифты пользователя) с резервным вариантом для Helvetica Neue, Arial и без засечек
Сетки
Уровни сетки	4-х уровневая сеточная система (xs, sm, md, lg)	5-ти уровневая сеточная система (xs, sm, md, lg, xl). Bootstrap 4 удалил `xs` из самой низкой точки останова. Таким образом, `col- *` охватывает все устройства (размер в этом случае указывать не нужно).
Смещение колонн	Использует классы `col - * - offset- *` для смещения столбцов. Например, `col-md-offset-4` .	Использует классы смещения `- * - *` для смещения столбцов. Например, `offset-md-4` .
Таблицы
Темные / инверсные столы	Не поддерживается.	Добавлены темные / обратные таблицы с классом `.table-dark` . Примечание. До выпуска Beta 2 для них требовался класс `.table-inverse` . Этот класс был заменен на `.table-dark` в бета-версии 2.
Стили заголовков таблиц	Не поддерживается.	Добавлены стили заголовков таблиц с классами `.thead-light` и `.thead-dark` . Примечание: до выпуска Beta 2 для них требовался `.table-default класс` и класс `.table-dark` . Эти классы были заменены на `.table-light` и `.table-dark` в Beta 2.
Сжатые таблицы	`. Столово-конденсированный`	`. Стол-см`
Контекстные классы	Bootstrap 3 не использует префикс `.table-` для своих контекстных классов. Например, Bootstrap 3 использует `.active` , тогда как Bootstrap 4 использует `.table-active` . Помимо этого, в обеих версиях используются одни и те же 5 контекстных ключевых слов (active, success, info, warning, опасно).	Добавлен префикс `.table-` для своих контекстных классов.
Адаптивные таблицы	Класс `.table-responsive` должен быть добавлен к родительскому элементу `div` .	Класс `.table-responsive` должен быть добавлен к родительскому элементу `div` . ~~Можно добавить `.table-responsive` к фактическому элементу `table` .~~ Beta 2 также представила классы `.table-responsive- *` , которые можно использовать для определения конкретной точки останова. Это `.table-responseive-sm` , `.table-responsive-md` , `.table-responseive-lg` и `.table-responsive-xl` .
Таблицы оплавления	Не поддерживается.	~~Добавлены таблицы перекомпоновки с `.table-reflow` класс.~~ Таблицы переформатирования теперь удалены.
Формы
Горизонтальные формы	Горизонтальные формы требуют класса `.form-horizontal` . Forms не требуют `.row` при использовании сеток (хотя этот класс по-прежнему является требованием для сеток Bootstrap 3 в целом).	Bootstrap 4 удалил класс `.form-horizontal` — он больше не нужен для отображения горизонтальных форм. Для форм требуется либо класс `.row` при использовании сеток, либо класс `.form-row` (представленный в Bootstrap 4), что делает форму более компактной.
Горизонтальные формы	Используйте `.control-label` при использовании сеток для макета формы.	Bootstrap 4 использует `.col-form-label` * при использовании сеток для макета формы. * Обратите внимание, что Bootstrap 4 изначально использовал `.form-control-label` , но впоследствии изменил его на `.col-form-label` .
Флажки и радиокнопки	Использует `.radio` , `.radio-inline` , `.checkbox` или `.checkbox-inline` для отображения флажков и переключателей.	Использует `.form-check` , `.form-check-label` , `.form-check-input` и `.form-check-inline` .
Размер элемента управления формой	Используйте `.input-lg` и `.input-sm` для увеличения или уменьшения размера элемента управления вводом.	Используйте `.form-control-lg` и `.form-control-sm` , чтобы увеличить или уменьшить размер элемента управления вводом.
Размер метки формы	Нет специальных классов для настройки размера метки формы.	Bootstrap 4 представил `.col-form-label-sm` и `.col-form-label-lg` для увеличения или уменьшения размера метки в соответствии с размером соответствующего элемента управления формы.
Текст справки	Используйте класс `.help-block` для отображения текста справки.	Bootstrap 4 использует класс `.form-text` для отображения текста справки.
Значки проверки и обратной связи	Включает стили проверки для состояний ошибки, предупреждения и успешного выполнения в элементах управления формы (например, `.has-warning` ). Чтобы представить значки в полях ввода с помощью Bootstrap 3, используйте глификоны.	Стили проверки недоступны для форм Bootstrap 4. Вместо этого используйте настраиваемые сообщения проверки формы Bootstrap.
Легенды	Нет классов для стилизации легенд форм.	Предоставляет возможность использовать `.col-form-label` в элементах `legend` , чтобы стилизовать его больше как ярлык.
Статический текст	Использует `.form-control-static` для визуализации статического текста вместо элемента управления.	В Bootstrap 4 `.form-control-static` был переименован в `.form-control-plaintext` .
Пользовательские формы	Не поддерживается.	Bootstrap 4 представил настраиваемые формы — полностью настраиваемые элементы формы, которые заменяют настройки браузера по умолчанию.
Кнопки
Стили	Включает `.btn-default` и `.btn-info` классов. Класс `.btn-secondary` недоступен в Bootstrap 3.	Введены классы `.btn-secondary` , `.btn-light` и `.btn-dark` . Удалил класс `.btn-default` . Обратите внимание, что класс `.btn-info` изначально был удален в Bootstrap 4, но затем снова появился.
Кнопки контура	Не поддерживается.	Введены классы `.btn-outline- ` для стилизации кнопок с цветом контура. ~~Введены классы `.btn - - outline` для стилизации кнопок с цветом контура.~~ ( `.btn - * - схема` классов превратилась в `.btn-outline- *` в Alpha 3).
Размеры кнопок	Доступен класс `.btn-xs` .	Бросил `.btn-xs` class (сейчас доступны только `.btn-sm` и `.btn-lg` ).
Входные группы
Классы	Bootstrap 3 использует классы `.input-group-addon` и `.input-group-btn` .	Bootstrap 4 удалил `.input-group-addon` и `.input-group-btn` для двух новых классов: `.input-group-prepend` и `.input-group-append` . Bootstrap 4 также представил `.input-group-text` для текста внутри группы ввода.
Изображений
Адаптивные изображения	Используйте `.img-responsive класс` .	Используйте `.img-fluid` class.
Выравнивание изображения	Используйте вспомогательные классы `.pull-right` , `.pull-left` и `.center-block` .	Использует `.m-x-auto` вместо `.center-block` для выравнивания изображений на уровне блоков. Может также использовать различные вспомогательные классы `.pull - * - right` и `.pull - * - left` , а также `.text - * - left` , `.text - * - center` и `.text - * - справа` вспомогательных классов на родительском элементе изображения. Может использовать различные классы `.pull - * - none` для отключения плавающего режима.
Медиа-объекты
Классы	Включает в себя множество различных классов для медиа-объектов, включая `.media` , `.media-body` `.media-object` , `.media-heading` , `.media-right` , `.media-left` и `.media-list` и `.media-body` .	Использует только `.media` class. Поля можно нанести с помощью распорных утилит. Для мультимедийных объектов в Bootstrap 4 включен flexbox, поэтому также можно применять различные классы flexbox (например, переупорядочивание и т. Д.).
Выпадающие списки
Состав	Применять раскрывающиеся списки к спискам (т.е. используя `ul` и `li` ).	Выпадающие списки могут быть построены с `ul` или `div` s. Примените `.dropdown-item` к элементу `a` или `button` и оберните их все в `div` (или `ul` ) с применением класса `. Dropdown-menu` .
Заголовки меню	Примените `.dropdown-header` к тегу `li` .	Примените `.dropdown-header` к `h2` — `h3` тегам (поскольку Bootstrap больше не использует теги `li` для создания раскрывающихся списков).
Разделители	Примените класс `.divider` к элементу `li` (потому что он использовал списки для построения раскрывающихся списков).	Примените `.dropdown-divider` к элементу `div` .
Отключенные пункты меню	Примените `.отключил класс` для элемента `li` .	Примените класс `.disabled` к элементу `a` .
Группы кнопок
Обоснованно?	Поддерживает группы кнопок с выравниванием по ширине (через класс `.btn-group-justified` ).	Не поддерживается.
Очень маленький?	Поддерживает очень маленькие группы кнопок (через `.btn-group-xs` класс).	Не поддерживается (удален класс `.btn-group-xs` ).
Navs
Встроенная навигация	Не существует класса `.nav-inline` .	Может использовать класс `.nav-inline` , чтобы явно указать навигационные элементы, которые будут отображаться встроенными.
Навигационные панели
Цвета	Ограниченные (предустановленные) варианты цвета.Поддерживает обратные панели навигации, но не другие классы.	Новые (предустановленные) варианты цвета. Введены классы `.navbar-light` и `.navbar-dark` и позволяют использовать классы `.bg- *` на навигационных панелях.
Выравнивание навигационной панели	Используйте `.navbar-right` , `.navbar-left` для выравнивания компонентов на панели навигации.	~~Используйте различные `.pull - * - справа` и `.pull - * - слева` отзывчивых вспомогательных классов.~~ ~~Также можно использовать различные классы `.pull - * - none` для отключения плавающего режима.~~ Может использовать либо утилиты интервалов, такие как `.mr-auto` , либо любую из утилит выравнивания flexbox.
Формы навигационной панели	Добавьте класс `.navbar-form` в формы на панели навигации.	Bootstrap 4 сбросил `.navbar-form` класс. Это больше не нужно.
Фиксированные панели навигации	Использует `.navbar-fixed-top` и `.navbar-fixed-bottom` для фиксации навигационных панелей вверху или внизу.	Использует `. Фиксированный верх` и `. Фиксированный нижний` .
Разбиение на страницы
Пагинация по умолчанию	Требуется добавить только `.pagination` (к элементу `ul` , который представляет список страниц).	Необходимо также добавить `.page-item` к каждому элементу `li` и `.page-link` к каждому элементу `a` .
Пейджеры	Использует `. Предыдущий` и `. Следующий` для выравнивания пейджеров.	пейджеров было сброшено в Bootstrap 4 (Alpha 3). ~~Использует `.pager-prev` и `.pager-next` для выравнивания пейджеров.~~
Этикетки
Этикетки для таблеток	Модель `.этикетка-таблетка` класса отсутствует. Однако у Bootstrap 3 есть значки (которые обеспечивают аналогичный визуальный эффект).	Ярлыки заменены на значки в Bootstrap 4. Значки могут использовать `.badge-pill` для закругленных углов.
Теги
Поддерживается?	№ «Теги» называются «метками» в Bootstrap 3 (т.е. они используют класс `.label` ).	~~Да.~~ ~~Класс `.tag` был введен в Bootstrap 4 (Alpha 3) для замены класса `.label` .~~ ~~Это было сделано для устранения неоднозначности от элемента метки `.`~~ `Теги переименованы в «значки». Они заменяют метки из Bootstrap 3.`
Джумботрон
Полная ширина	`.jumbotron-fluid класса` не требуется на полноразмерных джумботронах.	Представлен `.jumbotron-fluid класса` для полноразмерных jumbotron.
Прогресс-бар
Использует `progress` ?	Не использует `progress` для индикаторов выполнения. Вместо этого применяет классы индикатора выполнения к вложенным элементам `div` .	~~Использует элемент HTML5 `progress` при работе с индикаторами выполнения.~~ Использование элемента `progress` было оставлено в Alpha 6.Bootstrap 4 теперь снова использует элемент `div` .
Глификоны
Поддерживается?	Поддерживается.	Не поддерживается.
Типографика
Цитаты	Стили начальной загрузки применяются к элементу `blockquote` по умолчанию.	Введен класс `.blockquote` для стилизации элемента `blockquote` (т.е.е. стиль этого элемента теперь включен).
Выравнивание цитат	Используйте `.blockquote-reverse` , чтобы выровнять цитату по правому краю.	Используйте текстовые утилиты для выравнивания цитат ( `.text-center` и `.text-right` ).
Заголовки страниц	Поддерживается класс `.page-header` .	Класс `.page-header` не поддерживается.
Списки Описаний	Класс `.dl-horizontal` использовался для объявления горизонтального списка.	Горизонтальные списки теперь объявляются с классом `.row` в теге `dl` , а затем с любым из предопределенных классов сеточной системы в тегах `dt` и `dd` .
Использование без ответа
Поддерживается?	Поддерживается.Вы можете указать, что макет не отвечает.	Не поддерживается.
Группы списков
Элементы связанного списка / Элементы списка кнопок	Примените `.list-group-item` к элементу `a` .	Примените `.list-group-item-action` к элементу `a` .
Свернуть
Показать содержимое	Использует `.в` , чтобы контент расширялся при загрузке страницы.	Использует `.show` для расширения содержимого при загрузке страницы.
Карты
Поддерживается?	Не поддерживается.	Представлено в Bootstrap 4. Карты заменяют функциональные возможности, которые ранее предоставлялись панелями, лунками и эскизами.
Панели
Поддерживается?	Поддерживается.	Не поддерживается. Вместо этого используйте карты.
Уэллс
Поддерживается?	Поддерживается.	Не поддерживается. Вместо этого используйте карты.
Эскизы
Поддерживается?	Поддерживается.	Не поддерживается. Вместо этого используйте карты.
Панировочные сухари
Классы	Использует `.хлебные крошки` против тега `ul` .	Также требует применения `.breadcrumb-item` ко всем элементам `li` , составляющим цепочку навигации. Панировочные сухари также можно использовать вне списков. Например, `.breadcrumb-item` можно применить к группе из `a` элементов, которые заключены в элемент `.breadcrumb` .
Карусели
Карусель	Используйте `.изделие` кл.	Используйте `.carousel-item` class.
Аффикс
Поддерживается?	Да.	№

Имя	Ширина мишени	Код
Очень маленький	Телефоны Менее 768px	`.col-xs-`
Маленькие устройства	Планшеты 768px и выше	`.col-sm-`
Устройства среднего размера	Настольные ПК 992px и выше	`.col-md-`
Большие устройства	Большие рабочие столы 1200 пикселей и выше	`.col-lg- $`

#	Имя	Фамилия	Имя пользователя
1	Марка	Отто	@mdo
2	Иаков	Торнтон	@fat
3	Ларри	Птица	@twitter