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.

Anda juga dapat menggabungkan set <div class="btn-group">ke <div class="btn-toolbar">untuk proyek yang lebih kompleks.

Contoh markup

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

<div class = "grup btn" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Dan dengan toolbar untuk beberapa grup:

<div class = "btn-toolbar" > 
  <div class = "grup btn" > 
    ...
  </div>
</div>

Kotak centang dan radio rasa

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 »

Perhatian

CSS untuk grup tombol ada di file terpisah, button-groups.less.

Dropdown tombol

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

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.

<div class = "grup btn" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Tindakan
    <span class = "tanda sisipan" ></span> 
  </a>
  <ul class = "menu tarik-turun" > 
    <!-- tautan menu tarik-turun -->
  </ul>
</div>

Pisahkan tombol tarik-turun

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.

Contoh markup

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

<div class = "grup btn" > 
  <a class = "btn" href = "#" > Tindakan </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "tanda sisipan" ></span> 
  </a>
  <ul class = "menu tarik-turun" > 
    <!-- tautan menu tarik-turun -->
  </ul>
</div>

Default ringan Markup yang sama, kelas yang berbeda

Kelas dasar yang kuat

Semua komponen navigasi di sini—tab, pil, dan daftar— berbagi markup dan gaya dasar yang sama melalui .navkelas.

Mengapa tab dan pil?

Tab dan pil di Bootstrap dibangun di atas <ul>HTML inti yang sama, daftar tautan. Bertukar antar tab atau pil hanya dengan satu kelas.

Kedua opsi ini bagus untuk sub-bagian konten atau menavigasi antar halaman konten terkait.

Tab dasar

<ul>Ambil tautan reguler dan tambahkan .nav-tabs:

<ul class = "nav nav-tab" > 
  <li kelas = "aktif" > 
    <a href = "#" > Beranda </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pil dasar

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

<ul class = "nav nav-pills" > 
  <li kelas = "aktif" > 
    <a href = "#" > Beranda </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stackable Membuat tab atau pil vertikal

Cara menumpuknya

Karena tab dan pil secara default horizontal, cukup tambahkan kelas kedua, .nav-stacked, untuk membuatnya tampak bertumpuk secara vertikal.

Tab bertumpuk

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

Pil bertumpuk

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

Dropdown Untuk komponen navigasi tingkat lanjut

Menu kaya menjadi mudah

Menu dropdown di tab dan pil Bootstrap sangat mudah dan hanya membutuhkan sedikit HTML ekstra dan plugin jQuery yang ringan.

Buka halaman Javascript untuk membaca dokumen tentang inisialisasi dropdown di Bootstrap.

Tab dengan dropdown

<ul class = "nav nav-tab" > 
  <li kelas = "turun-bawah" > 
    <a class = "turun-turun-beralih" 
       data-toggle = "turun turun"
       href = "#" >
        tarik-turun
        <b class = "tanda sisipan" ></b> 
      </a>
    <ul class = "menu tarik-turun" > 
      <!-- link -->
    </ul>
  </li>
</ul>

Pil dengan dropdown

<ul class = "nav nav-pills" > 
  <li kelas = "turun-bawah" > 
    <a class = "turun-turun-beralih" 
       data-toggle = "turun turun"
       href = "#" >
        tarik-turun
        <b class = "tanda sisipan" ></b> 
      </a>
    <ul class = "menu tarik-turun" > 
      <!-- link -->
    </ul>
  </li>
</ul>

Daftar navigasi Buat navigasi bertumpuk sederhana, bagus untuk bilah sisi

Navigasi gaya aplikasi

Daftar navigasi menyediakan cara sederhana dan mudah untuk membuat grup tautan navigasi dengan header opsional. Mereka paling baik digunakan di bilah sisi seperti Finder di OS X.

Secara struktural, mereka dibangun di atas gaya nav inti yang sama dengan tab dan pil, sehingga penggunaan dan penyesuaian menjadi mudah.

Dengan ikon

Daftar Nav juga mudah dilengkapi dengan ikon. Tambahkan <i>tag yang tepat dengan kelas dan Anda sudah siap.

Contoh daftar navigasi

Ambil daftar tautan dan tambahkan class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "tajuk navigasi" > 
    Daftar tajuk
  </li>
  <li kelas = "aktif" > 
    <a href = "#" > Beranda </a> 
  </li>
  <li>
    <a href = "#" > Perpustakaan </a> 
  </li>
  ...
</ul>

Contoh dengan ikon

Contoh yang sama, tetapi dengan <i>tag untuk ikon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "buku ikon" ></i> 
      Perpustakaan
    </a>
  </li>
  ...
</ul>

Nav tabbable Hidupkan tab melalui javascript

Apa yang termasuk?

Hidupkan tab Anda dengan plugin sederhana untuk beralih di antara konten melalui tab. Bootstrap mengintegrasikan tab tabbable dalam empat gaya: atas (default), kanan, bawah, dan kiri.

Mengubah di antara mereka mudah dan hanya membutuhkan sedikit perubahan markup.

Contoh tabbable

Untuk membuat tab tabbable, bungkus .nav-tabsdiv lain dengan class .tabbable.

Saya di Bagian 1.

Halo, saya di Bagian 2.

Ada apa gadis, ini Bagian 3.

Plugin jQuery khusus

Semua tab tabable didukung oleh plugin jQuery kami yang ringan. Baca selengkapnya tentang cara menghidupkan tab tab di halaman dokumen javascript.

Dapatkan javascriptnya →

Markup langsung

Menggunakan tab yang dapat ditabulasi memerlukan div pembungkus, satu set tab, dan satu set panel konten yang dapat ditabulasi.

<div class = "tabbable" > 
  <ul class = "nav nav-tab" > 
    <li class = "aktif" ><a href = "#1" data-toggle = "tab" > Bagian 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Bagian 2 </a></li>  
  </ul>
  <div class = "isi-tab" > 
    <div class = "tab-pane aktif" id = "1" >  
      <p> Saya di Bagian 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Halo, saya di Bagian 2. </p>
    </div>
  </div>
</div>

Tabbable ke segala arah

Tab di bagian bawah

Balikkan urutan HTML dan tambahkan kelas untuk meletakkan tab di bagian bawah.

Saya di Bagian A.

Halo, saya di Bagian B.

Ada apa gadis, ini Bagian C.

<div class = "tab yang dapat ditabulasi-bawah" > 
  <div class = "isi-tab" > 
    ...
  </div>
  <ul class = "nav nav-tab" > 
    ...
  </ul>
</div>

Tab di sebelah kiri

Tukar kelas untuk meletakkan tab di sebelah kiri.

Saya di Bagian A.

Halo, saya di Bagian B.

Ada apa gadis, ini Bagian C.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tab" > 
    ...
  </ul>
  <div class = "isi-tab" > 
    ...
  </div>
</div>

Tab di sebelah kanan

Tukar kelas untuk meletakkan tab di sebelah kanan.

Saya di Bagian A.

Halo, saya di Bagian B.

Ada apa gadis, ini Bagian C.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tab" > 
    ...
  </ul>
  <div class = "isi-tab" > 
    ...
  </div>
</div>

Contoh navbar statis

Contoh navbar statis (tidak tetap ke atas) dengan nama proyek, navigasi, dan formulir pencarian.

Perancah Navbar

Navbar hanya membutuhkan beberapa div untuk menyusunnya dengan baik untuk tampilan statis atau tetap.

<div class = "bar navigasi" > 
  <div class = "navbar-inner" > 
    <div class = "wadah" > 
      ...
    </div>
  </div>
</div>

Untuk membuat navbar tetap di bagian atas viewport, tambahkan .navbar-fixed-topke div terluar, .navbar. Di CSS Anda, Anda juga perlu memperhitungkan tumpang tindih yang disebabkannya dengan menambahkan padding-top: 40px;file <body>.

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

Nama merk

Tautan sederhana untuk menunjukkan merek atau nama proyek Anda hanya memerlukan tag jangkar.

<a class = "merek" href = "#" >  
  Nama Proyek
</a>

Cari formulir

Formulir pencarian menerima gaya khusus di bilah navigasi dengan .navbar-searchkelas. Sertakan .pull-leftatau .pull-rightpada formuntuk menyelaraskannya.

<form class = "navbar-search tarik-kiri" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

Variasi responsif opsional

Bergantung pada jumlah konten di bilah atas Anda, Anda mungkin ingin menerapkan opsi responsif. Untuk melakukannya, bungkus konten nav Anda dalam div yang berisi, .nav-collapse.collapse, dan tambahkan tombol sakelar navbar, .btn-navbar.

<div class = "bar navigasi" > 
  <div class = "navbar-inner" > 
    <div class = "wadah" > 
 
      <!-- .btn-navbar digunakan sebagai tombol untuk konten navbar yang diciutkan -->
      <a class = "btn btn-navbar" data-toggle = "ciutkan" data-target = ".nav-collapse">   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Pastikan untuk meninggalkan merek di luar sana jika Anda ingin ditampilkan -->
      <a class = "brand" href = "#" > Nama proyek </a>  
 
      <!-- Segala sesuatu yang Anda ingin sembunyikan pada 940px atau kurang, letakkan di dalam sini -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, dll -->
      </div>
 
    </div>
  </div>
</div>

Perhatian! Navbar responsif memerlukan plugin ciutkan .

tautan navigasi

Item Nav mudah ditambahkan melalui daftar yang tidak berurutan.

<ul class = "nav" > 
  <li kelas = "aktif" > 
    <a href = "#" > Beranda </a> 
  </li>
  <li><a href = "#" > Tautan </a></li> 
  <li><a href = "#" > Tautan </a></li> 
</ul>

Menambahkan dropdown

Menambahkan dropdown ke nav sangat sederhana, tetapi membutuhkan penggunaan plugin javascript kami .

<ul class = "nav" > 
  <li kelas = "turun-bawah" > 
    <a href = "#" 
          kelas = "turun-turun-beralih"
          data-toggle = "dropdown" >
          Akun
          <b class = "tanda sisipan" ></b> 
    </a>
    <ul class = "menu tarik-turun" > 
      ...
    </ul>
  </li>
</ul>

Dapatkan javascriptnya →

Mengapa menggunakannya?

Navigasi breadcrumb digunakan sebagai cara untuk menunjukkan kepada pengguna di mana mereka berada dalam aplikasi atau situs, tetapi tidak untuk navigasi utama. Jaga agar penggunaannya jarang dan ringkas agar paling efektif.

Contoh

Satu contoh ditampilkan seperti yang mungkin ditampilkan di beberapa halaman.

Markup

HTML adalah daftar tidak berurutan standar Anda dengan tautan.

<ul class = "remah roti" > 
  <li>
    <a href = "#" > Beranda </a> <span class = "pembagi" > / </span>   
  </li>
  <li>
    <a href = "#" > Perpustakaan </a> <span class = "pembagi" > / </span>   
  </li>
  <li kelas = "aktif" > 
    <a href = "#" > Data </a> 
  </li>
</ul>

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

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

Pager Untuk tautan cepat sebelumnya dan selanjutnya

Tentang pager

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

Contoh default

Secara default, tautan pusat pager.

<ul class = "pager" > 
  <li>
    <a href = "#" > Sebelumnya </a> 
  </li>
  <li>
    <a href = "#" > Selanjutnya </a> 
  </li>
</ul>

Tautan sejajar

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>`
Baru	`<span class="label label-success">New</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>`

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 gambar mini?

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 :

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

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

<div class = "peringatan" > 
  <a class = "tutup" > × </a> 
  <strong> Peringatan! </strong> Sebaiknya periksa sendiri, Anda tidak terlihat terlalu baik.
</div>

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.

<div class = "alert alert-block" > 
  <a class = "tutup" > × </a> 
  <h4 class = "alert-heading" > Peringatan! </h4> 
  Sebaiknya periksa diri Anda sendiri, Anda tidak...
</div>

Alternatif kontekstual Tambahkan kelas opsional untuk mengubah konotasi peringatan

Kesalahan atau bahaya

× Oh jepret! Ubah beberapa hal dan coba kirimkan lagi.

<div class = "alert alert-error" > 
  ...
</div>

Kesuksesan

× Bagus sekali! Anda berhasil membaca pesan peringatan penting ini.

<div class = "alert alert-success" > 
  ...
</div>

Informasi

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

<div class = "alert alert-info" > 
  ...
</div>

Contoh dan markup

Dasar

Bilah kemajuan default dengan gradien vertikal.

<div class = "kemajuan" > 
  <div kelas = "bilah" 
       gaya = " lebar : 60 %; " ></div> 
</div>

bergaris

Menggunakan gradien untuk membuat efek bergaris.

<div class = "info kemajuan kemajuan 
     bergaris-garis kemajuan" >
  <div kelas = "bilah" 
       gaya = " lebar : 20 %; " ></div> 
</div>

animasi

Mengambil contoh bergaris dan menghidupkannya.

<div class = "kemajuan kemajuan-bahaya 
     aktif bergaris kemajuan" >
  <div kelas = "bilah" 
       gaya = " lebar : 40 %; " ></div> 
</div>

Opsi dan dukungan browser

Warna tambahan

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.

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-8 atau versi Firefox yang lebih lama.

Opera tidak mendukung animasi saat ini.

sumur

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

Lihat, aku di dalam sumur!

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

Lencana

Gunakan lencana pada elemen untuk hitungan yang belum dibaca atau sebagai indikator sederhana.

<span class = "lencana" > 3 </div>

Tutup ikon

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

<a class = "tutup" > × </a>

Grup tombol Bergabunglah dengan tombol untuk fungsionalitas seperti bilah alat lainnya

Grup tombol

Contoh markup

Kotak centang dan radio rasa

Perhatian

Tombol dropdown Menu dropdown kontekstual dibangun di atas grup tombol

Dropdown tombol

Contoh markup

Pisahkan tombol tarik-turun

Contoh markup

Nav, tab, dan pil Navigasi gaya daftar yang sangat dapat disesuaikan

Default ringan Markup yang sama, kelas yang berbeda

Kelas dasar yang kuat

Mengapa tab dan pil?

Tab dasar

Pil dasar

Stackable Membuat tab atau pil vertikal

Cara menumpuknya

Tab bertumpuk

Pil bertumpuk

Dropdown Untuk komponen navigasi tingkat lanjut

Menu kaya menjadi mudah

Tab dengan dropdown

Pil dengan dropdown

Daftar navigasi Buat navigasi bertumpuk sederhana, bagus untuk bilah sisi

Navigasi gaya aplikasi

Dengan ikon

Contoh daftar navigasi

Contoh dengan ikon

Nav tabbable Hidupkan tab melalui javascript

Apa yang termasuk?

Contoh tabbable

Plugin jQuery khusus

Markup langsung

Tabbable ke segala arah

Tab di bagian bawah

Tab di sebelah kiri

Tab di sebelah kanan

navigasi

Contoh navbar statis

Perancah Navbar

Nama merk

Cari formulir

Variasi responsif opsional

tautan navigasi

Menambahkan dropdown

Tepung roti

Mengapa menggunakannya?

Contoh

Markup

Pagination Dua opsi untuk paging melalui konten

Penomoran halaman multikon

Kapan harus menggunakan?

Tautan halaman stateful

Penjajaran yang fleksibel

Contoh

Markup

Pager Untuk tautan cepat sebelumnya dan selanjutnya

Tentang pager

Contoh default

Tautan sejajar

Label sebaris Label dan anotasi teks

Thumbnail Kisi-kisi gambar, video, teks, dan lainnya

Thumbnail default

Sangat dapat disesuaikan

Label gambar mini

Label gambar mini

Mengapa menggunakan gambar mini?

Markup yang sederhana dan fleksibel

Menggunakan ukuran kolom kisi

markup

Contoh lainnya

Gaya Peringatan untuk pesan sukses, peringatan, dan kesalahan

Default ringan

Kelas dasar yang ditulis ulang

Pesan peringatan tunggal

Sangat cocok dengan javascript

Contoh peringatan

Peringatan!

Alternatif kontekstual Tambahkan kelas opsional untuk mengubah konotasi peringatan