Likaroloana
Likarolo tse fetang leshome le metso e 'meli tse ka sebelisoang hape tse hahelletsoeng ho fana ka litšoantšo, li-dropdown, lihlopha tsa ho kenya letsoho, ho tsamaea, litlhokomeliso le tse ling tse ngata.
Li-Glyphicons
Li-glyphs tse fumanehang
E kenyelletsa li-glyphs tse fetang 250 ka sebopeho sa fonte ho tsoa ho sehlopha sa Glyphicon Halflings. Li-Glyphicons Halflings hangata ha li fumanehe mahala, empa moetsi oa tsona o entse hore li fumanehe bakeng sa Bootstrap mahala. Rea leboha, re kopa feela hore o kenye sehokelo sa ho khutlela ho Glyphicons neng kapa neng ha ho khonahala.
- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- glyphicon glyphicon-minus
- glyphicon glyphicon-cloud
- glyphicon glyphicon-enfelopo
- glyphicon glyphicon-pentšele
- khalase ea glyphicon ea glyphicon
- 'mino oa glyphicon oa glyphicon
- glyphicon glyphicon-search
- glyphicon glyphicon-pelo
- naleli ea glyphicon glyphicon
- glyphicon glyphicon-naleli-e se nang letho
- mosebelisi oa glyphicon glyphicon
- filimi ea glyphicon
- glyphicon glyphicon-th-large
- glyphicon glyphicon-th
- glyphicon glyphicon-th-list
- glyphicon glyphicon-ok
- glyphicon glyphicon-tlosa
- glyphicon glyphicon-zoom-in
- glyphicon glyphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon glyphicon-signal
- glyphicon glyphicon-cog
- glyphicon glyphicon-litšila
- glyphicon glyphicon-lehae
- faele ea glyphicon glyphicon
- nako ea glyphicon glyphicon
- glyphicon glyphicon-road
- glyphicon glyphicon-download-alt
- glyphicon glyphicon download
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- glyphicon glyphicon-play-circle
- glyphicon glyphicon-pheta
- glyphicon glyphicon-refresh
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-lock
- folaga ea glyphicon
- li-headphones tsa glyphicon
- glyphicon glyphicon-volume-off
- glyphicon glyphicon-volume-down
- glyphicon glyphicon-volume-up
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-barcode
- Setšoantšo sa glyphicon
- li-tag tsa glyphicon
- buka ea glyphicon glyphicon
- glyphicon glyphicon-bookmark
- khatiso ea glyphicon
- glyphicon glyphicon-khamera
- mongolo oa glyphicon glyphicon
- glyphicon glyphicon-bold
- glyphicon glyphicon-italic
- glyphicon glyphicon-text-height
- bophara ba mongolo oa glyphicon glyphicon
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- lethathamo la glyphicon glyphicon
- glyphicon glyphicon-indent-le letšehali
- glyphicon glyphicon-indent-right
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-setšoantšo
- glyphicon glyphicon-mapa-lesupa
- glyphicon glyphicon-fetola
- Glyphicon-tint e khanyang
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- glyphicon glyphicon-check
- glyphicon glyphicon-move
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-fast-backward
- glyphicon glyphicon-morao
- papali ea glyphicon glyphicon
- glyphicon glyphicon-pause
- glyphicon glyphicon-stop
- glyphicon glyphicon-forward
- glyphicon glyphicon-ka pele-pele
- glyphicon glyphicon-step-forward
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-le letšehali
- glyphicon glyphicon-chevron-right
- glyphicon glyphicon-plus-sign
- glyphicon glyphicon-minus-sign
- letšoao la glyphicon glyphicon-tlosa
- glyphicon glyphicon-ok-sign
- glyphicon glyphicon-potso-letšoao
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-screenshot
- glyphicon glyphicon-tlosa-circle
- glyphicon glyphicon-ok-circle
- glyphicon glyphicon-ban-circle
- glyphicon glyphicon-arrow-left
- glyphicon glyphicon-arrow-right
- glyphicon glyphicon-arrow-up
- glyphicon glyphicon-arrow-down
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-full
- glyphicon glyphicon-resize-e nyane
- lets'oao la glyphicon glyphicon-exclamation
- glyphicon glyphicon-mpho
- lekhasi la glyphicon glyphicon
- glyphicon glyphicon-fire
- glyphicon glyphicon-e butsoe mahlo
- glyphicon glyphicon-eye-close
- letšoao la tlhokomeliso la glyphicon glyphicon
- sefofane sa glyphicon glyphicon
- glyphicon glyphicon-khalendara
- glyphicon glyphicon-random
- maikutlo a glyphicon glyphicon
- Glyphicon Glyphicon-magnet
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-shopping-cart
- glyphicon glyphicon-folder-close
- glyphicon glyphicon-folder-butsoe
- glyphicon glyphicon-resize-theth
- glyphicon glyphicon-resize-horizontal
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-bell
- setifikeiti sa glyphicon glyphicon
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-letsoho-le letona
- glyphicon glyphicon-letsoho le letšehali
- glyphicon glyphicon-hand-up
- glyphicon glyphicon-hand-down
- glyphicon glyphicon-circle-arrow-right
- glyphicon glyphicon-circle-arrow-left
- glyphicon glyphicon-circle-arrow-up
- glyphicon glyphicon-circle-arrow-down
- glyphicon glyphicon-globe
- glyphicon glyphicon-wrench
- mesebetsi ea glyphicon glyphicon
- filthara ea glyphicon glyphicon
- Glyphicon glyphicon-briefcase
- glyphicon glyphicon-sekrineng se felletseng
- glyphicon glyphicon-dashboard
- glyphicon glyphicon-paperclip
- glyphicon glyphicon-pelo-e se nang letho
- glyphicon glyphicon-link
- glyphicon glyphicon-fono
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- mofuta oa glyphicon glyphicon
- glyphicon glyphicon-hlopha-ka-alfabeta
- glyphicon glyphicon-hlopha-ka-alfabeta-alt
- glyphicon glyphicon-hlopha ka tatellano
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-hlopha-ka-likarolo
- glyphicon glyphicon-hlopha-ka-litšoaneleho-alt
- glyphicon glyphicon-sa hlahlojoe
- glyphicon glyphicon-atolosa
- glyphicon glyphicon-collapse-down
- glyphicon glyphicon-collapse-up
- glyphicon glyphicon-log-in
- glyphicon glyphicon-flash
- glyphicon glyphicon-log-out
- glyphicon glyphicon-new-fensetere
- rekoto ea glyphicon glyphicon
- glyphicon glyphicon-boloka
- glyphicon glyphicon-open
- glyphicon glyphicon-boloketsoe
- glyphicon glyphicon-import
- glyphicon glyphicon-export
- glyphicon glyphicon-romela
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-floppy-bolokiloe
- glyphicon glyphicon-floppy-tlosa
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-open
- glyphicon glyphicon-karete ea mokoloto
- glyphicon glyphicon-transfer
- glyphicon glyphicon-cutlery
- glyphicon glyphicon-header
- glyphicon glyphicon-compressed
- glyphicon glyphicon-earphone
- glyphicon glyphicon-phone-alt
- Setšoantšo sa glyphicon-tower
- lintlha tsa glyphicon glyphicon
- glyphicon glyphicon-sd-video
- glyphicon glyphicon-hd-video
- mongolo oa glyphicon glyphicon
- glyphicon glyphicon-sound-stereo
- glyphicon glyphicon-sound-dolby
- molumo oa glyphicon glyphicon-5-1
- molumo oa glyphicon glyphicon-6-1
- molumo oa glyphicon glyphicon-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon glyphicon-letshwao-ngodiso
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-tree-conifer
- glyphicon glyphicon-tree-deciduous
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-file
- glyphicon glyphicon-open-file
- glyphicon glyphicon-up-up
- glyphicon glyphicon-kopi
- glyphicon glyphicon-paste
- tlhokomeliso ea glyphicon glyphicon
- glyphicon glyphicon-equalizer
- glyphicon glyphicon-king
- glyphicon glyphicon-mofumahali
- glyphicon glyphicon-pawn
- glyphicon glyphicon-bishopo
- glyphicon glyphicon-knight
- glyphicon glyphicon-baby-formula
- glyphicon glyphicon-tent
- glyphicon glyphicon-blackboard
- bethe ea glyphicon glyphicon
- glyphicon glyphicon-apple
- glyphicon glyphicon-hlakola
- glyphicon glyphicon-hourglass
- lebone la glyphicon glyphicon
- glyphicon glyphicon-duplicate
- glyphicon glyphicon-piggy-bank
- glyphicon glyphicon-scissors
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- glyphicon glyphicon-yen
- glyphicon glyphicon-jpy
- glyphicon glyphicon-ruble
- glyphicon glyphicon-rub
- glyphicon glyphicon-scale
- glyphicon glyphicon-ice-lolly
- glyphicon glyphicon-ice-lolly-tasted
- thuto ea glyphicon glyphicon
- glyphicon glyphicon-khetho-horizontal
- glyphicon glyphicon-option-vertical
- glyphicon glyphicon-menu-hamburger
- fensetere ea glyphicon glyphicon-modal
- oli ea glyphicon
- lijo-thollo tsa glyphicon
- likhalase tsa khanya tsa glyphicon
- boholo ba mongolo oa glyphicon glyphicon
- mmala wa glyphicon glyphicon-text-color
- glyphicon glyphicon-text-background
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-horizontal
- glyphicon glyphicon-object-align-left
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- glyphicon glyphicon-triangle-right
- glyphicon glyphicon-triangle-left
- glyphicon glyphicon-triangle-tlase
- glyphicon glyphicon-triangle-top
- glyphicon glyphicon-console
- glyphicon glyphicon-superscript
- glyphicon glyphicon-subscript
- glyphicon glyphicon-menu-le letšehali
- glyphicon glyphicon-menu-le letona
- glyphicon glyphicon-menu-down
- glyphicon glyphicon-menu-up
Mokhoa oa ho sebelisa
Bakeng sa mabaka a ts'ebetso, litšoantšo tsohle li hloka sehlopha sa mantlha le sehlopha sa li-icon tsa motho ka mong. Ho e sebelisa, beha khoutu e latelang hoo e ka bang kae kapa kae. Etsa bonnete ba hore u siea sebaka pakeng tsa letšoao le mongolo bakeng sa padding e nepahetseng.
U se ke ua kopanya le likarolo tse ling
Lihlopha tsa litšoantšo li ke ke tsa kopanngoa ka ho toba le likarolo tse ling. Ha lia lokela ho sebelisoa hammoho le lihlopha tse ling nthong e le 'ngoe. Sebakeng seo, eketsa sehlaha <span>'me u sebelise litlelase tsa li-icon ho <span>.
E sebelisoa feela linthong tse se nang letho
Lihlopha tsa li-icon li lokela ho sebelisoa feela ho likarolo tse se nang mongolo le tse se nang bana.
Ho fetola sebaka sa fonte ea letšoao
Bootstrap e nka hore lifaele tsa fonte tsa icon li tla be li fumaneha bukeng ../fonts/, e amanang le lifaele tsa CSS tse hlophisitsoeng. Ho tsamaisa kapa ho reha lifaele tseo tsa fonte ho bolela ho nchafatsa CSS ka e 'ngoe ea litsela tse tharo:
- Fetola
@icon-font-pathle/kapa@icon-font-nametse fapaneng mohloling Lifaele tse fokolang. - Sebelisa khetho ea URL e amanang le eona e fanoeng ke Less compiler.
- Fetola
url()litsela ho CSS e hlophisitsoeng.
Sebelisa khetho efe kapa efe e lumellanang hantle le setaele sa hau sa nts'etsopele.
Litšoantšo tse fumanehang
Mefuta ea sejoale-joale ea mahlale a thusang e tla phatlalatsa litaba tse hlahisitsoeng ke CSS, hammoho le litlhaku tse ikhethileng tsa Unicode. Ho qoba tlhahiso e sa lebelloang le e ferekanyang ho babali ba skrine (haholo-holo ha litšoantšo li sebelisoa bakeng sa mokhabiso feela), re li pata ka aria-hidden="true"tšobotsi.
Haeba o sebelisa lets'oao ho fetisa moelelo (ho e-na le hore e be ntho e khabisang feela), etsa bonnete ba hore moelelo ona o fetisetsoa ho mahlale a thusang - mohlala, kenyeletsa litaba tse ling, tse patiloeng le .sr-onlysehlopha.
Haeba o etsa li-control ntle le mongolo o mong (joalo ka <button>aekhone feela), o tlameha ho fana ka litaba tse ling ho tseba sepheo sa taolo, e le hore basebelisi ba litheknoloji tse thusang li tla utloahala. Tabeng ena, o ka eketsa aria-labeltšobotsi ho taolo ka boeona.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Mehlala
Li sebelise ka likonopo, lihlopha tsa likonopo bakeng sa toolbar, navigation, kapa ho kenya liforomo tse reriloeng esale pele.
<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>Letšoao le sebelisitsoeng tlhokomelisong ho fetisa hore ke molaetsa oa phoso, le .sr-onlymongolo o mong ho fetisa leseli lena ho basebelisi ba mahlale a thusang.
Phoso:Kenya aterese ea lengolo-tsoibila e nepahetseng
<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>Litheohelang
Lenane la maemo a feto-fetohang bakeng sa ho hlahisa manane a lihokelo. E entsoe hore e sebelisane le ho theoha ha JavaScript plugin .
Mohlala
Qetella leqhubu la dropdown le menu e theoha ka hare ho .dropdown, kapa ntho e 'ngoe e phatlalatsang position: relative;. Ebe u eketsa HTML ea menu.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Manane a theohang a ka fetoloa hore a hola ho ea holimo (ho e-na le ho ea tlase) ka ho eketsa .dropupmotsoali.
<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>Ho tsamaisana
Ka mokhoa o ikhethileng, lethathamo la li-dropdown le beoa ka bo eona 100% ho tloha holimo le ka lehlakoreng le letšehali la motsoali oa eona. Eketsa .dropdown-menu-rightho a .dropdown-menuho le letona lokisetsa menu e theoha.
E ka hloka maemo a eketsehileng
Li-dropdown li beoa ka bo eona ka CSS ka har'a phallo e tloaelehileng ea tokomane. Sena se bolela hore litheolelo li ka fokotsoa ke batsoali ba nang le overflowthepa e itseng kapa ba hlahella ka ntle ho meeli ea boema-kepe. Rarolla litaba tsena u le mong ha li hlaha.
Tsepamiso .pull-righte tlositsoeng
Ho tloha ka v3.1.0, re .pull-righttlohile lethathamong la litheolelo. Ho hokahanya lethathamo le letona, sebelisa .dropdown-menu-right. Likarolo tsa nav tse tsepameng ka ho le letona ho navbar li sebelisa mofuta oa mixin oa sehlopha sena ho ikamahanya le menu ka bo eona. Ho e hlakola, sebelisa .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Lihlooho
Kenya hlooho ho beha likarolo tsa liketso ho menu efe kapa efe e theolelang.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Searohanyi
Kenya divider ho arola letoto la lihokelo ho menu e theoha.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Lintho tse koetsoeng ho menu
Kenya .disabledho a <li>dropdown ho tima sehokelo.
<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>Lihlopha tsa konopo
Kopanya letoto la likonopo hammoho moleng o le mong le sehlopha sa likonopo. Kenya seea-le-moea sa boikhethelo sa JavaScript le boits'oaro ba li-checkbox ka li-button plugin tsa rona .
Lisebelisoa le li-popover ka lihlopha tsa likonopo li hloka maemo a khethehileng
Ha u sebelisa lisebelisoa kapa li-popovers ho likarolo tse ka hare ho .btn-group, u tla tlameha ho totobatsa khetho ea container: 'body'ho qoba litla-morao tse sa batleheng (joalo ka ntho e ntseng e hola ka bophara le/kapa ho lahleheloa ke likhutlo tse chitja ha sesebelisoa kapa popover e qala).
Netefatsa hore e nepahetse role'me u fane ka leibole
E le hore mahlale a thusang - joalo ka sebali-skrini - ho bontša hore letoto la likonopo li hlophisitsoe, ho roletlameha ho fanoe ka tšobotsi e nepahetseng. Bakeng sa lihlopha tsa likonopo, sena se tla ba role="group", ha lithulusi li lokela ho ba le role="toolbar".
Mokhelo ke lihlopha tse nang le taolo e le 'ngoe feela (mohlala, lihlopha tse nang le li- button tse nang le <button>likarolo) kapa ho theoha.
Ho feta moo, lihlopha le li-toolbar li lokela ho fuoa lengolo le hlakileng, kaha mahlale a mangata a thusang a ke ke a li phatlalatsa, leha ho na le roletšobotsi e nepahetseng. Mehlala e fanoeng mona, re sebelisa aria-label, empa mekhoa e meng e kang e aria-labelledbyka boela ea sebelisoa.
Mohlala oa motheo
Koahela letoto la likonopo ka .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>Konopo ea lisebelisoa
Kopanya lihlopha tsa <div class="btn-group">ho ba a <div class="btn-toolbar">bakeng sa likarolo tse rarahaneng haholoanyane.
<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>Boholo
Sebakeng sa ho sebelisa li-button sizeng litlelase ho konopo e 'ngoe le e' ngoe ka sehlopha, eketsa feela .btn-group-*ho e 'ngoe le e' ngoe .btn-group, ho kenyeletsoa le ha u theha lihlopha tse ngata.
<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>Nesting
Beha a .btn-groupka hare ho e 'ngoe .btn-groupha u batla li-menu tse theohang tse kopantsoeng le letoto la likonopo.
<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>Phapang e emeng
Etsa hore likonopo tse 'maloa li hlahe li theohile ho fapana le tse tšekaletseng. Likonopo tsa ho arohana ha li sebetse mona.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Lihlopha tsa konopo tse lokiselitsoeng
Etsa hore sehlopha sa likonopo se otlolle ka boholo bo lekanang ho pharalla bophara bohle ba motsoali oa sona. E boetse e sebetsa ka ho theoha ha li-buttons ka har'a sehlopha sa konopo.
Ho sebetsana le meeli
Ka lebaka la HTML le CSS e khethehileng e sebelisetsoang ho lokafatsa likonopo (e leng display: table-cell), meeli e pakeng tsa tsona e imena habeli. Lihlopheng tse tloaelehileng tsa likonopo, margin-left: -1pxe sebelisoa ho bokella meeli ho e-na le ho e tlosa. Leha ho le joalo, marginha e sebetse le display: table-cell. Ka lebaka leo, ho ipapisitse le litloaelo tsa hau ho Bootstrap, u ka lakatsa ho tlosa kapa ho kenya mebala bocha meeling.
IE8 le meeli
Internet Explorer 8 ha e fane ka meeli ho likonopo ka har'a sehlopha sa likonopo tse nang le mabaka a utloahalang, ebang ke holim'a <a>kapa <button>likarolo. Ho qoba sena, thatela konopo e 'ngoe ka e 'ngoe .btn-group.
Sheba #12476 bakeng sa lintlha tse ling.
Ka <a>likarolo
Feela thatela letoto la .btns ka .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Lihokelo tse sebetsang joalo ka likonopo
Haeba <a>likarolo li sebelisoa ho sebetsa e le likonopo - ho qala ts'ebetso ea leqephe, ho e-na le ho ea tokomaneng e 'ngoe kapa karolo e ka har'a leqephe la hona joale - li lokela ho fuoa hape e loketseng role="button".
Ka <button>likarolo
Ho sebelisa lihlopha tsa likonopo tse nang le mabaka <button>, u tlameha ho thatela konopo ka 'ngoe ka sehlopha sa likonopo . Li-browser tse ngata ha li sebelise CSS ea rona hantle bakeng sa ho lokafatsa <button>likarolo, empa kaha re ts'ehetsa likonopo tse theohang, re ka sebetsana le seo.
<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>Likonopo tse theohang
Sebelisa konopo efe kapa efe ho qala menu e theoha ka ho e beha ka har'a a .btn-grouple ho fana ka letšoao le nepahetseng la menu.
Ho itšetleha ka plugin
Likonopo tse theohang li hloka hore plugin e theoleloang e kenyellelitsoe mofuta oa hau oa Bootstrap.
Li-dropdown tsa konopo e le 'ngoe
Fetolela konopo hore e be ntho e theohang ka liphetoho tse ling tsa mantlha.
<!-- 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>Li-dropdown tsa konopo ea Arohane
Ka mokhoa o ts'oanang, theha li-dropdown tsa konopo tse arohaneng ka liphetoho tse tšoanang, feela ka konopo e arohaneng.
<!-- 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>Boholo
Likonopo tse theohang li sebetsa ka likonopo tsa boholo bohle.
<!-- 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>Phapang ea ho tlohela
Kenya lenane la litheolelo tse kaholimo ho likarolo ka ho li kenya .dropupho motsoali.
<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>Kena lihlopha
Eketsa taolo ea foromo ka ho kenya mongolo kapa likonopo pele, ka morao, kapa ka mahlakoreng a mabeli a mongolo ofe kapa ofe o thehiloeng ho mongolo <input>. Sebedisa .input-grouple .input-group-addonkapa .input-group-btnho lokisa kapa ho hlomathisa elemente ho e le nngwe .form-control.
Mongolo <input>s feela
Qoba ho sebelisa <select>likarolo mona kaha li ke ke tsa ngoloa ka botlalo ho libatli tsa WebKit.
Qoba ho sebelisa <textarea>likarolo mona kaha rowstšobotsi ea tsona e ke ke ea hlomphuoa maemong a mang.
Lisebelisoa le li-popover lihlopheng tsa ho kenya li hloka maemo a khethehileng
Ha u sebelisa lithulusi kapa li-popovers ho likarolo tse ka hare ho .input-group, u tla tlameha ho hlakisa khetho ea container: 'body'ho qoba litla-morao tse sa batleheng (joalo ka ntho e ntseng e hola ka bophara le/kapa ho lahleheloa ke likhutlo tse chitja ha sesebelisoa kapa popover e qala).
U se ke ua kopanya le likarolo tse ling
Se ke oa kopanya lihlopha tsa liforomo kapa lihlopha tsa kholomo tsa grid ka kotloloho le lihlopha tsa ho kenya. Ho e-na le hoo, beha sehlopha se kenyang ka hare ho sehlopha sa foromo kapa ntho e amanang le grid.
Kenya lileibole kamehla
Babali ba skrine ba tla ba le bothata ka liforomo tsa hau haeba u sa kenyelletse leibole bakeng sa mongolo o mong le o mong. Bakeng sa lihlopha tsena tsa ho kenya letsoho, etsa bonnete ba hore lileibole kapa tšebetso efe kapa efe e eketsehileng e fetisetsoa ho litheknoloji tse thusang.
Mokhoa o nepahetseng o lokelang ho sebelisoa (lintho tse bonahalang <label>, <label>likarolo tse patiloeng ho sebelisoa .sr-onlysehlopha, kapa tšebeliso ea aria-label, aria-labelledby, aria-describedby, titlekapa placeholdertšobotsi) le hore na ke lintlha life tse ling tse tla hloka ho fetisoa li tla fapana ho latela mofuta o nepahetseng oa widget eo u e sebelisang. Mehlala e karolong ena e fana ka mekhoa e 'maloa e khothalelitsoeng, e tobane le maemo a itseng.
Mohlala oa motheo
Kenya tlatsetso e le 'ngoe kapa konopo ka lehlakoreng le leng la kenyeletso. U ka boela ua beha e 'ngoe ka mahlakoreng a mabeli a ho kenya letsoho.
Ha re tšehetse li-add-on tse ngata ( .input-group-addonkapa .input-group-btn) ka lehlakoreng le le leng.
Ha re tšehetse li-control tse ngata ho sehlopha se le seng.
<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>Boholo
Eketsa litlelase tsa boholo ba liforomo ho .input-groupeona 'me litaba tse ka hare li tla fetola boholo ba tsona - ha ho na tlhoko ea ho pheta-pheta litlelase tsa boholo ba taolo nthong ka 'ngoe.
<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>Li-checkbox le li-addons tsa seea-le-moea
Beha lebokose lefe kapa lefe la ho hlahloba kapa seea-le-moea ka har'a addon ea sehlopha se kenyang ho e-na le mongolo.
<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 -->Li-button addons
Likonopo lihlopheng tsa ho kenya li fapane hanyane 'me li hloka sebaka se le seng sa ho haha sehlaha. Sebakeng sa .input-group-addon, o tla hloka ho sebelisa .input-group-btnho phuthela likonopo. Sena se hlokahala ka lebaka la mekhoa ea kamehla ea sebatli e ke keng ea hlakoloa.
<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 -->Likonopo tse nang le li-dropdown
<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 -->Likonopo tse arohaneng
<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>Likonopo tse ngata
Leha o ka ba le tlatsetso e le 'ngoe feela ka lehlakoreng le leng, o ka ba le likonopo tse ngata kahare ho .input-group-btn.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>Navs
Li-Navs tse fumanehang Bootstrap li arolelane markup, ho qala ka sehlopha sa motheo .nav, hammoho le linaha tse arolelanoang. Fapanyetsana litlelase ho fetola setaele se seng le se seng.
Li-tab
Hlokomela hore .nav-tabssehlopha se hloka sehlopha sa .navmotheo.
<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>Lipilisi
Nka HTML e tšoanang, empa sebelisa .nav-pillsho e-na le hoo:
<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>Lipilisi li boetse li theohile stackable. Eketsa feela .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Ho lokafatsoa
Etsa li-tab kapa lipilisi habonolo ka bophara bo lekanang le ba motsoali oa bona skrineng se seholo ho feta 768px ka .nav-justified. Ho li-skrini tse nyane, lihokelo tsa nav li kentsoe.
Lihokelo tsa navbar nav tse lokeloang hajoale ha li sebetse.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Lihokelo tse koetsoeng
Bakeng sa karolo efe kapa efe ea nav (li-tab kapa lipilisi), eketsa .disabledbakeng sa lihokelo tse grey mme ha ho na litlamorao tsa hover .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Ho sebelisa li-dropdowns
Kenya li-menu tse theohang ka HTML e nyane le li- plugins tsa JavaScript .
Li-tab tse nang le li-dropdown
<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>Lipilisi tse nang le marotholi
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>Navbar
Navbar ea kamehla
Navbars ke likarolo tsa meta tse arabelang tse sebetsang e le lihlooho tsa ho sesa bakeng sa ts'ebeliso ea hau kapa sebaka sa hau sa marang-rang. Li qala ho putlama ('me li khona ho feto-fetoha) ho lipono tsa mehala ebe lia tšekalla ha bophara bo teng ba sebaka sa pono bo ntse bo eketseha.
Lihokelo tsa navbar nav tse lokeloang hajoale ha li sebetse.
<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>Setšoantšo sa brand
Tlosa lebitso la navbar ka setšoantšo sa hau ka ho fapanyetsana mongolo bakeng sa <img>. Kaha e .navbar-brandna le padding le bophahamo ba eona, ho ka 'na ha hlokahala hore u tlose CSS e itseng ho itšetlehile ka setšoantšo sa hau.
<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>Mefuta
Beha litaba tsa foromo ka hare .navbar-formbakeng sa tatellano e nepahetseng e otlolohileng le boits'oaro bo sothehileng libakeng tse moqotetsane tsa pono. Sebelisa likhetho tsa litekanyo ho etsa qeto ea hore na e lula hokae ka har'a litaba tsa navbar.
Ha e ntse e tsoela pele, .navbar-forme arolelana boholo ba khoutu ea eona le .form-inlineka mixin. Litaolo tse ling tsa mefuta, joalo ka lihlopha tse kenyang, li ka hloka hore bophara bo sa fetoheng bo bontšoe hantle ka har'a 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>Likonopo
Kenya .navbar-btnsehlopha ho <button>likarolo tse sa luleng ho a <form>ho li beha ka har'a navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Mongolo
Koaela mantsoe ka elemente ka .navbar-text, hangata holim'a <p>theke bakeng sa moeta-pele le mebala e nepahetseng.
<p class="navbar-text">Signed in as Mark Otto</p>Lihokelo tse se nang nav
Bakeng sa batho ba sebelisang lihokelo tse tloaelehileng tse seng ka har'a karolo e tloaelehileng ea navbar navigation, sebelisa .navbar-linksehlopha ho kenya mebala e nepahetseng bakeng sa likhetho tsa navbar tsa kamehla le tse fapaneng.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Ho tsamaisana le karolo
Hlophisa lihokelo tsa nav, liforomo, likonopo, kapa mongolo, u sebelisa .navbar-leftkapa .navbar-rightlitlelase tsa lisebelisoa. Lihlopha tsena ka bobeli li tla eketsa CSS float ka tsela e boletsoeng. Mohlala, ho hokahanya lihokelo tsa nav, li behe ka thoko <ul>ho sehlopha sa lisebelisoa tse sebelisoang.
Lihlopha tsena ke li-mixin-ed versions tsa .pull-leftle .pull-right, empa li fetisetsoa ho lipotso tsa media bakeng sa ho sebetsana ha bonolo le likarolo tsa navbar ho pholletsa le boholo ba lisebelisoa.
E tsitsitseng holimo
Eketsa .navbar-fixed-top'me u kenyelle litaba tsa " .containerkapa" .container-fluidho bohareng le "pad navbar".
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>E tsitsitse ho ea tlase
Eketsa .navbar-fixed-bottom'me u kenyelle litaba tsa " .containerkapa" .container-fluidho bohareng le "pad navbar".
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>E tsitsitseng holimo
Theha navbar e bophara bo felletseng e tsamaellanang le leqephe ka ho eketsa .navbar-static-tople ho kenyelletsa a .containerkapa .container-fluidho ea bohareng le litaba tsa pad navbar.
Ho fapana le .navbar-fixed-*litlelase, ha ho hlokahale hore u fetole padding efe kapa efe ho body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Navbar e sothehileng
Fetola chebahalo ea navbar ka ho eketsa .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Li-breadcrumbs
Hlahisa sebaka sa leqephe la hajoale ka har'a sehlopha sa maemo a marang-rang.
Li arola li kenyelletsoa ka bo eona ho CSS ka :beforele content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Pagination
Fana ka lihokelo tsa pagination bakeng sa sebaka sa hau sa marang-rang kapa sesebelisoa ka karolo ea maqephe a mangata ea pagination, kapa mokhoa o bonolo oa li- pager .
Pagination ea kamehla
Papali e bonolo e bululetsoeng ke Rdio, e ntle bakeng sa lits'ebetso le liphetho tsa lipatlisiso. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.
<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>Ho ngola karolo ea bohetene
Karolo ea pagination e lokela ho phutheloa ka <nav>ntho e itseng ho e tsebahatsa e le karolo ea navigation ho libali tsa skrine le mahlale a mang a thusang. Ho feta moo, kaha leqephe le ka 'na la e-ba le likarolo tse fetang tse le 'ngoe tsa ho sesa (tse kang mokhoa oa mantlha oa ho tsamaisa hloohong, kapa ho navigation ea mahlakoreng), ho bohlokoa ho fana ka tlhaloso aria-labelea <nav>sepheo sa eona. Mohlala, haeba karolo ea pagination e sebelisoa ho bona lipakeng tsa sephetho sa lipatlisiso, leibole e nepahetseng e ka ba aria-label="Search results pages".
Libaka tse holofetseng le tse sebetsang
Lihokelo li ka khonahala bakeng sa maemo a fapaneng. Sebelisa .disabledbakeng sa lihokelo tse sa tolokong le .activeho supa leqephe la hajoale.
<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>Re khothaletsa hore o fetole liankora tse sebetsang kapa tse koetsoeng bakeng sa <span>, kapa o tlohele ankora molemong oa metsu e fetileng/e latelang, ho tlosa tšebetso ea ho tobetsa ha o ntse o boloka mekhoa e reriloeng.
<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>Boholo
U batla ho etsa pagination e kholoanyane kapa e nyane? Eketsa .pagination-lgkapa .pagination-smbakeng sa boholo bo eketsehileng.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>Pager
Lihokelo tsa pejana le tse latelang bakeng sa ts'ebetso e bonolo ea bohetene ka li-markup tse bobebe le mekhoa. E ntle bakeng sa libaka tse bonolo joalo ka li-blog kapa limakasine.
Mohlala oa kamehla
Ka ho sa feleng, li-pager centers li hokahanya.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Lihokelo tse tsamaellanang
Ntle le moo, o ka hokahanya sehokelo se seng le se seng mahlakoreng:
<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>Boemo ba ho holofala ha boikhethelo
Lihokelo tsa li-Pager li boetse li sebelisa sehlopha sa .disabledlisebelisoa tse akaretsang ho tloha boheteneng.
<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>Labels
Mohlala
Sehlooho sa mohlala se Ncha
Sehlooho sa mohlala se Ncha
Sehlooho sa mohlala se Ncha
Sehlooho sa mohlala se Ncha
Sehlooho sa mohlala se Ncha
Sehlooho sa mohlala se Ncha
<h3>Example heading <span class="label label-default">New</span></h3>Liphetoho tse fumanehang
Kenya litlelase life kapa life tsa tse boletsoeng ka tlase ho fetola chebahalo ea leibole.
Temoso ea
Mathomo a
Katleho
Info
Temoso
ea Kotsi
<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>O na le lithane tsa lileibole?
Mathata a ho fana a ka hlaha ha o na le lileibole tse ngata ka har'a sets'oants'o se moqotetsane, e 'ngoe le e 'ngoe e na le inline-blockntho ea eona (joaloka letšoao). Tsela ea ho pota-pota sena ke ho beha display: inline-block;. Bakeng sa moelelo le mohlala, bona #13219 .
Libeche
Totobatsa lintho tse ncha kapa tse sa baloang habonolo ka ho kenyelletsa <span class="badge">lihokelo, li-navs tsa Bootstrap, le tse ling.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Boiketsi ba ho putlama
:emptyHa ho se na lintho tse ncha kapa tse sa baloang, libeche li tla putlama feela (ho latela khetho ea CSS ) ha feela ho se na litaba tse teng ka hare.
Khokahano ea sebatli
Libeche li ke ke tsa itahlela ho Internet Explorer 8 hobane ha li na tšehetso bakeng sa :emptymokhethoa.
E ikamahanya le maemo a nav a sebetsang
Mefuta e ahiloeng e kenyellelitsoe bakeng sa ho beha libeche libakeng tse sebetsang litsamaisong tsa lipilisi.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Jumbotron
Karolo e bobebe, e tenyetsehang e ka eketsang sebaka sa pono sa sebaka sa hau sa marang-rang ho hlahisa litaba tsa bohlokoa sebakeng sa hau sa marang-rang.
Lefatše Lumela!
Ena ke yuniti e bonolo ea mohale, karolo e bonolo ea mokhoa oa jumbotron bakeng sa ho lebisa tlhokomelo e eketsehileng ho litaba tse hlahang kapa lintlha.
<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>Ho etsa hore jumbotron e be bophara bo felletseng, 'me e se na likhutlo tse chitja, e behe ka ntle ho tsohle .containermme ho e-na le hoo eketsa ka .containerhare.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Sehlooho sa leqephe
Khetla e bonolo bakeng sa h1ho beha sebaka ka nepo le ho arola likarolo tsa litaba leqepheng. E ka sebelisa sesebelisoah1 's ea kamehla smallelement, hammoho le likarolo tse ling tse ngata (ka mekhoa e meng).
Sehlooho sa leqephe la mohlala Subtext bakeng sa hlooho
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Litšoantšo tse nyane
Eketsa Bootstrap's sistimi ea grid ea Bootstrap ka karolo ea li-thumbnail ho bonts'a marang-rang a litšoantšo, livideo, mongolo le tse ling habonolo.
Haeba u batla pontšo e kang ea Pinterest ea li-thumbnail tsa bolelele bo fapaneng le/kapa bophara, u tla hloka ho sebelisa plugin ea motho oa boraro joalo ka Masonry , Isotope , kapa Salvattore .
Mohlala oa kamehla
Ka nako e sa lekanyetsoang, linepe tsa Bootstrap li etselitsoe ho bonts'a litšoantšo tse hokahaneng tse nang le matšoao a fokolang a hlokahalang.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Litaba tse ikhethileng
Ka li-markup tse ling, hoa khoneha ho kenya mofuta ofe kapa ofe oa litaba tsa HTML joalo ka lihlooho, lirapa, kapa likonopo ho li-thumbnails.
<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>Litlhokomeliso
Fana ka melaetsa ea maikutlo bakeng sa liketso tse tloaelehileng tsa basebelisi ka melaetsa e seng mekae e fumanehang le e bonolo.
Mehlala
Qetella mongolo ofe kapa ofe le konopo ea boikhethelo ea ho qhala ka har'a e .alert'ngoe ea litlelase tse nne tsa maemo (mohlala, .alert-success) bakeng sa melaetsa ea tlhokomeliso ea mantlha.
Ha ho sehlopha sa kamehla
Litlhokomeliso ha li na litlelase tsa kamehla, ke litlelase tsa motheo feela le tsa ho fetola. Tlhokomeliso ea kamehla ea bohlooho ha e na moelelo o mongata, kahoo o tlameha ho hlakisa mofuta ka maemo a maemo. Khetha ho katleho, leseli, temoso, kapa kotsi.
Mosebetsi o motle! U atlehile ho bala molaetsa ona oa bohlokoa oa tlhokomeliso.
Hlokomela! Tlhokomeliso ena e hloka tlhokomelo ea hau, empa ha e bohlokoa haholo.
Tlhokomeliso! Ho molemo hore u itlhahlobe, ha u shebahale hantle haholo.
Oho hang! Fetola lintho tse 'maloa 'me u leke ho romella hape.
<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>Litlhokomeliso tse ka tlosoang
Iketsetse tlhokomeliso efe kapa efe ka ho kenya .alert-dismissiblekonopo ea boikhethelo le ho koala.
E hloka plugin ea temoso ea JavaScript
Bakeng sa litemoso tse sebetsang ka botlalo, tse ka lelekoang, o tlameha ho sebelisa plugin ea JavaScript .
Tlhokomeliso! Ho molemo hore u itlhahlobe, ha u shebahale hantle haholo.
<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>Netefatsa boitšoaro bo nepahetseng ho lisebelisoa tsohle
Netefatsa hore o sebelisa <button>element e nang le data-dismiss="alert"tšobotsi ea data.
Lihokelo tsa litlhokomeliso
Sebelisa sehlopha sa .alert-linklisebelisoa ho fana ka lihokelo tsa mebala tse nyallanang ka har'a tlhokomeliso efe kapa efe.
Mosebetsi o motle! U atlehile ho bala
molaetsa ona oa bohlokoa oa tlhokomeliso .
Hlokomela! Tlhokomeliso ena
e hloka tlhokomelo ea hau , empa ha e bohlokoa haholo.
Tlhokomeliso! Ho molemo hore u itlhahlobe, ha u
shebahale hantle haholo .
Oho hang!
Fetola lintho tse 'maloa ' me u leke ho romella hape.
<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>Libaka tsa tsoelo-pele
Fana ka maikutlo a morao-rao mabapi le tsoelo-pele ea mosebetsi kapa ketso ka mekhoa e bonolo empa e feto-fetoha ea tsoelo-pele.
Khokahano ea sebatli
Li-bars tsa tsoelo-pele li sebelisa liphetoho le li-animation tsa CSS3 ho finyella tse ling tsa liphello tsa tsona. Likarolo tsena ha li tšehetsoe ho Internet Explorer 9 le mefuta e ka tlase kapa ea khale ea Firefox. Opera 12 ha e tšehetse lipopae.
Tšebelisano ea Leano la Tšireletso ea Likahare (CSP).
Haeba sebaka sa hau sa Marang-rang se na le Leano la Ts'ireletso ea Likahare (CSP) e sa u lumelleng style-src 'unsafe-inline', joale u ke ke ua khona ho sebelisa stylelitšoaneleho tse ka har'a marang-rang ho beha bophara ba bar ea tsoelo-pele joalo ka ha ho bonts'itsoe mehlaleng ea rona e ka tlase. Mekhoa e meng ea ho beha bophara bo lumellanang le CSP e thata e kenyelletsa ho sebelisa JavaScript e tloaelehileng (e behang element.style.width) kapa ho sebelisa lihlopha tsa CSS tse tloaelehileng.
Mohlala oa motheo
Sebaka sa kamehla sa tsoelo-pele.
<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>Ka label
Tlosa <span>le .sr-onlysehlopha ho tsoa ka har'a sebaka sa tsoelo-pele ho bontša peresente e bonahalang.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Ho etsa bonnete ba hore mongolo oa leibole o lula o balehe le liperesente tse tlase, nahana ka ho kenya a min-widthbareng ea tsoelopele.
<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>Mekhoa e meng ea maemo
Libaka tsa tsoelo-pele li sebelisa likonopo tse tšoanang le lihlopha tsa tlhokomeliso bakeng sa mekhoa e tsitsitseng.
<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>E methalo
E sebelisa gradient ho theha sephetho sa melato. Ha e fumanehe ho IE9 le ka tlase.
<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>Animated
Eketsa .activeho .progress-bar-stripedho phelisa melato ka ho le letona ho ea ho le letšehali. Ha e fumanehe ho IE9 le ka tlase.
<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>E phuthetsoe
Beha li-bar tse ngata ka ho lekana .progressho li beha.
<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>Ntho ea media
Mefuta e sa bonahaleng ea lintho bakeng sa ho aha mefuta e fapaneng ea likarolo (joalo ka maikutlo a blog, li-Tweets, joalo-joalo) tse nang le sets'oants'o se leqeleng kapa le letona le litaba tsa mongolo.
Mecha ea litaba ea kamehla
Mecha ea litaba ea kamehla e bonts'a ntho ea media (litšoantšo, video, audio) ka letsohong le letšehali kapa le letona la block ea litaba.
Sehlooho sa litaba
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Sehlooho sa litaba
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Sehloho sa media se fumanehang
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Sehlooho sa litaba
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sehlooho sa litaba
Cras sit amet nibh libero, in gravida nulla. 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>Litlelase .pull-leftle .pull-righttsona li teng 'me li ne li sebelisoa pele e le karolo ea karolo ea mecha ea litaba, empa li tlositsoe bakeng sa ts'ebeliso eo joalo ka v3.3.0. Li batla li lekana le .media-leftle .media-right, ntle le hore .media-rightli lokela ho behoa ka morao .media-bodyho html.
Ho tsamaisana le mecha ea litaba
Litšoantšo kapa mecha ea phatlalatso e ka amahanngoa holimo, bohareng kapa tlase. Ea kamehla e tsepamisitsoe holimo.
Mecha ea litaba e tsamaellanang ka holimo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Etsa sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mecha ea litaba e tsamaellanang bohareng
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Etsa sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mecha ea litaba e tsamaellanang ka tlase
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Etsa sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>Lenane la mecha ea litaba
Ka li-markup tse eketsehileng, u ka sebelisa mecha ea litaba ka har'a lethathamo (e molemo bakeng sa likhoele tsa maikutlo kapa lethathamo la lingoliloeng).
-
Sehlooho sa litaba
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sehloho sa media se fumanehang
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sehloho sa media se fumanehang
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sehloho sa media se fumanehang
Cras sit amet nibh libero, in gravida nulla. 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>Sehlopha sa lenane
Lihlopha tsa manane ke karolo e feto-fetohang le e matla bakeng sa ho bonts'a eseng feela manane a bonolo a likarolo, empa a rarahaneng a nang le litaba tsa moetlo.
Mohlala oa motheo
Sehlopha sa lenane la motheo ke lenane le sa reroang le nang le lethathamo la lintho, le lihlopha tse nepahetseng. Iketsetse holim'a eona ka likhetho tse latelang, kapa CSS ea hau ha ho hlokahala.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo ris
- Porta ac consectetur ac
- Vestibulum le 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>Libeche
Kenya libeche nthong efe kapa efe ea sehlopha 'me e tla beoa ka ho le letona ka ho iketsa.
- 14Cras justo odio
- 2Dapibus ac facilisis in
- 1Morbi leo ris
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Lintho tse hokahaneng
Kopanya lintho tsa sehlopha ka ho sebelisa li-tag tsa ankora ho e-na le lethathamo la lintho (seo se bolela hore motsoali <div>sebakeng sa <ul>). Ha ho na tlhoko ea batsoali ka bomong ho potoloha ntho e ngoe le e ngoe.
<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>Lintho tsa konopo
Lenane la lintho tsa sehlopha e ka 'na ea e-ba likonopo ho e-na le lethathamo la lintho (seo se bolela motsoali <div>ho e-na le <ul>). Ha ho na tlhoko ea batsoali ka bomong ho potoloha ntho e ngoe le e ngoe. Se ke oa sebelisa .btnlitlelase tse tloaelehileng mona.
<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>Lintho tse holofetseng
Eketsa .disabledho a .list-group-itemho e grey ho bonahala e holofetse.
<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>Lihlopha tsa maemo
Sebelisa litlelase tsa maemo ho etsa lethathamo la lintho, tsa kamehla kapa tse hokahaneng. E boetse e kenyelletsa .activenaha.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum le 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>Litaba tse ikhethileng
Kenya hoo e batlang e le HTML efe kapa efe ka hare, esita le bakeng sa lihlopha tsa lenane tse hokahaneng joalo ka e ka tlase.
Etsa lethathamo la lihlooho tsa sehlopha
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Etsa lethathamo la lihlooho tsa sehlopha
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Etsa lethathamo la lihlooho tsa sehlopha
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Liphanele
Leha ho sa hlokahale kamehla, ka linako tse ling o hloka ho kenya DOM ea hau ka lebokoseng. Bakeng sa maemo ao, leka karolo ea phanele.
Mohlala oa motheo
Ka nako e sa lekanyetsoang, tsohle tse .paneletsoang li sebelisa moeli oa motheo le padding ho ba le litaba tse ling.
Mohlala oa phanele oa mantlha
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Phanele e nang le sehlooho
Kenya sets'oants'o sa sehlooho habonolo phanele ea hau ka .panel-heading. U ka kenyelletsa leha e le efe <h1>- <h6>ka .panel-titlesehlopha ho eketsa sehlooho se seng se ngotsoe. Leha ho le joalo, boholo ba litlhaku tsa <h1>- <h6>bo fetisoa ke .panel-heading.
Bakeng sa mebala e nepahetseng ea lihokelo, etsa bonnete ba hore u beha likhokahano lihloohong tse ka hare ho .panel-title.
Sehlooho sa phanele ntle le sehlooho
Likahare tsa phanele
Sehlooho sa phanele
Likahare tsa phanele
<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>Phanele e nang le botlase
Koaela likonopo kapa mongolo oa bobeli ka .panel-footer. Hlokomela hore botlaaseng ba liphanele ha bo rue mebala le meeli ha ho sebelisoa liphapang tsa maemo kaha li sa rereloa ho ba ka pele.
Likahare tsa phanele
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Mekhoa e meng ea maemo
Joalo ka likarolo tse ling, etsa hore phanele e be le moelelo haholoanyane moelelong o itseng ka ho kenyelletsa maemo afe kapa afe a maemo.
Sehlooho sa phanele
Likahare tsa phanele
Sehlooho sa phanele
Likahare tsa phanele
Sehlooho sa phanele
Likahare tsa phanele
Sehlooho sa phanele
Likahare tsa phanele
Sehlooho sa phanele
Likahare tsa phanele
<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>Ka litafole
Kenya leha e le efe e se nang moeli .tableka har'a phanele bakeng sa moralo o tsitsitseng. Haeba ho na le .panel-body, re eketsa moeli o eketsehileng ka holim'a tafole bakeng sa karohano.
Sehlooho sa phanele
Litaba tse ling tsa liphanele tsa kamehla mona. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | Lebitso la pele | Fane | Username |
|---|---|---|---|
| 1 | Tšoaea | Otto | @mdo |
| 2 | Jakobo | Thornton | @mafura |
| 3 | Larry | Nonyana |
<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>Haeba ho se na sehlopha sa phanele, karolo e tloha hloohong ho ea tafoleng ntle le tšitiso.
Sehlooho sa phanele
| # | Lebitso la pele | Fane | Username |
|---|---|---|---|
| 1 | Tšoaea | Otto | @mdo |
| 2 | Jakobo | Thornton | @mafura |
| 3 | Larry | Nonyana |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Ka lihlopha tsa lenane
Kenyelletsa lihlopha tsa lenane ka bophara ka botlalo ka har'a phanele efe kapa efe.
Sehlooho sa phanele
Litaba tse ling tsa liphanele tsa kamehla mona. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo ris
- Porta ac consectetur ac
- Vestibulum le 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>Kenyelletso e arabelang
Lumella libatli ho tseba boholo ba video kapa li-slideshow ho ipapisitse le bophara ba boloko ba tsona ka ho theha karo-karolelano e tla lekana hantle sesebelisoa sefe kapa sefe.
Melao e sebelisoa ka ho toba ho <iframe>, <embed>, <video>, le <object>likarolo; ka boikhethelo sebelisa sehlopha sa litloholo tse hlakileng .embed-responsive-itemha u batla ho bapisa setaele bakeng sa litšobotsi tse ling.
Pro-Tip! Ha ho hlokahale hore u kenyelle frameborder="0"ho s ea hau <iframe>ha re ntse re u hanela.
<!-- 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>Liliba
Default hantle
Sebelisa seliba e le phello e bonolo holim'a element ho e fa phello ea inset.
Bona, ke ka sedibeng!
<div class="well">...</div>Lihlopha tsa boikhethelo
Laola padding le likhutlo tse chitja ka lihlopha tse peli tseo u ka li khethang tsa ho fetola.
Bona, ke ka selibeng se seholo!
<div class="well well-lg">...</div>
Bona, ke ka sedibeng se senyane!
<div class="well well-sm">...</div>