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.
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-path
kanye/noma @icon-font-name
okuguquguqukayo 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-only
nekilasi.
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-label
isibaluli kusilawuli ngokwaso.
<span class= "glyphicon glyphicon-search" aria-hidden= "true" ></span>
Izibonelo
Wasebenzise ezinkinobho, emaqenjini enkinobho yebha yamathuluzi, ukuzulazula, noma okokufaka kwefomu okulungiselelwe ngaphambilini.
Inkanyezi
Inkanyezi
Inkanyezi
Inkanyezi
<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-only
nombhalo 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>
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 .dropup
kumzali.
<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-right
kokuthi a .dropdown-menu
ukuze 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 overflow
noma kubonakale kungaphandle kwemingcele yembobo yokubuka. Lungiselela lezi zinkinga ngokwakho njengoba ziphakama.
.pull-right
Ukuqondanisa okwehlisiwe
Kusukela ku-v3.1.0, siyekile .pull-right
kumamenyu 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>
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 .disabled
kokuthi 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>
Qoqa uchungechunge lwezinkinobho ndawonye emugqeni owodwa neqembu lezinkinobho. Engeza umsakazo we-JavaScript ozikhethela wona kanye nokuziphatha kwesitayela sebhokisi lokuhlola ngezinkinobho zethu ze-plugin .
Qinisekisa ukuthi kulungile role
futhi unikeze ilebula
Ukuze ubuchwepheshe obusizayo - njengezifundi zesikrini - buveze ukuthi uchungechunge lwezinkinobho luqoqiwe, kufanele role
kunikezwe 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-labelledby
ezingasetshenziswa futhi.
Isibonelo esiyisisekelo
Goqa uchungechunge lwezinkinobho ngo- .btn
in .btn-group
.
Kwesokunxele
Maphakathi
Kulungile
<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>
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.
Kwesokunxele
Maphakathi
Kulungile
Kwesokunxele
Maphakathi
Kulungile
Kwesokunxele
Maphakathi
Kulungile
Kwesokunxele
Maphakathi
Kulungile
<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-group
phakathi kokunye .btn-group
uma 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.
Inkinobho
Inkinobho
Okwehlayo
Inkinobho
Inkinobho
Okwehlayo
Okwehlayo
Okwehlayo
<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: -1px
isetshenziselwa ukupakisha imingcele esikhundleni sokuyisusa. Nokho, margin
akusebenzi 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- .btn
s 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"
.
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.
Kwesokunxele
Maphakathi
Kulungile
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Left</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Middle</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Right</button>
</div>
</div>
Sebenzisa noma iyiphi inkinobho ukuze uqalise imenyu eyehlayo ngokuyibeka ngaphakathi .btn-group
futhi 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.
Okuzenzakalelayo
Okuyinhloko
Impumelelo
Ulwazi
Isexwayiso
Ingozi
<!-- 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.
Okuzenzakalelayo
Guqula Okwehlayo
Okuyinhloko
Guqula Okwehlayo
Impumelelo
Guqula Okwehlayo
Ulwazi
Guqula Okwehlayo
Isexwayiso
Guqula Okwehlayo
Ingozi
Guqula Okwehlayo
<!-- 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 .dropup
kumzali.
<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>
Nweba izilawuli zefomu ngokungeza umbhalo noma izinkinobho ngaphambi, ngemva, noma kuzo zombili izinhlangothi zanoma yimuphi umbhalo okusekelwe <input>
. Sebenzisa .input-group
ne- .input-group-addon
noma .input-group-btn
ukulungisa 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 rows
imfanelo 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).
Beka isengezo esisodwa noma inkinobho nhlangothi zombili yokokufaka. Ungakwazi futhi ukubeka eyodwa nhlangothi zombili yokokufaka.
Asizisekeli izengezo eziningi ( .input-group-addon
noma .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>
Engeza amakilasi okulinganisa amafomu ahlobene kulona .input-group
uqobo 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>
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 emaqenjini okokufaka zihluka kancane futhi zidinga izinga elilodwa elengeziwe lokuzalela. Esikhundleni sokuthi .input-group-addon
, uzodinga ukusebenzisa .input-group-btn
ukusonga 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 -->
<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 -->
<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>
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>
Ama-Nav atholakala ku-Bootstrap abe nemakhaphu okwabelwana ngawo, aqala nge-base .nav
class, 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 role
izibaluli 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.
Amathebhu
Qaphela ukuthi .nav-tabs
ikilasi lidinga isigaba .nav
sesisekelo.
<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-pills
esikhundleni 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.
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>
Izixhumanisi ezikhutshaziwe
Kunoma iyiphi ingxenye ye-nav (amathebhu noma amaphilisi), engeza .disabled
ukuze 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>
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 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.
Okuqukethwe okuchichimayo
Njengoba i-Bootstrap ingazi ukuthi singakanani isikhala esidingwa yi-navbar yakho, ungase uhlangabezane nezinkinga ngokuqukethwe okugoqeka kumugqa wesibili. Ukuze uxazulule lokhu, ungakwazi:
Yehlisa inani noma ububanzi bezinto ze-navbar.
Fihla izinto ezithile ze-navbar kumasayizi athile wesikrini usebenzisa izigaba zensiza eziphendulayo .
Shintsha indawo lapho ibha yakho ye-navbar ishintsha khona phakathi kwemodi egoqiwe nevundlile. Yenza @grid-float-breakpoint
okuguquguqukayo 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>
Isithombe somkhiqizo
Faka esikhundleni sebhrendi ye-navbar ngesithombe sakho ngokushintshanisa umbhalo ukuze uthole i- <img>
. Njengoba i- .navbar-brand
padding 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-form
ukuze uqondanise mpo okufanele kanye nokuziphatha okugoqiwe ezimbotsheni zokubuka eziwumngcingo. Sebenzisa izinketho zokuqondanisa ukuze unqume ukuthi ihlala kuphi ngaphakathi kokuqukethwe kwe-navbar.
Njengoba kuqala, .navbar-form
yabelana ngekhodi yayo eminingi .form-inline
nge-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>
Engeza .navbar-btn
ikilasi 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-btn
kuwo <a>
kanye nama - <input>
elementi. Kodwa-ke, .navbar-btn
akumele kusetshenziswe amakilasi ezinkinobho ezijwayelekile kuma- <a>
elementi angaphakathi kwe- .navbar-nav
.
Umbhalo
Goqa iyunithi yezinhlamvu zombhalo nge-elementi ngokuthi .navbar-text
, ngokuvamile <p>
kumaka ukuze uthole ukuhola nombala okulungile.
Ungene ngemvume njengo-Mark Otto
<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-link
ikilasi 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-left
Qondanisa izixhumanisi ze-nav, amafomu, izinkinobho, noma umbhalo, usebenzisa .navbar-right
amakilasi 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-left
kanye .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-right
ngamakilasi 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.
Kulungiswe phezulu
Engeza .navbar-fixed-top
futhi ufake phakathi .container
noma .container-fluid
phakathi 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 padding
phezulu 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.
Kugxilwe phansi
Engeza .navbar-fixed-bottom
futhi ufake phakathi .container
noma .container-fluid
phakathi 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 padding
ngaphansi 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.
Okuphezulu okumile
Dala ibha ye-navbar enobubanzi obugcwele eskrola isuke nekhasi ngokungeza .navbar-static-top
futhi ifake phakathi .container
noma .container-fluid
phakathi 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>
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>
Nikeza izixhumanisi zokuphequlula zesayithi noma uhlelo lwakho lokusebenza ngengxenye yokupheyija enamakhasi amaningi, noma enye indlela elula yepheyija .
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>
Izimo ezikhubazekile nezisebenzayo
Izixhumanisi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabled
izixhumanisi ezingachofozwayo kanye .active
nokukhombisa 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-lg
noma .pagination-sm
osayizi 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>
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 .disabled
kusuka 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>
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-block
isakhi salo (njengesithonjana). Indlela ezungeze lokhu iyasetha display: inline-block;
. Ngomongo kanye nesibonelo, bona #13219 .
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 :empty
lwesikhethi.
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>
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 .container
u-s futhi esikhundleni salokho wengeze u- .container
angaphakathi.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
Igobolondo elilula h1
lendawo yokukhipha ngokufanelekile futhi uhlukanise izingxenye zokuqukethwe ekhasini. Ingasebenzisa i- elementi h1
ezenzakalelayo small
, kanye nezinye izinto eziningi (ngezitayela ezengeziwe).
<div class= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
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.
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
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
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>
Nikeza imilayezo yempendulo yomongo yezenzo zabasebenzisi ezijwayelekile ngedlanzana lemilayezo etholakalayo neguquguqukayo yesexwayiso.
Izibonelo
Goqa noma yimuphi umbhalo kanye nenkinobho yokuchitha oyikhethayo .alert
kanye 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-dismissible
inkinobho 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>
Izixhumanisi zezaziso
Sebenzisa .alert-link
isigaba 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>
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 style
izibaluli 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-only
ngaphakathi 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-width
kubha 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 .active
ukuze .progress-bar-striped
uphilise 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 .progress
ukuze 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>
Izitayela zento engabonakali zokwakha izinhlobo ezihlukahlukene zezingxenye (njengamazwana ebhulogi, ama-Tweets, njll) anesithombe esiqondaniswe kwesokunxele noma kwesokudla eceleni kokuqukethwe kombhalo.
Imidiya ezenzakalelayo ibonisa into yemidiya (izithombe, ividiyo, umsindo) kwesokunxele noma kwesokudla sebhulokhi yokuqukethwe.
<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-left
futhi .pull-right
akhona futhi ayesetshenziswa ngaphambilini njengengxenye yemidiya, kodwa ahoxisiwe kulokho kusetshenziswa kusukela ku-v3.3.0. Acishe alingane nokuthi .media-left
futhi .media-right
, ngaphandle kokuthi .media-right
kufanele abekwe ngemva kwe .media-body
-html.
Izithombe noma enye imidiya ingaqondaniswa phezulu, maphakathi, noma phansi. Okuzenzakalelayo kuqondaniswe phezulu.
<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>
Ngokumakwa okuthe xaxa, ungasebenzisa imidiya engaphakathi kohlu (iwusizo ochungechungeni lwamazwana noma uhlu lwama-athikili).
<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>
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.
14 Cras justo odio
2 I-Dapibus ac facilisis in
1 I-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 zeqembu zohlu zingase zibe izinkinobho esikhundleni sezinto zohlu (lokho futhi kusho umzali <div>
esikhundleni se- <ul>
). Asikho isidingo sabazali abangabodwana eduze kwento ngayinye. Ungasebenzisi .btn
amakilasi ajwayelekile lapha.
Cras justo odio
I-Dapibus ac facilisis in
I-Morbi leo rius
I-Porta ac consectetur ac
I-Vestibulum ne-eros
<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 .disabled
ku-a .list-group-item
ukuze 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 .active
izwe.
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>
Yize kungadingeki ngaso sonke isikhathi, kwesinye isikhathi udinga ukufaka i-DOM yakho ebhokisini. Kulezo zimo, zama ingxenye yephaneli.
Isibonelo esiyisisekelo
Ngokuzenzakalelayo, konke okwenziwayo .panel
kusetshenziswa 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-title
ukuze 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.
<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 .table
ngaphakathi 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>
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-item
uma 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>
Okuzenzakalelayo kahle
Sebenzisa umthombo njengomphumela olula ku-elementi ukuze uyinikeze umphumela wokufakwayo.
<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>