Awọn glyphs ti o wa

Pẹlu diẹ sii ju 250 glyphs ni ọna kika fonti lati Glyphicon Halflings ṣeto. Glyphicons Halflings ni deede ko wa fun ọfẹ, ṣugbọn ẹlẹda wọn ti jẹ ki wọn wa fun Bootstrap laisi idiyele. Gẹgẹbi o ṣeun, a beere pe ki o ṣafikun ọna asopọ kan pada si Glyphicons nigbakugba ti o ṣeeṣe.

glyphicon glyphicon-aami akiyesi
glyphicon glyphicon-plus
glyphicon glyphicon-Euro
glyphicon glyphicon-eur
glyphicon glyphicon-iyokuro
glyphicon glyphicon-awọsanma
apoowe glyphicon glyphicon
glyphicon glyphicon-ikọwe
glyphicon glyphicon-gilasi
glyphicon glyphicon-orin
glyphicon glyphicon-wa
glyphicon glyphicon-ọkàn
glyphicon glyphicon-irawọ
glyphicon glyphicon-irawọ-sofo
glyphicon glyphicon-olumulo
glyphicon glyphicon-fiimu
glyphicon glyphicon-th-tobi
glyphicon glyphicon-th
glyphicon glyphicon-th-akojọ
glyphicon glyphicon-ok
glyphicon glyphicon-yọ kuro
glyphicon glyphicon-sun-inu
glyphicon glyphicon-sun-jade
glyphicon glyphicon-pipa
glyphicon glyphicon-ifihan agbara
glyphicon glyphicon-cog
glyphicon glyphicon-idọti
glyphicon glyphicon-ile
glyphicon glyphicon-faili
glyphicon glyphicon-akoko
glyphicon glyphicon-opopona
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-ikojọpọ
glyphicon glyphicon-iwọle
glyphicon glyphicon-play-Circle
glyphicon glyphicon-tun
glyphicon glyphicon-itura
glyphicon glyphicon-akojọ-alt
glyphicon glyphicon-titiipa
glyphicon glyphicon-flag
glyphicon glyphicon-agbekọri
glyphicon glyphicon-iwọn didun-pipa
glyphicon glyphicon-iwọn didun-isalẹ
glyphicon glyphicon-iwọn-soke
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-afi
glyphicon glyphicon-iwe
glyphicon glyphicon-bukumaaki
glyphicon glyphicon-titẹ
glyphicon glyphicon-kamẹra
glyphicon glyphicon-font
glyphicon glyphicon-gboya
glyphicon glyphicon-italic
glyphicon glyphicon-ọrọ-giga
glyphicon glyphicon-ọrọ-iwọn
glyphicon glyphicon-mö-osi
glyphicon glyphicon-align-aarin
glyphicon glyphicon-mö-ọtun
glyphicon glyphicon-align-juto
glyphicon glyphicon-akojọ
glyphicon glyphicon-indent-osi
glyphicon glyphicon-indent-ọtun
glyphicon glyphicon-facetime-fidio
glyphicon glyphicon-aworan
glyphicon glyphicon-map-ami
glyphicon glyphicon-ṣatunṣe
glyphicon glyphicon-tint
glyphicon glyphicon-àtúnṣe
glyphicon glyphicon-pin
glyphicon glyphicon-ṣayẹwo
glyphicon glyphicon-gbe
glyphicon glyphicon-igbese-sẹhin
glyphicon glyphicon-yara-pada
glyphicon glyphicon-sẹhin
glyphicon glyphicon-play
glyphicon glyphicon-daduro
glyphicon glyphicon-duro
glyphicon glyphicon-siwaju
glyphicon glyphicon-yara-siwaju
glyphicon glyphicon-igbese-siwaju
glyphicon glyphicon-jade
glyphicon glyphicon-chevron-osi
glyphicon glyphicon-chevron-ọtun
glyphicon glyphicon-plus-ami
glyphicon glyphicon-iyokuro-ami
glyphicon glyphicon-yiyọ-ami
glyphicon glyphicon-ok-ami
glyphicon glyphicon-ibeere-ami
glyphicon glyphicon-info-ami
glyphicon glyphicon-screenshot
glyphicon glyphicon-yọ-yika
glyphicon glyphicon-ok-yika
glyphicon glyphicon-ban-yika
glyphicon glyphicon-ọfà-osi
glyphicon glyphicon-ọfà-ọtun
glyphicon glyphicon-ọfà-soke
glyphicon glyphicon-ọfà-isalẹ
glyphicon glyphicon-pin-alt
glyphicon glyphicon-iwọn-kikun
glyphicon glyphicon-iwọn-kekere
glyphicon glyphicon-exclamation-ami
glyphicon glyphicon-ẹbun
ewe glyphicon glyphicon
glyphicon glyphicon-iná
glyphicon glyphicon-oju-ìmọ
glyphicon glyphicon-oju-sunmọ
glyphicon glyphicon-ikilọ-ami
glyphicon glyphicon-ofurufu
glyphicon glyphicon-kalẹnda
glyphicon glyphicon-ID
glyphicon glyphicon-ọrọ
glyphicon glyphicon-oofa
glyphicon glyphicon-chevron-soke
glyphicon glyphicon-chevron-isalẹ
glyphicon glyphicon-retweet
glyphicon glyphicon-tio-kẹkẹ
glyphicon glyphicon-folda-sunmọ
glyphicon glyphicon-folda-ìmọ
glyphicon glyphicon-iwọn-inaro
glyphicon glyphicon-iwọn-petele
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-Belii
iwe-ẹri glyphicon glyphicon
glyphicon glyphicon-atampako-soke
glyphicon glyphicon-atampako-isalẹ
glyphicon glyphicon-ọwọ-ọtun
glyphicon glyphicon-ọwọ-osi
glyphicon glyphicon-ọwọ-soke
glyphicon glyphicon-ọwọ-isalẹ
glyphicon glyphicon-yika-ọfa-ọtun
glyphicon glyphicon-yika-ọfa-osi
glyphicon glyphicon- Circle-ọfà-soke
glyphicon glyphicon-yika-ọfa-isalẹ
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-awọn iṣẹ-ṣiṣe
glyphicon glyphicon-àlẹmọ
glyphicon glyphicon-kikuru
glyphicon glyphicon-ni kikun iboju
glyphicon glyphicon-dasibodu
glyphicon glyphicon-paperclip
glyphicon glyphicon-okan-sofo
glyphicon glyphicon-ọna asopọ
glyphicon glyphicon-foonu
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-iru
glyphicon glyphicon-to-nipasẹ-alfabeti
glyphicon glyphicon-to-nipasẹ-alfabeti-alt
glyphicon glyphicon-to-nipasẹ-ibere
glyphicon glyphicon-to-nipasẹ-ibere-alt
glyphicon glyphicon-to-nipasẹ-awọn abuda
glyphicon glyphicon-to-nipasẹ-awọn abuda-alt
glyphicon glyphicon-aiṣayẹwo
glyphicon glyphicon- faagun
glyphicon glyphicon-wó-isalẹ
glyphicon glyphicon-wó-soke
glyphicon glyphicon-iwọle
glyphicon glyphicon-flash
glyphicon glyphicon-jade-jade
glyphicon glyphicon-window tuntun
glyphicon glyphicon-igbasilẹ
glyphicon glyphicon-fipamọ
glyphicon glyphicon-ìmọ
glyphicon glyphicon-ti o ti fipamọ
glyphicon glyphicon-gbe wọle
glyphicon glyphicon-okeere
glyphicon glyphicon-firanṣẹ
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-ti o ti fipamọ
glyphicon glyphicon-floppy-yọ kuro
glyphicon glyphicon-floppy-fipamọ
glyphicon glyphicon-floppy-ìmọ
glyphicon glyphicon-kirẹditi-kaadi
glyphicon glyphicon-gbigbe
glyphicon glyphicon-cutlery
glyphicon glyphicon-akọsori
glyphicon glyphicon-fisinuirindigbindigbin
glyphicon glyphicon-earphone
glyphicon glyphicon-foonu-alt
glyphicon glyphicon-ẹṣọ
glyphicon glyphicon-awọn iṣiro
glyphicon glyphicon-sd-fidio
glyphicon glyphicon-hd-fidio
glyphicon glyphicon-awọn atunkọ
glyphicon glyphicon-ohun-sitẹrio
glyphicon glyphicon-ohun-dolby
glyphicon glyphicon-ohun-5-1
glyphicon glyphicon-ohun-6-1
glyphicon glyphicon-ohun-7-1
glyphicon glyphicon-afọwọkọ-ami
glyphicon glyphicon-aami-ìforúkọsílẹ
glyphicon glyphicon-awọsanma-download
glyphicon glyphicon-awọsanma-ikojọpọ
glyphicon glyphicon-igi-conifer
glyphicon glyphicon-igi-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-fipamọ-faili
glyphicon glyphicon-ìmọ-faili
glyphicon glyphicon-ipele-soke
glyphicon glyphicon-daakọ
glyphicon glyphicon-lẹẹmọ
glyphicon glyphicon-gbigbọn
glyphicon glyphicon-equalizer
glyphicon glyphicon-ọba
glyphicon glyphicon-ayaba
glyphicon glyphicon-pawn
glyphicon glyphicon-Biṣọọbu
glyphicon glyphicon-knight
glyphicon glyphicon-omo-formula
glyphicon glyphicon-agọ
glyphicon glyphicon-blackboard
glyphicon glyphicon-ibusun
glyphicon glyphicon-apple
glyphicon glyphicon-nu
glyphicon glyphicon-hourglass
glyphicon glyphicon-fitila
glyphicon glyphicon-àdáwòkọ
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-iwọn
glyphicon glyphicon-yinyin-lolly
glyphicon glyphicon-yinyin-lolly-lenu
glyphicon glyphicon-ẹkọ
glyphicon glyphicon-aṣayan-petele
glyphicon glyphicon-aṣayan-inaro
glyphicon glyphicon-akojọ-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-epo
glyphicon glyphicon-ọkà
glyphicon glyphicon-jigi
glyphicon glyphicon-ọrọ-iwọn
glyphicon glyphicon-ọrọ-awọ
glyphicon glyphicon-ọrọ-lẹhin
glyphicon glyphicon-ohun-mö-oke
glyphicon glyphicon-ohun-mö-isalẹ
glyphicon glyphicon-ohun-mö-petele
glyphicon glyphicon-ohun-mö-osi
glyphicon glyphicon-ohun-mö-inaro
glyphicon glyphicon-ohun-mö-ọtun
glyphicon glyphicon-triangle-ọtun
glyphicon glyphicon-triangle-osi
glyphicon glyphicon-triangle-isalẹ
glyphicon glyphicon-triangle-oke
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-alabapin
glyphicon glyphicon-akojọ-osi
glyphicon glyphicon-akojọ-ọtun
glyphicon glyphicon-akojọ-isalẹ
glyphicon glyphicon-akojọ-soke

Bawo ni lati lo

Fun awọn idi iṣẹ ṣiṣe, gbogbo awọn aami nilo kilasi ipilẹ ati kilasi aami kọọkan. Lati lo, gbe koodu atẹle naa si ibikibi. Rii daju lati fi aaye silẹ laarin aami ati ọrọ fun fifin to dara.

Maṣe dapọ pẹlu awọn paati miiran

Awọn kilasi aami ko le ṣe idapo taara pẹlu awọn paati miiran. Wọn ko yẹ ki o lo pẹlu awọn kilasi miiran lori eroja kanna. Dipo, ṣafikun itẹ-ẹi kan <span>ki o lo awọn kilasi aami si faili <span>.

Nikan fun lilo lori sofo eroja

Awọn kilasi aami yẹ ki o lo nikan lori awọn eroja ti ko si akoonu ọrọ ninu ati pe ko ni awọn eroja ọmọ.

Yiyipada awọn aami font ipo

Bootstrap dawọle awọn faili fonti aami yoo wa ninu iwe ../fonts/ilana, ni ibatan si awọn faili CSS ti o ṣajọ. Gbigbe tabi fun lorukọmii awọn faili fonti tumọ si mimu imudojuiwọn CSS ni ọkan ninu awọn ọna mẹta:

Yipada @icon-font-pathati/tabi @icon-font-nameawọn oniyipada ninu orisun Awọn faili Kere.
Lo awọn ojulumo URL awọn aṣayan ti a pese nipasẹ Kere alakojo.
Yi awọn ipa- url()ọna pada ninu CSS ti a ṣajọ.

Lo eyikeyi aṣayan ti o dara julọ fun iṣeto idagbasoke rẹ pato.

Awọn aami wiwọle

Awọn ẹya ode oni ti awọn imọ-ẹrọ iranlọwọ yoo kede akoonu ti ipilẹṣẹ CSS, bakanna bi awọn ohun kikọ Unicode kan pato. Lati yago fun awọn abajade airotẹlẹ ati iruju ni awọn oluka iboju (paapaa nigbati awọn aami ba lo fun ohun ọṣọ nikan), a tọju wọn pẹlu abuda naa aria-hidden="true".

Ti o ba n lo aami kan lati sọ itumọ (dipo bi nkan ti ohun ọṣọ nikan), rii daju pe itumọ yii tun gbejade si awọn imọ-ẹrọ iranlọwọ - fun apẹẹrẹ, pẹlu akoonu afikun, ti o farapamọ ni wiwo pẹlu .sr-onlykilasi naa.

Ti o ba n ṣẹda awọn idari laisi ọrọ miiran (bii aami <button>ti o ni aami nikan), o yẹ ki o pese akoonu omiiran nigbagbogbo lati ṣe idanimọ idi iṣakoso, ki o le ni oye si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ. Ni ọran yii, o le ṣafikun aria-labelabuda kan lori iṣakoso funrararẹ.

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

Awọn apẹẹrẹ

Lo wọn ni awọn bọtini, awọn ẹgbẹ bọtini fun ọpa irinṣẹ, lilọ kiri, tabi awọn igbewọle fọọmu ti a ti ṣetan.

<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>

Aami ti a lo ninu itaniji lati fihan pe o jẹ ifiranṣẹ aṣiṣe, pẹlu ọrọ afikun .sr-onlylati ṣe afihan itọka yii si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Tẹ adirẹsi imeeli to wulo sii

<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>

Toggle, Akojọ ọrọ-ọrọ fun iṣafihan awọn atokọ ti awọn ọna asopọ. Ṣe ibanisọrọ pẹlu ohun itanna JavaScript silẹ .

Apeere

Pari okunfa dropdown ati akojọ aṣayan silẹ laarin .dropdown, tabi nkan miiran ti o sọ position: relative;. Lẹhinna fi HTML akojọ aṣayan kun.

<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>

Awọn akojọ aṣayan silẹ le yipada lati faagun si oke (dipo si isalẹ) nipa fifi kun .dropupsi obi.

<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>

Titete

Nipa aiyipada, akojọ aṣayan silẹ ti wa ni ipo laifọwọyi 100% lati oke ati ni apa osi ti obi rẹ. Fikun -un .dropdown-menu-rightsi .dropdown-menuapa ọtun mö akojọ aṣayan silẹ.

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

Awọn akọle

Ṣafikun akọsori kan si aami awọn apakan awọn iṣe ni eyikeyi akojọ aṣayan silẹ.

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

Olupin

Ṣafikun olupin kan lati ya lẹsẹsẹ awọn ọna asopọ ni akojọ aṣayan silẹ.

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

Awọn ohun akojọ aṣayan alaabo

Ṣafikun .disabled- un <li>sinu silẹ silẹ lati mu ọna asopọ ṣiṣẹ.

<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>

Ṣe akojọpọ lẹsẹsẹ awọn bọtini papọ lori laini ẹyọkan pẹlu ẹgbẹ bọtini. Ṣafikun redio JavaScript iyan ati ihuwasi aṣa apoti pẹlu ohun itanna awọn bọtini wa .

Awọn imọran irinṣẹ & awọn agbejade ni awọn ẹgbẹ bọtini nilo eto pataki

Nigbati o ba nlo awọn itọsona irinṣẹ tabi awọn agbejade lori awọn eroja laarin a .btn-group, iwọ yoo ni lati pato aṣayan container: 'body'lati yago fun awọn ipa ẹgbẹ ti aifẹ (gẹgẹbi nkan ti o gbooro sii ati/tabi sisọnu awọn igun yika nigbati ọpa irinṣẹ tabi agbejade ba ti ṣiṣẹ).

Rii daju pe o tọ `role`ati pese aami kan

Ni ibere fun awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju - lati fihan pe awọn bọtini kan ti wa ni akojọpọ, ẹya ti o yẹ rolenilo lati pese. Fun awọn ẹgbẹ bọtini, eyi yoo jẹ role="group", lakoko ti awọn ọpa irinṣẹ yẹ ki o ni role="toolbar".

Iyatọ kan jẹ awọn ẹgbẹ eyiti o ni iṣakoso kan nikan (fun apẹẹrẹ awọn ẹgbẹ bọtini idalare pẹlu <button>awọn eroja) tabi sisọ silẹ.

Ni afikun, awọn ẹgbẹ ati awọn ọpa irinṣẹ yẹ ki o fun aami ti o han gbangba, nitori ọpọlọpọ awọn imọ-ẹrọ iranlọwọ yoo bibẹẹkọ ko kede wọn, laibikita wiwa ti abuda to rolepe. Ninu awọn apẹẹrẹ ti a pese nihin, a lo aria-label, ṣugbọn awọn omiiran bii o aria-labelledbytun le ṣee lo.

Apẹẹrẹ ipilẹ

Pa awọn bọtini kan lẹsẹsẹ pẹlu .btnsinu .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>

Darapọ tosaaju ti <div class="btn-group">sinu kan <div class="btn-toolbar">fun eka sii irinše.

<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>

Titobi

Dipo ti lilo awọn kilasi iwọn bọtini si gbogbo bọtini ni ẹgbẹ kan, kan ṣafikun .btn-group-*si ọkọọkan .btn-group, pẹlu nigbati o ntẹ awọn ẹgbẹ lọpọlọpọ.

<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>

Itẹle

Gbe kan si .btn-grouplaarin miiran .btn-groupnigba ti o ba fẹ awọn akojọ aṣayan silẹ adalu pẹlu kan lẹsẹsẹ ti awọn bọtini.

<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>

inaro iyatọ

Ṣe eto awọn bọtini han ni inaro tolera kuku ju petele. Awọn silẹ bọtini Pipin ko ni atilẹyin nibi.

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

Lare bọtini awọn ẹgbẹ

Ṣe ẹgbẹ kan ti awọn bọtini na ni awọn iwọn dogba lati na gbogbo iwọn ti obi rẹ. Tun ṣiṣẹ pẹlu awọn silẹ bọtini laarin ẹgbẹ bọtini.

Mimu awọn aala

Nitori HTML kan pato ati CSS ti a lo lati ṣe idalare awọn bọtini (eyun display: table-cell), awọn aala laarin wọn jẹ ilọpo meji. Ni deede awọn ẹgbẹ bọtini, margin-left: -1pxti wa ni lo lati akopọ awọn aala dipo ti yọ wọn. Sibẹsibẹ, marginko ṣiṣẹ pẹlu display: table-cell. Bi abajade, da lori awọn isọdi rẹ si Bootstrap, o le fẹ lati yọkuro tabi tun awọ awọn aala.

IE8 ati awọn aala

Internet Explorer 8 ko ṣe awọn aala lori awọn bọtini ni ẹgbẹ bọtini idalare, boya o wa lori <a>tabi <button>awọn eroja. Lati wa ni ayika yẹn, fi ipari si bọtini kọọkan ni omiiran .btn-group.

Wo #12476 fun alaye diẹ sii.

Pẹlu `<a>`awọn eroja

O kan ipari si kan lẹsẹsẹ ti .btns ni .btn-group.btn-group-justified.

Osi Arin ọtun

Aarin osi

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

Awọn ọna asopọ ṣiṣẹ bi awọn bọtini

Ti <a>a ba lo awọn eroja lati ṣiṣẹ bi awọn bọtini – nfa iṣẹ ṣiṣe inu oju-iwe, dipo lilọ kiri si iwe miiran tabi apakan laarin oju-iwe lọwọlọwọ – wọn yẹ ki o tun fun ni role="button".

Pẹlu `<button>`awọn eroja

Lati lo awọn ẹgbẹ bọtini idalare pẹlu <button>awọn eroja, o gbọdọ fi ipari si bọtini kọọkan ni ẹgbẹ bọtini kan . Pupọ awọn aṣawakiri ko lo deede CSS wa fun idalare si <button>awọn eroja, ṣugbọn niwọn igba ti a ṣe atilẹyin awọn silẹ bọtini, a le ṣiṣẹ ni ayika yẹn.

<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>

Lo eyikeyi bọtini lati ma nfa akojọ aṣayan silẹ nipa gbigbe si laarin kan .btn-groupati pese isamisi akojọ aṣayan to dara.

Igbẹkẹle ohun itanna

Bọtini silẹ silẹ nilo ohun itanna silẹ lati wa ninu ẹya Bootstrap rẹ.

Awọn silẹ bọtini ẹyọkan

Yi bọtini kan pada sinu sisọ silẹ pẹlu awọn ayipada isamisi ipilẹ diẹ.

<!-- 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>

Pipin bọtini dropdowns

Bakanna, ṣẹda awọn silẹ bọtini pipin pẹlu awọn ayipada isamisi kanna, nikan pẹlu bọtini lọtọ.

<!-- 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>

Titobi

Bọtini dropdowns ṣiṣẹ pẹlu awọn bọtini ti gbogbo titobi.

<!-- 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>

Iyatọ silẹ

Ṣe okunfa awọn akojọ aṣayan silẹ loke awọn eroja nipa fifi kun .dropupsi obi.

<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>

Fa awọn idari fọọmu fa nipasẹ fifi ọrọ kun tabi awọn bọtini ṣaaju, lẹhin, tabi ni ẹgbẹ mejeeji ti eyikeyi orisun-ọrọ <input>. Lo .input-grouppẹlu kan .input-group-addontabi .input-group-btnlati murasilẹ tabi fi awọn eroja kun si ẹyọkan .form-control.

Textual `<input>`s nikan

Yago fun lilo <select>awọn eroja nibi nitori wọn ko le ṣe aṣa ni kikun ni awọn aṣawakiri WebKit.

Yago fun lilo <textarea>awọn eroja nibi nitori pe abuda wọn rowskii yoo bọwọ fun ni awọn igba miiran.

Awọn imọran irinṣẹ & awọn agbejade ninu awọn ẹgbẹ titẹ sii nilo eto pataki

Nigbati o ba nlo awọn itọsona irinṣẹ tabi awọn agbejade lori awọn eroja laarin ohun .input-group, iwọ yoo ni lati pato aṣayan container: 'body'lati yago fun awọn ipa ẹgbẹ ti aifẹ (gẹgẹbi nkan ti o gbooro sii ati/tabi sisọnu awọn igun yika nigbati ọpa irinṣẹ tabi agbejade ba ti ṣiṣẹ).

Maṣe dapọ pẹlu awọn paati miiran

Maṣe dapọ awọn ẹgbẹ fọọmu tabi awọn kilasi iwe akoj taara pẹlu awọn ẹgbẹ titẹ sii. Dipo, itẹ-ẹiyẹ ẹgbẹ titẹ sii inu ẹgbẹ fọọmu tabi eroja ti o jọmọ akoj.

Fi awọn akole kun nigbagbogbo

Awọn oluka iboju yoo ni wahala pẹlu awọn fọọmu rẹ ti o ko ba pẹlu aami kan fun gbogbo igbewọle. Fun awọn ẹgbẹ igbewọle wọnyi, rii daju pe eyikeyi aami afikun tabi iṣẹ ṣiṣe wa si awọn imọ-ẹrọ iranlọwọ.

Ilana gangan ti o yẹ lati lo (awọn eroja ti o han <label>, <label>awọn eroja ti o farapamọ nipa lilo .sr-onlykilasi, tabi lilo aria-label, aria-labelledby, aria-describedby, titletabi placeholderabuda) ati iru alaye afikun ti yoo nilo lati gbejade yoo yatọ si da lori iru ẹrọ ailorukọ wiwo gangan ti o n ṣe imuse. Awọn apẹẹrẹ ti o wa ni apakan yii pese diẹ ti a daba, awọn isunmọ-ọrọ kan pato.

Apẹẹrẹ ipilẹ

Fi afikun kan tabi bọtini si ẹgbẹ mejeeji ti titẹ sii. O tun le gbe ọkan si ẹgbẹ mejeeji ti titẹ sii.

A ko ṣe atilẹyin ọpọlọpọ awọn afikun ( .input-group-addontabi .input-group-btn) ni ẹgbẹ kan.

A ko ṣe atilẹyin awọn iṣakoso fọọmu-pupọ ni ẹgbẹ titẹ sii kan.

<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>

Titobi

Ṣafikun awọn kilasi iwọn fọọmu ojulumo si .input-groupararẹ ati awọn akoonu inu yoo yipada laifọwọyi-ko si iwulo fun atunwi awọn kilasi iwọn iṣakoso fọọmu lori ipin kọọkan.

<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>

Awọn apoti ayẹwo ati awọn addons redio

Fi apoti ayẹwo eyikeyi tabi aṣayan redio laarin addoni ẹgbẹ titẹ sii dipo ọrọ.

<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 -->

Awọn afikun bọtini

Awọn bọtini ni awọn ẹgbẹ titẹ sii yatọ diẹ ati pe o nilo ipele afikun kan ti itẹ-ẹiyẹ. Dipo .input-group-addon, iwọ yoo nilo lati lo .input-group-btnlati fi ipari si awọn bọtini. Eyi nilo nitori awọn aṣa aṣawakiri aiyipada ti a ko le bori.

<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 -->

Awọn bọtini pẹlu dropdowns

<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 -->

Awọn bọtini ti a pin

<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>

Awọn bọtini pupọ

Lakoko ti o le ni afikun kan nikan ni ẹgbẹ kan, o le ni awọn bọtini pupọ inu ẹyọkan .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>

Navs ti o wa ni Bootstrap ti pin isamisi, bẹrẹ pẹlu .navkilasi mimọ, bakanna bi awọn ipinlẹ pinpin. Yipada awọn kilasi modifier lati yipada laarin ara kọọkan.

Lilo awọn navs fun awọn panẹli taabu nilo itanna awọn taabu JavaScript

Fun awọn taabu pẹlu awọn agbegbe tabbable, o gbọdọ lo awọn taabu JavaScript itanna . Siṣamisi naa yoo tun nilo afikun roleati awọn abuda ARIA – wo aami apẹẹrẹ itanna fun awọn alaye siwaju sii.

Ṣe awọn navs ti a lo bi lilọ kiri ni wiwọle

Ti o ba nlo awọn navs lati pese ọpa lilọ kiri kan, rii daju pe o ṣafikun kan role="navigation"si apoti obi ti o ni oye julọ ti <ul>, tabi fi ipari si ipin <nav>kan ni ayika gbogbo lilọ kiri. Maṣe ṣafikun ipa naa si <ul>funrararẹ, nitori eyi yoo ṣe idiwọ lati kede bi atokọ gangan nipasẹ awọn imọ-ẹrọ iranlọwọ.

Awọn taabu

Akiyesi .nav-tabskilasi nbeere .navkilasi mimọ.

<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>

Awọn oogun

Mu HTML kanna, ṣugbọn lo .nav-pillsdipo:

<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>

Ìşọmọbí ni o wa tun ni inaro stackable. Kan fi kun .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Lare

Ni irọrun ṣe awọn taabu tabi awọn oogun iwọn iwọn dogba ti obi wọn ni awọn iboju fife ju 768px pẹlu .nav-justified. Lori awọn iboju kekere, awọn ọna asopọ nav ti wa ni tolera.

Awọn ọna asopọ navbar nav ti o ni ẹtọ ko ni atilẹyin lọwọlọwọ.

Safari ati idahun lare navs

Gẹgẹ bi v9.1.2, Safari n ṣe afihan kokoro kan ninu eyiti yiyipada aṣawakiri rẹ nâa nfa awọn aṣiṣe ti n ṣe ni nav idalare ti o ti sọ di mimọ. Kokoro yii tun han ninu apẹẹrẹ nav idalare .

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

Awọn ọna asopọ alaabo

Fun eyikeyi nav paati (taabu tabi ìşọmọbí), fi .disabledfun grẹy ìjápọ ko si si rababa ipa .

Iṣẹ ọna asopọ ko ni ipa

Yi kilasi yoo nikan yi awọn <a>'irisi, ko awọn oniwe-iṣẹ. Lo JavaScript aṣa lati mu awọn ọna asopọ ṣiṣẹ nibi.

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

Lilo awọn dropdowns

Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript silẹ awọn silẹ .

Awọn taabu pẹlu dropdowns

<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>

Ìşọmọbí pẹlu dropdowns

<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>

Navbars jẹ awọn paati meta ti o ṣe idahun ti o ṣiṣẹ bi awọn akọle lilọ kiri fun ohun elo tabi aaye rẹ. Wọn bẹrẹ wó (ati pe wọn le yipada) ni awọn iwo alagbeka ati di petele bi iwọn wiwo wiwo ti o wa n pọ si.

Awọn ọna asopọ navbar nav ti o ni ẹtọ ko ni atilẹyin lọwọlọwọ.

<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>

Rọpo ami iyasọtọ navbar pẹlu aworan tirẹ nipa yiyipada ọrọ naa fun <img>. Niwọn bi .navbar-brando ti ni fifẹ tirẹ ati giga, o le nilo lati yiyi diẹ ninu CSS da lori aworan rẹ.

<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>

Fi akoonu fọọmu sinu .navbar-formfun titete inaro to dara ati ihuwasi ti o ṣubu ni awọn ibudo iwoye dín. Lo awọn aṣayan titete lati pinnu ibi ti o gbe laarin akoonu navbar.

Bi olori soke, .navbar-formpin pupọ ti koodu rẹ pẹlu .form-inlinenipasẹ mixin. Diẹ ninu awọn iṣakoso fọọmu, bii awọn ẹgbẹ titẹ sii, le nilo awọn iwọn ti o wa titi lati ṣafihan daradara laarin navbar kan.

<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>

Fi awọn akole kun nigbagbogbo

Awọn oluka iboju yoo ni wahala pẹlu awọn fọọmu rẹ ti o ko ba pẹlu aami kan fun gbogbo igbewọle. Fun awọn fọọmu inline, o le tọju awọn akole ni lilo .sr-onlykilasi naa. Awọn ọna omiiran siwaju wa ti ipese aami fun awọn imọ-ẹrọ iranlọwọ, gẹgẹbi awọn aria-label, aria-labelledbytabi titleeefa. Ti ko ba si ọkan ninu iwọnyi ti o wa, awọn oluka iboju le lo abuda naa placeholder, ti o ba wa, ṣugbọn ṣe akiyesi lilo placeholderbi aropo fun awọn ọna isamisi miiran ko ni imọran.

Ṣafikun .navbar-btnkilasi naa si <button>awọn eroja ti ko gbe ni <form>si aarin wọn ni inaro ni navbar.

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

Pa awọn gbolohun ọrọ sinu nkan kan pẹlu .navbar-text, nigbagbogbo lori <p>tag fun itọsọna to dara ati awọ.

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

Fun awọn eniyan ti o nlo awọn ọna asopọ boṣewa ti ko si laarin paati lilọ kiri navbar deede, lo .navbar-linkkilasi lati ṣafikun awọn awọ to dara fun aiyipada ati awọn aṣayan navbar onidakeji.

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

Sopọ awọn ọna asopọ nav, awọn fọọmu, awọn bọtini, tabi ọrọ, ni lilo awọn .navbar-leftkilasi .navbar-rightohun elo. Awọn kilasi mejeeji yoo ṣafikun omi leefofo CSS kan ni itọsọna pàtó kan. Fun apẹẹrẹ, lati mö nav ìjápọ, fi wọn ni lọtọ <ul>pẹlu awọn oniwun IwUlO kilasi loo.

Awọn kilasi wọnyi jẹ awọn ẹya mixin-ed ti .pull-leftati .pull-right, ṣugbọn wọn ni iwọn si awọn ibeere media fun mimu irọrun ti awọn paati navbar kọja awọn iwọn ẹrọ.

Fikun -un .navbar-fixed-topati pẹlu kan .containertabi .container-fluidsi aarin ati akoonu navbar pad.

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

Ara fifẹ nilo

Navbar ti o wa titi yoo bo akoonu rẹ miiran, ayafi ti o ba ṣafikun paddingsi oke faili <body>. Gbiyanju awọn iye tirẹ tabi lo snippet wa ni isalẹ. Imọran: Nipa aiyipada, navbar jẹ giga 50px.

body { padding-top: 70px; }

Rii daju lati ṣafikun eyi lẹhin Bootstrap CSS mojuto.

Fikun -un .navbar-fixed-bottomati pẹlu kan .containertabi .container-fluidsi aarin ati akoonu navbar pad.

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

Ara fifẹ nilo

Navbar ti o wa titi yoo bo akoonu rẹ miiran, ayafi ti o ba ṣafikun paddingsi isalẹ ti faili <body>. Gbiyanju awọn iye tirẹ tabi lo snippet wa ni isalẹ. Imọran: Nipa aiyipada, navbar jẹ giga 50px.

body { padding-bottom: 70px; }

Rii daju lati ṣafikun eyi lẹhin Bootstrap CSS mojuto.

Ṣẹda navbar ti o ni iwọn ni kikun ti o yi lọ kuro pẹlu oju-iwe naa nipa fifi kun .navbar-static-topati pẹlu kan .containertabi .container-fluidsi aarin ati akoonu navbar pad.

Ko dabi awọn .navbar-fixed-*kilasi, iwọ ko nilo lati yi padding eyikeyi pada lori body.

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

Ṣe atunṣe iwo navbar nipa fifi kun .navbar-inverse.

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

Akara akara

Tọkasi ipo oju-iwe lọwọlọwọ laarin awọn ilana lilọ kiri.

Awọn oluyapa ti wa ni afikun laifọwọyi ni CSS nipasẹ :beforeati content.

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

Oju-iwe

Pese awọn ọna asopọ pagination fun aaye rẹ tabi app pẹlu paati pagination oju-iwe pupọ, tabi yiyan pager ti o rọrun .

Pagination aiyipada

Pagination ti o rọrun ni atilẹyin nipasẹ Rdio, nla fun awọn lw ati awọn abajade wiwa. Bulọọki nla naa nira lati padanu, ni irọrun iwọn, ati pese awọn agbegbe tẹ nla.

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

Aami paati pagination

Awọn paati pagination yẹ ki o wa ni wiwun sinu <nav>eroja kan lati ṣe idanimọ rẹ bi apakan lilọ kiri si awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ miiran. Ni afikun, bi oju-iwe kan ṣe le ni diẹ ẹ sii ju ọkan lọ iru apakan lilọ kiri tẹlẹ (bii lilọ kiri akọkọ ninu akọsori, tabi lilọ kiri ẹgbẹ ẹgbẹ), o ni imọran lati pese asọye aria-labelfun <nav>eyiti o ṣe afihan idi rẹ. Fun apẹẹrẹ, ti paati pagination ba lo lati lọ kiri laarin akojọpọ awọn abajade wiwa, aami ti o yẹ le jẹ aria-label="Search results pages".

Alaabo ati lọwọ ipinle

Awọn ọna asopọ jẹ asefara fun awọn ipo oriṣiriṣi. Lo .disabledfun awọn ọna asopọ ti ko le tẹ ati .activelati tọka oju-iwe lọwọlọwọ.

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

A ṣeduro pe ki o paarọ awọn ìdákọró ti nṣiṣe lọwọ tabi alaabo fun <span>, tabi fi oran naa silẹ ni ọran ti iṣaaju/awọn itọka ti o tẹle, lati yọ iṣẹ-ṣiṣe tẹ kuro lakoko idaduro awọn aṣa ti a pinnu.

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

Titobi

Fancy tobi tabi kere pagination? Fikun -un .pagination-lgtabi .pagination-smfun awọn iwọn afikun.

<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>

Pager

Awọn ọna iyara iṣaaju ati awọn ọna asopọ atẹle fun awọn imuse pagination ti o rọrun pẹlu isamisi ina ati awọn aza. O jẹ nla fun awọn aaye ti o rọrun bi awọn bulọọgi tabi awọn akọọlẹ.

Apeere aiyipada

Nipa aiyipada, awọn ọna asopọ awọn ile-iṣẹ pager.

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

Awọn ọna asopọ deede

Ni omiiran, o le ṣe ọna asopọ kọọkan si awọn ẹgbẹ:

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

Iyan alaabo ipinle

Awọn ọna asopọ Pager tun lo .disabledkilasi IwUlO gbogbogbo lati pagination.

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

Apeere

Apeere akọle Titun

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

Awọn iyatọ ti o wa

Ṣafikun eyikeyi awọn kilasi iyipada ti a mẹnuba ni isalẹ lati yi irisi aami kan pada.

Iwifun Aṣeyọri Alakọbẹrẹ Aiyipada Ewu Ikilọ

<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>

Ni toonu ti aami?

Awọn iṣoro Rendering le dide nigbati o ba ni dosinni ti awọn aami inline laarin eiyan dín, ọkọọkan ti o ni inline-blockeroja tirẹ (bii aami). Ọna ni ayika eyi ni eto display: inline-block;. Fun ọrọ-ọrọ ati apẹẹrẹ, wo #13219 .

Ni irọrun ṣe afihan titun tabi awọn ohun ti a ko ka nipa fifi kan <span class="badge">si awọn ọna asopọ, Bootstrap navs, ati diẹ sii.

Apo-iwọle 42

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

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

Gbigbe ara ẹni

Nigbati ko ba si titun tabi awọn ohun ti a ko ka, awọn baaji yoo kan ṣubu (nipasẹ :emptyoluyan CSS) ti ko ba si akoonu kankan laarin.

Agbelebu-kiri ibamu

Awọn baagi kii yoo ṣubu funrararẹ ni Internet Explorer 8 nitori ko ni atilẹyin fun :emptyyiyan.

Adapts to nav ti nṣiṣe lọwọ ipinle

Awọn aza ti a ṣe sinu wa pẹlu gbigbe awọn baaji ni awọn ipinlẹ ti nṣiṣe lọwọ ni awọn lilọ kiri egbogi.

<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>

Iwọn iwuwo fẹẹrẹ, paati rọ ti o le fa gbogbo iwoye ni yiyan lati ṣafihan akoonu bọtini lori aaye rẹ.

Mo ki O Ile Aiye!

Eyi jẹ ẹyọ akọni ti o rọrun, paati ara jumbotron ti o rọrun fun pipe akiyesi afikun si akoonu ifihan tabi alaye.

Kọ ẹkọ diẹ si

<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>

Lati ṣe jumbotron ni kikun iwọn, ati laisi awọn igun yika, gbe e si ita gbogbo awọn .containers ati dipo ṣafikun .containerlaarin.

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

Ikarahun ti o rọrun fun aye ni h1deede ati awọn apakan apakan ti akoonu lori oju-iwe kan. O le lo awọn h1's aiyipada smallano, bi daradara bi julọ miiran irinše (pẹlu afikun aza).

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

Fa eto akoj Bootstrap pọ pẹlu paati eekanna atanpako lati ṣe afihan awọn akojọpọ awọn aworan, awọn fidio, ọrọ, ati diẹ sii.

Ti o ba n wa igbejade Pinterest-like ti awọn eekanna atanpako ti awọn giga ti o yatọ ati / tabi awọn iwọn, iwọ yoo nilo lati lo ohun itanna ẹni-kẹta gẹgẹbi Masonry , Isotope , tabi Salvattore .

Apeere aiyipada

Nipa aiyipada, awọn eekanna atanpako Bootstrap jẹ apẹrẹ lati ṣe afihan awọn aworan ti o sopọ pẹlu isamisi ti o nilo diẹ.

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

Aṣa akoonu

Pẹlu ifamisi afikun diẹ, o ṣee ṣe lati ṣafikun eyikeyi iru akoonu HTML bii awọn akọle, awọn ìpínrọ, tabi awọn bọtini sinu eekanna atanpako.

Aami eekanna atanpako

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

Bọtini Bọtini

Aami eekanna atanpako

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

Bọtini Bọtini

Aami eekanna atanpako

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

Bọtini Bọtini

<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>

Pese awọn ifiranṣẹ esi asọye fun awọn iṣe olumulo aṣoju pẹlu iwonba ti o wa ati awọn ifiranṣẹ itaniji rọ.

Awọn apẹẹrẹ

Pari ọrọ eyikeyi ati bọtini ifasilẹ iyan sinu .alertati ọkan ninu awọn kilasi ọrọ-ọrọ mẹrin (fun apẹẹrẹ, .alert-success) fun awọn ifiranṣẹ itaniji ipilẹ.

Ko si kilasi aiyipada

Awọn titaniji ko ni awọn kilasi aiyipada, ipilẹ nikan ati awọn kilasi modifier. Itaniji grẹy aiyipada ko ni oye pupọ, nitorinaa o nilo lati pato iru kan nipasẹ kilasi ọrọ-ọrọ. Yan lati aṣeyọri, alaye, ikilọ, tabi ewu.

Kú isé! O ṣe aṣeyọri ka ifiranṣẹ itaniji pataki yii.

Efeti sile! Itaniji yii nilo akiyesi rẹ, ṣugbọn kii ṣe pataki pupọ.

Ikilọ! Dara julọ ṣayẹwo ara rẹ, iwọ ko dara ju.

Oh imolara! Yi awọn nkan diẹ pada ki o gbiyanju fisilẹ lẹẹkansi.

<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>

Awọn titaniji ti a ko le yọ kuro

Kọ lori eyikeyi titaniji nipa fifi yiyan .alert-dismissibleati bọtini sunmọ.

Nilo ohun itanna gbigbọn JavaScript

Fun sisẹ ni kikun, awọn titaniji ti a yọ kuro, o gbọdọ lo awọn itanna JavaScript itanna .

Ikilọ! Dara julọ ṣayẹwo ara rẹ, iwọ ko dara ju.

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

Ṣe idaniloju ihuwasi to dara lori gbogbo awọn ẹrọ

Rii daju lati lo <button>eroja pẹlu ẹya data-dismiss="alert"data.

Awọn ọna asopọ ni awọn itaniji

Lo .alert-linkkilasi IwUlO lati pese ni kiakia awọn ọna asopọ awọ ti o baamu laarin eyikeyi titaniji.

Kú isé! O ṣaṣeyọri kika ifiranṣẹ itaniji pataki yii .

Efeti sile! Itaniji yii nilo akiyesi rẹ , ṣugbọn kii ṣe pataki pupọ.

Ikilọ! Dara julọ ṣayẹwo ara rẹ, iwọ ko dara ju .

Oh imolara! Yi awọn nkan diẹ pada ki o gbiyanju fisilẹ lẹẹkansi.

<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>

Pese awọn esi ti o ni imudojuiwọn lori ilọsiwaju ti iṣan-iṣẹ tabi iṣe pẹlu awọn ifi ilọsiwaju ti o rọrun sibẹsibẹ rọ.

Agbelebu-kiri ibamu

Awọn ifi ilọsiwaju lo awọn iyipada CSS3 ati awọn ohun idanilaraya lati ṣaṣeyọri diẹ ninu awọn ipa wọn. Awọn ẹya wọnyi ko ni atilẹyin ni Internet Explorer 9 ati isalẹ tabi awọn ẹya agbalagba ti Firefox. Opera 12 ko ṣe atilẹyin awọn ohun idanilaraya.

Aabo akoonu (CSP) ibamu

Ti oju opo wẹẹbu rẹ ba ni Eto Aabo Akoonu (CSP) eyiti ko gba laaye style-src 'unsafe-inline', lẹhinna iwọ kii yoo ni anfani lati lo awọn abuda laini stylelati ṣeto awọn iwọn igi ilọsiwaju bi a ṣe han ninu awọn apẹẹrẹ wa ni isalẹ. Awọn ọna yiyan fun eto awọn iwọn ti o ni ibamu pẹlu awọn CSP ti o muna pẹlu lilo JavaScript aṣa diẹ (ti o ṣeto element.style.width) tabi lilo awọn kilasi CSS aṣa.

Apẹẹrẹ ipilẹ

Pẹpẹ ilọsiwaju aiyipada.

<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>

Pẹlu aami

Yọọ <span>pẹlu .sr-onlykilasi kuro laarin ọpa ilọsiwaju lati fi ipin ogorun han han.

60%

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

Lati rii daju pe ọrọ aami si wa leti paapaa fun awọn ipin kekere, ro fifi kan kun min-widthsi ọpa ilọsiwaju.

0%

2%

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

Itumọ awọn yiyan

Awọn ifi ilọsiwaju lo diẹ ninu bọtini kanna ati awọn kilasi itaniji fun awọn aza ti o ni ibamu.

<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>

Ṣiṣiri

Nlo gradient lati ṣẹda ipa didan kan. Ko si ni IE9 ati ni isalẹ.

<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>

Ti ere idaraya

Fikun -un .activelati .progress-bar-stripedgbe awọn ila si ọtun si apa osi. Ko si ni IE9 ati ni isalẹ.

<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>

Tolera

Gbe ọpọ ifi sinu kanna .progresslati tolera wọn.

<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>

Awọn ara ohun ti o ni arosọ fun kikọ ọpọlọpọ awọn iru awọn paati (bii awọn asọye bulọọgi, Tweets, ati bẹbẹ lọ) ti o ṣe ẹya aworan apa osi tabi ti o ni ibamu si ọtun lẹgbẹẹ akoonu ọrọ.

Media aiyipada

Media aiyipada ṣe afihan ohun media kan (awọn aworan, fidio, ohun) si apa osi tabi ọtun ti idina akoonu.

Media akori

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

Media akori

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

Akọle media itẹle

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

Media akori

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

Media akori

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

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

Awọn kilasi naa .pull-leftati .pull-righttun wa ati pe a ti lo tẹlẹ gẹgẹbi apakan ti paati media, ṣugbọn ti wa ni piparẹ fun lilo yẹn bi ti v3.3.0. Wọn jẹ deede deede si .media-leftati .media-right, ayafi ti o .media-rightyẹ ki o gbe lẹhin .media-bodyti html.

Titete media

Awọn aworan tabi awọn media miiran le wa ni ibamu si oke, aarin, tabi isalẹ. Aiyipada ti wa ni ibamu si oke.

Top deede media

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.

Aarin deede media

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.

Media ti o ni ibamu si isalẹ

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.

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

Media akojọ

Pẹlu ifamisi afikun diẹ, o le lo media inu atokọ (wulo fun awọn ọrọ asọye tabi awọn atokọ nkan).

Media akori

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

Akọle media itẹle
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Akọle media itẹle
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Akọle media itẹle
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

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

Awọn ẹgbẹ atokọ jẹ ẹya rọ ati agbara fun iṣafihan kii ṣe awọn atokọ ti o rọrun ti awọn eroja, ṣugbọn awọn eka pẹlu akoonu aṣa.

Apẹẹrẹ ipilẹ

Ẹgbẹ atokọ ti ipilẹ julọ jẹ atokọ ti ko ni aṣẹ pẹlu awọn ohun atokọ, ati awọn kilasi to dara. Kọ sori rẹ pẹlu awọn aṣayan ti o tẹle, tabi CSS tirẹ bi o ṣe nilo.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum ati eros

<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>

Baajii

Ṣafikun paati awọn baaji si eyikeyi ohun ẹgbẹ atokọ ati pe yoo wa ni ipo laifọwọyi ni apa ọtun.

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

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

Awọn nkan ti o ni asopọ

Ṣe asopọ awọn ohun ẹgbẹ akojọpọ nipa lilo awọn afi afikọti dipo awọn ohun atokọ (iyẹn tun tumọ si obi <div>dipo ẹya <ul>). Ko si iwulo fun awọn obi kọọkan ni ayika eroja kọọkan.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<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>

Awọn nkan bọtini

Awọn nkan akojọpọ le jẹ awọn bọtini dipo awọn ohun atokọ (iyẹn tun tumọ si obi <div>dipo ẹya <ul>). Ko si iwulo fun awọn obi kọọkan ni ayika eroja kọọkan. Maṣe lo awọn .btnkilasi boṣewa nibi.

<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>

Awọn nkan alaabo

Ṣafikun .disabled-un si .list-group-itemgrẹy lati han alaabo.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<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>

Awọn kilasi asọye

Lo awọn kilasi ọrọ-ọrọ si awọn ohun atokọ ara, aiyipada tabi ti sopọ mọ. Tun pẹlu .activeipinle.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum ati eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<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>

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. 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>

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example

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

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title

Panel content

Panel title

Panel content

<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 with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content

Panel footer

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

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<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>

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@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>

If there is no panel body, the component moves from panel header to table without interruption.

Panel heading

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

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

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<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>

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

<!-- 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>

Default well

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

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

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a large well!

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

Look, I'm in a small well!

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

Awọn eroja

Glyphicons

Awọn glyphs ti o wa

Bawo ni lati lo

Maṣe dapọ pẹlu awọn paati miiran

Nikan fun lilo lori sofo eroja

Yiyipada awọn aami font ipo

Awọn aami wiwọle

Awọn apẹẹrẹ

Awọn idasile

Apeere

Titete

Le nilo afikun ipo

Titete .pull-rightdeprecated

Awọn akọle

Olupin

Awọn ohun akojọ aṣayan alaabo

Awọn ẹgbẹ bọtini

Awọn imọran irinṣẹ & awọn agbejade ni awọn ẹgbẹ bọtini nilo eto pataki

Rii daju pe o tọ roleati pese aami kan

Apẹẹrẹ ipilẹ

Ọpa irinṣẹ bọtini

Titobi

Itẹle

inaro iyatọ

Lare bọtini awọn ẹgbẹ

Mimu awọn aala

IE8 ati awọn aala

Pẹlu <a>awọn eroja

Awọn ọna asopọ ṣiṣẹ bi awọn bọtini

Pẹlu <button>awọn eroja

Awọn ifilọlẹ bọtini

Igbẹkẹle ohun itanna

Awọn silẹ bọtini ẹyọkan

Pipin bọtini dropdowns

Titobi

Iyatọ silẹ

Awọn ẹgbẹ igbewọle

Textual <input>s nikan

Awọn imọran irinṣẹ & awọn agbejade ninu awọn ẹgbẹ titẹ sii nilo eto pataki

Maṣe dapọ pẹlu awọn paati miiran

Fi awọn akole kun nigbagbogbo

Apẹẹrẹ ipilẹ

Titobi

Awọn apoti ayẹwo ati awọn addons redio

Awọn afikun bọtini

Awọn bọtini pẹlu dropdowns

Awọn bọtini ti a pin

Awọn bọtini pupọ

Navs

Lilo awọn navs fun awọn panẹli taabu nilo itanna awọn taabu JavaScript

Ṣe awọn navs ti a lo bi lilọ kiri ni wiwọle

Awọn taabu

Awọn oogun

Lare

Safari ati idahun lare navs

Awọn ọna asopọ alaabo

Iṣẹ ọna asopọ ko ni ipa

Lilo awọn dropdowns

Awọn taabu pẹlu dropdowns

Ìşọmọbí pẹlu dropdowns

Navbar

Navbar aiyipada

Àkóónú àkúnwọ́sílẹ̀

Nilo ohun itanna JavaScript

Yiyipada aaye fifọ navbar alagbeka ti o ṣubu

Ṣe awọn navbars wiwọle

Aworan iyasọtọ

Awọn fọọmu

Mobile ẹrọ caveats

Fi awọn akole kun nigbagbogbo

Awọn bọtini

Lilo ọrọ-ọrọ kan pato

Ọrọ

Non-nav ìjápọ

Titete paati

Ọtun aligning ọpọ irinše

Ti o wa titi si oke

Ara fifẹ nilo

Ti o wa titi si isalẹ

Titete `.pull-right`deprecated

Rii daju pe o tọ `role`ati pese aami kan

Pẹlu `<a>`awọn eroja

Pẹlu `<button>`awọn eroja

Textual `<input>`s nikan