glyphs sadia

Ngawengku leuwih 250 glyphs dina format font ti Glyphicon Halflings set. Glyphicons Halflings biasana henteu sayogi gratis, tapi panyipta na parantos nyayogikeunana pikeun Bootstrap gratis. Salaku hatur nuhun, kami ngan naroskeun anjeun ngalebetkeun tautan deui ka Glyphicons sabisana.

glyphicon glyphicon-asterisk
glyphicon glyphicon-tambah
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-awan
glyphicon glyphicon-amplop
glyphicon glyphicon-pensil
glyphicon glyphicon-kaca
glyphicon glyphicon-musik
glyphicon glyphicon-search
glyphicon glyphicon-jantung
glyphicon glyphicon-béntang
glyphicon glyphicon-béntang-kosong
glyphicon glyphicon-pamaké
glyphicon glyphicon-pilem
glyphicon glyphicon-th-ageung
glyphicon glyphicon-th
glyphicon glyphicon-th-daptar
glyphicon glyphicon-ok
glyphicon glyphicon-ngahapus
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zum-kaluar
glyphicon glyphicon-off
glyphicon glyphicon-sinyal
glyphicon glyphicon-cog
glyphicon glyphicon-sampah
glyphicon glyphicon-imah
glyphicon glyphicon-file
glyphicon glyphicon-waktos
glyphicon glyphicon-jalan
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-koropak
glyphicon glyphicon-muter-bunderan
glyphicon glyphicon-ulang
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-konci
glyphicon glyphicon-bandéra
glyphicon glyphicon-headphone
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-handap
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-buku
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kaméra
glyphicon glyphicon-font
glyphicon glyphicon-kandel
glyphicon glyphicon-miring
glyphicon glyphicon-téks-jangkungna
glyphicon glyphicon-téks-lebar
glyphicon glyphicon-align-kénca
glyphicon glyphicon-align-center
glyphicon glyphicon-align-katuhu
glyphicon glyphicon-align-justify
glyphicon glyphicon-daptar
glyphicon glyphicon-indent-kénca
glyphicon glyphicon-indent-katuhu
glyphicon glyphicon-facetime-video
glyphicon glyphicon-gambar
glyphicon glyphicon-peta-spidol
glyphicon glyphicon-nyaluyukeun
glyphicon glyphicon-tint
glyphicon glyphicon-édit
glyphicon glyphicon-dibagikeun
glyphicon glyphicon-cek
glyphicon glyphicon-move
glyphicon glyphicon-step-mundur
glyphicon glyphicon-gancang-mundur
glyphicon glyphicon-mundur
glyphicon glyphicon-muter
glyphicon glyphicon-pause
glyphicon glyphicon-eureun
glyphicon glyphicon-hareup
glyphicon glyphicon-gancang-maju
glyphicon glyphicon-hambalan-hareup
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-kénca
glyphicon glyphicon-chevron-katuhu
glyphicon glyphicon-tambah-tanda
glyphicon glyphicon-minus-tanda
glyphicon glyphicon-ngahapus-tanda
glyphicon glyphicon-ok-tanda
glyphicon glyphicon-sual-tanda
glyphicon glyphicon-info-tanda
glyphicon glyphicon-screenshot
glyphicon glyphicon-ngahapus-bunderan
glyphicon glyphicon-ok-bunderan
glyphicon glyphicon-ban-bunderan
glyphicon glyphicon-panah-kénca
glyphicon glyphicon-panah-katuhu
glyphicon glyphicon-panah-up
glyphicon glyphicon-panah-handap
glyphicon glyphicon-share-alt
glyphicon glyphicon-ngubah ukuran-pinuh
glyphicon glyphicon-ngubah ukuran-leutik
glyphicon glyphicon-exclamation-tanda
glyphicon glyphicon-kado
glyphicon glyphicon-daun
glyphicon glyphicon-seuneu
glyphicon glyphicon-panon-muka
glyphicon glyphicon-panon-deukeut
glyphicon glyphicon-warning-tanda
glyphicon glyphicon-pesawat
glyphicon glyphicon-kalender
glyphicon glyphicon-acak
glyphicon glyphicon-koméntar
glyphicon glyphicon-magnét
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-handap
glyphicon glyphicon-retweet
glyphicon glyphicon-balanja-karanjang
glyphicon glyphicon-folder-nutup
glyphicon glyphicon-folder-buka
glyphicon glyphicon-ngubah ukuran-vertikal
glyphicon glyphicon-ngubah ukuran-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bel
glyphicon glyphicon-sertipikat
glyphicon glyphicon-jempol-up
glyphicon glyphicon-jempol-handap
glyphicon glyphicon-leungeun-katuhu
glyphicon glyphicon-leungeun-kénca
glyphicon glyphicon-leungeun-up
glyphicon glyphicon-leungeun-handap
glyphicon glyphicon-bunderan-panah-katuhu
glyphicon glyphicon-bunderan-panah-kénca
glyphicon glyphicon-bunderan-panah-up
glyphicon glyphicon-bunderan-panah-handap
glyphicon glyphicon-globe
glyphicon glyphicon-rengkuh
glyphicon glyphicon-tugas
glyphicon glyphicon-filter
glyphicon glyphicon-koper
glyphicon glyphicon-layar pinuh
glyphicon glyphicon-dasbor
glyphicon glyphicon-paperclip
glyphicon glyphicon-haté-kosong
glyphicon glyphicon-link
glyphicon glyphicon-telepon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alfabét
glyphicon glyphicon-sort-by-alfabét-alt
glyphicon glyphicon-urut-demi-urutan
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-urut-demi-atribut
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-teu dicentang
glyphicon glyphicon-ngalegaan
glyphicon glyphicon-runtuh-handap
glyphicon glyphicon-runtuh-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-kaluar
glyphicon glyphicon-anyar-jandela
glyphicon glyphicon-rékam
glyphicon glyphicon-simpen
glyphicon glyphicon-muka
glyphicon glyphicon-disimpen
glyphicon glyphicon-impor
glyphicon glyphicon-ékspor
glyphicon glyphicon-ngirim
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-disimpen
glyphicon glyphicon-floppy-ngahapus
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-muka
glyphicon glyphicon-kiridit-kartu
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-dikomprés
glyphicon glyphicon-earphone
glyphicon glyphicon-telepon-alt
glyphicon glyphicon-munara
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subjudul
glyphicon glyphicon-sora-stereo
glyphicon glyphicon-sora-dolby
glyphicon glyphicon-sora-5-1
glyphicon glyphicon-sora-6-1
glyphicon glyphicon-sora-7-1
glyphicon glyphicon-hak cipta-tanda
glyphicon glyphicon-pendaptaran-tanda
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tangkal-konifer
glyphicon glyphicon-tangkal-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-tingkat-up
glyphicon glyphicon-copy
glyphicon glyphicon-témpél
glyphicon glyphicon-awas
glyphicon glyphicon-ékualiser
glyphicon glyphicon-raja
glyphicon glyphicon-ratu
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-ksatria
glyphicon glyphicon-orok-rumus
glyphicon glyphicon-ténda
glyphicon glyphicon-papan
glyphicon glyphicon-ranjang
glyphicon glyphicon-apal
glyphicon glyphicon-ngahapus
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampu
glyphicon glyphicon-duplikat
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 skala glyphicon
glyphicon glyphicon-és-lolly
glyphicon glyphicon-és-lolly-rasa
glyphicon glyphicon-atikan
glyphicon glyphicon-pilihan-horizontal
glyphicon glyphicon-pilihan-vertikal
glyphicon glyphicon-menu-Hamburger
glyphicon glyphicon-modal-jandela
glyphicon glyphicon-minyak
glyphicon glyphicon-sisikian
glyphicon glyphicon-kacamata hideung
glyphicon glyphicon-téks-ukuran
glyphicon glyphicon-téks-warna
glyphicon glyphicon-text-background
glyphicon glyphicon-obyek-align-luhur
glyphicon glyphicon-obyek-align-handap
glyphicon glyphicon-obyek-align-horizontal
glyphicon glyphicon-obyek-align-kénca
glyphicon glyphicon-obyek-align-vertikal
glyphicon glyphicon-obyek-align-katuhu
glyphicon glyphicon-segitiga-katuhu
glyphicon glyphicon-segitiga-kénca
glyphicon glyphicon-segitiga-handap
glyphicon glyphicon-segitiga-luhureun
glyphicon glyphicon-konsol
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-kénca
glyphicon glyphicon-menu-katuhu
glyphicon glyphicon-menu-handap
glyphicon glyphicon-menu-up

Kumaha ngagunakeun

Pikeun alesan kinerja, sadaya ikon merlukeun kelas dasar jeung kelas ikon individu. Pikeun ngagunakeun, nempatkeun kodeu di handap ieu dimana waé. Pastikeun ninggalkeun spasi antara ikon jeung téks pikeun padding ditangtoskeun.

Ulah campur jeung komponén séjén

Kelas ikon teu bisa langsung digabungkeun jeung komponén séjén. Éta henteu kedah dianggo sareng kelas anu sanés dina unsur anu sami. Gantina, tambahkeun nested <span>sareng nerapkeun kelas ikon kana <span>.

Ngan pikeun pamakéan dina elemen kosong

Kelas ikon ngan kedah dianggo dina elemen anu henteu ngandung eusi téks sareng henteu gaduh elemen anak.

Ngarobah lokasi font ikon

Bootstrap nganggap file font ikon bakal aya dina ../fonts/diréktori, relatif ka file CSS anu disusun. Mindahkeun atanapi ngaganti nami file font hartosna ngamutahirkeun CSS ku salah sahiji tina tilu cara:

Ngarobah @icon-font-pathjeung/atawa @icon-font-namevariabel dina sumber file Kurang.
Anggo pilihan URL relatif anu disayogikeun ku kompiler Kurang.
Ngarobah url()jalur dina CSS disusun.

Anggo pilihan naon waé anu paling cocog sareng pangaturan pangembangan khusus anjeun.

Ikon diaksés

Téknologi asistén vérsi modéren bakal ngumumkeun eusi CSS anu dihasilkeun, ogé karakter Unicode khusus. Pikeun ngahindarkeun kaluaran anu teu dihaja sareng ngabingungkeun dina pamiarsa layar (utamana nalika ikon dianggo murni pikeun hiasan), kami nyumputkeun aranjeunna nganggo aria-hidden="true"atribut.

Upami Anjeun keur make ikon pikeun nepikeun harti (tinimbang ukur salaku unsur hiasan), pastikeun yén harti ieu ogé conveyed kana téhnologi assistive - misalna, kaasup eusi tambahan, visually disumputkeun jeung .sr-onlykelas.

Upami anjeun nyiptakeun kadali tanpa téks sanés (sapertos <button>anu ngan ukur ngandung ikon), anjeun kedah salawasna nyayogikeun eusi alternatif pikeun ngaidentipikasi tujuan kontrol, supados tiasa asup akal pikeun pangguna téknologi anu ngabantosan. Dina hal ieu, anjeun tiasa nambihan aria-labelatribut dina kadali sorangan.

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

Contona

Paké aranjeunna dina tombol, grup tombol pikeun toolbar, navigasi, atawa inputs formulir prepended.

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

Ikon anu dianggo dina ngageter pikeun ngirimkeun yén éta mangrupikeun pesen kasalahan, kalayan .sr-onlytéks tambahan pikeun ngirimkeun petunjuk ieu ka pangguna téknologi anu ngabantosan.

Asupkeun alamat surélék nu sah

<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, menu kontekstual pikeun mintonkeun daptar tumbu. Dijieun interaktif sareng dropdown JavaScript plugin .

Contona

Bungkus pemicu dropdown jeung menu dropdown dina .dropdown, atawa elemen séjén nu nyatakeun position: relative;. Lajeng nambahkeun HTML menu urang.

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

Menu dropdown bisa dirobah pikeun dilegakeun ka luhur (tinimbang ka handap) ku nambahkeun .dropupkana indungna.

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

Ngajajar

Sacara standar, menu dropdown otomatis diposisikan 100% ti luhur jeung sapanjang sisi kénca indungna. Tambahkeun .dropdown-menu-rightka .dropdown-menukatuhu align menu dropdown.

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

lulugu

Tambahkeun lulugu pikeun labél bagian tina lampah dina menu dropdown mana wae.

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

Pamisah

Tambahkeun divider pikeun misahkeun runtuyan Tumbu dina menu dropdown.

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

Item menu ditumpurkeun

Tambahkeun .disabledka a <li>dina dropdown pikeun nganonaktipkeun 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>

Grup runtuyan tombol babarengan dina garis tunggal jeung grup tombol. Tambahkeun on radio JavaScript pilihan jeung kabiasaan gaya kotak centang jeung tombol kami plugin .

Tooltips & popovers dina grup tombol merlukeun setelan husus

Lamun make tooltips atawa popovers on elemen dina a .btn-group, anjeun bakal kudu nangtukeun pilihan container: 'body'pikeun nyingkahan efek samping nu teu dihoyongkeun (saperti unsur tumuwuh lega tur/atawa kaleungitan juru rounded na nalika tooltip atawa popover dipicu).

Pastikeun leres `role`sareng masihan labél

Supados téknologi pitulung - sapertos pamiarsa layar - nepikeun yén runtuyan tombol dikelompokkeun, roleatribut anu luyu kedah disayogikeun. Pikeun grup tombol, ieu bakal role="group", sedengkeun tulbar kedah gaduh role="toolbar".

Hiji pangecualian nyaéta grup anu ngan ukur ngandung kontrol tunggal (contona grup tombol anu dibenerkeun sareng <button>elemen) atanapi dropdown.

Salaku tambahan, grup sareng tulbar kedah dipasihan labél anu eksplisit, sabab kalolobaan téknologi anu ngabantosan henteu bakal ngumumkeunana, sanaos ayana roleatribut anu leres. Dina conto anu disayogikeun di dieu, kami nganggo aria-label, tapi alternatif sapertos aria-labelledbyogé tiasa dianggo.

conto dasar

Bungkus runtuyan tombol kalawan .btndi .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>

Ngagabungkeun susunan <div class="btn-group">jadi a <div class="btn-toolbar">pikeun komponén leuwih kompleks.

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

Ukuran

Gantina nerapkeun kelas ukuran tombol ka unggal tombol dina grup, ngan tambahkeun .btn-group-*ka unggal .btn-group, kaasup nalika nyarang sababaraha grup.

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

Nyarang

Teundeun a .btn-groupdina sejen .btn-grouplamun rék menu dropdown dicampurkeun jeung runtuyan tombol.

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

Variasi nangtung

Jieun set tombol nembongan vertikal tumpuk tinimbang horizontal. Dropdown tombol pamisah teu dirojong di dieu.

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

Grup tombol diyakinkeun

Jieun grup tombol manteng dina ukuran sarua pikeun bentang sakabéh rubak indungna. Ogé jalan kalawan dropdowns tombol dina grup tombol.

Nanganan wates

Alatan HTML jeung CSS husus dipaké pikeun menerkeun tombol (nyaéta display: table-cell), wates antara aranjeunna dua kali. Dina grup tombol biasa, margin-left: -1pxdipaké pikeun tumpukan wates tinimbang nyoplokkeun aranjeunna. Nanging, marginhenteu tiasa dianggo sareng display: table-cell. Hasilna, gumantung kana kustomisasi anjeun ka Bootstrap, anjeun tiasa ngahapus atanapi ngawarnaan deui watesna.

IE8 jeung wates

Internet Explorer 8 teu nyieun wates on tombol dina grup tombol diyakinkeun, naha éta on <a>atawa <button>elemen. Pikeun ngurilingan éta, bungkus unggal tombol dina anu sanés .btn-group.

Tempo #12476 pikeun inpo nu leuwih lengkep.

Kalawan `<a>`elemen

Ngan mungkus runtuyan .btns di .btn-group.btn-group-justified.

Kénca Tengah Leres

Kénca Tengah

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

Tumbu akting salaku tombol

Lamun <a>elemen anu dipaké pikeun meta salaku tombol - triggering fungsionalitas di-kaca, tinimbang napigasi ka dokumen sejen atawa bagian dina kaca ayeuna - maranéhanana ogé kudu dibikeun hiji luyu role="button".

Kalawan `<button>`elemen

Pikeun make grup tombol diyakinkeun jeung <button>elemen, anjeun kudu mungkus unggal tombol dina grup tombol . Kaseueuran panyungsi henteu leres nerapkeun CSS kami pikeun leresan unsur- <button>unsur, tapi kumargi kami ngadukung turunna tombol, urang tiasa ngagarap éta.

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

Paké tombol naon mun pemicu mangrupa menu dropdown ku nempatkeun eta dina hiji .btn-groupjeung nyadiakeun ménu markup ditangtoskeun.

kagumantungan plugin

Tombol dropdowns merlukeun plugin dropdown pikeun kaasup dina versi anjeun tina Bootstrap.

Tunggal tombol dropdowns

Hurungkeun hiji tombol kana toggle dropdown kalawan sababaraha parobahan markup dasar.

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

Tombol pamisah dropdowns

Nya kitu, jieun dropdowns tombol pamisah jeung parobahan markup sarua, ngan ku tombol misah.

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

Ukuran

Tombol dropdown dianggo sareng tombol sadaya ukuran.

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

Variasi dropup

Micu ménu dropdown di luhur elemen ku nambahkeun .dropupkana indungna.

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

Manjangkeun kadali formulir ku cara nambahkeun téks atawa tombol saméméh, sanggeus, atawa dina dua sisi sagala téks basis <input>. Anggo .input-groupsareng .input-group-addonatanapi .input-group-btnpikeun nambihan atanapi nambihan elemen kana hiji .form-control.

Tékstual `<input>`s wungkul

Hindarkeun ngagunakeun <select>elemen di dieu sabab teu tiasa pinuh gaya dina browser WebKit.

Hindarkeun nganggo <textarea>elemen di dieu sabab rowsatributna moal dihargaan dina sababaraha kasus.

Tooltips & popovers dina grup input merlukeun setelan husus

Lamun make tooltips atawa popovers on elemen dina hiji .input-group, anjeun bakal kudu nangtukeun pilihan container: 'body'pikeun nyegah efek samping nu teu dihoyongkeun (saperti unsur tumuwuh lega jeung/atawa kaleungitan juru rounded na nalika tooltip atawa popover dipicu).

Ulah campur jeung komponén séjén

Ulah campur grup formulir atawa kelas kolom grid langsung jeung grup input. Gantina, sayang grup input di jero grup formulir atawa elemen nu patali grid.

Sok tambahkeun labél

Pamiarsa layar bakal gaduh masalah sareng formulir anjeun upami anjeun henteu ngalebetkeun labél pikeun unggal input. Pikeun grup input ieu, pastikeun yén sagala labél tambahan atawa fungsionalitas geus conveyed kana téhnologi mantuan.

Téhnik pasti anu bakal dianggo (elemen anu katingali <label>, <label>elemen anu disumputkeun nganggo .sr-onlykelas, atanapi nganggo aria-label, aria-labelledby, aria-describedby, titleatanapi placeholderatribut) sareng inpormasi tambahan naon anu kedah ditepikeun bakal rupa-rupa gumantung kana jinis widget antarmuka anu anjeun laksanakeun. Conto dina bagian ieu nyadiakeun sababaraha saran, pendekatan husus-kasus.

conto dasar

Pasang hiji tambihan atanapi tombol dina dua sisi input. Anjeun ogé tiasa nempatkeun hiji dina dua sisi input.

Kami henteu ngadukung sababaraha tambihan ( .input-group-addonatanapi .input-group-btn) dina hiji sisi.

Kami henteu ngadukung sababaraha kontrol bentuk dina grup input tunggal.

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

Ukuran

Nambahkeun kelas ukuran ukuran relatif ka .input-groupsorangan jeung eusi dina bakal otomatis ngatur ukuran-teu kudu ngulang kelas ukuran kontrol formulir dina unggal unsur.

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

Kotak centang sareng tambihan radio

Pasang kotak centang atanapi pilihan radio dina addon grup input tinimbang téks.

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

Addons tombol

Tombol dina grup input rada béda jeung merlukeun hiji tingkat tambahan nyarang. Gantina .input-group-addon, Anjeun bakal kedah nganggo .input-group-btnmungkus tombol. Ieu diperlukeun alatan gaya browser standar nu teu bisa overridden.

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

Tombol kalawan dropdowns

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

Tombol segmented

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

Sababaraha tombol

Sanaos anjeun ngan ukur tiasa gaduh hiji tambihan per sisi, anjeun tiasa gaduh sababaraha tombol dina hiji .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 sadia dina Bootstrap geus dibagikeun markup, dimimitian ku .navkelas dasar, kitu ogé nagara bagian dibagikeun. Swap kelas modifier pikeun pindah antara unggal gaya.

Ngagunakeun navs pikeun panels tab merlukeun JavaScript tab plugin

Pikeun tab kalawan wewengkon tabable, Anjeun kudu make tab JavaScript plugin . Markup ogé ngabutuhkeun roleatribut tambahan sareng ARIA - tingali markup conto plugin pikeun detil salajengna.

Jieun navs dipaké salaku navigasi diaksés

Upami Anjeun keur make navs nyadiakeun bar navigasi, pastikeun pikeun nambahkeun hiji role="navigation"wadah kolotna paling logis tina <ul>, atawa mungkus <nav>unsur sabudeureun sakabéh navigasi. Entong nambihan peran ka <ul>dirina, sabab ieu bakal nyegah diumumkeun salaku daptar aktual ku téknologi anu ngabantosan.

Tab

Catetan .nav-tabskelas merlukeun .navkelas dasar.

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

Pél

Candak HTML anu sami, tapi nganggo .nav-pills:

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

Pél ogé vertikal stackable. Ngan nambahan .nav-stacked.

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

Dibenerkeun

Gampang ngadamel tab atanapi pil anu lebarna sami sareng indungna dina layar anu langkung ageung tibatan 768px nganggo .nav-justified. Dina layar leutik, Tumbu nav tumpuk.

Tautan navbar anu dibenerkeun ayeuna henteu dirojong.

Safari sarta responsif navs diyakinkeun

Dina v9.1.2, Safari némbongkeun bug nu ngarobah ukuran panyungsi anjeun horisontal ngabalukarkeun kasalahan Rendering dina nav diyakinkeun nu diberesihan kana refreshing. bug ieu ogé ditémbongkeun dina conto nav diyakinkeun .

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

Tumbu ditumpurkeun

Pikeun komponén nav wae (tab atanapi pil), tambahkeun .disabledpikeun tumbu abu tur euweuh épék hover .

Fungsi link henteu kapangaruhan

kelas ieu ngan bakal ngarobah <a>'s penampilan, teu fungsionalitas na. Anggo JavaScript khusus pikeun nganonaktipkeun tautan di dieu.

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

Ngagunakeun dropdowns

Tambihkeun ménu lungsur sareng HTML tambahan sakedik sareng plugin JavaScript dropdowns .

Tab kalawan dropdowns

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

Pél kalawan 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>

Navbars mangrupikeun komponén meta responsif anu janten lulugu navigasi pikeun aplikasi atanapi situs anjeun. Aranjeunna mimiti rubuh (sareng tiasa togél) dina tampilan sélulér sareng janten horisontal nalika lebar viewport sayogi ningkat.

Tautan navbar anu dibenerkeun ayeuna henteu dirojong.

eusi overflowing

Kusabab Bootstrap henteu terang sabaraha rohangan anu diperyogikeun dina navbar anjeun, anjeun tiasa ngalaman masalah sareng bungkus eusi kana baris kadua. Pikeun ngabéréskeun ieu, anjeun tiasa:

Ngurangan jumlah atawa rubak item navbar.
Sumputkeun item navbar nu tangtu dina ukuran layar nu tangtu ngagunakeun kelas utiliti responsif .
Robah titik di mana navbar Anjeun pindah antara mode rubuh jeung horizontal. Sesuaikeun @grid-float-breakpointvariabel atanapi tambahkeun pamundut média anjeun nyalira.

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

Ngaganti merek navbar ku gambar anjeun sorangan ku swapping téks pikeun <img>. Kusabab éta .navbar-brandgaduh padding sareng jangkungna sorangan, anjeun panginten kedah nimpa sababaraha CSS gumantung kana gambar anjeun.

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

Teundeun eusi formulir dina .navbar-formpikeun alignment nangtung ditangtoskeun jeung kabiasaan rubuh dina viewports sempit. Paké pilihan alignment pikeun mutuskeun dimana eta resides dina eusi navbar.

Salaku huluna a, .navbar-formbabagi loba kode na kalawan .form-inlinevia mixin. Sababaraha kadali formulir, kawas grup input, bisa merlukeun rubak dibereskeun pikeun nembongkeun leres dina navbar a.

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

Sok tambahkeun labél

Pamiarsa layar bakal gaduh masalah sareng formulir anjeun upami anjeun henteu ngalebetkeun labél pikeun unggal input. Pikeun bentuk inline ieu, anjeun tiasa nyumputkeun labél nganggo .sr-onlykelas. Aya deui metode alternatif pikeun nyayogikeun labél pikeun téknologi pitulung, sapertos aria-label, aria-labelledbyatanapi titleatribut. Upami teu aya anu aya, pamiarsa layar tiasa nganggo placeholderatribut, upami aya, tapi perhatikeun yén panggunaan placeholdersalaku gaganti pikeun metode panyiri anu sanés henteu disarankeun.

Tambahkeun .navbar-btnkelas ka <button>elemen teu residing di a <form>vertikal puseur aranjeunna dina navbar nu.

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

Bungkus string téks dina unsur kalawan .navbar-text, biasana dina <p>tag pikeun kalungguhan ditangtoskeun jeung warna.

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

Pikeun jalma anu nganggo tautan standar anu henteu aya dina komponén navigasi navbar biasa, paké .navbar-linkkelas pikeun nambihan warna anu pas pikeun pilihan navbar standar sareng tibalik.

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

Align nav Tumbu, formulir, tombol, atawa téks, ngagunakeun .navbar-leftatawa .navbar-rightkelas utiliti. Kadua kelas bakal nambihan ngambang CSS dina arah anu ditangtukeun. Contona, pikeun align nav Tumbu, nempatkeun eta dina misah <ul>jeung kelas utiliti masing-masing dilarapkeun.

Kelas-kelas ieu mangrupikeun vérsi campuran .pull-leftsareng .pull-right, tapi aranjeunna kalebet kana patarosan média pikeun gampang nanganan komponén navbar dina ukuran alat.

Tambihkeun .navbar-fixed-topsareng kalebet eusi navbar .containeratanapi ka tengah sareng pad..container-fluid

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

Padding awak diperlukeun

Navbar tetep bakal overlay eusi Anjeun nu sejen, iwal mun ditambahkeun paddingka luhur <body>. Coba nilai anjeun sorangan atanapi nganggo snippet kami di handap. Tip: Sacara standar, navbar luhurna 50px.

body { padding-top: 70px; }

Pastikeun kalebet ieu saatos inti Bootstrap CSS.

Tambihkeun .navbar-fixed-bottomsareng kalebet eusi navbar .containeratanapi ka tengah sareng pad..container-fluid

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

Padding awak diperlukeun

Navbar tetep bakal overlay eusi Anjeun séjén, iwal mun ditambahkeun paddingka handap <body>. Coba nilai anjeun sorangan atanapi nganggo snippet kami di handap. Tip: Sacara standar, navbar luhurna 50px.

body { padding-bottom: 70px; }

Pastikeun kalebet ieu saatos inti Bootstrap CSS.

Jieun navbar pinuh-lebar nu ngagulung jauh jeung kaca ku nambahkeun .navbar-static-toptur ngawengku hiji .containeratawa .container-fluidka puseur jeung eusi navbar Pad.

Beda sareng .navbar-fixed-*kelas, anjeun henteu kedah ngarobih padding dina file body.

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

Robah tampilan navbar ku nambahkeun .navbar-inverse.

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

Breadcrumbs

Nunjukkeun lokasi kaca ayeuna dina hiji hirarki navigasi.

Separator otomatis ditambahkeun dina CSS ngaliwatan :beforena content.

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

Pagination

Nyadiakeun tautan pagination pikeun situs anjeun atanapi aplikasi sareng komponén pagination multi-halaman, atanapi alternatif pager anu langkung sederhana .

pagination standar

Pagination basajan anu diideuan ku Rdio, saé pikeun aplikasi sareng hasil pamilarian. Blok badag hésé sono, gampang scalable, sarta nyadiakeun wewengkon klik badag.

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

Labeling komponén pagination

Komponén pagination kedah dibungkus dina <nav>unsur pikeun ngaidentipikasi éta salaku bagian navigasi pikeun layar pamiarsa sareng téknologi pitulung sanés. Salaku tambahan, salaku halaman sigana gaduh langkung ti hiji bagian navigasi sapertos kitu (sapertos navigasi primér dina lulugu, atanapi navigasi sidebar), disarankeun pikeun masihan deskriptif aria-labelpikeun <nav>anu ngagambarkeun tujuanana. Contona, upami komponén pagination dipaké pikeun nganapigasi antara susunan hasil teangan, hiji labél luyu bisa jadi aria-label="Search results pages".

Kaayaan ditumpurkeun sareng aktip

Tumbu nu customizable pikeun kaayaan béda. Anggo .disabledpikeun tautan anu teu .activetiasa diklik sareng nunjukkeun halaman anu ayeuna.

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

Kami ngarékoméndasikeun yén anjeun swap kaluar anchors aktip atawa ditumpurkeun pikeun <span>, atawa ngaleungitkeun jangkar dina kasus saméméhna / panah salajengna, pikeun miceun fungsionalitas klik bari nahan gaya dimaksudkeun.

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

Ukuran

Fancy pagination gedé atawa leutik? Tambihkeun .pagination-lgatanapi .pagination-smkanggo ukuran tambahan.

<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

Tumbu saméméhna jeung saterusna gancang pikeun palaksanaan pagination basajan kalawan markup lampu sarta gaya. Éta saé pikeun situs saderhana sapertos blog atanapi majalah.

Conto standar

Sacara standar, pager puseur tumbu.

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

Tumbu dijajarkeun

Alternatipna, anjeun tiasa nyaluyukeun unggal tautan ka sisi:

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

kaayaan ditumpurkeun pilihan

Tumbu Pager ogé ngagunakeun .disabledkelas utiliti umum tina pagination nu.

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

Contona

Conto judul Anyar

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

variasi sadia

Tambahkeun salah sahiji kelas modifier anu disebatkeun di handap pikeun ngarobih penampilan labél.

Bahaya Peringatan Inpormasi Kasuksesan Utama Default

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

Boga ton labél?

Masalah Rendering tiasa timbul nalika anjeun gaduh puluhan labél inline dina wadah anu sempit, masing-masing ngandung inline-blockunsur sorangan (sapertos ikon). Jalan sabudeureun ieu setelan display: inline-block;. Pikeun kontéks jeung conto, tingali #13219 .

Gampang nyorot item anyar atanapi can dibaca ku nambahkeun <span class="badge">tumbu, navs Bootstrap, sareng nu sanesna.

Koropak42

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

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

Diri ambruk

Lamun euweuh item anyar atawa can dibaca, badges bakal saukur ambruk (via :emptypamilih CSS urang) disadiakeun euweuh eusi aya dina.

Kasaluyuan cross-browser

Badges moal ambruk sorangan dina Internet Explorer 8 sabab lacks rojongan pikeun :emptypamilih.

Adaptasi kana kaayaan nav aktip

Gaya anu diwangun kalebet pikeun nempatkeun lencana dina kaayaan aktip dina navigasi pil.

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

A lightweight, komponén fléksibel nu optionally bisa manjangkeun sakabéh viewport mun showcase eusi konci dina situs anjeun.

Halo Dunya!

Ieu unit pahlawan basajan, komponén gaya jumbotron basajan pikeun nelepon perhatian tambahan kana eusi diulas atawa informasi.

Diajar deui

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

Jang ngalampahkeun jumbotron lebar pinuh, sarta tanpa sudut rounded, nempatkeun eta di luar sadayana .containers jeung gantina nambahkeun hiji .containerdina.

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

A cangkang basajan pikeun h1spasi kaluar luyu jeung bagean bagean eusi dina kaca. Bisa ngagunakeun unsur h1standar 's small, kitu ogé lolobana komponén séjén (kalawan gaya tambahan).

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

Manjangkeun sistem grid Bootstrap sareng komponén gambar leutik pikeun gampang nampilkeun grid gambar, video, téks, sareng seueur deui.

Lamun Anjeun keur pilari presentasi Pinterest-kawas tina gambar leutik tina varying jangkung tur / atawa lega, anjeun bakal kudu ngagunakeun plugin pihak katilu kayaning Masonry , Isotop , atawa Salvattore .

Conto standar

Sacara standar, gambar leutik Bootstrap dirancang pikeun nunjukkeun gambar anu aya hubunganana sareng markup anu diperyogikeun minimal.

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

eusi custom

Kalayan sakedik markup tambahan, anjeun tiasa nambihan naon waé eusi HTML sapertos judul, paragraf, atanapi tombol kana gambar leutik.

Label gambar leutik

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

Tombol Tombol

Label gambar leutik

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

Tombol Tombol

Label gambar leutik

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

Tombol Tombol

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

Nyadiakeun pesen eupan balik kontekstual pikeun lampah pamaké has kalawan sakeupeul pesen waspada sadia tur fléksibel.

Contona

Bungkus téks naon waé sareng tombol hapus opsional .alertsareng salah sahiji tina opat kelas kontekstual (contona, .alert-success) pikeun pesen béja dasar.

Taya kelas standar

Tanda henteu ngagaduhan kelas standar, ngan ukur kelas dasar sareng modifier. A waspada abu standar teu asup akal teuing, jadi Anjeun diwajibkeun pikeun nangtukeun hiji tipe via kelas kontekstual. Pilih tina kasuksésan, inpormasi, peringatan, atanapi bahaya.

Saé! Anjeun suksés maca pesen waspada penting ieu.

Mastaka tegak! Panggeuing ieu peryogi perhatian anjeun, tapi éta henteu penting pisan.

Awas! Hadé pariksa diri, anjeun teu kasampak alus teuing.

Aduh jepret! Robah sababaraha hal sareng cobian kirimkeun deui.

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

Panggeuing anu tiasa dileungitkeun

.alert-dismissibleNgawangun dina sagala ngageter ku nambahkeun hiji tombol pilihan jeung nutup.

Merlukeun plugin ngageter JavaScript

Pikeun fungsi pinuh, panggeuing dismissible, anjeun kudu make panggeuing JavaScript plugin .

Awas! Hadé pariksa diri, anjeun teu kasampak alus teuing.

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

Pastikeun paripolah anu leres dina sadaya alat

Pastikeun ngagunakeun <button>unsur jeung data-dismiss="alert"atribut data.

Tumbu di ngabejaan

Anggo .alert-linkkelas utiliti pikeun gancang nyayogikeun tautan warna anu cocog dina sagala ngageter.

Saé! Anjeun suksés maca pesen waspada penting ieu .

Mastaka tegak! Panggeuing ieu peryogi perhatian anjeun , tapi éta henteu penting pisan.

Awas! Langkung saé pariksa diri anjeun, anjeun henteu katingali saé .

Aduh jepret! Robah sababaraha hal sareng cobian kirimkeun deui.

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

Nyadiakeun eupan balik up-to-date dina kamajuan workflow atawa aksi kalayan kamajuan basajan acan fléksibel bar.

Kasaluyuan cross-browser

Bar kamajuan nganggo transisi CSS3 sareng animasi pikeun ngahontal sababaraha épékna. Fitur ieu henteu dirojong dina Internet Explorer 9 sareng di handap atanapi versi Firefox anu langkung lami. Opera 12 henteu ngadukung animasi.

Kasaluyuan Kawijakan Kaamanan Kandungan (CSP).

Upami halaman wéb anjeun ngagaduhan Kabijakan Kaamanan Kandungan (CSP) anu henteu ngijinkeun style-src 'unsafe-inline', maka anjeun moal tiasa nganggo styleatribut inline pikeun nyetél lebar bar kamajuan sapertos anu dipidangkeun dina conto kami di handap. Métode alternatif pikeun netepkeun lebar anu cocog sareng CSP anu ketat kalebet ngagunakeun JavaScript khusus sakedik (anu nyetél element.style.width) atanapi nganggo kelas CSS khusus.

conto dasar

Bar kamajuan standar.

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

Kalawan labél

Leupaskeun kelas <span>kalawan .sr-onlyti jero bar kamajuan pikeun nembongkeun persentase katempo.

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>

Pikeun mastikeun yén téks labél tetep kabaca sanajan persentase leutik, mertimbangkeun nambahkeun a min-widthkana bar kamajuan.

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>

Alternatif kontekstual

Bar kamajuan ngagunakeun sababaraha tombol anu sami sareng kelas waspada pikeun gaya anu konsisten.

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

belang

Ngagunakeun gradién pikeun nyieun éfék belang. Teu sadia di IE9 jeung handap.

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

Animasi

Tambahkeun .activeka .progress-bar-stripedpikeun ngahirupkeun belang katuhu ka kenca. Teu sadia di IE9 jeung handap.

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

Ditumpuk

Teundeun sababaraha bar kana sami .progresspikeun tumpukan aranjeunna.

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

Gaya obyék abstrak pikeun ngawangun rupa-rupa komponén (sapertos koméntar blog, Tweets, jsb) anu ngagaduhan gambar kénca- atanapi katuhu-blok sareng eusi tékstual.

Média standar

Média standar mintonkeun objék média (gambar, video, audio) ka kénca atawa katuhu blok eusi.

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.

Judul média nested

Cras diuk amet nibh libero, dina 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 dina faucibus.

Judul média

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

Judul média

Cras diuk amet nibh libero, dina 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>

The kelas .pull-leftna .pull-rightogé aya sarta saméméhna dipaké salaku bagian tina komponén média, tapi deprecated pikeun pamakéan éta salaku v3.3.0. Aranjeunna kira-kira sarua .media-leftjeung .media-right, iwal nu .media-rightkudu ditempatkeun sanggeus .media-bodydi html.

alignment média

Gambar atawa media sejenna bisa dijajarkeun luhur, tengah, atawa handap. standar nyaeta luhur Blok.

média Top Blok

Cras diuk amet nibh libero, dina 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 dina 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.

Média garis tengah

Cras diuk amet nibh libero, dina 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 dina 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.

Média garis handap

Cras diuk amet nibh libero, dina 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 dina 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>

Daptar média

Kalayan sakedik markup tambahan, anjeun tiasa nganggo média di jero daptar (mangpaat pikeun utas koméntar atanapi daptar tulisan).

Judul média

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

Judul média nested
Cras diuk amet nibh libero, dina gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Judul média nested
Cras diuk amet nibh libero, dina gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Judul média nested
Cras diuk amet nibh libero, dina 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>

Daptar grup mangrupakeun komponén fléksibel tur kuat pikeun mintonkeun teu ukur daptar elemen basajan, tapi leuwih kompleks kalawan eusi custom.

conto dasar

Grup daptar anu paling dasar nyaéta daptar anu henteu teratur sareng daptar barang, sareng kelas anu leres. Ngawangun kana éta kalayan pilihan anu nuturkeun, atanapi CSS anjeun nyalira upami diperyogikeun.

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

Lencana

Tambahkeun komponén badges kana sagala item grup daptar sarta eta bakal otomatis diposisikan di katuhu.

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

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

Item numbu

Linkify daptar item grup ku ngagunakeun tag jangkar tinimbang daptar item (anu ogé hartina kolot <div>tinimbang hiji <ul>). Teu perlu pikeun kolotna individu sabudeureun unggal unsur.

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

Item tombol

Daptar item grup bisa jadi tombol tinimbang daptar item (éta ogé hartina kolot <div>tinimbang hiji <ul>). Teu perlu pikeun kolotna individu sabudeureun unggal unsur. Entong nganggo .btnkelas standar di dieu.

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

Item ditumpurkeun

Tambahkeun .disabledka a .list-group-itemabu eta kaluar pikeun némbongan ditumpurkeun.

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

Kelas kontekstual

Anggo kelas kontekstual pikeun gaya daptar item, standar atanapi dikaitkeun. Ogé kaasup .activekaayaan.

Dapibus ac facilisis di
Cras diuk amet nibh libero
Porta ac consectetur ac
Vestibulum jeung eros

Dapibus ac facilisis di Cras diuk amet nibh libero Porta ac consectetur ac Vestibulum jeung 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>

eusi custom

Tambahkeun ampir sagala HTML dina, sanajan keur grup daptar numbu kawas hiji di handap.

Daptar judul item grup

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

Daptar judul item grup

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

Daptar judul item grup

Donec id elit non mi porta gravida and 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>

Sanaos henteu salawasna diperyogikeun, sakapeung anjeun kedah nempatkeun DOM anjeun dina kotak. Pikeun kaayaan éta, coba komponén panel.

conto dasar

Sacara standar, sadaya anu .paneldilakukeun nyaéta nerapkeun sababaraha wates dasar sareng padding pikeun ngandung sababaraha eusi.

Conto panel dasar

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

Panel kalayan judul

Gampang tambahkeun wadah judul ka panel anjeun nganggo .panel-heading. Anjeun ogé tiasa ngalebetkeun naon waé <h1>- <h6>kalayan .panel-titlekelas pikeun nambihan judul anu tos gaya. Tapi, ukuran font <h1>- <h6>ditimpa ku .panel-heading.

Pikeun ngawarnaan tautan anu leres, pastikeun nempatkeun tautan dina judul dina .panel-title.

Judul panel tanpa judul

eusi panel

Judul panel

eusi 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 kalayan footer

Bungkus tombol atawa téks sekundér dina .panel-footer. Catet yén footers panel teu inherit kelir sarta wates nalika maké variasi kontekstual sabab teu dimaksudkeun pikeun jadi di foreground nu.

eusi panel

Panel footer

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

Alternatif kontekstual

Sapertos komponén-komponén anu sanés, gampang ngadamel panel langkung bermakna pikeun kontéks tinangtu ku cara nambihan salah sahiji kelas kaayaan kontekstual.

Judul panel

eusi panel

Judul panel

eusi panel

Judul panel

eusi panel

Judul panel

eusi panel

Judul panel

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

Kalayan méja

Tambahkeun sagala non-bordered .tabledina panel pikeun desain mulus. Lamun aya hiji .panel-body, urang tambahkeun hiji wates tambahan ka luhur tabel pikeun separation.

Judul panel

Sababaraha eusi panel standar di dieu. 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.

#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry	manuk	@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>

Lamun teu aya awak panel, komponén pindah ti lulugu panel ka méja tanpa gangguan.

Judul panel

#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry	manuk	@twitter

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

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

Kalawan grup daptar

Gampang ngalebetkeun grup daptar lebar pinuh dina panel naon waé.

Judul panel

Sababaraha eusi panel standar di dieu. 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 di
Morbi leo risus
Porta ac consectetur ac
Vestibulum jeung 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>

Ngidinan panyungsi pikeun nangtukeun dimensi video atanapi pintonan slaid dumasar kana lebar blok anu ngandung ku cara nyiptakeun rasio intrinsik anu leres bakal skala dina alat naon waé.

Aturan anu langsung dilarapkeun ka <iframe>, <embed>, <video>, sarta <object>elemen; optionally make kelas turunan eksplisit .embed-responsive-itemlamun rék cocog styling pikeun atribut sejenna.

Pro-Tip! Anjeun teu perlu kaasup frameborder="0"dina <iframe>s anjeun salaku urang override nu keur anjeun.

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

Paké ogé salaku éfék basajan dina hiji unsur pikeun méré éfék inset.

Tingali, kuring aya dina sumur!

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

kelas pilihan

Kontrol padding sareng sudut buleud kalayan dua kelas modifier pilihan.

Tingali, kuring aya dina sumur gedé!

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

Tingali, kuring aya dina sumur leutik!

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

Komponén

Glyphicons

glyphs sadia

Kumaha ngagunakeun

Ulah campur jeung komponén séjén

Ngan pikeun pamakéan dina elemen kosong

Ngarobah lokasi font ikon

Ikon diaksés

Contona

Dropdowns

Contona

Ngajajar

Bisa merlukeun positioning tambahan

.pull-rightalignment deprecated

lulugu

Pamisah

Item menu ditumpurkeun

Grup tombol

Tooltips & popovers dina grup tombol merlukeun setelan husus

Pastikeun leres rolesareng masihan labél

conto dasar

Tombol toolbar

Ukuran

Nyarang

Variasi nangtung

Grup tombol diyakinkeun

Nanganan wates

IE8 jeung wates

Kalawan <a>elemen

Tumbu akting salaku tombol

Kalawan <button>elemen

Tombol dropdowns

kagumantungan plugin

Tunggal tombol dropdowns

Tombol pamisah dropdowns

Ukuran

Variasi dropup

Grup input

Tékstual <input>s wungkul

Tooltips & popovers dina grup input merlukeun setelan husus

Ulah campur jeung komponén séjén

Sok tambahkeun labél

conto dasar

Ukuran

Kotak centang sareng tambihan radio

Addons tombol

Tombol kalawan dropdowns

Tombol segmented

Sababaraha tombol

Navs

Ngagunakeun navs pikeun panels tab merlukeun JavaScript tab plugin

Jieun navs dipaké salaku navigasi diaksés

Tab

Pél

Dibenerkeun

Safari sarta responsif navs diyakinkeun

Tumbu ditumpurkeun

Fungsi link henteu kapangaruhan

Ngagunakeun dropdowns

Tab kalawan dropdowns

Pél kalawan dropdowns

Navbar

Navbar standar

eusi overflowing

Merlukeun plugin JavaScript

Ngarobah breakpoint navbar mobile rubuh

Jieun navbars diaksés

Gambar merek

Bentuk

caveats alat mobile

Sok tambahkeun labél

Kancing

pamakéan kontéks-spésifik

Téks

Tumbu non-nav

alignment komponén

Katuhu aligning sababaraha komponén

Dibereskeun ka luhur

Padding awak diperlukeun

Dibereskeun ka handap

`.pull-right`alignment deprecated

Pastikeun leres `role`sareng masihan labél

Kalawan `<a>`elemen

Kalawan `<button>`elemen

Tékstual `<input>`s wungkul