Komponen

Puluhan komponen yang dapat digunakan kembali dibangun ke dalam Bootstrap untuk menyediakan navigasi, peringatan, popover, dan banyak lagi.

Grup tombol

Gunakan grup tombol untuk menggabungkan beberapa tombol menjadi satu komponen komposit. Bangun mereka dengan serangkaian <a>atau <button>elemen.

Praktik terbaik

Kami merekomendasikan panduan berikut untuk menggunakan grup tombol dan toolbar:

  • Selalu gunakan elemen yang sama dalam satu grup tombol, <a>atau <button>.
  • Jangan mencampur tombol dengan warna berbeda dalam grup tombol yang sama.
  • Gunakan ikon sebagai tambahan atau sebagai ganti teks, tetapi pastikan menyertakan teks alt dan judul jika sesuai.

Grup Tombol terkait dengan dropdown (lihat di bawah) harus dipanggil secara terpisah dan selalu menyertakan tanda sisipan dropdown untuk menunjukkan perilaku yang diinginkan.

Contoh default

Berikut tampilan HTML untuk grup tombol standar yang dibuat dengan tombol tag jangkar:

  1. <div class = "grup btn" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Contoh bilah alat

Menggabungkan set <div class="btn-group">menjadi <div class="btn-toolbar">untuk komponen yang lebih kompleks.

  1. <div class = "btn-toolbar" >
  2. <div class = "grup btn" >
  3. ...
  4. </div>
  5. </div>

Kotak centang dan rasa radio

Grup tombol juga dapat berfungsi sebagai radio, di mana hanya satu tombol yang aktif, atau kotak centang, di mana sejumlah tombol dapat aktif. Lihat dokumen Javascript untuk itu.

Dapatkan javascriptnya »

Dropdown dalam grup tombol

Perhatian! Tombol dengan dropdown harus dibungkus satu per satu di .btn-groupdalam a .btn-toolbaruntuk rendering yang tepat.

Dropdown tombol

Contoh markup

Mirip dengan grup tombol, markup kami menggunakan markup tombol biasa, tetapi dengan beberapa tambahan untuk menyempurnakan gaya dan mendukung plugin jQuery dropdown Bootstrap.

  1. <div class = "grup btn" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Tindakan
  4. <span class = "tanda sisipan" ></span>
  5. </a>
  6. <ul class = "menu tarik-turun" >
  7. <!-- tautan menu tarik-turun -->
  8. </ul>
  9. </div>

Bekerja dengan semua ukuran tombol

Dropdown tombol berfungsi dalam berbagai ukuran. ukuran tombol Anda ke .btn-large, .btn-small, atau .btn-mini.

Memerlukan javascript

Dropdown tombol membutuhkan plugin dropdown Bootstrap untuk berfungsi.

Dalam beberapa kasus—seperti seluler—menu tarik-turun akan meluas di luar area pandang. Anda perlu menyelesaikan perataan secara manual atau dengan javascript khusus.


Pisahkan tombol tarik-turun

Ikhtisar dan contoh

Membangun gaya dan markup grup tombol, kita dapat dengan mudah membuat tombol split. Tombol terpisah menampilkan tindakan standar di sebelah kiri dan tombol tarik-turun di sebelah kanan dengan tautan kontekstual.

ukuran

Gunakan kelas tombol tambahan .btn-mini, .btn-small, atau .btn-largeuntuk ukuran.

  1. <div class = "grup btn" >
  2. ...
  3. <ul class = "menu tarik-turun tarik-kanan" >
  4. <!-- tautan menu tarik-turun -->
  5. </ul>
  6. </div>

Contoh markup

Kami memperluas dropdown tombol normal untuk memberikan tindakan tombol kedua yang beroperasi sebagai pemicu dropdown terpisah.

  1. <div class = "grup btn" >
  2. <button class = "btn" > Tindakan </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "tanda sisipan" ></span>
  5. </tombol>
  6. <ul class = "menu tarik-turun" >
  7. <!-- tautan menu tarik-turun -->
  8. </ul>
  9. </div>

Menu drop-up

Menu tarik-turun juga dapat diubah dari bawah ke atas dengan menambahkan satu kelas ke induk langsung dari .dropdown-menu. Ini akan membalik arah .caretdan memposisikan ulang menu itu sendiri untuk bergerak dari bawah ke atas, bukan dari atas ke bawah.

  1. <div class = "btn-grup dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "tanda sisipan" ></span>
  5. </tombol>
  6. <ul class = "menu tarik-turun" >
  7. <!-- tautan menu tarik-turun -->
  8. </ul>
  9. </div>

Penomoran halaman multikon

Kapan harus menggunakan?

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

Tautan halaman stateful

Tautan dapat disesuaikan dan berfungsi dalam sejumlah keadaan dengan kelas yang tepat. .disableduntuk tautan yang tidak dapat diklik dan .activeuntuk halaman saat ini.

Penjajaran yang fleksibel

Tambahkan salah satu dari dua kelas opsional untuk mengubah perataan tautan pagination: .pagination-centereddan .pagination-right.

Contoh

Komponen pagination default fleksibel dan bekerja dalam sejumlah variasi.

Markup

Dibungkus dalam <div>, pagination hanyalah file <ul>.

  1. <div class = "paginasi" >
  2. <ul>
  3. <li><a href = "#" > Sebelumnya </a></li>
  4. <li kelas = "aktif" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Selanjutnya </a></li>
  11. </ul>
  12. </div>

Pager Untuk tautan cepat sebelumnya dan selanjutnya

Tentang pager

Komponen pager adalah kumpulan tautan untuk implementasi pagination sederhana dengan markup ringan dan bahkan gaya yang lebih ringan. Ini bagus untuk situs sederhana seperti blog atau majalah.

Status dinonaktifkan opsional

Tautan pager juga menggunakan .disabledkelas umum dari pagination.

Contoh default

Secara default, tautan pusat pager.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Sebelumnya </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Selanjutnya </a>
  7. </li>
  8. </ul>

Tautan sejajar

Atau, Anda dapat menyelaraskan setiap tautan ke samping:

  1. <ul class = "pager" >
  2. <li kelas = "sebelumnya" >
  3. <a href = "#" > Lebih tua </a>
  4. </li>
  5. <li kelas = "berikutnya" >
  6. <a href = "#" > Lebih baru → </a>
  7. </li>
  8. </ul>
Label Markup
Bawaan <span class="label">Default</span>
Kesuksesan <span class="label label-success">Success</span>
Peringatan <span class="label label-warning">Warning</span>
Penting <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Terbalik <span class="label label-inverse">Inverse</span>

Tentang

Lencana kecil, komponen sederhana untuk menampilkan indikator atau hitungan dari beberapa macam. Mereka biasanya ditemukan di klien email seperti Mail.app atau di aplikasi seluler untuk pemberitahuan push.

Kelas yang tersedia

Nama Contoh Markup
Bawaan 1 <span class="badge">1</span>
Kesuksesan 2 <span class="badge badge-success">2</span>
Peringatan 4 <span class="badge badge-warning">4</span>
Penting 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Terbalik 10 <span class="badge badge-inverse">10</span>

Satuan pahlawan

Bootstrap menyediakan komponen ringan dan fleksibel yang disebut unit pahlawan untuk menampilkan konten di situs Anda. Ini bekerja dengan baik di situs pemasaran dan konten-berat.

Markup

Bungkus konten Anda divseperti ini:

  1. <div class = "unit pahlawan" >
  2. <h1> Judul </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primer btn-besar" >
  6. Belajarlah lagi
  7. </a>
  8. </p>
  9. </div>

Halo Dunia!

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

Belajarlah lagi

Kepala halaman

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

  1. <div class = "header halaman" >
  2. <h1> Contoh tajuk halaman </h1>
  3. </div>

Thumbnail default

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

Sangat dapat disesuaikan

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.

    Tindakan Tindakan

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

    Tindakan Tindakan

Mengapa menggunakan thumbnail

Thumbnail (sebelumnya .media-gridhingga v1.4) bagus untuk kisi foto atau video, hasil pencarian gambar, produk ritel, portofolio, dan banyak lagi. Mereka dapat berupa tautan atau konten statis.

Markup yang sederhana dan fleksibel

Markup thumbnail sederhana—hanya uldengan sejumlah lielemen yang diperlukan. Ini juga sangat fleksibel, memungkinkan semua jenis konten hanya dengan sedikit markup untuk membungkus konten Anda.

Menggunakan ukuran kolom kisi

Terakhir, komponen thumbnail menggunakan kelas sistem grid yang ada—seperti .span2atau — .span3untuk mengontrol dimensi thumbnail.

markup

Seperti disebutkan sebelumnya, markup yang diperlukan untuk gambar mini ringan dan mudah. Berikut adalah tampilan pengaturan default untuk gambar tertaut :

  1. <ul class = "thumbnail" >
  2. <li kelas = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Untuk konten HTML khusus dalam gambar mini, markupnya sedikit berubah. Untuk mengizinkan konten level blok di mana saja, kami menukarnya dengan <a>yang <div>serupa:

  1. <ul class = "thumbnail" >
  2. <li kelas = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Label gambar mini </h5>
  6. <p> Judul gambar mini di sini... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Contoh lainnya

Jelajahi semua pilihan Anda dengan berbagai kelas grid yang tersedia untuk Anda. Anda juga dapat mencampur dan mencocokkan ukuran yang berbeda.

Default ringan

Kelas dasar yang ditulis ulang

Dengan Bootstrap 2, kami telah menyederhanakan kelas dasar: .alertalih-alih .alert-message. Kami juga telah mengurangi markup minimum yang diperlukan—tidak ada <p>yang diperlukan secara default, hanya bagian luar <div>.

Pesan peringatan tunggal

Untuk komponen yang lebih tahan lama dengan lebih sedikit kode, kami telah menghapus tampilan pembeda untuk peringatan blokir, pesan yang datang dengan lebih banyak padding, dan biasanya lebih banyak teks. Kelasnya juga berubah menjadi .alert-block.


Sangat cocok dengan javascript

Bootstrap hadir dengan plugin jQuery hebat yang mendukung pesan peringatan, membuat penghapusannya cepat dan mudah.

Dapatkan pluginnya »

Contoh peringatan

Bungkus pesan Anda dan ikon tutup opsional dalam div dengan kelas sederhana.

Peringatan! Sebaiknya periksa diri Anda sendiri, Anda tidak terlihat terlalu baik.
  1. <div kelas = "peringatan" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Peringatan! </strong> Sebaiknya periksa sendiri, Anda tidak terlihat terlalu baik.
  4. </div>

Perhatian! Perangkat iOS memerlukan href="#"untuk menghilangkan peringatan. Pastikan untuk menyertakannya dan atribut data untuk ikon tutup jangkar. Atau, Anda dapat menggunakan <button>elemen dengan atribut data, yang telah kami pilih untuk dilakukan untuk dokumen kami. Saat menggunakan <button>, Anda harus menyertakan type="button"atau formulir Anda tidak boleh dikirimkan.

Perluas pesan peringatan standar dengan mudah dengan dua kelas opsional: .alert-blockuntuk kontrol padding dan teks yang lebih banyak dan .alert-headinguntuk heading yang cocok.

Peringatan!

Sebaiknya periksa diri Anda sendiri, Anda tidak terlihat terlalu baik. Nulla vitae elit libero, seorang pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Peringatan! </h4>
  4. Sebaiknya periksa diri Anda sendiri, Anda tidak...
  5. </div>

Alternatif kontekstual Tambahkan kelas opsional untuk mengubah konotasi peringatan

Kesalahan atau bahaya

Oh jepret! Ubah beberapa hal dan coba kirimkan lagi.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Kesuksesan

Bagus sekali! Anda berhasil membaca pesan peringatan penting ini.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informasi

Perhatian! Peringatan ini membutuhkan perhatian Anda, tetapi tidak terlalu penting.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Contoh dan markup

Dasar

Bilah kemajuan default dengan gradien vertikal.

  1. <div class = "kemajuan" >
  2. <div kelas = "bilah"
  3. gaya = " lebar : 60 %; " ></div>
  4. </div>

bergaris

Menggunakan gradien untuk membuat efek bergaris (tanpa IE).

  1. <div class = "progress progress-striped" >
  2. <div kelas = "bilah"
  3. gaya = " lebar : 20 %; " ></div>
  4. </div>

animasi

Mengambil contoh bergaris dan menghidupkannya (tanpa IE).

  1. <div class = "progres bergaris-garis
  2. aktif" >
  3. <div kelas = "bilah"
  4. gaya = " lebar : 40 %; " ></div>
  5. </div>

Opsi dan dukungan browser

Warna tambahan

Bilah kemajuan menggunakan beberapa tombol dan kelas peringatan yang sama untuk gaya yang konsisten.

Batang bergaris

Mirip dengan warna solid, kami memiliki bilah kemajuan bergaris yang bervariasi.

Perilaku

Bilah kemajuan menggunakan transisi CSS3, jadi jika Anda menyesuaikan lebar secara dinamis melalui javascript, ukurannya akan berubah dengan lancar.

Jika Anda menggunakan .activekelas, .progress-stripedbilah kemajuan Anda akan menganimasikan garis dari kiri ke kanan.

Dukungan peramban

Progress bar menggunakan gradien, transisi, dan animasi CSS3 untuk mencapai semua efeknya. Fitur-fitur ini tidak didukung di IE7-9 atau versi Firefox yang lebih lama.

Opera dan IE tidak mendukung animasi saat ini.

sumur

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

Lihat, aku di dalam sumur!
  1. <div class = "baik" >
  2. ...
  3. </div>

Tutup ikon

Gunakan ikon tutup umum untuk menutup konten seperti modal dan peringatan.

  1. <button class = "tutup" > × </tombol>

Perangkat iOS memerlukan href="#" untuk acara klik jika Anda lebih suka menggunakan jangkar.

  1. <a class = "close" href = "#" > × </a>