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.

Ketik alamat email sing bener

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

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

Tuladha

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>

Alignment

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.

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

Headers

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>

Pembagi

Tambah divider kanggo misahake seri pranala ing menu gulung mudhun.

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

Item menu dipatèni

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>

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 `role`lan 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>

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.

Ngiwa agêng bener

Ngiwa agêng

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

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>

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.

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

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.

Tab

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>

Pil

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>

Dibenerake

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>

Link dipatèni

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>

Nggunakake dropdowns

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

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

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

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>

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.

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>

pranala selaras

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>

Tuladha

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 .

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

Kothak mlebu42

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

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>

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>

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.

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

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

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>

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.

Inggih rampung! Sampeyan kasil maca pesen tandha penting iki.

Kepala munggah! Tandha iki mbutuhake perhatian sampeyan, nanging ora penting banget.

Pènget! Luwih becik mriksa dhewe, sampeyan ora katon apik banget.

Oh sworo seru! Ganti sawetara perkara lan coba kirim maneh.

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

Pènget! Luwih becik mriksa dhewe, sampeyan ora katon apik banget.

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

Link ing tandha

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

Inggih rampung! Sampeyan kasil maca pesen tandha penting iki .

Kepala munggah! Tandha iki mbutuhake perhatian sampeyan , nanging ora penting banget.

Pènget! Luwih becik mriksa dhewe, sampeyan ora katon apik banget .

Oh sworo seru! Ganti sawetara perkara lan coba kirim maneh.

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

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.

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

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

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

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

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

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.

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

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.

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

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

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.

Dhaptar judhul item klompok

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

Dhaptar judhul item klompok

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

Dhaptar judhul item klompok

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

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>

Panel karo footer

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

Panel footer

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

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>

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>

Komponen

Glyphicons

Glyphs kasedhiya

Carane nggunakake

Aja nyampur karo komponen liyane

Mung kanggo nggunakake ing unsur kosong

Ngganti lokasi font lambang

Ikon sing bisa diakses

Tuladha

Dropdowns

Tuladha

Alignment

Bisa uga mbutuhake posisi tambahan

Alignment sing ora .pull-rightdigunakake

Headers

Pembagi

Item menu dipatèni

Klompok tombol

Tooltips & popovers ing kelompok tombol mbutuhake setelan khusus

Priksa manawa bener rolelan menehi label

Tuladha dhasar

Tombol toolbar

ukuran

nyarang

Variasi vertikal

Kelompok tombol sing dibenerake

Nangani wates

IE8 lan wates

Kanthi <a>unsur

Link tumindak minangka tombol

Kanthi <button>unsur

Tombol dropdowns

Ketergantungan plugin

Tombol dropdowns siji

Tombol pamisah gulung mudhun

ukuran

Variasi dropup

Klompok input

Tekstual <input>mung

Tooltips & popovers ing grup input mbutuhake setelan khusus

Aja nyampur karo komponen liyane

Tansah nambah label

Tuladha dhasar

ukuran

Kothak lan tambahan radio

Addons tombol

Tombol karo dropdowns

Tombol sing dipérang

Multiple tombol

Navs

Nggunakake navs kanggo panel tab mbutuhake plugin tab JavaScript

Nggawe navs digunakake minangka pandhu arah diakses

Tab

Pil

Dibenerake

Safari lan responsif navs sabdho

Link dipatèni

Fungsi link ora kena pengaruh

Nggunakake dropdowns

Tab karo dropdowns

Pil karo dropdowns

Navbar

Navbar standar

Isi kebanjiran

Mbutuhake plugin JavaScript

Ngganti breakpoint navbar seluler ambruk

Nggawe navbars bisa diakses

Gambar merek

Formulir

Caveats piranti seluler

Tansah nambah label

Tombol

Panggunaan khusus konteks

Teks

Link non-nav

Alignment komponen

aligning tengen sawetara komponen

Tetep ing ndhuwur

Padding awak dibutuhake

Ndandani menyang ngisor

Alignment sing ora `.pull-right`digunakake

Priksa manawa bener `role`lan menehi label

Kanthi `<a>`unsur

Kanthi `<button>`unsur

Tekstual `<input>`mung