Glyphicons

Awọn glyphs to 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-ori
  • 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 pe o fi aaye silẹ laarin aami ati ọrọ fun fifẹ 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 naa 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ọ.

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

Awọn idasile

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

Fi ipari si 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>

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

Le nilo afikun ipo

Awọn idasile ti wa ni ipo laifọwọyi nipasẹ CSS laarin sisan deede ti iwe naa. Eyi tumọ si awọn isọ silẹ le jẹ gige nipasẹ awọn obi pẹlu awọn overflowohun-ini kan tabi han ni ita ti ibudo wiwo. Koju awọn oran wọnyi funrararẹ bi wọn ṣe dide.

Titete .pull-rightdeprecated

Bi ti v3.1.0, a ti sọ deprecated .pull-rightlori awọn akojọ aṣayan silẹ. Lati so-ọtun akojọ aṣayan kan, lo .dropdown-menu-right. Awọn paati nav ti o ni ibamu si ọtun ni navbar lo ẹya mixin ti kilasi yii lati mu akojọ aṣayan ṣiṣẹ laifọwọyi. Lati bori rẹ, lo .dropdown-menu-left.

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

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

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

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

Awọn ẹgbẹ bọtini

Ṣ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ọ roleati 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>

Ọpa irinṣẹ bọtini

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 igba itẹ-ẹiyẹ awọn ẹgbẹ pupọ.




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

Awọn ẹgbẹ bọtini idalare

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

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

Awọn ifilọlẹ bọtini

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>

Awọn ẹgbẹ igbewọle

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.

@

@example.com

$ .00

https://example.com/users/
<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 ṣe atunṣe 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 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

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

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>

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>

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

Fun eyikeyi paati nav (awọn taabu tabi awọn oogun), ṣafikun .disabledfun awọn ọna asopọ grẹy ko si si awọn ipa 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>

Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript 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>

Navbar

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

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

Niwọn bi Bootstrap ko mọ iye aaye ti akoonu inu navbar rẹ nilo, o le ṣiṣẹ sinu awọn ọran pẹlu fifisilẹ akoonu si ọna keji. Lati yanju eyi, o le:

  1. Din iye tabi iwọn ti navbar awọn ohun kan.
  2. Tọju awọn ohun navbar kan ni awọn iwọn iboju kan nipa lilo awọn kilasi ohun elo idahun .
  3. Yi aaye ti navbar rẹ yipada laarin ipo iṣubu ati petele. Ṣe akanṣe @grid-float-breakpointoniyipada tabi ṣafikun ibeere media tirẹ.

Nilo ohun itanna JavaScript

Ti JavaScript ba jẹ alaabo ati pe wiwo naa dín to pe navbar ṣubu, kii yoo ṣee ṣe lati faagun navbar ki o wo akoonu inu faili .navbar-collapse.

Navbar ti o ṣe idahun nilo ohun itanna iṣubu lati wa ninu ẹya Bootstrap rẹ.

Yiyipada aaye fifọ navbar alagbeka ti o ṣubu

Awọn navbar collapses sinu inaro mobile view nigbati awọn viewport ni narrower ju @grid-float-breakpoint, ati ki o gbooro sinu awọn oniwe-petele ti kii-mobile view nigbati awọn viewport ni o kere @grid-float-breakpointni iwọn. Ṣatunṣe oniyipada yii ni orisun Kere lati ṣakoso nigbati navbar ba ṣubu / faagun. Iwọn aiyipada jẹ 768px(iboju "kekere" tabi "tabulẹti" ti o kere julọ).

Ṣe awọn navbars wiwọle

Rii daju pe o lo ipin <nav>kan tabi, ti o ba nlo eroja jeneriki diẹ sii gẹgẹbi <div>, ṣafikun kan role="navigation"si gbogbo navbar lati ṣe idanimọ ni gbangba bi agbegbe ala-ilẹ fun awọn olumulo ti awọn imọ-ẹrọ iranlọ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>

Mobile ẹrọ caveats

Diẹ ninu awọn itọsi wa nipa lilo awọn idari fọọmu laarin awọn eroja ti o wa titi lori awọn ẹrọ alagbeka. Wo awọn iwe atilẹyin ẹrọ aṣawakiri wa fun awọn alaye.

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 si wa ti ipese aami fun awọn imọ-ẹrọ iranlọwọ, gẹgẹbi aria-label, aria-labelledbytabi titleabuda. 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 inu kan <form>si aarin wọn ni inaro ni navbar.

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

Lilo ọrọ-ọrọ kan pato

Bii awọn kilasi bọtini boṣewa , .navbar-btnle ṣee lo lori <a>ati <input>awọn eroja. Sibẹsibẹ, bẹni .navbar-btntabi awọn kilasi bọtini boṣewa ko yẹ ki o lo lori <a>awọn eroja laarin .navbar-nav.

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

Ọtun aligning ọpọ irinše

Navbars lọwọlọwọ ni aropin pẹlu awọn .navbar-rightkilasi pupọ. Si akoonu aaye daradara, a lo ala odi lori nkan ti o kẹhin .navbar-right. Nigbati awọn eroja lọpọlọpọ ba wa ni lilo kilasi yẹn, awọn ala wọnyi ko ṣiṣẹ bi a ti pinnu.

A yoo tun wo eyi nigba ti a le tun kọ paati yẹn ni v4.

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 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 ni <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ẹ), o ni imọran lati pese apejuwe aria-labelfun <nav>eyiti o ṣe afihan idi rẹ. Fun apẹẹrẹ, ti a ba lo paati pagination 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>

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>

Awọn akole

Apeere

Apeere akọle Titun

Apeere akọle Titun

Apeere akọle Titun

Apeere akọle Titun

Apeere akọle Titun
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 .

Baajii

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

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

Jumbotron

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 si ita gbogbo awọn .containers ati dipo fi kun .containerlaarin.

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

Akọsori oju-iwe

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>

Awọn eekanna atanpako

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.

100% x200

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

100% x200

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

100% x200

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>

Awọn itaniji

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.

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

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

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

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

Awọn ifi ilọsiwaju

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

60% Pari
<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 gbigbọn fun awọn aza ti o ni ibamu.

40% Pari (aṣeyọri)
20% Pari
60% Pari (ikilọ)
80% Pari (ewu)
<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. Ko si ni IE9 ati ni isalẹ.

40% Pari (aṣeyọri)
20% Pari
60% Pari (ikilọ)
80% Pari (ewu)
<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ẹ.

45% Pari
<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.

35% Pari (aṣeyọri)
20% Pari (ikilọ)
10% Pari (ewu)
<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>

Ohun elo media

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 scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.

Media akori

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

Akọle media itẹle

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

Media akori

Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus scelerisque 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 scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Awọn kilasi .pull-leftati .pull-righttun wa ati pe a ti lo tẹlẹ gẹgẹ bi apakan ti paati media, ṣugbọn wọn ti parẹ 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 scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis 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 scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis 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 scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis 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 scelerisque 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 scelerisque 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 scelerisque 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 scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Ẹgbẹ akojọ

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.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

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.

<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

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

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

Aṣa akoonu

Ṣafikun fere eyikeyi HTML laarin, paapaa fun awọn ẹgbẹ atokọ ti o sopọ bi eyi ti o wa ni isalẹ.

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

Awọn panẹli

Lakoko ti kii ṣe pataki nigbagbogbo, nigbami o nilo lati fi DOM rẹ sinu apoti kan. Fun awọn ipo yẹn, gbiyanju paati nronu.

Apẹẹrẹ ipilẹ

Nipa aiyipada, gbogbo ohun ti o .panelṣe ni lo diẹ ninu aala ipilẹ ati padding lati ni diẹ ninu akoonu.

Apeere nronu ipilẹ
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel pẹlu akori

Ni irọrun ṣafikun eiyan akori kan si nronu rẹ pẹlu .panel-heading. O le tun pẹlu eyikeyi <h1>- <h6>pẹlu .panel-titlekilasi kan lati ṣafikun akọle aṣa-tẹlẹ. Sibẹsibẹ, awọn iwọn fonti ti <h1>- <h6>jẹ agbekọja nipasẹ .panel-heading.

Fun awọ ọna asopọ to dara, rii daju lati gbe awọn ọna asopọ sinu awọn akọle laarin .panel-title.

Panel akori lai akọle
Akoonu nronu

Akọle nronu

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

Awọn bọtini ipari tabi ọrọ keji sinu .panel-footer. Ṣe akiyesi pe awọn ẹlẹsẹ nronu ko jogun awọn awọ ati awọn aala nigba lilo awọn iyatọ ọrọ-ọrọ nitori wọn ko tumọ lati wa ni iwaju.

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

Itumọ awọn yiyan

Bii awọn paati miiran, ni irọrun jẹ ki nronu kan ni itumọ diẹ si aaye kan pato nipa fifi eyikeyi awọn kilasi ipinlẹ ipo-ọrọ kun.

Akọle nronu

Akoonu nronu

Akọle nronu

Akoonu nronu

Akọle nronu

Akoonu nronu

Akọle nronu

Akoonu nronu

Akọle nronu

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

Pẹlu awọn tabili

Ṣafikun eyikeyi ti kii ṣe aala .tablelaarin nronu kan fun apẹrẹ lainidi. Ti o ba wa .panel-body, a ṣafikun aala afikun si oke ti tabili fun iyapa.

Panel akori

Diẹ ninu awọn akoonu nronu aiyipada nibi. 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.

# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Ti ko ba si ara nronu, paati gbe lati akọsori nronu si tabili laisi idilọwọ.

Panel akori
# Orukọ akọkọ Oruko idile Orukọ olumulo
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Pẹlu awọn ẹgbẹ akojọ

Ni irọrun pẹlu awọn ẹgbẹ atokọ iwọn ni kikun laarin eyikeyi nronu.

Panel akori

Diẹ ninu awọn akoonu nronu aiyipada nibi. 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 ati 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>

Idahun ifibọ

Gba awọn aṣawakiri laaye lati pinnu fidio tabi awọn iwọn agbelera ti o da lori iwọn bulọọki ti o ni ninu wọn nipa ṣiṣẹda ipin inu ti yoo ṣe iwọn deede lori ẹrọ eyikeyi.

Awọn ofin lo taara si <iframe>, <embed>, <video>, ati <object>awọn eroja; ni yiyan lo kilasi irandiran ti o fojuhan .embed-responsive-itemnigba ti o ba fẹ lati baramu iselona fun awọn abuda miiran.

Pro-Imọran! O ko nilo lati ṣafikun frameborder="0"ninu <iframe>s rẹ bi a ṣe bori iyẹn fun ọ.

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

Kanga

Aiyipada daradara

Lo daradara bi ipa ti o rọrun lori nkan kan lati fun ni ipa inset.

Wo, Mo wa ninu kanga!
<div class="well">...</div>

Iyan kilasi

Fifẹ iṣakoso ati awọn igun yika pẹlu awọn kilasi modifier yiyan meji.

Wo, Mo wa ninu kanga nla kan!
<div class="well well-lg">...</div>
Wo, Mo wa ninu kanga kekere kan!
<div class="well well-sm">...</div>