Glyphicon

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.

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

Dropdown

Menu kontekstual yang dapat dialihkan untuk menampilkan daftar tautan. Dibuat interaktif dengan plugin JavaScript dropdown .

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>

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.

Mungkin memerlukan pemosisian tambahan

Dropdown secara otomatis diposisikan melalui CSS dalam aliran normal dokumen. Ini berarti dropdown dapat dipotong oleh orang tua dengan overflowproperti tertentu atau muncul di luar batas viewport. Atasi masalah ini sendiri saat muncul.

Perataan yang tidak digunakan .pull-rightlagi

Mulai v3.1.0, kami tidak lagi .pull-rightmenggunakan menu tarik-turun. Untuk meratakan kanan menu, gunakan .dropdown-menu-right. Komponen nav rata kanan di navbar menggunakan versi mixin dari kelas ini untuk menyelaraskan menu secara otomatis. Untuk menimpanya, gunakan .dropdown-menu-left.

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

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>

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

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

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>

Grup tombol

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

Bilah alat tombol

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

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

Dropdown tombol

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>

Grup masukan

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.

@

@contoh.com

$ .00

https://contoh.com/pengguna/
<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>

navigasi

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.

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>

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>

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>

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>

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>

navigasi

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:

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

Membutuhkan plugin JavaScript

Jika JavaScript dinonaktifkan dan area pandang cukup sempit sehingga navbar runtuh, tidak mungkin untuk memperluas navbar dan melihat konten di dalam .navbar-collapse.

Navbar responsif memerlukan plugin penciutan untuk disertakan dalam versi Bootstrap Anda.

Mengubah breakpoint navbar seluler yang diciutkan

Navbar menciut ke tampilan seluler vertikal saat area pandang lebih sempit dari @grid-float-breakpoint, dan meluas ke tampilan non-seluler horizontal saat area pandang setidaknya @grid-float-breakpointlebar. Sesuaikan variabel ini di sumber Lebih sedikit untuk mengontrol saat bilah navigasi diciutkan/diperluas. Nilai defaultnya adalah 768px(layar "kecil" atau "tablet" terkecil).

Jadikan navbars dapat diakses

Pastikan untuk menggunakan <nav>elemen atau, jika menggunakan elemen yang lebih umum seperti a <div>, tambahkan a role="navigation"ke setiap bilah navigasi untuk mengidentifikasinya secara eksplisit sebagai kawasan tengara bagi pengguna teknologi pendukung.

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

Peringatan perangkat seluler

Ada beberapa peringatan terkait penggunaan kontrol formulir dalam elemen tetap pada perangkat seluler. Lihat dokumen dukungan browser kami untuk detailnya.

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>

Penggunaan khusus konteks

Seperti tombol standar class , .navbar-btndapat digunakan pada <a>dan <input>elemen. Namun, baik .navbar-btnkelas tombol standar maupun tidak boleh digunakan pada <a>elemen di dalam .navbar-nav.

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.

Menyejajarkan beberapa komponen dengan benar

Navbars saat ini memiliki batasan dengan beberapa .navbar-rightkelas. Untuk ruang konten dengan benar, kami menggunakan margin negatif pada .navbar-rightelemen terakhir. Ketika ada beberapa elemen yang menggunakan kelas itu, margin ini tidak berfungsi sebagaimana mestinya.

Kami akan meninjau kembali ini ketika kami dapat menulis ulang komponen itu di v4.

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>

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>

Label

Contoh

Contoh judul Baru

Contoh judul Baru

Contoh judul Baru

Contoh judul Baru

Contoh judul Baru
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 .

Lencana

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>

Jumbotron

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>

Kepala halaman

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>

Gambar kecil

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.

100%x200

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

100%x200

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

100%x200

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>

Peringatan

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.

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

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

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

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

Bilah kemajuan

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.

60% Selesai
<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.

40% Selesai (berhasil)
20% Selesai
60% Selesai (peringatan)
80% Selesai (bahaya)
<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.

40% Selesai (berhasil)
20% Selesai
60% Selesai (peringatan)
80% Selesai (bahaya)
<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.

45% Selesai
<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.

35% Selesai (berhasil)
20% Selesai (peringatan)
10% Selesai (bahaya)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Objek media

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

Daftar grup

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.

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

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

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

Panel

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>

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

Sematan responsif

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>

sumur

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>