Даступныя гліфы

Уключае больш за 250 гліфаў у фармаце шрыфтоў з набору Glyphicon Halflings. Glyphicons Halflings звычайна не даступныя бясплатна, але іх стваральнік зрабіў іх даступнымі для Bootstrap бясплатна. У якасці падзякі мы толькі просім вас дадаваць спасылку на Glyphicons , калі гэта магчыма.

гліфікон гліфікон-зорачка
гліфікон гліфікон-плюс
гліфікон гліфікон-еўр
гліфікон гліфікон-еўр
гліфікон гліфікон-мінус
гліфікон гліфікон-воблака
гліфікон гліфікон-канверт
гліфікон гліфікон-аловак
гліфікон гліфікон-шкло
гліфікон гліфікон-музыка
glyphicon glyphicon-пошук
гліфікон гліфікон-сэрца
гліфікон гліфікон-зорка
гліфікон гліфікон-зорка-пусты
glyphicon glyphicon-карыстальнік
гліфікон гліфікон-фільм
гліфікон гліфікон-й-вялік
гліфікон гліфікон-й
glyphicon glyphicon-ы-спіс
гліфікон гліфікон-ок
гліфікон гліфікон-выдаліць
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
гліфікон гліфікон-выкл
гліфікон гліфікон-сігнал
гліфікон гліфікон-ког
гліфікон гліфікон-трэш
glyphicon glyphicon-home
файл glyphicon glyphicon
гліфікон гліфікон-час
гліфікон гліфікон-дарога
glyphicon glyphicon-загрузка-альт
glyphicon glyphicon спампаваць
glyphicon glyphicon-загрузка
glyphicon glyphicon-ўваходныя
glyphicon glyphicon-play-circle
гліфікон гліфікон-паўтарыць
glyphicon glyphicon-абнавіць
glyphicon glyphicon-list-alt
гліфікон гліфікон-замак
гліфікон гліфікон-сцяг
glyphicon glyphicon-навушнікі
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-штрыхкод
гліфікон гліфікон-тэг
glyphicon glyphicon-тэгі
glyphicon glyphicon-кніга
гліфікон гліфікон-закладка
гліфікон гліфікон-друк
гліфікон гліфікон-камера
glyphicon glyphicon-шрыфт
гліфікон гліфікон-тлусты
гліфікон гліфікон-курсіў
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
гліфікон гліфікон-малюнак
glyphicon glyphicon-map-marker
glyphicon glyphicon-наладжваць
гліфікон гліфікон-адценне
glyphicon glyphicon-рэд
гліфікон гліфікон-доля
гліфікон гліфікон-праверыць
гліфікон гліфікон-рух
гліфікон гліфікон-крок-назад
гліфікон гліфікон-хутка-назад
гліфікон гліфікон-назад
glyphicon glyphicon-play
гліфікон гліфікон-паўза
гліфікон гліфікон-стоп
гліфікон гліфікон-наперад
glyphicon glyphicon-перамотка наперад
гліфікон гліфікон-крок-наперад
гліфікон гліфікон-выкід
гліфікон гліфікон-шаўрон-злева
гліфікон гліфікон-шаўрон-справа
гліфікон гліфікон-плюс
гліфікон гліфікон-мінус-знак
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
гліфікон гліфікон-пытальнік-знак
glyphicon glyphicon-info-sign
glyphicon glyphicon-скрыншот
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
гліфікон гліфікон-клічнік-знак
гліфікон гліфікон-дар
гліфікон гліфікон-ліст
гліфікон гліфікон-агонь
гліфікон гліфікон-вока-адкрыты
glyphicon glyphicon-eye-close
гліфікон гліфікон-папярэджанне-знак
гліфікон гліфікон-плоскасць
гліфікон гліфікон-каляндар
гліфікон гліфікон-выпадковы
гліфікон гліфікон-каментар
гліфікон гліфікон-магн
гліфікон glyphicon-chevron-up
гліфікон гліфікон-шаўрон-уніз
glyphicon glyphicon-рэтвіт
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
гліфікон гліфікон-мегафон
гліфікон гліфікон-званочак
гліфікон гліфікон-сертыфікат
гліфікон гліфікон-вялікі палец уверх
glyphicon glyphicon-thumbs-down
гліфікон гліфікон-рука-правая
гліфікон гліфікон-рука-лева
glyphicon glyphicon-hand-up
гліфікон гліфікон-з рук уніз
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
гліфікон гліфікон-глобус
гліфікон гліфікон-гаечны ключ
glyphicon glyphicon-заданні
glyphicon glyphicon-фільтр
гліфікон гліфікон-партфель
glyphicon glyphicon-на ўвесь экран
glyphicon glyphicon-панэль
гліфікон гліфікон-сашчэпка
гліфікон гліфікон-сэрца-пусты
гліфікон гліфікон-спасылка
гліфікон гліфікон-тэлефон
гліфікон гліфікон-кнопка
гліфікон гліфікон-дол
glyphicon glyphicon-gbp
гліфікон гліфікон-род
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-сартаваць-па-атрыбутах
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-неправераны
гліфікон гліфікон-разгар
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-уваход
гліфікон гліфікон-флэш
glyphicon glyphicon-log-out
glyphicon glyphicon-новае-акно
гліфікон гліфікон-запіс
glyphicon glyphicon-захаваць
гліфікон гліфікон-адкрыты
гліфікон гліфікон-захаваны
гліфікон гліфікон-імпарт
гліфікон гліфікон-экспарт
гліфікон гліфікон-адправіць
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-крэдытная-карта
гліфікон гліфікон-перанос
гліфікон гліфікон-сталовы прыбор
гліфікон гліфікон-загаловак
гліфікон гліфікон-сціснуты
glyphicon glyphicon-навушнік
glyphicon glyphicon-phone-alt
гліфікон гліфікон-вежа
glyphicon glyphicon-статыстыка
glyphicon glyphicon-sd-відэа
glyphicon glyphicon-hd-відэа
glyphicon glyphicon-субтытры
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-загрузка
glyphicon glyphicon-cloud-upload
гліфікон гліфікон-дрэва-хвойнік
глификон глификон-дрэва-лісцяныя
гліфікон glyphicon-cd
glyphicon glyphicon-захаваць-файл
glyphicon glyphicon-open-file
glyphicon glyphicon-ўзровень
гліфікон гліфікон-копія
гліфікон гліфікон-паста
гліфікон гліфікон-абвестка
glyphicon glyphicon-эквалайзер
гліфікон гліфікон-цар
гліфікон гліфікон-каралева
гліфікон гліфікон-пешка
гліфікон гліфікон-біскуп
гліфікон гліфікон-рыцар
glyphicon glyphicon-baby-formula
гліфікон гліфікон-палатка
гліфікон гліфікон-дошка
гліфікон гліфікон-лож
гліфікон гліфікон-яблычны
гліфікон гліфікон-сціраць
гліфікон гліфікон-пясочны гадзіннік
гліфікон гліфікон-лямпа
гліфікон гліфікон-дублікат
глификон глификон-скарбонка
гліфікон гліфікон-нажніцы
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
гліфікон гліфікон-ен
glyphicon glyphicon-jpy
гліфікон гліфікон-руб
гліфікон гліфікон-руб
гліфікон гліфікон-луска
глификон глификон-ледзянец
гліфікон гліфікон-ледзянец-дэгуставаны
glyphicon glyphicon-адукацыя
glyphicon glyphicon-варыянт-гарызантальны
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
глификон глификон-алей
гліфікон гліфікон-зерне
сонцаахоўныя акуляры glyphicon glyphicon
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-трохкутнік-справа
гліфікон гліфікон-трыкутнік-злева
гліфікон гліфікон-трыкутнік-дно
гліфікон гліфікон-трыкутнік-вяршыня
glyphicon glyphicon-кансоль
гліфікон гліфікон-надрадковы
гліфікон гліфікон-падрадковы
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Як выкарыстоўваць

З меркаванняў прадукцыйнасці ўсе значкі патрабуюць базавага класа і індывідуальнага класа значкоў. Для выкарыстання размесціце наступны код дзе заўгодна. Не забудзьцеся пакінуць прастору паміж значком і тэкстам для правільнай запаўнення.

Не змешваць з іншымі кампанентамі

Класы значкоў нельга спалучаць непасрэдна з іншымі кампанентамі. Яны не павінны выкарыстоўвацца разам з іншымі класамі на адным і тым жа элеменце. Замест гэтага дадайце ўкладзеныя <span>і прымяніце класы значкоў да <span>.

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

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

Змена размяшчэння шрыфта значка

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

Зменіце @icon-font-pathі/або @icon-font-nameзменныя ў зыходных файлах Less.
Выкарыстоўвайце опцыю адносных URL -адрасоў, прадастаўленую кампілятарам Less.
Зменіце url()шляхі ў скампіляваным CSS.

Выкарыстоўвайце любы варыянт, які лепш за ўсё адпавядае вашай канкрэтнай наладзе распрацоўкі.

Даступныя значкі

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

Калі вы выкарыстоўваеце значок для перадачы сэнсу (а не толькі ў якасці дэкаратыўнага элемента), пераканайцеся, што гэта значэнне таксама перадаецца дапаможным тэхналогіям - напрыклад, уключыце дадатковы кантэнт, візуальна схаваны .sr-onlyкласам.

Калі вы ствараеце элементы кіравання без іншага тэксту (напрыклад, <button>які змяшчае толькі значок), вы заўсёды павінны прадастаўляць альтэрнатыўнае змесціва для ідэнтыфікацыі мэты элемента кіравання, каб яно было разумным для карыстальнікаў дапаможных тэхналогій. У гэтым выпадку вы можаце дадаць aria-labelатрыбут на сам элемент кіравання.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Прыклады

Выкарыстоўвайце іх у кнопках, групах кнопак для панэлі інструментаў, навігацыі або ў папярэдніх формах.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

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

Увядзіце сапраўдны адрас электроннай пошты

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Пераключальнае кантэкстнае меню для адлюстравання спісаў спасылак. Зроблены інтэрактыўным з выпадальным убудовай JavaScript .

Прыклад

Абгарніце трыгер выпадальнага меню і выпадаючае меню ў .dropdownабо іншы элемент, які абвяшчае position: relative;. Затым дадайце HTML меню.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 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" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выпадальныя меню можна змяніць так, каб яны пашыраліся ўверх (замест уніз), дадаючы .dropupда бацькоўскага.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 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" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выраўноўванне

Па змаўчанні выпадаючае меню аўтаматычна размяшчаецца на 100% зверху і ўздоўж левага боку бацькоўскага меню. Дадайце .dropdown-menu-rightда .dropdown-menuвыраўноўвання выпадальнага меню па правым краі.

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

Загалоўкі

Дадайце загаловак, каб пазначыць раздзелы дзеянняў у любым выпадальным меню.

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

Раздзяляльнік

Дадайце падзельнік для падзелу серыі спасылак у выпадальным меню.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Адключаныя пункты меню

Дадайце .disabledў <li>выпадальнае меню, каб адключыць спасылку.

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

Згрупуйце шэраг кнопак разам на адным радку з дапамогай групы кнопак. Дадайце дадатковае радыё JavaScript і паводзіны ў стылі сцяжка з дапамогай нашага плагіна кнопак .

Падказкі і ўсплывальныя вобразы ў групах кнопак патрабуюць спецыяльнай налады

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

Праверце п��авільнасць `role`і пазначце цэтлік

Для таго, каб дапаможныя тэхналогіі - такія як праграмы чытання з экрана - перадавалі, што шэраг кнопак згрупаваны, неабходна прадаставіць адпаведны roleатрыбут. Для груп кнопак гэта будзе role="group", у той час як панэлі інструментаў павінны мець role="toolbar".

Адным выключэннем з'яўляюцца групы, якія змяшчаюць толькі адзін элемент кіравання (напрыклад, выраўнаваныя групы кнопак з <button>элементамі) або выпадальны спіс.

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

Базавы прыклад

Загарніце шэраг гузікаў .btnунутр .btn-group.

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

Аб'яднайце наборы <div class="btn-group">ў <div class="btn-toolbar">больш складаныя кампаненты.

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

Праклейванне

Замест прымянення класаў памеру кнопак да кожнай кнопкі ў групе, проста дадайце .btn-group-*да кожнай .btn-group, у тым ліку пры ўкладанні некалькіх груп.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Гняздаванне

Размясціце адзін .btn-groupу іншым .btn-group, калі вы хочаце, каб выпадальныя меню былі змешаны з шэрагам кнопак.

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

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

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

Зрабіце так, каб набор кнопак выглядаў вертыкальна, а не гарызантальна. Тут не падтрымліваюцца выпадальныя спісы з раздзеленымі кнопкамі.

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

Выраўнаваныя групы кнопак

Зрабіце так, каб група гузікаў расцягвалася аднолькавага памеру, каб яна ахоплівала ўсю шырыню бацькоўскага элемента. Таксама працуе з выпадаючымі кнопкамі ў групе кнопак.

Апрацоўка бардзюраў

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

IE8 і межы

Internet Explorer 8 не адлюстроўвае межы кнопак у выраўнаванай групе кнопак, незалежна ад таго, уключаны яны <a>або <button>элементы. Каб абыйсці гэта, загарніце кожную кнопку ў іншую .btn-group.

Глядзіце #12476 для атрымання дадатковай інфармацыі.

З `<a>`элементамі

Проста абгарніце шэраг .btns у .btn-group.btn-group-justified.

налева Сярэдні правільна

налева Сярэдні

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

Спасылкі, якія выконваюць ролю кнопак

Калі <a>элементы выкарыстоўваюцца ў якасці кнопак - запускаюць функцыянальнасць унутры старонкі, а не пераходзяць да іншага дакумента або раздзела на бягучай старонцы - ім таксама трэба надаць адпаведны role="button".

З `<button>`элементамі

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

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

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

Залежнасць плагіна

Выпадаючыя спісы кнопак патрабуюць, каб у вашу версію Bootstrap быў уключаны плагін , які выпадае.

Выпадальныя спісы адной кнопкай

Ператварыце кнопку ў выпадальны пераключальнік з некаторымі базавымі зменамі разметкі.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выпадаючыя спісы кнопак

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Праклейванне

Выпадальныя спісы кнопак працуюць з кнопкамі ўсіх памераў.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Выпадальная варыяцыя

Запусціце выпадальныя меню над элементамі, дадаўшы .dropupіх да бацькоўскага.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Пашырыце элементы кіравання формай, дадаўшы тэкст або кнопкі да, пасля або па абодва бакі любога тэкставага файла <input>. Выкарыстоўвайце .input-groupразам з .input-group-addonабо .input-group-btn, каб дадаць элементы да адзінага .form-control.

`<input>`Толькі тэкставыя

Пазбягайце выкарыстання <select>элементаў тут, бо яны не могуць быць цалкам стылізаваныя ў браўзерах WebKit.

Пазбягайце выкарыстання <textarea>элементаў тут, бо rowsў некаторых выпадках іх атрыбут не будзе выконвацца.

Падказкі і ўсплывальныя вокны ў групах уводу патрабуюць спецыяльнай налады

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

Не змешваць з іншымі кампанентамі

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

Заўсёды дадавайце меткі

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

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

Базавы прыклад

Размясціце адну надбудову або кнопку па абодва бакі ад уводу. Вы таксама можаце размясціць адзін з абодвух бакоў ўваходу.

Мы не падтрымліваем некалькі дадатковых кампанентаў ( .input-group-addonабо .input-group-btn) на адным баку.

Мы не падтрымліваем некалькі элементаў кіравання формамі ў адной групе ўводу.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

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

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

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

Праклейванне

Дадайце адносныя класы памеру формы да самога .input-groupсябе, і змесціва ўнутры аўтаматычна зменіць памер - няма неабходнасці паўтараць класы памеру кіравання формай для кожнага элемента.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Сцяжкі і радыё адоны

Размясціце любы сцяжок або перамыкач у адоне групы ўводу замест тэксту.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Кнопкавыя адоны

Кнопкі ў групах уводу крыху іншыя і патрабуюць аднаго дадатковага ўзроўню ўкладзенасці. Замест .input-group-addon, вам трэба будзе выкарыстоўваць .input-group-btnдля абкручвання кнопак. Гэта патрабуецца з-за стыляў браўзера па змаўчанні, якія нельга перавызначыць.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Кнопкі з выпадаючымі меню

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Сегментаваныя гузікі

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Некалькі кнопак

У той час як у вас можа быць толькі адзін дадатковы кампанент на баку, вы можаце мець некалькі кнопак у адным .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Навіны, даступныя ў Bootstrap, маюць агульную разметку, пачынаючы з базавага .navкласа, а таксама агульныя стану. Мяняйце класы мадыфікатараў для пераключэння паміж кожным стылем.

Для выкарыстання навігацый для панэляў укладак патрабуецца плагін укладак JavaScript

Для ўкладак з абласцямі, якія можна ўкладаць, вы павінны выкарыстоўваць плагін JavaScript для ўкладак . Для разметкі таксама спатрэбяцца дадатковыя roleатрыбуты і атрыбуты ARIA – для атрымання дадатковай інфармацыі глядзіце прыклад разметкі плагіна.

Зрабіце навігацыю даступнай для навігацыі

Калі вы выкарыстоўваеце nav для стварэння панэлі навігацыі, не забудзьцеся дадаць role="navigation"у найбольш лагічны бацькоўскі кантэйнер <ul>або абгарнуць <nav>элемент вакол усёй навігацыі. Не дадавайце ролю ў <ul>саму сябе, бо гэта не дазволіць аб'явіць яе як сапраўдны спіс дапаможнымі тэхналогіямі.

Укладкі

Звярніце ўвагу, што .nav-tabsклас патрабуе .navбазавага класа.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><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замест гэтага:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><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 class="nav nav-pills nav-stacked">
  ...
</ul>

Апраўдана

Лёгка зрабіце ўкладкі або таблеткі аднолькавымі па шырыні з бацькоўскім экранам з шырынёй больш за 768 пікселяў з дапамогай .nav-justified. На меншых экранах навігацыйныя спасылкі складаюцца ў стос.

Выраўнаваныя навігацыйныя спасылкі на панэлі навігацыі зараз не падтрымліваюцца.

Safari і адаптыўная апраўданая навігацыя

Пачынаючы з версіі 9.1.2, Safari дэманструе памылку, з-за якой змяненне памеру браўзера па гарызанталі выклікае памылкі рэндэрынгу ў апраўданай навігацыі, якія выдаляюцца пры абнаўленні. Гэтая памылка таксама паказана ў прыкладзе навігацыі па баку .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Адключаныя спасылкі

.disabledДля любога навігацыйнага кампанента (укладак або таблетак) дадайце шэрыя спасылкі і ніякіх эфектаў навядзення .

Функцыянальнасць спасылкі не ўплывае

Гэты клас зменіць толькі <a>знешні выгляд, а не яго функцыянальнасць. Выкарыстоўвайце карыстальніцкі JavaScript, каб адключыць спасылкі тут.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Выкарыстанне выпадаючых спісаў

Дадайце выпадаючыя меню з невялікай колькасцю дадатковага HTML і плагіна для выпадаючых спісаў JavaScript .

Укладкі з выпадальным меню

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

Таблеткі з выпадальным меню

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

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

Выраўнаваныя навігацыйныя спасылкі на панэлі навігацыі зараз не падтрымліваюцца.

Перапаўненне змесціва

Паколькі Bootstrap не ведае, колькі месца патрэбна змесціву ў вашай навігацыйнай панэлі, у вас могуць узнікнуць праблемы з пераносам змесціва ў другі радок. Каб вырашыць гэта, вы можаце:

Паменшыце колькасць або шырыню элементаў панэлі навігацыі.
Схавайце пэўныя элементы навігацыйнай панэлі пры пэўных памерах экрана з дапамогай адаптыўных класаў утыліт .
Зменіце кропку, у якой панэль навігацыі пераключаецца паміж згорнутым і гарызантальным рэжымам. Наладзьце @grid-float-breakpointзменную або дадайце свой уласны медыя-запыт.

Патрабуецца плагін JavaScript

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

Адаптыўная навігацыйная панэль патрабуе ўключэння плагіна згортвання ў вашу версію Bootstrap.

Змена згорнутай кропкі спынення мабільнай панэлі навігацыі

Панэль навігацыі згортваецца ў вертыкальны мабільны выгляд, калі акно прагляду вузейшае @grid-float-breakpoint, і пашыраецца ў гарызантальны немабільны выгляд, калі акно прагляду мае па меншай меры @grid-float-breakpointшырыню. Наладзьце гэту зменную ў крыніцы Less, каб кантраляваць, калі панэль навігацыі згортваецца/пашыраецца. Значэнне па змаўчанні - 768px(найменшы "маленькі" або "планшэтны" экран).

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

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

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Заўсёды дадавайце меткі

Праграма чытання з экрана будзе мець праблемы з вашымі формамі, калі вы не ўключыце метку для кожнага ўводу. Для гэтых убудаваных формаў вы можаце схаваць меткі з дапамогай .sr-onlyкласа. Існуюць іншыя альтэрнатыўныя метады прадастаўлення меткі для дапаможных тэхналогій, такія як атрыбут aria-label, aria-labelledbyабо . titleКалі ніводнага з іх няма, праграмы чытання з экрана могуць выкарыстоўваць placeholderатрыбут, калі ён ёсць, але звярніце ўвагу, што выкарыстанне placeholderў якасці замены для іншых метадаў маркіроўкі не рэкамендуецца.

Дадайце .navbar-btnклас да <button>элементаў, якія не знаходзяцца ў a <form>, каб вертыкальна адцэнтраваць іх у панэлі навігацыі.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Абгарніце радкі тэксту ў элеменце з .navbar-text, як правіла, на <p>тэгу для правільнага інтэрнацыяналу і колеру.

<p class="navbar-text">Signed in as Mark Otto</p>

Для людзей, якія выкарыстоўваюць стандартныя спасылкі, якія не знаходзяцца ў звычайным кампаненце навігацыйнай панэлі навігацыі, выкарыстоўвайце .navbar-linkклас, каб дадаць належныя колеры для стандартных і адваротных параметраў навігацыйнай панэлі.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Выраўняйце навігацыйныя спасылкі, формы, кнопкі або тэкст з дапамогай утылітных класаў .navbar-leftабо . .navbar-rightАбодв�� класы дададуць CSS float у паказаным кірунку. Напрыклад, каб выраўнаваць навігацыйныя спасылкі, размесціце іх асобна <ul>з прымяненнем адпаведнага класа карыснасці.

Гэтыя класы з'яўляюцца змешвальнымі версіямі .pull-leftі .pull-right, але яны прызначаны для медыя-запытаў для палягчэння працы з кампанентамі навігацыйнай панэлі розных памераў прылад.

Выраўноўванне некалькіх кампанентаў па правым краі

Navbars у цяперашні час мае абмежаванне з некалькімі .navbar-rightкласамі. Каб правільна размясціць змесціва, мы выкарыстоўваем адмоўнае поле на апошнім .navbar-rightэлеменце. Калі ёсць некалькі элементаў, якія выкарыстоўваюць гэты клас, гэтыя палі не працуюць належным чынам.

Мы вернемся да гэтага, калі зможам перапісаць гэты кампанент у v4.

Дадайце .navbar-fixed-topі ўключыце .containerабо .container-fluidў цэнтры змесціва панэлі навігацыі.

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

Патрабуецца абіўка цела

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

body { padding-top: 70px; }

Не забудзьцеся ўключыць гэта пасля асноўнага CSS Bootstrap.

Дадайце .navbar-fixed-bottomі ўключыце .containerабо .container-fluidў цэнтры змесціва панэлі навігацыі.

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

Патрабуецца абіўка цела

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

body { padding-bottom: 70px; }

Не забудзьцеся ўключыць гэта пасля асноўнага CSS Bootstrap.

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

У адрозненне ад .navbar-fixed-*класаў, вам не трэба змяняць абіўку на body.

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

Змяніце выгляд панэлі навігацыі, дадаўшы .navbar-inverse.

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

Паніровачныя сухары

Пакажыце месцазнаходжанне бягучай старонкі ў навігацыйнай іерархіі.

Раздзяляльнікі аўтаматычна дадаюцца ў CSS праз :beforeі content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Пагінацыя

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

Пагінацыя па змаўчанні

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Маркіроўка кампанента пагінацыі

Кампанент пагінацыі павінен быць загорнуты ў <nav>элемент, каб ідэнтыфікаваць яго як раздзел навігацыі для праграм чытання з экрана і іншых дапаможных тэхналогій. Акрамя таго, паколькі старонка, хутчэй за ўсё, ужо мае некалькі такіх навігацыйных раздзелаў (напрыклад, асноўная навігацыя ў загалоўку або навігацыя на бакавой панэлі), пажадана даць апісанне aria-label, <nav>якое адлюстроўвае яе прызначэнне. Напрыклад, калі кампанент пагінацыі выкарыстоўваецца для навігацыі паміж наборам вынікаў пошуку, адпаведнай пазнакай можа быць aria-label="Search results pages".

Адключаны і актыўны стану

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Мы рэкамендуем вам замяніць актыўныя або адключаныя прывязкі на <span>або апусціць прывязку ў выпадку папярэдніх/наступных стрэлак, каб выдаліць функцыянальнасць пстрычкі, захаваўшы прызначаныя стылі.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Праклейванне

Хочаце пагінацыю большага ці меншага памеру? Дадайце .pagination-lgабо .pagination-smдля дадатковых памераў.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Пэйджар

Хуткія папярэднія і наступныя спасылкі для простай пагінацыі з лёгкай разметкай і стылямі. Гэта выдатна падыходзіць для простых сайтаў, такіх як блогі або часопісы.

Прыклад па змаўчанні

Па змаўчанні пэйджар цэнтруе спасылкі.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Выраўнаваныя спасылкі

Акрамя таго, вы можаце выраўнаваць кожную спасылку па баках:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Неабавязковы адключаны стан

Спасылкі на пэйджэр таксама выкарыстоўваюць агульны .disabledклас карыснасці з пагінацыі.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Прыклад

Прыклад загалоўка New

<h3>Example heading <span class="label label-default">New</span></h3>

Даступныя варыяцыі

Дадайце любы з пералічаных ніжэй класаў мадыфікатараў, каб змяніць выгляд этыкеткі.

Па змаўчанні асноўная інфармацыя аб поспеху Папярэджанне Небяспека

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

У вас мноства этыкетак?

Праблемы візуалізацыі могуць узнікнуць, калі ў вузкім кантэйнеры ёсць дзесяткі ўбудаваных этыкетак, кожная з якіх утрымлівае ўласны inline-blockэлемент (напрыклад, значок). Шляхам абыходу гэтага з'яўляецца ўстаноўка display: inline-block;. Кантэкст і прыклад глядзіце ў #13219 .

Лёгка вылучайце новыя або непрачытаныя элементы, дадаючы <span class="badge">да спасылак, навігацыі Bootstrap і многае іншае.

Уваходныя42

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

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Самастойна руйнуецца

Калі новых або непрачытаных элементаў няма, значкі проста згорнуцца (праз :emptyселектар CSS), калі ў ім няма змесціва.

Кросбраузерная сумяшчальнасць

Значкі не згортваюцца самастойна ў Internet Explorer 8, таму што ў ім адсутнічае падтрымка :emptyселектара.

Адаптуецца да актыўных станаў навігацыі

Убудаваныя стылі ўключаны для размяшчэння значкоў у актыўных станах у навігацыі таблетак.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

Прывітанне Сусвет!

Гэта просты герой, просты кампанент у стылі джамбатрона для прыцягнення дадатковай увагі да прадстаўленага кантэнту або інфармацыі.

Даведайцеся больш

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Каб зрабіць джамбатрон поўнай шырыні і без закругленых вуглоў, размесціце яго па-за ўсімі .containers і замест гэтага дадайце .containerўнутры.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Простая абалонка для h1адпаведнага размеркавання і сегментацыі раздзелаў кантэнту на старонцы. Ён можа выкарыстоўваць элемент h1па змаўчанні small, а таксама большасць іншых кампанентаў (з дадатковымі стылямі).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Пашырце сістэму сетак Bootstrap з дапамогай кампанента мініяцюр, каб лёгка адлюстроўваць сеткі малюнкаў, відэа, тэксту і іншага.

Калі вы шукаеце прэзентацыю мініяцюр рознай вышыні і/або шырыні, падобную на Pinterest, вам трэба будзе выкарыстоўваць старонні плагін, напрыклад, Masonry , Isotope або Salvattore .

Прыклад па змаўчанні

Па змаўчанні мініяцюры Bootstrap прызначаны для дэманстрацыі звязаных малюнкаў з мінімальнай неабходнай разметкай.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Індывідуальны кантэнт

З невялікай колькасцю дадатковай разметкі можна дадаваць у мініяцюры любы від HTML-кантэнту, напрыклад загалоўкі, абзацы або кнопкі.

Этыкетка мініяцюры

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

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

Этыкетка мініяцюры

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

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

Этыкетка мініяцюры

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

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

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Забяспечце кантэкстныя паведамленні зваротнай сувязі для тыповых дзеянняў карыстальнікаў з дапамогай некалькіх даступных і гнуткіх паведамленняў абвестак.

Прыклады

Перанясіце любы тэкст і неабавязковую кнопку адхілення ў .alertадзін з чатырох кантэкстных класаў (напрыклад, .alert-success) для асноўных папярэджанняў.

Няма класа па змаўчанні

Абвесткі не маюць класаў па змаўчанні, толькі базавыя і мадыфікацыйныя класы. Шэрае папярэджанне па змаўчанні не мае асаблівага сэнсу, таму вы павінны ўказаць тып праз кантэкстны клас. Выберыце поспех, інфармацыю, папярэджанне або небяспеку.

Добра зроблена! Вы паспяхова прачыталі гэта важнае папярэджанне.

Галаву ўверх! Гэта абвестка патрабуе вашай увагі, але яна не вельмі важная.

Папярэджанне! Лепш праверце сябе, вы не занадта добра выглядаеце.

О, ну! Змяніце некалькі рэчаў і паспрабуйце адправіць яшчэ раз.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Абвесткі, якія можна адхіліць

Абапірайцеся на любое папярэджанне, дадаўшы неабавязковую .alert-dismissibleкнопку і кнопку закрыцця.

Патрабуецца плагін абвесткі JavaScript

Для паўнавартаснага функцыянавання абвестак, якія можна адхіляць, вы павінны выкарыстоўваць плагін JavaScript абвестак .

Папярэджанне! Лепш праверце сябе, вы не занадта добра выглядаеце.

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

Забяспечце належныя паводзіны на ўсіх прыладах

Абавязкова выкарыстоўвайце <button>элемент з data-dismiss="alert"атрыбутам data.

Спасылкі ў абвестках

Выкарыстоўвайце .alert-linkклас утыліты, каб хутка даць адпаведныя каляровыя спасылкі ў любым абвестцы.

Добра зроблена! Вы паспяхова прачыталі гэта важнае папярэджанне .

Галаву ўверх! Гэта абвестка патрабуе вашай увагі , але яна не вельмі важная.

Папярэджанне! Лепш праверце сябе, вы не занадта добра выглядаеце .

О, ну! Змяніце некалькі рэчаў і паспрабуйце адправіць яшчэ раз.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Забяспечце актуальную зваротную сувязь аб ходзе працоўнага працэсу або дзеянні з дапамогай простых, але гнут��іх індыкатараў.

Кросбраузерная сумяшчальнасць

Панэлі прагрэсу выкарыстоўваюць пераходы і анімацыю CSS3 для дасягнення некаторых эфектаў. Гэтыя функцыі не падтрымліваюцца ў Internet Explorer 9 і ніжэй, а таксама ў старых версіях Firefox. Opera 12 не падтрымлівае анімацыю.

Сумяшчальнасць з палітыкай бяспекі кантэнту (CSP).

Калі на вашым вэб-сайце ёсць палітыка бяспекі змесціва (CSP) , якая не дазваляе style-src 'unsafe-inline', вы не зможаце выкарыстоўваць убудаваныя styleатрыбуты для ўстаноўкі шырыні панэлі выканання, як паказана ў нашых прыкладах ніжэй. Альтэрнатыўныя метады ўстаноўкі шырыні, якія сумяшчальныя са строгімі CSP, ўключаюць выкарыстанне невялікага карыстальніцкага JavaScript (які ўсталёўвае element.style.width) або выкарыстанне карыстальніцкіх класаў CSS.

Базавы прыклад

Панэль выканання па змаўчанні.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

З этыкеткай

Выдаліце клас <span>з .sr-onlyунутры панэлі выканання, каб паказаць бачны працэнт.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Каб пераканацца, што тэкст цэтліка застаецца разборлівым нават пры нізкіх працэнтах, падумайце аб даданні min-widthда панэлі прагрэсу.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Кантэкстныя альтэрнатывы

У панэлі прагрэсу выкарыстоўваюцца адны і тыя ж класы кнопак і абвестак для ўзгодненых стыляў.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Паласаты

Выкарыстоўвае градыент для стварэння паласатага эфекту. Недаступна ў IE9 і ніжэй.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Аніміраваныя

Дадайце .activeдля .progress-bar-stripedажыўлення палос справа налева. Недаступна ў IE9 і ніжэй.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Складзены

Змесціце некалькі брускоў у адно і тое ж .progress, каб скласці іх.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Стылі абстрактных аб'ектаў для стварэння розных тыпаў кампанентаў (напрыклад, каментарыяў у блогах, твітаў і г.д.), якія змяшчаюць малюнак, выраўнаваны па левым або правым краі, побач з тэкставым змесцівам.

Носьбіт па змаўчанні

Медыя па змаўчанні адлюстроўвае медыяаб'ект (малюнкі, відэа, аўдыя) злева або справа ад блока кантэнту.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Укладзены медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Класы .pull-leftі .pull-rightтаксама існуюць і раней выкарыстоўваліся як частка медыякампанента, але з версіі 3.3.0 яны састарэлі для гэтага выкарыстання. Яны прыкладна эквівалентныя .media-leftі .media-right, за выключэннем таго, што .media-rightяны павінны размяшчацца пасля .media-bodyў html.

Выраўноўванне СМІ

Выявы або іншыя носьбіты могуць быць выраўнаваны ўверсе, пасярэдзіне або ўнізе. Па змаўчанні выраўнавана па верхняй частцы.

Носьбіт, выраўнаваны паверсе

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Носьбіты пасярэдзіне

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Носьбіт, выраўнаваны па нізе

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Спіс носьбітаў

З невялікай колькасцю дадатковай разметкі вы можаце выкарыстоўваць унутраны спіс мультымедыя (карысна для тэм каментарыяў або спісаў артыкулаў).

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Укладзены медыязагаловак
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Укладзены медыязагаловак
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Укладзены медыязагаловак
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Групы спісаў - гэта гнуткі і магутны кампанент для адлюстравання не толькі простых спісаў элементаў, але і складаных спісаў з карыстальніцкім змесцівам.

Базавы прыклад

Самая базавая група спісаў - гэта проста неўпарадкаваны спіс з элементамі спісу і адпаведнымі класамі. Абапірайцеся на яго з дапамогай наступных варыянтаў або вашага ўласнага CSS пры неабходнасці.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестыбулум і эрас

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Значкі

Дадайце кампанент значкоў у любы элемент групы спіса, і ён аўтаматычна будзе размешчаны справа.

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

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

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

Звязвайце элементы групы спісаў, выкарыстоўваючы тэгі прывязкі замест элементаў спісу (гэта таксама азначае бацькоўскі элемент <div>замест <ul>). Няма неабходнасці ў асобных бацькоў вакол кожнага элемента.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Вестыбулум і эрас

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

Кнопкавыя элементы

Элементы групы спісаў могуць быць кнопкамі замест элементаў спісу (гэта таксама азначае бацькоўскі элемент <div>замест <ul>). Няма неабходнасці ў асобных бацькоў вакол кожнага элемента. Не выкарыстоўвайце тут стандартныя .btnкласы.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Адключаныя прадметы

Дадайце .disabledў a .list-group-item, каб зрабіць яго шэрым і выглядаць адключаным.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Вестыбулум і эрас

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

Кантэкстныя заняткі

Выкарыстоўвайце кантэкстныя класы, каб стылізаваць элементы спіса, стандартныя або звязаныя. Таксама ўключае .activeдзярж.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Вестыбулум і эрас

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Вестыбулум і эрас

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Індывідуальны кантэнт

Дадайце практычна любы HTML, нават для груп звязаных спісаў, такіх як прыведзены ніжэй.

Загаловак элемента спісу групы

Donec id elit non mi porta gravida at eget metus. Мецэнат sed diam eget risus varius blandit.

Загаловак элемента спісу групы

Donec id elit non mi porta gravida at eget metus. Мецэнат sed diam eget risus varius blandit.

Загаловак элемента спісу групы

Donec id elit non mi porta gravida at eget metus. Мецэнат sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Хаця гэта не заўсёды неабходна, часам вам трэба змясціць DOM у скрынку. У такіх сітуацыях паспрабуйце кампанент панэлі.

Базавы прыклад

Па змаўчанні ўсё, што .panelтрэба зрабіць, гэта прымяніць некаторую асноўную рамку і абіўку, каб утрымліваць некаторы змест.

Прыклад базавай панэлі

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Панэль з загалоўкам

Лёгка дадайце кантэйнер загалоўкаў на панэль з дапамогай .panel-heading. Вы таксама можаце ўключыць любы <h1>- <h6>з .panel-titleкласам, каб дадаць папярэдне стылізаваны загаловак. Аднак памеры шрыфтоў <h1>- <h6>перавызначаюцца .panel-heading.

Для належнай афарбоўкі спасылак не забудзьцеся размясціць спасылкі ў загалоўках у межах .panel-title.

Загаловак панэлі без загалоўка

Змест панэлі

Назва панэлі

Змест панэлі

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Панэль з калонтытулам

Абгарнуць кнопкі або другасны тэкст у .panel-footer. Звярніце ўвагу, што ніжнія калонтытулы панэлі не ўспадкоўваюць колеры і межы пры выкарыстанні кантэкстных варыяцый, паколькі яны не павінны быць на пярэднім плане.

Змест панэлі

Ніжні калонтытул панэлі

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Кантэкстныя альтэрнатывы

Як і іншыя кампаненты, можна лёгка зрабіць панэль больш значнай для пэўнага кантэксту, дадаўшы любы з класаў кантэкстнага стану.

Назва панэлі

Змест панэлі

Назва панэлі

Змест панэлі

Назва панэлі

Змест панэлі

Назва панэлі

Змест панэлі

Назва панэлі

Змест панэлі

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Са столікамі

Дадайце любыя элементы без .tableмежаў унутры панэлі для бесперабойнага дызайну. Калі ёсць .panel-body, мы дадаем дадатковую рамку ў верхняй частцы табліцы для падзелу.

Загаловак панэлі

Некаторы змест панэлі па змаўчанні тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Імя	Прозвішча	Імя карыстальніка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Калі цела панэлі няма, кампанент перамяшчаецца з загалоўка панэлі ў табліцу без перапынку.

Загаловак панэлі

#	Імя	Прозвішча	Імя карыстальніка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Са спісамі груп

Лёгка ўключыце групы спісаў на поўную шырыню ў любую панэль.

Загаловак панэлі

Некаторы змест панэлі па змаўчанні тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестыбулум і эрас

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

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

Правілы непасрэдна прымяняюцца да элементаў <iframe>, <embed>, <video>і ; <object>неабавязкова выкарыстоўвайце відавочны клас-нашчадак .embed-responsive-item, калі вы хочаце адпавядаць стылю для іншых атрыбутаў.

Прафесійная парада! Вам не трэба ўключаць frameborder="0"у <iframe>s, бо мы адмяняем гэта для вас.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Па змаўчанні добра

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

Глядзі, я ў калодзежы!

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

Факультатыўныя заняткі

Кіруйце запаўненнем і закругленымі кутамі з дапамогай двух дадатковых класаў мадыфікатараў.

Глядзі, я ў вялікім калодзежы!

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

Глядзі, я ў маленькім калодзежы!

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

Кампаненты

Гліфікі

Даступныя гліфы

Як выкарыстоўваць

Не змешваць з іншымі кампанентамі

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

Змена размяшчэння шрыфта значка

Даступныя значкі

Прыклады

Выпадальныя спісы

Прыклад

Выраўноўванне

Можа спатрэбіцца дадатковае размяшчэнне

Састарэлае .pull-rightвыраўноўванне

Загалоўкі

Раздзяляльнік

Адключаныя пункты меню

Групы кнопак

Падказкі і ўсплывальныя вобразы ў групах кнопак патрабуюць спецыяльнай налады

Праверце п��авільнасць roleі пазначце цэтлік

Базавы прыклад

Панэль інструментаў кнопак

Праклейванне

Гняздаванне

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

Выраўнаваныя групы кнопак

Апрацоўка бардзюраў

IE8 і межы

З <a>элементамі

Спасылкі, якія выконваюць ролю кнопак

З <button>элементамі

Выпадаючыя кнопкі

Залежнасць плагіна

Выпадальныя спісы адной кнопкай

Выпадаючыя спісы кнопак

Праклейванне

Выпадальная варыяцыя

Уваходныя групы

<input>Толькі тэкставыя

Падказкі і ўсплывальныя вокны ў групах уводу патрабуюць спецыяльнай налады

Не змешваць з іншымі кампанентамі

Заўсёды дадавайце меткі

Базавы прыклад

Праклейванне

Сцяжкі і радыё адоны

Кнопкавыя адоны

Кнопкі з выпадаючымі меню

Сегментаваныя гузікі

Некалькі кнопак

нав

Для выкарыстання навігацый для панэляў укладак патрабуецца плагін укладак JavaScript

Зрабіце навігацыю даступнай для навігацыі

Укладкі

Таблеткі

Апраўдана

Safari і адаптыўная апраўданая навігацыя

Адключаныя спасылкі

Функцыянальнасць спасылкі не ўплывае

Выкарыстанне выпадаючых спісаў

Укладкі з выпадальным меню

Таблеткі з выпадальным меню

Навігацыйная панэль

Панэль навігацыі па змаўчанні

Перапаўненне змесціва

Патрабуецца плагін JavaScript

Змена згорнутай кропкі спынення мабільнай панэлі навігацыі

Зрабіце панэлі навігацыі даступнымі

Імідж брэнда

Формы

Засцярогі для мабільных прылад

Заўсёды дадавайце меткі

Гузікі

Ужыванне ў залежнасці ад кантэксту

Тэкст

Ненавігацыйныя спасылкі

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

Выраўноўванне некалькіх кампанентаў па правым краі

Замацаваны наверсе

Патрабуецца абіўка цела

Фіксуецца ўнізе

Састарэлае `.pull-right`выраўноўванне

Праверце п��авільнасць `role`і пазначце цэтлік

З `<a>`элементамі

З `<button>`элементамі

`<input>`Толькі тэкставыя