Ama-Glyphicons

Ama-glyphs atholakalayo

Kufaka phakathi ama-glyphs angaphezu kuka-250 ngefomethi yefonti kusukela kusethi ye-Glyphicon Halflings. Ama-Glyphicons Halflings ngokuvamile awatholakali mahhala, kodwa umdali wawo uwenze atholakala ku-Bootstrap mahhala. Njengokubonga, sicela ukuthi ufake isixhumanisi esibuyela emuva kuma- Glyphicons noma nini lapho kunokwenzeka.

  • i-glyphicon glyphicon-asterisk
  • i-glyphicon glyphicon-plus
  • i-glyphicon glyphicon-euro
  • i-glyphicon glyphicon-eur
  • i-glyphicon glyphicon-minus
  • i-glyphicon glyphicon-cloud
  • imvilophu ye-glyphicon
  • i-glyphicon glyphicon-pensela
  • ingilazi ye-glyphicon glyphicon
  • umculo we-glyphicon glyphicon
  • glyphicon glyphicon-search
  • i-glyphicon glyphicon-heart
  • inkanyezi ye-glyphicon glyphicon
  • i-glyphicon glyphicon-star-empty
  • umsebenzisi we-glyphicon glyphicon
  • ifilimu ye-glyphicon glyphicon
  • i-glyphicon glyphicon-th-large
  • i-glyphicon glyphicon-th
  • i-glyphicon glyphicon-th-list
  • i-glyphicon glyphicon-ok
  • i-glyphicon glyphicon-remove
  • i-glyphicon glyphicon-zoom-in
  • i-glyphicon glyphicon-zoom-out
  • i-glyphicon glyphicon-off
  • i-glyphicon glyphicon-signal
  • i-glyphicon glyphicon-cog
  • i-glyphicon glyphicon-doti
  • ikhaya le-glyphicon glyphicon
  • ifayela le-glyphicon glyphicon
  • isikhathi se-glyphicon glyphicon
  • i-glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • i-glyphicon glyphicon-upload
  • i-glyphicon glyphicon-inbox
  • i-glyphicon glyphicon-play-circle
  • i-glyphicon glyphicon-repeat
  • i-glyphicon glyphicon-refresh
  • i-glyphicon glyphicon-list-alt
  • i-glyphicon glyphicon-lock
  • ifulegi le-glyphicon glyphicon
  • i-glyphicon glyphicon-headphones
  • i-glyphicon glyphicon-volume-off
  • i-glyphicon glyphicon-volume-down
  • i-glyphicon glyphicon-volume-up
  • i-glyphicon glyphicon-qrcode
  • i-glyphicon glyphicon-barcode
  • ithegi ye-glyphicon glyphicon-tag
  • amathegi we-glyphicon glyphicon
  • incwadi ye-glyphicon glyphicon
  • ibhukhimakhi ye-glyphicon glyphicon
  • i-glyphicon glyphicon-print
  • ikhamera ye-glyphicon glyphicon
  • ifonti ye-glyphicon glyphicon
  • i-glyphicon glyphicon-bold
  • i-glyphicon glyphicon-italic
  • i-glyphicon glyphicon-text-height
  • i-glyphicon glyphicon-text-width
  • i-glyphicon glyphicon-qondanisa kwesokunxele
  • i-glyphicon glyphicon-align-center
  • i-glyphicon glyphicon-align-right
  • i-glyphicon glyphicon-align-justify
  • uhlu lwe-glyphicon glyphicon
  • i-glyphicon glyphicon-indent-kwesokunxele
  • i-glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • isithombe se-glyphicon glyphicon
  • i-glyphicon glyphicon-map-marker
  • i-glyphicon glyphicon-adjust
  • i-glyphicon glyphicon-tint
  • i-glyphicon glyphicon-edit
  • i-glyphicon glyphicon-share
  • i-glyphicon glyphicon-check
  • i-glyphicon glyphicon-move
  • i-glyphicon glyphicon-step-backward
  • i-glyphicon glyphicon-emuva ngokushesha
  • i-glyphicon glyphicon-backward
  • i-glyphicon glyphicon-play
  • i-glyphicon glyphicon-pause
  • i-glyphicon glyphicon-stop
  • i-glyphicon glyphicon-phambili
  • i-glyphicon glyphicon-shesha-phambili
  • i-glyphicon glyphicon-step-forward
  • i-glyphicon glyphicon-eject
  • i-glyphicon glyphicon-chevron-kwesokunxele
  • i-glyphicon glyphicon-chevron-right
  • i-glyphicon glyphicon-plus-sign
  • uphawu lwe-glyphicon glyphicon-minus-sign
  • uphawu lwe-glyphicon glyphicon-remove-sign
  • i-glyphicon glyphicon-ok-sign
  • uphawu lombuzo we-glyphicon glyphicon
  • uphawu lwe-glyphicon glyphicon-info-sign
  • isithombe-skrini se-glyphicon glyphicon
  • glyphicon glyphicon-remove-circle
  • i-glyphicon glyphicon-ok-circle
  • i-glyphicon glyphicon-ban-circle
  • i-glyphicon glyphicon-arrow-left
  • i-glyphicon glyphicon-arrow-right
  • i-glyphicon glyphicon-arrow-up
  • i-glyphicon glyphicon-arrow-down
  • i-glyphicon glyphicon-share-alt
  • i-glyphicon glyphicon-resize-full
  • i-glyphicon glyphicon-resize-small
  • uphawu lwe-glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-isipho
  • i-glyphicon glyphicon-leaf
  • i-glyphicon glyphicon-fire
  • i-glyphicon glyphicon-eye-open
  • i-glyphicon glyphicon-eye-close
  • uphawu lwe-glyphicon glyphicon-sexwayiso
  • indiza ye-glyphicon glyphicon
  • i-glyphicon glyphicon-ikhalenda
  • i-glyphicon glyphicon-okungahleliwe
  • glyphicon glyphicon-amazwana
  • i-glyphicon glyphicon-magnet
  • i-glyphicon glyphicon-chevron-up
  • i-glyphicon glyphicon-chevron-down
  • i-glyphicon glyphicon-retweet
  • I-glyphicon glyphicon-shopping-cart
  • i-glyphicon glyphicon-ifolda-vala
  • ifolda ye-glyphicon-glyphicon-evulekile
  • i-glyphicon glyphicon-resize-vertical
  • i-glyphicon glyphicon-resize-horizontal
  • i-glyphicon glyphicon-hdd
  • i-glyphicon glyphicon-bullhorn
  • insimbi ye-glyphicon
  • isitifiketi se-glyphicon glyphicon
  • i-glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-izithupha-phansi
  • i-glyphicon glyphicon-hand-right
  • i-glyphicon glyphicon-isandla-kwesokunxele
  • i-glyphicon glyphicon-hand-up
  • i-glyphicon glyphicon-hand-down
  • i-glyphicon glyphicon-circle-arrow-right
  • i-glyphicon glyphicon-circle-arrow-left
  • i-glyphicon glyphicon-circle-arrow-up
  • i-glyphicon glyphicon-circle-arrow-down
  • i-glyphicon glyphicon-globe
  • i-glyphicon glyphicon-wrench
  • imisebenzi ye-glyphicon glyphicon
  • isihlungi se-glyphicon glyphicon
  • i-glyphicon glyphicon-briefcase
  • isikrini esigcwele se-glyphicon glyphicon
  • i-glyphicon glyphicon-dashboard
  • i-glyphicon glyphicon-paperclip
  • i-glyphicon glyphicon-inhliziyo-engenalutho
  • isixhumanisi se-glyphicon glyphicon
  • i-glyphicon glyphicon-ifoni
  • i-glyphicon glyphicon-pushpin
  • i-glyphicon glyphicon-usd
  • i-glyphicon glyphicon-gbp
  • uhlobo lwe-glyphicon glyphicon
  • i-glyphicon glyphicon-hlunga-nga-alfabhethi
  • i-glyphicon glyphicon-sort-by-alfabet-alt
  • i-glyphicon glyphicon-hlela-nge-oda
  • i-glyphicon glyphicon-sort-by-oda-alt
  • glyphicon glyphicon-hlunga-ngezibaluli
  • i-glyphicon glyphicon-sort-by-attributes-alt
  • I-glyphicon glyphicon-ayihloliwe
  • i-glyphicon glyphicon-expand
  • i-glyphicon glyphicon-collapse-down
  • i-glyphicon glyphicon-collapse-up
  • i-glyphicon glyphicon-log-in
  • i-glyphicon glyphicon-flash
  • i-glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • irekhodi le-glyphicon glyphicon
  • glyphicon glyphicon-londoloza
  • i-glyphicon glyphicon-open
  • i-glyphicon glyphicon-ilondoloziwe
  • i-glyphicon glyphicon-import
  • i-glyphicon glyphicon-export
  • i-glyphicon glyphicon-send
  • i-glyphicon glyphicon-floppy-disk
  • i-glyphicon glyphicon-floppy-saved
  • i-glyphicon glyphicon-floppy-remove
  • i-glyphicon glyphicon-floppy-save
  • i-glyphicon glyphicon-floppy-open
  • i-glyphicon glyphicon-credit-card
  • i-glyphicon glyphicon-transfer
  • i-glyphicon glyphicon-cutlery
  • i-glyphicon glyphicon-header
  • i-glyphicon glyphicon-compressed
  • i-glyphicon glyphicon-earphone
  • i-glyphicon glyphicon-phone-alt
  • i-glyphicon-glyphicon-tower
  • izibalo ze-glyphicon glyphicon
  • i-glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-ividiyo
  • imibhalo engezansi ye-glyphicon glyphicon
  • i-glyphicon glyphicon-sound-stereo
  • i-glyphicon glyphicon-sound-dolby
  • i-glyphicon glyphicon-sound-5-1
  • i-glyphicon glyphicon-sound-6-1
  • i-glyphicon glyphicon-sound-7-1
  • i-glyphicon glyphicon-copyright-mark
  • i-glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • i-glyphicon glyphicon-cloud-upload
  • i-glyphicon glyphicon-tree-conifer
  • i-glyphicon-glyphicon-tree-deciduous
  • i-glyphicon glyphicon-cd
  • glyphicon glyphicon-gcina-ifayela
  • glyphicon glyphicon-open-file
  • izinga le-glyphicon glyphicon-up
  • ikhophi ye-glyphicon glyphicon
  • i-glyphicon glyphicon-paste
  • i-glyphicon glyphicon-alert
  • i-glyphicon glyphicon-equalizer
  • i-glyphicon glyphicon-king
  • i-glyphicon glyphicon-queen
  • i-glyphicon glyphicon-pawn
  • i-glyphicon glyphicon-bishop
  • i-glyphicon glyphicon-knight
  • i-glyphicon glyphicon-baby-formula
  • i-glyphicon glyphicon-tent
  • i-glyphicon glyphicon-blackboard
  • i-glyphicon-glyphicon-bed
  • glyphicon glyphicon-apula
  • i-glyphicon glyphicon-erase
  • I-glyphicon-hourglass
  • isibani se-glyphicon glyphicon-lamp
  • i-glyphicon glyphicon-duplicate
  • i-glyphicon glyphicon-piggy-bank
  • i-glyphicon glyphicon-scissors
  • i-glyphicon glyphicon-bitcoin
  • i-glyphicon glyphicon-btc
  • i-glyphicon glyphicon-xbt
  • i-glyphicon glyphicon-yen
  • i-glyphicon glyphicon-jpy
  • i-glyphicon glyphicon-ruble
  • i-glyphicon glyphicon-rub
  • isikali se-glyphicon glyphicon
  • i-glyphicon glyphicon-ice-lolly
  • i-glyphicon glyphicon-ice-lolly-tasted
  • i-glyphicon glyphicon-imfundo
  • i-glyphicon glyphicon-option-horizontal
  • i-glyphicon glyphicon-option-vertical
  • i-glyphicon glyphicon-menu-hamburger
  • iwindi le-glyphicon glyphicon-modal
  • i-glyphicon glyphicon-oyela
  • i-glyphicon glyphicon-grain
  • izibuko zelanga ze-glyphicon
  • usayizi wombhalo we-glyphicon glyphicon
  • umbala wombhalo we-glyphicon glyphicon
  • glyphicon glyphicon-text-background
  • i-glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-qondanisa-phansi
  • i-glyphicon glyphicon-object-qondanisa-evundlile
  • i-glyphicon glyphicon-object-qondanisa-kwesokunxele
  • i-glyphicon-glyphicon-into-qondanisa-iqondile
  • i-glyphicon glyphicon-object-align-right
  • i-glyphicon glyphicon-triangle-right
  • i-glyphicon glyphicon-triangle-kwesokunxele
  • i-glyphicon glyphicon-triangle-bottom
  • i-glyphicon glyphicon-triangle-top
  • i-glyphicon glyphicon-console
  • i-glyphicon glyphicon-superscript
  • i-glyphicon glyphicon-subscript
  • i-glyphicon glyphicon-imenyu-kwesokunxele
  • i-glyphicon glyphicon-menu-kwesokudla
  • i-glyphicon glyphicon-imenyu-phansi
  • glyphicon glyphicon-imenyu-up

Isetshenziswa kanjani

Ngezizathu zokusebenza, zonke izithonjana zidinga isigaba sesisekelo kanye nesigaba sesithonjana ngasinye. Ukuze usebenzise, ​​beka ikhodi elandelayo cishe noma yikuphi. Qiniseka ukuthi ushiya isikhala phakathi kwesithonjana nombhalo ukuze uthole amaphedi afanele.

Ungahlanganisi nezinye izingxenye

Izigaba zesithonjana azikwazi ukuhlanganiswa ngokuqondile nezinye izingxenye. Akufanele zisetshenziswe kanye namanye amakilasi kusici esifanayo. Esikhundleni salokho, engeza okufakwe isidleke <span>futhi usebenzise amakilasi esithonjana kufayela le- <span>.

Kuphela ukusetshenziswa ezintweni ezingenalutho

Izigaba zezithonjana kufanele zisetshenziswe kuphela kuma-elementi angaqukethe okuqukethwe kombhalo futhi angenazo izici zengane.

Ukushintsha indawo yefonti yesithonjana

I-Bootstrap ithatha ukuthi amafayela efonti yesithonjana azotholakala ../fonts/kuhla lwemibhalo, uma kuqhathaniswa namafayela e-CSS ahlanganisiwe. Ukuhambisa noma ukuqamba kabusha lawo mafayela efonti kusho ukubuyekeza i-CSS ngenye yezindlela ezintathu:

  • Shintsha @icon-font-pathkanye/noma @icon-font-nameokuguquguqukayo emthonjeni Amafayela amancane.
  • Sebenzisa inketho yama-URL ahlobene anikezwe umdidiyeli Omncane.
  • Shintsha url()izindlela ku-CSS ehlanganisiwe.

Sebenzisa noma iyiphi inketho evumelana kangcono nokusetha kwakho okukhethekile kokuthuthukiswa.

Izithonjana ezifinyelelekayo

Izinguqulo zesimanje zobuchwepheshe obusizayo zizomemezela okuqukethwe okukhiqizwa yi-CSS, kanye nezinhlamvu ezithile ze-Unicode. Ukuze ugweme okukhiphayo okungahlosiwe nokudidayo kuzifundi zesikrini (ikakhulukazi uma izithonjana zisetshenziselwa ukuhlobisa kuphela), siyazifihla aria-hidden="true"ngesibaluli.

Uma usebenzisa isithonjana ukuze udlulisele incazelo (kunokusebenzisa nje into yokuhlobisa), qinisekisa ukuthi le ncazelo iphinde idluliselwe kubuchwepheshe obusizayo - isibonelo, faka okuqukethwe okwengeziwe, okufihlwe ngokubonakalayo .sr-onlynekilasi.

Uma udala izilawuli ezingenawo omunye umbhalo (njengalowo <button>oqukethe isithonjana kuphela), kufanele njalo unikeze okunye okuqukethwe ukuze uhlonze injongo yokulawula, ukuze kube nengqondo kubasebenzisi bobuchwepheshe obusizayo. Kulokhu, ungangeza aria-labelisibaluli kusilawuli ngokwaso.

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

Izibonelo

Wasebenzise ezinkinobho, emaqenjini enkinobho yebha yamathuluzi, ukuzulazula, noma okokufaka kwefomu okulungiselelwe ngaphambilini.

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

Isithonjana esisetshenziswe kusaziso ukudlulisa ukuthi umlayezo wephutha, .sr-onlynombhalo owengeziwe wokudlulisa lesi seluleko kubasebenzisi bobuchwepheshe obusizayo.

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

Okwehliswayo

Imenyu eguqukayo, engokomongo yokubonisa izinhlu zezixhumanisi. Kwenziwe ukusebenzisana ne- plugin eyehlayo ye-JavaScript .

Goqa i-trigger yokudonsela phansi kanye nemenyu yokudonsela phansi ngaphakathi kokuthi .dropdown, noma enye into ememezela position: relative;. Bese wengeza 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>

Amamenyu okudonsela phansi angashintshwa ukuze andise phezulu (esikhundleni sokuthi aye phansi) ngokwengeza .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>

Ngokuzenzakalelayo, imenyu yokudonsela phansi imiswa ngokuzenzakalelayo ngo-100% ukusuka phezulu nangakwesokunxele somzali wayo. Engeza .dropdown-menu-rightkokuthi a .dropdown-menuukuze uqondanise kwesokudla imenyu eyehlayo.

Ingase idinge ukuma okwengeziwe

Okwehliswayo kumiswa ngokuzenzakalelayo nge-CSS ngaphakathi kokugeleza okuvamile kwedokhumenti. Lokhu kusho ukuthi okwehliswayo kungase kunqanyulwe abazali abanezakhiwo ezithile overflownoma kubonakale kungaphandle kwemingcele yembobo yokubuka. Lungiselela lezi zinkinga ngokwakho njengoba ziphakama.

.pull-rightUkuqondanisa okwehlisiwe

Kusukela ku-v3.1.0, siyekile .pull-rightkumamenyu okwehlayo. Ukuze uqondanise kwesokudla imenyu, sebenzisa .dropdown-menu-right. Izingxenye ze-nav eziqondaniswe kwesokudla ku-navbar zisebenzisa inguqulo ye-mixin yaleli klasi ukuze iqondanise ngokuzenzakalelayo imenyu. Ukuze uyiqede, sebenzisa .dropdown-menu-left.

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

Engeza unhlokweni kulebula izigaba zezenzo kunoma iyiphi imenyu eyehlayo.

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

Engeza isihlukanisi ukuze uhlukanise uchungechunge lwezixhumanisi kumenyu eyehlayo.

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

Engeza .disabledkokuthi a <li>kokwehlayo ukuze ukhubaze isixhumanisi.

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

Amaqembu ezinkinobho

Qoqa uchungechunge lwezinkinobho ndawonye emugqeni owodwa neqembu lezinkinobho. Engeza umsakazo we-JavaScript ozikhethela wona kanye nokuziphatha kwesitayela sebhokisi lokuhlola ngezinkinobho zethu ze-plugin .

Amathiphu wamathuluzi nama-popover emaqenjini wezinkinobho adinga ukulungiselelwa okukhethekile

Uma usebenzisa izeluleko zamathuluzi noma ama-popovers ezintweni ezingaphakathi kwe- .btn-group, kuzodingeka ucacise inketho container: 'body'yokugwema imiphumela emibi engadingeki (njengento ekhula ibe banzi kanye/noma ilahlekelwe amakhona ayindilinga uma ithiphu yamathuluzi noma i-popover iqaliswa).

Qinisekisa ukuthi kulungile rolefuthi unikeze ilebula

Ukuze ubuchwepheshe obusizayo - njengezifundi zesikrini - buveze ukuthi uchungechunge lwezinkinobho luqoqiwe, kufanele rolekunikezwe isibaluli esifanele. Kumaqembu ezinkinobho, lokhu kuzoba role="group", kuyilapho amabha wamathuluzi kufanele abe ne- role="toolbar".

Okukodwa okuhlukile amaqembu aqukethe kuphela isilawuli esisodwa (ngokwesibonelo amaqembu enkinobho elungisiwe anezici <button>) noma okwehliswayo.

Ngaphezu kwalokho, amaqembu namabha wamathuluzi kufanele anikezwe ilebula ecacile, njengoba iningi lobuchwepheshe obusizayo ngeke likwazise, ​​ngaphandle kokuba khona kwesibaluli esifanele role. Ezibonelweni ezinikezwe lapha, sisebenzisa aria-label, kodwa ezinye izindlela aria-labelledbyezingasetshenziswa futhi.

Isibonelo esiyisisekelo

Goqa uchungechunge lwezinkinobho ngo- .btnin .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>

Ibha yamathuluzi yenkinobho

Hlanganisa amasethi we <div class="btn-group">-a <div class="btn-toolbar">ukuze uthole izingxenye eziyinkimbinkimbi.

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

Ukulinganisa

Esikhundleni sokusebenzisa amakilasi okulinganisa izinkinobho kuzo zonke izinkinobho eqenjini, vele wengeze .btn-group-*kweyodwa .btn-group, okuhlanganisa lapho uhlanganisa amaqembu amaningi.




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

Ukwenza isidleke

Faka .btn-groupphakathi kokunye .btn-groupuma ufuna amamenyu okwehliswayo ahlanganiswe nochungechunge lwezinkinobho.

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

Ukuhluka okuqondile

Yenza isethi yezinkinobho zibonakale zistakwe ziqondile kunokuba zivundlile. Ukwehliswa kwenkinobho yokuhlukanisa akusekelwa lapha.

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

Amaqembu ezinkinobho ezilungisiwe

Yenza iqoqo lezinkinobho zinwebeke ngosayizi abalinganayo ukuze linwebe bonke ububanzi bomzali wayo. Isebenza futhi nezinkinobho ezehlayo ngaphakathi kweqembu lezinkinobho.

Ukuphatha imingcele

Ngenxa ye-HTML ne-CSS ethile esetshenziselwa ukulungisa izinkinobho (okungukuthi display: table-cell), imingcele ephakathi kwazo iphindwe kabili. Emaqenjini enkinobho evamile, margin-left: -1pxisetshenziselwa ukupakisha imingcele esikhundleni sokuyisusa. Nokho, marginakusebenzi nge display: table-cell. Njengomphumela, kuye ngokwenza ngokwezifiso kwakho ku-Bootstrap, ungase ufise ukususa noma ukufaka umbala kabusha imingcele.

IE8 kanye nemingcele

I-Internet Explorer 8 ayinikezi imingcele ezinkinobho eqenjini lezinkinobho ezilungisiwe, kungakhathaliseki ukuthi ivuliwe <a>noma <button>izakhi. Ukuze wenze lokho, bopha inkinobho ngayinye kwenye.btn-group .

Bheka ku-#12476 ukuze uthole ulwazi olwengeziwe.

Ngezakhi <a>_

Vele ugoqe uchungechunge lwe- .btns ku .btn-group.btn-group-justified.

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

Izixhumanisi ezisebenza njengezinkinobho

Uma <a>izakhi zisetshenziselwa ukusebenza njengezinkinobho - ukuqala ukusebenza kwekhasi, kunokuzulazula uye kwenye idokhumenti noma isigaba esingaphakathi kwekhasi lamanje - kufanele futhi zinikezwe ezifanele role="button".

Ngezakhi <button>_

Ukuze usebenzise amaqembu ezinkinobho ezithethelelekayo <button>anezici, kufanele usonge inkinobho ngayinye eqenjini lezinkinobho . Iziphequluli eziningi aziyisebenzisi kahle i-CSS yethu ukuze kulungiswe <button>izinto, kodwa njengoba sisekela okwehliswayo kwezinkinobho, singasebenzela phezu kwalokho.

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

Ukwehliswa kwezinkinobho

Sebenzisa noma iyiphi inkinobho ukuze uqalise imenyu eyehlayo ngokuyibeka ngaphakathi .btn-groupfuthi unikeze umaki wemenyu ofanele.

Ukuncika kwe-plugin

Ukwehliswa kwezinkinobho kudinga i- plugin eyehlayo ukuthi ifakwe enguqulweni yakho ye-Bootstrap.

Okwehliswayo kwenkinobho eyodwa

Guqula inkinobho ibe yinguquko eyehlayo enezinguquko ezithile eziyisisekelo.

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

Okwehliswayo kwenkinobho yokuhlukanisa

Ngokufanayo, dala okwehliswayo kwenkinobho yokuhlukanisa ngezinguquko ezifanayo zemakhaphu, kuphela ngenkinobho ehlukile.

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

Ukulinganisa

Okwehliswayo kwezinkinobho kusebenza ngezinkinobho zabo bonke osayizi.

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

Ukwehluka kokulahla

Qalisa amamenyu okwehlayo ngenhla kwezici ngokwengeza .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>

Amaqembu okokufaka

Nweba izilawuli zefomu ngokungeza umbhalo noma izinkinobho ngaphambi, ngemva, noma kuzo zombili izinhlangothi zanoma yimuphi umbhalo okusekelwe <input>. Sebenzisa .input-groupne- .input-group-addonnoma .input-group-btnukulungisa noma ukwengeza izakhi kokukodwa .form-control.

Okubhaliwe <input>kuphela

Gwema ukusebenzisa <select>izici lapha ngoba azikwazi ukubhalwa ngokuphelele kuziphequluli ze-WebKit.

Gwema ukusebenzisa <textarea>izici lapha njengoba rowsimfanelo yazo ingeke ihlonishwe kwezinye izimo.

Amathiphu wamathuluzi nama-popover emaqenjini okokufaka adinga ukulungiselelwa okukhethekile

Uma usebenzisa izeluleko zamathuluzi noma ama-popovers ezintweni ezingaphakathi kwe- .input-group, kuzodingeka ucacise inketho container: 'body'yokugwema imiphumela engemihle (efana ne-elementi ekhula ibe banzi kanye/noma ukulahlekelwa amakhona ayindilinga uma ithiphu yamathuluzi noma i-popover iqaliswa).

Ungahlanganisi nezinye izingxenye

Ungahlanganisi amaqembu efomu noma amakilasi ekholomu yegridi ngokuqondile namaqembu okokufaka. Kunalokho, bekela iqembu okokufaka ngaphakathi kweqembu lefomu noma into ehlobene negridi.

Engeza amalebula njalo

Izifundi zesikrini zizoba nenkinga ngamafomu akho uma ungafaki ilebula yakho konke okokufaka. Kulawa maqembu okokufaka, qinisekisa ukuthi noma iyiphi ilebula eyengeziwe noma ukusebenza kudluliselwa kubuchwepheshe obusizayo.

Indlela okuyiyona okufanele isetshenziswe (izakhi ezibonakalayo <label>, <label>izakhi ezifihlwe kusetshenziswa .sr-onlyikilasi, noma ukusetshenziswa kwe- aria-label, aria-labelledby, aria-describedby, titlenoma placeholderisibaluli) kanye nokuthi yiluphi ulwazi olwengeziwe oluzodinga ukudluliselwa luzohluka kuye ngohlobo oluqondile lwewijethi yesixhumi esibonakalayo oyisebenzisayo. Izibonelo kulesi sigaba zinikeza izindlela ezimbalwa eziphakanyisiwe, eziqondene necala elithile.

Isibonelo esiyisisekelo

Beka isengezo esisodwa noma inkinobho nhlangothi zombili yokokufaka. Ungakwazi futhi ukubeka eyodwa nhlangothi zombili yokokufaka.

Asizisekeli izengezo eziningi ( .input-group-addonnoma .input-group-btn) ohlangothini olulodwa.

Asisekeli izilawuli zamafomu amaningi eqenjini lokufaka elilodwa.

@

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

Ukulinganisa

Engeza amakilasi okulinganisa amafomu ahlobene kulona .input-groupuqobo futhi okuqukethwe ngaphakathi kuzoshintsha usayizi ngokuzenzekelayo—asikho isidingo sokuphinda amakilasi osayizi wokulawula wefomu kwinto ngayinye.

@

@

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

Amabhokisi okuhlola nama-addons omsakazo

Beka noma yiliphi ibhokisi likaqhwishi noma inketho yomsakazo phakathi kwe-addon yeqembu lokufaka esikhundleni sombhalo.

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

Izinkinobho zokwengeza

Izinkinobho emaqenjini okokufaka zihluka kancane futhi zidinga izinga elilodwa elengeziwe lokuzalela. Esikhundleni sokuthi .input-group-addon, uzodinga ukusebenzisa .input-group-btnukusonga izinkinobho. Lokhu kuyadingeka ngenxa yezitayela zesiphequluli ezizenzakalelayo ezingakwazi ukukhishwa.

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

Izinkinobho ezinokwehliswayo

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

Izinkinobho ezihlukene

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

Izinkinobho eziningi

Yize ungaba nesengezo esisodwa ohlangothini ngalunye, ungaba nezinkinobho eziningi ngaphakathi kwesisodwa .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>

I-Navs

Ama-Nav atholakala ku-Bootstrap abe nemakhaphu okwabelwana ngawo, aqala nge-base .navclass, kanye nezimo ezabiwe. Shintshanisa amakilasi okushintsha ukuze ushintshe phakathi kwesitayela ngasinye.

Ukusebenzisa i-navs kumaphaneli wethebhu kudinga i-plugin yamathebhu e-JavaScript

Kumathebhu anezindawo ezibambekayo, kufanele usebenzise i- plugin ye-JavaScript yamathebhu . Umaki uzodinga roleizibaluli ezengeziwe kanye ne-ARIA - bona umaki wesibonelo se-plugin ukuze uthole imininingwane eyengeziwe.

Yenza ama-navs asetshenziswe njengokuzulazula kufinyeleleke

Uma usebenzisa i-navs ukuze unikeze ibha yokuzulazula, qiniseka ukuthi wengeza u-a role="navigation"esiqukathi esinengqondo kunazo zonke esingumzali se- <ul>, noma bopha <nav>into ethile kukho konke ukuzulazula. Ungangezi indima <ul>kuyona uqobo, njengoba lokhu kuzoyivimbela ukuthi imenyezelwe njengohlu lwangempela ngobuchwepheshe obusizayo.

Qaphela ukuthi .nav-tabsikilasi lidinga isigaba .navsesisekelo.

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

Thatha leyo HTML efanayo, kodwa sebenzisa .nav-pillsesikhundleni salokho:

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

Amaphilisi nawo ayastackable aqonde phezulu. Vele wengeze .nav-stacked.

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

Yenza kalula amathebhu noma amaphilisi ububanzi obulinganayo bomzali wabo kuzikrini ezibanzi kuno-768px nge- .nav-justified. Ezikrinini ezincane, izixhumanisi ze-nav zistakiwe.

Izixhumanisi ze-navbar ezilungisiwe azisekelwa okwamanje.

I-Safari kanye ne-navs ephendulayo efanelekile

Kusukela nge-v9.1.2, i-Safari ibonisa iphutha lapho ukushintsha usayizi wesiphequluli sakho ngokuvundlile kubangela amaphutha okunikeza ku-nav elungisiwe asulwa lapho ivuselelwa. Lesi siphazamisi siphinde siboniswe esibonelweni esilungisiwe se-nav .

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

Kunoma iyiphi ingxenye ye-nav (amathebhu noma amaphilisi), engeza .disabledukuze uthole izixhumanisi ezimpunga futhi akukho miphumela ye-hover .

Ukusebenza kwesixhumanisi akuthintekile

Lesi sigaba sizoshintsha kuphela <a>ukubukeka, hhayi ukusebenza kwayo. Sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi lapha.

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

Engeza amamenyu okwehlayo nge-HTML encane eyengeziwe kanye ne- plugin ye-JavaScript eyehlayo .

Amathebhu anokwehliswayo

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

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

Ibha ye-Navbar

Ama-Navbar ayizingxenye ze-meta eziphendulayo ezisebenza njengezihloko zokuzulazula zohlelo lwakho lokusebenza noma isayithi. Aqala ukugoqa (futhi angaguquleka) ekubukweni kweselula futhi abe ovundlile njengoba ububanzi bembobo yokubuka etholakalayo bukhula.

Izixhumanisi ze-navbar ezilungisiwe azisekelwa okwamanje.

Okuqukethwe okuchichimayo

Njengoba i-Bootstrap ingazi ukuthi singakanani isikhala esidingwa yi-navbar yakho, ungase uhlangabezane nezinkinga ngokuqukethwe okugoqeka kumugqa wesibili. Ukuze uxazulule lokhu, ungakwazi:

  1. Yehlisa inani noma ububanzi bezinto ze-navbar.
  2. Fihla izinto ezithile ze-navbar kumasayizi athile wesikrini usebenzisa izigaba zensiza eziphendulayo .
  3. Shintsha indawo lapho ibha yakho ye-navbar ishintsha khona phakathi kwemodi egoqiwe nevundlile. Yenza @grid-float-breakpointokuguquguqukayo ngokwezifiso noma wengeze owakho umbuzo wemidiya.

Idinga i-plugin ye-JavaScript

Uma i-JavaScript ikhutshaziwe futhi indawo yokubuka incinyane kangangokuba ibha ye-navbar iyawa, ngeke kwenzeke ukunweba ibha yokubuka bese ubuka okuqukethwe ngaphakathi kwefayela le- .navbar-collapse.

I-navbar ephendulayo idinga ukuthi i- plugin yokugoqa ifakwe enguqulweni yakho ye-Bootstrap.

Ukushintsha indawo yokunqamula ye-navbar egoqiwe

I-navbar igoqa ekubukeni kwayo kweselula okume mpo lapho imbobo yokubuka iyincane kune- @grid-float-breakpoint, futhi inweba ekubukeni kwayo okuvundlile okungeyona kweselula lapho imbobo yokubuka inobubanzi okungenani @grid-float-breakpoint. Lungisa lokhu okuguquguqukayo kokuthi Umthombo Omncane ukuze ulawule lapho i-navbar igoqa/inweba. Inani elizenzakalelayo lithi 768px(isikrini esincane "esincane" noma "sethebhulethi").

Yenza ama-navbar afinyeleleke

Qiniseka ukuthi usebenzisa i- <nav>elementi noma, uma usebenzisa into ejwayelekile njenge- <div>, engeza u-a role="navigation"kuyo yonke i-navbar ukuze uyikhombe ngokusobala njengesifunda esiyingqopha-mlando kubasebenzisi bobuchwepheshe obusizayo.

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

Faka esikhundleni sebhrendi ye-navbar ngesithombe sakho ngokushintshanisa umbhalo ukuze uthole i- <img>. Njengoba i- .navbar-brandpadding nobude bayo, ungase udinge ukubhala ngaphezulu i-CSS ethile kuye ngesithombe sakho.

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

Faka okuqukethwe kwefomu ngaphakathi .navbar-formukuze uqondanise mpo okufanele kanye nokuziphatha okugoqiwe ezimbotsheni zokubuka eziwumngcingo. Sebenzisa izinketho zokuqondanisa ukuze unqume ukuthi ihlala kuphi ngaphakathi kokuqukethwe kwe-navbar.

Njengoba kuqala, .navbar-formyabelana ngekhodi yayo eminingi .form-inlinenge-mixin. Ezinye izilawuli zefomu, njengamaqembu okokufaka, zingadinga ububanzi obugxilile ukuthi buboniswe kahle ngaphakathi kwe-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>

Izixwayiso zedivayisi yeselula

Kuneminye imixwayiso mayelana nokusebenzisa izilawuli zefomu ngaphakathi kwezici ezingashintshi kumadivayisi eselula. Bona amadokhumenti asekela isiphequluli sethu ukuze uthole imininingwane.

Engeza amalebula njalo

Izifundi zesikrini zizoba nenkinga ngamafomu akho uma ungafaki ilebula yakho konke okokufaka. Kulawa mafomu asemgqeni, ungafihla amalebula usebenzisa .sr-onlyikilasi. Kukhona ezinye izindlela zokuhlinzeka ngelebula lobuchwepheshe obusizayo, obufana ne- aria-label, aria-labelledbynoma titleisibaluli. Uma kungekho kulokhu okukhona, abafundi besikrini bangaphendukela ekusebenziseni placeholderisibaluli, uma sikhona, kodwa qaphela ukuthi ukusetshenziswa placeholdernjengokumiselela ezinye izindlela zokulebula akwelulekwa.

Engeza .navbar-btnikilasi kuma - <button>elementi angahlali ku-a <form>ukuze uwamise phakathi nendawo ku-navbar.

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

Ukusetshenziswa okuqondile kokuqukethwe

Njengamakilasi wezinkinobho ezijwayelekile , angasetshenziswa .navbar-btnkuwo <a>kanye nama - <input>elementi. Kodwa-ke, .navbar-btnakumele kusetshenziswe amakilasi ezinkinobho ezijwayelekile kuma- <a>elementi angaphakathi kwe- .navbar-nav.

Goqa iyunithi yezinhlamvu zombhalo nge-elementi ngokuthi .navbar-text, ngokuvamile <p>kumaka ukuze uthole ukuhola nombala okulungile.

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

Kubantu abasebenzisa izixhumanisi ezijwayelekile ezingekho ngaphakathi kwengxenye evamile yokuzulazula ye-navbar, sebenzisa .navbar-linkikilasi ukuze ungeze imibala efanele yezinketho ezizenzakalelayo neziphambene.

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

.navbar-leftQondanisa izixhumanisi ze-nav, amafomu, izinkinobho, noma umbhalo, usebenzisa .navbar-rightamakilasi ezinsiza. Womabili amakilasi azongeza ukuntanta kwe-CSS endaweni ecacisiwe. Isibonelo, ukuze uqondanise izixhumanisi ze-nav, zibeke endaweni ehlukene <ul>nesigaba sensiza esisetshenziswayo.

Lawa makilasi ayizinguqulo ze-mixin-ed .pull-leftkanye .pull-right, kodwa akhonjwa kumibuzo yemidiya ukuze kube lula ukuphatha izingxenye ze-navbar kuwo wonke amasayizi wedivayisi.

Ukuqondanisa kwesokudla izingxenye eziningi

Ama-Navbar okwamanje anomkhawulo .navbar-rightngamakilasi amaningi. Ukuze uthole indawo efanele okuqukethwe, sisebenzisa imajini eyinegethivu entweni yokugcina .navbar-right. Uma kunama-elementi amaningi asebenzisa leso sigaba, lawa mamajini awasebenzi njengoba kuhlosiwe.

Sizophinde sikuvakashele lokhu uma singaphinda sibhale leyo ngxenye ku-v4.

Engeza .navbar-fixed-topfuthi ufake phakathi .containernoma .container-fluidphakathi nendawo kanye nokuqukethwe kwebha ye-navbar.

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

I-padding yomzimba iyadingeka

I-navbar engashintshi izomboza okunye okuqukethwe kwakho, ngaphandle uma wengeza paddingphezulu kwe- <body>. Zama amanani akho noma sebenzisa amazwibela ethu angezansi. Ithiphu: Ngokuzenzakalelayo, ibha ye-navbar iphezulu ngo-50px.

body { padding-top: 70px; }

Qiniseka ukuthi ufaka lokhu ngemuva kwe-Bootstrap CSS ewumongo.

Engeza .navbar-fixed-bottomfuthi ufake phakathi .containernoma .container-fluidphakathi nendawo kanye nokuqukethwe kwebha ye-navbar.

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

I-padding yomzimba iyadingeka

I-navbar engashintshi izomboza okunye okuqukethwe kwakho, ngaphandle uma wengeza paddingngaphansi kwe- <body>. Zama amanani akho noma sebenzisa amazwibela ethu angezansi. Ithiphu: Ngokuzenzakalelayo, ibha ye-navbar iphezulu ngo-50px.

body { padding-bottom: 70px; }

Qiniseka ukuthi ufaka lokhu ngemuva kwe-Bootstrap CSS ewumongo.

Dala ibha ye-navbar enobubanzi obugcwele eskrola isuke nekhasi ngokungeza .navbar-static-topfuthi ifake phakathi .containernoma .container-fluidphakathi nendawo kanye nokuqukethwe kwebha ye-navbar.

Ngokungafani .navbar-fixed-*namakilasi, awudingi ukushintsha noma iyiphi i-padding ku- body.

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

Shintsha ukubukeka kwe-navbar ngokungeza .navbar-inverse.

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

Iimvuthuluka zesinkwa

Bonisa indawo yekhasi lamanje phakathi kwesigaba sokuhamba.

Izihlukanisi zengezwa ngokuzenzakalelayo ku-CSS nge- :before.content

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

Amakhasi

Nikeza izixhumanisi zokuphequlula zesayithi noma uhlelo lwakho lokusebenza ngengxenye yokupheyija enamakhasi amaningi, noma enye indlela elula yepheyija .

Ukuphegetha okuzenzakalelayo

Ukuqanjwa okulula okukhuthazwe yi-Rdio, kulungele izinhlelo zokusebenza nemiphumela yosesho. Ibhulokhi enkulu kunzima ukuyigeja, ingakala kalula, futhi ihlinzeka ngezindawo ezinkulu zokuchofoza.

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

Ukulebula ingxenye ye-pagination

Ingxenye yokuphegina kufanele isongwe ngento <nav>ukuyikhomba njengesigaba sokuzulazula ezifundweni zesikrini nobunye ubuchwepheshe obusizayo. Ukwengeza, njengoba ikhasi kungenzeka libe nesigaba sokuzula esingaphezu kwesisodwa esivele vele (njengokuzulazula okuyinhloko kunhlokweni, noma ukuzulazula kwebha eseceleni), kuyatuseka ukuthi unikeze incazelo aria-labelyalokho <nav>okubonisa injongo yako. Isibonelo, uma ingxenye ye-pagination isetshenziselwa ukuzulazula phakathi kwesethi yemiphumela yosesho, ilebula efanelekile ingaba aria-label="Search results pages".

Izimo ezikhubazekile nezisebenzayo

Izixhumanisi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabledizixhumanisi ezingachofozwayo kanye .activenokukhombisa ikhasi lamanje.

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

Sincoma ukuthi ushintshe amahange asebenzayo noma avaliwe wenze <span>, noma ushiye ihange esimweni semicibisholo yangaphambili/elandelayo, ukuze ususe ukusebenza kokuchofoza kuyilapho ugcina izitayela ezihlosiwe.

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

Ukulinganisa

Uyathanda ukuqanjwa okukhudlwana noma okuncane? Engeza .pagination-lgnoma .pagination-smosayizi abengeziwe.

<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

Izixhumanisi ezisheshayo zangaphambilini nezilandelayo zokusetshenziswa okulula kokwakheka kwamagama okunophawu olukhanyayo nezitayela. Ilungele amasayithi alula njengamabhulogi noma omagazini.

Isibonelo esizenzakalelayo

Ngokuzenzakalela, izixhumanisi ze-pager.

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

Kungenjalo, ungakwazi ukuqondanisa isixhumanisi ngasinye emaceleni:

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

Isimo sokukhubazeka ongakukhetha

Izixhumanisi zama-pager nazo zisebenzisa isigaba sokusetshenziswa okujwayelekile .disabledkusuka ephepheni.

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

Amalebula

Isibonelo

Isibonelo sesihloko Esisha

Isibonelo sesihloko Esisha

Isibonelo sesihloko Esisha

Isibonelo sesihloko Esisha

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

Izinguquko ezitholakalayo

Engeza noma yimaphi amakilasi esilungisi ashiwo ngezansi ukuze ushintshe ukubukeka kwelebula.

Okuzenzakalelayo Ingozi Yolwazi Lwempumelelo Eyisisekelo _
<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>

Unamathani amalebula?

Izinkinga zokunikeza zingavela uma unamalebula amaningi asemgqeni ngaphakathi kwesiqukathi esiwumngcingo, ngalinye liqukethe inline-blockisakhi salo (njengesithonjana). Indlela ezungeze lokhu iyasetha display: inline-block;. Ngomongo kanye nesibonelo, bona #13219 .

Amabheji

Gqamisa kalula izinto ezintsha noma ezingafundiwe ngokungeza <span class="badge">izixhumanisi, i-Bootstrap navs, nokuningi.

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

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

Ukuziwisa

Uma zingekho izinto ezintsha noma ezingafundiwe, amabheji azovele agoqe (ngesikhethi se-CSS :empty) inqobo nje uma kungekho okuqukethwe okukhona ngaphakathi.

Ukuhambisana kwesiphequluli esiphambanayo

Amabheji ngeke aze azigoqe ku-Internet Explorer 8 ngoba ayinakho usekelo :emptylwesikhethi.

Ijwayelana nezimo ze-nav ezisebenzayo

Izitayela ezakhelwe ngaphakathi zifakiwe zokubeka amabheji ezimeni ezisebenzayo ekuzulazuleni kwamaphilisi.

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

I-Jumbotron

Ingxenye engasindi, eguquguqukayo engakwazi ukukhetha ukunweba yonke indawo yokubuka ukuze ibonise okuqukethwe okubalulekile kusayithi lakho.

Sawubona Mhlaba!

Leli iyunithi yeqhawe elilula, ingxenye elula yesitayela se-jumbotron yokubiza ukunaka okwengeziwe kokuqukethwe okufakiwe noma ulwazi.

Funda kabanzi

<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 i-jumbotron ibe ububanzi obugcwele, futhi ngaphandle kwamakhona ayindilinga, ibeke ngaphandle kwawo wonke .containeru-s futhi esikhundleni salokho wengeze u- .containerangaphakathi.

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

Unhlokweni wekhasi

Igobolondo elilula h1lendawo yokukhipha ngokufanelekile futhi uhlukanise izingxenye zokuqukethwe ekhasini. Ingasebenzisa i- elementi h1ezenzakalelayo small, kanye nezinye izinto eziningi (ngezitayela ezengeziwe).

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

Izithonjana

Nweba isistimu yegridi ye-Bootstrap ngengxenye yesithonjana ukuze ubonise kalula amagridi ezithombe, amavidiyo, umbhalo, nokunye.

Uma ufuna isethulo esifana ne-Pinterest sezithonjana ezinobude obuhlukahlukene kanye/noma ububanzi, uzodinga ukusebenzisa i-plugin yenkampani yangaphandle efana ne- Masonry , Isotope , noma i-Salvattore .

Isibonelo esizenzakalelayo

Ngokuzenzakalelayo, izithonjana ze-Bootstrap ziklanyelwe ukubonisa izithombe ezixhunyiwe ezinomakhaphu omncane odingekayo.

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

Okuqukethwe ngokwezifiso

Ngophawu oluthe xaxa, ungakwazi ukwengeza noma yiluphi uhlobo lokuqukethwe kwe-HTML njengezihloko, izigaba, noma izinkinobho ezithonjaneni.

100%x200

Ilebula yesithonjana

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.

Inkinobho Inkinobho

100%x200

Ilebula yesithonjana

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.

Inkinobho Inkinobho

100%x200

Ilebula yesithonjana

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.

Inkinobho Inkinobho

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

Izexwayiso

Nikeza imilayezo yempendulo yomongo yezenzo zabasebenzisi ezijwayelekile ngedlanzana lemilayezo etholakalayo neguquguqukayo yesexwayiso.

Izibonelo

Goqa noma yimuphi umbhalo kanye nenkinobho yokuchitha oyikhethayo .alertkanye nenye yezigaba ezine zomongo (isb, .alert-success) ngemilayezo eyisisekelo yesexwayiso.

Asikho isigaba esizenzakalelayo

Izaziso azinawo amakilasi azenzakalelayo, amakilasi esisekelo kuphela nesilungisi. Isexwayiso esizenzakalelayo esimpunga asenzi umqondo omningi, ngakho-ke kudingeka ukuthi ucacise uhlobo usebenzisa isigaba somongo. Khetha empumelelweni, ulwazi, isexwayiso, noma ingozi.

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

Izexwayiso ezicashiswayo

Yakha kunoma yisiphi isexwayiso ngokwengeza .alert-dismissibleinkinobho yokuzikhethela nokuvala.

Idinga i-plugin yesixwayiso se-JavaScript

Ukuze zisebenze ngokugcwele, izexwayiso ezicashiswayo, kufanele usebenzise i- plugin yezaziso ze-JavaScript .

<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 okufanele kuwo wonke amadivayisi

Qiniseka ukuthi usebenzisa <button>isici esinesibaluli data-dismiss="alert"sedatha.

Sebenzisa .alert-linkisigaba sosizo ukuze unikeze ngokushesha izixhumanisi ezinemibala efanayo ngaphakathi kwanoma yisiphi isexwayiso.

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

Imigoqo yenqubekelaphambili

Nikeza ngempendulo yakamuva mayelana nokuqhubeka kokugeleza komsebenzi noma isenzo esinemigoqo yenqubekelaphambili elula kodwa eguquguqukayo.

Ukuhambisana kwesiphequluli esiphambanayo

Amabha wokuqhubeka asebenzisa ukuguqulwa kwe-CSS3 nokugqwayiza ukuze kuzuzwe eminye yemiphumela yako. Lezi zici azisekelwa ku-Internet Explorer 9 nezinguqulo ezingezansi noma ezindala zeFirefox. I-Opera 12 ayisekeli ukugqwayiza.

Ukuhambisana Kwenqubomgomo Yokuphepha Kokuqukethwe (CSP).

Uma iwebhusayithi yakho ineNqubomgomo Yokuphepha Kokuqukethwe (CSP) engakuvumeli , style-src 'unsafe-inline'ngeke ukwazi ukusebenzisa styleizibaluli ezingaphakathi komugqa ukuze usethe ububanzi bebha yenqubekelaphambili njengoba kuboniswe ezibonelweni zethu ezingezansi. Ezinye izindlela zokusetha ububanzi obuhambisana nama-CSP aqinile zihlanganisa ukusebenzisa i-JavaScript yangokwezifiso encane (esethi element.style.width) noma ukusebenzisa amakilasi e-CSS angokwezifiso.

Isibonelo esiyisisekelo

Ibha yokuqhubeka ezenzakalelayo.

60% Qedile
<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>

Ngelebula

Susa <span>okuneklasi .sr-onlyngaphakathi kwebha yokuqhubeka ukuze ubonise amaphesenti abonakalayo.

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 ukuthi umbhalo welebula uhlala ufanelekile ngisho namaphesenti aphansi, cabanga ukwengeza u-a min-widthkubha yokuqhubeka.

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>

Ezinye izindlela zomongo

Amabha okuqhubeka asebenzisa inkinobho efanayo namakilasi okuxwayisa ngezitayela ezingaguquki.

40% Qedile (impumelelo)
20% Gcwalisa
60% Qedile (isexwayiso)
80% ephelele (ingozi)
<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>

Inemithende

Isebenzisa i-gradient ukuze idale umphumela onemigqa. Ayitholakali ku-IE9 nangaphansi.

40% Qedile (impumelelo)
20% Gcwalisa
60% Qedile (isexwayiso)
80% ephelele (ingozi)
<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>

Okugqwayizayo

Engeza .activeukuze .progress-bar-stripeduphilise imithende kwesokudla ukuya kwesokunxele. Ayitholakali ku-IE9 nangaphansi.

45% Iphelele
<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>

Kustakiwe

Beka amabha amaningi okufanayo .progressukuze uwabeke.

35% Qedile (impumelelo)
20% Gcwalisa (isixwayiso)
10% Kuqediwe (ingozi)
<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>

Into yemidiya

Izitayela zento engabonakali zokwakha izinhlobo ezihlukahlukene zezingxenye (njengamazwana ebhulogi, ama-Tweets, njll) anesithombe esiqondaniswe kwesokunxele noma kwesokudla eceleni kokuqukethwe kombhalo.

Imidiya ezenzakalelayo

Imidiya ezenzakalelayo ibonisa into yemidiya (izithombe, ividiyo, umsindo) kwesokunxele noma kwesokudla sebhulokhi yokuqukethwe.

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. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in 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. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in faucibus.

Isihloko semidiya esisidleke

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. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in 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>

Amakilasi .pull-leftfuthi .pull-rightakhona futhi ayesetshenziswa ngaphambilini njengengxenye yemidiya, kodwa ahoxisiwe kulokho kusetshenziswa kusukela ku-v3.3.0. Acishe alingane nokuthi .media-leftfuthi .media-right, ngaphandle kokuthi .media-rightkufanele abekwe ngemva kwe .media-body-html.

Ukuqondanisa abezindaba

Izithombe noma enye imidiya ingaqondaniswa phezulu, maphakathi, noma phansi. Okuzenzakalelayo kuqondaniswe phezulu.

Imidiya eqondaniswe phezulu

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. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in faucibus.

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

Imidiya eqondaniswe maphakathi

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. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in faucibus.

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

Imidiya eqondaniswe ngezansi

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. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in faucibus.

I-Donec sed odio dui. I-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>

Uhlu lwemidiya

Ngokumakwa okuthe xaxa, ungasebenzisa imidiya engaphakathi kohlu (iwusizo ochungechungeni lwamazwana noma uhlu lwama-athikili).

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

    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 esisidleke

    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 esisidleke

    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>

Iqembu lohlu

Amaqembu ohlu ayingxenye eguquguqukayo nenamandla yokubonisa hhayi nje uhlu olulula lwezakhi, kodwa eziyinkimbinkimbi ezinokuqukethwe ngokwezifiso.

Isibonelo esiyisisekelo

Iqembu lohlu oluyisisekelo liwuhlu olungahlelekile olunezinto zohlu, namakilasi afanele. Yakhela phezu kwayo ngezinketho ezilandelayo, noma i-CSS yakho njengoba kudingeka.

  • Cras justo odio
  • I-Dapibus ac facilisis in
  • I-Morbi leo rius
  • I-Porta ac consectetur ac
  • I-Vestibulum ne-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>

Amabheji

Engeza ingxenye yamabheji kunoma iyiphi into yeqembu lohlu futhi izobekwa ngokuzenzakalelayo kwesokudla.

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

Izinto ezixhunyiwe

Xhumanisa izinto zeqembu ngokusebenzisa omaka esikhundleni sezinto zohlu (lokho futhi kusho umzali <div>esikhundleni se- <ul>). Asikho isidingo sabazali abangabodwana eduze kwento ngayinye.

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

Izinto zeqembu zohlu zingase zibe izinkinobho esikhundleni sezinto zohlu (lokho futhi kusho umzali <div>esikhundleni se- <ul>). Asikho isidingo sabazali abangabodwana eduze kwento ngayinye. Ungasebenzisi .btnamakilasi ajwayelekile lapha.

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

Engeza .disabledku-a .list-group-itemukuze umpunga ukuze ubonakale ukhubazekile.

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

Amakilasi omongo

Sebenzisa amakilasi anomongo ukwenza izinto zohlu lwesitayela, ezizenzakalelayo noma ezixhunyiwe. Futhi kufaka phakathi .activeizwe.

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

Okuqukethwe ngokwezifiso

Engeza cishe noma iyiphi i-HTML ngaphakathi, ngisho nasemaqenjini ohlu axhumene njengaleli elingezansi.

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

Amaphaneli

Yize kungadingeki ngaso sonke isikhathi, kwesinye isikhathi udinga ukufaka i-DOM yakho ebhokisini. Kulezo zimo, zama ingxenye yephaneli.

Isibonelo esiyisisekelo

Ngokuzenzakalelayo, konke okwenziwayo .panelkusetshenziswa umngcele othile oyisisekelo kanye ne-padding ukuze kuqukethe okuthile.

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

Iphaneli enesihloko

Engeza kalula isitsha esinesihloko kuphaneli yakho nge- .panel-heading. Ungaphinda ufake noma yini <h1>- <h6>eneklasi .panel-titleukuze ungeze isihloko esibhalwe ngaphambilini. Kodwa-ke, osayizi befonti be- <h1>- <h6>babhalwa ngaphezulu ngokuthi .panel-heading.

Ukuze uthole umbala ofanele wesixhumanisi, qiniseka ukuthi ubeka izixhumanisi ezihlokweni ngaphakathi .panel-title.

Isihloko sephaneli esingenasihloko
Okuqukethwe kwephaneli

Isihloko sephaneli

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

Goqa izinkinobho noma umbhalo wesibili ngo .panel-footer. Qaphela ukuthi onyaweni bephaneli abayifuzi imibala nemingcele uma kusetshenziswa ukuhlukahluka kokuqukethwe njengoba kungahloselwe ukuba kube ngaphambili.

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

Ezinye izindlela zomongo

Njengezinye izingxenye, yenza kalula iphaneli ibe nenjongo kumongo othile ngokungeza noma yiziphi izigaba zesimo somongo.

Isihloko sephaneli

Okuqukethwe kwephaneli

Isihloko sephaneli

Okuqukethwe kwephaneli

Isihloko sephaneli

Okuqukethwe kwephaneli

Isihloko sephaneli

Okuqukethwe kwephaneli

Isihloko sephaneli

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

Ngamatafula

Engeza noma yikuphi okungeyona imingcele .tablengaphakathi kwephaneli ukuze uthole idizayini engenamthungo. Uma kukhona i- .panel-body, sengeza umngcele owengeziwe phezulu kwetafula ukuze kuhlukaniswe.

Isihloko sephaneli

Okunye okuqukethwe kwephaneli okuzenzakalelayo lapha. I-Nulla vitae elit libero, i-pharetra augue. I-Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. I-Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @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>

Uma ungekho umzimba wephaneli, ingxenye isuka kunhlokweni yephaneli iye etafuleni ngaphandle kokuphazamiseka.

Isihloko sephaneli
# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Ngamaqembu ohlu

Faka kalula amaqembu ohlu anobubanzi obugcwele ngaphakathi kwanoma iyiphi iphaneli.

Isihloko sephaneli

Okunye okuqukethwe kwephaneli okuzenzakalelayo lapha. I-Nulla vitae elit libero, i-pharetra augue. I-Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. I-Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • I-Dapibus ac facilisis in
  • I-Morbi leo rius
  • I-Porta ac consectetur ac
  • I-Vestibulum ne-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>

Ukushumeka okuphendulayo

Vumela iziphequluli ukuthi zinqume ubukhulu bevidiyo noma bombukiso wesilayidi ngokusekelwe kububanzi bebhulokhi yazo equkethe ngokudala isilinganiso sangaphakathi esizokala ngokufanelekile kunoma iyiphi idivayisi.

Imithetho isetshenziswa ngokuqondile ku- <iframe>, <embed>, <video>, <object>nezici; ngokuzikhethela sebenzisa isigaba sozalo esicacile .embed-responsive-itemuma ufuna ukufanisa isitayela sezinye izici.

I-Pro-Tip! Awudingi ukufaka phakathi frameborder="0"kwakho <iframe>njengoba sikuhoxisa lokho.

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

Imithombo

Okuzenzakalelayo kahle

Sebenzisa umthombo njengomphumela olula ku-elementi ukuze uyinikeze umphumela wokufakwayo.

Bheka, ngisemthonjeni!
<div class="well">...</div>

Amakilasi okuzikhethela

Lawula ama-padding namakhona ayindilinga ngamakilasi amabili okushintsha ozikhethela.

Bheka, ngisemthonjeni omkhulu!
<div class="well well-lg">...</div>
Bheka, ngisemthonjeni omncane!
<div class="well well-sm">...</div>