Magagamit na mga glyph

May kasamang mahigit 250 glyph sa format ng font mula sa Glyphicon Halflings set. Karaniwang hindi available nang libre ang Glyphicons Halflings, ngunit ginawa silang available ng kanilang tagalikha para sa Bootstrap nang walang bayad. Bilang pasasalamat, hinihiling lang namin na magsama ka ng link pabalik sa Glyphicons hangga't maaari.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-musika
glyphicon glyphicon-search
glyphicon glyphicon-heart
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-alisin
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-daan
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-kanan
glyphicon glyphicon-facetime-video
glyphicon glyphicon-larawan
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-paatras
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-kanan
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-kanan
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-regalo
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-kamay-kanan
glyphicon glyphicon-kamay-kaliwa
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-kanan
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attribute
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-save
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-kubyertos
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alerto
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-kama
glyphicon glyphicon-mansanas
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-gunting
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tikim
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-langis
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-kanan
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-kanan
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Paano gamitin

Para sa mga dahilan ng pagganap, ang lahat ng mga icon ay nangangailangan ng isang batayang klase at indibidwal na klase ng icon. Upang magamit, ilagay ang sumusunod na code sa halos kahit saan. Tiyaking mag-iwan ng espasyo sa pagitan ng icon at teksto para sa wastong padding.

Huwag ihalo sa iba pang mga sangkap

Ang mga klase ng icon ay hindi maaaring direktang pagsamahin sa iba pang mga bahagi. Hindi sila dapat gamitin kasama ng iba pang mga klase sa parehong elemento. Sa halip, magdagdag ng nested <span>at ilapat ang mga klase ng icon sa <span>.

Para lamang gamitin sa mga walang laman na elemento

Ang mga klase ng icon ay dapat lamang gamitin sa mga elemento na walang nilalamang teksto at walang mga elemento ng bata.

Pagbabago ng lokasyon ng font ng icon

Ipinapalagay ng Bootstrap na ang mga file ng font ng icon ay matatagpuan sa ../fonts/direktoryo, na nauugnay sa mga pinagsama-samang CSS file. Ang paglipat o pagpapalit ng pangalan sa mga font file ay nangangahulugan ng pag-update ng CSS sa isa sa tatlong paraan:

Baguhin ang @icon-font-pathat/o @icon-font-namemga variable sa pinagmulan Mas kaunting mga file.
Gamitin ang opsyong relative URLs na ibinigay ng Less compiler.
Baguhin ang mga url()landas sa pinagsama-samang CSS.

Gumamit ng anumang opsyon na pinakaangkop sa iyong partikular na setup ng development.

Mga naa-access na icon

Ang mga modernong bersyon ng mga pantulong na teknolohiya ay mag-aanunsyo ng nilalamang nabuo ng CSS, pati na rin ang mga partikular na Unicode na character. Upang maiwasan ang hindi sinasadya at nakakalito na output sa mga screen reader (lalo na kapag ang mga icon ay ginagamit lamang para sa dekorasyon), itinatago namin ang mga ito gamit ang aria-hidden="true"katangian.

Kung gumagamit ka ng icon para ipahiwatig ang kahulugan (sa halip na bilang isang elementong pampalamuti lamang), tiyaking ang kahulugan na ito ay ipinaparating din sa mga pantulong na teknolohiya – halimbawa, magsama ng karagdagang nilalaman, na biswal na nakatago sa .sr-onlyklase.

Kung lumilikha ka ng mga kontrol na walang ibang text (tulad ng <button>isang icon na naglalaman lamang), dapat kang palaging magbigay ng alternatibong nilalaman upang matukoy ang layunin ng kontrol, upang magkaroon ito ng kahulugan sa mga gumagamit ng mga pantulong na teknolohiya. Sa kasong ito, maaari kang magdagdag aria-labelng katangian sa mismong kontrol.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Mga halimbawa

Gamitin ang mga ito sa mga button, mga grupo ng button para sa isang toolbar, navigation, o mga naka-prepend na form input.

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

Isang icon na ginagamit sa isang alerto upang ipahiwatig na ito ay isang mensahe ng error, na may karagdagang .sr-onlyteksto upang ihatid ang pahiwatig na ito sa mga gumagamit ng mga pantulong na teknolohiya.

Maglagay ng wastong 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>

Toggleable, contextual na menu para sa pagpapakita ng mga listahan ng mga link. Ginawang interactive gamit ang dropdown na JavaScript plugin .

Halimbawa

I-wrap ang trigger ng dropdown at ang dropdown na menu sa loob ng .dropdown, o isa pang elementong nagdedeklara ng position: relative;. Pagkatapos ay idagdag ang HTML ng 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>

Maaaring baguhin ang mga dropdown na menu upang palawakin pataas (sa halip na pababa) sa pamamagitan ng pagdaragdag .dropupsa parent.

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

Pag-align

Bilang default, ang isang dropdown na menu ay awtomatikong nakaposisyon nang 100% mula sa itaas at sa kaliwang bahagi ng magulang nito. Idagdag .dropdown-menu-rightsa isang .dropdown-menui-align sa kanan ang dropdown na menu.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Mga header

Magdagdag ng header upang lagyan ng label ang mga seksyon ng mga aksyon sa anumang dropdown na menu.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Divider

Magdagdag ng divider sa hiwalay na serye ng mga link sa isang dropdown na menu.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Hindi pinagana ang mga item sa menu

Idagdag .disabledsa a <li>sa dropdown para i-disable ang 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>

Pagsama-samahin ang isang serye ng mga pindutan sa isang linya kasama ang pangkat ng pindutan. Idagdag sa opsyonal na JavaScript radio at pag-uugali sa istilo ng checkbox gamit ang aming mga button na plugin .

Ang mga tooltip at popover sa mga pangkat ng button ay nangangailangan ng espesyal na setting

Kapag gumagamit ng mga tooltip o popover sa mga elemento sa loob ng .btn-group, kakailanganin mong tukuyin ang opsyon container: 'body'upang maiwasan ang mga hindi gustong side effect (tulad ng lumalawak na elemento at/o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip o popover).

Tiyaking tama `role`at magbigay ng label

Upang maiparating ng mga pantulong na teknolohiya - tulad ng mga screen reader - na nakagrupo ang isang serye ng mga button, rolekailangang magbigay ng naaangkop na katangian. Para sa mga pangkat ng button, ito ay magiging role="group", habang ang mga toolbar ay dapat may role="toolbar".

Ang isang pagbubukod ay mga pangkat na naglalaman lamang ng iisang kontrol (halimbawa, ang mga pangkat ng justified na button na may mga <button>elemento) o isang dropdown.

Bilang karagdagan, ang mga pangkat at toolbar ay dapat na bigyan ng isang tahasang label, dahil karamihan sa mga teknolohiyang pantulong ay kung hindi man ay hindi ipahayag ang mga ito, sa kabila ng pagkakaroon ng tamang rolekatangian. Sa mga halimbawang ibinigay dito, ginagamit namin ang aria-label, ngunit magagamit din ang mga alternatibo tulad ng aria-labelledby.

Pangunahing halimbawa

I-wrap ang isang serye ng mga button na may .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>

Pagsamahin ang mga set ng sa <div class="btn-group">isang <div class="btn-toolbar">para sa mas kumplikadong mga bahagi.

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

Pagsusukat

Sa halip na ilapat ang mga klase sa pag-size ng button sa bawat button sa isang grupo, idagdag lang .btn-group-*sa bawat isa .btn-group, kabilang ang kapag naglalagay ng maraming 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>

Pugad

Maglagay ng isang sa .btn-grouploob ng isa pa .btn-groupkapag gusto mo ang mga dropdown na menu na may halong serye ng mga button.

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

Vertical variation

Gawing patayong nakasalansan ang isang hanay ng mga button sa halip na pahalang. Hindi sinusuportahan dito ang mga split button na dropdown.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Nabigyang-katwiran ang mga pangkat ng pindutan

Gumawa ng isang pangkat ng mga pindutan na mag-abot sa pantay na laki upang sumasaklaw sa buong lapad ng magulang nito. Gumagana rin sa mga dropdown ng button sa loob ng pangkat ng button.

Paghawak ng mga hangganan

Dahil sa partikular na HTML at CSS na ginamit upang bigyang-katwiran ang mga pindutan (ibig sabihin display: table-cell), ang mga hangganan sa pagitan ng mga ito ay nadoble. Sa mga regular na grupo ng button, margin-left: -1pxay ginagamit upang i-stack ang mga hangganan sa halip na alisin ang mga ito. Gayunpaman, marginhindi gumagana sa display: table-cell. Bilang resulta, depende sa iyong mga pagpapasadya sa Bootstrap, maaari mong hilingin na alisin o muling kulayan ang mga hangganan.

IE8 at mga hangganan

Ang Internet Explorer 8 ay hindi nagre-render ng mga hangganan sa mga button sa isang justified na pangkat ng button, ito man ay naka-on <a>o mga <button>elemento. Upang makayanan iyon, balutin ang bawat button sa isa pa .btn-group.

Tingnan ang #12476 para sa karagdagang impormasyon.

Sa `<a>`mga elemento

I-wrap lang ang isang serye ng mga .btns sa .btn-group.btn-group-justified.

Kaliwa Gitna Tama

Kaliwa Gitna

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Mga link na kumikilos bilang mga pindutan

Kung ang mga <a>elemento ay ginagamit upang kumilos bilang mga pindutan - na nagti-trigger ng in-page na functionality, sa halip na mag-navigate sa isa pang dokumento o seksyon sa loob ng kasalukuyang pahina - dapat din silang bigyan ng naaangkop na role="button".

Sa `<button>`mga elemento

Upang gumamit ng mga makatwirang pangkat ng button na may <button>mga elemento, dapat mong balutin ang bawat button sa isang pangkat ng button . Karamihan sa mga browser ay hindi maayos na inilalapat ang aming CSS para sa pagbibigay-katwiran sa mga <button>elemento, ngunit dahil sinusuportahan namin ang mga dropdown ng button, magagawa namin iyon.

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

Gumamit ng anumang button upang mag-trigger ng dropdown na menu sa pamamagitan ng paglalagay nito sa loob ng isang .btn-groupat pagbibigay ng wastong markup ng menu.

Dependency ng plugin

Ang mga dropdown ng button ay nangangailangan ng dropdown na plugin na isama sa iyong bersyon ng Bootstrap.

Mga dropdown ng solong button

Gawing dropdown toggle ang isang button na may ilang pangunahing pagbabago sa 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>

Mga split button na dropdown

Katulad nito, lumikha ng mga dropdown ng split button na may parehong mga pagbabago sa markup, gamit lamang ang isang hiwalay na button.

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

Pagsusukat

Gumagana ang mga dropdown ng button sa mga button ng lahat ng laki.

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

Pag-iiba ng dropup

I-trigger ang mga dropdown na menu sa itaas ng mga elemento sa pamamagitan ng pagdaragdag .dropupsa parent.

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

Palawakin ang mga kontrol sa form sa pamamagitan ng pagdaragdag ng text o mga button bago, pagkatapos, o sa magkabilang panig ng anumang text-based <input>. Gumamit ng .input-groupisang .input-group-addono .input-group-btnpara i-prepend o idagdag ang mga elemento sa isang solong .form-control.

Tekstwal `<input>`lamang

Iwasang gumamit <select>ng mga elemento dito dahil hindi sila ganap na mai-istilo sa mga browser ng WebKit.

Iwasan ang paggamit <textarea>ng mga elemento dito dahil ang kanilang rowskatangian ay hindi igagalang sa ilang mga kaso.

Ang mga tooltip at popover sa mga input group ay nangangailangan ng espesyal na setting

Kapag gumagamit ng mga tooltip o popovers sa mga elemento sa loob ng isang .input-group, kakailanganin mong tukuyin ang opsyon container: 'body'upang maiwasan ang mga hindi gustong side effect (tulad ng lumalawak na elemento at/o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip o popover).

Huwag ihalo sa iba pang mga sangkap

Huwag direktang paghaluin ang mga pangkat ng form o grid column sa mga pangkat ng input. Sa halip, ilagay ang pangkat ng input sa loob ng pangkat ng form o elementong nauugnay sa grid.

Palaging magdagdag ng mga label

Magkakaroon ng problema ang mga screen reader sa iyong mga form kung hindi ka magsasama ng label para sa bawat input. Para sa mga input group na ito, tiyaking ang anumang karagdagang label o functionality ay naihatid sa mga pantulong na teknolohiya.

Ang eksaktong pamamaraan na gagamitin (nakikitang mga <label>elemento, <label>mga elementong nakatago gamit ang .sr-onlyklase, o paggamit ng aria-label, aria-labelledby, aria-describedby, titleo placeholderattribute) at kung anong karagdagang impormasyon ang kailangang maihatid ay mag-iiba depende sa eksaktong uri ng interface widget na iyong ipinapatupad. Ang mga halimbawa sa seksyong ito ay nagbibigay ng ilang iminungkahing paraan na partikular sa kaso.

Pangunahing halimbawa

Maglagay ng isang add-on o button sa magkabilang gilid ng isang input. Maaari mo ring ilagay ang isa sa magkabilang panig ng isang input.

Hindi namin sinusuportahan ang maramihang mga add-on ( .input-group-addono .input-group-btn) sa iisang panig.

Hindi namin sinusuportahan ang maramihang mga form-control sa iisang input group.

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

Pagsusukat

Idagdag ang mga kamag-anak na klase ng pagpapalaki ng form sa .input-groupsarili nito at ang mga nilalaman sa loob ay awtomatikong magre-resize—hindi na kailangang ulitin ang mga klase sa laki ng control ng form sa bawat 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>

Mga checkbox at radio addon

Ilagay ang anumang checkbox o opsyon sa radyo sa loob ng addon ng isang input group sa halip na text.

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

Mga addon ng pindutan

Ang mga pindutan sa mga pangkat ng pag-input ay medyo naiiba at nangangailangan ng isang dagdag na antas ng nesting. Sa halip na .input-group-addon, kakailanganin mong gamitin .input-group-btnupang i-wrap ang mga button. Kinakailangan ito dahil sa mga default na istilo ng browser na hindi ma-override.

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

Mga pindutan na may mga 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 -->

Mga naka-segment na button

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

Maramihang mga pindutan

Bagama't maaari ka lamang magkaroon ng isang add-on sa bawat panig, maaari kang magkaroon ng maraming button sa loob ng iisang .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>

Ang mga Nav na available sa Bootstrap ay may nakabahaging markup, simula sa batayang .navklase, gayundin sa mga nakabahaging estado. Magpalit ng mga klase ng modifier upang lumipat sa pagitan ng bawat istilo.

Ang paggamit ng navs para sa mga tab panel ay nangangailangan ng JavaScript tabs plugin

Para sa mga tab na may mga tab na lugar, dapat mong gamitin ang plugin ng mga tab na JavaScript . Mangangailangan din ang markup ng mga karagdagang roleat ARIA attribute – tingnan ang halimbawang markup ng plugin para sa karagdagang detalye.

Gawing naa-access ang mga nav na ginamit bilang nabigasyon

Kung gumagamit ka ng mga nav upang magbigay ng navigation bar, tiyaking magdagdag ng isang role="navigation"sa pinakalohikal na lalagyan ng magulang ng <ul>, o ibalot ang isang <nav>elemento sa buong nabigasyon. Huwag idagdag ang tungkulin sa <ul>sarili nito, dahil mapipigilan ito na maipahayag bilang isang aktwal na listahan ng mga pantulong na teknolohiya.

Mga tab

Tandaan na ang .nav-tabsklase ay nangangailangan ng .navbatayang klase.

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

Pills

Kunin ang parehong HTML, ngunit gamitin.nav-pills sa halip ang:

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

Ang mga tabletas ay patayong nasasalansan din. Idagdag mo lang .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Nabigyang-katwiran

Madaling gumawa ng mga tab o tableta na katumbas ng lapad ng kanilang magulang sa mga screen na mas malawak kaysa sa 768px na may .nav-justified. Sa mas maliliit na screen, nakasalansan ang mga nav link.

Kasalukuyang hindi sinusuportahan ang mga justified navbar nav link.

Safari at tumutugon sa mga makatwirang nav

Simula sa v9.1.2, nagpapakita ang Safari ng bug kung saan pahalang ang pagbabago ng laki ng iyong browser ay nagdudulot ng mga error sa pag-render sa justified nav na na-clear kapag nagre-refresh. Ang bug na ito ay ipinapakita din sa justified nav na halimbawa .

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

Mga naka-disable na link

Para sa anumang bahagi ng nav (mga tab o tableta), magdagdag .disabledpara sa mga gray na link at walang hover effect .

Hindi naapektuhan ang functionality ng link

Babaguhin lamang ng klase na ito ang <a>hitsura ng 's, hindi ang functionality nito. Gumamit ng custom na JavaScript upang huwag paganahin ang mga link dito.

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

Paggamit ng mga dropdown

Magdagdag ng mga dropdown na menu na may kaunting dagdag na HTML at ang dropdown na JavaScript plugin .

Mga tab na may mga 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>

Mga tabletang may dropdown

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

Ang mga Navbar ay tumutugon na mga bahagi ng meta na nagsisilbing mga header ng nabigasyon para sa iyong application o site. Nagsisimula silang mag-collapse (at maaaring i-toggle) sa mga mobile view at maging pahalang habang tumataas ang lapad ng available na viewport.

Kasalukuyang hindi sinusuportahan ang mga justified navbar nav link.

Umaapaw na nilalaman

Dahil hindi alam ng Bootstrap kung gaano karaming espasyo ang kailangan ng content sa iyong navbar, maaari kang magkaroon ng mga isyu sa pagbalot ng content sa pangalawang row. Upang malutas ito, maaari mong:

Bawasan ang dami o lapad ng navbar item.
Itago ang ilang partikular na item sa navbar sa ilang partikular na laki ng screen gamit ang mga tumutugong utility class .
Baguhin ang punto kung saan lumipat ang iyong navbar sa pagitan ng collapsed at horizontal mode. I-customize ang @grid-float-breakpointvariable o magdagdag ng sarili mong query sa media.

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

Palitan ang navbar brand ng sarili mong larawan sa pamamagitan ng pagpapalit ng text para sa isang <img>. Dahil ang .navbar-brandmay sariling padding at taas, maaaring kailanganin mong i-override ang ilang CSS depende sa iyong larawan.

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

Ilagay ang nilalaman ng form sa loob .navbar-formpara sa tamang patayong pagkakahanay at pag-collapse na gawi sa makitid na viewport. Gamitin ang mga opsyon sa pag-align upang magpasya kung saan ito nakatira sa loob ng nilalaman ng navbar.

Bilang isang ulo, .navbar-formibinabahagi ang karamihan sa code nito sa .form-inlinepamamagitan ng mixin. Ang ilang mga kontrol sa form, tulad ng mga pangkat ng pag-input, ay maaaring mangailangan ng mga nakapirming lapad upang maipakita nang maayos sa loob ng isang 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>

Palaging magdagdag ng mga label

Magkakaroon ng problema ang mga screen reader sa iyong mga form kung hindi ka magsasama ng label para sa bawat input. Para sa mga inline na form na ito, maaari mong itago ang mga label gamit ang .sr-onlyklase. May mga karagdagang alternatibong paraan ng pagbibigay ng label para sa mga pantulong na teknolohiya, gaya ng aria-label, aria-labelledbyo titleattribute. Kung wala sa mga ito, maaaring gamitin ng mga screen reader ang placeholderkatangian, kung mayroon, ngunit tandaan na ang paggamit ng placeholderbilang kapalit para sa iba pang paraan ng pag-label ay hindi pinapayuhan.

Idagdag ang .navbar-btnklase sa mga <button>elementong hindi naninirahan sa isang <form>upang patayong isentro ang mga ito sa navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

I-wrap ang mga string ng text sa isang elemento na may .navbar-text, kadalasan sa isang <p>tag para sa wastong pangunguna at kulay.

<p class="navbar-text">Signed in as Mark Otto</p>

Para sa mga taong gumagamit ng mga karaniwang link na wala sa regular na bahagi ng navigation ng navbar, gamitin ang .navbar-linkklase upang magdagdag ng mga wastong kulay para sa default at inverse na mga opsyon sa navbar.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

I-align ang mga nav link, form, button, o text, gamit ang .navbar-lefto .navbar-rightutility classes. Ang parehong mga klase ay magdaragdag ng CSS float sa tinukoy na direksyon. Halimbawa, upang ihanay ang mga link sa nav, ilagay ang mga ito sa isang hiwalay <ul>na may naaangkop na klase ng utility.

Ang mga klase na ito ay mga mixin-ed na bersyon ng .pull-leftat .pull-right, ngunit saklaw ang mga ito sa mga query sa media para sa mas madaling pangangasiwa ng mga bahagi ng navbar sa mga laki ng device.

Magdagdag .navbar-fixed-topat magsama ng nilalaman ng .containero .container-fluidsa gitna at pad navbar.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Kinakailangan ang body padding

Ipapatong ng nakapirming navbar ang iyong iba pang nilalaman, maliban kung idaragdag mo paddingsa tuktok ng <body>. Subukan ang iyong sariling mga halaga o gamitin ang aming snippet sa ibaba. Tip: Bilang default, ang navbar ay 50px ang taas.

body { padding-top: 70px; }

Tiyaking isama ito pagkatapos ng pangunahing Bootstrap CSS.

Magdagdag .navbar-fixed-bottomat magsama ng nilalaman ng .containero .container-fluidsa gitna at pad navbar.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Kinakailangan ang body padding

Ipapatong ng nakapirming navbar ang iyong iba pang nilalaman, maliban kung idaragdag mo paddingsa ibaba ng <body>. Subukan ang iyong sariling mga halaga o gamitin ang aming snippet sa ibaba. Tip: Bilang default, ang navbar ay 50px ang taas.

body { padding-bottom: 70px; }

Tiyaking isama ito pagkatapos ng pangunahing Bootstrap CSS.

Gumawa ng full-width navbar na nag-i-scroll palayo sa page sa pamamagitan ng pagdaragdag .navbar-static-topat pagsasama ng nilalaman ng .containero .container-fluidsa gitna at pad navbar.

Hindi tulad ng mga .navbar-fixed-*klase, hindi mo kailangang baguhin ang anumang padding sa body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Baguhin ang hitsura ng navbar sa pamamagitan ng pagdaragdag ng .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Mga mumo ng tinapay

Ipahiwatig ang kasalukuyang lokasyon ng pahina sa loob ng isang hierarchy ng pag-navigate.

Awtomatikong idinaragdag ang mga separator sa CSS sa pamamagitan ng :beforeat content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagbilang ng pahina

Magbigay ng mga link ng pagination para sa iyong site o app gamit ang bahagi ng pagination ng maraming pahina, o ang mas simpleng alternatibong pager .

Default na pagination

Simpleng pagination na inspirasyon ng Rdio, mahusay para sa mga app at resulta ng paghahanap. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-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>

Paglalagay ng label sa bahagi ng pagination

Ang bahagi ng pagination ay dapat na nakabalot sa isang <nav>elemento upang matukoy ito bilang isang seksyon ng nabigasyon para sa mga screen reader at iba pang mga pantulong na teknolohiya. Bilang karagdagan, dahil ang isang pahina ay malamang na mayroon nang higit sa isang seksyon ng nabigasyon (tulad ng pangunahing nabigasyon sa header, o isang sidebar navigation), ipinapayong magbigay ng isang mapaglarawang aria-labelkung <nav>saan sumasalamin sa layunin nito. Halimbawa, kung ang bahagi ng pagination ay ginagamit upang mag-navigate sa pagitan ng isang hanay ng mga resulta ng paghahanap, ang isang naaangkop na label ay maaaring aria-label="Search results pages".

Hindi pinagana at aktibong estado

Nako-customize ang mga link para sa iba't ibang pagkakataon. Gamitin .disabledpara sa mga hindi naki-click na link at .activeupang ipahiwatig ang kasalukuyang pahina.

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

Inirerekomenda namin na magpalit ka ng aktibo o hindi pinaganang mga anchor para sa <span>, o alisin ang anchor sa kaso ng nauna/susunod na mga arrow, upang alisin ang pag-andar ng pag-click habang pinapanatili ang mga nilalayong istilo.

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

Pagsusukat

Gusto mo ba ng mas malaki o mas maliit na pagination? Magdagdag .pagination-lgo .pagination-smpara sa mga karagdagang laki.

<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

Mabilis na nakaraan at susunod na mga link para sa mga simpleng pagpapatupad ng pagination na may magaan na markup at mga istilo. Ito ay mahusay para sa mga simpleng site tulad ng mga blog o magazine.

Default na halimbawa

Bilang default, ang pager ay nakasentro sa mga link.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Nakahanay na mga link

Bilang kahalili, maaari mong ihanay ang bawat link sa mga gilid:

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

Opsyonal na estadong may kapansanan

Ginagamit din ng mga link ng pager ang pangkalahatang .disabledklase ng utility mula sa 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>

Halimbawa

Halimbawa ng heading Bago

<h3>Example heading <span class="label label-default">New</span></h3>

Magagamit na mga pagkakaiba-iba

Magdagdag ng alinman sa mga nabanggit na klase ng modifier sa ibaba upang baguhin ang hitsura ng isang label.

Default Pangunahing Tagumpay Impormasyon Babala Panganib

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

May mga toneladang label?

Maaaring lumitaw ang mga problema sa pag-render kapag mayroon kang dose-dosenang mga inline na label sa loob ng isang makitid na lalagyan, bawat isa ay naglalaman ng sarili nitong inline-blockelemento (tulad ng isang icon). Ang paraan sa paligid na ito ay setting display: inline-block;. Para sa konteksto at isang halimbawa, tingnan ang #13219 .

Madaling i-highlight ang mga bago o hindi pa nababasang mga item sa pamamagitan ng pagdaragdag ng <span class="badge">sa mga link, Bootstrap navs, at higit pa.

Inbox42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Pagbagsak ng sarili

Kapag walang bago o hindi pa nababasang mga item, babagsak lang ang mga badge (sa pamamagitan ng :emptytagapili ng CSS) kung walang nilalamang umiiral sa loob.

Cross-browser compatibility

Hindi magko-collapse ang mga badge sa Internet Explorer 8 dahil kulang ito ng suporta para sa :emptyselector.

Iniangkop sa mga aktibong estado ng nav

Kasama ang mga built-in na istilo para sa paglalagay ng mga badge sa mga aktibong estado sa mga nabigasyon ng tableta.

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

Isang magaan, flexible na bahagi na maaaring opsyonal na mapalawak ang buong viewport upang maipakita ang pangunahing nilalaman sa iyong site.

Hello, mundo!

Ito ay isang simpleng yunit ng bayani, isang simpleng sangkap na istilo ng jumbotron para sa pagtawag ng karagdagang atensyon sa itinatampok na nilalaman o impormasyon.

Matuto pa

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

Upang gawing buong lapad ang jumbotron, at walang mga bilugan na sulok, ilagay ito sa labas ng lahat .containerng s at sa halip ay magdagdag ng .containerloob.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Isang simpleng shell para sa isang h1naaangkop na espasyo at i-segment ang mga seksyon ng nilalaman sa isang pahina. Maaari nitong gamitin ang h1default smallna elemento ng 's, pati na rin ang karamihan sa iba pang mga bahagi (na may mga karagdagang istilo).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Palawakin ang grid system ng Bootstrap gamit ang thumbnail component para madaling magpakita ng mga grid ng mga larawan, video, text, at higit pa.

Kung naghahanap ka ng mala- Pinterest na presentasyon ng mga thumbnail na may iba't ibang taas at/o lapad, kakailanganin mong gumamit ng third-party na plugin gaya ng Masonry , Isotope , o Salvattore .

Default na halimbawa

Bilang default, ang mga thumbnail ng Bootstrap ay idinisenyo upang ipakita ang mga naka-link na larawan na may kaunting kinakailangang markup.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Custom na nilalaman

Sa kaunting dagdag na markup, posibleng magdagdag ng anumang uri ng nilalamang HTML tulad ng mga heading, talata, o mga button sa mga thumbnail.

Label ng thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Pindutan Pindutan

Label ng thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Pindutan Pindutan

Label ng thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Pindutan Pindutan

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

Magbigay ng mga mensahe ng feedback ayon sa konteksto para sa mga karaniwang pagkilos ng user na may kakaunting available at flexible na mensahe ng alerto.

Mga halimbawa

I-wrap ang anumang text at isang opsyonal na dismiss button .alertat isa sa apat na contextual classes (hal, .alert-success) para sa mga basic alert messages.

Walang default na klase

Ang mga alerto ay walang mga default na klase, tanging mga base at modifier na klase lamang. Ang isang default na gray na alerto ay hindi masyadong makabuluhan, kaya kailangan mong tumukoy ng isang uri sa pamamagitan ng contextual class. Pumili mula sa tagumpay, impormasyon, babala, o panganib.

Magaling! Matagumpay mong nabasa ang mahalagang mensahe ng alerto na ito.

Heads up! Kailangan ng alertong ito ang iyong atensyon, ngunit hindi ito sobrang mahalaga.

Babala! Better check yourself, hindi ka masyadong maganda.

Ay snap! Baguhin ang ilang bagay at subukang isumite muli.

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

Mga natatanggal na alerto

Bumuo sa anumang alerto sa pamamagitan ng pagdaragdag ng opsyonal .alert-dismissibleat close na button.

Nangangailangan ng JavaScript alert plugin

Para sa ganap na paggana, mga natatanggal na alerto, dapat mong gamitin ang alerto JavaScript plugin .

Babala! Better check yourself, hindi ka masyadong maganda.

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

Tiyakin ang wastong pag-uugali sa lahat ng device

Tiyaking gamitin ang <button>elementong may data-dismiss="alert"katangian ng data.

Mga link sa mga alerto

Gamitin ang .alert-linkutility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang alerto.

Magaling! Matagumpay mong nabasa ang mahalagang mensahe ng alerto na ito .

Heads up! Kailangan ng alertong ito ang iyong atensyon , ngunit hindi ito sobrang mahalaga.

Babala! Better check yourself, hindi ka masyadong maganda .

Ay snap! Baguhin ang ilang bagay at subukang isumite muli.

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

Magbigay ng up-to-date na feedback sa pag-usad ng isang workflow o aksyon na may simple ngunit flexible na progress bar.

Cross-browser compatibility

Gumagamit ang mga progress bar ng CSS3 na mga transition at animation upang makamit ang ilan sa kanilang mga epekto. Ang mga tampok na ito ay hindi suportado sa Internet Explorer 9 at mas mababa o mas lumang mga bersyon ng Firefox. Hindi sinusuportahan ng Opera 12 ang mga animation.

Pagkatugma sa Content Security Policy (CSP).

Kung ang iyong website ay may Content Security Policy (CSP) na hindi pinapayagan ang style-src 'unsafe-inline', hindi mo magagamit ang mga inline stylena katangian upang magtakda ng mga lapad ng progress bar gaya ng ipinapakita sa aming mga halimbawa sa ibaba. Kasama sa mga alternatibong paraan para sa pagtatakda ng mga lapad na katugma sa mga mahigpit na CSP ang paggamit ng kaunting custom na JavaScript (na nagtatakda element.style.width) o paggamit ng mga custom na klase ng CSS.

Pangunahing halimbawa

Default na progress bar.

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

May label

Alisin ang <span>with .sr-onlyclass mula sa progress bar para magpakita ng nakikitang porsyento.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Upang matiyak na ang teksto ng label ay mananatiling nababasa kahit na sa mababang porsyento, isaalang-alang ang pagdaragdag ng a min-widthsa progress bar.

0%

2%

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

Mga alternatibo sa konteksto

Gumagamit ang mga progress bar ng ilan sa parehong button at mga alertong klase para sa mga pare-parehong istilo.

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

may guhit

Gumagamit ng gradient para gumawa ng striped effect. Hindi available sa IE9 at sa ibaba.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animated

Idagdag .activesa .progress-bar-stripedupang i-animate ang mga guhit mula kanan pakaliwa. Hindi available sa IE9 at sa ibaba.

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

Nakasalansan

Maglagay ng maramihang mga bar sa pareho .progressupang i-stack ang mga ito.

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

Mga abstract na istilo ng object para sa pagbuo ng iba't ibang uri ng mga bahagi (tulad ng mga komento sa blog, Tweet, atbp) na nagtatampok ng kaliwa o kanang-align na larawan kasama ng textual na nilalaman.

Default na media

Ang default na media ay nagpapakita ng isang media object (mga imahe, video, audio) sa kaliwa o kanan ng isang block ng nilalaman.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Ang mga klase .pull-leftat .pull-rightmayroon ding at dati nang ginamit bilang bahagi ng bahagi ng media, ngunit hindi na ginagamit para sa paggamit na iyon simula sa v3.3.0. Ang mga ito ay humigit-kumulang katumbas ng .media-leftat .media-right, maliban na .media-rightdapat ilagay pagkatapos ng .media-bodysa html.

Pag-align ng media

Ang mga larawan o iba pang media ay maaaring ihanay sa itaas, gitna, o ibaba. Ang default ay nakahanay sa itaas.

Nangungunang nakahanay na media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Gitnang nakahanay na media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nakahanay sa ibabang media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Listahan ng media

Sa kaunting dagdag na markup, maaari mong gamitin ang media sa loob ng listahan (kapaki-pakinabang para sa mga thread ng komento o listahan ng mga artikulo).

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Ang mga pangkat ng listahan ay isang nababaluktot at makapangyarihang bahagi para sa pagpapakita hindi lamang ng mga simpleng listahan ng mga elemento, kundi ng mga kumplikadong may custom na nilalaman.

Pangunahing halimbawa

Ang pinakapangunahing pangkat ng listahan ay isang hindi nakaayos na listahan na may mga item sa listahan, at ang mga wastong klase. Buuin ito gamit ang mga sumusunod na opsyon, o ang iyong sariling CSS kung kinakailangan.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at 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>

Mga badge

Idagdag ang bahagi ng mga badge sa anumang item ng pangkat ng listahan at awtomatiko itong ipoposisyon sa kanan.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Mga naka-link na item

I-link ang mga item ng pangkat ng listahan sa pamamagitan ng paggamit ng mga anchor tag sa halip na mga item sa listahan (na nangangahulugan din ng isang magulang <div>sa halip na isang <ul>). Hindi na kailangan para sa mga indibidwal na magulang sa paligid ng bawat elemento.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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

Button item

Ang mga item sa listahan ng pangkat ay maaaring mga pindutan sa halip na mga item sa listahan (na nangangahulugan din ng isang magulang <div>sa halip na isang <ul>). Hindi na kailangan para sa mga indibidwal na magulang sa paligid ng bawat elemento. Huwag gamitin ang mga karaniwang .btnklase dito.

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

Mga item na hindi pinagana

Idagdag .disabledsa isang .list-group-itemupang i-gray ito upang lumitaw na hindi pinagana.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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

Mga klase sa konteksto

Gumamit ng mga contextual class para mag-istilo ng mga item sa listahan, default o naka-link. Kasama rin ang .activeestado.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at 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>

Custom na nilalaman

Magdagdag ng halos anumang HTML sa loob, kahit para sa mga naka-link na pangkat ng listahan tulad ng nasa ibaba.

Ilista ang heading ng item ng pangkat

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Ilista ang heading ng item ng pangkat

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Ilista ang heading ng item ng pangkat

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Bagama't hindi palaging kinakailangan, minsan kailangan mong ilagay ang iyong DOM sa isang kahon. Para sa mga sitwasyong iyon, subukan ang bahagi ng panel.

Pangunahing halimbawa

Bilang default, ang lahat ng .panelginagawa ay ilapat ang ilang pangunahing hangganan at padding upang maglaman ng ilang nilalaman.

Halimbawa ng pangunahing panel

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel na may heading

Madaling magdagdag ng lalagyan ng heading sa iyong panel na may .panel-heading. Maaari mo ring isama ang anuman <h1>- na <h6>may .panel-titleklase upang magdagdag ng paunang istilong heading. Gayunpaman, ang mga laki ng font ng <h1>- <h6>ay na-override ng .panel-heading.

Para sa wastong pangkulay ng link, tiyaking maglagay ng mga link sa mga heading sa loob ng .panel-title.

Panel heading na walang pamagat

Nilalaman ng panel

Pamagat ng panel

Nilalaman ng 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 na may footer

I-wrap ang mga button o pangalawang text sa .panel-footer. Tandaan na ang mga footer ng panel ay hindi nagmamana ng mga kulay at hangganan kapag gumagamit ng mga variation ayon sa konteksto dahil hindi nila inilaan na nasa foreground.

Nilalaman ng panel

Footer ng panel

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Mga alternatibo sa konteksto

Tulad ng iba pang mga bahagi, madaling gawing mas makabuluhan ang isang panel sa isang partikular na konteksto sa pamamagitan ng pagdaragdag ng alinman sa mga klase ng estado sa konteksto.

Pamagat ng panel

Nilalaman ng panel

Pamagat ng panel

Nilalaman ng panel

Pamagat ng panel

Nilalaman ng panel

Pamagat ng panel

Nilalaman ng panel

Pamagat ng panel

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

May mga mesa

Magdagdag ng anumang non-bordered .tablesa loob ng isang panel para sa isang seamless na disenyo. Kung mayroong .panel-body, nagdaragdag kami ng dagdag na hangganan sa tuktok ng talahanayan para sa paghihiwalay.

Heading ng panel

Ilang default na nilalaman ng panel dito. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Kung walang panel body, ang component ay lilipat mula sa panel header papunta sa table nang walang pagkaantala.

Heading ng panel

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Sa mga pangkat ng listahan

Madaling isama ang buong lapad na mga pangkat ng listahan sa loob ng anumang panel.

Heading ng panel

Ilang default na nilalaman ng panel dito. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at 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>

Pahintulutan ang mga browser na tukuyin ang mga dimensyon ng video o slideshow batay sa lapad ng kanilang naglalaman ng block sa pamamagitan ng paggawa ng intrinsic ratio na wastong magsusukat sa anumang device.

Direktang inilalapat ang mga panuntunan sa <iframe>, <embed>, <video>, at mga <object>elemento; opsyonal na gumamit ng tahasang descendant class .embed-responsive-itemkapag gusto mong itugma ang styling para sa iba pang attribute.

Pro-Tip! Hindi mo na kailangang isama frameborder="0"sa iyong <iframe>s dahil ine-override namin iyon para sa iyo.

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

Default na rin

Gamitin ang balon bilang simpleng epekto sa isang elemento upang bigyan ito ng inset na epekto.

Tingnan mo, nasa balon ako!

<div class="well">...</div>

Opsyonal na mga klase

Kontrolin ang padding at mga bilugan na sulok na may dalawang opsyonal na klase ng modifier.

Tingnan mo, nasa isang malaking balon ako!

<div class="well well-lg">...</div>

Tingnan mo, nasa maliit na balon ako!

<div class="well well-sm">...</div>

Mga bahagi

Mga Glyphicon

Magagamit na mga glyph

Paano gamitin

Huwag ihalo sa iba pang mga sangkap

Para lamang gamitin sa mga walang laman na elemento

Pagbabago ng lokasyon ng font ng icon

Mga naa-access na icon

Mga halimbawa

Mga dropdown

Halimbawa

Pag-align

Maaaring mangailangan ng karagdagang pagpoposisyon

Hindi na ginagamit na .pull-rightpagkakahanay

Mga header

Divider

Hindi pinagana ang mga item sa menu

Mga pangkat ng pindutan

Ang mga tooltip at popover sa mga pangkat ng button ay nangangailangan ng espesyal na setting

Tiyaking tama roleat magbigay ng label

Pangunahing halimbawa

Toolbar ng pindutan

Pagsusukat

Pugad

Vertical variation

Nabigyang-katwiran ang mga pangkat ng pindutan

Paghawak ng mga hangganan

IE8 at mga hangganan

Sa <a>mga elemento

Mga link na kumikilos bilang mga pindutan

Sa <button>mga elemento

Mga dropdown ng button

Dependency ng plugin

Mga dropdown ng solong button

Mga split button na dropdown

Pagsusukat

Pag-iiba ng dropup

Mga pangkat ng input

Tekstwal <input>lamang

Ang mga tooltip at popover sa mga input group ay nangangailangan ng espesyal na setting

Huwag ihalo sa iba pang mga sangkap

Palaging magdagdag ng mga label

Pangunahing halimbawa

Pagsusukat

Mga checkbox at radio addon

Mga addon ng pindutan

Mga pindutan na may mga dropdown

Mga naka-segment na button

Maramihang mga pindutan

Navs

Ang paggamit ng navs para sa mga tab panel ay nangangailangan ng JavaScript tabs plugin

Gawing naa-access ang mga nav na ginamit bilang nabigasyon

Mga tab

Pills

Nabigyang-katwiran

Safari at tumutugon sa mga makatwirang nav

Mga naka-disable na link

Hindi naapektuhan ang functionality ng link

Paggamit ng mga dropdown

Mga tab na may mga dropdown

Mga tabletang may dropdown

Navbar

Default na navbar

Umaapaw na nilalaman

Nangangailangan ng JavaScript plugin

Pagbabago sa na-collapse na mobile navbar breakpoint

Gawing naa-access ang mga navbar

Larawan ng brand

Mga porma

Mga babala sa mobile device

Palaging magdagdag ng mga label

Mga Pindutan

Paggamit na tukoy sa konteksto

Text

Mga link na hindi nav

Pag-align ng bahagi

I-right aligning ng maraming bahagi

Naayos sa itaas

Kinakailangan ang body padding

Naayos hanggang sa ibaba

Hindi na ginagamit na `.pull-right`pagkakahanay

Tiyaking tama `role`at magbigay ng label

Sa `<a>`mga elemento

Sa `<button>`mga elemento

Tekstwal `<input>`lamang