Bootstrap 4 отличие от bootstrap 3 – Урок 1. Фреймворк Bootstrap 4. Что такое Bootstrap. Отличия Bootstrap 3 от Bootstrap 4 — BIQLE Видео

Основные отличия Bootstrap-4 от Bootstrap-3

В начале 2018 года в свет вышла новая версия Bootstrap-4. Данная программа стала проще в использовании, более адаптивной, удобней для вёрстки макетов. Главные изменения наблюдаются в сетке и применении технологии FlexBox, но также присутствуют и другие нововведения. Обо всём этом читайте дальше.

Bootstrap-4 сегодняшнее состояние

Альфа-версия появилась ещё 2 года назад, а с 19 января 2018 года доступна уже бета-версия. Последний вариант программы работает стабильно, может использоваться на реальных сайтах. Однако ещё будут вводиться различные точечные изменения, так что надо следить за всеми нововведениями.

FlexBox и изменения в сетке

Самые серьёзные изменения наблюдаются в сетке, так что её надо разобрать подробно.

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

Основные параметры сетки приведены в таблице ниже:

	Extra small	Small	Medium	Large	Extra large
Размер колонки	До 576 px	576-768 px	768-992 px	992-1200 px	От 1200 px
Максимальная ширина контейнера	-	540	720	960	1140
Название класса	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

В сетку добавлен новый размер –col-xl, который теперь заменяет значение col-lg. Таким образом, все обозначения классов переместились на один уровень ниже. Кроме того, исчезла последняя аббревиатура у класса col-xs, теперь он пишется, как просто col- с дефисом на конце.

Новый класс col

Появился класс col, который можно использовать для создания колонок одинаковой ширины:

<div>
     <div>1 из 2</div>
     <div>2 из 2</div>
</div>
<div>
     <div>1 из 3</div>
     <div>2 из 3</div>
     <div>3 из 3</div>
</div>

Также этим классом можно задавать определённую ширину, измеряемую колонками:

<div>
     <div>1 из 3</div>
     <div>2 из 3 (широкое)</div>
     <div>3 из 3</div>
</div>

Это не все возможности класса col, но их так много, что для этого надо писать отдельную статью.

FlexBox вместо Float

В прежних версиях сетка Bootstrap использовала метод Float, однако теперь она базируется на технологии FlexBox. Преимущество такого решения состоит в том, что если раньше при контенте разного объёма блоки отличались по высоте, то теперь при разной длине текста, колонки будут иметь одинаковую высоту. Из-за этого оформление портала смотрится симпатичнее.

Раньше:

Теперь:

Компонент Card

Теперь больше нет компонентов wells, thumbnails и panels. Вместо них работает гибкий элемент Card. Данный инструмент включает в себя все возможности предшественников. Благодаря ему можно создавать сетку из отдельных карточек и формировать «кирпичную кладку».

Что находится под капотом

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

1. Теперь Bootstrap-4 работает на IE10, а для IE8/IE9 нужно использовать третью версию.
2. Bootstrap больше не работает с LESS, зато вместо него используется SASS, из-за чего программа стала функционировать быстрее.
3. Для поддержки кроссбраузерности функционирует «Reboot», работающий на ядре «Normalize.css».
4. Изменились и другие компоненты, а также плагины jQuery и прочие скрипты.

Другие изменения

Нововведений в Bootstrap-4 очень много, но наиболее важные из них следующие:

1. Увеличилось количество базовых цветов с 6 до 8 штук.

2. Разработчики отказались от пикселей в пользу em и rem.
3. Глобальный шрифт сменился с 14px на 16px.
4. Фреймворк отказался от иконочного шрифта Glypicons, так что теперь придётся использовать SVG.

Подведём итоги

Новый Bootstrap-4 теперь комфортный в использовании и адаптивный. Основные нововведения коснулись сетки, а также произошла замена FlexBox на Float. Кроме того, особое внимание нужно уделить классу col или card. Также есть множество изменений «под капотом».

5 предыдущих статей

Все о компьютерах — Основные отличия Bootstrap 4 от Bootstrap 3

Доброго времени суток, дорогой читатель! Сегодня я расскажу вам об изменениях, которые претерпел Bootstrap, став 4 версией. НО 3 версия никуда не делась, она все также живет своей жизнью и если вы решили обновить версию Bootstrap с3 на 4, то спешу вас огорчить при этом придется многое исправить — самое главное grid систему, глобальный размер шрифта, новые и удаленные компоненты и другое.

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

Grid System

Grid система Bootstrap 3 построена только на float, а Bootstap 4 предлагает нам использовать Flexbox. И это большой плюс, т.к. в новой версии нам больше не нужно выравниванивать колонку по вертикали, теперь все колонки в grid системе будут одиноковой высоты! Помниться сам мучался с «подгоном» колонок по высоте, изучая и используя flex. Это лишь один плюс, который может нам предложить разметка, построенная на Flexbox. С помощью align-item-center, align-items-md-center, align-items-lg-start мы сможете изменить вертикальное и горизонтальное выравнивание. Используя flex-unordered, flex-last, flex-first, измениться порядок ваших колонок; mr-auto, ml-auto, помогут «прижать» ваш элемент вправо или влево, соответственно.

Помимо FlexBox Grid System теперь использует .col-xl- Extra large (≥1200px), а .col-xs- теперь не использует постфикс XS, просто .col- Extra small (<576px)

Отныне можно не писать (при случае можно и писать) количество занимаемого пространства для каждой колонки, система сама расположит их в соответствие с количеством;

 <div>
  <div>
    <div>
      1 of 2
    </div>
    <div>
      2 of 2
    </div>
  </div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      2 of 3
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

Размер шрифта

Гглобальный размер шрифта увеличили с 14 до 16px. Вместо px используется rem.

Sass

Bootstrap 4 теперь использует Sass, а не Less.

Card

Новый компонент Card заменил удаленные: wells, thumbnails, panels. Это отличный компонент, включающий в себя возможности всех трех удаленных компонентов. Также карточки можно группировать и даже реализовать сетку.

<div>
  <img src=".../100px180/" alt="Card image cap">
  <div>
    <h5>Card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Go somewhere</a>
  </div>
</div>

Reboot

Для кроссбраузерности был разработан модуль Reboot, основой которого является Normalize.css из Bootstrap3. Все настройки для сброса стандартных стилей HTML-тегов у браузеров находятся в одном Sass файле.

Glyphicons

Bootstrap4 полностью перешел на использование SVG изображений, в связи с этим был удален иконочный шрифт Glypicons, который присутствует в Bootstrap3. Разработчики фреймворка рекомендуют использовать сторонние библиотеки иконок поддерживающие формат SVG:

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

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

Подход. Расширения · Bootstrap

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

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

Разработали лучшее решение или увидели недочет? Задайте вопрос нам – мы с радостью ответим.

Резюме

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

• Компоненты должны быть отзывчивы и mobile-first
• Компоненты должны создаваться на базовых классах и расширяться \ модифицироваться использованием классов-модификаторов
• Состояния компонентов должны «подчиняться» общей шкале z-индекса
• Когда только возможно, предпочитать HTML и CSS, нежели JavaScript
• Когда только возможно, использовать классы-утилиты, а не код CSS
• Когда только возможно, избегать применения строгих требования HTML (селекторы дочерних элементов)

Отзывчивый

«Отзывчивые» стили Bootstrap созданы как mobile-first. Мы используем этот термин в нашей документации и в целом согласны с ним, но иногда его толкуют слишком широко. Хотя не каждый компонент BS4 должен быть совершенно «отзывчивым», этот подход призван уменьшить количество переменных CSS, несущих разные функции, посредством просто добавления стилей при увеличении области просмотра.

Вы увидите данный подход лучше всего в медиа-запросах. В большинстве случаев мы используем запросы min-width, которые начинают применяться на специфическом брейкпойнте и работают вплоть до самых больших. Например, значение .d-none применяется от min-width от 0 до бесконечности. С другой стороны, .d-md-none применяется с контрольной точкой и вверх.

Временами, когда сложность компонента требует max-width, мы используем этот параметр. Подобные «перекрытия стиля» функционально и «ментально» проще для внедрения и поддержки, чем изменение и переписывание «коренного» функционала наших компонентов. Мы стремимся ограничить использование такого подхода, но иногда используем его.

Классы

Кроме нашего Reboot’а – CSS-инструментом кросс-браузерной нормализации – все наши стили нацелены на использование классов в качестве селекторов. Это значит, что происходит возможность избежать типов селекторов (например, input[type="text"]) и внешних родительских классов (например, .parent .child), которые делают стили слишком специфичными для легкого перекрытия стилей.

Посему компоненты должны создаваться на базовом классе, который содержит общие пары значений свойств, которые не будут перекрыты. Например, классы .btn и .btn-primary. Мы используем класс .btn для всех обычных стилей, как display, padding и border-width. Мы используем модификаторы как .btn-primary для добавления цветов, фона, цвета границ и т.д.

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

Шкалы z-index’a

В BS4 есть две шкалы z-index — элементы внутри компонента и «наложенные» компоненты.

Элементы компонентов

• Некоторые компоненты в BS4 «построены» с использованием перекрывающих компонентов, это сделано для предотвращения возникновения двойных границ, которое может возникнуть без изменения свойства border. Например, группы кнопок, группы ввода, нумеровка страниц.
• Эти компоненты разделяют стандартную шкалы z-index — от 0 до 3.
• 0 – значение по умолчанию (начальное), 1 — :hover, 2 — :active/.active, а 3 — :focus.
• Такой подход совпадает с нашими ожиданиями более высокого приоритета для юзера. Если элемент «в фокусе», он находится в поле зрения и в поле его внимания. Активные элементы – вторые по значимости, т.к. они показывают состояние. Hover – третий по важности, потому что он показывает намерение юзера, но на почти все элементы можно навести курсор.

Компоненты с наложением

В bootstrap есть несколько компонентов, которые функционируют в некотором смысле как таковые с наложением. Сюда входят, в порядке уменьшения z-index’а: выпадающие элементы, фиксированные и «липкие» навбары, модальные окна, всплывающие подсказки и поповеры.

Каждый компонент с наложением слегка увеличивает свой z-index таким образом, что обычные принципы UI позволяют юзеру видеть «фокусированные» или hovered-элементы в своем поле зрения. Например, модальное окно – элемент, который блокирует документ (т.е. вы не можете предпринять никаких действий, пока оно не исчезнет), так что мы поместили модальные элементы выше навбаров.

Узнайте больше об этом на нашей странице верстки с z-index.

HTML and CSS, а не JS

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

Этот принцип воплотился в нашем первоклассном API для JavaScript, и атрибутах data. Теперь вам не надо писать весь код JavaScript, когда есть наши плагины, заместо этого, пишите HTML. Читайте больше об этом здесь.

В последнее время наши стили «строятся» на фундаментальном поведении обычных веб-элементов. Когда только возможно, мы предпочитаем использовать возможности браузера. Например, вы можете поместить класс .btn в почти любой элемент, но большинство элементов не придадут этому классу какого-либо семантического значения или функциональность браузера не обработает его. Вместо .btn, например, используйте <button> и <a>.

То же происходит с более сложными компонентами. Хотя мы могли бы написать свой плагин валидации форм, который добавляет классы в родительский элемент в зависимости от состояния формы ввода, т.о. позволяя стилизовать текст, скажем, красным цветом, мы предпочитаем использовать псевдоэлементы :valid/:invalid, которые содержатся во всех браузерах.

Утилиты

Классы-утилиты – которые есть в Bootstrap 3 – сильный «союзник» в борьбе с плохой производительностью страниц. Класс-утилита – это обычно одиночное, неизменяемая пара «атрибут: значение», записанное в классе (например, .d-block выражает display: block;). Их главное преимущество – скорость использования при ограниченном количестве необходимого кода HTML и CSS.

В отношении обычного CSS утилиты помогают бороться с увеличением размера файла, т.к. они записывают один раз те пары «атрибут : значение», которые необходимо было повторять много раз. Это помогает в разы уменьшить вес файлов.

Гибкий HTML

Мы стараемся, чтобы требования к компонентам HTML не были слишком догматичными, хотя это и не всегда возможно. Итак, мы фокусируемся на одиночных классах в наших селекторах CSS и пытаемся избежать селекторов непосредственных «детей» (~). Это даст вам больше гибкости и поможет упростить CSS.

Компоненты. Документация Bootstrap 3.4

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

Включает в себя более 250 символов в формате шрифта из Glyphicon Полурослики набор. Значки символов Халфлинги, как правило, не предоставляются бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности, мы только просим, чтобы вы включили ссылку на Значки символов при любой возможности.

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

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

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

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

Только для пустых элементов

Классы Иконок следует использовать только на элементах, которые не содержат текстовое содержимое и не имеют дочерние элементы.

Изменение местоположения значка шрифта

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

• Изменить @icon-font-path and/или @icon-font-name переменные в источнике малых файлов.
• Использование опции относительно URL-адреса тем меньше обеспечивается компилятора.
• Изменить url() пути в составленном CSS.

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

Доступно иконки

Современные версии ассистивных технологий объявит CSS Контента, а также специальные символы Unicode. Чтобы избежать непредвиденных и запутанных выхода в программы чтения с экрана (в частности, при иконки используется чисто для декора), то скрыть их с атрибутом aria-hidden="true".

Если вы используете иконка, чтобы передать смысл (а не только как декоративный элемент), убедитесь, что это значение также передал вспомогательные технологии – например, включать дополнительный контент, визуально скрыты с .sr-only класс.

Если вы создаете элементы другого текста (например, <button>, который только содержит иконка), Вы всегда должны предоставить альтернативный контент, чтобы определить цель контроля, так что будет иметь смысл для пользователей вспомогательных технологий. В этом случае, можно добавить aria-label атрибут на себя управление.

<span aria-hidden="true"></span>

Примеры

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

<button type="button" aria-label="Left Align">
  <span aria-hidden="true"></span>
</button>

<button type="button">
  <span aria-hidden="true"></span> Star
</button>

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

Error: Enter a valid email address

<div role="alert">
  <span aria-hidden="true"></span>
  <span>Error:</span>
  Enter a valid email address
</div>

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

Пример

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

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span></span>
  </button>
  <ul aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выпадающие меню могут быть изменены, чтобы расширить вверх (а не вниз), добавив .dropup родителю.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span></span>
  </button>
  <ul aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</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 aria-labelledby="dLabel">
  ...
</ul>

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

<ul aria-labelledby="dropdownMenu3">
  ...
  <li>Dropdown header</li>
  ...
</ul>

Делитель

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

<ul aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator"></li>
  ...
</ul>

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

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

<ul aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

Обеспечить правильное role и укажите метку

Для того, для вспомогательных технологий, таких как программы чтения с экрана – донести, что ряд кнопок сгруппированы, соответствующий role атрибут должен быть обеспечен. Для группы кнопок, это будет role="group", в то время как панели инструментов должны иметь role="toolbar".

Одно исключение-это группы, которые содержат только один элемент управления (например, оправдано группы кнопок с <button> элементами) или выпадающий.

Кроме того, группы и панели инструментов должны иметь четкие этикетки, как и большинство технологий, иначе не озвучить их, несмотря на наличие правильно role атрибута. В примерах, приведенных здесь, мы используем aria-label, но альтернативы, такие как aria-labelledby, также можно использовать.

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

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

<div role="group" aria-label="...">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>

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

<div role="toolbar" aria-label="...">
  <div role="group" aria-label="...">...</div>
  <div role="group" aria-label="...">...</div>
  <div role="group" aria-label="...">...</div>
</div>

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

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

Left Middle Right

Left Middle Right

Left Middle Right

Left Middle Right

<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>

Вложенность

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

<div role="group" aria-label="...">
  <button type="button">1</button>
  <button type="button">2</button>

  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span></span>
    </button>
    <ul>
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

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

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

Button Button Button Button

<div role="group" aria-label="...">
  ...
</div>

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

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

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

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

IE8 и рамки

Internet Explorer 8 не оказывает границы на кнопках в обоснованной группе кнопок, будь то на <a> или <button> елементах. Чтобы избежать этого, обернуть каждую кнопку в другую .btn-group.

Смотрите #12476 для подробной информации.

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

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

<div role="group" aria-label="...">
  ...
</div>

Ссылки действуя как кнопки

Если <a> элементы используются в качестве кнопки запуска на странице функциональность, вместо того, чтобы переходить на другой документ или раздел в пределах текущей страницы – они также должны быть даны соответствующие role="button".

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

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

<div role="group" aria-label="...">
  <div role="group">
    <button type="button">Left</button>
  </div>
  <div role="group">
    <button type="button">Middle</button>
  </div>
  <div role="group">
    <button type="button">Right</button>
  </div>
</div>

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

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

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

<!-- Одна кнопка -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span></span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

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

<!-- Раздельная кнопка -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span></span>
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

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

<!-- Большая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Малая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Очень малая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

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

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

<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span></span>
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <!-- Ссылки выпадающего меню -->
  </ul>
</div>

Продлить элементов управления формы, добавляя текст или кнопки до, после или с обеих сторон в любом текстовом <input>. Используйте .input-group С .input-group-addon или .input-group-btn добавлять или добавлять элементы к одному .form-control.

Текстовое <input> только

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

Избегайте использования <textarea> элементы вот как их rows атрибута не будут уважать в некоторых случаях.

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

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

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

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

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

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

Точный метод будет использоваться (видимых <label> элементы <label> элементы скрыты с помощью .sr-only класса, или использование aria-label, aria-labelledby, aria-describedby, title или placeholder атрибут) и какие дополнительные сведения должны быть доведены будет варьироваться в зависимости от типа интерфейса виджета вы реализуете. Примеры в этом разделе представлено несколько рекомендаций, конкретных подходов.

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

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

Мы не поддерживаем несколько дополнений (.input-group-addon или .input-group-btn) на одной стороне.

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

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div>
  <input type="text" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span>@example.com</span>
</div>

<div>
  <span>$</span>
  <input type="text" aria-label="Amount (to the nearest dollar)">
  <span>.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div>
  <span>https://example.com/users/</span>
  <input type="text" aria-describedby="basic-addon3">
</div>

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

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

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon3">
</div>

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

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

<div>
  <div>
    <div>
      <span>
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <span>
        <input type="radio" aria-label="...">
      </span>
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

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

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

<div>
  <div>
    <div>
      <span>
        <button type="button">Go!</button>
      </span>
      <input type="text" placeholder="Search for...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text" placeholder="Search for...">
      <span>
        <button type="button">Go!</button>
      </span>
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

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

<div>
  <div>
    <div>
      <div>
        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span></span></button>
        <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-группа -->
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text" aria-label="...">
      <div>
        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span></span></button>
        <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-группа -->
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

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

<div>
  <div>
    <!-- Кнопка и выпадающее меню -->
  </div>
  <input type="text" aria-label="...">
</div>

<div>
  <input type="text" aria-label="...">
  <div>
    <!-- Кнопка и выпадающее меню -->
  </div>
</div>

Несколько кнопок

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

<div>
  <div>
    <!-- Кнопки -->
  </div>
  <input type="text" aria-label="...">
</div>

<div>
  <input type="text" aria-label="...">
  <div>
    <!-- Кнопки -->
  </div>
</div>

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

Используя навигации на вкладке панели Требуется JavaScript вкладок плагина

Для вкладки с tabbable местах, вы должны использовать вкладки JavaScript плагин. Разметка также потребует дополнительных role и атрибуты арии – см. плагина пример разметки Для получения дополнительной информации.

Сделать навигации используется как навигация работает

Если вы используете navs для обеспечения навигации, обязательно добавить role="navigation" для наиболее логичным родительский контейнер <ul> или обернуть <nav> элемент во всей навигации. Не добавляйте в роли <ul> сама, так как это мешает ей быть объявлен реальный список вспомогательных технологий.

Вкладки

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

<ul>
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

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

<ul>
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

<ul>
  ...
</ul>

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

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

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

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

Как на v9.1.2, Сафари экспонаты ошибка, в которой изменение размера вашего браузера горизонтально вызывает рендеринг ошибок в обоснованных навигаций которые удаляются при обновлении. Эта ошибка также показано в пример justified nav.

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

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

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

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

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

<ul>
  ...
  <li role="presentation"><a href="#">Disabled link</a></li>
  ...
</ul>

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

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

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

<ul>
  ...
  <li role="presentation">
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

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

<ul>
  ...
  <li role="presentation">
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

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

Изменение сворачивания мобильных navbar

NavBar коллапсирует в вертикальной мобильного зрения если видовой экран уже, чем @grid-float-breakpoint, и расширяется в горизонтальной немобильного зрения если видовой экран, по крайней мере @grid-float-breakpoint в ширину. Эта переменная в менее источника контролировать, когда NavBar разрушается /расширяется. Значение по умолчанию 768px (the smallest «small» or «tablet» screen).

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

Будьте уверены, чтобы использовать <nav> элемент или, если использовать более общий элемент, например <div> добавить role="navigation" для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.

<nav>
  <div>
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#">Brand</a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div>
      <ul>
        <li><a href="#">Link <span>(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form>
        <div>
          <input type="text" placeholder="Search">
        </div>
        <button type="submit">Submit</button>
      </form>
      <ul>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Логотип

Заменить бренд navbar с вашего собственного изображения можно меняя текст тэга <img>. .navbar-brand имеет свой внутренний отступ и высоту, возможно, придется поменять некоторые CSS-свойства в зависимости от вашего изображения.

<nav>
  <div>
    <div>
      <a href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Формы

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