Iiglyphs ezifumanekayo

Ibandakanya ngaphezulu kwe-250 glyphs kwifomati yefonti ukusuka kwiseti ye-Glyphicon Halflings. IiGlyphicons Halflings azifumaneki simahla, kodwa umdali wazo uzenze zafumaneka kwiBootstrap simahla. Njengombulelo, sicela kuphela ukuba ufake ikhonkco elibuyela kwiiGlyphicons nanini na kunokwenzeka.

iglyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
iglyphicon glyphicon-cloud
glyphicon glyphicon-mvulophu
iglyphicon glyphicon-pensile
glyphicon glyphicon-glass
glyphicon glyphicon-umculo
glyphicon glyphicon-ukukhangela
glyphicon glyphicon-intliziyo
glyphicon glyphicon-star
glyphicon glyphicon-star-engenanto
glyphicon glyphicon-umsebenzisi
glyphicon glyphicon-ifilimu
iglyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-luhlu
glyphicon glyphicon-ok
glyphicon glyphicon-susa
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
iglyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-udoti
glyphicon glyphicon-ekhaya
glyphicon glyphicon-fayile
glyphicon glyphicon-ixesha
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
iglyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-isangqa
glyphicon glyphicon-phinda
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
iflegi yeglyphicon
i-glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-umthamo-phantsi
glyphicon glyphicon-umthamo-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
I-glyphicon glyphicon-tags
glyphicon glyphicon-ncwadi
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
ikhamera yeglyphicon yeglyphicon
iglyphicon glyphicon-font
iglyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-ubude
glyphicon glyphicon-text-width
glyphicon glyphicon-align- left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
uluhlu lweglyphicon glyphicon
glyphicon glyphicon-indent-ekhohlo
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-ividiyo
glyphicon glyphicon-umfanekiso
iglyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-hlela
i-glyphicon glyphicon-share
glyphicon glyphicon-jonga
glyphicon glyphicon-move
glyphicon glyphicon-inyathelo-ngasemva
glyphicon glyphicon-ngokukhawuleza-ngasemva
glyphicon glyphicon-ngasemva
glyphicon glyphicon-umdlalo
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-phambili
glyphicon glyphicon-ukukhawuleza-phambili
glyphicon glyphicon-inyathelo-phambili
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-ekhohlo
glyphicon glyphicon-chevron-right
iglyphicon glyphicon-plus-sign
iglyphicon glyphicon-minus-sign
glyphicon glyphicon-susa-uphawu
iglyphicon glyphicon-ok-sign
glyphicon glyphicon-umbuzo-uphawu
glyphicon glyphicon-info-sign
glyphicon glyphicon-isithombe-skrini
glyphicon glyphicon-susa-isangqa
glyphicon glyphicon-ok-isangqa
glyphicon glyphicon-ban-isangqa
glyphicon glyphicon-utolo-ekhohlo
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-isikhuzo-uphawu
glyphicon glyphicon-isipho
glyphicon glyphicon-igqabi
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
uphawu lweglyphicon glyphicon-isilumkiso
glyphicon glyphicon-plane
glyphicon glyphicon-ikhalenda
glyphicon glyphicon-random
glyphicon glyphicon-comment
iglyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-inqwelo yokuthenga
iglyphicon glyphicon-folder-close
iglyphicon glyphicon-ifolda-evulekileyo
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
isatifikethi se-glyphicon glyphicon
glyphicon glyphicon-ubhontsi-up
glyphicon glyphicon-obhontsi-phantsi
glyphicon glyphicon-isandla-ekunene
glyphicon glyphicon-isandla-ekhohlo
glyphicon glyphicon-hand-up
glyphicon glyphicon-isandla-phantsi
glyphicon glyphicon-isangqa-utolo-ekunene
glyphicon glyphicon-isangqa-utolo-ekhohlo
glyphicon glyphicon-isangqa-utolo-up
glyphicon glyphicon-isangqa-utolo-phantsi
iglyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-imisebenzi
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-intliziyo-engenanto
glyphicon glyphicon-link
glyphicon glyphicon-ifowuni
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-udidi
I-glyphicon i-glyphicon-hlela-nge-alfabhethi
glyphicon glyphicon-sort-by-alfabhethi-alt
glyphicon glyphicon-hlela-nge-odolo
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-hlela-ngeempawu
I-glyphicon i-glyphicon-hlela-nge-impawu-alt
iglyphicon glyphicon-ayikhangelwanga
glyphicon glyphicon-ukwandisa
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
iglyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-irekhodi
glyphicon glyphicon-gcina
glyphicon glyphicon-evulekileyo
glyphicon glyphicon-igciniwe
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-thumela
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-igciniwe
glyphicon glyphicon-floppy-susa
glyphicon glyphicon-floppy-gcina
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
i-glyphicon glyphicon-cutlery
glyphicon glyphicon-header
iglyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
i-glyphicon-glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-ividiyo
glyphicon glyphicon-hd-ividiyo
glyphicon glyphicon-imibhalo engezantsi
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-gcina-ifayile
glyphicon glyphicon-vula-ifayile
iglyphicon glyphicon-level-up
glyphicon glyphicon-ikopi
i-glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-ukumkanikazi
glyphicon glyphicon-pawn
glyphicon glyphicon-bhishophu
glyphicon glyphicon-knight
I-glyphicon i-glyphicon-ifomula yomntwana
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
ibhedi yeglyphicon
glyphicon glyphicon-apile
glyphicon glyphicon-ukucima
glyphicon glyphicon-hourglass
i-glyphicon glyphicon-isibane
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
iglyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
i-glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
iglyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-imfundo
glyphicon glyphicon-option-horizontal
I-glyphicon i-glyphicon-inketho-ethe nkqo
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-oyile
iglyphicon glyphicon-grain
iiglasi zeglyphicon zelanga
iglyphicon glyphicon-text-size
glyphicon glyphicon-text-umbala
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align- left
I-glyphicon-glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-ekhohlo
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-imenyu-ekhohlo
glyphicon glyphicon-imenyu-ekunene
glyphicon glyphicon-imenyu-phantsi
glyphicon glyphicon-imenyu-up

Kusetyenziswa kwanjani

Ngezizathu zokusebenza, zonke ii-icon zifuna iklasi yesiseko kunye neklasi ye icon yomntu. Ukusebenzisa, beka le khowudi ilandelayo naphi na. Qinisekisa ukuba ushiya isithuba phakathi kwe-icon kunye nesicatshulwa ukwenzela ukukhutshwa okufanelekileyo.

Musa ukudibanisa namanye amalungu

Iiklasi ze-Icon azinakudityaniswa ngokuthe ngqo namanye amacandelo. Akufunekanga zisetyenziswe kunye nezinye iiklasi kwinto enye. Endaweni yoko, yongeza i-nested <span>kwaye usebenzise iiklasi ze icon kwi <span>.

Kuphela isetyenziselwa izinto ezingenanto

Iiklasi ze-Icon kufuneka zisetyenziswe kuphela kwizinto ezingenamxholo wokubhaliweyo kwaye ezingenazo izinto zomntwana.

Ukutshintsha indawo yefonti ye icon

I-Bootstrap ithatha iifayile zomgca we icon ziya kufumaneka ../fonts/kulawulo, ngokunxulumene neefayile zeCSS eziqokelelweyo. Ukuhambisa okanye ukuthiya ngokutsha ezo fayile zefonti kuthetha ukuhlaziya iCSS ngenye yeendlela ezintathu:

Guqula @icon-font-pathkunye/okanye @icon-font-nameiinguqu kumthombo Iifayile ezingaphantsi.
Sebenzisa isalamane se-URLs ukhetho olunikezwe nguMqokeleli oMncinane.
Guqula url()iindlela kwi-CSS eqokelelweyo.

Sebenzisa naluphi na ukhetho olulungele ukuseta kwakho uphuhliso oluthile.

Iimpawu ezifikelelekayo

Iinguqulelo zanamhlanje zetekhnoloji ezincedisayo ziya kubhengeza umxholo owenziwe yiCSS, kunye neempawu ezithile ze-Unicode. Ukunqanda iziphumo ebezingalindelekanga nezibhidayo kwizifundi zesikrini (ingakumbi xa ii-icon zisetyenziselwa ukuhombisa kuphela), siyazifihla kunye aria-hidden="true"nophawu.

Ukuba usebenzisa i-icon ukudlulisa intsingiselo (kunokuba ibe yinto yokuhombisa kuphela), qinisekisa ukuba le ntsingiselo ikwagqithiselwa kwiiteknoloji ezincedisayo - umzekelo, bandakanya umxholo owongezelelweyo, ofihliweyo ngokubonakalayo kunye .sr-onlyneklasi.

Ukuba wenza izilawuli ezingenaso esinye isicatshulwa (esifana ne <button>-icon kuphela), kufuneka usoloko unikezela ngomxholo ongomnye ukuchonga injongo yolawulo, ukuze kube sengqiqweni kubasebenzisi boncedo lobuchwepheshe. Kulo mzekelo, unokongeza aria-labeluphawu kulawulo ngokwalo.

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

Imizekelo

Zisebenzise kumaqhosha, amaqela amaqhosha ebar yesixhobo, ukukhangela, okanye amagalelo efomu esele ibekiwe.

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

I-ayikhoni esetyenziswe kwisivuseleli ukubonisa ukuba ngumyalezo wemposiso, kunye .sr-onlynokubhaliweyo okongeziweyo ukuhambisa le ngcebiso kubasebenzisi boncedo lobuchwephesha.

Ngenisa idilesi ye-imeyile esebenzayo

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

Iyatshintsheka, imenyu yomxholo yokubonisa uluhlu lwamakhonkco. Yenziwe yasebenzisane kunye nokwehla kweJavaScript plugin .

Umzekelo

Vala iqhosha lotsalo kunye nemenyu eyehlayo ngaphakathi .dropdown, okanye enye into echaza position: relative;. Emva koko yongeza i-HTML yemenyu.

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

Iimenyu ezihlayo zingatshintshwa ukuze zandise phezulu (endaweni yokuhla) ngokongeza .dropupkumzali.

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

Ulungelelwaniso

Ngokungagqibekanga, imenyu eyehlayo ibekwa ngokuzenzekelayo nge-100% ukusuka phezulu kunye necala lasekhohlo lomzali wayo. Yongeza .dropdown-menu-rightku-a .dropdown-menuukuya ekunene lungelelanisa imenyu eyehlayo.

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

Iiheader

Yongeza iheader ukulebhelisha amacandelo eentshukumo kuyo nayiphi na imenyu eyehlayo.

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

Umahluli

Yongeza isahluli kuthotho olwahlukileyo lwekhonkco kwimenyu eyehlayo.

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

Izinto zemenyu zivaliwe

Yongeza .disabledkwi <li>-dropdown ukuvala ikhonkco.

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

Hlanganisa uluhlu lwamaqhosha kunye kumgca omnye kunye neqela lamaqhosha. Yongeza unomathotholo weJavaScript okhethiweyo kunye nokuziphatha kwesimbo sebhokisi ngamaqhosha ethu eplagi .

Iingcebiso zesixhobo kunye neepopovers kumaqela amaqhosha zifuna useto olulodwa

Xa usebenzisa iincam zesixhobo okanye iipopovers kwizinto ezingaphakathi kwe .btn-group, kuya kufuneka ukhankanye ukhetho container: 'body'lokunqanda iziphumo ebezingalindelekanga ezingafunekiyo (ezifana ne element ikhula banzi kunye/okanye ilahlekwe neekona zayo ezingqukuva xa itooltip okanye ipopover isenziwa).

Qinisekisa ukuba ichanekile `role`kwaye unikeze ileyibhile

Ukuze uncediso lwetekhnoloji - ezifana nezifundi zesikrini - ukubonisa ukuba uthotho lwamaqhosha abekwe ngokwamaqela, uphawu olufanelekileyo rolekufuneka lubonelelwe. Kumaqela amaqhosha, oku kuyakuba role="group", ngelixa iibar zesixhobo kufuneka zibe ne role="toolbar".

Okunye ngaphandle ngamaqela aqulathe kuphela ulawulo olunye (umzekelo amaqela amaqhosha athetheleleyo aneziqalelo <button>) okanye owa phantsi.

Ukongeza, amaqela kunye neebar zesixhobo kufuneka zinikwe ileyibhile ecacileyo, njengoko uninzi lweetekhnoloji ezincedisayo aziyi kuzibhengeza, nangona kukho roleuphawu oluchanekileyo. Kwimizekelo enikelwe apha, sisebenzisa aria-label, kodwa ezinye iindlela aria-labelledbyezinokuthi zisetyenziswe.

Umzekelo osisiseko

Gquba uthotho lwamaqhosha .btnnge .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>

Dibanisa iiseti <div class="btn-group">zibe ngu <div class="btn-toolbar">a kumacandelo anzima ngakumbi.

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

Ubungakanani

Endaweni yokufaka iiklasi zokulinganisa iqhosha kwiqhosha ngalinye kwiqela, yongeza .btn-group-*nje kwelinye .btn-group, kubandakanywa xa ugcina amaqela amaninzi.

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

Ukuzalela

Faka .btn-groupphakathi kwenye .btn-groupxa ufuna iimenu ezihlayo ezixutywe nothotho lwamaqhosha.

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

Ukwahluka ngokuthe nkqo

Yenza isethi yamaqhosha abonakale epakishwe ngokuthe nkqo kunokuba uthe tye. Uwiso lweqhosha lokwahlula aluxhaswa apha.

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

Amaqela amaqhosha athetheleleyo

Yenza iqela lamaqhosha anwebe ngokobukhulu obulinganayo ukunweba bonke ububanzi bomzali wayo. Ikwasebenza kunye nokwehla kwamaqhosha ngaphakathi kweqela lamaqhosha.

Ukuphatha imida

Ngenxa yeHTML ethile kunye neCSS esetyenziselwa ukuthethelela amaqhosha (okuthi display: table-cell), imida phakathi kwayo iphindwe kabini. Kumaqela amaqhosha aqhelekileyo, margin-left: -1pxisetyenziselwa ukupakisha imida endaweni yokuyisusa. Nangona kunjalo, marginayisebenzi kunye display: table-cell. Ngenxa yoko, kuxhomekeke kuhlengahlengiso lwakho kwiBootstrap, unokunqwenela ukususa okanye ukufaka umbala kwakhona kwimida.

IE8 kunye nemida

I-Internet Explorer 8 ayinikezeli imida kumaqhosha kwiqela elilungelelanisiweyo, nokuba ivuliwe <a>okanye <button>izakhi. Ukujikeleza oko, songela iqhosha ngalinye kwelinye .btn-group.

Bona #12476 ngolwazi oluthe kratya.

Neziqalelo `<a>`_

Songa nje uthotho lwe .btns kwi .btn-group.btn-group-justified.

Khohlo Phakathi Kunene

Khohlo Phakathi

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

Amakhonkco asebenza njengamaqhosha

Ukuba <a>izinto zisetyenziselwa ukwenza njengamaqhosha - ukuqalisa ukusebenza kwekhasi, kunokuba uhambe uye kwelinye uxwebhu okanye icandelo ngaphakathi kwephepha langoku - kufuneka kwakhona banikwe efanelekileyo role="button".

Neziqalelo `<button>`_

Ukusebenzisa amaqela amaqhosha <button>aneziqalelo, kufuneka usonge iqhosha ngalinye kwiqela leqhosha . Uninzi lwabakhangeli beencwadi aluyisebenzisi ngokufanelekileyo i-CSS yethu ukuthetheleleka <button>kwizinto, kodwa njengoko sixhasa ukwehla kwamaqhosha, sinokusebenza malunga naloo nto.

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

Sebenzisa naliphi na iqhosha ukuqalisa imenyu eyehlayo ngokuyibeka ngaphakathi .btn-groupkunye nokubonelela ngophawu olufanelekileyo lwemenyu.

Ukuxhomekeka kwi-plugin

Ukuhla kwamaqhosha kufuna iplagin eyehlayo ukuba ibandakanywe kwinguqulelo yakho yeBootstrap.

Ukwehla kweqhosha elinye

Jika iqhosha libe kuluhlu lokulahla kunye notshintsho olusisiseko lophawulo.

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

Ukwehliswa kweqhosha lokwahlula

Ngokukwanjalo, yenza iqhosha elicandiweyo elehlayo ngotshintsho olufanayo lophawulo, kuphela ngeqhosha elahlukileyo.

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

Ubungakanani

Amaqhosha okwehla asebenza ngamaqhosha abo bonke ubukhulu.

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

Ukwahluka kokulahla

Qalisa imenyu eyehlayo ngasentla kwezinto ngokongeza .dropupkumzali.

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

Yandisa ulawulo lwefom ngokongeza umbhalo okanye amaqhosha ngaphambi, emva, okanye kumacala omabini ayo nayiphi na itekisi esekwe <input>. Sebenzisa .input-groupkunye .input-group-addonokanye .input-group-btnukulungisa okanye ukudibanisa izinto kwenye .form-control.

Okubhaliweyo `<input>`s kuphela

Kuphephe ukusebenzisa <select>izinto apha njengoko zingenako isitayile ngokupheleleyo kwizikhangeli zeWebKit.

Kuphephe ukusebenzisa <textarea>iziqalelo apha njengoko rowsuphawu lwazo aluyi kuhlonitshwa kwezinye iimeko.

Iingcebiso zezixhobo kunye neepopovers kumaqela egalelo zifuna useto olulodwa

Xa usebenzisa iincam zesixhobo okanye iipopovers kwizinto ezingaphakathi kwe .input-group, kuya kufuneka ukhankanye ukhetho container: 'body'lokunqanda iziphumo ebezingalindelekanga ezingafunekiyo (ezifana ne element ikhula banzi kunye/okanye ilahlekwe neekona zayo ezingqukuva xa itooltip okanye ipopover isenziwa).

Musa ukudibanisa namanye amalungu

Musa ukudibanisa amaqela efom okanye iiklasi zekholamu zegridi ngokuthe ngqo namaqela ongeniso. Endaweni yoko, gcina iqela legalelo ngaphakathi kweqela lefom okanye into enxulumene negridi.

Yongeza iilebhile rhoqo

Abafundi besikrini baya kuba nengxaki ngeefomu zakho ukuba awubandakanyi ileyibhile yalo lonke igalelo. Kula maqela egalelo, qinisekisa ukuba nayiphi na ileyibhile eyongezelelweyo okanye ukusebenza kugqithiselwa kwiitekhnoloji zokuncedisa.

Ubuchule obuchanekileyo bokusetyenziswa (izinto ezibonakalayo <label>, <label>izinto ezifihliweyo kusetyenziswa .sr-onlyiklasi, okanye ukusetyenziswa kwe aria-label, aria-labelledby, aria-describedby, titleokanye placeholderuphawu) kwaye loluphi ulwazi olongezelelweyo oluya kufuneka ukuba lugqithiselwe luyakwahluka ngokuxhomekeke kuhlobo oluchanekileyo lwewijethi yojongano olumiliselayo. Imizekelo ekweli candelo inika iingcebiso ezimbalwa, iindlela ezingqalileyo.

Umzekelo osisiseko

Beka i-add-on enye okanye iqhosha macala omabini wegalelo. Usenokubeka enye kumacala omabini egalelo.

Asizixhasi izongezo ezininzi ( .input-group-addonokanye .input-group-btn) kwicala elinye.

Asiluxhasi iifomu ezininzi zolawulo kwiqela elinye longeniso.

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

Ubungakanani

Yongeza iiklasi zokulinganisa ifom ehambelana .input-groupnayo kwaye iziqulatho ngaphakathi ziya kwenza ubungakanani kwakhona ngokuzenzekelayo-akukho mfuneko yokuphinda iiklasi zolawulo lwefom kwinto nganye.

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

Iibhokisi zokukhangela kunye neeaddon zerediyo

Beka nayiphi na ibhokisi yokukhangela okanye irediyo ukhetho phakathi kweaddon yeqela longeniso endaweni yokubhaliweyo.

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

Iqhosha lezongezo

Amaqhosha kumaqela egalelo ahluke kancinane kwaye afuna inqanaba elinye elongezelelweyo lokuzalela. Endaweni yoko .input-group-addon, kuya kufuneka usebenzise .input-group-btnukusonga amaqhosha. Oku kuyafuneka ngenxa yesimbo sokungagqibeki sesikhangeli esingenako ukukhutshelwa ngaphezulu.

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

Amaqhosha ane dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Amaqhosha ahlukeneyo

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

Amaqhosha amaninzi

Ngelixa unokongeza enye kuphela kwicala ngalinye, unokuba namaqhosha amaninzi ngaphakathi kwelinye .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>

Ii-Navs ezikhoyo kwi-Bootstrap ziye zabelane ngemarkup, ziqala ngeklasi yesiseko .nav, kunye neendawo ezabelwana ngazo. Tshintsha iiklasi zesilungisi ukutshintsha phakathi kwesimbo ngasinye.

Ukusebenzisa i-navs kwiiphaneli zethebhu kufuna iplagi ye-JavaScript tabs

Kwiithebhu ezinendawo ezinokuthi zenzeke, kufuneka usebenzise ii tab JavaScript plugin . Imarkup nayo iya kufuna roleiimpawu ezongezelelweyo kunye ne-ARIA - bona umzekelo we-plugin yophawulo ngeenkcukacha ezithe vetshe.

Yenza i-navs isetyenziswe njengokukhangela kufikeleleke

Ukuba usebenzisa i-navs ukubonelela ngebar yokukhangela, qiniseka ukuba wongeza u role="navigation"-a kwesona sikhongozeli sinomzali sinengqiqo se- <ul>, okanye usonge <nav>into ejikeleze lonke ukukhangela. Musa ukongeza indima kuyo <ul>ngokwayo, njengoko oku kuya kuthintela ukuba ibhengezwe njengoluhlu lokwenyani ngobuchule bokuncedisa.

Iithebhu

Qaphela ukuba .nav-tabsiklasi ifuna .naviklasi yesiseko.

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

Iipilisi

Thatha kwaloo HTML inye, kodwa sebenzisa .nav-pillsendaweni yoko:

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

Iipilisi nazo zibekwe ngokuthe nkqo. Yongeza nje .nav-stacked.

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

Igwetyelwe

Yenza iithebhu okanye iipilisi ngokulula zibe nobubanzi obulinganayo bomzali wabo kwizikrini ezibanzi kuno-768px nge .nav-justified. Kwizikrini ezincinci, amakhonkco e-nav apakishwe.

Amakhonkco e-navbar athethelelweyo akaxhaswa okwangoku.

Safari kunye navs ephendulayo ethethelelayo

Ukusukela kwi-v9.1.2, iSafari ibonisa ibug apho ukwenza ubungakanani bebrawuza yakho ngokuthe tye kubangela iimpazamo zonikezelo kwi-nav ethethelelekayo ecinywayo xa ihlaziya. Le bug ikwabonisiwe kumzekelo we nav othethelelekayo .

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

Amakhonkco avaliwe

Kulo naliphi na icandelo le-nav (iithebhu okanye iipilisi), yongeza amakhonkco angwevu kwaye akukho ziphumo .disabledze - hover .

Ukusebenza kwekhonkco akuchaphazelekanga

Olu didi luzakutshintsha kuphela <a>inkangeleko, hayi ukusebenza kwalo. Sebenzisa iJavaScript yesiko ukuvala amakhonkco apha.

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

Ukusebenzisa iidrophu

Yongeza iimenu ezihlayo nge-HTML encinci eyongezelelweyo kunye neplagi ye- JavaScript eyehlayo .

Iithebhu ezinokwehla

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

Iipilisi ezine dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Ii-Navbar ngamalungu e-meta aphendulayo asebenza njengezihloko zokukhangela kwisicelo sakho okanye indawo. Ziqala ukudilika (kwaye zitshintsheka) kwiimboniselo ezihambayo kwaye zibe tyenzisiweyo njengoko ububanzi bendawo yokujonga bunyuka.

Amakhonkco e-navbar athethelelweyo akaxhaswa okwangoku.

Umxholo ophuphumayo

Kuba i-Bootstrap ingayazi ukuba singakanani na isithuba somxholo kwiimfuno zakho ze-navbar, ungangena kwimiba engomxholo kumqolo wesibini. Ukusombulula oku, unga:

Nciphisa inani okanye ububanzi bezinto ze-navbar.
Fihla izinto ezithile zebar ye navbar kwiisayizi ezithile zesikrini usebenzisa iiklasi eziluncedo eziphendulayo .
Guqula indawo apho i-navbar yakho itshintsha khona phakathi kwemo ewileyo kunye nethe tye. Lungiselela @grid-float-breakpointukuguquguquka okanye wongeze owakho umbuzo kwimidiya.

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

Buyisela ibhrendi ye navbar ngomfanekiso wakho ngokutshintshisa okubhaliweyo kwi <img>. Kuba i .navbar-brand-padding yayo kunye nobude bayo, unokufuna ngaphezulu kwe-CSS ngokuxhomekeke kumfanekiso wakho.

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

Beka umxholo wefom ngaphakathi .navbar-formukwenzela ulungelelwaniso oluthe nkqo olululo kunye nokuziphatha okugobileyo kwiindawo zokujonga ezimxinwa. Sebenzisa iinketho zolungelelwaniso ukwenza isigqibo apho ihlala khona ngaphakathi kumxholo we-navbar.

Njengentloko phezulu, .navbar-formyabelana uninzi lwekhowudi yayo .form-inlinenge-mixin. Ezinye iifom zolawulo, njengamaqela egalelo, zinokufuna ububanzi obusisigxina ukuba buboniswe ngokufanelekileyo kwi-navbar.

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

Yongeza iilebhile rhoqo

Abafundi besikrini baya kuba nengxaki ngeefomu zakho ukuba awubandakanyi ileyibhile yalo lonke igalelo. Kwezi fom zangaphakathi, ungazifihla iilebhile usebenzisa .sr-onlyiklasi. Kukho ezinye iindlela ezizezinye zokubonelela ngeleyibhile yeetekhnoloji ezincedisayo, ezifana ne- aria-label, aria-labelledbyokanye titleuphawu. Ukuba akukho nanye kwezi ekhoyo, abafundi besikrini banokubhenela ekusebenziseni placeholderuphawu, ukuba lukhona, kodwa qaphela ukuba ukusetyenziswa placeholderkwendawo yezinye iindlela zokuleyibheli akucetyiswa.

Yongeza .navbar-btniklasi <button>kwiziqalelo <form>ezingahlaliyo kwi-a ukuyibeka embindini ngokuthe nkqo kwi-navbar.

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

Songa imitya yokubhaliweyo ngento nge .navbar-text, ngokuqhelekileyo <p>kwithegi yokukhokela nombala ofanelekileyo.

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

Kubantu abasebenzisa amakhonkco asemgangathweni angekho ngaphakathi kwecandelo lokukhangela le-navbar eliqhelekileyo, sebenzisa .navbar-linkiklasi ukongeza imibala efanelekileyo yokhetho olungagqibekanga kunye nenguquko yebar ye-navbar.

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

Lungelelanisa amakhonkco e-nav, iifom, amaqhosha, okanye okubhaliweyo, usebenzisa .navbar-leftokanye .navbar-rightiiklasi eziluncedo. Zombini iiklasi ziya kongeza i-CSS edadayo kwicala elichaziweyo. Umzekelo, ukulungelelanisa amakhonkco e-nav, uwabeke kwindawo eyahlukileyo <ul>kunye nodidi oluluncedo olusetyenziswayo.

Ezi klasi ziinguqulelo ezixubeneyo ze .pull-leftkwaye .pull-right, kodwa zijongwe kwimibuzo yemidiya ukuze kuphathwe lula amalungu e-navbar kuzo zonke iisayizi zesixhobo.

Yongeza .navbar-fixed-topkwaye uquke i .containerokanye .container-fluidkwiziko kunye ne pad navbar umxholo.

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

Ukugquma umzimba kuyafuneka

Ibar ye navbar esisigxina iya kwaleka omnye umxholo wakho, ngaphandle kokuba wongeza paddingphezulu kwe <body>. Zama amaxabiso akho okanye usebenzise isiqwengana sethu esingezantsi. Ingcebiso: Ngokuzenzekelayo, i-navbar iphezulu nge-50px.

body { padding-top: 70px; }

Qinisekisa ukubandakanya oku emva kwe-CSS ye-Bootstrap engundoqo.

Yongeza .navbar-fixed-bottomkwaye uquke i .containerokanye .container-fluidkwiziko kunye ne pad navbar umxholo.

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

Ukugquma umzimba kuyafuneka

Ibar ye navbar elungisiweyo iya kwaleka omnye umxholo wakho, ngaphandle kokuba wongeza paddingezantsi kwe <body>. Zama amaxabiso akho okanye usebenzise isiqwengana sethu esingezantsi. Ingcebiso: Ngokuzenzekelayo, i-navbar iphezulu nge-50px.

body { padding-bottom: 70px; }

Qinisekisa ukubandakanya oku emva kwe-CSS ye-Bootstrap engundoqo.

Yenza i-navbar enobubanzi obugcweleyo eskrola kude nephepha ngokudibanisa .navbar-static-topkwaye iquke i .containerokanye .container-fluidukuya embindini kunye nomxholo wepad navbar.

Ngokungafaniyo .navbar-fixed-*neeklasi, awudingi ukutshintsha nayiphi na i-padding kwi- body.

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

Guqula inkangeleko ye navbar ngokongeza .navbar-inverse.

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

Iimvuthuluka zezonka

Bonisa indawo yephepha langoku phakathi koluhlu lokukhangela.

Izahluli zongezwa ngokuzenzekelayo kwiCSS :beforenge content.

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

Ukwenziwa kwePagination

Nikeza amakhonkco okwenziwa kwamaphepha esayithi yakho okanye i-app enecandelo lamaphepha amaninzi lokupheyija, okanye enye indlela elula yokupheyija .

Ukwenziwa kwamaphepha okuhlala kukho

I-pagination elula ephefumlelwe yi-Rdio, ilungile kwii-apps kunye neziphumo zokukhangela. Ibhloko enkulu kunzima ukuyiphosa, kulula ukukala, kwaye ibonelela ngeendawo ezinkulu zokucofa.

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

Ukuleyibhelishwa kwecandelo lobuhedeni

Icandelo lephegination kufuneka lisongelwe <nav>kwinto ukuyichonga njengecandelo lokukhangela kwizifundi zesikrini kunye nobunye ubugcisa bokuncedisa. Ukongeza, njengoko iphepha linokuba nangaphezulu kwecandelo elinye lokukhangela esele likhona (elifana nokukhangela okuphambili kwisihloko, okanye ukukhangela kwebar esecaleni), kuyacetyiswa ukuba unikeze inkcazo aria-labelebonisa <nav>injongo yayo. Umzekelo, ukuba indawo yokubhala isetyenziselwa ukuzulazula phakathi kweqela leziphumo zokhangelo, ileyibhile efanelekileyo inokuba aria-label="Search results pages".

Iimeko ezikhubazekileyo nezisebenzayo

Unxulumano luyakwazi ukwenzeka kwiimeko ezahlukeneyo. Sebenzisa .disabledamakhonkco angenakucofa kunye .activenokubonisa iphepha langoku.

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

Sicebisa ukuba utshintshe iiankile ezisebenzayo okanye ezikhubazekileyo ze <span>, okanye ushiye iankile kwimeko yangaphambili/elandelayo iintolo, ukususa umsebenzi wonqakrazo ngelixa ugcina izimbo ezicetyiweyo.

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

Ubungakanani

Ngaba ufuna ukwenza i-pagination enkulu okanye encinci? Yongeza .pagination-lgokanye .pagination-smiisayizi ezongezelelweyo.

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

Ipheyija

Iikhonkco ezikhawulezayo zangaphambili kunye nezilandelayo zophumezo olulula lwe-pagination ngophawu olukhanyayo kunye nezitayile. Ilungile kwiziza ezilula ezifana neeblogi okanye iimagazini.

Umzekelo omiselweyo

Ngokungagqibekanga, amaziko e-pageja amakhonkco.

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

Amakhonkco alungelelanisiweyo

Kungenjalo, unokulungelelanisa ikhonkco ngalinye emacaleni:

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

Ukhetho lwemeko yokukhubazeka

Amakhonkco ePager aphinda asebenzise .disablediklasi eluncedo ngokubanzi ukusuka kwipagination.

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

Umzekelo

Umzekelo isihloko Esitsha

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

Ukwahluka okukhoyo

Yongeza naziphi na iiklasi zesilungisi kwezi zikhankanywe ngezantsi ukutshintsha inkangeleko yeleyibhile.

ISilumkiso seNgcaciso yeMpumelelo eMiselweyo esisiseko _

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

Unetoni zeelebhile?

Unikezelo lweengxaki zinokuvela xa unenqwaba yeelebhile ezingaphakathi kwisikhongozeli esimxinwa, nganye iqulethe eyeyayo inline-blockelement (njenge icon). Indlela ejikeleze oku ibeka display: inline-block;. Ngomxholo kunye nomzekelo, bona #13219 .

Gcoba ngokulula izinto ezintsha okanye ezingafundwanga ngokudibanisa <span class="badge">ikhonkco, iBootstrap navs, kunye nokunye.

Ibhokisi yangaphakathi42

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

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

Ukuziwisa

Xa kungekho zinto zintsha okanye zingafundwanga, iibheji ziya kuwa ngokulula (ngokusebenzisa :emptyumkhethi weCSS) ngaphandle kokuba akukho mxholo ukhoyo ngaphakathi.

Ukuhambelana kwebrowser

Iibheji azinakuziwisa kwi-Internet Explorer 8 kuba ayinankxaso :emptyyomkhethi.

Iqhelanisa neemeko ze-nav ezisebenzayo

Izitayela ezakhelwe ngaphakathi zibandakanyiwe ukubeka iibheji kwiindawo ezisebenzayo kwiipilisi zokuhamba.

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

Into ekhaphukhaphu, eguquguqukayo enokuthi ngokuzikhethela yandise indawo yokujonga yonke ukubonisa umxholo ophambili kwisiza sakho.

Molo Lizwe!

Le yiyunithi yeqhawe elilula, icandelo elilula le-jumbotron lokubiza ingqalelo eyongezelelweyo kumxholo ofakiweyo okanye ulwazi.

Funda nzulu

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

Ukwenza ijumbotron ububanzi obugcweleyo, kwaye ngaphandle kweekona ezingqukuva, yibeke ngaphandle kwayo yonke .containeri-s kwaye endaweni yoko wongeze .containerngaphakathi.

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

Iqokobhe elilula h1lesithuba esifanelekileyo kunye namacandelo ecandelo lomxholo kwiphepha. Ingasebenzisa isiqalelo h1esingagqibekanga small, kunye noninzi lwamanye amalungu (enezimbo ezongezelelweyo).

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

Yandisa inkqubo yegridi yeBootstrap kunye necandelo le-thumbnail ukubonisa ngokulula iigridi zemifanekiso, iividiyo, umbhalo, nokunye.

Ukuba ujonge iPinterest-efana neprezenteyishini yee-thumbnails zobude obahlukeneyo kunye/okanye ububanzi, kuya kufuneka usebenzise iplagi yomntu wesithathu efana neMasonry , Isotope , okanye Salvattore .

Umzekelo omiselweyo

Ngokungagqibekanga, ii-thumbnails zeBootstrap ziyilelwe ukubonisa imifanekiso edityanisiweyo enophawu oluncinci olufunekayo.

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

Umxholo oqhelekileyo

Ngophawu olongezelelweyo olongezelelweyo, kuyenzeka ukongeza naluphi na uhlobo lomxholo we-HTML njengezihloko, imihlathi, okanye amaqhosha kwi-thumbnails.

Ileyibhile ye-Thumbnail

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

Iqhosha Iqhosha

Ileyibhile ye-Thumbnail

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

Iqhosha Iqhosha

Ileyibhile ye-Thumbnail

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

Iqhosha Iqhosha

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

Nikezela ngemiyalezo yengxelo yomxholo kwiintshukumo eziqhelekileyo zabasebenzisi kunye nesandla semiyalezo efumanekayo neguqukayo yesilumkiso.

Imizekelo

Songa nasiphi na isicatshulwa kunye neqhosha lokuchitha elikhethiweyo .alertkunye nenye yeeklasi ezine zomxholo (umzekelo, .alert-success) kwimiyalezo esisiseko yesilumkiso.

Akukho didi oluhlala lukhona

Izivuseleli azinazo iiklasi ezingagqibekanga, kuphela isiseko kunye neeklasi zesilungisi. Isivuseleli esihlala singwevu asenzi ingqiqo kakhulu, ngoko ke kufuneka ukhankanye uhlobo ngodidi lomxholo. Khetha kwimpumelelo, ulwazi, isilumkiso, okanye ingozi.

Wenze kakuhle! Ufunde ngempumelelo lo myalezo ubalulekileyo wesilumkiso.

Iintloko phezulu! Esi silumkiso sidinga ukuhoywa kwakho, kodwa asibalulekanga kakhulu.

Isilumkiso! Ngcono uzijonge, awubukeki umhle kakhulu.

Owu khawuleza! Guqula izinto ezimbalwa kwaye uzame ukuthumela kwakhona.

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

Izilumkiso ezigxothwayo

Yakha kuso nasiphi na isivuseleli ngokongeza .alert-dismissibleiqhosha elikhethiweyo kunye nokuvala.

Ifuna i-JavaScript yesivuseleli seplagi

Ukusebenza ngokupheleleyo, izilumkiso ezigxothwayo, kufuneka usebenzise izilumkiso zeJavaScript plugin .

Isilumkiso! Ngcono uzijonge, awubukeki umhle kakhulu.

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

Qinisekisa ukuziphatha okufanelekileyo kuzo zonke izixhobo

Qinisekisa ukusebenzisa <button>isiqalelo esinophawu data-dismiss="alert"lwedatha.

Unxulumano kwizilumkiso

Sebenzisa .alert-linkiklasi eluncedo ukubonelela ngokukhawuleza amakhonkco ahambelanayo anemibala ngaphakathi nakwesiphi na isilumkiso.

Wenze kakuhle! Ufunde ngempumelelo lo myalezo ubalulekileyo wesilumkiso .

Iintloko phezulu! Esi silumkiso sidinga ukuhoywa kwakho , kodwa asibalulekanga kakhulu.

Isilumkiso! Ngcono uzijonge, awubukeki umhle kakhulu .

Owu khawuleza! Guqula izinto ezimbalwa kwaye uzame ukuthumela kwakhona.

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

Nikela ngengxelo ehlaziyiweyo malunga nenkqubela phambili yomsebenzi okanye intshukumo enemivalo yenkqubela phambili elula kodwa ebhetyebhetye.

Ukuhambelana kwebrowser

Imivalo yenkqubela phambili isebenzisa iinguqu ze-CSS3 kunye noopopayi ukuphumeza ezinye zeziphumo zazo. Ezi mpawu azixhaswa kwi-Internet Explorer 9 nangaphantsi okanye kwiinguqulelo ezindala zeFirefox. I-Opera 12 ayixhasi oopopayi.

Ukuhambelana koMgaqo-nkqubo woKhuseleko (CSP).

Ukuba iwebhusayithi yakho inoMgaqo- nkqubo woKhuseleko loMxholo (CSP) ongavumeli , style-src 'unsafe-inline'ngoko awuyi kukwazi ukusebenzisa styleiimpawu ezingaphakathi ukuseta ububanzi bebha yenkqubela njengoko kubonisiwe kwimizekelo yethu engezantsi. Iindlela ezizezinye zokuseta ububanzi obuhambelana neeCSP ezingqongqo zibandakanya ukusebenzisa iJavaScript encinci yesiko (eseta element.style.width) okanye ukusebenzisa iiklasi zeCSS zesiko.

Umzekelo osisiseko

Ibar yenkqubela phambili ehlala ikho.

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

Ngeleyibhile

Susa iklasi kwibar yenkqubela ukubonisa ipesenti ebonakalayo <span>..sr-only

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>

Ukuqinisekisa ukuba okubhaliweyo kweleyibhile kuhlala kufundeka nakwipesenti ezisezantsi, cinga ngokudibanisa a min-widthkwibar yenkqubela phambili.

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>

Iindlela ezizezinye zomxholo

Imivalo yenkqubela phambili isebenzisa enye iqhosha elifanayo kunye neeklasi zesilumkiso kwizimbo ezihambelanayo.

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

Inemigca

Isebenzisa igradient ukwenza isiphumo esinemigca. Ayifumaneki kwi-IE9 nangaphantsi.

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

Oopopayi

Yongeza ukuphilisa imivumbo ekunene ukuya ekhohlo .active. .progress-bar-stripedAyifumaneki kwi-IE9 nangaphantsi.

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

Ipakishwe

Beka iibar ezininzi kwindawo enye .progressukuze uzipakishe.

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

Izitayile zento engabonakaliyo yokwakha iindidi ezahlukeneyo zamacandelo (njengamagqabantshintshi eblogi, iiTweets, njalo njalo) ezibonisa umfanekiso osekhohlo okanye olungelelaniswe ekunene ecaleni komxholo wombhalo.

Imidiya ehlala ikho

Imidiya engagqibekanga ibonisa into yemidiya (imifanekiso, ividiyo, iaudio) ngasekhohlo okanye ngasekunene kwebhloko yomxholo.

Isihloko semidiya

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

Isihloko semidiya

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

Isihloko semithombo yeendaba

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

Isihloko semidiya

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

Isihloko semidiya

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

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

Iiklasi .pull-leftkwaye .pull-rightzikwakho kwaye bezisetyenziswa ngaphambili njengenxalenye yecandelo lemidiya, kodwa ziyekisiwe kulungiselelwa ukusetyenziswa njengev3.3.0. Ziphantse zilingane .media-leftkunye ne .media-right, ngaphandle kokuba .media-rightkufuneka zibekwe emva kwe .media-bodyhtml.

Ulungelelwaniso lwemidiya

Imifanekiso okanye ezinye imidiya zinokulungelelaniswa phezulu, phakathi, okanye ezantsi. Ukungagqibeki kuhambelana phezulu.

Imidiya elungelelanisiweyo ephezulu

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Imidiya elungelelanisiweyo ephakathi

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Imidiya elungelelaniswe ezantsi

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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

Uluhlu lwemidiya

Ngophawu olongezelelweyo, ungasebenzisa imidiya engaphakathi kuluhlu (iluncedo kwimisonto yezimvo okanye uludwe lwamanqaku).

Isihloko semidiya

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

Isihloko semithombo yeendaba
Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Isihloko semithombo yeendaba
Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Isihloko semithombo yeendaba
Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

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

Amaqela oluhlu ayinxalenye eguquguqukayo kwaye enamandla yokubonisa nje uluhlu olulula lwezinto, kodwa eziyinkimbinkimbi ezinomxholo wesiko.

Umzekelo osisiseko

Elona qela loluhlu olusisiseko luluhlu nje olungacwangciswanga olunezinto zoluhlu, kunye neeklasi ezifanelekileyo. Yakha phezu kwayo ngeenketho ezilandelayo, okanye eyakho iCSS njengoko kufuneka.

Cras justo odio
Dapibus ac facilisis in
UMorbi namhlanje
Porta ac consectetur ac
Vestibulum kunye 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>

Iibheji

Yongeza icandelo leebheji kuyo nayiphi na into yeqela loluhlu kwaye ngokuzenzekelayo iya kubekwa ekunene.

14Cras justo odio
2Dapibus ac facilisis in
1UMorbi namhlanje

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

Izinto ezidityanisiweyo

Nxulumanisa uluhlu lwezinto zeqela ngokusebenzisa iithegi ze-ankile endaweni yezinto zoluhlu ( oko kukwathetha umzali <div>endaweni ye <ul>). Akukho mfuneko yabazali ngabanye malunga nento nganye.

Cras justo odio Dapibus ac facilisis in UMorbi namhlanje Porta ac consectetur ac Vestibulum kunye 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>

Izinto zeqhosha

Uluhlu lwezinto zeqela zingamaqhosha endaweni yezinto zoluhlu ( oku kuthetha ukuba umzali <div>endaweni ye <ul>). Akukho mfuneko yabazali ngabanye malunga nento nganye. Musa ukusebenzisa .btniiklasi eziqhelekileyo apha.

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

Izinto ezikhubazekileyo

Yongeza .disabledku-a .list-group-itemukuya kwingwevu ukuze ibonakale ikhubazekile.

Cras justo odio Dapibus ac facilisis in UMorbi namhlanje Porta ac consectetur ac Vestibulum kunye 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>

Iiklasi zomxholo

Sebenzisa iiklasi zomxholo ukwenza uluhlu lwezinto, ezingagqibekanga okanye ezidityanisiweyo. Ikwabandakanya .activeurhulumente.

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

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

Umxholo oqhelekileyo

Yongeza phantse nayiphi na i-HTML ngaphakathi, nakuluhlu lwamaqela adityanisiweyo afana neli lingezantsi.

Uluhlu lwesihloko sento yeqela

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

Uluhlu lwesihloko sento yeqela

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

Uluhlu lwesihloko sento yeqela

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Ngelixa kungasoloko kuyimfuneko, ngamanye amaxesha kufuneka ubeke iDOM yakho ebhokisini. Kwezo meko, zama icandelo lephaneli.

Umzekelo osisiseko

Ngokungagqibekanga, zonke izinto .panelezenziwayo zisebenzisa umda osisiseko kunye ne-padding ukuqulatha umxholo othile.

Umzekelo wephaneli esisiseko

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

Iphaneli enesihloko

Yongeza ngokulula isikhongozeli sesihloko kwiphaneli yakho nge .panel-heading. Ungabandakanya nayiphi na <h1>- <h6>ngeklasi .panel-titleukongeza isihloko esibhalwe ngaphambili. Nangona kunjalo, ubukhulu befonti ye- <h1>bakhutshelwa <h6>ngaphezulu ngu .panel-heading.

Ngombala wekhonkco ofanelekileyo, qiniseka ukubeka amakhonkco kwizihloko ngaphakathi .panel-title.

Isihloko sephaneli ngaphandle kwesihloko

Umxholo wephaneli

Isihloko sephaneli

Umxholo wephaneli

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

Iphaneli enombhalo osemazantsi

Amaqhosha okusonga okanye umbhalo wesibini kwi .panel-footer. Qaphela ukuba izingqinisiso zephaneli aziyidli ilifa imibala kunye nemida xa kusetyenziswa iimeko ezahlukeneyo njengoko zingenzelwanga ukuba zibe ngaphambili.

Umxholo wephaneli

Indawo esemazantsi ephaneli

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

Iindlela ezizezinye zomxholo

Njengamanye amacandelo, ngokulula yenza indawo yolawulo ibe nentsingiselo ngakumbi kumxholo othile ngokongeza naluphi na uhlobo lomxholo womxholo.

Isihloko sephaneli

Umxholo wephaneli

Isihloko sephaneli

Umxholo wephaneli

Isihloko sephaneli

Umxholo wephaneli

Isihloko sephaneli

Umxholo wephaneli

Isihloko sephaneli

Umxholo wephaneli

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

Ngeetafile

Yongeza nayiphi na i-non-mida .tablengaphakathi kwephaneli yoyilo olungenamthungo. Ukuba kukho i .panel-body, songeza umda owongezelelweyo phezulu kwetafile yokwahlula.

Isihloko sephaneli

Omnye umxholo wendawo yolawulo apha. I-Nulla vitae elit libero, i-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.

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@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>

Ukuba akukho qela lephaneli, ilungu liyashukuma ukusuka kumxholo wendawo yolawulo ukuya kwitafile ngaphandle kokuphazamiseka.

Isihloko sephaneli

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

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

Ngamaqela uluhlu

Bandakanya ngokulula uluhlu olupheleleyo amaqela ngaphakathi kuyo nayiphi na indawo yolawulo.

Isihloko sephaneli

Omnye umxholo wendawo yolawulo apha. I-Nulla vitae elit libero, i-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
UMorbi namhlanje
Porta ac consectetur ac
Vestibulum kunye 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>

Vumela iibhrawuza ukuba zimisele imilinganiselo yevidiyo okanye isilayidi ngokusekwe kububanzi bebhloko equlathe kuyo ngokwenza umlinganiselo ongaphakathi oya kukala ngokufanelekileyo kuso nasiphi na isixhobo.

Imigaqo isetyenziswa ngokuthe ngqo kwi <iframe>, <embed>, <video>, kunye <object>neziqalelo; ngokuzikhethela sebenzisa udidi lomzukulwana olucacileyo .embed-responsive-itemxa ufuna ukuthelekisa isimbo sezinye iimpawu.

Pro-Tip! Awudingi ukubandakanya frameborder="0"kwi- <iframe>s yakho njengoko sibhala ngaphezulu oko kuwe.

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

Ukuhlala ngokufanelekileyo

Sebenzisa iqula njengesiphumo esilula kwi-elementi ukuyinika isiphumo sokufakwa.

Jonga, ndisequleni!

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

Iiklasi ozikhethelayo

Lawula ukukhuselwa kunye neekona ezingqukuva ngeeklasi ezimbini ozikhethelayo zesilungisi.

Khangela, ndisequleni elikhulu!

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

Jonga, ndikwiqula elincinane!

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

Amacandelo

IiGlyphicons

Iiglyphs ezifumanekayo

Kusetyenziswa kwanjani

Musa ukudibanisa namanye amalungu

Kuphela isetyenziselwa izinto ezingenanto

Ukutshintsha indawo yefonti ye icon

Iimpawu ezifikelelekayo

Imizekelo

Ukwehla

Umzekelo

Ulungelelwaniso

Isenokufuna indawo eyongezelelweyo

.pull-rightUlungelelwaniso olulahliweyo

Iiheader

Umahluli

Izinto zemenyu zivaliwe

Amaqela amaqhosha

Iingcebiso zesixhobo kunye neepopovers kumaqela amaqhosha zifuna useto olulodwa

Qinisekisa ukuba ichanekile rolekwaye unikeze ileyibhile

Umzekelo osisiseko

Iqhosha lesixhobo se bar

Ubungakanani

Ukuzalela

Ukwahluka ngokuthe nkqo

Amaqela amaqhosha athetheleleyo

Ukuphatha imida

IE8 kunye nemida

Neziqalelo <a>_

Amakhonkco asebenza njengamaqhosha

Neziqalelo <button>_

Amaqhosha okwehla

Ukuxhomekeka kwi-plugin

Ukwehla kweqhosha elinye

Ukwehliswa kweqhosha lokwahlula

Ubungakanani

Ukwahluka kokulahla

Amaqela ongeniso

Okubhaliweyo <input>s kuphela

Iingcebiso zezixhobo kunye neepopovers kumaqela egalelo zifuna useto olulodwa

Musa ukudibanisa namanye amalungu

Yongeza iilebhile rhoqo

Umzekelo osisiseko

Ubungakanani

Iibhokisi zokukhangela kunye neeaddon zerediyo

Iqhosha lezongezo

Amaqhosha ane dropdowns

Amaqhosha ahlukeneyo

Amaqhosha amaninzi

Navs

Ukusebenzisa i-navs kwiiphaneli zethebhu kufuna iplagi ye-JavaScript tabs

Yenza i-navs isetyenziswe njengokukhangela kufikeleleke

Iithebhu

Iipilisi

Igwetyelwe

Safari kunye navs ephendulayo ethethelelayo

Amakhonkco avaliwe

Ukusebenza kwekhonkco akuchaphazelekanga

Ukusebenzisa iidrophu

Iithebhu ezinokwehla

Iipilisi ezine dropdowns

Navbar

I-navbar ehlala ikho

Umxholo ophuphumayo

Ifuna iJavaScript plugin

Ukutshintsha indawo edilikileyo yebar ye navbar

Yenza ii-navbar zifikeleleke

Umfanekiso webrand

Iifom

Isixhobo esiphathwayo caveats

Yongeza iilebhile rhoqo

Amaqhosha

Ukusetyenziswa komxholo othile

Isicatshulwa

amakhonkco Non-nav

Ulungelelwaniso lwamacandelo

Ukulungelelanisa amalungu amaninzi ekunene

Zilungiswe phezulu

Ukugquma umzimba kuyafuneka

Ilungisiwe ukuya emazantsi

`.pull-right`Ulungelelwaniso olulahliweyo

Qinisekisa ukuba ichanekile `role`kwaye unikeze ileyibhile

Neziqalelo `<a>`_

Neziqalelo `<button>`_

Okubhaliweyo `<input>`s kuphela