Mesin terbang yang tersedia

Termasuk lebih dari 250 mesin terbang dalam format font dari set Glyphicon Halflings. Glyphicons Halflings biasanya tidak tersedia secara gratis, tetapi pembuatnya telah menyediakannya untuk Bootstrap secara gratis. Sebagai ucapan terima kasih, kami hanya meminta Anda menyertakan tautan kembali ke Glyphicons bila memungkinkan.

glyphicon glyphicon-tanda bintang
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-awan
glyphicon glyphicon-amplop
glyphicon glyphicon-pensil
glyphicon glyphicon-kaca
glyphicon glyphicon-musik
glyphicon pencarian glyphicon
glyphicon glyphicon-hati
glyphicon glyphicon-bintang
glyphicon glyphicon-bintang-kosong
glyphicon glyphicon-pengguna
glyphicon glyphicon-film
glyphicon glyphicon-th-besar
glyphicon glyphicon-th
glyphicon glyphicon-th-daftar
glyphicon glyphicon-ok
glyphicon glyphicon-hapus
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-sinyal
glyphicon glyphicon-gigi
glyphicon glyphicon-sampah
glyphicon glyphicon-rumah
file glyphicon glyphicon
glyphicon glyphicon-waktu
glyphicon glyphicon-jalan
glyphicon glyphicon-download-alt
glyphicon glyphicon-unduh
glyphicon glyphicon-upload
glyphicon glyphicon-kotak masuk
glyphicon glyphicon-play-circle
glyphicon glyphicon-ulangi
glyphicon glyphicon-menyegarkan
glyphicon glyphicon-daftar-alt
glyphicon glyphicon-kunci
glyphicon glyphicon-bendera
glyphicon glyphicon-headphone
glyphicon glyphicon-volume-mati
glyphicon glyphicon-volume-turun
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tag
glyphicon glyphicon-buku
glyphicon glyphicon-bookmark
glyphicon glyphicon-cetak
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-teks-tinggi
glyphicon glyphicon-teks-lebar
glyphicon glyphicon-sejajarkan-kiri
glyphicon glyphicon-align-center
glyphicon glyphicon-align-kanan
glyphicon glyphicon-align-justify
glyphicon daftar glyphicon
glyphicon glyphicon-indent-kiri
glyphicon glyphicon-indent-kanan
glyphicon glyphicon-facetime-video
glyphicon glyphicon-gambar
glyphicon glyphicon-peta-marker
glyphicon glyphicon-menyesuaikan
glyphicon glyphicon-warna
glyphicon glyphicon-edit
glyphicon glyphicon-berbagi
glyphicon glyphicon-periksa
glyphicon glyphicon-bergerak
glyphicon glyphicon-langkah-mundur
glyphicon glyphicon-cepat-mundur
glyphicon glyphicon-mundur
glyphicon glyphicon-play
glyphicon glyphicon-jeda
glyphicon glyphicon-stop
glyphicon glyphicon-maju
glyphicon glyphicon-maju-cepat
glyphicon glyphicon-langkah-maju
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-kiri
glyphicon glyphicon-chevron-kanan
glyphicon glyphicon-tanda plus
glyphicon glyphicon-minus-tanda
glyphicon glyphicon-hapus-tanda
glyphicon glyphicon-ok-tanda
glyphicon glyphicon-tanda-pertanyaan
glyphicon glyphicon-info-tanda
glyphicon glyphicon-tangkapan layar
glyphicon glyphicon-hapus-lingkaran
glyphicon glyphicon-ok-lingkaran
glyphicon glyphicon-ban-lingkaran
glyphicon glyphicon-panah-kiri
glyphicon glyphicon-panah-kanan
glyphicon glyphicon-panah-atas
glyphicon glyphicon-panah-bawah
glyphicon glyphicon-share-alt
glyphicon glyphicon-mengubah ukuran-penuh
glyphicon glyphicon-mengubah ukuran-kecil
glyphicon glyphicon-tanda seru
glyphicon glyphicon-hadiah
glyphicon glyphicon-daun
glyphicon glyphicon-api
glyphicon glyphicon-mata terbuka
glyphicon glyphicon-mata-tutup
glyphicon glyphicon-peringatan-tanda
Glyphicon Glyphicon-pesawat
glyphicon glyphicon-kalender
glyphicon glyphicon-acak
glyphicon glyphicon-komentar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-keranjang belanja
glyphicon glyphicon-folder-tutup
glyphicon glyphicon-folder-terbuka
glyphicon glyphicon-mengubah ukuran-vertikal
glyphicon glyphicon-mengubah ukuran-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bel
glyphicon glyphicon-sertifikat
glyphicon glyphicon-acungan jempol
glyphicon glyphicon-jempol ke bawah
glyphicon glyphicon-tangan-kanan
glyphicon glyphicon-tangan-kiri
glyphicon glyphicon-hand-up
glyphicon glyphicon-tangan-bawah
glyphicon glyphicon-lingkaran-panah-kanan
glyphicon glyphicon-lingkaran-panah-kiri
glyphicon glyphicon-lingkaran-panah-atas
glyphicon glyphicon-lingkaran-panah-bawah
glyphicon glyphicon-globe
glyphicon kunci pas glyphicon
glyphicon tugas glyphicon
filter glyphicon glyphicon
glyphicon glyphicon-tas kerja
glyphicon glyphicon-layar penuh
glyphicon glyphicon-dasbor
glyphicon glyphicon-penjepit kertas
glyphicon glyphicon-hati-kosong
glyphicon tautan glyphicon
glyphicon glyphicon-ponsel
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-attributes-alt
glyphicon glyphicon-tidak dicentang
glyphicon glyphicon-memperluas
glyphicon glyphicon-runtuh-down
glyphicon glyphicon-runtuh-up
glyphicon glyphicon-login
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-jendela-baru
glyphicon catatan glyphicon
glyphicon glyphicon-simpan
glyphicon glyphicon-terbuka
glyphicon glyphicon-disimpan
glyphicon glyphicon-impor
glyphicon glyphicon-ekspor
glyphicon glyphicon-kirim
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-disimpan
glyphicon glyphicon-floppy-hapus
glyphicon glyphicon-floppy-simpan
glyphicon glyphicon-floppy-buka
glyphicon glyphicon-kartu kredit
glyphicon glyphicon-transfer
glyphicon glyphicon-alat makan
glyphicon glyphicon-header
glyphicon glyphicon terkompresi
glyphicon glyphicon-earphone
glyphicon glyphicon-telepon-alt
glyphicon glyphicon-menara
glyphicon glyphicon-statistik
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitle
glyphicon glyphicon-suara-stereo
glyphicon glyphicon-suara-dolby
glyphicon glyphicon-suara-5-1
glyphicon glyphicon-suara-6-1
glyphicon glyphicon-suara-7-1
glyphicon glyphicon-tanda hak cipta
glyphicon glyphicon-tanda pendaftaran
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-pohon-konifer
glyphicon glyphicon-pohon-gugur
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-buka-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-pasta
glyphicon glyphicon-peringatan
glyphicon glyphicon-equalizer
glyphicon glyphicon-raja
glyphicon glyphicon-ratu
glyphicon pion glyphicon
glyphicon glyphicon-uskup
glyphicon glyphicon-ksatria
glyphicon glyphicon-formula-bayi
glyphicon tenda glyphicon
glyphicon glyphicon-papan tulis
glyphicon tempat tidur glyphicon
glyphicon glyphicon-apel
glyphicon glyphicon-menghapus
glyphicon glyphicon-jam pasir
glyphicon glyphicon-lampu
glyphicon glyphicon-duplikat
glyphicon glyphicon-celengan
glyphicon glyphicon-gunting
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubel
glyphicon glyphicon-gosok
glyphicon skala glyphicon
glyphicon glyphicon-es-lilin
glyphicon glyphicon-es-lilin-terasa
glyphicon glyphicon-pendidikan
glyphicon glyphicon-opsi-horizontal
glyphicon glyphicon-opsi-vertikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-jendela
minyak glyphicon glyphicon
glyphicon glyphicon-butir
glyphicon glyphicon-kacamata hitam
glyphicon ukuran teks glyphicon
glyphicon glyphicon-teks-warna
glyphicon glyphicon-teks-latar belakang
glyphicon glyphicon-objek-sejajarkan-atas
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objek-sejajarkan-horizontal
glyphicon glyphicon-objek-sejajarkan-kiri
glyphicon glyphicon-objek-sejajarkan-vertikal
glyphicon glyphicon-objek-sejajarkan-kanan
glyphicon glyphicon-segitiga-kanan
glyphicon glyphicon-segitiga-kiri
glyphicon glyphicon-segitiga-bawah
glyphicon glyphicon-segitiga-atas
glyphicon glyphicon-konsol
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-kiri
glyphicon glyphicon-menu-kanan
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Cara Penggunaan

Untuk alasan kinerja, semua ikon memerlukan kelas dasar dan kelas ikon individu. Untuk menggunakannya, letakkan kode berikut di mana saja. Pastikan untuk meninggalkan spasi antara ikon dan teks untuk padding yang tepat.

Jangan dicampur dengan komponen lain

Kelas ikon tidak dapat langsung digabungkan dengan komponen lain. Mereka tidak boleh digunakan bersama dengan kelas lain pada elemen yang sama. Sebagai gantinya, tambahkan kelas bersarang <span>dan terapkan ikon ke file <span>.

Hanya untuk digunakan pada elemen kosong

Kelas ikon hanya boleh digunakan pada elemen yang tidak berisi konten teks dan tidak memiliki elemen turunan.

Mengubah lokasi font ikon

Bootstrap mengasumsikan file font ikon akan ditempatkan di ../fonts/direktori, relatif terhadap file CSS yang dikompilasi. Memindahkan atau mengganti nama file font tersebut berarti memperbarui CSS dengan salah satu dari tiga cara berikut:

Ubah @icon-font-pathdan/atau @icon-font-namevariabel di sumber Lebih sedikit file.
Manfaatkan opsi URL relatif yang disediakan oleh kompiler Less.
Ubah url()jalur di CSS yang dikompilasi.

Gunakan opsi apa pun yang paling sesuai dengan pengaturan pengembangan spesifik Anda.

Ikon yang dapat diakses

Versi modern dari teknologi bantu akan mengumumkan konten yang dihasilkan CSS, serta karakter Unicode tertentu. Untuk menghindari keluaran yang tidak diinginkan dan membingungkan di pembaca layar (terutama ketika ikon digunakan murni untuk dekorasi), kami menyembunyikannya dengan aria-hidden="true"atribut.

Jika Anda menggunakan ikon untuk menyampaikan makna (bukan hanya sebagai elemen dekoratif), pastikan bahwa makna ini juga disampaikan ke teknologi bantu – misalnya, sertakan konten tambahan, yang disembunyikan secara visual dengan .sr-onlykelas.

Jika Anda membuat kontrol tanpa teks lain (seperti <button>yang hanya berisi ikon), Anda harus selalu menyediakan konten alternatif untuk mengidentifikasi tujuan kontrol, sehingga masuk akal bagi pengguna teknologi pendukung. Dalam hal ini, Anda dapat menambahkan aria-labelatribut pada kontrol itu sendiri.

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

Contoh

Gunakan mereka di tombol, grup tombol untuk bilah alat, navigasi, atau input formulir yang ditambahkan sebelumnya.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Ikon yang digunakan dalam peringatan untuk menyampaikan bahwa itu adalah pesan kesalahan, dengan .sr-onlyteks tambahan untuk menyampaikan petunjuk ini kepada pengguna teknologi pendukung.

Masukkan alamat email yang valid

<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 yang dapat dialihkan untuk menampilkan daftar tautan. Dibuat interaktif dengan plugin JavaScript dropdown .

Contoh

Bungkus pemicu tarik-turun dan menu tarik-turun di dalam .dropdown, atau elemen lain yang menyatakan position: relative;. Kemudian tambahkan 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 dropdown dapat diubah untuk memperluas ke atas (bukan ke bawah) dengan menambahkan .dropupke induknya.

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

Penyelarasan

Secara default, menu dropdown secara otomatis diposisikan 100% dari atas dan di sepanjang sisi kiri induknya. Tambahkan .dropdown-menu-rightke a .dropdown-menuuntuk meratakan kanan menu tarik-turun.

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

Header

Tambahkan tajuk untuk memberi label pada bagian tindakan di menu tarik-turun mana pun.

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

Pembagi

Tambahkan pembagi untuk memisahkan rangkaian tautan di menu tarik-turun.

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

Item menu yang dinonaktifkan

Tambahkan .disabledke a <li>di tarik-turun untuk menonaktifkan tautan.

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

Kelompokkan serangkaian tombol bersama-sama pada satu baris dengan grup tombol. Tambahkan radio JavaScript opsional dan perilaku gaya kotak centang dengan plugin tombol kami .

Tooltips & popover dalam grup tombol memerlukan pengaturan khusus

Saat menggunakan tooltips atau popover pada elemen dalam a .btn-group, Anda harus menentukan opsi container: 'body'untuk menghindari efek samping yang tidak diinginkan (seperti elemen tumbuh lebih lebar dan/atau kehilangan sudut membulatnya saat tooltip atau popover dipicu).

Pastikan benar `role`dan berikan label

Agar teknologi bantu – seperti pembaca layar – untuk menyampaikan bahwa serangkaian tombol dikelompokkan, roleatribut yang sesuai perlu disediakan. Untuk grup tombol, ini akan menjadi role="group", sedangkan bilah alat harus memiliki ekstensi role="toolbar".

Satu pengecualian adalah grup yang hanya berisi satu kontrol (misalnya grup tombol yang dibenarkan dengan <button>elemen) atau dropdown.

Selain itu, grup dan toolbar harus diberi label eksplisit, karena sebagian besar teknologi bantu tidak akan mengumumkannya, meskipun ada roleatribut yang benar. Dalam contoh yang diberikan di sini, kami menggunakan aria-label, tetapi alternatif seperti aria-labelledbyjuga dapat digunakan.

Contoh dasar

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

Menggabungkan set <div class="btn-group">menjadi <div class="btn-toolbar">untuk komponen yang lebih 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>

Perekat

Alih-alih menerapkan kelas ukuran tombol ke setiap tombol dalam grup, tambahkan saja .btn-group-*ke masing-masing .btn-group, termasuk saat menyusun beberapa grup.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Bersarang

Tempatkan a .btn-groupdi dalam yang lain .btn-groupketika Anda ingin menu dropdown dicampur dengan serangkaian 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

Buat sekumpulan tombol tampak bertumpuk secara vertikal, bukan horizontal. Dropdown tombol split tidak didukung di sini.

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

Grup tombol yang dibenarkan

Buat sekelompok tombol meregang pada ukuran yang sama untuk menjangkau seluruh lebar induknya. Juga berfungsi dengan dropdown tombol di dalam grup tombol.

Menangani perbatasan

Karena HTML dan CSS khusus yang digunakan untuk membenarkan tombol (yaitu display: table-cell), batas di antara keduanya menjadi dua kali lipat. Dalam grup tombol biasa, margin-left: -1pxdigunakan untuk menumpuk batas alih-alih menghapusnya. Namun, margintidak bekerja dengan display: table-cell. Akibatnya, tergantung pada penyesuaian Anda ke Bootstrap, Anda mungkin ingin menghapus atau mewarnai ulang batas.

IE8 dan perbatasan

Internet Explorer 8 tidak membuat batas pada tombol dalam grup tombol yang dibenarkan, apakah itu aktif <a>atau <button>elemen. Untuk menyiasatinya, bungkus setiap tombol dengan .btn-group.

Lihat #12476 untuk informasi lebih lanjut.

Dengan `<a>`elemen

Cukup bungkus serangkaian .btns di .btn-group.btn-group-justified.

Kiri Tengah Benar

Kiri Tengah

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

Tautan bertindak sebagai tombol

Jika <a>elemen digunakan untuk bertindak sebagai tombol – memicu fungsionalitas dalam halaman, daripada menavigasi ke dokumen atau bagian lain dalam halaman saat ini – elemen tersebut juga harus diberi role="button".

Dengan `<button>`elemen

Untuk menggunakan grup tombol yang dibenarkan dengan <button>elemen, Anda harus membungkus setiap tombol dalam grup tombol . Sebagian besar browser tidak menerapkan CSS kami dengan benar untuk pembenaran <button>elemen, tetapi karena kami mendukung dropdown tombol, kami dapat mengatasinya.

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

Gunakan tombol apa saja untuk memicu menu tarik-turun dengan menempatkannya di dalam a .btn-groupdan memberikan markup menu yang tepat.

Ketergantungan plugin

Dropdown tombol memerlukan plugin dropdown untuk disertakan dalam versi Bootstrap Anda.

Dropdown tombol tunggal

Ubah tombol menjadi sakelar tarik-turun dengan beberapa perubahan markup dasar.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Pisahkan tombol tarik-turun

Demikian pula, buat dropdown tombol terpisah dengan perubahan markup yang sama, hanya dengan tombol terpisah.

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

Perekat

Dropdown tombol berfungsi dengan tombol dari semua 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 drop-up

Picu menu tarik-turun di atas elemen dengan menambahkan .dropupke induknya.

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

Perluas kontrol formulir dengan menambahkan teks atau tombol sebelum, sesudah, atau di kedua sisi file <input>. Gunakan .input-groupdengan .input-group-addonatau .input-group-btnuntuk menambahkan atau menambahkan elemen ke satu .form-control.

Tekstual `<input>`s saja

Hindari menggunakan <select>elemen di sini karena tidak dapat ditata sepenuhnya di browser WebKit.

Hindari menggunakan <textarea>elemen di sini karena rowsatributnya tidak akan dihormati dalam beberapa kasus.

Tooltips & popover di grup input memerlukan pengaturan khusus

Saat menggunakan tooltips atau popover pada elemen dalam .input-group, Anda harus menentukan opsi container: 'body'untuk menghindari efek samping yang tidak diinginkan (seperti elemen tumbuh lebih lebar dan/atau kehilangan sudut membulatnya saat tooltip atau popover dipicu).

Jangan dicampur dengan komponen lain

Jangan mencampur grup formulir atau kelas kolom kisi secara langsung dengan grup input. Sebagai gantinya, susun grup input di dalam grup formulir atau elemen terkait kisi.

Selalu tambahkan label

Pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap masukan. Untuk grup input ini, pastikan bahwa setiap label atau fungsi tambahan disampaikan ke teknologi bantu.

Teknik yang tepat untuk digunakan (elemen yang terlihat <label>, <label>elemen yang disembunyikan menggunakan .sr-onlykelas, atau penggunaan aria-label, aria-labelledby, aria-describedby, titleatau placeholderatribut) dan informasi tambahan apa yang perlu disampaikan akan bervariasi tergantung pada jenis widget antarmuka yang tepat yang Anda terapkan. Contoh-contoh di bagian ini memberikan beberapa pendekatan khusus kasus yang disarankan.

Contoh dasar

Tempatkan satu add-on atau tombol di kedua sisi input. Anda juga dapat menempatkan satu di kedua sisi input.

Kami tidak mendukung beberapa add-on ( .input-group-addonatau .input-group-btn) di satu sisi.

Kami tidak mendukung beberapa kontrol formulir dalam satu grup input.

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

Perekat

Tambahkan kelas ukuran formulir relatif ke .input-groupdirinya sendiri dan konten di dalamnya akan secara otomatis diubah ukurannya—tidak perlu mengulang kelas ukuran kontrol formulir pada setiap elemen.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Kotak centang dan add-on radio

Tempatkan kotak centang atau opsi radio apa pun di dalam addon grup input alih-alih 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 -->

Addon tombol

Tombol dalam grup input sedikit berbeda dan memerlukan satu level tambahan untuk bersarang. Alih-alih .input-group-addon, Anda harus menggunakan .input-group-btnuntuk membungkus tombol. Ini diperlukan karena gaya browser default yang tidak dapat 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 dengan dropdown

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Tombol tersegmentasi

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

Beberapa tombol

Meskipun Anda hanya dapat memiliki satu add-on per sisi, Anda dapat memiliki beberapa tombol di dalam satu .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 yang tersedia di Bootstrap memiliki markup bersama, dimulai dengan .navkelas dasar, serta status bersama. Tukar kelas pengubah untuk beralih di antara setiap gaya.

Menggunakan navs untuk panel tab membutuhkan plugin tab JavaScript

Untuk tab dengan area tabable, Anda harus menggunakan plugin JavaScript tabs . Markup juga akan memerlukan roleatribut tambahan dan ARIA – lihat contoh markup plugin untuk detail lebih lanjut.

Jadikan navigasi yang digunakan sebagai navigasi dapat diakses

Jika Anda menggunakan navs untuk menyediakan bilah navigasi, pastikan untuk menambahkan a role="navigation"ke wadah induk paling logis dari <ul>, atau bungkus <nav>elemen di seluruh navigasi. Jangan menambahkan peran <ul>itu sendiri, karena ini akan mencegahnya diumumkan sebagai daftar aktual oleh teknologi bantu.

tab

Perhatikan .nav-tabskelas membutuhkan kelas .navdasar.

<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

Ambil HTML yang sama, tetapi gunakan .nav-pillssebagai gantinya:

<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 juga dapat ditumpuk secara vertikal. Tambahkan saja .nav-stacked.

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

Dibenarkan

Mudah membuat tab atau pil dengan lebar yang sama dengan induknya pada layar yang lebih lebar dari 768px dengan .nav-justified. Pada layar yang lebih kecil, tautan navigasi ditumpuk.

Tautan navigasi navbar yang dibenarkan saat ini tidak didukung.

Safari dan navigasi dibenarkan yang responsif

Pada v9.1.2, Safari menunjukkan bug di mana mengubah ukuran browser Anda secara horizontal menyebabkan kesalahan rendering di navigasi yang dibenarkan yang dihapus setelah menyegarkan. Bug ini juga ditampilkan dalam contoh navigasi yang dibenarkan .

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

Tautan yang dinonaktifkan

Untuk komponen navigasi apa pun (tab atau pil), tambahkan tautan abu .disabled- abu dan tidak ada efek melayang .

Fungsi tautan tidak terpengaruh

Kelas ini hanya akan mengubah <a>tampilan , bukan fungsinya. Gunakan JavaScript khusus untuk menonaktifkan tautan di sini.

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

Menggunakan dropdown

Tambahkan menu dropdown dengan sedikit tambahan HTML dan plugin JavaScript dropdown .

Tab dengan dropdown

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

Pil dengan dropdown

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

Navbar adalah komponen meta responsif yang berfungsi sebagai header navigasi untuk aplikasi atau situs Anda. Mereka mulai diciutkan (dan dapat dialihkan) dalam tampilan seluler dan menjadi horizontal saat lebar area pandang yang tersedia bertambah.

Tautan navigasi navbar yang dibenarkan saat ini tidak didukung.

Konten yang meluap

Karena Bootstrap tidak tahu berapa banyak ruang yang dibutuhkan konten di navbar Anda, Anda mungkin mengalami masalah dengan pembungkusan konten ke dalam baris kedua. Untuk mengatasinya, Anda dapat:

Kurangi jumlah atau lebar item navbar.
Sembunyikan item navbar tertentu pada ukuran layar tertentu menggunakan kelas utilitas responsif .
Ubah titik di mana navbar Anda beralih antara mode diciutkan dan horizontal. Sesuaikan @grid-float-breakpointvariabel atau tambahkan kueri media Anda sendiri.

<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 dengan gambar Anda sendiri dengan menukar teks dengan <img>. Karena .navbar-brandmemiliki padding dan tingginya sendiri, Anda mungkin perlu mengganti beberapa CSS tergantung pada gambar Anda.

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

Tempatkan konten formulir di dalam .navbar-formuntuk penyelarasan vertikal yang tepat dan perilaku yang diciutkan di area pandang yang sempit. Gunakan opsi perataan untuk memutuskan di mana ia berada dalam konten navbar.

Sebagai pendahuluan, .navbar-formbagikan sebagian besar kodenya dengan .form-inlinevia mixin. Beberapa kontrol formulir, seperti grup input, mungkin memerlukan lebar tetap untuk ditampilkan dengan benar di dalam bilah navigasi.

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

Selalu tambahkan label

Pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap masukan. Untuk formulir sebaris ini, Anda dapat menyembunyikan label menggunakan .sr-onlykelas. Ada metode alternatif lebih lanjut untuk memberikan label untuk teknologi bantu, seperti aria-label, aria-labelledbyatau titleatribut. Jika tidak ada yang ada, pembaca layar dapat menggunakan placeholderatribut tersebut, jika ada, tetapi perhatikan bahwa penggunaan placeholdersebagai pengganti metode pelabelan lain tidak disarankan.

Tambahkan .navbar-btnkelas ke <button>elemen yang tidak berada di a <form>untuk memusatkannya secara vertikal di bilah navigasi.

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

Bungkus string teks dalam elemen dengan .navbar-text, biasanya pada <p>tag untuk awalan dan warna yang tepat.

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

Untuk orang-orang yang menggunakan tautan standar yang tidak ada dalam komponen navigasi navbar biasa, gunakan .navbar-linkkelas untuk menambahkan warna yang tepat untuk opsi navbar default dan terbalik.

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

Sejajarkan tautan navigasi, formulir, tombol, atau teks, menggunakan kelas utilitas .navbar-leftatau . .navbar-rightKedua kelas akan menambahkan float CSS ke arah yang ditentukan. Misalnya, untuk menyelaraskan tautan nav, letakkan di tempat terpisah <ul>dengan kelas utilitas masing-masing yang diterapkan.

Kelas-kelas ini adalah versi campuran dari .pull-leftdan .pull-right, tetapi mereka dicakup untuk kueri media untuk penanganan komponen navbar yang lebih mudah di seluruh ukuran perangkat.

Tambahkan .navbar-fixed-topdan sertakan konten navbar .containeratau ke tengah dan pad..container-fluid

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

Diperlukan bantalan tubuh

Navbar tetap akan melapisi konten Anda yang lain, kecuali jika Anda menambahkan paddingke bagian atas file <body>. Cobalah nilai Anda sendiri atau gunakan cuplikan kami di bawah ini. Tip: Secara default, navbar setinggi 50px.

body { padding-top: 70px; }

Pastikan untuk menyertakan ini setelah inti Bootstrap CSS.

Tambahkan .navbar-fixed-bottomdan sertakan konten navbar .containeratau ke tengah dan pad..container-fluid

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

Diperlukan bantalan tubuh

Navbar tetap akan melapisi konten Anda yang lain, kecuali jika Anda menambahkan paddingke bagian bawah file <body>. Cobalah nilai Anda sendiri atau gunakan cuplikan kami di bawah ini. Tip: Secara default, navbar setinggi 50px.

body { padding-bottom: 70px; }

Pastikan untuk menyertakan ini setelah inti Bootstrap CSS.

Buat navbar lebar penuh yang menggulir halaman dengan menambahkan .navbar-static-topdan menyertakan konten navbar .containeratau .container-fluidke tengah dan pad.

Berbeda dengan .navbar-fixed-*kelas, Anda tidak perlu mengubah padding apa pun pada file body.

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

Ubah tampilan navbar dengan menambahkan .navbar-inverse.

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

Tepung roti

Tunjukkan lokasi halaman saat ini dalam hierarki navigasi.

Pemisah secara otomatis ditambahkan dalam CSS melalui :beforedan content.

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

paginasi

Berikan tautan pagination untuk situs atau aplikasi Anda dengan komponen pagination multi-halaman, atau alternatif pager yang lebih sederhana .

Penomoran halaman default

Pagination sederhana yang terinspirasi oleh Rdio, bagus untuk aplikasi dan hasil pencarian. Blok besar sulit untuk dilewatkan, mudah diskalakan, dan menyediakan area klik yang besar.

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

Memberi label pada komponen pagination

Komponen pagination harus dibungkus dalam <nav>elemen untuk mengidentifikasinya sebagai bagian navigasi untuk pembaca layar dan teknologi bantu lainnya. Selain itu, karena halaman kemungkinan sudah memiliki lebih dari satu bagian navigasi (seperti navigasi utama di header, atau navigasi sidebar), disarankan untuk memberikan deskripsi aria-labelyang <nav>mencerminkan tujuannya. Misalnya, jika komponen pagination digunakan untuk menavigasi di antara sekumpulan hasil penelusuran, label yang sesuai dapat berupa aria-label="Search results pages".

Status dinonaktifkan dan aktif

Tautan dapat disesuaikan untuk keadaan yang berbeda. Gunakan .disableduntuk tautan yang tidak dapat diklik dan .activeuntuk menunjukkan halaman saat ini.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Kami menyarankan Anda menukar jangkar aktif atau yang dinonaktifkan untuk <span>, atau menghilangkan jangkar dalam kasus panah sebelumnya/berikutnya, untuk menghapus fungsionalitas klik sambil mempertahankan gaya yang diinginkan.

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

Perekat

Ingin pagination yang lebih besar atau lebih kecil? Tambahkan .pagination-lgatau .pagination-smuntuk 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>

halaman

Tautan cepat sebelumnya dan berikutnya untuk implementasi pagination sederhana dengan markup dan gaya ringan. Ini bagus untuk situs sederhana seperti blog atau majalah.

Contoh default

Secara default, tautan pusat pager.

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

Tautan sejajar

Atau, Anda dapat menyelaraskan setiap tautan ke samping:

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

Tautan pager juga menggunakan .disabledkelas utilitas umum dari 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>

Contoh

Contoh judul Baru

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

Variasi yang tersedia

Tambahkan salah satu kelas pengubah yang disebutkan di bawah ini untuk mengubah tampilan label.

Default Info Sukses Utama Peringatan Bahaya

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

Punya banyak label?

Masalah rendering dapat muncul ketika Anda memiliki lusinan label sebaris dalam wadah sempit, masing-masing berisi inline-blockelemennya sendiri (seperti ikon). Cara di sekitar ini adalah pengaturan display: inline-block;. Untuk konteks dan contoh, lihat #13219 .

Soroti item baru atau yang belum dibaca dengan mudah dengan menambahkan a <span class="badge">ke tautan, navigasi Bootstrap, dan banyak lagi.

kotak masuk42

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

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

runtuh sendiri

Ketika tidak ada item baru atau belum dibaca, lencana akan ditutup begitu saja (melalui :emptypemilih CSS) asalkan tidak ada konten di dalamnya.

Kompatibilitas lintas-browser

Lencana tidak akan runtuh sendiri di Internet Explorer 8 karena tidak memiliki dukungan untuk :emptypemilih.

Beradaptasi dengan status navigasi aktif

Gaya bawaan disertakan untuk menempatkan lencana dalam status aktif dalam 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 ringan dan fleksibel yang secara opsional dapat memperluas seluruh area pandang untuk menampilkan konten utama di situs Anda.

Halo Dunia!

Ini adalah unit pahlawan sederhana, komponen gaya jumbotron sederhana untuk meminta perhatian ekstra pada konten atau informasi unggulan.

Belajarlah lagi

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

Untuk membuat jumbotron lebar penuh, dan tanpa sudut membulat, letakkan di luar semua .containers dan tambahkan .containerdi dalam.

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

Sebuah shell sederhana untuk h1ruang yang tepat dan segmen bagian konten pada halaman. Itu dapat memanfaatkan elemen h1default ' small, serta sebagian besar komponen lainnya (dengan gaya tambahan).

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

Perluas sistem grid Bootstrap dengan komponen thumbnail untuk menampilkan grid gambar, video, teks, dan lainnya dengan mudah.

Jika Anda mencari presentasi thumbnail seperti Pinterest dengan berbagai ketinggian dan/atau lebar, Anda harus menggunakan plugin pihak ketiga seperti Masonry , Isotop , atau Salvattore .

Contoh default

Secara default, thumbnail Bootstrap dirancang untuk menampilkan gambar tertaut dengan markup minimal yang diperlukan.

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

Konten khusus

Dengan sedikit markup tambahan, Anda dapat menambahkan segala jenis konten HTML seperti heading, paragraf, atau tombol ke dalam thumbnail.

Label gambar mini

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

Tombol Tombol

Label gambar mini

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

Tombol Tombol

Label gambar mini

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

Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa dengan beberapa pesan peringatan yang tersedia dan fleksibel.

Contoh

Bungkus teks apa pun dan tombol tutup opsional ke dalam .alertdan salah satu dari empat kelas kontekstual (misalnya, .alert-success) untuk pesan peringatan dasar.

Tidak ada kelas default

Lansiran tidak memiliki kelas default, hanya kelas dasar dan pengubah. Peringatan abu-abu default tidak terlalu masuk akal, jadi Anda harus menentukan jenis melalui kelas kontekstual. Pilih dari kesuksesan, info, peringatan, atau bahaya.

Bagus sekali! Anda berhasil membaca pesan peringatan penting ini.

Perhatian! Peringatan ini membutuhkan perhatian Anda, tetapi tidak terlalu penting.

Peringatan! Lebih baik periksa diri Anda, Anda tidak terlihat terlalu baik.

Oh jepret! Ubah beberapa hal dan coba kirimkan lagi.

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

Peringatan yang dapat ditutup

Bangun peringatan apa pun dengan menambahkan tombol opsional .alert-dismissibledan tutup.

Membutuhkan plugin peringatan JavaScript

Untuk berfungsi penuh, lansiran yang dapat ditutup, Anda harus menggunakan plugin JavaScript lansiran .

Peringatan! Lebih baik periksa diri Anda, Anda tidak terlihat terlalu baik.

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

Pastikan perilaku yang tepat di semua perangkat

Pastikan untuk menggunakan <button>elemen dengan data-dismiss="alert"atribut data.

Tautan dalam peringatan

Gunakan .alert-linkkelas utilitas untuk menyediakan tautan berwarna yang cocok dengan cepat dalam peringatan apa pun.

Bagus sekali! Anda berhasil membaca pesan peringatan penting ini .

Perhatian! Lansiran ini membutuhkan perhatian Anda , tetapi tidak terlalu penting.

Peringatan! Lebih baik periksa diri Anda, Anda tidak terlihat terlalu baik .

Oh jepret! Ubah beberapa hal dan coba kirimkan lagi.

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

Berikan umpan balik terkini tentang kemajuan alur kerja atau tindakan dengan bilah kemajuan yang sederhana namun fleksibel.

Kompatibilitas lintas-browser

Bilah kemajuan menggunakan transisi dan animasi CSS3 untuk mencapai beberapa efeknya. Fitur-fitur ini tidak didukung di Internet Explorer 9 dan di bawah atau versi Firefox yang lebih lama. Opera 12 tidak mendukung animasi.

Kompatibilitas Kebijakan Keamanan Konten (CSP)

Jika situs web Anda memiliki Kebijakan Keamanan Konten (CSP) yang tidak mengizinkan style-src 'unsafe-inline', maka Anda tidak akan dapat menggunakan styleatribut sebaris untuk menyetel lebar bilah kemajuan seperti yang ditunjukkan pada contoh kami di bawah ini. Metode alternatif untuk menyetel lebar yang kompatibel dengan CSP ketat termasuk menggunakan sedikit JavaScript khusus (yang menyetel element.style.width) atau menggunakan kelas CSS khusus.

Contoh dasar

Bilah kemajuan default.

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

Dengan label

Hapus kelas <span>dengan .sr-onlydari dalam bilah kemajuan untuk menampilkan persentase yang terlihat.

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>

Untuk memastikan bahwa teks label tetap terbaca bahkan untuk persentase rendah, pertimbangkan untuk menambahkan a min-widthke bilah 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

Bilah kemajuan menggunakan beberapa tombol dan kelas peringatan yang sama untuk gaya yang 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>

bergaris

Menggunakan gradien untuk membuat efek bergaris. Tidak tersedia di IE9 dan di bawahnya.

<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

Add .activeto .progress-bar-stripeduntuk menganimasikan garis-garis dari kanan ke kiri. Tidak tersedia di IE9 dan di bawahnya.

<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

Tempatkan beberapa batang ke dalam yang sama .progressuntuk menumpuknya.

<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 objek abstrak untuk membangun berbagai jenis komponen (seperti komentar blog, Tweet, dll) yang menampilkan gambar rata kiri atau kanan di samping konten tekstual.

Media bawaan

Media default menampilkan objek media (gambar, video, audio) ke kiri atau kanan blok konten.

Judul media

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

Judul media

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

Judul media bersarang

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

Judul media

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

Judul media

Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, 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-leftdan .pull-rightjuga ada dan sebelumnya digunakan sebagai bagian dari komponen media, tetapi tidak digunakan lagi untuk penggunaan itu pada v3.3.0. Mereka kira-kira setara dengan .media-leftdan .media-right, kecuali yang .media-rightharus ditempatkan setelah .media-bodydi html.

Penyelarasan media

Gambar atau media lain dapat disejajarkan atas, tengah, atau bawah. Defaultnya adalah rata atas.

Media rata atas

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

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

Media rata tengah

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

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

Media rata bawah

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

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

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

Daftar media

Dengan sedikit markup tambahan, Anda dapat menggunakan media di dalam daftar (berguna untuk utas komentar atau daftar artikel).

Judul media

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

Judul media bersarang
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis.

Judul media bersarang
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis.

Judul media bersarang
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, 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 daftar adalah komponen yang fleksibel dan kuat untuk menampilkan tidak hanya daftar elemen yang sederhana, tetapi juga yang kompleks dengan konten khusus.

Contoh dasar

Grup daftar paling dasar hanyalah daftar tidak berurutan dengan item daftar, dan kelas yang tepat. Bangun di atasnya dengan opsi yang mengikuti, atau CSS Anda sendiri sesuai kebutuhan.

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

Tambahkan komponen lencana ke item grup daftar apa pun dan secara otomatis akan diposisikan di sebelah kanan.

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

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

Item tertaut

Tautkan item grup daftar dengan menggunakan tag jangkar alih-alih item daftar (itu juga berarti induk <div>, bukan <ul>). Tidak perlu orang tua individu di sekitar setiap elemen.

Cras justo odio Dapibus ac facilisis di Morbi leo risus Porta ac conectetur ac Vestibulum di 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 grup daftar mungkin berupa tombol alih-alih item daftar (itu juga berarti induk <div>, bukan <ul>). Tidak perlu orang tua individu di sekitar setiap elemen. Jangan gunakan .btnkelas standar di sini.

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

Tambahkan .disabledke a .list-group-itemuntuk membuatnya abu-abu agar tampak dinonaktifkan.

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

Gunakan kelas kontekstual untuk menata item daftar, default atau tertaut. Juga termasuk .activenegara.

Dapibus ac facilisis di
Cras sit amet nibh libero
Porta ac conectetur ac
Vestibulum di eros

Dapibus ac facilisis di Cras sit amet nibh libero Porta ac conectetur ac Vestibulum di 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

Tambahkan hampir semua HTML di dalamnya, bahkan untuk grup daftar tertaut seperti di bawah ini.

Daftar judul item grup

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

Daftar judul item grup

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

Daftar judul item grup

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

Meskipun tidak selalu diperlukan, terkadang Anda perlu memasukkan DOM ke dalam kotak. Untuk situasi tersebut, coba komponen panel.

Contoh dasar

Secara default, semua yang .paneldilakukan adalah menerapkan beberapa batas dan bantalan dasar untuk memuat beberapa konten.

Contoh panel dasar

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

Panel dengan judul

Tambahkan wadah heading dengan mudah ke panel Anda dengan .panel-heading. Anda juga dapat menyertakan apa saja <h1>- <h6>dengan .panel-titlekelas untuk menambahkan heading yang telah ditata sebelumnya. Namun, ukuran font <h1>- <h6>ditimpa oleh .panel-heading.

Untuk pewarnaan tautan yang tepat, pastikan untuk menempatkan tautan dalam heading di dalam .panel-title.

Judul panel tanpa judul

Konten panel

Judul panel

Konten 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 dengan footer

Bungkus tombol atau teks sekunder dalam .panel-footer. Perhatikan bahwa footer panel tidak mewarisi warna dan batas saat menggunakan variasi kontekstual karena tidak dimaksudkan untuk berada di latar depan.

Konten panel

Catatan kaki panel

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

Alternatif kontekstual

Seperti komponen lainnya, buat panel lebih bermakna untuk konteks tertentu dengan mudah dengan menambahkan kelas status kontekstual mana pun.

Judul panel

Konten panel

Judul panel

Konten panel

Judul panel

Konten panel

Judul panel

Konten panel

Judul panel

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

Dengan meja

Tambahkan apa pun yang tidak dibatasi .tabledi dalam panel untuk desain yang mulus. Jika ada .panel-body, kami menambahkan batas tambahan ke bagian atas tabel untuk pemisahan.

Judul panel

Beberapa konten panel default di sini. Nulla vitae elit libero, seorang 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.

#	Nama depan	Nama keluarga	Nama belakang
1	Tanda	Otto	@mdo
2	Yakub	Thornton	@gemuk
3	Larry	burung	@Indonesia

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

Jika tidak ada badan panel, komponen berpindah dari header panel ke tabel tanpa gangguan.

Judul panel

#	Nama depan	Nama keluarga	Nama belakang
1	Tanda	Otto	@mdo
2	Yakub	Thornton	@gemuk
3	Larry	burung	@Indonesia

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

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

Dengan grup daftar

Mudah menyertakan grup daftar lebar penuh dalam panel mana pun.

Judul panel

Beberapa konten panel default di sini. Nulla vitae elit libero, seorang pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Izinkan browser untuk menentukan dimensi video atau tayangan slide berdasarkan lebar blok yang memuatnya dengan membuat rasio intrinsik yang akan diskalakan dengan benar di perangkat apa pun.

Aturan langsung diterapkan ke <iframe>, <embed>, <video>, dan <object>elemen; secara opsional gunakan kelas turunan eksplisit .embed-responsive-itemsaat Anda ingin mencocokkan gaya untuk atribut lain.

Tips Pro! Anda tidak perlu memasukkan s frameborder="0"Anda <iframe>karena kami menimpanya untuk Anda.

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

Gunakan sumur sebagai efek sederhana pada elemen untuk memberikan efek sisipan.

Lihat, aku di dalam sumur!

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

Kelas opsional

Kontrol bantalan dan sudut membulat dengan dua kelas pengubah opsional.

Lihat, aku di sumur besar!

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

Lihat, aku di sumur kecil!

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

Komponen

Glyphicon

Mesin terbang yang tersedia

Cara Penggunaan

Jangan dicampur dengan komponen lain

Hanya untuk digunakan pada elemen kosong

Mengubah lokasi font ikon

Ikon yang dapat diakses

Contoh

Dropdown

Contoh

Penyelarasan

Mungkin memerlukan pemosisian tambahan

Perataan yang tidak digunakan .pull-rightlagi

Header

Pembagi

Item menu yang dinonaktifkan

Grup tombol

Tooltips & popover dalam grup tombol memerlukan pengaturan khusus

Pastikan benar roledan berikan label

Contoh dasar

Bilah alat tombol

Perekat

Bersarang

Variasi vertikal

Grup tombol yang dibenarkan

Menangani perbatasan

IE8 dan perbatasan

Dengan <a>elemen

Tautan bertindak sebagai tombol

Dengan <button>elemen

Dropdown tombol

Ketergantungan plugin

Dropdown tombol tunggal

Pisahkan tombol tarik-turun

Perekat

Variasi drop-up

Grup masukan

Tekstual <input>s saja

Tooltips & popover di grup input memerlukan pengaturan khusus

Jangan dicampur dengan komponen lain

Selalu tambahkan label

Contoh dasar

Perekat

Kotak centang dan add-on radio

Addon tombol

Tombol dengan dropdown

Tombol tersegmentasi

Beberapa tombol

navigasi

Menggunakan navs untuk panel tab membutuhkan plugin tab JavaScript

Jadikan navigasi yang digunakan sebagai navigasi dapat diakses

tab

pil

Dibenarkan

Safari dan navigasi dibenarkan yang responsif

Tautan yang dinonaktifkan

Fungsi tautan tidak terpengaruh

Menggunakan dropdown

Tab dengan dropdown

Pil dengan dropdown

navigasi

Navbar bawaan

Konten yang meluap

Membutuhkan plugin JavaScript

Mengubah breakpoint navbar seluler yang diciutkan

Jadikan navbars dapat diakses

Citra merek

Formulir

Peringatan perangkat seluler

Selalu tambahkan label

Tombol

Penggunaan khusus konteks

Teks

Tautan non-nav

Penyelarasan komponen

Menyejajarkan beberapa komponen dengan benar

Tetap ke atas

Diperlukan bantalan tubuh

Tetap ke bawah

Perataan yang tidak digunakan `.pull-right`lagi

Pastikan benar `role`dan berikan label

Dengan `<a>`elemen

Dengan `<button>`elemen

Tekstual `<input>`s saja