Компонентхо
Зиёда аз даҳҳо ҷузъҳои дубора истифодашаванда барои таъмин кардани иконография, афтандаҳо, гурӯҳҳои воридотӣ, паймоиш, огоҳиҳо ва ғайра сохта шудаанд.
Глификонҳо
Глифҳои дастрас
Зиёда аз 250 глифро дар формати шрифт аз маҷмӯи Glyphicon Halflings дар бар мегирад. Glyphicons Halflings одатан ройгон дастрас нестанд, аммо созандаи онҳо онҳоро барои Bootstrap ройгон дастрас кардааст. Ҳамчун ташаккур, мо танҳо хоҳиш мекунем, ки то ҳадди имкон истиноди бозгашт ба Glyphicons дохил кунед.
- glyphicon глифик-ситорача
- glyphicon glyphicon-plus
- glyphicon glyphicon-евро
- glyphicon glyphicon-eur
- глификон глификон-минус
- glyphicon glyphicon-абр
- glyphicon glyphicon-лифофа
- глификон глификон-қалам
- глификон глификон-шиша
- мусиқии glyphicon glyphicon
- glyphicon glyphicon-ҷустуҷӯ
- глификон глификон-дил
- глификон глификон-ситора
- glyphicon glyphicon-ситораи холӣ
- glyphicon glyphicon-истифодабаранда
- плёнкаи глификон глификон
- glyphicon glyphicon-уми калон
- glyphicon glyphicon-th
- glyphicon glyphicon-уми рӯйхат
- glyphicon glyphicon-OK
- glyphicon glyphicon - хориҷ кардан
- glyphicon glyphicon-масштаб-андоза кардан
- glyphicon glyphicon-китоб кардан
- глификон глификон хомӯш
- сигнали глифони глификон
- glyphicon glyphicon-cog
- glyphicon glyphicon-партов
- glyphicon glyphicon-хона
- файли glyphicon glyphicon
- глификон глификон-вақт
- glyphicon glyphicon-роҳ
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-зеркашӣ
- glyphicon glyphicon-боргузорӣ
- glyphicon glyphicon-почта
- glyphicon glyphicon-бозӣ-доира
- глификон глификон-такрор
- glyphicon glyphicon-навсозӣ
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-lock
- glyphicon glyphicon-парчам
- гӯшмонакҳои glyphicon glyphicon
- glyphicon glyphicon-ҳаҷм-хомӯш
- glyphicon glyphicon-кам-ҳаҷм
- glyphicon glyphicon-баланд бардоштани ҳаҷми
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-штрих-код
- глификон-тег
- барчаспхои глификон
- glyphicon glyphicon-китоб
- glyphicon glyphicon-хатчӯб
- чопи glyphicon glyphicon
- камераи глификон
- glyphicon glyphicon-шрифт
- glyphicon glyphicon-болд
- glyphicon glyphicon-курсив
- glyphicon glyphicon-матн-баландӣ
- glyphicon glyphicon-матн-васеъ
- glyphicon glyphicon-ҳамоҳанг-чап
- glyphicon glyphicon-align-марказ
- glyphicon glyphicon-ҳамоҳанг-рост
- glyphicon glyphicon-ҳамоҳанг-аслона
- Рӯйхати glyphicon glyphicon
- glyphicon glyphicon-идент-чап
- glyphicon glyphicon-идент-рост
- glyphicon glyphicon-facetime-видео
- глификон глификон-тасвир
- glyphicon glyphicon-харитаи-маркер
- glyphicon glyphicon - танзим
- ранги глификон глификон-ранг
- glyphicon glyphicon - таҳрир
- glyphicon glyphicon-ҳисса
- глификон-санҷиши глификон
- глификон глификон-ҳаракат кардан
- glyphicon glyphicon-қадам-қадам
- glyphicon glyphicon-зуд-қафо
- glyphicon glyphicon-қафо
- глифони глификон-бозӣ
- glyphicon glyphicon-танаффус
- glyphicon glyphicon-истеъмоли
- glyphicon glyphicon-ба пеш
- glyphicon glyphicon-суръат-ба пеш
- glyphicon glyphicon-қадам-ба пеш
- баровардани глификон глификон
- glyphicon glyphicon-шеврон-чап
- glyphicon glyphicon-шеврон-рост
- glyphicon glyphicon-plus-аломати
- glyphicon glyphicon-минус-аломати
- glyphicon glyphicon-нест кардан-аломат
- аломати glyphicon glyphicon-ok-
- glyphicon glyphicon-савол-аломати
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-скриншот
- glyphicon glyphicon-нест кардан- доира
- glyphicon glyphicon-ok-doircle
- glyphicon glyphicon-бан-давраи
- glyphicon glyphicon-тирчаи-чап
- glyphicon glyphicon-тирчаи рост
- глификон глификон-тирчаи боло
- глификон глификон-тирчаи поён
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-пур
- glyphicon glyphicon-resize-хурд
- glyphicon glyphicon-нидо-аломати
- glyphicon glyphicon-тӯҳфа
- glyphicon glyphicon-барге
- глификон глификон-оташ
- glyphicon glyphicon-чашм кушода
- glyphicon glyphicon-чашм наздик
- glyphicon glyphicon-аломати огоҳкунанда
- glyphicon glyphicon-ҳавопаймо
- тақвими glyphicon glyphicon-тақвим
- glyphicon glyphicon-тасодуфӣ
- glyphicon glyphicon-тафсир
- глификон глификон-магнит
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-шеврон-поён
- glyphicon glyphicon-retweet
- аробаи хариди glyphicon glyphicon
- glyphicon glyphicon-папка-пӯшед
- glyphicon glyphicon-папка-кушодан
- glyphicon glyphicon-андозаи амудӣ
- glyphicon glyphicon-андозаи-уфуқӣ
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- глификон глификон-занг
- сертификати glyphicon glyphicon
- glyphicon glyphicon-ангушти боло
- glyphicon glyphicon-ангушти поён
- glyphicon glyphicon-даст-рост
- glyphicon glyphicon-дасти чап
- glyphicon glyphicon-даст-боло
- glyphicon glyphicon-даст-поён
- glyphicon glyphicon-давраки-тирчаи-рост
- glyphicon glyphicon-давраи-тирчаи-чап
- glyphicon glyphicon-давраки тирчаи-боло
- glyphicon glyphicon-давраки-тирчаи-поён
- глификон глификон-глобус
- калиди глификон
- glyphicon glyphicon-вазифаҳо
- филтри глифони глификон
- портфели глификон
- glyphicon glyphicon-экрани пурра
- glyphicon glyphicon-панели идоракунӣ
- glyphicon glyphicon-коғаз клип
- glyphicon glyphicon-дили холӣ
- пайванди глификон-глификон
- glyphicon glyphicon-телефон
- глификон глификон-пушпин
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-навъ
- glyphicon glyphicon-навъи-аз рӯи алифбо
- glyphicon glyphicon-навъи-аз рӯи алифбо-alt
- glyphicon glyphicon-аз рӯи-тартиб-ҷунб
- glyphicon glyphicon-аз рӯи-тартиб-alt
- glyphicon glyphicon-навъи-аз рӯи-хусусиятҳо
- glyphicon glyphicon-аз рӯи-хусусиятҳо-алт
- glyphicon glyphicon-назорат нест
- glyphicon glyphicon - васеъ кардан
- glyphicon glyphicon- фурӯпошӣ-поён
- glyphicon glyphicon- фурӯпошӣ
- glyphicon glyphicon-даромад
- glyphicon glyphicon-флеш
- glyphicon glyphicon-баромад
- glyphicon glyphicon-равзанаи нав
- glyphicon glyphicon сабт
- glyphicon glyphicon-наҷот
- glyphicon glyphicon-кушода
- glyphicon glyphicon сарфашуда
- глификон глификон-ворид
- глификон глификон-содирот
- glyphicon glyphicon-фиристад
- glyphicon glyphicon-floppy-диски
- glyphicon glyphicon-floppy-наҷот
- glyphicon glyphicon-floppy-нест кардан
- glyphicon glyphicon-floppy-захира
- glyphicon glyphicon-floppy-кушода
- glyphicon glyphicon-корти кредитӣ
- glyphicon glyphicon-интиқол
- глификон глификон-буриш
- glyphicon glyphicon-сарлавҳа
- glyphicon glyphicon фишурдашуда
- глифони глификон-гӯшмонак
- glyphicon glyphicon-phone-alt
- манораи глификон
- статистикаи глификон глификон
- glyphicon glyphicon-sd-видео
- glyphicon glyphicon-hd-видео
- glyphicon glyphicon-субтитрҳо
- glyphicon glyphicon-садо-стерео
- glyphicon glyphicon-садо-долби
- glyphicon glyphicon-садо-5-1
- glyphicon glyphicon-садо-6-1
- glyphicon glyphicon-садо-7-1
- glyphicon glyphicon-тамғаи ҳуқуқи муаллиф
- glyphicon glyphicon-тамғаи қайд
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-булут-боргузорӣ
- glyphicon glyphicon-дарахт-сӯзанбарг
- glyphicon glyphicon-дарахт-барги
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-file
- glyphicon glyphicon-кушода-файл
- сатҳи глифони глификон
- glyphicon glyphicon-нусхаи
- glyphicon glyphicon-хамираи
- glyphicon glyphicon ҳушдор
- глификон глификон-эквалайзер
- глификон глифик-подшоҳ
- глификон глификон-малика
- глификон глификон-поя
- glyphicon glyphicon-епископ
- glyphicon glyphicon-рыцарь
- glyphicon glyphicon-formula кӯдак
- хаймаи glyphicon glyphicon
- glyphicon glyphicon-тахтаи сиёҳ
- кати глифони глификон
- glyphicon glyphicon-себ
- glyphicon glyphicon-нест кардан
- glyphicon glyphicon-соати соат
- лампаи глификон
- glyphicon glyphicon-дубликат
- glyphicon glyphicon-piggy-банк
- глификон глификон-кайчи
- глификон глификон-биткоин
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- глификон глификон-йен
- glyphicon glyphicon-jpy
- глификон глификон-руб
- glyphicon glyphicon-rub
- миқёси глификон
- glyphicon glyphicon-ях-лоли
- glyphicon glyphicon-ях-лоли-мазза
- glyphicon glyphicon-тарбия
- glyphicon glyphicon-опсияи-уфуқӣ
- glyphicon glyphicon-опсияи-амудӣ
- glyphicon glyphicon-меню-гамбургер
- glyphicon glyphicon-модал-равзанаи
- равгани глификон
- глификон глификон-дона
- glyphicon glyphicon-айнаки офтобӣ
- glyphicon glyphicon-андозаи матн
- glyphicon glyphicon-матн-ранг
- glyphicon glyphicon-матн-замина
- glyphicon glyphicon-объект-ҳамоҳанг-боло
- glyphicon glyphicon-объект-ҳамоҳанг-поён
- glyphicon glyphicon-объект-ҳамоҳанг-уфуқӣ
- glyphicon glyphicon-объект-ҳамоҳанг-чап
- glyphicon glyphicon-объект-ҳамоҳанг-амудӣ
- glyphicon glyphicon-объект-ҳамоҳанг-рост
- glyphicon glyphicon-секунҷаи-рост
- glyphicon glyphicon-секунҷаи-чап
- glyphicon glyphicon-секунҷаи-поён
- glyphicon glyphicon-секунҷаи-боло
- glyphicon glyphicon-консол
- glyphicon glyphicon-суперскрипт
- glyphicon glyphicon-зерхат
- glyphicon glyphicon-меню-чап
- glyphicon glyphicon-меню-рост
- glyphicon glyphicon-меню-поён
- glyphicon glyphicon-меню
Чӣ тавр истифода бурдан
Бо сабабҳои иҷроиш, ҳама нишонаҳо синфи асосӣ ва синфи аломатҳои инфиродиро талаб мекунанд. Барои истифода, рамзи зеринро тақрибан дар ҳама ҷо ҷойгир кунед. Боварӣ ҳосил кунед, ки фосила байни нишона ва матн барои пуркунии дуруст гузоред.
Бо дигар ҷузъҳо омехта накунед
Синфҳои нишонаҳо наметавонанд мустақиман бо ҷузъҳои дигар якҷоя шаванд. Онҳо набояд дар якҷоягӣ бо синфҳои дигар дар як элемент истифода шаванд. Ба ҷои ин, лона илова кунед <span>ва синфҳои нишонаҳоро ба <span>.
Танҳо барои истифода дар элементҳои холӣ
Синфҳои нишонаҳо бояд танҳо дар унсурҳое истифода шаванд, ки мундариҷаи матн надоранд ва унсурҳои кӯдак надоранд.
Тағир додани макони шрифти нишона
Bootstrap тахмин мекунад, ки файлҳои шрифти нишонаҳо дар ../fonts/директория нисбат ба файлҳои CSS-и тартибдода ҷойгир хоҳанд шуд. Интиқол ё номи он файлҳои шрифт маънои навсозии CSS-ро бо яке аз се роҳ дорад:
- Тағир додани
@icon-font-pathва/ё@icon-font-nameтағирёбандаҳоро дар файлҳои манбаи камтар. - Опсияи URL-ҳои нисбии аз ҷониби компилятори Less пешниҳодшударо истифода баред.
url()Роҳҳоро дар CSS тартибдода иваз кунед .
Ҳар як вариантро истифода баред, ки ба танзимоти махсуси рушди шумо мувофиқат кунад.
Нишонаҳои дастрас
Версияҳои муосири технологияҳои ёрирасон мундариҷаи CSS тавлидшуда ва инчунин аломатҳои мушаххаси Юникодро эълон мекунанд. Барои роҳ надодан ба баромади номатлуб ва печида дар хонандагони экран (хусусан вақте ки нишонаҳо танҳо барои ороиш истифода мешаванд), мо онҳоро бо атрибут пинҳон мекунем 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ба a .dropdown-menuба рост мувофиқ кардани менюи афтанда.
Метавонад ҷойгиркунии иловагиро талаб кунад
Равзанаҳои афтанда ба таври худкор тавассути CSS дар ҷараёни муқаррарии ҳуҷҷат ҷойгир карда мешаванд. Ин маънои онро дорад, ки афтандаҳо метавонанд аз ҷониби волидон бо overflowхосиятҳои муайян бурида шаванд ё берун аз доираи намоиш пайдо шаванд. Ин масъалаҳоро мустақилона ҳал кунед, ки онҳо ба миён меоянд.
.pull-rightҲамоҳангсозии бекоршуда
Аз v3.1.0, мо .pull-rightменюҳои афтанда бекор кардаем. Барои ба рост мувофиқ кардани меню, -ро истифода баред .dropdown-menu-right. Ҷузъҳои ба рост ҳамоҳангшуда дар навор версияи омехтаи ин синфро барои ба таври худкор мувофиқ кардани меню истифода мебаранд. Барои бекор кардани он, истифода баред .dropdown-menu-left.
<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ба a дар афтанда илова кунед.<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">a- <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барои stacking сарҳадҳо ба ҷои тоза кардани онҳо истифода мешавад. Бо вуҷуди ин, 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>Тугмаҳои афтанда
Ҳар гуна тугмаро истифода баред, то менюи афтандаро тавассути ҷойгир кардани он дар дохили a .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'барои пешгирӣ кардани таъсири манфии номатлуб муайян кунед (масалан, элемент васеътар мешавад ва/ё гӯшаҳои мудавваршуда ҳангоми фаъол шудани абзор ё popover).
Бо дигар ҷузъҳо омехта накунед
Гурӯҳҳои шакл ё синфҳои сутуни шабакаро мустақиман бо гурӯҳҳои воридот омехта накунед. Ба ҷои ин, гурӯҳи вурудро дар дохили гурӯҳи форма ё унсури марбут ба шабака ҷойгир кунед.
Ҳамеша тамғакоғазҳоро илова кунед
Хонандагони экран бо варақаҳои шумо мушкилот хоҳанд дошт, агар шумо барои ҳар як вуруд тамға нагузоред. Барои ин гурӯҳҳои воридотӣ, боварӣ ҳосил кунед, ки ҳама гуна нишона ё функсияҳои иловагӣ ба технологияҳои ёрирасон интиқол дода мешаванд.
Техникаи дақиқе, ки бояд истифода шавад ( <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синфи асосӣ сар карда, инчунин давлатҳои муштарак. Синфҳои тағирдиҳандаро иваз кунед, то байни ҳар як услуб гузаред.
Ҷадвалҳо
Дар хотир доред, ки синф синфи асосиро .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>асоснок
Дар экранҳои васеътар аз 768px бо .nav-justified. Дар экранҳои хурдтар, истинодҳои нав ҷамъ карда мешаванд.
Истинодҳои асосноки navbar дар айни замон дастгирӣ намешаванд.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Истинодҳои ғайрифаъол
Барои ҳама ҷузъҳои нав (ҷадвалҳо ё ҳабҳо), .disabledбарои истинодҳои хокистарӣ илова кунед ва эффектҳои доварӣ надоранд .
<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>Навбар
Навори пешфарз
Навбарҳо ҷузъҳои мета ҷавобгӯ мебошанд, ки ҳамчун сарлавҳаҳои навигатсия барои барнома ё сайти шумо хидмат мекунанд. Онҳо дар намуди мобилӣ фурӯ рехта мешаванд (ва ивазшаванда мебошанд) ва бо афзоиши паҳнои дастрасии намоиш уфуқӣ мешаванд.
Истинодҳои асосноки navbar дар айни замон дастгирӣ намешаванд.
<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>Тугмаҳо
Синфро .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-ро дар самти муайяншуда илова мекунанд. Масалан, барои мувофиқ кардани истинодҳои нав, онҳоро дар алоҳидагӣ <ul>бо синфи мувофиқи утилитаҳо ҷойгир кунед.
Ин синфҳо версияҳои омехтаи .pull-leftва мебошанд .pull-right, аммо онҳо ба дархостҳои медиавӣ барои коркарди осонтари ҷузъҳои навбар дар андозаҳои дастгоҳ пешбинӣ шудаанд.
Ба боло собит шудааст
Илова .navbar-fixed-topва дохил .containerкардан ё .container-fluidба марказ ва мундариҷаи навбар.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Ба поён собит
Илова .navbar-fixed-bottomва дохил .containerкардан ё .container-fluidба марказ ва мундариҷаи навбар.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Болои статикӣ
Навбареро бо фарогирии пурраи фарох созед, ки бо илова .navbar-static-topва дохил кардани мундариҷаи навбари навор .containerё .container-fluidба марказ ва лавҳа дохил карда мешавад.
Баръакси .navbar-fixed-*дарсҳо, ба шумо лозим нест, ки ягон padding дар 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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Ҳолати ихтиёрии ғайрифаъол
Пайвандҳои пейжерӣ инчунин .disabledсинфи умумии утилитаро аз саҳифагузорӣ истифода мебаранд.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>Тамғакоғазҳо
Мисол
Намунаи сарлавҳаи нав
Намунаи сарлавҳаи нав
Намунаи сарлавҳаи нав
Намунаи сарлавҳаи нав
Намунаи сарлавҳаи нав
Намунаи сарлавҳаи нав
<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">Бо илова кардани истинодҳо, navs Bootstrap ва ғайра ҷузъҳои нав ё хонданашударо ба осонӣ таъкид кунед .
<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-ро ба монанди сарлавҳаҳо, параграфҳо ё тугмаҳо ба эскизҳо илова кунед.
<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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Дар тамоми дастгоҳҳо рафтори дурустро таъмин кунед
Боварӣ ҳосил кунед, ки <button>элементро бо data-dismiss="alert"атрибути додаҳо истифода баред.
Истинодҳо дар огоҳиҳо
Синфи утилитро .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 аниматсияҳоро дастгирӣ намекунад.
Мутобиқати Сиёсати Амнияти Content (CSP).
Агар вебсайти шумо Сиёсати Амнияти Content (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
<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ба лавҳаи пешрафт илова карданро баррасӣ кунед.
<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 нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Сарлавҳаи ВАО
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.Сарлавҳаи ВАО
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
Сарлавҳаи ВАО
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, 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инчунин вуҷуд доранд ва қаблан ҳамчун як ҷузъи ҷузъи медиа истифода мешуданд, аммо барои ин истифода аз v3.3.0 бекор карда шудаанд. Онҳо тақрибан ба .media-leftва баробаранд .media-right, ба истиснои он ки .media-rightбояд пас аз .media-bodyhtml ҷойгир карда шавад.
Ҳамоҳангсозии ВАО
Тасвирҳо ё дигар васоити ахбори омма метавонанд ба боло, миёна ё поён мувофиқ карда шаванд. Пешфарз ба боло мувофиқ карда шудааст.
Воситаҳои болоӣ
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.
Васоити ахбори миёна
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.
Воситаи ба поён мувофиқшуда
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.
<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 нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, 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 facilise дар
- Морби Лео Рисус
- 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 facilise дар
- 1Морби Лео Рисус
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Элементҳои алоқаманд
Пайваст кардани ҷузъҳои гурӯҳи рӯйхат бо истифода аз тегҳои лангар ба ҷои ҷузъҳои рӯйхат (ин инчунин маънои волидайнро <div>ба ҷои <ul>). Дар атрофи ҳар як унсур ба волидайни инфиродӣ лозим нест.
<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>Ададҳои ғайрифаъол
Ба .disableda илова кунед, .list-group-itemто хокистарранг шавад, то ғайрифаъол нишон дода шавад.
<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 facilise дар
- 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 ва дар вақти дилхоҳ. Maecenas sed diam eget risus varius blandit.
Сарлавҳаи ҷузъҳои гурӯҳро рӯйхат кунед
Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Maecenas sed diam eget risus varius blandit.
Сарлавҳаи ҷузъҳои гурӯҳро рӯйхат кунед
Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Maecenas 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 augue pharetra. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
<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 | Ларри | парранда |
<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 augue pharetra. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilise дар
- Морби Лео Рисус
- 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вақте ки шумо мехоҳед услубро барои атрибутҳои дигар мувофиқ кунед.
Pro-Tip! Ба шумо лозим нест, ки ба с-и худ дохил frameborder="0"кунед <iframe>, зеро мо онро барои шумо бекор мекунем.
<!-- 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>