Puluhan komponen yang dapat digunakan kembali dibangun ke dalam Bootstrap untuk menyediakan navigasi, peringatan, popover, dan banyak lagi.
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 dapat disesuaikan dan berfungsi dalam sejumlah situasi dengan kelas yang tepat. .disabled
untuk tautan yang tidak dapat diklik dan .active
untuk halaman saat ini.
Tambahkan salah satu dari dua kelas opsional untuk mengubah perataan tautan pagination: .pagination-centered
dan .pagination-right
.
Komponen pagination default fleksibel dan bekerja dalam sejumlah variasi.
Dibungkus dalam <div>
, pagination hanyalah file <ul>
.
- <div class = "paginasi" >
- <ul>
- <li><a href = "#" > Sebelumnya </a></li>
- <li kelas = "aktif" >
- <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 = "#" > Selanjutnya </a></li>
- </ul>
- </div>
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.
Secara default, tautan pusat pager.
- <ul class = "pager" >
- <li>
- <a href = "#" > Sebelumnya </a>
- </li>
- <li>
- <a href = "#" > Selanjutnya </a>
- </li>
- </ul>
Atau, Anda dapat menyelaraskan setiap tautan ke samping:
- <ul class = "pager" >
- <li kelas = "sebelumnya" >
- <a href = "#" > ← Lebih tua </a>
- </li>
- <li kelas = "berikutnya" >
- <a href = "#" > Lebih baru → </a>
- </li>
- </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> |
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.
Bungkus konten Anda div
seperti ini:
- <div class = "unit pahlawan" >
- <h1> Judul </h1>
- <p> Slogan </p>
- <p>
- <a class = "btn btn-primer btn-besar" >
- Belajarlah lagi
- </a>
- </p>
- </div>
Ini adalah unit pahlawan sederhana, komponen gaya jumbotron sederhana untuk meminta perhatian ekstra pada konten atau informasi unggulan.
Sebuah shell sederhana untuk h1
ruang yang tepat dan segmen bagian konten pada halaman. Itu dapat menggunakan elemen h1
default small
, serta sebagian besar komponen lainnya (dengan gaya tambahan).
- <div class = "halaman-haeder" >
- <h1> Contoh tajuk halaman </h1>
- </div>
Secara default, thumbnail Bootstrap dirancang untuk menampilkan gambar tertaut dengan markup minimal yang diperlukan.
Dengan sedikit markup tambahan, Anda dapat menambahkan segala jenis konten HTML seperti heading, paragraf, atau tombol ke dalam thumbnail.
Thumbnail (sebelumnya .media-grid
hingga 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 thumbnail sederhana—hanya ul
dengan sejumlah li
elemen yang diperlukan. Ini juga sangat fleksibel, memungkinkan semua jenis konten hanya dengan sedikit markup untuk membungkus konten Anda.
Terakhir, komponen thumbnail menggunakan kelas sistem grid yang ada—seperti .span2
atau — .span3
untuk mengontrol dimensi thumbnail.
Seperti disebutkan sebelumnya, markup yang diperlukan untuk gambar mini ringan dan mudah. Berikut adalah tampilan pengaturan default untuk gambar tertaut :
- <ul class = "thumbnail" >
- <li kelas = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul class = "thumbnail" >
- <li kelas = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Label gambar mini </h5>
- <p> Judul gambar mini di sini... </p>
- </div>
- </li>
- ...
- </ul>
Dengan Bootstrap 2, kami telah menyederhanakan kelas dasar: .alert
alih-alih .alert-message
. Kami juga telah mengurangi markup minimum yang diperlukan—tidak ada <p>
yang diperlukan secara default, hanya bagian luar <div>
.
Untuk komponen yang lebih tahan lama dengan lebih sedikit kode, kami telah menghapus tampilan pembeda untuk peringatan blokir, pesan yang datang dengan lebih banyak bantalan, dan biasanya lebih banyak teks. Kelasnya juga berubah menjadi .alert-block
.
Bootstrap hadir dengan plugin jQuery hebat yang mendukung pesan peringatan, membuat penghapusannya cepat dan mudah.
Bungkus pesan Anda dan ikon tutup opsional dalam div dengan kelas sederhana.
- <div kelas = "peringatan" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <strong> Peringatan! </strong> Sebaiknya periksa sendiri, Anda tidak terlihat terlalu baik.
- </div>
Perluas pesan peringatan standar dengan mudah dengan dua kelas opsional: .alert-block
untuk kontrol padding dan teks yang lebih banyak dan .alert-heading
untuk heading yang cocok.
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.
- <div class = "alert alert-block" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <h4 class = "alert-heading" > Peringatan! </h4>
- Sebaiknya periksa diri Anda sendiri, Anda tidak...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Bilah kemajuan default dengan gradien vertikal.
- <div class = "kemajuan" >
- <div kelas = "bilah"
- gaya = " lebar : 60 %; " ></div>
- </div>
Menggunakan gradien untuk membuat efek bergaris.
- <div class = "info kemajuan kemajuan
- bergaris-garis kemajuan" >
- <div kelas = "bilah"
- gaya = " lebar : 20 %; " ></div>
- </div>
Mengambil contoh bergaris dan menghidupkannya.
- <div class = "kemajuan kemajuan-bahaya
- aktif bergaris kemajuan" >
- <div kelas = "bilah"
- gaya = " lebar : 40 %; " ></div>
- </div>
Bilah kemajuan menggunakan beberapa nama kelas yang sama dengan tombol dan peringatan untuk gaya serupa.
.progress-info
.progress-success
.progress-danger
Atau, Anda dapat menyesuaikan file KURANG dan menggulung warna dan ukuran Anda sendiri.
Bilah kemajuan menggunakan transisi CSS3, jadi jika Anda menyesuaikan lebar secara dinamis melalui javascript, ukurannya akan berubah dengan lancar.
Jika Anda menggunakan .active
kelas, .progress-striped
bilah kemajuan Anda akan menganimasikan garis dari kiri ke kanan.
Progress bar menggunakan gradien, transisi, dan animasi CSS3 untuk mencapai semua efeknya. Fitur-fitur ini tidak didukung di IE7-8 atau versi Firefox yang lebih lama.
Opera tidak mendukung animasi saat ini.
Gunakan sumur sebagai efek sederhana pada elemen untuk memberikan efek sisipan.
- <div class = "baik" >
- ...
- </div>
Gunakan ikon tutup umum untuk menutup konten seperti modal dan peringatan.
- <a class = "tutup" > × </a>