Izingxenye
Izingxenye ezingaphezu kweshumi nambili ezisebenziseka kabusha ezakhelwe ukunikeza isithonjana, okwehliswayo, amaqembu okokufaka, ukuzulazula, izexwayiso, nokunye okuningi.
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-shest-backward
- 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.
Iphutha:Faka ikheli le-imeyili elivumelekile
<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 .
Isibonelo
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>Ukuqondanisa
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>Izihloko
Engeza unhlokweni kulebula izigaba zezenzo kunoma iyiphi imenyu eyehlayo.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Umhlukanisi
Engeza isihlukanisi ukuze uhlukanise uchungechunge lwezixhumanisi kumenyu eyehlayo.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Izinto zemenyu ezikhutshaziwe
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.
<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.
Amathebhu
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>Amaphilisi
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>Kulungisiwe
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.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Izixhumanisi ezikhutshaziwe
Kunoma iyiphi ingxenye ye-nav (amathebhu noma amaphilisi), engeza .disabledukuze uthole izixhumanisi ezimpunga futhi akukho miphumela ye-hover .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Ukusebenzisa okwehliswayo
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
Ibha ye-navbar ezenzakalelayo
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.
<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>Isithombe somkhiqizo
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>Amafomu
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>Izinkinobho
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>Umbhalo
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>Izixhumanisi ezingezona ze-nav
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>Ukuqondanisa kwengxenye
.navbar-leftQondanisa izixhumanisi ze-nav, amafomu, izinkinobho, noma umbhalo, usebenzisa .navbar-rightamakilasi ezinsiza. Womabili amakilasi azongeza ukuntanta kwe-CSS ngendlela eshiwo. 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.
Kulungiswe phezulu
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>Kugxilwe phansi
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>Okuphezulu okumile
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>I-navbar ehlanekezelwe
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">«</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">»</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">«</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">«</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>Izixhumanisi eziqondanisiwe
Kungenjalo, ungakwazi ukuqondanisa isixhumanisi ngasinye emaceleni:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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.
<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).
Isibonelo seheda yekhasi Umbhalo ongezansi weheda
<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.
<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.
Wenze kahle! Ufunde ngempumelelo lo mlayezo obalulekile wesexwayiso.
Amakhanda phezulu! Lesi sexwayiso sidinga ukunakwa kwakho, kodwa asibalulekile kakhulu.
Isexwayiso! Kungcono uzihlole, awubukeki umuhle kakhulu.
Hawu! Shintsha izinto ezimbalwa bese uzama ukuthumela futhi.
<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 .
Isexwayiso! Kungcono uzihlole, awubukeki umuhle 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">×</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.
Izixhumanisi zezaziso
Sebenzisa .alert-linkisigaba sosizo ukuze unikeze ngokushesha izixhumanisi ezinemibala efanayo ngaphakathi kwanoma yisiphi isexwayiso.
Wenze kahle! Ufunde ngempumelelo
lo mlayezo obalulekile wesexwayiso .
Amakhanda phezulu! Lesi
sexwayiso sidinga ukunakwa kwakho , kodwa asibalulekile kakhulu.
Isexwayiso! Kungcono uzihlole, awubukeki
umuhle kakhulu .
Hawu!
Shintsha izinto ezimbalwa bese uzama ukuthumela futhi.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
Faka kuhlu isihloko sento yeqembu
Donec id elit non mi porta gravida at eget metus. I-Maecenas sed diam eget risus varius blandit.
Faka kuhlu isihloko sento yeqembu
Donec id elit non mi porta gravida at eget metus. I-Maecenas sed diam eget risus varius blandit.
Faka kuhlu isihloko sento yeqembu
Donec id elit non mi porta gravida at eget metus. I-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>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 okunye okuqukethwe.
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 yisiphi <h1>- <h6>ngeklasi .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>Iphaneli enonyaweni
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 |
<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 |
<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>