Глифҳои дастрас
Зиёда аз 250 глифро дар формати шрифт аз маҷмӯи Glyphicon Halflings дар бар мегирад. Glyphicons Halflings одатан ройгон дастрас нестанд, аммо созандаи онҳо онҳоро барои Bootstrap ройгон дастрас кардааст. Ҳамчун ташаккур, мо танҳо хоҳиш мекунем, ки то ҳадди имкон истиноди бозгашт ба Glyphicons дохил кунед.
Чӣ тавр истифода бурдан
Бо сабабҳои иҷроиш, ҳама нишонаҳо синфи асосӣ ва синфи аломатҳои инфиродиро талаб мекунанд. Барои истифода, рамзи зеринро тақрибан дар ҳама ҷо ҷойгир кунед. Боварӣ ҳосил кунед, ки фосила байни нишона ва матн барои пуркунии дуруст гузоред.
Бо дигар ҷузъҳо омехта накунед
Синфҳои нишонаҳо наметавонанд мустақиман бо ҷузъҳои дигар якҷоя шаванд. Онҳо набояд дар якҷоягӣ бо синфҳои дигар дар як элемент истифода шаванд. Ба ҷои ин, лона илова кунед <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 ва рафтори услуби қуттии қайд илова кунед .
Боварӣ ҳосил кунед, ки дуруст аст 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>
элементҳо
Танҳо як қатор .btn
s-ро дар .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
Пайвандҳо ҳамчун тугмаҳо амал мекунанд
Агар <a>
унсурҳо ҳамчун тугмаҳо истифода шаванд - ба ҷои гузаштан ба ҳуҷҷат ё қисмати дигар дар саҳифаи ҷорӣ - ангеза додани функсияҳои дохили саҳифа - ба онҳо инчунин бояд role="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).
Як изофа ё тугмаро дар ҳар ду тарафи вуруд ҷойгир кунед. Шумо инчунин метавонед якеро дар ҳар ду тарафи вуруд ҷойгир кунед.
Мо иловаҳои сершуморро ( .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
синфи асосӣ сар карда, инчунин давлатҳои муштарак. Синфҳои тағирдиҳандаро иваз кунед, то байни ҳар як услуб гузаред.
Истифодаи navs барои панелҳои ҷадвал плагини ҷадвалҳои JavaScript-ро талаб мекунад
Барои ҷадвалбандиҳо бо минтақаҳои ҷадвалбандишаванда, шумо бояд плагинҳои JavaScript -ро истифода баред . Нишондиҳӣ инчунин role
атрибутҳои иловагӣ ва ARIA-ро талаб мекунад - барои тафсилоти бештар ба аломатгузории намунаи плагин нигаред.
Навиҳоро, ки ҳамчун паймоиш истифода мешаванд, дастрас кунед
Агар шумо navs-ро барои таъмин кардани сатри паймоиш истифода баред, боварӣ ҳосил кунед, ки 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>
асоснок
Дар экранҳои васеътар аз 768px бо .nav-justified
. Дар экранҳои хурдтар, истинодҳои нав ҷамъ карда мешаванд.
Истинодҳои асосноки navbar дар айни замон дастгирӣ намешаванд.
Сафари ва ҷавобгӯ асоснок navs
Аз v9.1.2, Safari хатогиеро нишон медиҳад, ки дар он тағир додани андозаи браузери шумо ба таври уфуқӣ боиси намоиши хатогиҳо дар навсозии асоснок мегардад, ки ҳангоми навсозӣ тоза карда мешаванд. Ин хато дар мисоли асосноки nav низ нишон дода шудааст .
<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>
Навори пешфарз
Навбарҳо ҷузъҳои мета ҷавобгӯ мебошанд, ки ҳамчун сарлавҳаҳои навигатсия барои барнома ё сайти шумо хидмат мекунанд. Онҳо дар намуди мобилӣ фурӯ рехта мешаванд (ва ивазшаванда мебошанд) ва бо афзоиши паҳнои дастрасии намоиш уфуқӣ мешаванд.
Истинодҳои асосноки navbar дар айни замон дастгирӣ намешаванд.
Мазмуни пурбор
Азбаски Bootstrap намедонад, ки мундариҷа дар панели шумо чӣ қадар ҷой лозим аст, шумо метавонед бо печонидани мундариҷа ба сатри дуюм дучор шавед. Барои ҳалли ин, шумо метавонед:
Миқдор ё паҳнои ҷузъҳои навбарро кам кунед.
Ҷузъҳои муайяни навбарро бо андозаи муайяни экран бо истифода аз синфҳои хидматрасонии ҷавобгӯ пинҳон кунед .
Нуқтаеро, ки дар он навбари шумо байни реҷаи шикаста ва уфуқӣ мегузарад, тағир диҳед. Тағйирёбандаро танзим @grid-float-breakpoint
кунед ё дархости медиаи худро илова кунед.
Васлкунаки JavaScript-ро талаб мекунад
Агар JavaScript ғайрифаъол бошад ва равзанаи намоиш ба қадри кофӣ танг бошад, ки навор фурӯ ғалтад, васеъ кардани навор ва дидани мундариҷа дар дохили .navbar-collapse
.
Навори посухдиҳанда талаб мекунад, ки плагини шикаста ба версияи Bootstrap дохил карда шавад.
Тағйир додани нуқтаи кандашудаи навбарандаи мобилӣ
Навор ба намуди мобилии амудии худ фурӯ меафтад, вақте ки @grid-float-breakpoint
порти намоиш аз @grid-float-breakpoint
. Ин тағирёбандаро дар Сарчашмаи Камтар танзим кунед, то вақте ки навор фурӯпошӣ/васеъ мешавад, назорат кунед. Арзиши пешфарз ин аст 768px
(хурдтарин экрани "хурд" ё "планшет").
Наворҳоро дастрас кунед
Боварӣ ҳосил кунед, ки як <nav>
унсурро истифода баред ё агар унсури умумӣтаре ба мисли , истифода шавад, ба ҳар як навор <div>
илова кунед, role="navigation"
то онро ҳамчун як минтақаи муҳим барои корбарони технологияҳои ёрирасон муайян кунад.
<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-btn
мумкин аст дар <a>
ва <input>
унсурҳои истифода бурда мешавад. Аммо, на .navbar-btn
бояд синфҳои тугмаҳои стандартӣ дар <a>
унсурҳои дохили .navbar-nav
.
Матн
Сатрҳои матнро дар элемент бо .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-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>
. Арзишҳои шахсии худро санҷед ё порчаи моро дар зер истифода баред. Маслиҳат: Бо нобаёнӣ, навор 50px баланд аст.
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>
. Арзишҳои шахсии худро санҷед ё порчаи моро дар зер истифода баред. Маслиҳат: Бо нобаёнӣ, навор 50px баланд аст.
body { padding-bottom : 70px ; }
Боварӣ ҳосил кунед, ки инро пас аз CSS асосии Bootstrap дохил кунед.
Болои статикӣ
Навбареро бо фарогирии пурраи фарох созед, ки бо илова .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>
Ҳолатҳои ғайрифаъол ва фаъол
Истинодҳо барои ҳолатҳои гуногун танзим карда мешаванд. .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>
Барои паҳнои пурраи ҷамботрон ва бидуни кунҷҳои мудаввар, онро берун аз ҳама .container
s ҷойгир кунед ва ба ҷои он .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-ро ба монанди сарлавҳаҳо, параграфҳо ё тугмаҳо ба эскизҳо илова кунед.
Нишони ангора
Дар ин ҷо хеле осон аст, осонтар аст. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.
Тугма Тугма
Нишони ангора
Дар ин ҷо хеле осон аст, осонтар аст. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.
Тугма Тугма
Нишони ангора
Дар ин ҷо хеле осон аст, осонтар аст. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. 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" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
Истинодҳо дар огоҳиҳо
Синфи утилитро .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
кунед, то онҳоро ҷамъ кунед.
35% Анҷом (муваффақият)
20% Анҷом (огоҳӣ)
10% Анҷом (хатар)
<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>
Услубҳои объекти абстрактӣ барои сохтани намудҳои гуногуни ҷузъҳо (ба монанди шарҳҳои блог, твитҳо ва ғайра), ки дар баробари мундариҷаи матнӣ тасвири ба чап ё рост ҳамоҳангшуда доранд.
Медиа пешфарз объекти медиаро (тасвирҳо, видео, аудио) дар тарафи чап ё рости блоки мундариҷа нишон медиҳад.
<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-body
html ҷойгир карда шавад.
Тасвирҳо ё дигар васоити ахбори омма метавонанд ба боло, миёна ё поён мувофиқ карда шаванд. Пешфарз ба боло мувофиқ карда шудааст.
<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>
Бо каме аломатгузории иловагӣ, шумо метавонед дар дохили рӯйхат медиаро истифода баред (барои риштаҳои шарҳ ё рӯйхати мақолаҳо муфид аст).
<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>
Нишонҳо
Ба ягон ҷузъи гурӯҳи рӯйхат ҷузъи нишонҳо илова кунед ва он ба таври худкор дар тарафи рост ҷойгир карда мешавад.
14 Cras justo odio
2 Dapibus 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
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Porta ac consectetur ac
Вестибулум дар эрос
<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
то хокистарранг шавад, то ғайрифаъол нишон дода шавад.
<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-ро дар дохили худ илова кунед, ҳатто барои гурӯҳҳои рӯйхат алоқаманд, ба монанди яке аз зер.
<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
Ларри
парранда
@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 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>