Glyphicons

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.

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

Zazzagewa

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

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>

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.

Yana iya buƙatar ƙarin matsayi

Ana ajiye abubuwan saukarwa ta atomatik ta hanyar CSS a cikin daidaitaccen aikin daftarin aiki. Wannan yana nufin iyaye za su iya yanke abubuwan da za a zazzage tare da wasu overflowkaddarorin ko kuma sun fito daga kan iyakokin wurin kallo. Magance waɗannan batutuwa da kanku yayin da suka taso.

Ƙarƙashin .pull-rightdaidaitawa

Tun daga v3.1.0, mun ƙare .pull-rightakan menus masu saukewa. Don daidaita menu na dama, yi amfani da .dropdown-menu-right. Abubuwan haɗin nav masu daidaita daidai a cikin navbar suna amfani da sigar haɗaɗɗiyar wannan ajin don daidaita menu ta atomatik. Don soke shi, yi amfani da .dropdown-menu-left.

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

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

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

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

Ƙungiyoyin maɓalli

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

Maɓallin kayan aiki

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.

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

Maballin zazzagewa

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>

Ƙungiyoyin shigarwa

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

@

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

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

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.

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>

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

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>

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>

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

Navbar

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:

  1. Rage adadi ko faɗin abubuwan navbar.
  2. Boye wasu abubuwan navbar a wasu girman allo ta amfani da azuzuwan mai amfani .
  3. 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.

Yana buƙatar plugin ɗin JavaScript

Idan JavaScript ya ƙare kuma wurin kallo ya ƙunshe da isa cewa navbar ya rushe, ba zai yuwu a faɗaɗa navbar ɗin da duba abun ciki a cikin .navbar-collapse.

Navbar mai amsawa yana buƙatar haɗa kayan aikin rushewa a cikin sigar Bootstrap ɗin 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").

Sanya navbars masu isa

Tabbatar yin amfani da <nav>kashi ko, idan kuna amfani da ƙarin asalin asalin kamar <div>, ƙara role="navigation"a kowane yanki navar don gano shi a matsayin yankin ƙasa don masu amfani da fasaha.

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

Alamun na'urar hannu

Akwai wasu fa'idodi game da amfani da tsarin sarrafawa a cikin ƙayyadaddun abubuwa akan na'urorin hannu. Duba takaddun tallafin burauzan mu don cikakkun bayanai.

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>

takamaiman amfani

Kamar daidaitattun azuzuwan maɓallin maɓallin , .navbar-btnana iya amfani da su akan <a>da <input>abubuwa. Koyaya, .navbar-btnko madaidaicin azuzuwan maɓalli bai kamata a yi amfani da <a>abubuwan da ke cikin .navbar-nav.

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.

Dama daidaita abubuwa da yawa

Navbars a halin yanzu suna da iyaka tare da .navbar-rightazuzuwan da yawa. Don abun ciki na sarari da kyau, muna amfani da ragi mara kyau akan kashi na ƙarshe .navbar-right. Lokacin da akwai abubuwa da yawa da ke amfani da wannan ajin, waɗannan tatsuniyoyi ba sa aiki yadda aka yi niyya.

Za mu sake duba wannan lokacin da za mu iya sake rubuta wancan bangaren a v4.

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

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>

Lakabi

Misali

Misalin kan Sabon

Misalin kan Sabon

Misalin kan Sabon

Misalin kan Sabon

Misalin kan Sabon
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 .

Alamomi

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>

Jumbotron

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>

taken shafi

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>

Thumbnails

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

100% x200

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

100% x200

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

100% x200

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>

Fadakarwa

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.

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

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

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

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

Sandunan ci gaba

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.

Kashi 60% cikakke
<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.

40% Cikak (nasara)
20% cikakke
Kashi 60% Cikak (gargadi)
80% Cikak (haɗari)
<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.

40% Cikak (nasara)
20% cikakke
Kashi 60% Cikak (gargadi)
80% Cikak (haɗari)
<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.

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

35% Cikak (nasara)
20% Cikak (gargadi)
10% Cikak (haɗari)
<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>

Abun jarida

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>

Jerin rukuni

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

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

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

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

Panels

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>

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

Ƙaddamar da amsawa

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>

Wells

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>