Akwai glyphs

Ya ƙunshi sama da 250 glyphs a tsarin rubutu daga saitin Glyphicon Halflings. Glyphicons Halflings yawanci ba sa samuwa kyauta, amma mahaliccinsu ya sanya su don Bootstrap kyauta. A matsayin godiya, muna neman kawai ku haɗa hanyar haɗi zuwa Glyphicons a duk lokacin da zai yiwu.

Glyphicon - alamar alama
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-fensir
gilashin glyphicon-gilashi
glyphicon glyphicon-music
Binciken glyphicon-glyphicon
glyphicon glyphicon-zuciya
glyphicon-tauraro
glyphicon glyphicon-tauraro-ba komai
Glyphicon glyphicon-mai amfani
fim din glyphicon
glyphicon glyphicon-th-large
Glyphicon-glyphicon-th
Glyphicon glyphicon-th-jeri
glyphicon glyphicon-ok
glyphicon glyphicon-cire
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon-kashe
siginar glyphicon glyphicon
Glyphicon-cog
glyphicon glyphicon-sharan
glyphicon glyphicon-gida
glyphicon glyphicon-fayil
Glyphicon glyphicon-lokaci
glyphicon glyphicon-road
glyphicon glyphicon-zazzage-alt
glyphicon glyphicon-zazzagewa
glyphicon glyphicon-upload
akwatin saƙo mai shiga glyphicon glyphicon
glyphicon glyphicon-wasa-da'ira
glyphicon glyphicon-maimaita
glyphicon glyphicon-refresh
Glyphicon glyphicon-list-alt
glyphicon glyphicon-kulle
glyphicon glyphicon-flag
glyphicon glyphicon belun kunne
glyphicon glyphicon-girma-kashe
glyphicon glyphicon-girma-ƙasa
glyphicon glyphicon-girma-up
Glyphicon glyphicon-qrcode
Glyphicon-barcode
Glyphicon-tag
Glyphicon glyphicon-tags
Littafin glyphicon glyphicon
glyphicon glyphicon-bookmark
glyphicon glyphicon-bugu
glyphicon glyphicon-kamara
Glyphicon font
glyphicon glyphicon-m
Glyphicon-italic
glyphicon glyphicon-rubutu-tsawo
glyphicon glyphicon-rubutu-nisa
glyphicon glyphicon-align-hagu
glyphicon glyphicon-align-center
glyphicon glyphicon-align-dama
glyphicon glyphicon-align-justify
jerin sunayen glyphicon
glyphicon glyphicon-indent-hagu
glyphicon glyphicon-indent-dama
glyphicon glyphicon-facetime-bidiyo
Glyphicon glyphicon-hoton
glyphicon glyphicon-taswirar-alamar
glyphicon glyphicon-daidaita
Glyphicon-tint
glyphicon glyphicon-edit
Glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-motsi
glyphicon glyphicon-mataki-baya
glyphicon glyphicon-sauri-baya
glyphicon glyphicon-baya
glyphicon-wasa
glyphicon glyphicon-dakata
glyphicon glyphicon-tasha
glyphicon glyphicon-gaba
glyphicon glyphicon-sauri-gaba
glyphicon glyphicon-mataki-gaba
Glyphicon-kore
glyphicon glyphicon-chevron-hagu
glyphicon glyphicon-chevron-dama
glyphicon glyphicon-plus-alama
glyphicon glyphicon-minus-alamar
alamar glyphicon glyphicon-cire-alamar
glyphicon glyphicon-ok-alamar
glyphicon glyphicon-tambaya-alamar
glyphicon glyphicon-info-alamar
Glyphicon glyphicon-screenshot
glyphicon glyphicon-cire-da'irar
glyphicon glyphicon-ok-da'ira
glyphicon glyphicon-ban-da'ira
glyphicon glyphicon-kibiya-hagu
glyphicon glyphicon-kibiya-dama
glyphicon glyphicon-kibiya-up
glyphicon glyphicon-kibiya-ƙasa
Glyphicon glyphicon-share-alt
glyphicon glyphicon-girman-cikakke
glyphicon glyphicon-girman-karami
glyphicon glyphicon-exclamation-alamar
glyphicon glyphicon-kyauta
glyphicon glyphicon-leaf
glyphicon glyphicon-wuta
glyphicon glyphicon-ido-bude
glyphicon glyphicon-ido-kusa
glyphicon glyphicon-alamar faɗakarwa
glyphicon jirgin sama
glyphicon glyphicon-kalandar
glyphicon glyphicon-bazuwar
Glyphicon glyphicon - sharhi
Glyphicon-magnet
Glyphicon glyphicon-chevron-up
Glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
keken siyayya na glyphicon glyphicon
glyphicon glyphicon-folder-kusa
glyphicon glyphicon-folder-bude
glyphicon glyphicon-girman girman-tsaye
glyphicon glyphicon-girman girman-horizontal
glyphicon glyphicon-hdd
glyphicon-bullhorn
glyphicon glyphicon-ƙararawa
Takaddun shaida na glyphicon
glyphicon glyphicon-yatsa-up
glyphicon glyphicon-yatsa-ƙasa
glyphicon glyphicon-hannu-dama
glyphicon glyphicon-hannu-hagu
glyphicon glyphicon-hannu-up
glyphicon glyphicon-hannu-saukar
glyphicon glyphicon-da'irar-kibiya-dama
glyphicon glyphicon-da'irar-kibiya-hagu
glyphicon glyphicon-da'irar-kibiya-up
glyphicon glyphicon-da'irar-kibiya-saukar
Glyphicon-globe
Glyphicon-glyphicon-wrench
glyphicon glyphicon-ayyukan
glyphicon glyphicon-tace
glyphicon glyphicon-takaice
Glyphicon glyphicon-cikakken allo
Glyphicon dashboard
glyphicon glyphicon-takarda
glyphicon glyphicon-zuciya-ba komai
Glyphicon glyphicon-link
wayar glyphicon glyphicon
Glyphicon-pushpin
glyphicon-usd
Glyphicon glyphicon-gbp
nau'in glyphicon glyphicon
glyphicon glyphicon-nau'i-ta-haruffa
glyphicon glyphicon-nau'i-na-alphabet-alt
glyphicon glyphicon-jere-by-oda
glyphicon glyphicon-jere-by-oda-alt
glyphicon glyphicon-nau'i-da-halaye
glyphicon glyphicon-nau'i-da-halaye-alt
glyphicon glyphicon-ba a bincika ba
glyphicon glyphicon-fadada
glyphicon glyphicon-rushe-ƙasa
glyphicon glyphicon-rushe-up
glyphicon glyphicon-login
Glyphicon-flash
glyphicon glyphicon-login-out
glyphicon glyphicon-sabuwar taga
glyphicon glyphicon-rikodi
glyphicon glyphicon-save
glyphicon glyphicon-bude
glyphicon glyphicon-ajiye
glyphicon glyphicon-shigo da
glyphicon glyphicon-fitarwa
glyphicon glyphicon-aika
glyphicon glyphicon-floppy-faifai
glyphicon glyphicon-floppy-ajiye
glyphicon glyphicon-floppy-cire
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-bude
Glyphicon glyphicon-katin-credit
Glyphicon glyphicon-canja wurin
Glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon - matsawa
glyphicon glyphicon-earphone
glyphicon glyphicon-wayar-alt
hasumiya ta glyphicon
Glyphicon glyphicon-stats
Glyphicon glyphicon-sd-bidiyo
glyphicon glyphicon-hd-bidiyo
Glyphicon glyphicon-subtitles
glyphicon glyphicon-sauti-sitiriyo
glyphicon glyphicon-sauti-dolby
glyphicon glyphicon-sauti-5-1
glyphicon glyphicon-sauti-6-1
glyphicon glyphicon-sauti-7-1
glyphicon glyphicon-alamar haƙƙin mallaka
glyphicon glyphicon-alamar rajista
glyphicon glyphicon-Cloud-zazzagewa
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-itace-conifer
glyphicon glyphicon-itace-deciduous
glyphicon cd
glyphicon glyphicon-save-fayil
glyphicon glyphicon-bude-fayil
Glyphicon glyphicon-matakin-sama
glyphicon glyphicon-kwafi
Glyphicon-manna
glyphicon glyphicon-jijjiga
glyphicon glyphicon-equalizer
glyphicon glyphicon-sarki
Glyphicon glyphicon-Sarauniya
Glyphicon-pawn
glyphicon glyphicon-bishop
Glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-gado
glyphicon glyphicon-apple
Glyphicon glyphicon-share
gilashin glyphicon-hourglass
Glyphicon-fitila
glyphicon glyphicon-kwafi
Glyphicon glyphicon-piggy-bank
glyphicon glyphicon-almakashi
Glyphicon-bitcoin
Glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon-yen
Glyphicon-jpy
Glyphicon ruble
Glyphicon-rub
Glyphicon-sikelin
glyphicon glyphicon-kankara-lolly
glyphicon glyphicon-kankara-lolly-dandana
glyphicon glyphicon-ilimi
glyphicon glyphicon-zabin-a kwance
glyphicon glyphicon-zaɓin-tsaye
Glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-taga
glyphicon glyphicon-man
glyphicon glyphicon - hatsi
glyphicon glyphicon- tabarau
glyphicon glyphicon-girman rubutu
glyphicon glyphicon-rubutu-launi
glyphicon glyphicon-rubutu-baya
glyphicon glyphicon-abu-align-top
glyphicon glyphicon-abu-align-kasa
glyphicon glyphicon-abu-align-horizontal
glyphicon glyphicon-abu-align-hagu
glyphicon glyphicon-abu-daidaita-tsaye
glyphicon glyphicon-abu-align-right
glyphicon glyphicon-triangle-dama
glyphicon glyphicon-triangle-hagu
glyphicon glyphicon-triangle-kasa
glyphicon glyphicon-triangle-top
Glyphicon-console
Glyphicon glyphicon-superscript
Glyphicon glyphicon-subscript
glyphicon glyphicon-menu-hagu
glyphicon glyphicon-menu-dama
Glyphicon glyphicon-menu-saukar
Glyphicon glyphicon-menu-up

Yadda ake amfani

Don dalilai na aiki, duk gumaka suna buƙatar ajin tushe da nau'in alamar mutum ɗaya. Don amfani, sanya lambar mai zuwa kusan ko'ina. Tabbatar barin sarari tsakanin gunkin da rubutu don madaidaicin faifai.

Kar a cakude da sauran abubuwan da aka gyara

Ba za a iya haɗa azuzuwan gumaka kai tsaye tare da sauran abubuwan haɗin gwiwa ba. Kada a yi amfani da su tare da wasu azuzuwan a kan kashi ɗaya. Madadin haka, ƙara gida <span>kuma yi amfani da azuzuwan gunkin zuwa <span>.

Sai kawai don amfani akan abubuwa marasa komai

Ya kamata a yi amfani da azuzuwan gumaka akan abubuwan da basu ƙunshi abun ciki na rubutu ba kuma basu da abubuwan yara.

Canza wurin wurin font icon

Bootstrap yana ɗauka cewa fayilolin font za su kasance a cikin kundin ../fonts/adireshi, dangane da fayilolin CSS da aka haɗa. Matsar da waɗancan fayilolin font suna nufin sabunta CSS ta ɗayan hanyoyi uku:

Canja @icon-font-pathda/ko @icon-font-namemasu canji a cikin tushen Ƙananan fayiloli.
Yi amfani da zaɓin URLs na dangi wanda ƙaramin mai tarawa ya bayar.
Canja url()hanyoyi a cikin CSS da aka haɗa.

Yi amfani da kowane zaɓi mafi dacewa da takamaiman saitin ci gaban ku.

Gumaka masu isa

Sigar zamani na fasahar taimako za su sanar da abubuwan da aka samar na CSS, da takamaiman haruffan Unicode. Don guje wa fitowar da ba a yi niyya ba da rikicewa a cikin masu karanta allo (musamman lokacin da ake amfani da gumaka don ado kawai), muna ɓoye su tare da aria-hidden="true"sifa.

Idan kana amfani da gunki don isar da ma'ana (maimakon azaman kayan ado kawai), tabbatar da cewa ana isar da wannan ma'anar zuwa fasahar taimako - alal misali, haɗa da ƙarin abun ciki, ɓoye na gani tare da .sr-onlyaji.

Idan kuna ƙirƙirar sarrafawa ba tare da wani rubutu ba (kamar <button>wanda ke ɗauke da gunki kawai), yakamata koyaushe ku samar da madadin abun ciki don gano manufar sarrafa, ta yadda zai zama ma'ana ga masu amfani da fasahar taimako. A wannan yanayin, zaku iya ƙara aria-labelsifa akan sarrafa kanta.

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

Misalai

Yi amfani da su a cikin maɓallai, ƙungiyoyin maɓalli don kayan aiki, kewayawa, ko abubuwan da aka riga aka tsara.

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

Alamar da aka yi amfani da ita a faɗakarwa don isar da cewa saƙon kuskure ne, tare da ƙarin .sr-onlyrubutu don isar da wannan alamar ga masu amfani da fasahar taimako.

Shigar da ingantaccen adireshin imel

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

Mai iya canzawa, menu na mahallin don nuna jerin hanyoyin haɗin gwiwa. An yi hulɗa tare da zazzage JavaScript plugin .

Misali

Kunna abin zazzagewa da menu na zaɓuka a cikin .dropdown, ko wani abin da ke bayyana position: relative;. Sannan ƙara HTML na menu.

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

Ana iya canza menu na saukewa don faɗaɗa sama (maimakon ƙasa) ta ƙara .dropupzuwa iyaye.

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

Daidaitawa

Ta hanyar tsoho, menu na zaɓuka ana sanya shi ta atomatik 100% daga sama kuma tare da gefen hagu na iyayensa. Ƙara .dropdown-menu-rightzuwa .dropdown-menudama a daidaita menu na zazzagewa.

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

Shugabanni

Ƙara taken zuwa lakabin sassan ayyuka a kowane menu na zazzagewa.

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

Mai rarrabawa

Ƙara mai rabawa don raba jerin hanyoyin haɗin gwiwa a cikin menu na zazzagewa.

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

Abubuwan menu na kashe

Ƙara .disabledzuwa <li>cikin zazzagewar don kashe hanyar haɗin.

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

Ƙungiya jerin maɓalli tare akan layi ɗaya tare da ƙungiyar maɓalli. Ƙara radiyon JavaScript na zaɓin zaɓi da dabi'un akwati tare da plugin ɗin mu .

Bayanan kayan aiki & popovers a cikin ƙungiyoyin maɓalli suna buƙatar saiti na musamman

Lokacin amfani da tukwici ko popovers akan abubuwan da ke cikin .btn-group, dole ne ku saka zaɓi container: 'body'don guje wa illolin da ba'a so (kamar ɓangaren da ke girma da/ko rasa sasanninta lokacin da aka kunna tip ko popover).

Tabbatar da daidai `role`kuma samar da lakabi

Domin fasahar taimako - kamar masu karanta allo - don isar da cewa an haɗa jerin maɓalli, ana rolebuƙatar samar da sifa mai dacewa. Ga ƙungiyoyin maɓalli, wannan zai zama role="group", yayin da kayan aiki ya kamata su sami role="toolbar".

Banda ɗaya ƙungiyoyi ne waɗanda kawai ke ƙunshe da sarrafawa guda ɗaya kawai (misali ƙungiyoyin maɓalli masu barata masu abubuwa <button>) ko zazzagewa.

Bugu da kari, ya kamata a bai wa kungiyoyi da sandunan kayan aiki tambari bayyananne, saboda yawancin fasahohin taimako ba za su sanar da su ba, duk da kasancewar ingantacciyar rolesifa. A cikin misalan da aka bayar a nan, muna amfani da aria-label, amma madadin irin su aria-labelledbyza a iya amfani da su.

Misali na asali

Kunna jerin maɓalli tare da .btnciki .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>

Haɗa saiti na <div class="btn-group">cikin wani <div class="btn-toolbar">don ƙarin hadaddun abubuwa.

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

Girman girma

Maimakon yin amfani da azuzuwan girman maɓallin maɓalli zuwa kowane maɓalli a cikin rukuni, kawai ƙara .btn-group-*zuwa kowane .btn-group, gami da lokacin yin gurɓata ƙungiyoyi masu yawa.

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

Gurasa

Sanya a .btn-groupcikin wani .btn-grouplokacin da kake son menu na zaɓuka gauraye da jerin maɓalli.

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

Bambancin tsaye

Yi saitin maɓalli ya bayyana a tsaye a tsaye maimakon a kwance. Ba a tallafawa zazzagewar maɓalli a nan.

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

Ƙungiyoyin maɓalli masu cancanta

Yi rukunin maɓallai su shimfiɗa a daidai girman girman don faɗi faɗin mahaifansa duka. Hakanan yana aiki tare da zazzage maɓalli a cikin rukunin maɓallin.

Gudanar da iyakoki

Saboda takamaiman HTML da CSS da ake amfani da su don tabbatar da maɓalli (wato display: table-cell), an ninka iyakokin da ke tsakanin su. A cikin ƙungiyoyin maɓalli na yau da kullun, margin-left: -1pxana amfani da su don tara iyakoki maimakon cire su. Koyaya, marginbaya aiki tare da display: table-cell. Sakamakon haka, ya danganta da gyare-gyarenku zuwa Bootstrap, kuna iya cirewa ko sake canza kan iyakokin.

IE8 da iyakoki

Internet Explorer 8 baya sanya iyakoki akan maɓalli a cikin rukunin maɓalli da aka gaskata, ko yana kunne <a>ko <button>abubuwa. Don kewaya wannan, kunsa kowane maɓallin a cikin wani .btn-group.

Duba #12476 don ƙarin bayani.

Tare da `<a>`abubuwa

Kawai kunsa jerin .btns a ciki .btn-group.btn-group-justified.

Hagu Tsakiya Dama

Hagu Tsakiya

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

Hanyoyin haɗi suna aiki azaman maɓalli

Idan <a>ana amfani da abubuwan don yin aiki azaman maɓalli - yana haifar da ayyuka na cikin shafi, maimakon kewaya zuwa wani takarda ko sashe a cikin shafin na yanzu - ya kamata kuma a ba su abin da ya dace role="button".

Tare da `<button>`abubuwa

Don amfani da ƙungiyoyin maɓalli masu barata tare da <button>abubuwa, dole ne ku nannade kowane maɓalli a cikin rukunin maɓalli . Yawancin masu bincike ba sa amfani da CSS ɗinmu da kyau don gaskatawa ga <button>abubuwa, amma tunda muna goyan bayan zazzage maɓalli, za mu iya aiki a kusa da hakan.

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

Yi amfani da kowane maballin don kunna menu na zazzagewa ta hanyar sanya shi a cikin .btn-groupkuma samar da alamar menu mai dacewa.

Dogaro da plugin

Maɓallin zazzagewa yana buƙatar haɗa kayan aikin zazzagewa a cikin sigar Bootstrap ɗin ku.

Zazzage maɓalli guda ɗaya

Juya maɓalli zuwa maɓallin zazzagewa tare da wasu canje-canje na asali.

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

Zazzage maballin Raba

Hakazalika, ƙirƙiri maɓalli masu tsaga tare da canje-canje iri ɗaya, kawai tare da maɓalli daban.

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

Girman girma

Maɓallin zazzagewa yana aiki tare da maɓallai masu girma dabam.

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

Bambancin sauke

Fara menu na zazzage sama da abubuwa ta ƙara .dropupzuwa iyaye.

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

Ƙaddamar da sarrafa tsari ta ƙara rubutu ko maɓalli kafin, bayan, ko a ɓangarorin kowane tushen rubutu <input>. Yi amfani .input-groupda .input-group-addonko .input-group-btndon tsarawa ko haɗa abubuwa zuwa guda .form-control.

Rubutu `<input>`kawai

Guji yin amfani <select>da abubuwa anan saboda ba za a iya tsara su gabaɗaya a cikin masu binciken WebKit ba.

A guji amfani <textarea>da abubuwa anan saboda rowsba za a mutunta halayensu ba a wasu lokuta.

Bayanan kayan aiki & popovers a cikin ƙungiyoyin shigarwa suna buƙatar saiti na musamman

Lokacin amfani da Tooltips ko popovers a kan abubuwa a cikin wani .input-group, dole ne ka saka da zaɓi container: 'body'don kauce wa maras so illa (kamar kashi girma fadi da/ko rasa ta zagaye sasanninta lokacin da Tooltip ko popover aka jawo).

Kar a cakude da sauran abubuwan da aka gyara

Kar a haɗa ƙungiyoyin tsari ko azuzuwan grid kai tsaye tare da ƙungiyoyin shigarwa. Madadin haka, shigar da rukunin shigarwa a cikin rukunin tsari ko abubuwan da ke da alaƙa da grid.

Koyaushe ƙara lakabi

Masu karatun allo za su sami matsala da fom ɗinku idan ba ku haɗa da lakabin kowane shigarwa ba. Don waɗannan ƙungiyoyin shigarwa, tabbatar da cewa an isar da kowane ƙarin lakabi ko aiki zuwa fasahar taimako.

Madaidaicin dabarar da za a yi amfani da ita (abubuwan da ake iya gani <label>, <label>abubuwan da ke ɓoye ta amfani da .sr-onlyajin, ko amfani da aria-label, aria-labelledby, aria-describedby, titleko placeholdersifa) da ƙarin ƙarin bayanan da ake buƙatar isarwa za su bambanta dangane da ainihin nau'in widget din da kuke aiwatarwa. Misalai a cikin wannan sashe suna ba da ƴan shawarwarin da aka ba da shawara, takamaiman hanyoyin.

Misali na asali

Sanya ƙara ɗaya ko maɓalli a kowane gefen shigarwar. Hakanan zaka iya sanya ɗaya a ɓangarorin shigarwa biyu.

Ba mu goyan bayan ƙarawa da yawa ( .input-group-addonko .input-group-btn) a gefe guda.

Ba mu goyan bayan sarrafa nau'i da yawa a cikin rukunin shigarwa guda ɗaya.

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

Girman girma

Ƙara azuzuwan girman nau'i na dangi zuwa .input-groupkanta kuma abubuwan da ke ciki za su yi girma ta atomatik-babu buƙatar maimaita girman girman nau'i akan kowane kashi.

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

Akwatunan rajista da addons na rediyo

Sanya kowane akwati ko zaɓi na rediyo a cikin addon ƙungiyar shigar da maimakon rubutu.

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

Button addons

Maɓallai a cikin ƙungiyoyin shigarwa sun ɗan bambanta kuma suna buƙatar ƙarin matakin gida ɗaya. Maimakon .input-group-addon, kuna buƙatar amfani .input-group-btnda ku don nannade maɓallan. Ana buƙatar wannan saboda tsohowar salon burauza waɗanda ba za a iya soke su ba.

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

Maɓallai masu zazzagewa

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

Maɓallan da aka raba

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

Maɓallai da yawa

Yayin da za ku iya samun ƙari ɗaya kawai a kowane gefe, kuna iya samun maɓalli da yawa a cikin guda ɗaya .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 da ake samu a cikin Bootstrap suna da alamar haɗin gwiwa, farawa daga .navajin tushe, da kuma jihohin da aka raba. Musanya azuzuwan masu gyara don canzawa tsakanin kowane salo.

Yin amfani da navs don bangarorin shafin yana buƙatar plugin ɗin shafukan JavaScript

Don shafuka tare da wuraren da za a iya amfani da su, dole ne ka yi amfani da shafukan JavaScript plugin . Alamar kuma zata buƙaci ƙarin rolesifofin ARIA - duba alamar alamar plugin ɗin don ƙarin cikakkun bayanai.

Yi amfani da navs azaman kewayawa

Idan kuna amfani da navs don samar da sandar kewayawa, tabbatar da ƙara role="navigation"zuwa mafi madaidaicin kwantena na iyaye na <ul>, ko kunsa wani <nav>abu a kewayen gabaɗayan kewayawa. Kada ka ƙara rawar ga <ul>kanta, saboda wannan zai hana a sanar da shi a matsayin ainihin jeri ta hanyar fasahar taimako.

Tabs

Lura cewa .nav-tabsajin yana buƙatar .navajin tushe.

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

Kwayoyin cuta

Ɗauki HTML iri ɗaya, amma amfani .nav-pillsmaimakon:

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

Kwayoyin kuma ana iya tara su a tsaye. Kawai ƙara .nav-stacked.

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

Baratacce

Sauƙaƙe yin shafuka ko kwaya daidai girman girman iyayensu a fuska fiye da 768px tare da .nav-justified. A kan ƙananan allon fuska, hanyoyin haɗin nav suna toshe.

A halin yanzu ba a tallafawa ingantattun hanyoyin haɗin navbar navbar.

Safari da navs masu dacewa

Tun daga v9.1.2, Safari yana nuna kwaro wanda canza girman burauzar ku a kwance yana haifar da kurakurai a cikin ingantattun nav ɗin da aka share akan annashuwa. Hakanan ana nuna wannan kwaro a cikin ingantaccen misali nav .

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

An kashe hanyoyin haɗin gwiwa

Ga kowane ɓangaren nav (shafukan ko kwayoyi), ƙara .disableddon hanyoyin haɗin toka kuma babu tasirin motsi .

Ayyukan haɗin yanar gizo bai tasiri ba

Wannan ajin zai canza <a>kamannin sa ne kawai, ba aikin sa ba. Yi amfani da JavaScript na al'ada don kashe hanyoyin haɗin gwiwa anan.

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

Amfani da dropdowns

Ƙara menu na zaɓuka tare da ɗan ƙarin HTML da abubuwan da aka sauke JavaScript plugin .

Shafukan da zazzagewa

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

Kwayoyin cuta masu zazzagewa

<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 sune abubuwan haɗin meta masu amsawa waɗanda ke aiki azaman taken kewayawa don aikace-aikacenku ko rukunin yanar gizon ku. Sun fara rugujewa (kuma ana iya jujjuya su) a cikin ra'ayoyin wayar hannu kuma su zama a kwance yayin da akwai nisa na kallon kallon yana ƙaruwa.

A halin yanzu ba a tallafawa ingantattun hanyoyin haɗin navbar navbar.

Abun ciki mai zubewa

Tunda Bootstrap bai san adadin sarari na abun ciki a cikin navbar ɗinku ba, kuna iya fuskantar matsala tare da naɗa abun ciki a jere na biyu. Don warware wannan, kuna iya:

Rage adadi ko faɗin abubuwan navbar.
Boye wasu abubuwan navbar a wasu girman allo ta amfani da azuzuwan mai amfani .
Canja wurin da navbar ɗin ku ke canzawa tsakanin ruɗewa da yanayin kwance. Keɓance @grid-float-breakpointmabambantan ko ƙara tambayar mai jarida ku.

Canza wurin karyewar navbar na wayar hannu

Navbar ya ruguje cikin kallon wayarsa ta tsaye lokacin da wurin kallon ya fi kunkuntar @grid-float-breakpoint, kuma yana faɗaɗa cikin yanayin sa na kwance wanda ba na wayar hannu ba lokacin da wurin kallon yana da faɗin akalla @grid-float-breakpoint. Daidaita wannan m a cikin Ƙananan tushe don sarrafawa lokacin da navbar ya rushe/faɗi. Ƙimar da aka fi so ita ce 768px(mafi ƙanƙantar allon "kanamin" ko "kwal ɗin kwamfutar hannu").

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

Maye gurbin alamar navbar tare da hoton ku ta hanyar musanya rubutu zuwa <img>. Tun da .navbar-brandyake yana da mashin ɗinsa da tsayinsa, ƙila ka buƙaci soke wasu CSS dangane da hotonka.

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

Sanya abun ciki na tsari a ciki .navbar-formdon daidaitaccen jeri a tsaye da rugujewar hali a kunkuntar wuraren kallo. Yi amfani da zaɓuɓɓukan daidaitawa don yanke shawarar inda yake zaune a cikin abun cikin navbar.

A matsayin jagora, .navbar-formyana raba yawancin lambar sa .form-inlineta hanyar mixin. Wasu nau'ikan sarrafa nau'i, kamar ƙungiyoyin shigarwa, na iya buƙatar kafaffen nisa don nunawa daidai a cikin mashigin kewayawa.

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

Koyaushe ƙara lakabi

Masu karatun allo za su sami matsala da fom ɗinku idan ba ku haɗa da lakabin kowane shigarwa ba. Don waɗannan nau'ikan layi, zaku iya ɓoye alamun ta amfani da .sr-onlyajin. Akwai ƙarin hanyoyin hanyoyin samar da lakabi don fasahar taimako, kamar aria-label, aria-labelledbyko titlesifa. Idan babu ɗaya daga cikin waɗannan, masu karatun allo za su iya yin amfani da placeholdersifa, idan akwai, amma lura cewa placeholderba a ba da shawarar yin amfani da azaman madadin wasu hanyoyin yin lakabi ba.

Ƙara .navbar-btnajin zuwa <button>abubuwan da ba sa zaune a cikin <form>a tsaye a tsakiya a cikin navbar.

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

Kunna kirtani na rubutu a cikin kashi tare da .navbar-text, yawanci akan <p>tambari don jagora mai kyau da launi.

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

Ga jama'a masu amfani da daidaitattun hanyoyin haɗin yanar gizo waɗanda basa cikin ɓangaren kewayawa na yau da kullun, yi amfani da .navbar-linkajin don ƙara launuka masu dacewa don tsoho da zaɓuɓɓukan navbar masu sabani.

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

Daidaita mahaɗin kewayawa, fom, maɓalli, ko rubutu, ta amfani da azuzuwan masu amfani .navbar-leftko . .navbar-rightDuk nau'o'in biyu za su ƙara tudun ruwa na CSS a cikin ƙayyadadden shugabanci. Misali, don daidaita hanyoyin haɗin kewayawa, sanya su cikin keɓance <ul>tare da nau'in kayan aiki daban-daban da aka yi amfani da su.

Wadannan azuzuwan sune sigogin Murmushi na .pull-leftkuma .pull-right, amma sun gaza zuwa tambayoyin Media don sauƙaƙe abubuwan haɗin navar da ke da masu girma na naúrar.

Ƙara .navbar-fixed-topkuma haɗa da .containerko .container-fluidzuwa tsakiya da abun ciki na navbar kushin.

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

Ana buƙatar mashin jiki

Kafaffen navbar zai rufe sauran abubuwan cikin ku, sai dai idan kun ƙara paddingzuwa saman <body>. Gwada kimar ku ko amfani da guntun mu na ƙasa. Tukwici: Ta hanyar tsoho, navbar yana da 50px babba.

body { padding-top: 70px; }

Tabbatar kun haɗa wannan bayan ainihin Bootstrap CSS.

Ƙara .navbar-fixed-bottomkuma haɗa da .containerko .container-fluidzuwa tsakiya da abun ciki na navbar kushin.

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

Ana buƙatar mashin jiki

Kafaffen navbar zai rufe sauran abubuwan cikin ku, sai dai idan kun ƙara paddingzuwa ƙasan <body>. Gwada kimar ku ko amfani da guntun mu na ƙasa. Tukwici: Ta hanyar tsoho, navbar yana da 50px babba.

body { padding-bottom: 70px; }

Tabbatar kun haɗa wannan bayan ainihin Bootstrap CSS.

Ƙirƙirar babban mashigin kewayawa mai faɗi wanda ke gungurawa tare da shafin ta ƙara .navbar-static-topda haɗawa .containerko .container-fluidzuwa tsakiya da abun ciki na navbar pad.

Ba kamar .navbar-fixed-*azuzuwan ba, ba kwa buƙatar canza kowane padding akan body.

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

Gyara kamannin navbar ta ƙara .navbar-inverse.

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

Gurasa gurasa

Nuna wurin shafin na yanzu a cikin tsarin kewayawa.

Ana ƙara masu rarraba ta atomatik a cikin CSS ta hanyar :beforeda content.

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

Pagination

Samar da hanyoyin haɗin yanar gizo don rukunin yanar gizonku ko ƙa'idar tare da sashin shafi mai shafuka masu yawa, ko madadin shafi mai sauƙi .

Default pagination

Sauƙaƙan rubutun da aka yi wahayi daga Rdio, mai girma don ƙa'idodi da sakamakon bincike. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

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

Lakabi bangaren rubutun

Ya kamata a nannade bangaren rubutun a cikin wani <nav>abu don gano shi azaman sashin kewayawa zuwa masu karanta allo da sauran fasahar taimako. Bugu da kari, kamar yadda shafi na iya samun irin wannan sashin kewayawa fiye da ɗaya (kamar kewayawa ta farko a cikin taken, ko kewayawa ta gefe), yana da kyau a samar da bayanin aria-labelabin da <nav>ke nuna manufarsa. Misali, idan an yi amfani da ɓangaren rubutun don kewaya tsakanin saitin sakamakon bincike, alamar da ta dace zata iya zama aria-label="Search results pages".

Jihohi naƙasassu da aiki

Ana iya daidaita hanyoyin haɗin gwiwa don yanayi daban-daban. Yi amfani .disabledda hanyoyin haɗin da ba za a iya dannawa ba kuma .activedon nuna shafin na yanzu.

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

Muna ba da shawarar cewa ku musanya anka masu aiki ko nakasassu don <span>, ko barin anka a cikin yanayin kibau na baya/na gaba, don cire ayyukan dannawa yayin riƙe da salon da aka yi niyya.

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

Girman girma

Zato ya fi girma ko ƙarami? Ƙara .pagination-lgko .pagination-smdon ƙarin girma.

<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

Hanyoyi masu sauri na baya da na gaba don aiwatar da fage mai sauƙi tare da alamar haske da salo. Yana da kyau ga shafuka masu sauƙi kamar blogs ko mujallu.

Misali na asali

Ta hanyar tsoho, shafukan yanar gizo suna haɗin haɗin kai.

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

Hanyoyin haɗin kai masu daidaitawa

A madadin, zaku iya daidaita kowace hanyar haɗin gwiwa zuwa ɓangarorin:

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

Yanayin naƙasasshen zaɓi

Hanyoyin haɗin yanar gizon Pager kuma suna amfani da .disabledajin mai amfani na gaba ɗaya daga rubutun.

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

Misali

Misalin kan Sabon

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

Akwai bambancin

Ƙara kowane ɗayan darussan gyare-gyare da aka ambata a ƙasa don canza bayyanar alamar.

Tsohuwar Nasara na Farko na Farko Haɗari

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

Kuna da tarin lakabi?

Matsalolin nunawa na iya tasowa lokacin da kake da tarin labulen layi a cikin kunkuntar akwati, kowanne yana ɗauke da nasa inline-blocknau'in (kamar gunki). Hanyar da ke kewaye da wannan shine saitin display: inline-block;. Don mahallin da misali, duba #13219 .

A sauƙaƙe haskaka sabbin abubuwa ko waɗanda ba a karanta su ba ta ƙara <span class="badge">zuwa hanyoyin haɗin gwiwa, Bootstrap navs, da ƙari.

Akwati mai shiga42

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

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

Rushewar kai

Lokacin da babu sababbi ko abubuwan da ba a karanta ba, bajis ɗin za su ruguje kawai (ta hanyar :emptyzaɓin CSS) muddin babu abun ciki a ciki.

Daidaita-browser

Badges ba za su ruguje da kansu ba a cikin Internet Explorer 8 saboda rashin goyan bayan mai :emptyzaɓin.

Ya dace da jihohin sojojin ruwa masu aiki

An haɗa salon ginanniyar don sanya baji a cikin jihohi masu aiki a cikin kewayawa kwaya.

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

Wani sassauƙa mai sauƙi, sassauƙan sashi wanda zai iya tsawaita ɗaukacin kallon da zaɓi don nuna mahimman abun ciki akan rukunin yanar gizonku.

Sannu Duniya!

Wannan rukunin jarumai ne mai sauƙi, sassauƙan salon jumbotron don kiran ƙarin hankali ga fitaccen abun ciki ko bayanai.

Ƙara koyo

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

Don yin jumbotron cikakke nisa, kuma ba tare da sasanninta masu zagaye ba, sanya shi a waje duk .containers kuma a maimakon haka ƙara ciki .container.

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

Sauƙaƙan harsashi don h1fitar da sarari yadda ya kamata da yanki sassan abun ciki a shafi. Yana iya amfani da abubuwan h1tsoho na 's small, da kuma yawancin sauran abubuwan haɗin gwiwa (tare da ƙarin salo).

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

Ƙarfafa tsarin grid na Bootstrap tare da ɓangaren thumbnail don sauƙin nuna grid na hotuna, bidiyo, rubutu, da ƙari.

Idan kuna neman gabatarwar Pinterest-kamar nunin takaitaccen siffofi na tsayi daban-daban da / ko nisa, kuna buƙatar amfani da plugin ɗin ɓangare na uku kamar Masonry , Isotope , ko Salvattore .

Misali na asali

Ta hanyar tsoho, an tsara thumbnails na Bootstrap don nuna hotunan da aka haɗe tare da ƙarancin alamar da ake buƙata.

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

Abun ciki na al'ada

Tare da ɗan ƙarin alamar alama, yana yiwuwa a ƙara kowane nau'in abun ciki na HTML kamar kanun labarai, sakin layi, ko maɓalli a cikin ƙananan hotuna.

Alamar thumbnail

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

Maɓalli Maɓalli

Alamar thumbnail

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

Maɓalli Maɓalli

Alamar thumbnail

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

Maɓalli Maɓalli

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

Bayar da saƙon martani na mahallin don ayyukan mai amfani na yau da kullun tare da ɗimbin saƙon faɗakarwa da ke akwai da sassauƙa.

Misalai

Rufe kowane rubutu da maɓallin korar zaɓi a ciki .alertda ɗayan azuzuwan mahallin huɗu (misali, .alert-success) don ainihin saƙon faɗakarwa.

Babu tsoho aji

Faɗakarwa ba su da tsoffin azuzuwan, kawai azuzuwan tushe da masu gyara. Tsohuwar faɗakarwar launin toka ba ta da ma'ana da yawa, don haka ana buƙatar ka saka nau'i ta hanyar ajin mahallin. Zaɓi daga nasara, bayani, faɗakarwa, ko haɗari.

Sannu da aikatawa! Kun yi nasarar karanta wannan muhimmin saƙon faɗakarwa.

A kula! Wannan faɗakarwar tana buƙatar kulawar ku, amma ba shi da mahimmanci sosai.

Gargadi! Gara a duba kanku, ba ku da kyau sosai.

Oh karye! Canja wasu 'yan abubuwa sama kuma a sake gwada ƙaddamarwa.

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

Faɗakarwar da za a soke

Gina kan kowane faɗakarwa ta ƙara zaɓi na zaɓi .alert-dismissibleda maɓallin kusa.

Yana buƙatar plugin ɗin faɗakarwar JavaScript

Don cikakken aiki, faɗakarwar da ba za a iya watsi da ita ba, dole ne ka yi amfani da plugin ɗin JavaScript na faɗakarwa .

Gargadi! Gara a duba kanku, ba ku da kyau sosai.

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

Tabbatar da halayen da suka dace a duk na'urori

Tabbatar amfani da <button>kashi tare da data-dismiss="alert"sifa na bayanai.

Hanyoyin haɗi a faɗakarwa

Yi .alert-linkamfani da ajin mai amfani don samar da hanyoyin haɗin kai masu dacewa da sauri cikin kowane faɗakarwa.

Sannu da aikatawa! Kun yi nasarar karanta wannan muhimmin saƙon faɗakarwa .

A kula! Wannan faɗakarwar tana buƙatar kulawar ku , amma ba shi da mahimmanci sosai.

Gargadi! Zai fi kyau duba kanku, ba ku da kyau sosai .

Oh karye! Canja wasu 'yan abubuwa sama kuma a sake gwada ƙaddamarwa.

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

Bayar da sabbin bayanai game da ci gaban tafiyar aiki ko aiki tare da sandunan ci gaba mai sauƙi amma sassauƙa.

Daidaita-browser

Sandunan ci gaba suna amfani da canjin CSS3 da rayarwa don cimma wasu tasirin su. Ba a tallafawa waɗannan fasalulluka a cikin Internet Explorer 9 da ƙasa ko tsofaffin nau'ikan Firefox. Opera 12 baya goyan bayan rayarwa.

Manufofin Tsaro na Abun ciki (CSP) dacewa

Idan gidan yanar gizon ku yana da Manufofin Tsaro na Abun ciki (CSP) wanda baya ba da izini style-src 'unsafe-inline', to ba za ku iya amfani da sifofin layi styleba don saita faɗin sandunan ci gaba kamar yadda aka nuna a misalan mu na ƙasa. Madadin hanyoyin saita faɗin waɗanda suka dace da tsayayyen CSP sun haɗa da amfani da ɗan ƙaramin JavaScript na al'ada (wanda ya saita element.style.width) ko amfani da azuzuwan CSS na al'ada.

Misali na asali

Mashin ci gaba na asali.

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

Tare da lakabi

Cire <span>tare da .sr-onlyajin daga cikin mashigin ci gaba don nuna kashi na bayyane.

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>

Don tabbatar da cewa rubutun lakabin ya kasance mai iya karantawa koda don ƙananan kaso, la'akari da ƙara a min-widthmashigin ci gaba.

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>

Madadin yanayi

Sandunan ci gaba suna amfani da wasu maɓalli iri ɗaya da azuzuwan faɗakarwa don daidaitattun salo.

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

Tatsi

Yana amfani da gradient don ƙirƙirar tasirin tsiri. Babu samuwa a cikin IE9 da ƙasa.

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

Mai rairayi

Ƙara .activezuwa .progress-bar-stripeddon raya ratsi dama zuwa hagu. Babu samuwa a cikin IE9 da ƙasa.

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

Tari

Sanya sanduna da yawa cikin guda ɗaya .progressdon tara su.

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

Salon abubuwa masu ƙima don gina nau'ikan abubuwa daban-daban (kamar sharhin blog, Tweets, da sauransu) waɗanda ke nuna hoton hagu ko dama tare da abun ciki na rubutu.

Tsoffin kafofin watsa labarai

Kafofin watsa labarai na asali suna nuna abin mai jarida (hotuna, bidiyo, sauti) zuwa hagu ko dama na toshe abun ciki.

Jagoran watsa labarai

Cras sit amet nibh libero, in 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 in faucibus.

Jagoran watsa labarai

Cras sit amet nibh libero, in 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 in faucibus.

Nested kafofin watsa labarai kan hanya

Cras sit amet nibh libero, in 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 in faucibus.

Jagoran watsa labarai

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

Jagoran watsa labarai

Cras sit amet nibh libero, in 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>

Azuzuwan .pull-leftkuma .pull-rightsun wanzu kuma an yi amfani da su a baya azaman ɓangare na ɓangaren watsa labarai, amma an soke su don wannan amfani kamar na v3.3.0. Sun yi kusan daidai da .media-leftkuma .media-right, sai dai wanda .media-rightya kamata a sanya su .media-bodya cikin html.

Daidaita kafofin watsa labarai

Hotunan ko wasu kafofin watsa labarai na iya daidaitawa sama, tsakiya, ko ƙasa. Tsohuwar tana saman daidaitacce.

Manyan kafofin watsa labarai masu daidaitawa

Cras sit amet nibh libero, in 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 in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki.

Kafofin watsa labarai masu daidaitawa

Cras sit amet nibh libero, in 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 in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki.

Kafofin watsa labarai masu daidaitawa na ƙasa

Cras sit amet nibh libero, in 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 in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki.

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

Jerin watsa labarai

Tare da ɗan ƙarin alamar alama, zaku iya amfani da kafofin watsa labarai a cikin jeri (mai amfani ga zaren sharhi ko jerin labarai).

Jagoran watsa labarai

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

Nested kafofin watsa labarai kan hanya
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested kafofin watsa labarai kan hanya
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested kafofin watsa labarai kan hanya
Cras sit amet nibh libero, in 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>

Ƙungiyoyin jeri sassa ne masu sassauƙa da ƙarfi don nuna ba kawai jerin abubuwa masu sauƙi ba, amma masu rikitarwa tare da abun ciki na al'ada.

Misali na asali

Ƙungiya mafi asali na asali shine kawai jerin da ba a ba da oda ba tare da abubuwan jeri, da kuma azuzuwan da suka dace. Gina kan shi tare da zaɓuɓɓukan da ke biyo baya, ko CSS naku kamar yadda ake buƙata.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum da 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>

Alamomi

Ƙara ɓangaren bajoji zuwa kowane abu na rukuni kuma za a sanya shi a dama ta atomatik.

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>

Abubuwan da aka haɗa

Haɗa abubuwan rukuni ta amfani da alamun anga maimakon jerin abubuwan (wato kuma yana nufin iyaye <div>maimakon <ul>). Babu buƙatar kowane iyaye a kusa da kowane kashi.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum da 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>

Abubuwan maɓalli

Abubuwan rukuni na iya zama maɓalli maimakon abubuwan jeri (wato kuma yana nufin iyaye <div>maimakon <ul>). Babu buƙatar kowane iyaye a kusa da kowane kashi. Kar a yi amfani da daidaitattun .btnazuzuwan nan.

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

Abubuwan da aka kashe

Ƙara .disabledzuwa .list-group-itemlaunin toka don bayyana a kashe.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum da 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>

Azuzuwan yanayi

Yi amfani da azuzuwan mahallin don salon jerin abubuwa, tsoho ko haɗin kai. Hakanan ya haɗa da .activejiha.

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

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum da 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>

Abun ciki na al'ada

Ƙara kusan kowane HTML a ciki, har ma don ƙungiyoyin jeri masu alaƙa kamar wanda ke ƙasa.

Jerin abubuwan rukuni na rukuni

Donec id un mi porta gravida a eget metus. Maecenas sed diam eget risus varius blandit.

Jerin abubuwan rukuni na rukuni

Donec id un mi porta gravida a eget metus. Maecenas sed diam eget risus varius blandit.

Jerin abubuwan rukuni na rukuni

Donec id un mi porta gravida a 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>

Duk da yake ba koyaushe ya zama dole ba, wani lokacin kuna buƙatar sanya DOM ɗin ku a cikin akwati. Don waɗannan yanayi, gwada ɓangaren panel.

Misali na asali

Ta hanyar tsoho, duk abin da ake .panelyi shine amfani da wasu ƙa'idodi na asali da manne don ƙunshi wasu abun ciki.

Misalin panel na asali

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

Panel mai jagora

Sauƙaƙe ƙara akwati mai jagora zuwa rukunin ku tare da .panel-heading. Hakanan kuna iya haɗa kowane <h1>- <h6>tare da .panel-titleaji don ƙara taken da aka riga aka tsara. Koyaya, girman font na <h1>- <h6>an shafe su ta .panel-heading.

Don madaidaicin canza launi, tabbatar da sanya hanyoyin haɗin kai a cikin kanun labarai cikin .panel-title.

Panel yana tafiya ba tare da take ba

Abun cikin panel

Taken kwamitin

Abun cikin panel

<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 tare da ƙafa

Kunna maɓalli ko rubutu na biyu a cikin .panel-footer. Lura cewa ƙafafu ba sa gaji launuka da iyakoki yayin amfani da bambance-bambancen mahallin saboda ba a nufin su kasance a gaba ba.

Abun cikin panel

Ƙafar panel

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

Madadin yanayi

Kamar sauran abubuwan da aka gyara, cikin sauƙin sanya panel ya zama mai ma'ana ga takamaiman mahallin ta ƙara kowane azuzuwan yanayi.

Taken kwamitin

Abun cikin panel

Taken kwamitin

Abun cikin panel

Taken kwamitin

Abun cikin panel

Taken kwamitin

Abun cikin panel

Taken kwamitin

Abun cikin panel

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

Tare da tebur

Ƙara kowane mara iyaka .tablea cikin panel don ƙira mara kyau. Idan akwai .panel-body, muna ƙara ƙarin iyaka zuwa saman teburin don rabuwa.

Tafiyar panel

Wasu tsohowar abun ciki anan. 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.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@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>

Idan babu jikin panel, sashin yana motsawa daga taken panel zuwa tebur ba tare da katsewa ba.

Tafiyar panel

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

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

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

Tare da ƙungiyoyin lissafin

A sauƙaƙe haɗa ƙungiyoyin jeri masu faɗin faɗin cikin kowane kwamiti.

Tafiyar panel

Wasu tsohowar abun ciki anan. 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 da 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>

Ba da damar masu bincike don tantance girman bidiyo ko nunin faifan bidiyo dangane da faɗin toshewar abin da ke ƙunshe da su ta hanyar ƙirƙira ma'auni na zahiri wanda zai daidaita daidai da kowace na'ura.

Ana amfani da dokoki kai tsaye zuwa <iframe>, <embed>, <video>, da <object>abubuwa; na zaɓi yi amfani da ajin zuriya bayyananne .embed-responsive-itemlokacin da kake son daidaita salo don wasu halaye.

Pro-Tip! Ba kwa buƙatar haɗawa frameborder="0"a cikin <iframe>s ɗin ku yayin da muka soke muku hakan.

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

Da kyau da kyau

Yi amfani da rijiyar azaman tasiri mai sauƙi akan wani abu don ba shi tasirin sa.

Duba, ina cikin rijiya!

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

Zabin azuzuwan

Sarrafa madaidaicin sasanninta da sasanninta tare da azuzuwan gyare-gyare na zaɓi biyu.

Duba, ina cikin babbar rijiya!

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

Duba, ina cikin wata karamar rijiya!

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

Abubuwan da aka gyara

Glyphicons

Akwai glyphs

Yadda ake amfani

Kar a cakude da sauran abubuwan da aka gyara

Sai kawai don amfani akan abubuwa marasa komai

Canza wurin wurin font icon

Gumaka masu isa

Misalai

Zazzagewa

Misali

Daidaitawa

Yana iya buƙatar ƙarin matsayi

Ƙarƙashin .pull-rightdaidaitawa

Shugabanni

Mai rarrabawa

Abubuwan menu na kashe

Ƙungiyoyin maɓalli

Bayanan kayan aiki & popovers a cikin ƙungiyoyin maɓalli suna buƙatar saiti na musamman

Tabbatar da daidai rolekuma samar da lakabi

Misali na asali

Maɓallin kayan aiki

Girman girma

Gurasa

Bambancin tsaye

Ƙungiyoyin maɓalli masu cancanta

Gudanar da iyakoki

IE8 da iyakoki

Tare da <a>abubuwa

Hanyoyin haɗi suna aiki azaman maɓalli

Tare da <button>abubuwa

Maballin zazzagewa

Dogaro da plugin

Zazzage maɓalli guda ɗaya

Zazzage maballin Raba

Girman girma

Bambancin sauke

Ƙungiyoyin shigarwa

Rubutu <input>kawai

Bayanan kayan aiki & popovers a cikin ƙungiyoyin shigarwa suna buƙatar saiti na musamman

Kar a cakude da sauran abubuwan da aka gyara

Koyaushe ƙara lakabi

Misali na asali

Girman girma

Akwatunan rajista da addons na rediyo

Button addons

Maɓallai masu zazzagewa

Maɓallan da aka raba

Maɓallai da yawa

Navs

Yin amfani da navs don bangarorin shafin yana buƙatar plugin ɗin shafukan JavaScript

Yi amfani da navs azaman kewayawa

Tabs

Kwayoyin cuta

Baratacce

Safari da navs masu dacewa

An kashe hanyoyin haɗin gwiwa

Ayyukan haɗin yanar gizo bai tasiri ba

Amfani da dropdowns

Shafukan da zazzagewa

Kwayoyin cuta masu zazzagewa

Navbar

Default navbar

Abun ciki mai zubewa

Yana buƙatar plugin ɗin JavaScript

Canza wurin karyewar navbar na wayar hannu

Sanya navbars masu isa

Hoton alama

Siffofin

Alamun na'urar hannu

Koyaushe ƙara lakabi

Buttons

takamaiman amfani

Rubutu

Hanyoyin haɗin kai ba nav ba

Daidaita bangaren

Dama daidaita abubuwa da yawa

Kafaffen zuwa sama

Ana buƙatar mashin jiki

Kafaffen zuwa kasa

Ƙarƙashin `.pull-right`daidaitawa

Tabbatar da daidai `role`kuma samar da lakabi

Tare da `<a>`abubuwa

Tare da `<button>`abubuwa

Rubutu `<input>`kawai