Lebih dari selusin komponen yang dapat digunakan kembali dibangun untuk menyediakan ikonografi, dropdown, grup input, navigasi, peringatan, dan banyak lagi.
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.
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.
Contoh
Gunakan mereka di tombol, grup tombol untuk bilah alat, navigasi, atau input formulir yang ditambahkan sebelumnya.
Ikon yang digunakan dalam peringatan untuk menyampaikan bahwa itu adalah pesan kesalahan, dengan .sr-onlyteks tambahan untuk menyampaikan petunjuk ini kepada pengguna teknologi pendukung.
Kesalahan:Masukkan alamat email yang valid
Dropdown
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.
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.
Header
Tambahkan tajuk untuk memberi label pada bagian tindakan di menu tarik-turun mana pun.
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.
Bilah alat tombol
Menggabungkan set <div class="btn-group">menjadi <div class="btn-toolbar">untuk komponen yang lebih kompleks.
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.
Bersarang
Tempatkan a .btn-groupdi dalam yang lain .btn-groupketika Anda ingin menu dropdown dicampur dengan serangkaian tombol.
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.
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.
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.
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.
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.
Kotak centang dan add-on radio
Tempatkan kotak centang atau opsi radio apa pun di dalam addon grup input alih-alih teks.
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.
Tombol dengan dropdown
Tombol tersegmentasi
Beberapa tombol
Meskipun Anda hanya dapat memiliki satu add-on per sisi, Anda dapat memiliki beberapa tombol di dalam satu .input-group-btn.
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.
tab
Perhatikan .nav-tabskelas membutuhkan kelas .navdasar.
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 .
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.
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.
Citra merek
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.
Formulir
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.
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.
Tombol
Tambahkan .navbar-btnkelas ke <button>elemen yang tidak berada di a <form>untuk memusatkannya secara vertikal di bilah navigasi.
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.
Teks
Bungkus string teks dalam elemen dengan .navbar-text, biasanya pada <p>tag untuk awalan dan warna yang tepat.
Tautan non-nav
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.
Penyelarasan komponen
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.
Tetap ke atas
Tambahkan .navbar-fixed-topdan sertakan konten navbar .containeratau ke tengah dan pad..container-fluid
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.
Pastikan untuk menyertakan ini setelah inti Bootstrap CSS.
Tetap ke bawah
Tambahkan .navbar-fixed-bottomdan sertakan konten navbar .containeratau ke tengah dan pad..container-fluid
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.
Pastikan untuk menyertakan ini setelah inti Bootstrap CSS.
Atasan statis
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.
Navbar terbalik
Ubah tampilan navbar dengan menambahkan .navbar-inverse.
Tepung roti
Tunjukkan lokasi halaman saat ini dalam hierarki navigasi.
Pemisah secara otomatis ditambahkan dalam CSS melalui :beforedan content.
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.
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.
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.
Perekat
Ingin pagination yang lebih besar atau lebih kecil? Tambahkan .pagination-lgatau .pagination-smuntuk ukuran tambahan.
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.
Tautan sejajar
Atau, Anda dapat menyelaraskan setiap tautan ke samping:
Status dinonaktifkan opsional
Tautan pager juga menggunakan .disabledkelas utilitas umum dari pagination.
Label
Contoh
Contoh judul Baru
Contoh judul Baru
Contoh judul Baru
Contoh judul Baru
Contoh judul Baru
Contoh judul Baru
Variasi yang tersedia
Tambahkan salah satu kelas pengubah yang disebutkan di bawah ini untuk mengubah tampilan label.
Default Info Sukses Utama Peringatan Bahaya
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.
Untuk membuat jumbotron lebar penuh, dan tanpa sudut membulat, letakkan di luar semua .containers dan tambahkan .containerdi dalam.
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).
Contoh tajuk halaman Subteks untuk tajuk
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.
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.
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.
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.
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.
Peringatan yang dapat ditutup
Bangun peringatan apa pun dengan menambahkan tombol opsional .alert-dismissibledan tutup.
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
Dengan label
Hapus kelas <span>dengan .sr-onlydari dalam bilah kemajuan untuk menampilkan persentase yang terlihat.
60%
Untuk memastikan bahwa teks label tetap terbaca bahkan untuk persentase rendah, pertimbangkan untuk menambahkan a min-widthke bilah kemajuan.
0%
2%
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)
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)
animasi
Add .activeto .progress-bar-stripeduntuk menganimasikan garis-garis dari kanan ke kiri. Tidak tersedia di IE9 dan di bawahnya.
45% Selesai
Ditumpuk
Tempatkan beberapa batang ke dalam yang sama .progressuntuk menumpuknya.
35% Selesai (berhasil)
20% Selesai (peringatan)
10% Selesai (bahaya)
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.
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.
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.
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
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
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.
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.
Item yang dinonaktifkan
Tambahkan .disabledke a .list-group-itemuntuk membuatnya abu-abu agar tampak dinonaktifkan.
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
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
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
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
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
Jika tidak ada badan panel, komponen berpindah dari header panel ke tabel tanpa gangguan.
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
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.
sumur
Default dengan baik
Gunakan sumur sebagai efek sederhana pada elemen untuk memberikan efek sisipan.
Lihat, aku di dalam sumur!
Kelas opsional
Kontrol bantalan dan sudut membulat dengan dua kelas pengubah opsional.