Glyphicons

Glyphs kasedhiya

Kalebu luwih saka 250 glyphs ing format font saka set Glyphicon Halflings. Glyphicons Halflings biasane ora kasedhiya kanthi gratis, nanging sing nggawe dheweke kasedhiya kanggo Bootstrap kanthi gratis. Minangka matur nuwun, kita mung njaluk sampeyan kalebu link bali menyang Glyphicons sabisa.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-amplop
  • glyphicon glyphicon-pensil
  • glyphicon glyphicon-kaca
  • glyphicon glyphicon-musik
  • glyphicon glyphicon-search
  • glyphicon glyphicon-jantung
  • glyphicon glyphicon-lintang
  • glyphicon glyphicon-lintang-kosong
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-mbusak
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-mati
  • glyphicon glyphicon-sinyal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-ngarep
  • glyphicon glyphicon-file
  • glyphicon glyphicon-wektu
  • glyphicon glyphicon-dalan
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-kotak mlebu
  • glyphicon glyphicon-muter-bunder
  • glyphicon glyphicon-baleni
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphone
  • glyphicon glyphicon-volume-mati
  • glyphicon glyphicon-volume-mudhun
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • buku glyphicon glyphicon
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-kamera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-miring
  • glyphicon glyphicon-teks-dhuwur
  • glyphicon glyphicon-teks-jembaré
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-dhaftar
  • glyphicon glyphicon-indent-kiwa
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-gambar
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-nyetel
  • glyphicon glyphicon-werna
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-pindhah
  • glyphicon glyphicon-langkah-mundur
  • glyphicon glyphicon-cepet-mundur
  • glyphicon glyphicon-mundur
  • glyphicon glyphicon-muter
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-mandeg
  • glyphicon glyphicon-maju
  • glyphicon glyphicon-maju cepet
  • glyphicon glyphicon-langkah-maju
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-kiwa
  • glyphicon glyphicon-chevron-tengen
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-tandha
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-tandha
  • glyphicon glyphicon-pitakonan-tandha
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-mbusak-bunder
  • glyphicon glyphicon-ok-bunder
  • glyphicon glyphicon-ban-bunder
  • glyphicon glyphicon-panah-kiwa
  • glyphicon glyphicon-panah-tengen
  • glyphicon glyphicon-panah-munggah
  • glyphicon glyphicon-panah-mudhun
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-cilik
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-hadiah
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-geni
  • glyphicon glyphicon-mripat-mbukak
  • glyphicon glyphicon-mripat-nutup
  • glyphicon glyphicon-warning-tandha
  • glyphicon glyphicon-bidang
  • glyphicon glyphicon-kalender
  • glyphicon glyphicon-acak
  • glyphicon glyphicon-komentar
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-mudhun
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-cedhak
  • glyphicon glyphicon-folder-mbukak
  • glyphicon glyphicon-resize-vertikal
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-lonceng
  • glyphicon glyphicon-sertifikat
  • glyphicon glyphicon-jempol
  • glyphicon glyphicon-jempol-mudhun
  • glyphicon glyphicon-tangan-tengen
  • glyphicon glyphicon-tangan-kiwa
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-mudhun
  • glyphicon glyphicon-bunder-panah-tengen
  • glyphicon glyphicon-bunder-panah-kiwa
  • glyphicon glyphicon-bunder-panah-munggah
  • glyphicon glyphicon-bunder-panah-mudhun
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-kunci
  • glyphicon glyphicon-tugas
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-koper
  • glyphicon glyphicon-layar wutuh
  • glyphicon glyphicon-dasbor
  • glyphicon glyphicon-klip kertas
  • glyphicon glyphicon-ati-kosong
  • glyphicon glyphicon-link
  • glyphicon glyphicon-telpon
  • 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-atribut
  • glyphicon glyphicon-sort-by-atribut-alt
  • glyphicon glyphicon-ora dicenthang
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-mudhun
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-metu
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-rekaman
  • glyphicon glyphicon-save
  • glyphicon glyphicon-mbukak
  • glyphicon glyphicon-simpen
  • glyphicon glyphicon-import
  • glyphicon glyphicon-ekspor
  • glyphicon glyphicon-ngirim
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-simpen
  • glyphicon glyphicon-floppy-mbusak
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-mbukak
  • glyphicon glyphicon-kertu kredit
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-telpon-alt
  • glyphicon glyphicon-menara
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-swara-stereo
  • glyphicon glyphicon-swara-dolby
  • glyphicon glyphicon-swara-5-1
  • glyphicon glyphicon-swara-6-1
  • glyphicon glyphicon-swara-7-1
  • glyphicon glyphicon-hak cipta-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-waspada
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-ratu
  • glyphicon glyphicon-pion
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-ksatria
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tenda
  • glyphicon glyphicon-papan tulis
  • glyphicon glyphicon-amben
  • glyphicon glyphicon-apel
  • glyphicon glyphicon-mbusak
  • glyphicon glyphicon-hourglass
  • lampu glyphicon glyphicon
  • 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-rubel
  • glyphicon glyphicon-rub
  • glyphicon skala glyphicon
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-ngrasakake
  • glyphicon glyphicon-pendidikan
  • glyphicon glyphicon-opsi-horizontal
  • glyphicon glyphicon-opsi-vertikal
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-lenga
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-kacamata ireng
  • glyphicon glyphicon-ukuran-teks
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-obyek-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-obyek-align-vertikal
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-tengen
  • glyphicon glyphicon-triangle-kiwa
  • glyphicon glyphicon-triangle-ngisor
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-kiwa
  • glyphicon glyphicon-menu-tengen
  • glyphicon glyphicon-menu-mudhun
  • glyphicon glyphicon-menu-up

Carane nggunakake

Kanggo alasan kinerja, kabeh lambang mbutuhake kelas dhasar lan kelas lambang individu. Kanggo nggunakake, lebokake kode ing ngisor iki ing ngendi wae. Dadi manawa kanggo ninggalake spasi ing antarane lambang lan teks kanggo padding sing tepat.

Aja nyampur karo komponen liyane

Kelas lambang ora bisa langsung digabungake karo komponen liyane. Padha ora bisa digunakake bebarengan karo kelas liyane ing unsur sing padha. Nanging, tambahake nested <span>lan aplikasi kelas lambang menyang <span>.

Mung kanggo nggunakake ing unsur kosong

Kelas lambang mung kudu digunakake ing unsur sing ora ana isi teks lan ora ana unsur anak.

Ngganti lokasi font lambang

Bootstrap nganggep file font lambang bakal ana ing ../fonts/direktori, relatif karo file CSS sing dikompilasi. Ngalih utawa ngganti jeneng file font kasebut tegese nganyari CSS kanthi salah siji saka telung cara:

  • Ngganti @icon-font-pathlan / utawa @icon-font-namevariabel ing sumber file Kurang.
  • Gunakake opsi URL relatif sing diwenehake dening Compiler Kurang.
  • Ngganti url()path ing CSS kompilasi.

Gunakake pilihan apa wae sing paling cocog karo persiyapan pangembangan spesifik sampeyan.

Ikon sing bisa diakses

Versi modern saka teknologi bantu bakal ngumumake konten sing digawe CSS, uga karakter Unicode tartamtu. Kanggo ngindhari output sing ora disengaja lan mbingungake ing pembaca layar (utamane nalika lambang digunakake kanggo dekorasi), kita ndhelikake karo aria-hidden="true"atribut kasebut.

Yen sampeyan nggunakake lambang kanggo menehi makna (tinimbang mung minangka unsur hiasan), priksa manawa makna iki uga ditularake menyang teknologi bantu - contone, kalebu konten tambahan, sing didhelikake kanthi visual karo .sr-onlykelas.

Yen sampeyan nggawe kontrol tanpa teks liyane (kayata <button>sing mung ngemot lambang), sampeyan kudu tansah nyedhiyani isi alternatif kanggo ngenali tujuan kontrol, supaya iku bisa kanggo pangguna teknologi assistive. Ing kasus iki, sampeyan bisa nambah aria-labelatribut ing kontrol dhewe.

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

Tuladha

Gunakake ing tombol, grup tombol kanggo toolbar, pandhu arah, utawa input 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>

Lambang digunakake ing tandha kanggo ngirim pesen kesalahan, karo .sr-onlyteks tambahan kanggo ngirim pitunjuk iki kanggo pangguna teknologi assistive.

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

Dropdowns

Menu kontekstual sing bisa diganti kanggo nampilake dhaptar pranala. Digawe interaktif karo plugin JavaScript gulung mudhun .

Bungkus pemicu gulung mudhun lan menu gulung mudhun ing .dropdown, utawa unsur liyane sing nyatakake position: relative;. Banjur tambahake HTML 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>

Menu gulung mudhun bisa diganti kanggo nggedhekake munggah (tinimbang mudhun) kanthi nambah .dropupmenyang induk.

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

Kanthi gawan, menu gulung mudhun kanthi otomatis dipanggonke 100% saka ndhuwur lan ing sisih kiwa wong tuwa. Tambah .dropdown-menu-rightmenyang .dropdown-menusisih tengen menu gulung mudhun.

Bisa uga mbutuhake posisi tambahan

Dropdown kanthi otomatis dipanggonke liwat CSS ing aliran normal dokumen. Iki tegese dropdown bisa dipotong dening wong tuwa kanthi overflowproperti tartamtu utawa katon metu saka area tampilan. Ngatasi masalah kasebut dhewe nalika kedadeyan.

Alignment sing ora .pull-rightdigunakake

Ing v3.1.0, kita wis ora digunakake .pull-righting menu gulung mudhun. Kanggo nyelarasake tengen menu, gunakake .dropdown-menu-right. Komponen nav sing didadekake siji tengen ing navbar nggunakake versi mixin saka kelas iki kanggo otomatis kempal menu. Kanggo ngganti, gunakake .dropdown-menu-left.

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

Tambah header kanggo menehi label bagean tumindak ing menu gulung mudhun.

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

Tambah divider kanggo misahake seri pranala ing menu gulung mudhun.

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

Tambah .disabledmenyang <li>ing gulung mudhun kanggo mateni 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>

Klompok tombol

Kelompokake seri tombol bebarengan ing baris siji karo grup tombol. Tambahake radio JavaScript opsional lan prilaku gaya kothak kanthi plugin tombol .

Tooltips & popovers ing kelompok tombol mbutuhake setelan khusus

Nalika nggunakake tooltips utawa popovers ing unsur ing .btn-group, sampeyan kudu nemtokake pilihan container: 'body'kanggo ngindhari efek sisih sing ora dikarepake (kayata unsur saya akeh lan/utawa ilang sudhut bunder nalika tooltip utawa popover dipicu).

Priksa manawa bener rolelan menehi label

Supaya teknologi assistive - kayata pembaca layar - ngirimake yen seri tombol diklompokake, roleatribut sing cocog kudu diwenehake. Kanggo grup tombol, iki bakal dadi role="group", nalika toolbar kudu duwe role="toolbar".

Siji pangecualian yaiku klompok sing mung ngemot kontrol siji (kayata klompok tombol sing dibenerake kanthi <button>unsur) utawa dropdown.

Kajaba iku, klompok lan toolbar kudu diwenehi label eksplisit, amarga paling teknologi assistive ora bakal ngumumake, sanajan ana roleatribut sing bener. Ing conto sing kasedhiya ing kene, kita nggunakake aria-label, nanging alternatif kayata aria-labelledbyuga bisa digunakake.

Tuladha dhasar

Bungkus serangkaian tombol .btnnganggo .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>

Tombol toolbar

Gabungke set <div class="btn-group">dadi a <div class="btn-toolbar">kanggo komponen sing luwih 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

Tinimbang nglamar kelas tombol ukuran kanggo saben tombol ing grup, mung nambah .btn-group-*kanggo saben .btn-group, kalebu nalika nesting sawetara kelompok.




<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

Selehake .btn-grouping liyane .btn-groupyen sampeyan pengin menu molor dicampur karo seri 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 vertikal

Nggawe sakumpulan tombol katon vertikal ditumpuk tinimbang horisontal. Dropdown tombol pamisah ora didhukung ing kene.

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

Kelompok tombol sing dibenerake

Gawe sekelompok tombol kanthi ukuran sing padha kanggo mbentang kabeh jembar induke. Uga dianggo karo dropdowns tombol ing grup tombol.

Nangani wates

Amarga HTML lan CSS tartamtu sing digunakake kanggo mbenerake tombol (yaiku display: table-cell), wates ing antarane dheweke tikel kaping pindho. Ing kelompok tombol biasa, margin-left: -1pxdigunakake kanggo tumpukan wates tinimbang njabut. Nanging, marginora bisa karo display: table-cell. Akibaté, gumantung saka kustomisasi menyang Bootstrap, sampeyan bisa uga pengin mbusak utawa menehi warna maneh wates kasebut.

IE8 lan wates

Internet Explorer 8 ora nerjemahake wates tombol ing grup tombol sing dibenerake, apa iku aktif <a>utawa <button>unsur. Kanggo ngubengi, bungkus saben tombol ing liyane .btn-group.

Waca #12476 kanggo informasi luwih lengkap.

Kanthi <a>unsur

Mung Lebokake seri saka .btns ing .btn-group.btn-group-justified.

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

Link tumindak minangka tombol

Yen <a>unsur digunakake kanggo tumindak minangka tombol - micu fungsionalitas ing kaca, tinimbang navigasi menyang dokumen utawa bagean liyane ing kaca saiki - uga kudu diwenehi role="button".

Kanthi <button>unsur

Kanggo nggunakake kelompok tombol sing dibenerake kanthi <button>unsur, sampeyan kudu mbungkus saben tombol ing grup tombol . Umume browser ora ngetrapake CSS kanthi bener kanggo mbenerake <button>unsur, nanging amarga kita ndhukung dropdown tombol, kita bisa ngatasi masalah kasebut.

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

Tombol dropdowns

Gunakake tombol apa wae kanggo micu menu gulung mudhun kanthi nyelehake ing a .btn-grouplan menehi markup menu sing tepat.

Ketergantungan plugin

Tombol dropdown mbutuhake plugin gulung mudhun ing versi Bootstrap sampeyan.

Tombol dropdowns siji

Ganti tombol dadi pilihan gulung mudhun kanthi sawetara owah-owahan markup dhasar.

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

Kajaba iku, nggawe dropdown tombol pamisah kanthi owah-owahan markup sing padha, mung nganggo tombol sing kapisah.

<!-- 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 bisa digunakake karo tombol kabeh 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 menu gulung mudhun ing ndhuwur unsur kanthi nambahake .dropupmenyang induk.

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

Klompok input

Ngluwihi kontrol formulir kanthi nambah teks utawa tombol sadurunge, sawise, utawa ing loro-lorone saka sembarang teks basis <input>. Gunakake .input-groupkaro .input-group-addonutawa .input-group-btnkanggo prepend utawa nambah unsur menyang siji .form-control.

Tekstual <input>mung

Aja nggunakake <select>unsur ing kene amarga ora bisa ditata kanthi lengkap ing browser WebKit.

Aja nggunakake <textarea>unsur ing kene amarga rowsatribut kasebut ora bakal diajeni ing sawetara kasus.

Tooltips & popovers ing grup input mbutuhake setelan khusus

Nalika nggunakake tooltips utawa popovers ing unsur ing .input-group, sampeyan kudu nemtokake pilihan container: 'body'kanggo ngindhari efek sisih sing ora dikarepake (kayata unsur sing saya akeh lan/utawa ilang sudhut bunder nalika tooltip utawa popover dipicu).

Aja nyampur karo komponen liyane

Aja nyampur kelompok wangun utawa kelas kolom kothak langsung karo kelompok input. Nanging, pasang klompok input ing njero klompok formulir utawa unsur sing ana gandhengane karo kothak.

Tansah nambah label

Pembaca layar bakal duwe masalah karo formulir sampeyan yen sampeyan ora kalebu label kanggo saben input. Kanggo grup input kasebut, priksa manawa label utawa fungsi tambahan dikirim menyang teknologi pitulung.

Teknik sing tepat sing bakal digunakake (unsur sing katon <label>, <label>unsur sing didhelikake nggunakake .sr-onlykelas, utawa nggunakake aria-label, aria-labelledby, aria-describedby, titleutawa placeholderatribut) lan informasi tambahan sing kudu dikirim bakal beda-beda gumantung saka jinis widget antarmuka sing tepat sing sampeyan tindakake. Conto ing bagean iki nyedhiyakake sawetara pendekatan khusus sing disaranake.

Tuladha dhasar

Selehake siji tambahan utawa tombol ing salah siji sisih input. Sampeyan uga bisa nyelehake siji ing loro-lorone input.

Kita ora ndhukung sawetara tambahan ( .input-group-addonutawa .input-group-btn) ing sisih siji.

Kita ora ndhukung macem-macem formulir-kontrol ing grup input siji.

@

@conto.com

$ .00

https://example.com/users/
<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

Tambah kelas ukuran wangun relatif menyang .input-groupdhewe lan isi ing bakal otomatis ngowahi ukuran-ora perlu kanggo mbaleni kelas ukuran kontrol wangun ing saben 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>

Kothak lan tambahan radio

Selehake kothak centhang utawa pilihan radio ing addon grup input tinimbang teks.

<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 ing grup input rada beda lan mbutuhake tingkat tambahan nesting. Tinimbang .input-group-addon, sampeyan kudu nggunakake .input-group-btnkanggo mbungkus tombol. Iki dibutuhake amarga gaya browser standar sing ora bisa diganti.

<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 karo 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 sing dipérang

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

Multiple tombol

Nalika sampeyan mung bisa duwe siji add-on saben sisih, sampeyan bisa duwe sawetara tombol nang siji .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

Nav sing kasedhiya ing Bootstrap wis nuduhake markup, diwiwiti karo .navkelas dasar, uga negara sing dienggo bareng. Ganti kelas modifier kanggo ngalih ing antarane saben gaya.

Nggunakake navs kanggo panel tab mbutuhake plugin tab JavaScript

Kanggo tab kanthi area tabable, sampeyan kudu nggunakake plugin JavaScript tab . Markup kasebut uga mbutuhake roleatribut tambahan lan ARIA - deleng conto markup plugin kanggo rincian liyane.

Nggawe navs digunakake minangka pandhu arah diakses

Yen sampeyan nggunakake navs kanggo nyedhiyani garis pandhu arah, dadi manawa kanggo nambah role="navigation"menyang wadhah tiyang sepah paling logis saka <ul>, utawa Lebokake <nav>unsur watara kabèh pandhu arah. Aja nambahake peran kasebut ing <ul>awake dhewe, amarga iki bakal nyegah supaya ora diumumake minangka dhaptar nyata dening teknologi bantu.

Wigati .nav-tabskelas mbutuhake kelas .navdhasar.

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

Njupuk HTML sing padha, nanging gunakake .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>

Pil uga bisa ditumpuk kanthi vertikal. Tambah wae .nav-stacked.

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

Gawe tab utawa pil kanthi gampang kanthi ambane padha karo induke ing layar sing luwih amba tinimbang 768px nganggo .nav-justified. Ing layar cilik, pranala nav dibandhingke.

Link navbar sing dibenerake saiki ora didhukung.

Safari lan responsif navs sabdho

Ing v9.1.2, Safari nuduhake bug kang ngowahi ukuran browser Panjenengan horisontal nimbulaké kasalahan Rendering ing nav sabdho sing ngankat marang sumilir. Bug iki uga ditampilake ing conto nav sabdho .

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

Kanggo komponèn nav (tab utawa pil), nambah .disabledkanggo pranala werna abu-abu lan ora efek hover .

Fungsi link ora kena pengaruh

Kelas iki mung bakal ngganti tampilan <a>', ora fungsi sawijining. Gunakake JavaScript khusus kanggo mateni pranala ing kene.

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

Tambah menu gulung mudhun kanthi HTML ekstra lan plugin JavaScript gulung mudhun .

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

Pil karo dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbar

Navbar minangka komponen meta responsif sing dadi header navigasi kanggo aplikasi utawa situs sampeyan. Dheweke wiwit ambruk (lan bisa diowahi) ing tampilan seluler lan dadi horisontal amarga ambane viewport sing kasedhiya mundhak.

Link navbar sing dibenerake saiki ora didhukung.

Isi kebanjiran

Wiwit Bootstrap ora ngerti pira papan sing dibutuhake ing navbar sampeyan, sampeyan bisa uga ngalami masalah karo isi bungkus menyang baris kapindho. Kanggo ngatasi masalah iki, sampeyan bisa:

  1. Ngurangi jumlah utawa jembaré item navbar.
  2. Singidaken item navbar tartamtu ing ukuran layar tartamtu nggunakake kelas sarana responsif .
  3. Ganti titik ing ngendi navbar sampeyan ngalih ing antarane mode ambruk lan horisontal. Kustomisasi @grid-float-breakpointvariabel utawa tambahake pitakon media sampeyan dhewe.

Mbutuhake plugin JavaScript

Yen JavaScript dipatèni lan viewport cukup sempit sing navbar ambruk, iku ora bisa kanggo nggedhekake navbar lan ndeleng isi ing .navbar-collapse.

Navbar responsif mbutuhake plugin ambruk dilebokake ing versi Bootstrap sampeyan.

Ngganti breakpoint navbar seluler ambruk

Navbar ambruk menyang tampilan seluler vertikal nalika viewport luwih sempit tinimbang @grid-float-breakpoint, lan ngembangaken menyang tampilan non-mobile horisontal nalika viewport paling @grid-float-breakpointjembaré. Nyetel variabel iki ing sumber Kurang kanggo kontrol nalika navbar ambruk / nggedhekake. Nilai standar yaiku 768px(layar "cilik" utawa "tablet" paling cilik).

Nggawe navbars bisa diakses

Pesthekake nggunakake <nav>unsur utawa, yen nggunakake unsur sing luwih umum kayata <div>, tambahake a role="navigation"kanggo saben navbar kanggo ngenali kanthi jelas minangka wilayah landmark kanggo pangguna teknologi assistive.

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

Ganti merek navbar karo gambar sampeyan dhewe kanthi ngganti teks kanggo <img>. Amarga .navbar-brandnduweni bantalan lan dhuwur dhewe, sampeyan bisa uga kudu ngilangi sawetara CSS gumantung saka gambar sampeyan.

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

Selehake isi formulir ing .navbar-formkanggo alignment vertikal sing tepat lan prilaku ambruk ing viewports sempit. Gunakake pilihan keselarasan kanggo mutusake ing ngendi papan kasebut dumunung ing isi navbar.

Minangka kepala munggah, .navbar-formnuduhake akeh kode karo .form-inlineliwat mixin. Sawetara kontrol formulir, kaya grup input, mbutuhake jembar tetep supaya bisa ditampilake kanthi bener ing 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>

Caveats piranti seluler

Ana sawetara caveats babagan nggunakake kontrol formulir ing unsur tetep ing piranti seluler. Deleng dokumen dhukungan browser kanggo rincian.

Tansah nambah label

Pembaca layar bakal duwe masalah karo formulir sampeyan yen sampeyan ora kalebu label kanggo saben input. Kanggo formulir inline iki, sampeyan bisa ndhelikake label nggunakake .sr-onlykelas. Ana cara alternatif liyane kanggo nyedhiyakake label kanggo teknologi bantu, kayata aria-label, aria-labelledbyutawa titleatribut. Yen ora ana, pembaca layar bisa nggunakake placeholderatribut kasebut, yen ana, nanging elinga yen nggunakake placeholderminangka panggantos kanggo metode label liyane ora disaranake.

Tambah .navbar-btnkelas kanggo <button>unsur ora manggon ing <form>vertikal tengah ing navbar.

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

Panggunaan khusus konteks

Kaya kelas tombol standar , .navbar-btnbisa digunakake ing <a>lan <input>unsur. Nanging, .navbar-btnutawa kelas tombol standar ora kudu digunakake ing <a>unsur ing .navbar-nav.

Lebokake strings teks ing unsur karo .navbar-text, biasane ing <p>tag kanggo anjog tepat lan werna.

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

Kanggo wong sing nggunakake pranala standar sing ora ana ing komponen navigasi navbar biasa, gunakake .navbar-linkkelas kasebut kanggo nambah warna sing cocog kanggo pilihan navbar standar lan kuwalik.

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

Selarasake pranala nav, formulir, tombol, utawa teks, nggunakake .navbar-leftutawa .navbar-rightkelas sarana. Loro-lorone kelas bakal nambah float CSS ing arah sing ditemtokake. Contone, kanggo nyelarasake pranala nav, sijine wong ing kapisah <ul>karo kelas sarana pamilike Applied.

Kelas-kelas iki minangka versi campuran .pull-leftlan .pull-right, nanging ditrapake kanggo pitakon media supaya gampang nangani komponen navbar ing ukuran piranti.

aligning tengen sawetara komponen

Navbars saiki duwe watesan karo sawetara .navbar-rightkelas. Kanggo isi spasi kanthi bener, kita nggunakake margin negatif ing .navbar-rightunsur pungkasan. Nalika ana pirang-pirang unsur sing nggunakake kelas kasebut, margin kasebut ora bisa digunakake kaya sing dikarepake.

Kita bakal mriksa maneh iki nalika kita bisa nulis ulang komponen kasebut ing v4.

Tambah .navbar-fixed-toplan kalebu .containerutawa .container-fluidmenyang tengah lan isi navbar pad.

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

Padding awak dibutuhake

Navbar tetep bakal nglapisi konten liyane, kajaba sampeyan nambahake paddingmenyang ndhuwur <body>. Coba nilai sampeyan dhewe utawa gunakake cuplikan ing ngisor iki. Tip: Kanthi gawan, navbar dhuwure 50px.

body { padding-top: 70px; }

Priksa manawa kanggo nyakup iki sawise inti Bootstrap CSS.

Tambah .navbar-fixed-bottomlan kalebu .containerutawa .container-fluidmenyang tengah lan isi navbar pad.

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

Padding awak dibutuhake

Navbar tetep bakal nglapisi konten liyane, kajaba sampeyan nambahake paddingmenyang sisih ngisor <body>. Coba nilai sampeyan dhewe utawa gunakake cuplikan ing ngisor iki. Tip: Kanthi gawan, navbar dhuwure 50px.

body { padding-bottom: 70px; }

Priksa manawa kanggo nyakup iki sawise inti Bootstrap CSS.

Nggawe navbar lengkap-jembar sing nggulung adoh karo kaca kanthi nambah .navbar-static-toplan kalebu .containerutawa .container-fluidkanggo tengah lan pad isi navbar.

Ora .navbar-fixed-*kaya kelas, sampeyan ora perlu ngganti padding ing file body.

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

Owahi tampilan navbar kanthi nambahake .navbar-inverse.

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

Breadcrumbs

Tandhani lokasi kaca saiki ing hirarki navigasi.

Separator otomatis ditambahake ing CSS liwat :beforelan content.

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

Pagination

Nyedhiyani pranala pagination kanggo situs utawa app sampeyan kanthi komponen pagination multi-halaman, utawa alternatif pager sing luwih prasaja .

pagination standar

pagination prasaja sing diilhami dening Rdio, apik kanggo aplikasi lan asil panelusuran. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.

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

Komponen pagination kudu dilebokake ing <nav>unsur kanggo ngenali minangka bagean navigasi kanggo maca layar lan teknologi bantu liyane. Kajaba iku, amarga sawijining kaca bisa uga duwe luwih saka siji bagean navigasi kasebut (kayata navigasi utama ing header, utawa navigasi sidebar), disaranake menehi deskriptif sing nggambarake tujuane aria-label. <nav>Contone, yen komponen pagination digunakake kanggo navigasi antarane sakumpulan asil panelusuran, label sing cocog bisa uga aria-label="Search results pages".

Negara sing dipateni lan aktif

Link bisa disesuaikan kanggo macem-macem kahanan. Gunakake .disabledkanggo pranala sing ora bisa diklik lan .activekanggo nuduhake kaca sing saiki.

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

Disaranake sampeyan ngganti jangkar aktif utawa dipatèni kanggo <span>, utawa ngilangi jangkar ing cilik saka sadurungé / panah sabanjuré, kanggo mbusak fungsi klik nalika nahan gaya dimaksudaké.

<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

Pengin pagination luwih gedhe utawa luwih cilik? Tambah .pagination-lgutawa .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

Tautan cepet sadurunge lan sabanjure kanggo implementasi pagination sing prasaja kanthi markup lan gaya sing entheng. Iku apik kanggo situs prasaja kaya blog utawa majalah.

Conto standar

Kanthi gawan, pager pusat pranala.

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

Utawa, sampeyan bisa nyelarasake saben pranala menyang sisih:

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

Status dipatèni opsional

Link pager uga nggunakake .disabledkelas sarana umum saka 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>

Label

Tuladha

Tuladha judhul New

Tuladha judhul New

Tuladha judhul New

Tuladha judhul New

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

Variasi sing kasedhiya

Tambah kelas modifier sing kasebut ing ngisor iki kanggo ngganti tampilan label.

Default Primary Sukses Info Warning Bebaya
<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>

Duwe ton label?

Masalah Rendering bisa muncul nalika sampeyan duwe puluhan label inline ing wadhah sing sempit, saben ngemot inline-blockunsur dhewe (kaya lambang). Cara ngubengi iki yaiku setelan display: inline-block;. Kanggo konteks lan conto, deleng #13219 .

Lencana

Nyorot item anyar utawa durung diwaca kanthi gampang kanthi nambahake <span class="badge">tautan, navigasi Bootstrap, lan liya-liyane.

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

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

Ambruk dhewe

Yen ora ana item anyar utawa durung diwaca, lencana mung bakal ambruk (liwat :emptypamilih CSS) yen ora ana konten.

Kompatibilitas lintas-browser

Lencana ora bakal ambruk dhewe ing Internet Explorer 8 amarga ora duwe dhukungan kanggo :emptypamilih.

Adaptasi kanggo negara nav aktif

Gaya sing dibangun kalebu kanggo nyelehake lencana ing negara aktif ing 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>

Jumbotron

Komponen sing entheng lan fleksibel sing bisa nambah kabeh viewport kanggo nampilake konten utama ing situs sampeyan.

Hello, donya!

Iki minangka unit pahlawan sing prasaja, komponen gaya jumbotron sing prasaja kanggo narik kawigaten babagan konten utawa informasi sing ditampilake.

Sinau luwih lengkap

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

Kanggo nggawe jumbotron jembaré lengkap, lan tanpa sudhut dibunderaké, Panggonan njaba kabeh .containers lan tinimbang nambah .containering.

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

Header kaca

Cangkang prasaja h1kanggo nyisihake lan ngethok bagean konten ing kaca kanthi tepat. Bisa nggunakke h1's unsur standar small, uga paling komponen liyane (karo gaya tambahan).

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

Gambar cilik

Ekstensi sistem kothak Bootstrap kanthi komponen gambar cilik supaya gampang nampilake kothak gambar, video, teks, lan liya-liyane.

Yen sampeyan nggoleki presentasi gambar cilik kaya Pinterest kanthi dhuwur lan/utawa jembar sing beda-beda, sampeyan kudu nggunakake plugin pihak katelu kayata Masonry , Isotop , utawa Salvattore .

Conto standar

Kanthi gawan, gambar cilik Bootstrap dirancang kanggo nampilake gambar sing disambung kanthi markup sing dibutuhake minimal.

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

Konten khusus

Kanthi markup ekstra, sampeyan bisa nambah konten HTML kaya judhul, paragraf, utawa tombol menyang gambar cilik.

100%x200

Label gambar cilik

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

Tombol Tombol

100%x200

Label gambar cilik

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

Tombol Tombol

100%x200

Label gambar cilik

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida lan 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>

Tandha

Nyedhiyani pesen umpan balik kontekstual kanggo tumindak pangguna sing khas kanthi sawetara pesen tandha sing kasedhiya lan fleksibel.

Tuladha

Bungkus teks apa wae lan tombol ngilangi opsional .alertlan salah siji saka papat kelas kontekstual (contone, .alert-success) kanggo pesen tandha dhasar.

Ora kelas standar

Tandha ora duwe kelas standar, mung kelas dasar lan modifier. Tandha abu-abu standar ora ana gunane, mula sampeyan kudu nemtokake jinis liwat kelas kontekstual. Pilih saka sukses, info, bebaya, utawa bebaya.

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

Tandha sing bisa dibubarake

Gawe tandha apa wae kanthi nambahake .alert-dismissibletombol opsional lan cedhak.

Mbutuhake plugin tandha JavaScript

Kanggo tandha sing bisa digunakake kanthi lengkap, sampeyan kudu nggunakake plugin JavaScript tandha .

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

Priksa prilaku sing bener ing kabeh piranti

Priksa manawa sampeyan nggunakake <button>unsur kanthi data-dismiss="alert"atribut data.

Gunakake .alert-linkkelas sarana kanggo nyedhiyakake link warna sing cocog kanthi cepet ing tandha apa wae.

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

Bar kemajuan

Nyedhiyakake umpan balik sing paling anyar babagan kemajuan alur kerja utawa tumindak kanthi garis kemajuan sing prasaja nanging fleksibel.

Kompatibilitas lintas-browser

Bar kemajuan nggunakake transisi lan animasi CSS3 kanggo entuk sawetara efek. Fitur-fitur kasebut ora didhukung ing Internet Explorer 9 lan ing ngisor utawa versi Firefox sing luwih lawas. Opera 12 ora ndhukung animasi.

Kompatibilitas Content Security Policy (CSP).

Yen situs web sampeyan duwe Kebijakan Keamanan Konten (CSP) sing ora ngidini style-src 'unsafe-inline', mula sampeyan ora bakal bisa nggunakake styleatribut inline kanggo nyetel jembar garis kemajuan kaya sing ditampilake ing conto ing ngisor iki. Cara alternatif kanggo nyetel jembar sing cocog karo CSP sing ketat kalebu nggunakake JavaScript khusus cilik (sing nyetel element.style.width) utawa nggunakake kelas CSS khusus.

Tuladha dhasar

Bar kemajuan standar.

60% Rampung
<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>

Kanthi label

Copot kelas <span>karo .sr-onlysaka ing garis kemajuan kanggo nuduhake persentasi katon.

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>

Kanggo mesthekake yen teks label tetep bisa diwaca sanajan persentase sing sithik, coba tambahake a min-widthing garis kemajuan.

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 kemajuan nggunakake sawetara tombol lan kelas tandha sing padha kanggo gaya sing konsisten.

40% Rampung (sukses)
20% Rampung
60% Rampung (warning)
80% Rampung (bebaya)
<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

Nggunakake gradien kanggo nggawe efek belang. Ora kasedhiya ing IE9 lan ngisor.

40% Rampung (sukses)
20% Rampung
60% Rampung (warning)
80% Rampung (bebaya)
<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

Tambah .activekanggo .progress-bar-stripedkanggo animate loreng tengen ngiwa. Ora kasedhiya ing IE9 lan ngisor.

45% Rampung
<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

Selehake sawetara bar menyang padha .progresskanggo tumpukan mau.

35% Rampung (sukses)
20% Rampung (warning)
10% Rampung (bebaya)
<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>

Objek media

Gaya obyek abstrak kanggo mbangun macem-macem jinis komponen (kayata komentar blog, Tweets, lan sapiturute) sing nampilake gambar sing didadekake kiwa utawa tengen bebarengan karo isi teks.

Media gawan

Media gawan nampilake obyek media (gambar, video, audio) ing sisih kiwa utawa tengen blok konten.

Judhul media

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

Judhul media

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

Judul media nested

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

Judhul media

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

Judhul media

Cras sit amet nibh libero, ing 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>

Kelas .pull-leftlan .pull-rightuga ana lan sadurunge digunakake minangka bagéan saka komponèn media, nanging wis deprecated kanggo nggunakake minangka v3.3.0. Padha kira-kira padha karo .media-leftlan .media-right, kajaba sing .media-rightkudu diselehake sawise .media-bodying html.

Penyelarasan media

Gambar utawa media liyane bisa didadekake siji ndhuwur, tengah, utawa ngisor. Standar kasebut didadekake siji ndhuwur.

Media selaras ndhuwur

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

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

Media selaras tengah

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

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

Media selaras ngisor

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and 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>

Dhaptar media

Kanthi markup ekstra, sampeyan bisa nggunakake media ing dhaptar (migunani kanggo thread komentar utawa dhaptar artikel).

  • Judhul media

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

    Judul media nested

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

    Judul media nested

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

    Judul media nested

    Cras sit amet nibh libero, ing 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>

Dhaptar klompok

Grup dhaptar minangka komponen sing fleksibel lan kuat kanggo nampilake ora mung dhaptar unsur sing prasaja, nanging uga sing rumit kanthi konten khusus.

Tuladha dhasar

Klompok dhaptar sing paling dhasar mung minangka dhaptar tanpa urutan karo item dhaptar, lan kelas sing tepat. Mbangun ing karo opsi sing tindakake, utawa CSS dhewe yen perlu.

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

Tambah komponen lencana menyang sembarang item grup dhaptar lan bakal kanthi otomatis dipanggonke ing sisih tengen.

  • 14Cras justo odio
  • 2Dapibus ac facilisis ing
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Item sing disambung

Linkify item klompok dhaptar kanthi nggunakake tag jangkar tinimbang item dhaptar (sing uga tegese wong tuwa <div>tinimbang <ul>). Ora perlu kanggo wong tuwa individu watara saben unsur.

<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

Item klompok dhaptar bisa dadi tombol tinimbang item dhaptar (sing uga tegese wong tuwa <div>tinimbang <ul>). Ora perlu kanggo wong tuwa individu watara saben unsur. Aja nggunakake .btnkelas standar ing kene.

<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 dipatèni

Tambah .disabledmenyang .list-group-itemabu-abu kanggo katon dipatèni.

<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

Gunakake kelas kontekstual kanggo gaya item dhaptar, gawan utawa disambung. Uga kalebu .activenegara.

  • Dapibus ac facilisis ing
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum lan 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>

Konten khusus

Tambahake meh kabeh HTML ing, sanajan kanggo grup dhaptar sing disambung kaya ing ngisor iki.

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

Panel

Nalika ora tansah perlu, kadhangkala sampeyan kudu sijine DOM ing kothak. Kanggo kahanan kasebut, coba komponen panel.

Tuladha dhasar

Kanthi gawan, kabeh .panelsing ditindakake yaiku ngetrapake sawetara wates dhasar lan bantalan kanggo ngemot sawetara konten.

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

Panel kanthi judhul

Tambah wadhah judhul menyang panel kanthi gampang .panel-heading. Sampeyan uga bisa nyakup sembarang <h1>- <h6>karo .panel-titlekelas kanggo nambah judhul wis gaya. Nanging, ukuran font <h1>- <h6>diganti dening .panel-heading.

Kanggo pewarnaan link sing tepat, manawa kanggo nyelehake pranala ing judhul ing .panel-title.

Judul panel tanpa judul
Isi panel

judhul panel

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

Bungkus tombol utawa teks sekunder ing .panel-footer. Elinga yen footer panel ora diwenehi warna lan wates nalika nggunakake variasi kontekstual amarga ora ana ing latar ngarep.

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

Alternatif kontekstual

Kaya komponen liyane, gampang nggawe panel luwih migunani kanggo konteks tartamtu kanthi nambahake sembarang kelas negara kontekstual.

judhul panel

Isi panel

judhul panel

Isi panel

judhul panel

Isi panel

judhul panel

Isi panel

judhul panel

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

Kanthi tabel

Tambah sembarang non-wates .tableing panel kanggo desain rapi. Yen ana .panel-body, kita nambah wates ekstra ing ndhuwur meja kanggo misahake.

Panel heading

Sawetara isi panel standar ing kene. 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.

# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si 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>

Yen ora ana awak panel, komponen kasebut pindhah saka header panel menyang meja tanpa gangguan.

Panel heading
# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Kanthi klompok dhaptar

Gampang kalebu klompok dhaptar lengkap ing panel apa wae.

Panel heading

Sawetara isi panel standar ing kene. 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 ing
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum lan 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>

embed responsif

Ngidini browser nemtokake ukuran video utawa slideshow adhedhasar jembar blok sing ngemot kanthi nggawe rasio intrinsik sing bakal ukurane kanthi bener ing piranti apa wae.

Aturan langsung ditrapake kanggo <iframe>, <embed>, <video>, lan <object>unsur; opsional nggunakake kelas turunan eksplisit .embed-responsive-itemyen sampeyan pengin cocog gaya kanggo atribut liyane.

Pro-Tip! Sampeyan ora perlu kanggo kalebu frameborder="0"ing <iframe>s minangka kita override sing kanggo sampeyan.

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

sumur

Default uga

Gunakake sumur minangka efek prasaja ing unsur kanggo menehi efek inset.

Delengen, aku ana ing sumur!
<div class="well">...</div>

Kelas opsional

Kontrol bantalan lan sudhut bunder kanthi rong kelas modifier opsional.

Delengen, aku ana ing sumur gedhe!
<div class="well well-lg">...</div>
Delengen, aku ana ing sumur cilik!
<div class="well well-sm">...</div>