Dagiti paset
Nasurok a dosena a mausar manen a paset a naibangon tapno mangipaay kadagiti ikonograpia, dropdown, grupo ti input, nabigasion, alerto, ken adu pay.
Dagiti Glyphicon
Dagiti magun-odan a gliph
Iramanna ti nasurok a 250 a glyph iti pormat ti letra manipud iti Glyphicon Halflings set. Dagiti Glyphicons Dagiti Halfling ket gagangay a saan a magun-od a libre, ngem ti namarsua kadagitoy ket pinagbalinna dagitoy a magun-od para iti Bootstrap a libre. Kas panagyaman, kiddawenmi laeng nga iramanmo ti silpo nga agsubli iti Glyphicons no mabalin.
- glyphicon glipikon-asterisko
- glyphicon nga glyphicon-plus
- glyphicon nga glipikon-euro
- glyphicon nga glipiko-eur
- glyphicon glipikon-minus
- glyphicon glyphicon-ulep nga ulep
- glyphicon glyphicon-sobre nga
- glyphicon glyphicon-lapis nga
- glyphicon glyphicon-sarming nga
- glyphicon glyphicon-musika
- glyphicon glyphicon-panagbiruk
- glyphicon glyphicon-puso
- glyphicon glyphicon-bituen
- glyphicon glyphicon-bituen-empty
- glyphicon glyphicon-nga agus-usar
- glyphicon glyphicon-pelikula nga
- glyphicon glyphicon-maika-dakkel
- glyphicon glyphicon-th nga
- glyphicon glyphicon-maika-a-lista
- glyphicon nga glyphicon-ok
- glyphicon glyphicon-ikkaten
- glyphicon glyphicon-a-panag-zoom
- glyphicon glyphicon-a-panag-zoom
- glyphicon glyphicon-a-naiddep
- glyphicon glipikon-senyales
- glyphicon nga glyphicon-cog
- glyphicon glyphicon-basura
- glyphicon glyphicon-pagtaengan
- glyphicon glyphicon-a papeles
- glyphicon glyphicon-panawen
- glyphicon glyphicon-dalan
- glyphicon glyphicon-i-download-alt
- glyphicon glyphicon-i-download
- glyphicon glyphicon-ag-upload
- glyphicon glyphicon-inbox nga i-inbox
- glyphicon glyphicon-agay-ayam-a-sirkulo
- glyphicon glyphicon-uliten
- glyphicon glyphicon-agpabaro
- glyphicon glyphicon-listaan-alt
- glyphicon glipikon-kandado
- glyphicon glyphicon-bandiera
- glyphicon dagiti glyphicon-headphone
- glyphicon glyphicon-tomo-a-naiddep
- glyphicon glyphicon-tomo-nga-agpababa
- glyphicon glyphicon-ti-tomo nga agpangato
- glyphicon nga glyphicon-qrcode nga
- glyphicon glyphicon-barkodi ti barko
- glyphicon glipikon-ti-tag
- glyphicon dagiti glyphicon-dagiti etiketa
- glyphicon glyphicon-libro
- glyphicon glyphicon-marka ti libro
- glyphicon glyphicon-a-imprenta
- glyphicon glyphicon-kamera
- glyphicon glyphicon-a-letra ti letra
- glyphicon glyphicon-natangken
- glyphicon glyphicon-italiko nga
- glyphicon glyphicon-teksto-kangato
- glyphicon glyphicon-teksto-ti-kalawa
- glyphicon glyphicon-agtunos-kannigid
- glyphicon glyphicon-agtunos-a-tengnga
- glyphicon glyphicon-agtunos-kannigid
- glyphicon glyphicon-i-align-a mangikalintegan
- glyphicon glyphicon-lista nga
- glyphicon glyphicon-indent-kannigid
- glyphicon glyphicon-indent-kannigid
- glyphicon glyphicon-rupa-panawen-video
- glyphicon glyphicon-ladawan
- glyphicon glyphicon-mapa-a-marka
- glyphicon glyphicon-ibagay
- glyphicon glyphicon-tint nga glipiko
- glyphicon glyphicon-urnosen
- glyphicon glyphicon-ibingay
- glyphicon glyphicon-pagsukimat
- glyphicon glyphicon-aggaraw
- glyphicon glyphicon-addang-nga agpaatras
- glyphicon glyphicon-napartak-nga agpaatras
- glyphicon glyphicon-aglikud
- glyphicon glyphicon-agay-ayam
- glyphicon glyphicon-agsardeng
- glyphicon glyphicon-panagsardeng
- glyphicon glyphicon-agpasango
- glyphicon glyphicon-napartak-nga-agpasango
- glyphicon glyphicon-addang-nga-agpasango
- glyphicon glyphicon-iparuar
- glyphicon glyphicon-chevron-kannigid
- glyphicon glyphicon-chevron-kannigid
- glyphicon glyphicon-plus-a-pagilasinan
- glyphicon glyphicon-minus-a-pagilasinan
- glyphicon glyphicon-ikkaten-a-pagilasinan
- glyphicon glyphicon-ok-a-pagilasinan
- glyphicon glyphicon-pagsaludsodan-a-pagilasinan
- glyphicon glyphicon-info-a-pagilasinan
- glyphicon glyphicon-a ladawan ti iskrin
- glyphicon glyphicon-ikkaten-ti-sirkulo
- glyphicon glyphicon-ok-a sirkulo
- glyphicon glyphicon-ban-a sirkulo
- glyphicon glyphicon-pana-kannigid
- glyphicon glyphicon-pana-kannawan
- glyphicon glyphicon-pana-nga-nga-ngato
- glyphicon glyphicon-pana-nga-pababa
- glyphicon glyphicon-bingay-alt
- glyphicon glyphicon-baliwan ti kadakkel-napno
- glyphicon glyphicon-baliwan ti kadakkel-bassit
- glyphicon glyphicon-pagilasinan-ti-exclamation
- glyphicon glyphicon-regalo
- glyphicon glyphicon-bulong ti glipikon
- glyphicon glyphicon-apuy nga apuy
- glyphicon glyphicon-silulukat ti mata
- glyphicon glyphicon-mata-a-asideg
- glyphicon glyphicon-pakdaar-a-pagilasinan
- glyphicon glyphicon-a-plano
- glyphicon glyphicon-kalendario
- glyphicon glyphicon-naisangayan
- glyphicon glyphicon-komento
- glyphicon glipikon-imán
- glipikon glipikon-chevron-nga-nga-ngato
- glyphicon glyphicon-chevron-nga agpababa
- glyphicon glyphicon-ag-retweet
- glyphicon glyphicon-kariton ti panaggatang
- glyphicon glyphicon-ti-folder-a-serraan
- glyphicon glyphicon-a-luktan ti folder
- glyphicon glyphicon-baliwan ti kadakkel-a-bertikal
- glyphicon glyphicon-baliwan ti kadakkel-paisaad
- glyphicon nga glipiko-hdd
- glipikon glipikon-bullhorn nga glipiko
- glyphicon glipikon-kampana
- glyphicon glyphicon-sertipiko
- glyphicon glyphicon-a-dama nga agpangato
- glyphicon glyphicon-a-dama nga agpababa
- glyphicon glyphicon-ima-kannawan
- glyphicon glyphicon-ima-kannigid
- glyphicon glyphicon-nga-ima nga agpangato
- glyphicon glyphicon-ima-nga-agpababa
- glyphicon glyphicon-sirkulo-pana-kannawan
- glyphicon glyphicon-sirkulo-pana-kannigid
- glyphicon glyphicon-sirkulo-pana-nga-nga-ngato
- glyphicon glyphicon-sirkulo-pana-nga-agpababa
- glyphicon glyphicon-globo nga glipiko
- glyphicon glyphicon-nga-lave nga
- glyphicon glyphicon-dagiti trabaho
- glyphicon glyphicon-a pagsala
- glyphicon glyphicon-malettina
- glyphicon glyphicon-naan-anay nga iskrin
- glyphicon nga glyphicon-dashboard
- glyphicon glyphicon-paper nga clip
- glyphicon glyphicon-puso-empty
- glyphicon glyphicon-a-silpo
- glyphicon glyphicon-telepono
- glipikon glipikon-pushpin
- glyphicon nga glyphicon-usd
- glipikon glipikon-gbp
- glipikon glyphicon-sort
- glyphicon glyphicon-urnosen-babaen-iti-alpabeto
- glyphicon glyphicon-urnosen-babaen-ti-alpabeto-alt
- glyphicon glyphicon-urnosen-babaen-ti-urnos
- glyphicon glyphicon-urnosen-babaen-ti-urnos-alt
- glyphicon glyphicon-urnosen-babaen-dagiti-attribute
- glyphicon glyphicon-urnosen-babaen-dagiti-attribute-alt
- glyphicon glyphicon-saan a nasukimaten
- glyphicon glyphicon-pagpalawa
- glyphicon glyphicon-ag-collapse-nga agpababa
- glyphicon glyphicon-panag-collapse-nga-agpangato
- glyphicon glyphicon-a-naglog-in
- glyphicon glyphicon-a-panag-flash
- glyphicon glyphicon-ag-log-out
- glyphicon glyphicon-baro-a-bintana
- glyphicon glyphicon-a rekord
- glyphicon glyphicon-i-save nga i-save
- glyphicon glyphicon-luktan
- glyphicon glyphicon-naisalakan
- glyphicon glyphicon-i-import nga ag-import
- glyphicon glyphicon-i-eksport
- glyphicon glyphicon-ipatulod
- glyphicon glyphicon-a-floppy-a-disk
- glyphicon glyphicon-naisalakan ti floppy
- glyphicon glyphicon-floppy-nga ikkaten
- glyphicon glyphicon-floppy-ag-save
- glyphicon glyphicon-floppy-a-luktan
- glyphicon glyphicon-kard ti pautang
- glyphicon glyphicon-panag-transfer
- glyphicon glyphicon-kubiertos nga mga kubiertos
- glyphicon glyphicon-ulo nga ulo
- glyphicon glyphicon-naikompresion
- glyphicon glyphicon-earphone nga ag-earphone
- glyphicon glyphicon-telepono-alt
- glyphicon glyphicon-torre nga glipiko
- glyphicon dagiti glipikon-estadistika
- glyphicon nga glipiko-sd-video
- glyphicon nga glipiko-hd-video
- glyphicon glyphicon-dagiti subtitulo
- glyphicon glyphicon-uni-estereo
- glyphicon glyphicon-uni-dolby nga uni
- glyphicon glyphicon-uni-5-1
- glyphicon glyphicon-uni-6-1
- glyphicon glyphicon-uni-7-1
- glyphicon glyphicon-marka ti karbengan ti kopia
- glyphicon glyphicon-marka ti panagrehistro
- glyphicon glyphicon-ulep-nga-i-download
- glyphicon glyphicon-ulep-a-pannakaikarga
- glyphicon glyphicon-kayo-konifer
- glyphicon glyphicon-kayo-a-agregreg ti bulong
- glyphicon nga glyphicon-cd
- glyphicon glyphicon-ag-save-a-file
- glyphicon glyphicon-luktan-a-file
- glyphicon glyphicon-nga-lebel-nga-nga-ngato
- glyphicon glyphicon-kopia
- glyphicon glyphicon-pasta nga i-paste
- glyphicon glyphicon-alerto
- glyphicon glyphicon-panagpapada
- glyphicon glyphicon-ari nga ari
- glyphicon glipikon-reyna
- glyphicon glyphicon-pay nga
- glyphicon glyphicon-obispo nga ag-obispo
- glyphicon glyphicon-kabalyero
- glyphicon glyphicon-pormula-ti-maladaga
- glyphicon glipikon-tolda
- glyphicon glyphicon-pisarra nga nangisit
- glyphicon glyphicon-kama nga
- glyphicon glyphicon-mansanas
- glyphicon glipikon-bura
- glyphicon glyphicon-relo nga oras
- glyphicon glyphicon-lampara nga mga lampara
- glyphicon glipikon-duplikado
- glyphicon glyphicon-alkansia nga alkansia
- glyphicon dagiti glyphicon-gunting
- glyphicon nga glipiko-bitcoin
- glyphicon nga glyphicon-btc
- glyphicon nga glipiko-xbt
- glyphicon nga glipikon-yen
- glyphicon nga glipiko-jpy
- glyphicon glyphicon-ruble nga glipiko
- glyphicon glyphicon-agkuskusen
- glyphicon glipikon-timbangan
- glipikon glyphicon-yelo-lolly
- glyphicon glyphicon-yelo-lolly-naramanan
- glyphicon glyphicon-edukasion
- glyphicon glyphicon-pagpilian-a-paidasig
- glyphicon glyphicon-pagpilian-a bertikal
- glyphicon glyphicon-menu-hamburger nga glipiko
- glyphicon glyphicon-modal-a-bintana
- glyphicon glipikon-lana nga
- glyphicon glyphicon-bukel nga
- glyphicon glyphicon-nga anteohos ti init
- glyphicon glyphicon-kadakkel-ti-teksto
- glyphicon glyphicon-teksto-a-kolor
- glyphicon glyphicon-teksto-ti-likud
- glyphicon glyphicon-banag-agtunos-nga-ngato
- glyphicon glyphicon-banag-agtunos-iti-baba
- glyphicon glyphicon-banag-a-agtunos-a-paidasig
- glyphicon glyphicon-banag-agtunos-kannigid
- glyphicon glyphicon-banag-agtunos-bertikal
- glyphicon glyphicon-banag-agtunos-kannawan
- glyphicon glyphicon-trianggulo-kannawan
- glyphicon glyphicon-trianggulo-kannigid
- glyphicon glyphicon-trianggulo-baba
- glyphicon glyphicon-trianggulo-ngato
- glyphicon glyphicon-konsola nga
- glyphicon glyphicon-superskrito
- glyphicon glyphicon-suskrito
- glyphicon glyphicon-menu-kannigid
- glyphicon glyphicon-menu-kannawan
- glyphicon glyphicon-menu-nga-agpababa
- glyphicon glyphicon-menu-nga-nga-ngato
No kasano nga usaren
Para kadagiti rason ti panagaramid, amin dagiti ikono ket agkasapulan ti batayan a klase ken indibidual a klase ti ikono. Tapno mausar, ikabilmo ti sumaganad a kodigo iti dandani sadinoman. Siguraduenyo a mangibati iti espasio iti nagbaetan ti icon ken teksto para iti umiso a padding.
Dika ilaok kadagiti dadduma a paset
Dagiti klase ti ikono ket saan a mabalin a direkta a maitipon kadagiti sabali a paset. Saanda koma nga usaren agraman dagiti dadduma a klase iti isu met laeng nga elemento. Imbes ketdi, manginayon ti maysa a nested <span>ken iyaplikar dagiti klase ti ikono iti <span>.
Para laeng iti panagusar kadagiti awan kargana nga elemento
Dagiti klase ti ikono ket rumbeng laeng a mausar kadagiti elemento nga awan ti linaon ti teksto ken awan dagiti anak nga elemento.
Panangbalbaliw iti lokasion ti icon font
Ipagarup ti Bootstrap a dagiti papeles ti letra ti ikono ket mabirukanto iti ../fonts/direktorio, a relatibo kadagiti naurnong a papeles ti CSS. Ti panangyakar wenno panangbalbaliw iti nagan kadagita a font file kaipapananna ti panangpabaro iti CSS iti maysa kadagiti tallo a wagas:
- Baliwan dagiti
@icon-font-pathken/wenno@icon-font-namedagiti variable kadagiti taudan a Basbassit a papeles. - Usaren ti relatibo nga URL a pagpilian nga inted babaen ti Less compiler.
- Baliwan dagiti
url()dalan iti naurnong a CSS.
Usaren ti aniaman a pagpilian a kasayaatan a maibagay iti espesipiko a panagisaadmo iti panagdur-as.
Dagiti madanon nga ikono
Dagiti moderno a bersion dagiti makatulong a teknolohia ket mangipakaammo ti linaon a pinataud ti CSS, ken dagiti pay espesipiko a karakter ti Unicode. Tapno maliklikan ti di nairanta ken makariro a panagruar kadagiti screen reader (nangruna no dagiti ikono ket maus-usar a puro para iti dekorasion), ilemmengmi dagitoy babaen ti aria-hidden="true"attribute.
No agus-usar ka ti maysa nga ikono tapno mangipakaammo ti kaipapanan (imbes laeng a kas maysa nga elemento ti dekorasion), siguraduem a daytoy a kaipapanan ket maidanon pay kadagiti makatulong a teknolohia – kas pagarigan, iraman ti kanayonan a linaon, a makita a nailemmeng a kadua ti .sr-onlyklase.
No agparpartuat ka kadagiti kontrol nga awan ti sabali a teksto (kas ti maysa <button>a naglaon laeng ti maysa nga ikono), rumbeng a kanayon a mangipaayka kadagiti alternatibo a linaon tapno mailasin ti panggep ti kontrol, tapno daytoy ket addaan iti kaipapanan kadagiti agar-aramat kadagiti makatulong a teknolohia. Iti daytoy a kaso, mabalinmo ti manginayon ti maysa nga aria-labelattribute iti kontrol a mismo.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Dagiti pagarigan
Usaren dagitoy kadagiti buton, grupo ti buton para iti toolbar, nabigasion, wenno dagiti prepended a panagserrek ti porma.
<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>Maysa nga ikono a maus-usar iti maysa nga alerto tapno mangipakaammo a daytoy ket maysa a mensahe ti biddut, nga addaan iti kanayonan .sr-onlya teksto a mangidanon iti daytoy a pammalubos kadagiti agar-aramat kadagiti makatulong a teknolohia.
Biddut:Mangisurat iti balido nga email address
<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>Dagiti dropdown
Mabaliwan, konteksto a menu para iti panangiparang kadagiti listaan dagiti silpo. Naaramid nga interaktibo babaen ti dropdown a plugin ti JavaScript .
Pagwadan
Balkoten ti trigger ti dropdown ken ti dropdown menu iti uneg ti .dropdown, wenno ti sabali nga elemento a mangideklara position: relative;ti . Kalpasanna, inayonmo ti HTML ti 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>Dagiti dropdown a menu ket mabalin a mabaliwan tapno lumawa nga agpangato (imbes nga agpababa) babaen ti pananginayon .dropupiti nagannak.
<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>Panagtunos
Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Inayon .dropdown-menu-rightiti a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu.
Mabalin a kasapulan ti kanayonan a posision
Dagiti dropdown ket automatiko a maiposision babaen ti CSS iti uneg ti gagangay nga ayus ti dokumento. Kayatna a sawen a dagiti dropdown ket mabalin a ma-crop babaen dagiti nagannak nga addaan kadagiti sumagmamano a overflowtagikua wenno agparang iti ruar dagiti beddeng ti viewport. Tamingem a bukodmo dagitoy nga isyu bayat a tumaud dagitoy.
Saanen a maus-usar .pull-righta panagtunos
Manipud iti v3.1.0, naikkatmi .pull-rightdagiti dropdown menu. Tapno mai-right-align ti maysa a menu, usarem ti .dropdown-menu-right. Dagiti kannawan a naitunos a paset ti nav iti navbar ket agus-usar ti bersion ti mixin daytoy a klase tapno automatiko a maitunos ti menu. Tapno ma-override dayta, usarem ti .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Dagiti ulo
Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Mangbingaybingay
Manginayon ti divider tapno agsina a serye dagiti silpo iti dropdown menu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Nabaldado dagiti banag iti menu
Inayon .disablediti a <li>iti dropdown tapno mapasardeng ti link.
<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>Dagiti grupo ti buton
Grupo ti agsasaruno a buton a sangsangkamaysa iti maymaysa a linia iti grupo ti buton. Inayon ti opsional a JavaScript a radio ken ti kahon ti tsek nga estilo a kababalin babaen ti plugin dagiti butonmi .
Dagiti Tooltips & popovers kadagiti grupo ti buton ket kasapulan ti espesial a setting
No agus-usar kadagiti tooltip wenno popover kadagiti elemento iti uneg ti maysa .btn-group, masapul nga ikeddengmo ti pagpilian container: 'body'tapno maliklikan dagiti di matarigagayan nga epekto (kas ti elemento a dumakkel a nalawa ken/wenno mapukaw dagiti nagtimbukel a sulina no ti tooltip wenno popover ket maitignay).
Siguraduen nga umiso roleken mangipaay iti etiketa
Tapno dagiti makatulong a teknolohia – a kas dagiti agbasbasa ti iskrin – ket mangipakaammo a ti maysa a serye dagiti buton ket nagrupo, ti maitutop rolea kababalin ket kasapulan a maited. Para kadagiti grupo ti buton, daytoy ket agbalin koma a role="group", bayat a dagiti toolbar ket rumbeng nga addaan iti role="toolbar".
Maysa a pannakailaksid ket dagiti grupo a naglaon laeng ti maymaysa a kontrol (kas pagarigan dagiti nainkalintegan a grupo ti buton nga addaan kadagiti <button>elemento) wenno ti dropdown.
Iti pay maipatinayon, dagiti grupo ken dagiti toolbar ket rumbeng a maited ti nalawag nga etiketa, a kas dagiti kaaduan a makatulong a teknolohia ket no saan ket saandanto nga ipakaammo dagitoy, iti laksid ti kaadda ti umno rolea kababalin. Kadagiti pagarigan a naited ditoy, usarenmi ti aria-label, ngem dagiti alternatibo a kas iti aria-labelledbymabalin met nga usaren.
Pangrugian a pagarigan
Balkoten ti agsasaruno a buton babaen ti .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>Buton ti toolbar
Pagtiponen dagiti set ti <div class="btn-group">iti maysa <div class="btn-toolbar">para kadagiti mas komplikado a paset.
<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>Panag-sizing
Imbes nga iyaplikar dagiti klase ti panagdakkel ti buton iti tunggal maysa a buton iti maysa a grupo, mangnayon laeng .btn-group-*iti tunggal maysa .btn-group, a mairaman no ag-umok kadagiti adu a grupo.
<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>Panag-umok
Ikabil ti maysa iti .btn-groupuneg ti sabali .btn-groupno kayatmo dagiti dropdown menu a nalaokan iti agsasaruno a buton.
<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>Bertikal a panagduduma
Pagbalinen a ti maysa a set dagiti buton ket agparang a bertikal a naurnong imbes a horizontal. Saan a nasuportaran ditoy dagiti dropdown ti split button.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Nainkalintegan dagiti grupo ti buton
Pagbalinen ti maysa a grupo dagiti buton nga agyunnat iti agpapada a kadakkel tapno mangsaklaw iti intero a kalawa ti nagannakna. Agtrabaho pay kadagiti dropdown ti buton iti uneg ti grupo ti buton.
Panangtaming kadagiti beddeng
Gapu ti espesipiko nga HTML ken CSS a naus-usar a mangikalintegan kadagiti buton (nga isu ti display: table-cell), dagiti beddeng iti nagbaetan dagitoy ket madoble. Kadagiti regular a grupo ti buton, margin-left: -1pxket maus-usar a mangitumpok kadagiti beddeng imbes nga ikkaten dagitoy. Nupay kasta, marginsaan nga agtrabaho iti display: table-cell. Kas resulta, depende kadagiti panagpasayaatmo iti Bootstrap, mabalin a kayatmo nga ikkaten wenno kolor manen dagiti beddeng.
IE8 ken dagiti beddeng
Ti Internet Explorer 8 ket saan a mangiparang kadagiti beddeng kadagiti buton iti nainkalintegan a grupo ti buton, daytoy man ket nakalukat <a>wenno <button>dagiti elemento. Tapno maliklikan dayta, baluten ti tunggal buton iti sabali .btn-group.
Kitaen ti #12476 para iti ad-adu pay nga impormasion.
Buyogen <a>dagiti elemento
Balkoten laeng ti serye ti .btns iti .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Dagiti silpo nga agtigtignay kas buton
No dagiti <a>elemento ket maus-usar nga agtignay a kas dagiti buton – a mangtignay ti panagusar iti uneg ti panid, imbes a mangiturong iti sabali a dokumento wenno benneg iti uneg ti agdama a panid – rumbeng met a maited kadakuada ti maitutop role="button".
Buyogen <button>dagiti elemento
Tapno agusar kadagiti nainkalintegan a grupo ti buton nga addaan kadagiti <button>elemento, masapul a balutem ti tunggal maysa a buton iti maysa a grupo ti buton . Kaaduan a browser ket dida umiso nga iyaplikar ti CSSmi para iti panangikalintegan kadagiti <button>elemento, ngem gapu ta suportaranmi dagiti dropdown ti buton, mabalinmi nga agtrabaho iti aglawlaw dayta.
<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>Dagiti dropdown ti buton
Usaren ti aniaman a buton tapno mangtignay iti dropdown menu babaen ti panangikabil iti dayta iti uneg ti a .btn-groupken panangipaay iti umno a menu markup.
Panagpannuray iti plugin
Dagiti dropdown ti buton ket kasapulan ti dropdown plugin a mairaman iti bersionmo ti Bootstrap.
Agmaymaysa a buton dagiti dropdown
Pagbalinem ti maysa a buton iti dropdown toggle nga addaan iti sumagmamano a kangrunaan a panagbalbaliw ti markup.
<!-- 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>Split dagiti dropdown ti buton
Kasta met, mangpartuat kadagiti dropdown ti split button nga addaan kadagiti isu met laeng a panagbalbaliw ti markup, nga addaan laeng iti naisina a buton.
<!-- 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>Panag-sizing
Agtrabaho dagiti button dropdown kadagiti buton iti amin a kadakkel.
<!-- 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>Panagdumaduma ti dropup
Trigger dagiti dropdown menu iti ngato dagiti elemento babaen ti pananginayon .dropupiti nagannak.
<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>Dagiti grupo ti input
Palawaen dagiti kontrol ti porma babaen ti pananginayon ti teksto wenno dagiti buton sakbay, kalpasan, wenno iti agsumbangir ti ania man a naibatay iti teksto <input>. Usaren .input-groupa kadua ti maysa .input-group-addonwenno .input-group-btntapno mangiprepend wenno manginayon kadagiti elemento iti maymaysa .form-control.
Tekstual <input>s laeng
Liklikan ti panagusar kadagiti <select>elemento ditoy ta saan a mabalin a naan-anay nga estilo kadagiti browser ti WebKit.
Liklikan ti panagusar kadagiti <textarea>elemento ditoy ta ti rowskababalinda ket saan a maraem iti sumagmamano a kaso.
Dagiti Tooltips & popovers kadagiti grupo ti input ket kasapulan ti espesial a setting
No agus-usar kadagiti tooltip wenno popover kadagiti elemento iti uneg ti maysa .input-group, masapul nga ikeddengmo ti pagpilian container: 'body'tapno maliklikan dagiti di matarigagayan nga epekto (kas ti elemento a dumakkel a nalawa ken/wenno mapukaw dagiti nagtimbukel a sulina no ti tooltip wenno popover ket maitignay).
Dika ilaok kadagiti dadduma a paset
Dimo paglaoken dagiti grupo ti porma wenno dagiti klase ti kolum ti grid a direkta kadagiti grupo ti input. Imbes ketdi, i-nest ti grupo ti input iti uneg ti grupo ti porma wenno elemento a mainaig iti grid.
Kanayon nga inayon dagiti etiketa
Marigatan dagiti screen reader kadagiti pormam no dimo iraman ti etiketa para iti tunggal input. Para kadagitoy a grupo ti input, siguraduen nga aniaman a kanayonan nga etiketa wenno panagandar ket maidanon kadagiti makatulong a teknolohia.
Ti eksakto a teknik a mausar (dagiti makita <label>nga elemento, <label>dagiti elemento a nailemmeng babaen ti panagusar ti .sr-onlyklase, wenno panagusar ti aria-label, aria-labelledby, aria-describedby, titlewenno placeholderattribute) ken no ania dagiti kanayonan nga impormasion a kasapulan a maidanon ket agdumaduma depende ti eksakto a kita ti interface widget nga ipatungpalmo. Dagiti pagarigan iti daytoy a benneg ket mangipaay kadagiti sumagmamano a naisingasing, kaso-espesipiko a pamay-an.
Pangrugian a pagarigan
Ikabil ti maysa nga add-on wenno buton iti agsumbangir ti maysa nga input. Mabalinmo met nga ikabil ti maysa iti agsumbangir a sikigan ti maysa nga input.
Saanmi a suportaran ti adu nga add-on ( .input-group-addonwenno .input-group-btn) iti maymaysa a sikigan.
Saanmi a suportaran dagiti adu a porma-a-kontrol iti maymaysa nga input a grupo.
<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>Panag-sizing
Inayon dagiti relatibo a klase ti panagdakkel ti porma iti .input-groupbagina ken dagiti linaon iti uneg ket automatiko a mangbalbaliw ti kadakkel—saan a kasapulan ti panangulit kadagiti klase ti kadakkel ti panangtengngel ti porma iti tunggal maysa nga elemento.
<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>Dagiti checkbox ken dagiti addon ti radio
Ikabil ti ania man a checkbox wenno pagpilian ti radio iti uneg ti addon ti maysa nga input group imbes a teksto.
<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 -->Buton nga addons
Dagiti buton kadagiti grupo ti input ket naiduma bassit ken kasapulan ti maysa nga ekstra a lebel ti panagumok. Imbes a .input-group-addon, masapul nga usarem .input-group-btna mangbalkot kadagiti buton. Daytoy ket kasapulan gapu kadagiti default nga estilo ti browser a saan a mabalin a maibabawi.
<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 -->Dagiti buton nga addaan kadagiti 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 -->Dagiti nasegmentado a butones
<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>Adu a buton
Bayat a mabalinmo laeng ti maaddaan iti maysa nga add-on iti tunggal sikigan, mabalinmo ti maaddaan iti adu a buton iti uneg ti maymaysa .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 nga
Dagiti Nav a magun-od iti Bootstrap ket addaan kadagiti naibingbingay a marka, a mangrugi iti batayan .nava klase, ken dagiti pay naibingbingay nga estado. Agsinnukat kadagiti klase ti mangbalbaliw tapno agsubli iti nagbaetan ti tunggal maysa nga estilo.
Dagiti Tab
Paliiwenyo a .nav-tabskasapulan ti klase ti .navbase class.
<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>Pildoras nga
Alaem dayta met laeng nga HTML, ngem usarem .nav-pillsketdi:
<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>Bertikal met a maitumpok dagiti pildoras. Inayon laeng ti .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Nainkalintegan
Nalaka laeng nga aramiden dagiti tab wenno pildoras a kapada ti kalawa ti nagannakda kadagiti iskrin a nalalawa ngem 768px nga addaan iti .nav-justified. Kadagiti babbabassit nga iskrin, naurnong dagiti nav link.
Dagiti nainkalintegan a silpo ti navbar nav ket agdama a saan a nasuportaran.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Nabaldado dagiti silpo
Para iti ania man a paset ti nav (tab wenno pildoras), inayon .disabledpara kadagiti abuabuan a silpo ken awan dagiti epekto ti hover .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Panangusar kadagiti dropdown
Manginayon kadagiti dropdown a menu nga addaan iti bassit nga ekstra nga HTML ken dagiti dropdown a JavaScript plugin .
Dagiti tab nga addaan kadagiti 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>Pildoras nga addaan 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>Navbar nga
Default nga navbar
Dagiti navbar ket dagiti makasungbat a meta a paset nga agserbi a kas dagiti ulo ti nabigasion para iti aplikasion wenno site-mo. Mangrugida a narba (ken mabalin a mai-toggle) kadagiti mobile a panagkita ken agbalin a horisontal bayat nga umad-adu ti magun-od a kalawa ti viewport.
Dagiti nainkalintegan a silpo ti navbar nav ket agdama a saan a nasuportaran.
<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>Imahe ti brand
Sukatan ti marka ti navbar iti bukodmo a ladawan babaen ti panangisukat ti teksto para iti <img>. Gapu ta ti ti .navbar-brandaddaan iti bukodna a padding ken kangato, mabalin a kasapulam nga i-override ti sumagmamano a CSS depende iti ladawam.
<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>Dagiti Pormas
Ikabil ti linaon ti porma iti uneg .navbar-formpara iti umno a bertikal a panagitunos ken narba a kababalin kadagiti akikid a viewport. Usaren dagiti pagpilian ti panagtunos tapno mangikeddeng no sadino ti pagnanaedanna iti uneg ti linaon ti navbar.
Kas maysa nga heads up, .navbar-formibinglayna ti kaaduan a kodigona iti .form-inlinevia mixin. Sumagmamano a kontrol ti porma, a kas dagiti grupo ti panagserrek, ket mabalin a kasapulan dagiti naikeddeng a kalawa tapno maipakita a nasayaat iti uneg ti 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>Dagiti Buton
Inayon ti .navbar-btnklase kadagiti <button>elemento a saan nga agtataeng iti a <form>tapno bertikal a mangisentro kadagitoy iti navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Teksto
Balkoten dagiti kuerdas ti teksto iti maysa nga elemento nga addaan iti .navbar-text, kadawyan iti maysa nga <p>etiketa para iti umno a panangidaulo ken kolor.
<p class="navbar-text">Signed in as Mark Otto</p>Dagiti saan a nav a silpo
Para kadagiti tattao nga agus-usar kadagiti pagalagadan a silpo nga awan iti uneg ti regular a paset ti nabigasion ti navbar, usaren ti .navbar-linkklase tapno manginayon kadagiti umno a kolor para kadagiti default ken baliktad a pagpilian ti navbar.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Panagtunos ti paset
Itunos dagiti silpo ti nav, porma, buton, wenno teksto, babaen ti panagusar kadagiti klase ti .navbar-leftwenno .navbar-rightutilidad. Agpada a manginayon dagiti klase ti CSS float iti naikeddeng a direksion. Kas pagarigan, tapno maitunos dagiti silpo ti nav, ikabil dagitoy iti naisina <ul>nga addaan iti bukod a klase ti utilidad a naipakat.
Dagitoy a klase ket dagiti mixin-ed a bersion ti .pull-leftken .pull-right, ngem dagitoy ket naisakop kadagiti panagsaludsod ti media para iti nalaklaka a panagtengngel kadagiti paset ti navbar iti ballasiw dagiti kadakkel ti alikamen.
Natakder iti ngato
Inayon .navbar-fixed-topken iraman ti maysa .containerwenno .container-fluiditi tengnga ken pad ti linaon ti navbar.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Natakder iti baba
Inayon .navbar-fixed-bottomken iraman ti maysa .containerwenno .container-fluiditi tengnga ken pad ti linaon ti navbar.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Estatiko nga tuktok
Mangaramid ti naan-anay a kalawa a navbar nga ag-scroll nga umadayo a kadua ti panid babaen ti pananginayon .navbar-static-topken mangiraman ti maysa .containerwenno .container-fluiditi tengnga ken pad ti linaon ti navbar.
Saan a kas kadagiti .navbar-fixed-*klase, saanmo a kasapulan a baliwan ti aniaman a padding iti body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Nabaliktad a navbar
Baliwan ti langa ti navbar babaen ti pananginayon ti .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Dagiti tinapay
Ipamatmat ti lokasion ti agdama a panid iti uneg ti maysa a hirarkia ti nabigasion.
Dagiti mangisina ket automatiko a mainayon iti CSS babaen ti :beforeken content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Panagpagina
Mangted kadagiti silpo ti pagination para iti site wenno app-mo nga addaan iti multi-page pagination component, wenno ti nasimsimple nga alternatibo ti pager .
Default nga pagination
Simple a pagination nga inspired ti Rdio, nasayaat para kadagiti apps ken resulta ti panagbirok. Ti dakkel a bloke ket narigat a malipatan, nalaka a maipadakkel, ken mangipaay kadagiti dadakkel a lugar ti panag-click.
<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>Panangmarka ti paset ti pagination
Ti paset ti pagination ket rumbeng a nabalkot iti maysa <nav>nga elemento tapno mailasin daytoy a kas maysa a paset ti nabigasion tapno ag-screen kadagiti agbasbasa ken dagiti dadduma pay a makatulong a teknolohia. Iti pay maipatinayon, a kas ti maysa a panid ket mabalin nga addaan iti ad-adu ngem maysa a kasta a paset ti panaglayag a dati (kas ti kangrunaan a panaglayag iti ulo, wenno ti panaglayag ti sikigan a bara), daytoy ket maibalakad a mangipaay ti mangiladawan aria-labelpara iti <nav>no ania ti mangipakita ti panggepna. Kas pagarigan, no ti paset ti panagpagina ket maus-usar a mangiturong iti nagbaetan ti maysa a grupo dagiti resulta ti panagbiruk, ti maitutop nga etiketa ket mabalin a aria-label="Search results pages".
Baldado ken aktibo nga estado
Mabalin a ma-customize dagiti link para iti nadumaduma a kasasaad. Usaren .disabledpara kadagiti saan a mai-klik a silpo ken .activetapno mangipakita ti agdama a panid.
<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>Irekomendarmi nga isukatmo dagiti aktibo wenno baldado nga angkla para iti <span>, wenno liklikam ti angkla iti kaso dagiti napalabas/sumaruno a pana, tapno maikkat ti panagusar ti panagpidut bayat a pagtalinaedem dagiti nairanta nga estilo.
<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>Panag-sizing
Magarbo a dakdakkel wenno basbassit a pagination? Inayon .pagination-lgwenno .pagination-smpara kadagiti kanayonan a kadakkel.
<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 nga
Napardas a napalabas ken sumaganad a silpo para kadagiti simple a pannakaipatungpal ti pagination nga addaan iti nalawag a marka ken estilo. Nasayaat dayta para kadagiti simple a site a kas kadagiti blog wenno magasin.
Default nga pagarigan
Babaen ti default, ti pager ket mangisentro kadagiti silpo.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Naitunos dagiti silpo
Saan laeng a dayta, mabalinmo nga itunos ti tunggal silpo kadagiti sikigan:
<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>Opsional a baldado nga estado
Dagiti silpo ti pager ket agus-usar pay ti sapasap .disableda klase ti utilidad manipud iti pagination.
<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>Dagiti etiketa
Pagwadan
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
Pagarigan a paulo Baro
<h3>Example heading <span class="label label-default">New</span></h3>Dagiti magun-odan a panagduduma
Inayon ti ania man kadagiti nadakamat iti baba a klase ti mangbalbaliw tapno agbaliw ti langa ti etiketa.
Default a
Pakdaar ti Impormasion ti Balligi ti Primary
Peligro
<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>Adda kadi tonelada nga etiketa?
Mabalin a tumaud dagiti parikut iti panagiparang no addaanka kadagiti pinulpullo nga inline nga etiketa iti uneg ti akikid a pagkargaan, tunggal maysa ket naglaon ti bukodna inline-blocknga elemento (kas ti maysa nga ikono). Ti wagas a mangliklik iti daytoy ket setting display: inline-block;. Para iti konteksto ken ti pagarigan, kitaen ti #13219 .
Dagiti Badge
Nalaka laeng nga i-highlight dagiti baro wenno saan a nabasaan a banag babaen ti pananginayon iti <span class="badge">a kadagiti silpo, Bootstrap navs, ken dadduma pay.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Bukod nga marpuog
No awan dagiti baro wenno saan a nabasa a banag, dagiti badge ket basta agrupsa (babaen ti :emptyagpili ti CSS) no la ketdi awan ti linaon iti uneg.
Panagtunos ti krus-browser
Saan a self collapse dagiti badge iti Internet Explorer 8 gapu ta awanan iti suporta para iti :emptyselector.
Agadapta kadagiti aktibo nga estado ti nav
Dagiti naibangon nga estilo ket nairaman para iti panangikabil kadagiti badge kadagiti aktibo nga estado kadagiti nabigasion ti pildoras.
<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 nga
Maysa a nalag-an, nalaka a maibagay a paset a mabalin a pagpilian a mangpalawa iti intero a viewport tapno maipakita ti kangrunaan a linaon iti site-mo.
Hello, lubong!
Daytoy ket simple a yunit ti bannuar, maysa a simple nga estilo ti jumbotron a paset para iti panangawag iti ekstra nga atension iti naiparang a linaon wenno impormasion.
<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>Tapno ti jumbotron ket naan-anay a kalawa, ken awan dagiti nagtimbukel a suli, ikabil daytoy iti ruar amin nga .containers ken imbes ketdi mangnayon ti .containeruneg.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Paulo ti panid
Maysa a simple a shell para iti maysa h1a maitutop nga espasyo ken segmento dagiti benneg ti linaon iti maysa a panid. Daytoy ket mabalinna nga usaren ti h1's default smallnga elemento, ken kasta met ti kaaduan a dadduma pay a paset (nga addaan kadagiti kanayonan nga estilo).
Pagarigan ti ulo ti panid Subteksto para iti ulo
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Dagiti Thumbnail
Palawaen ti sistema ti grid ti Bootstrap babaen ti paset ti thumbnail tapno nalaka a maipakita dagiti grid dagiti ladawan, video, teksto, ken dadduma pay.
No agsapsapulka iti kasla Pinterest a presentasion dagiti thumbnail a nadumaduma ti kangato ken/wenno kalawa, kasapulam ti agusar iti third-party plugin a kas iti Masonry , Isotope , wenno Salvattore .
Default nga pagarigan
Babaen ti default, dagiti thumbnail ti Bootstrap ket nadisenio a mangipakita kadagiti naisilpo a ladawan nga addaan iti kabassitan a kasapulan a marka.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Kostumbre a linaon
Babaen ti sangkabassit nga ekstra a marka, mabalin ti manginayon iti ania man a kita ti linaon ti HTML a kas dagiti paulo, parapo, wenno buton kadagiti thumbnail.
<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>Dagiti Alerto
Mangted kadagiti mensahe ti konteksto a feedback para kadagiti gagangay nga aramid ti agar-aramat nga addaan kadagiti sumagmamano a magun-od ken nalaka a maibagay a mensahe ti alerto.
Dagiti pagarigan
Balkoten ti ania man a teksto ken ti opsional a buton ti panangilaksid iti .alertken maysa kadagiti uppat a klase ti konteksto (kas pagarigan, .alert-success) para kadagiti batayan a mensahe ti alerto.
Awan ti default a klase
Dagiti alerto ket awan dagiti default a klase, dagiti laeng klase ti batayan ken mangbalbaliw. Ti default nga abuabu nga alerto ket saan unay a makaipaay ti kaipapanan, isu a kasapulam nga ikeddeng ti maysa a kita babaen ti klase ti konteksto. Pilien manipud iti balligi, info, pakdaar, wenno peggad.
Naglaing! Sibaballigi a nabasam daytoy napateg a mensahe ti alerto.
Ulo nga agpangato! Kasapulan daytoy nga alerto ti atensionmo, ngem saan a super napateg dayta.
Pakdaar! Nasaysayaat no kitaem ti bagim, saanka a nasayaat unay ti langam.
Oh snap! Baliwam ti sumagmamano a banag ket padasem manen ti agsubmitir.
<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>Dagiti mailaksid nga alerto
Mangbangon iti aniaman nga alerto babaen ti pananginayon iti opsional .alert-dismissibleken iserram a buton.
Kasapulan ti plugin ti alerto ti JavaScript
Para iti naan-anay a panagandar, dagiti mailaksid nga alerto, masapul nga usarem dagiti alerto a JavaScript plugin .
Pakdaar! Nasaysayaat no kitaem ti bagim, saanka a nasayaat unay ti langam.
<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>Siguraduen ti umno a kababalin iti ballasiw ti amin nga alikamen
Siguraduen nga usaren ti <button>elemento nga addaan iti data-dismiss="alert"attribute ti datos.
Dagiti silpo kadagiti alerto
Usaren ti .alert-linkklase ti utilidad tapno napardas a mangipaay kadagiti agpapada a namaris a silpo iti uneg ti ania man nga alerto.
Naglaing! Sibaballigi a nabasam
daytoy napateg a mensahe ti alerto .
Ulo nga agpangato! This
alert needs your attention , ngem saan a super napateg dayta.
Pakdaar! Nasaysayaat no kitaem ti bagim, saanka
a nasayaat unay ti langam .
Oh snap!
Baliwam ti sumagmamano a banag ket padasem manen ti agsubmitir.
<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>Dagiti bara ti panagrang-ay
Mangted ti napabaro a feedback iti panagrang-ay ti panagayus ti trabaho wenno panagtignay nga addaan kadagiti simple ngem nalaka a maibagay a progress bar.
Panagtunos ti krus-browser
Dagiti bara ti panagrang-ay ket agus-usar kadagiti panagbalbaliw ti CSS3 ken dagiti animasion tapno magun-od ti sumagmamano kadagiti epektoda. Dagitoy a tampok ket saan a nasuportaran iti Internet Explorer 9 ken iti baba wenno dagiti daan a bersion ti Firefox. Saan a suportaran ti Opera 12 dagiti animasion.
Panagtunos ti Patakaran ti Seguridad ti Linaon (CSP).
No ti websitemo ket addaan iti Pagannurotan ti Seguridad ti Linaon (CSP) a saan a mangipalubos style-src 'unsafe-inline', kalpasanna saanmo a mabalin nga usaren dagiti inline stylea kababalin tapno mangikeddeng kadagiti kalawa ti bara ti panagrang-ay a kas naipakita kadagiti pagariganmi iti baba. Dagiti alternatibo a pamay-an para iti panangisaad kadagiti kalawa a maitunos kadagiti nainget a CSP ket mairaman ti panagusar ti bassit a kostumbre a JavaScript (a mangikeddeng element.style.width) wenno panagusar kadagiti kostumbre a klase ti CSS.
Pangrugian a pagarigan
Default a bara ti panagrang-ay.
<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>Adda etiketa
Ikkaten ti <span>with .sr-onlyclass manipud iti uneg ti progress bar tapno maipakita ti makita a porsiento.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Tapno masigurado nga agtalinaed a mabasa ti teksto ti etiketa uray para kadagiti nababa a porsiento, ibilangmo ti pananginayon iti min-widtha iti progress bar.
<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>Dagiti alternatibo iti konteksto
Dagiti bara ti panagrang-ay ket agus-usar kadagiti sumagmamano kadagiti isu met laeng a buton ken dagiti klase ti alerto para kadagiti agtultuloy nga estilo.
<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>Garitgaritan
Usaren ti gradient tapno makaaramid ti garitgaritan nga epekto. Saan a magun-od iti IE9 ken iti baba.
<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>Animado nga
Add .activeto .progress-bar-stripedtapno ma-animate dagiti garit iti kannawan agingga iti kannigid. Saan a magun-od iti IE9 ken iti baba.
<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>Naurnong
Ikabil ti adu a bara iti isu met laeng .progresstapno maitumpok dagitoy.
<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>Bagay ti media
Dagiti abstrakto nga estilo ti banag para iti panagbangon kadagiti nadumaduma a kita ti paset (kas dagiti komento ti blog, dagiti Tweet, kdpy) a mangitampok ti kannigid- wenno kannawan-a-naitunos a ladawan a kadua ti tekstual a linaon.
Default a media
Ti default a media ket mangiparang ti maysa a banag ti media (dagiti ladawan, video, audio) iti kannigid wenno kannawan ti maysa a bloke ti linaon.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, 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>Dagiti klase .pull-leftken .pull-rightadda pay ken dati a naus-usar a kas paset ti paset ti media, ngem saanen a maus-usar para iti dayta a panagusar manipud iti v3.3.0. Dagitoy ket agarup a katupag ti .media-leftken .media-right, malaksid a .media-rightrumbeng a maikabil kalpasan ti .media-bodyiti html.
Panagtunos ti media
Mabalin nga itunos dagiti ladawan wenno dadduma pay a media iti ngato, tengnga, wenno baba. Ti default ket naitunos iti ngato.
Nangato a naitunos a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus.
Tengnga a naitunos a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus.
Naitunos iti baba a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a 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>Listaan ti media
Iti sangkabassit nga ekstra a marka, mabalinmo nga usaren ti media iti uneg ti listaan (mausar para kadagiti thread ti komento wenno dagiti listaan dagiti artikulo).
-
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis.
Naisanglad a paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, 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>Ilista ti grupo
Dagiti grupo ti listaan ket maysa a nalaka a maibagay ken nabileg a paset para iti panangiparang saan laeng a dagiti simple a listaan dagiti elemento, ngem dagiti komplikado nga addaan kadagiti kostumbre a linaon.
Pangrugian a pagarigan
Ti kangrunaan unay a grupo ti listaan ket maysa laeng a saan a naurnos a listaan nga addaan kadagiti banag ti listaan, ken dagiti umno a klase. Mangbangon iti dayta nga addaan kadagiti pagpilian a sumaganad, wenno ti bukodmo a CSS no kasapulan.
- Cras laeng nga odio
- Dapibus ac pasilidad iti
- Morbi leo nga risus
- Porta nga consectetur nga
- Vestibulum iti 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>Dagiti Badge
Inayon ti paset dagiti badge iti ania man a banag ti grupo ti listaan ket automatiko a maiposision daytoy iti kannawan.
- 14 ngaCras laeng nga odio
- 2. 2Dapibus ac pasilidad iti
- 1 ngaMorbi leo nga risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Naisilpo a banag
Isilpo dagiti banag ti grupo ti listaan babaen ti panagusar kadagiti etiketa ti angkla imbes a dagiti banag ti listaan (dayta ket kayatna pay a sawen ti nagannak <div>imbes a ti <ul>). Saan a kasapulan dagiti indibidual a nagannak iti aglawlaw ti tunggal elemento.
<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>Dagiti banag a buton
Dagiti banag ti grupo ti listaan ket mabalin a dagiti buton imbes a dagiti banag ti listaan (kayatna pay a sawen ti maysa a nagannak <div>imbes a ti maysa <ul>). Saan a kasapulan dagiti indibidual a nagannak iti aglawlaw ti tunggal elemento. Dimo usaren dagiti gagangay a .btnklase ditoy.
<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>Dagiti baldado a banag
Inayon .disablediti a .list-group-itemtapno gray dayta tapno agparang a baldado.
<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>Dagiti klase ti konteksto
Usaren dagiti klase ti konteksto tapno estilo ti listaan dagiti banag, default wenno naisilpo. Karaman pay ti .activeestado.
- Dapibus ac pasilidad iti
- Cras agtugaw amet nibh libero
- Porta nga consectetur nga
- Vestibulum iti 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>Kostumbre a linaon
Inayon ti dandani ania man nga HTML iti uneg, urayno para kadagiti naisilpo a grupo ti listaan a kas ti adda iti baba.
Ilista ti paulo ti aytem ti grupo
Donec id elit nga saan nga mi porta gravida iti eget metus. Maecenas sed diam eget ti risus varius blandit.
Ilista ti paulo ti aytem ti grupo
Donec id elit nga saan nga mi porta gravida iti eget metus. Maecenas sed diam eget ti risus varius blandit.
Ilista ti paulo ti aytem ti grupo
Donec id elit nga saan nga mi porta gravida iti eget metus. Maecenas sed diam eget ti 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>Dagiti Panel
Nupay saan a kanayon a kasapulan, no dadduma kasapulam nga ikabil ti DOM-mo iti maysa a kahon. Para kadagita a kasasaad, padasem ti paset ti panel.
Pangrugian a pagarigan
Babaen ti default, amin nga .panelaramiden ket mangyaplikar ti sumagmamano a batayan a beddeng ken padding tapno aglaon ti sumagmamano a linaon.
Basic nga pagarigan ti panel
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Panel nga addaan iti paulo
Nalaka laeng ti mangnayon iti heading container iti panelmo babaen ti .panel-heading. Mabalinmo pay nga iraman ti ania man <h1>- <h6>nga addaan iti .panel-titleklase tapno manginayon ti nasakbay nga estilo a paulo. Nupay kasta, dagiti kadakkel ti letra ti <h1>- <h6>ket nabaliwan babaen ti .panel-heading.
Para iti umno a panagkolor ti silpo, siguraduen nga ikabil dagiti silpo kadagiti paulo iti uneg ti .panel-title.
Panel heading nga awan ti paulo
Linaon ti panel
Titulo ti panel
Linaon ti panel
<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>Panel nga may footer
Balkoten dagiti buton wenno segundario a teksto iti .panel-footer. Imutektekanyo a dagiti panel footer ket saan a mangtawid kadagiti kolor ken dagiti beddeng no agus-usar kadagiti konteksto a panagduduma a kas dagitoy ket saan a nairanta nga adda iti sango.
Linaon ti panel
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Dagiti alternatibo iti konteksto
Kas dagiti dadduma a paset, nalaka a mangaramid ti maysa a panel nga ad-adu ti kaipapanan iti partikular a konteksto babaen ti pananginayon ti ania man kadagiti klase ti estado ti konteksto.
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
Titulo ti panel
Linaon ti panel
<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>Adda dagiti lamisaan
Inayon ti aniaman a saan a nabeddengan .tableiti uneg ti maysa a panel para iti awan ti panagdadaitna a disenio. No adda .panel-body, manginayontayo ti ekstra a beddeng iti ngato ti lamisaan para iti panagsina.
Paulo ti panel
Sumagmamano a default a linaon ti panel ditoy. Nulla vitae elit libero, maysa a pharetra nga augue. Aenean a lacinia bibendum nga awan serserbina ti consectetur. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies lugan ut id elit.
| # | Nagan | Apelyido | Nagan ti agar-aramat |
|---|---|---|---|
| 1 nga | Marka | Otto ni Otto | @mdo nga |
| 2. 2 | Jacob ni Jacob | Thornton nga | @nalukmeg |
| 3. | Larry ni Larry | ti Tumatayab | @twitter nga |
<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>No awan ti bagi ti panel, ti paset ket umakar manipud iti ulo ti panel aginggana iti lamisaan nga awan ti pannakasinga.
Paulo ti panel
| # | Nagan | Apelyido | Nagan ti agar-aramat |
|---|---|---|---|
| 1 nga | Marka | Otto ni Otto | @mdo nga |
| 2. 2 | Jacob ni Jacob | Thornton nga | @nalukmeg |
| 3. | Larry ni Larry | ti Tumatayab | @twitter nga |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Adda dagiti grupo ti listaan
Nalaka nga iraman dagiti naan-anay a kalawa a grupo ti listaan iti uneg ti ania man a panel.
Paulo ti panel
Sumagmamano a default a linaon ti panel ditoy. Nulla vitae elit libero, maysa a pharetra nga augue. Aenean a lacinia bibendum nga awan serserbina ti consectetur. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies lugan ut id elit.
- Cras laeng nga odio
- Dapibus ac pasilidad iti
- Morbi leo nga risus
- Porta nga consectetur nga
- Vestibulum iti 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>Sungsungbatan nga embed
Palubosan dagiti browser a mangikeddeng kadagiti dimension ti video wenno slideshow a naibatay iti kalawa ti naglaon a blokeda babaen ti panagpartuat ti intrinsiko a ratio a siuumiso a mang-scale iti ania man nga alikamen.
Dagiti pagannurotan ket direkta a maipakat kadagiti <iframe>, <embed>, <video>, ken <object>dagiti elemento; opsional nga agusar ti nalawag a klase ti kaputotan .embed-responsive-itemno kayatmo a maipada ti estilo para kadagiti sabali a kababalin.
Pro-Tip nga! Saanmo a kasapulan nga iraman frameborder="0"iti <iframe>s-mo bayat nga i-override-mi dayta para kenka.
<!-- 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>Dagiti Bubon
Default nga nasayaat
Usaren ti bubon a kas simple nga epekto iti maysa nga elemento tapno maited daytoy iti inset nga epekto.
Kitaem, addaak iti bubon!
<div class="well">...</div>Opsional a klase
Kontrol ti padding ken nagtimbukel a suli nga addaan iti dua nga opsional a klase ti modifier.
Kitaem, addaak iti dakkel a bubon!
<div class="well well-lg">...</div>
Kitaem, addaak iti bassit a bubon!
<div class="well well-sm">...</div>