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-kannawan
  • 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-panangiyakar
  • 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.

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

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>

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>

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>

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>

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.

@

@pagarigan.com

$ nga .00 nga

https://pagarigan.com/dagiti agar-aramat/
<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.

Ti panagusar kadagiti navs para kadagiti tab panel ket agkasapulan ti JavaScript tabs plugin

Para kadagiti tab nga addaan kadagiti tabbable a lugar, masapul nga usarem dagiti tab a JavaScript plugin . Ti marka ket agkasapulan pay kadagiti kanayonan roleken dagiti ARIA a kababalin – kitaen ti pagarigan a marka ti plugin para kadagiti kanayonan a detalye.

Pagbalinen dagiti nav a mausar a kas nabigasion a makastrek

No agus-usar ka ti navs tapno mangipaay ti bara ti nabigasion, siguraduem nga inayon ti role="navigation"a iti lohikal unay a nagannak a pagkargaan ti <ul>, wenno baluten ti maysa <nav>nga elemento iti aglawlaw ti sibubukel a nabigasion. Dimo inayon ti akem iti <ul>mismo, ta daytoy ti manglapped iti pannakaipakaammo dayta kas aktual a listaan ​​babaen kadagiti makatulong a teknolohia.

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>

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>

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.

Safari ken responsive nainkalintegan a navs

Manipud iti v9.1.2, ti Safari ket mangipakpakita ti maysa a bug a ti panagbalbaliw ti kadakkel ti browsermo a paidasig ket mangpataud kadagiti biddut ti panagiparang iti nainkalintegan a nav a maikkat iti panagpabaro. Daytoy a bug ket naipakita pay iti nainkalintegan a pagarigan ti nav .

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

Para iti ania man a paset ti nav (tab wenno pildoras), inayon .disabledpara kadagiti abuabuan a silpo ken awan dagiti epekto ti hover .

Saan a naapektaran ti panagandar ti link

Daytoy a klase ket mangbalbaliw laeng iti <a>langa ti ', saan a ti panagandar daytoy. Usaren ti kostumbre a JavaScript tapno mapasardeng dagiti silpo ditoy.

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

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

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.

Aglaplapusanan a linaon

Gapu ta saan nga ammo ti Bootstrap no kasano kaadu ti espasio a kasapulan ti linaon iti navbarmo, mabalin a makasabatka kadagiti isyu iti panagbalkot ti linaon iti maikadua a linia. Tapno marisut daytoy, mabalinmo:

  1. Kissayan ti kaadu wenno kalawa dagiti banag ti navbar.
  2. Ilemmeng dagiti sumagmamano a banag ti navbar kadagiti sumagmamano a kadakkel ti iskrin babaen ti panagusar kadagiti makasungbat a klase ti utilidad .
  3. Baliwan ti punto a ti navbar-mo ket agsubli iti nagbaetan ti collapsed ken horizontal mode. Ipasayaat ti @grid-float-breakpointvariable wenno inayon ti bukodmo a saludsod ti media.

Kasapulan ti plugin ti JavaScript

No ti JavaScript ket nabalbaliwan ken ti viewport ket umdas nga akikid tapno ti navbar ket agrupsa, daytoy ket imposible a mangpalawa ti navbar ken mangkita ti linaon iti uneg ti .navbar-collapse.

Ti makasungbat a navbar ket agkasapulan ti collapse plugin a mairaman iti bersionmo ti Bootstrap.

Panagbalbaliw ti narba a mobile navbar breakpoint

Ti navbar ket marpuog iti bertikal a mobile a panagkitana no ti viewport ket akikid ngem ti @grid-float-breakpoint, ken lumawa iti horisontal a saan a mobile a panagkitana no ti viewport ket saan a basbassit ngem @grid-float-breakpointti kalawa. Ibaga daytoy a variable iti Basbassit a taudan tapno makontrol no ti navbar ket agrupsa/agpalawa. Ti kasisigud a pateg ket 768px(ti kabassitan nga iskrin ti "bassit" wenno "tablet").

Pagbalinen a makastrek dagiti navbar

Siguraduen nga agusar ti maysa <nav>nga elemento wenno, no agus-usar ti ad-adu a sapasap nga elemento a kas ti <div>, inayon ti role="navigation"a iti tunggal maysa a navbar tapno nalawag a mailasin daytoy a kas maysa a pagilasinan a rehion para kadagiti agar-aramat kadagiti makatulong a teknolohia.

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

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>

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 pakdaar ti mobile device

Adda dagiti sumagmamano a pakdaar maipapan ti panagusar kadagiti kontrol ti porma iti uneg dagiti naikeddeng nga elemento kadagiti mobile nga alikamen. Kitaen dagiti dokumento ti suporta ti browsermi para kadagiti detalye.

Kanayon nga inayon dagiti etiketa

Marigatan dagiti screen reader kadagiti pormam no dimo iraman ti etiketa para iti tunggal input. Para kadagitoy nga inline a porma, mabalinmo nga ilemmeng dagiti etiketa babaen ti panagusar ti .sr-onlyklase. Adda dagiti kanayonan nga alternatibo a pamay-an ti panangipaay ti etiketa para kadagiti makatulong a teknolohia, a kas ti aria-label, aria-labelledbywenno titleattribute. No awan kadagitoy ti adda, dagiti agbasbasa iti iskrin ket mabalinda ti agpatulong iti panagusar ti placeholderattribute, no adda, ngem laglagipen a ti panagusar ti placeholderkas kasukat dagiti sabali a pamay-an ti panagmarka ket saan a maibalakad.

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>

Konteksto-espesipiko a panagusar

Kas dagiti pagalagadan a klase ti buton , .navbar-btnmabalin nga usaren iti <a>ken <input>dagiti elemento. Nupay kasta, saan .navbar-btnkoma a mausar wenno dagiti pagalagadan a klase ti buton kadagiti <a>elemento iti uneg ti .navbar-nav.

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>

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>

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.

Kannawan a panangitunos iti adu a paset

Dagiti Navbar ket agdama nga addaan iti limitasion kadagiti adu a .navbar-rightklase. Tapno umno ti espasyo ti linaon, usarentayo ti negatibo a margin iti maudi .navbar-rightnga elemento. No adda dagiti adu nga elemento nga agus-usar iti dayta a klase, dagitoy a margin ket saan nga agtrabaho a kas nairanta.

Bisitaentayo manen daytoy inton mabalintayo nga isurat manen dayta a paset iti v4.

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>

Masapul ti body padding

Ti naikeddeng a navbar ket mangsakop ti sabali a linaonmo, malaksid no manginayonka paddingiti ngato ti <body>. Padasem dagiti bukodmo a pateg wenno usarem ti snippetmi iti baba. Tip: Babaen ti default, ti navbar ket 50px ti kangatona.

body { padding-top: 70px; }

Siguraduen nga iraman daytoy kalpasan ti kangrunaan a Bootstrap CSS.

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>

Masapul ti body padding

Ti naikeddeng a navbar ket mangsakop ti sabali a linaonmo, malaksid no manginayonka paddingiti baba ti <body>. Padasem dagiti bukodmo a pateg wenno usarem ti snippetmi iti baba. Tip: Babaen ti default, ti navbar ket 50px ti kangatona.

body { padding-bottom: 70px; }

Siguraduen nga iraman daytoy kalpasan ti kangrunaan a Bootstrap CSS.

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>

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">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

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">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Irekomendarmi a mangisukatka kadagiti 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">&laquo;</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>

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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 maysa nga 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 a <span class="badge">to links, Bootstrap navs, ken dadduma pay.

Inbox nga42 nga

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

Ammuem ti ad-adu pay

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

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

100%x200 nga

Etiketa ti thumbnail

Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan ut id elit.

Buton Buton

100%x200 nga

Etiketa ti thumbnail

Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan ut id elit.

Buton Buton

100%x200 nga

Etiketa ti thumbnail

Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan ut id elit.

Buton Buton

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

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

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.

Usaren ti .alert-linkklase ti utilidad tapno napardas a mangipaay kadagiti agpapada a namaris a silpo iti uneg ti ania man nga alerto.

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

60% Kompleto nga
<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.

60% nga .
<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.

0% nga .
2% nga .
<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.

40% Kompleto (balligi) .
20% Kompleto nga
60% Kompleto (pakdaar) .
80% Kompleto (peggad) .
<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.

40% Kompleto (balligi) .
20% Kompleto nga
60% Kompleto (pakdaar) .
80% Kompleto (peggad) .
<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.

45% Kompleto nga
<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.

35% Kompleto (balligi) .
20% Kompleto (pakdaar) .
10% Kompleto (peggad) .
<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.

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

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>