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:

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

Contoh bilah alat

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

<div class = "btn-toolbar" > 
  <div class = "grup btn" > 
    ...
  </div>
</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.

Ikhtisar dan contoh

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>

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.

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.

<div class = "grup btn" > 
  ...
  <ul class = "menu tarik-turun tarik-kanan" > 
    <!-- tautan menu tarik-turun -->
  </ul>
</div>

Contoh markup

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

<div class = "grup btn" > 
  <button class = "btn" > Tindakan </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "tanda sisipan" ></span> 
  </tombol>
  <ul class = "menu tarik-turun" > 
    <!-- tautan menu tarik-turun -->
  </ul>
</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.

<div class = "btn-grup dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "tanda sisipan" ></span> 
  </tombol>
  <ul class = "menu tarik-turun" > 
    <!-- tautan menu tarik-turun -->
  </ul>
</div>

Kelas dasar yang kuat

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

Kapan harus menggunakan?

Tab dan pil sangat bagus untuk bagian konten atau menavigasi antar halaman konten terkait.

Penyelarasan komponen

Untuk menyelaraskan tautan navigasi, gunakan kelas utilitas .pull-leftor . .pull-rightKedua kelas akan menambahkan float CSS ke arah yang ditentukan.

Tab dasar

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

• Rumah
• Profil
• Pesan

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

• Rumah
• Profil
• Pesan

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

Cara menumpuknya

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

Tab bertumpuk

• Rumah
• Profil
• Pesan

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

Pil bertumpuk

• Rumah
• Profil
• Pesan

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

Menu kaya menjadi mudah

Menu tarik-turun di tab dan pil Bootstrap sangat mudah dan hanya membutuhkan sedikit tambahan HTML dan plugin jQuery yang ringan.

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

Tab dengan dropdown

• Rumah
• Membantu
• tarik-turun
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Rumah
• Membantu
• tarik-turun
  • Action
  • Another action
  • Something else here
  • Separated link

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

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.

Pembagi horisontal

Tambahkan pembagi horizontal dengan membuat item daftar kosong dengan class .divider, seperti:

<ul class = "nav nav-list" > 
  ...
  <li class = "pembagi" ></li> 
  ...
</ul>

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>

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.

Memudar di tab

Untuk membuat tab memudar, tambahkan .fadeke masing-masing .tab-pane.

Membutuhkan plugin jQuery

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

Dapatkan javascriptnya →

Contoh tabable

Untuk membuat tab dapat ditabulasi, buat .tab-paneID unik untuk setiap tab dan bungkus dalam .tab-content.

Untuk tab rata kanan atau kiri, bungkus .nav-tabsdan .tab-contentdalam .tabbable.

Markup langsung

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

<div class = "tabbable" > <!-- Hanya diperlukan untuk tab kiri/kanan -->  
  <ul class = "nav nav-tab" > 
    <li class = "aktif" ><a href = "#tab1" data-toggle = "tab" > Bagian 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Bagian 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane aktif" id = "tab1" >  
      <p> Saya di Bagian 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Halo, saya di Bagian 2. </p>
    </div>
  </div>
</div>

Tab di bagian bawah

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

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

Tab di sebelah kiri

Tukar kelas untuk meletakkan tab di sebelah kiri.

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

Tab di sebelah kanan

Tukar kelas untuk meletakkan tab di sebelah kanan.

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

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>

Bilah navigasi tetap

Perbaiki navbar ke atas atau bawah viewport dengan kelas tambahan di div terluar, .navbar.

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

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

Saat Anda menempelkan navbar, ingatlah untuk memperhitungkan area tersembunyi di bawahnya. Tambahkan 40px atau lebih padding ke file <body>. Pastikan untuk menambahkan ini setelah CSS Bootstrap inti dan sebelum CSS responsif opsional.

Nama merk

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

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

Formulir di navbar

Untuk menata dan memposisikan formulir dengan benar di dalam bilah navigasi, tambahkan kelas yang sesuai seperti yang ditunjukkan di bawah ini. Untuk formulir default, sertakan .navbar-formdan salah satu .pull-leftatau .pull-rightuntuk menyelaraskannya dengan benar.

<form class = "navbar-form pull-left" > 
  < tipe input = "teks" class = "span2" >  
</form>

Untuk formulir pencarian yang lebih disesuaikan, tambahkan .navbar-searchke formdan .search-queryke input untuk gaya khusus di bilah navigasi.

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

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>

Anda dapat dengan mudah menambahkan pembagi ke tautan nav Anda dengan item daftar kosong dan kelas sederhana. Cukup tambahkan ini di antara tautan:

<ul class = "nav" > 
  ...
  <li class = "pembagi-vertikal" ></li> 
  ...
</ul>

Penyelarasan komponen

Untuk meratakan navigasi, formulir pencarian, atau teks, gunakan kelas utilitas .pull-leftor . .pull-rightKedua kelas akan menambahkan float CSS ke arah yang ditentukan.

Menambahkan menu tarik-turun

Menambahkan dropdown dan dropup 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 →

Teks di navbar

Bungkus string teks dalam <.navbar-text>, biasanya pada <p>tag untuk awalan dan warna yang tepat.

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.

• Rumah

• Beranda /
• Perpustakaan

• Beranda /
• Perpustakaan /
• Data

Markup

HTML adalah daftar standar Anda yang tidak berurutan 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 class = "aktif" > Data </li> 
</ul>

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

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

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.

• Sebelumnya
• Lanjut

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

• Lebih tua
• Lebih baru →

<ul class = "pager" > 
  <li kelas = "sebelumnya" > 
    <a href = "#" > ← Lebih tua </a> 
  </li>
  <li kelas = "berikutnya" > 
    <a href = "#" > Lebih baru → </a> 
  </li>
</ul>

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

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:

<div class = "unit pahlawan" > 
  <h1> Judul </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primer btn-besar" > 
      Belajarlah lagi
    </a>
  </p>
</div>

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

<div class = "header halaman" > 
  <h1> Contoh tajuk halaman </h1>
</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 :

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

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.

<div kelas = "peringatan" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Peringatan! </strong> Sebaiknya periksa sendiri, Anda tidak terlihat terlalu baik.
</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.

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

Kesalahan atau bahaya

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

Kesuksesan

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

Informasi

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

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 (tanpa IE).

<div class = "progress progress-striped" > 
  <div kelas = "bilah" 
       gaya = " lebar : 20 %; " ></div> 
</div>

animasi

Mengambil contoh bergaris dan menghidupkannya (tanpa IE).

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

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.

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

Tutup ikon

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

×

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

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

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