Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Панели bootstrap: Bootstrap Бутстрап Панели

Содержание

Bootstrap Бутстрап Панели


Панели

Панель в Bootstrap представляет собой рамку с некоторой обивкой вокруг ее содержимого:

Панели создаются с помощью .panel класса, а содержимое внутри панели имеет .panel-body класс:

Пример

<div>
  <div>A Basic Panel</div>
</div>

.panel-default класс используется для стиля цвета панели. Смотрите последний пример на этой странице для более контекстуальных классов.


Panel Heading

Panel Heading

Panel Content

.panel-heading класс добавляет заголовок на панель:

Пример

<div>
  <div>Panel Heading</div>
  <div>Panel Content</div>
</div>



Нижний колонтитул панели

.panel-footer класс добавляет нижний колонтитул на панель:

Пример

<div>
  <div>Panel Content</div>
  <div>Panel Footer</div>
</div>


Группа панелей

Чтобы сгруппировать много панелей вместе, оберните <div> с классом
.panel-group
вокруг них.

.panel-group класс очищает нижний край каждой панели:

Пример

<div>
  <div>
    <div>Panel Content</div>
  </div>
  <div>
    <div>Panel Content</div>
  </div>
</div>


Панели с контекстными классами

Чтобы раскрасить панель, используйте контекстные классы (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning или .panel-danger):

Пример

Panel with panel-default class

Panel Content

Panel with panel-primary class

Panel Content

Panel with panel-success class

Panel Content

Panel with panel-info class

Panel Content

Panel with panel-warning class

Panel Content

Panel with panel-danger class

Panel Content


Bootstrap 3 — Панели — ИТ Шеф

В этой статье вы узнаете, как создать панели с помощью Twitter Bootstrap.

Создание панели с помощью Twitter Bootstrap 3

Иногда, на сайте может потребоваться разместить некоторый логически связанный текст в рамке. Это можно сделать с помощью компонента Bootstrap панель.

Для создания панели необходимо заключить текст в блочный элемент <div> с классом .panel-body. Который в свою очередь заключить в ещё один блочный элемент <div> с классами .panel и .panel-default.


<div>
  <div>Пример простой панели</div>
</div>

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap — Панель

Создание панели с заголовком

Чтобы добавить заголовок в панель, его необходимо поместить в контейнер <div> с классом .panel-heading.


<div>
  <div>Панель с заголовком</div>
  <div>
    Содержимое панели
  </div>
</div>

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

Вы также можете заключить текст заголовка в элементы от <h2> до <h6> и применить к нему стили с помощью класса .panel-title.


<div>
  <div>
    <h4>Панель с h4 заголовком</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>

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

Панель с футером

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


<div>
  <div>
    Содержимое панели
  </div>
  <div>Панель подвала</div>
</div>

Bootstrap — Панель с футером

Классы, акцентирующие состояние контекста панели

К панелям, как и к большинству других компонентов Bootstrap, можно применять дополнительные классы (.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger), которые выделяют её с помощью цвета. Таким образом, можно привлечь внимание пользователей.


<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>

Bootstrap — Панели с акцентными классами

Размещение таблиц и групповых списков внутри панелей

В панелях Twitter Bootstrap 3 можно размещать любые таблицы следующим образом:


<!-- Панель 1 -->
<div>
  <div>Заголовок панели</div>
  <div>
    <p>...</p>
  </div>
  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Bootstrap — Панель, содержащая текст и таблицу

При отсутствии содержимого панели, таблица примыкает к заголовку без отступа.


<div>
  <!-- Обычное содержимое панели -->
  <div>Panel heading</div>

  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Bootstrap — Панель, содержащая таблицу

Групповые списки, тоже можно, аналогичным способом размещать внутри любой панели Bootstrap.


<div>
  <!-- Обычное содержимое панели -->
  <div>Товары</div>
  <div>
    Список наименований товаров, доступных в магазине.
  </div>
  <!-- Групповой список -->
  <div>
    <a href="#">Смартфоны <span>32</span></a>
    <a href="#">Ноутбуки <span>204</span></a>
    <a href="#">Планшеты <span>517</span></a>  
    <a href="#">Компьютеры <span>71</span></a>
  </div>
</div>

Bootstrap — Панель, содержащая список

Демострация компонента Panel

Навигационная панель. Компоненты · Bootstrap. Версия v4.0.0

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



Как это работает


Вот что вам надо знать перед использованием навбара:


  • Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
  • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотри класс отображения.
  • Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Дальше вы увидите примеры и список поддерживаемых под-компонентов.


Поддерживаемые типы содержимого


В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:


  • .navbar-brand для названия вашей компании, продукта или имени проекта.
  • .navbar-nav для навигации полной высоты (включая выпадающие элементы).
  • .navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
  • .form-inline для любых органов контроля форм и действий с ними.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).



<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div aria-labelledby="navbarDropdown">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <div></div>
          <a href="#">Something else here</a>
        </div>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>


В этом примере использованы классы цвета bg-light и спейсинга my-2, my-lg-0, mr-sm-0, my-sm-0.


Бренд


.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.



<!-- As a link -->
<nav>
  <a href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav>
  <span>Navbar</span>
</nav>


Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.




<!-- Just an image -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
  </a>
</nav>



<!-- Image and text -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
    Bootstrap
  </a>
</nav>


Навбар


Ссылки в навигации навбара сделаны на параметрах класса .nav, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.


Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.



<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>


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



<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <div>
      <a href="#">Home <span>(current)</span></a>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Disabled</a>
    </div>
  </div>
</nav>


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



<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>


Формы


Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline.



<nav>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>


Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.



<nav>
  <a>Navbar</a>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>


Работают и формы ввода, также:



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


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




Main button
Smaller button

<nav>
  <form>
    <button type="button">Main button</button>
    <button type="button">Smaller button</button>
  </form>
</nav>


Текст


Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.




Navbar text with an inline element

<nav>
  <span>
    Navbar text with an inline element
  </span>
</nav>


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



<nav>
  <a href="#">Navbar w/ text</a>
  <button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
    </ul>
    <span>
      Navbar text with an inline element
    </span>
  </div>
</nav>


Цветовые схемы


Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.




<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

Контейнеры


Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.



<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>


Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.



<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>


Размещение


Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).


Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.



<nav>
  <a href="#">Default</a>
</nav>



<nav>
  <a href="#">Fixed top</a>
</nav>



<nav>
  <a href="#">Fixed bottom</a>
</nav>



<nav>
  <a href="#">Sticky top</a>
</nav>


Отзывчивое поведение


Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.


Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.


Тогглер (кнопка разворачивания меню)


Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.


Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:



<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <a href="#">Hidden brand</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>


С «брендом», показанный слева, и тогглером — справа:



<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>


С тогглером слева и «брендом» справа:



<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <a href="#">Navbar</a>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>


Внешнее содержимое


Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!


Collapsed content


Toggleable via the navbar brand.



<div>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav>
    <button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
  </nav>
</div>



Collapse. Компоненты · Bootstrap. Версия v4.1.3

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.



Как работает


Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height — изменением его с текущего до 0. В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding в элементе класса .collapse. Вместо padding используйте независимый «оборачивающий» элемент.



Примеры


Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:


  • .collapse скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется атрибут data-toggle="collapse".




Ссылка с href


Кнопка с data-target


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Ссылка с href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>


Взаимодействие со множественными объектами


Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.



Переключить 1-ый элемент
Переключить 2-ой элемент
Переключить оба элемента


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
  <button type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>



Разворачиваемые панели


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



Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Разворачиваемая панель #1
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Разворачиваемая панель #2
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Разворачиваемая панель #3
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingThree" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Доступность


Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded="false". Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show, теперь используйте вместо этого класса aria-expanded="true" в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.


Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на #id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему #id этого скрываемого элемента.


Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern — и вам потребуется подключить эти события с помощью обычного JavaScript.


Использование


Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:


  • .collapse прячет содержимое
  • .collapse.show показывает содержимое
  • .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss.


Через атрибуты


Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse. Если он должен быть показан по умолчанию, добавьте в него класс show.


Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector". Обратитесь к демо для просмотра в действии.


Через JavaScript


Активируйте вручную:


$('.collapse').collapse()

Параметры


Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-, например data-parent="".





Имя Тип По умолч. Описание
parent selector | jQuery object | DOM element false Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса card). Атрибут нужно устанавливать в скрываемой зоне.
toggle boolean true Взаимодействует с скрываемым элементом по обращению

Методы


Асинхронные методы и переходы

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

Смотрите документацию по JavaScript.


.collapse(options)


Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.


$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')


Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).


.collapse('show')


Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse).


.collapse('hide')


Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse).


.collapse('dispose')


Уничтожает «коллпас» элемента.


События


Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».







Тип события Описание
show.bs.collapse Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.collapse Это событие наступает, когда элемент «коллапса» сделан видимым юзеру (будет ждать выполнения CSS-переходов).
hide.bs.collapse Это событие наступает немедленно по вызову метода hide.
hidden.bs.collapse Это событие наступает как только элемент «коллапса» скрыт от юзера (будет ждать выполнения CSS-переходов).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Навигационная панель · Bootstrap на русском

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

Содержание

Основы

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

  • Navbar’у требуется задать класс .navbar и указать цветовую схему.
  • По-умолчанию Navbars и его содержание могут изменяться. Используйте контейнеры для ограничения их ширины.
  • Используйте .pull-*-left и .pull-*-right чтобы быстро выровнять компоненты.
  • Обеспечить доступность с помощью <nav> элемент или, если использовать более общий элемент, например <div> добавить role="navigation" для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.

Поддерживает содержимоe

Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:

  • .navbar-brand для Вашей компании, продукта или название проекта
  • .navbar-nav для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков)
  • .navbar-toggler для использования с нашими плагина крах и других навигация переключение поведения.

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

<nav>
  <a href="#">Navbar</a>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Бренд

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

<nav>
  <a href="#">Navbar</a>
</nav>

<nav>
  <h2>Navbar</h2>
</nav>

Nav

Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav.

<nav>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
</nav>

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

<nav>
  <div>
    <a href="#">Home <span>(current)</span></a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">About</a>
  </div>
</nav>

Цветовые схемы

Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.

Вот некоторые примеры, чтобы показать что мы имеем в виду.

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

Контейнеры

Хотя это не требуется, вы можете обернуть навигации в .container, чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>
<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

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

<nav>
  <a href="#">Full width</a>
</nav>
<nav>
  <a href="#">Fixed top</a>
</nav>
<nav>
  <a href="#">Fixed bottom</a>
</nav>

Складной содержания

Наш плагин развал позволяет использовать <button> или <a> для переключения скрытый контент.

Collapsed content

Toggleable via the navbar brand.

<nav>
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
</nav>

Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-* классы в сочетании с .navbar-toggler. Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.

<nav>
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div>
    <a href="#">Responsive navbar</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Web-разработка • HTML и CSS


Для удобного выделения блоков с текстом предусмотрен компонент «Панель». Чтобы создать панель, необходимо заключить текст в блочный элемент div с классом panel-body. Который, в свою очередь, заключить в ещё один блочный элемент div с классами panel и panel-default.

<div>
    <div>Содержимое панели</div>
</div>



Чтобы добавить заголовок:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>


<div>
    <div>
        <h4>Заголовок панели</h4>
    </div>
    <div>
        Содержимое панели
    </div>
</div>



Чтобы добавить подвал:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
    <div>Подвал панели</div>
</div>



К панелям, как и к большинству других компонентов, можно применять дополнительные классы, которые выделяют её с помощью цвета:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>



В панелях можно размещать таблицы:

<div>
    <div>Заголовок панели</div>
    <div>
        <p>...</p>
    </div>
    <table>
        ...
    </table>
</div>



При отсутствии содержимого панели, таблица примыкает к заголовку без отступа:

<div>
    <div>Заголовок панели</div>
    <table>
        ...
    </table>
</div>



Внутри панели можно размещать групповые списки:

<div>
    <div>Товары</div>
    <div>
        Список наименований товаров, доступных в магазине.
    </div>
    <div>
        <a href="#">Смартфоны <span>32</span></a>
        <a href="#">Ноутбуки <span>93</span></a>
        <a href="#">Планшеты <span>127</span></a>  
        <a href="#">Компьютеры <span>71</span></a>
    </div>
</div>


Поиск:
Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк

Примеры · Bootstrap v5.0

Фрагменты

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

Заголовки

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

Герои

Создайте сцену на своей домашней странице с помощью героев с четкими призывами к действию.

Функции

Объясните особенности, преимущества или другие детали Вашего маркетингового контента.

Боковые панели

Общие шаблоны навигации идеально подходят для макетов вне холста или нескольких столбцов.

Пользовательские компоненты

Совершенно новые компоненты и шаблоны, которые помогут людям быстро приступить к работе с Bootstrap и продемонстрируют лучшие практики для добавления в платформу.

Альбом

Простой одностраничный шаблон для фотогалереи, портфолио и т.д.

Ценообразование

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

Оформление заказа

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

Продукт

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

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Карусель

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

Блог

Журнал как шаблон блога с заголовком, навигацией, избранным контентом.

Панель

Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.

Форма входа

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

Закрепленный футер

Прикрепленный нижний колонтитул к нижней части области просмотра, когда содержимое страницы мало.

Джамботрон

Используйте утилиты для воссоздания и улучшения jumbotron Bootstrap 4.

Фреймворк

Примеры, которые сосредоточены на реализации использования встроенных компонентов, предоставляемых Bootstrap.

Сетка

Несколько примеров макетов сетки со всеми четырьмя уровнями, вложенностью и т.д.

Панели навигации

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

Панели навигации

Демонстрация всех адаптивных и контейнерных опций для навигационной панели.

Панель навигации вне холста

Превратите расширяемую панель навигации в скользящее меню вне холста (не использует наш компонент вне холста).

RTL

Посмотрите, как работает RTL-версия Bootstrap с этими модифицированными примерами пользовательских компонентов.

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

Альбом RTL

Простой одностраничный шаблон для фотогалерей, портфолио и т.д.

Оформление заказа RTL

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

Карусель RTL

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

Блог RTL

Журнал как шаблон блога с заголовком, навигацией, избранным контентом.

Панель RTL

Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.

Интеграции

Интеграции с внешними библиотеками.

Masonry

Объедините возможности сетки Bootstrap и макета Masonry.


В будущее с темами Bootstrap

Вам нужно нечто большее, чем эти примеры? Поднимите Bootstrap на новый уровень с премиальными темами из официальной торговой площадки Bootstrap Themes. Они созданы как собственные расширенные фреймворки, богатые новыми компонентами и плагинами, документацией и мощными инструментами сборки.

Обзор тем

Загрузочные панели


Панели

Панель в bootstrap — это рамка с рамкой и некоторым отступом вокруг ее содержимого:

Панели

создаются с помощью класса .panel , а содержимое внутри панели имеет
.панель-кузов класс:

Пример

Базовая панель

Попробуй сам »

Класс .panel-default используется для стилизации цвета
панель.См. Последний пример на этой странице для получения дополнительных контекстных классов.


Заголовок панели

Заголовок панели

Содержание панели

Класс .panel-heading добавляет заголовок к панели:

Пример

Заголовок панели

Содержимое панели

Попробуй сам »



Нижний колонтитул панели

Модель .Panel-footer класс добавляет нижний колонтитул к панели:

Пример

Содержимое панели

Нижний колонтитул панели

Попробуй сам »


Группа панелей

Чтобы сгруппировать несколько панелей вместе, оберните

с классом
.panel-group
вокруг них.

Класс .panel-group очищает нижнее поле каждой панели:

Пример

Содержимое панели

Содержимое панели

Попробуй сам »


Панели с контекстными классами

Чтобы раскрасить панель, используйте контекстные классы (.Panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning или .panel-dangerous ):

Пример

Панель с классом по умолчанию

Содержание панели

Панель с панелью-первичный класс

Содержание панели

Панель с панелью класса успешности

Содержание панели

Панель с классом информации панели

Содержание панели

Панель с панелью-предупреждением класса

Содержание панели

Панель с панелью класса опасности

Содержание панели

Попробуй сам »



Компоненты · Bootstrap

Доступные глифы

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

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

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

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

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

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

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

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

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

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

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

Доступные значки

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

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

Если вы создаете элементы управления без другого текста (например,

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

Ошибка: введите действительный адрес электронной почты

  
Ошибка: Введите корректный электронный адрес

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

Пример

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

    

Раскрывающиеся меню можно изменить, чтобы развернуть вверх (а не вниз), добавив .dropup к родителю.

    

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

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

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

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

Не рекомендуется

.pull-right alignment

Начиная с v3.1.0 мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right . Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left .

  
    ...

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

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

Разделитель

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

  
    ...
  • ...

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

Добавьте .disabled к

  • в раскрывающемся списке, чтобы отключить ссылку.

        

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

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

    и предоставьте метку

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

    Единственным исключением являются группы, которые содержат только один элемент управления (например, группы кнопок с выравниванием по ширине с элементами

  • Объедините наборы из

    в

    для более сложных компонентов.

      
    ...
    ...
    ...

    Размер

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

    Левый Средний Правый

    Левый Средний Правый

    Левый Средний Правый

    Левый Средний Правый

      
    ...
    ...
    ...
    ...

    Nesting

    Поместите .btn-group в другую .btn-group , когда захотите. меню смешано с рядом кнопок.

        

    Вертикальное изменение

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

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

      
    ...

    Группы кнопок по ширине

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

    Обработка границ

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

    IE8 и границы

    Internet Explorer 8 не отображает границы на кнопках в группе кнопок с выравниванием по ширине, будь то элементы или

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

    Зависимость подключаемого модуля

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

    Раскрывающееся меню с одной кнопкой

    Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.

      
      

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

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

      
    

    Размер

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

      
    
      ...
      ...
      ...

    Выпадающий вариант

    Запуск раскрывающихся меню над элементами путем добавления .dropup к родительскому элементу.

      

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

    Текстовый

    только s

    Избегайте использования здесь элементов