Contoh

Menu kontekstual yang dapat dialihkan untuk menampilkan daftar tautan. Dibuat interaktif dengan plugin JavaScript dropdown .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Tindakan </a></li>  
  <li><a tabindex = "-1" href = "#" > Tindakan lain </a></li>  
  <li><a tabindex = "-1" href = "#" > Ada yang lain di sini </a></li>  
  <li class = "pembagi" ></li> 
  <li><a tabindex = "-1" href = "#" > Tautan terpisah </a></li>  
</ul>

Markup

Melihat hanya menu tarik-turun, inilah HTML yang diperlukan. Anda perlu membungkus pemicu tarik-turun dan menu tarik-turun di dalam .dropdown, atau elemen lain yang menyatakan position: relative;. Kemudian tinggal membuat menunya.

<div class = "dropdown" > 
  <!-- Tautan atau tombol untuk beralih tarik-turun -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Tindakan </a></li>  
    <li><a tabindex = "-1" href = "#" > Tindakan lain </a></li>  
    <li><a tabindex = "-1" href = "#" > Ada yang lain di sini </a></li>  
    <li class = "pembagi" ></li> 
    <li><a tabindex = "-1" href = "#" > Tautan terpisah </a></li>  
  </ul>
</div>

Pilihan

Sejajarkan menu di sebelah kanan dan tambahkan sertakan level dropdown tambahan.

Menyelaraskan menu

Tambahkan .pull-rightke a .dropdown-menuuntuk meratakan kanan menu tarik-turun.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Opsi menu yang dinonaktifkan

Tambahkan .disabledke a <li>di tarik-turun untuk menonaktifkan tautan.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Tautan biasa </a></li>  
  <li class = "dinonaktifkan" ><a tabindex = "-1" href = "#" > Tautan dinonaktifkan </a></li>   
  <li><a tabindex = "-1" href = "#" > Tautan lain </a></li>  
</ul>

Sub menu pada dropdown

Tambahkan menu dropdown level ekstra, yang muncul di hover seperti yang ada di OS X, dengan beberapa tambahan markup sederhana. Tambahkan .dropdown-submenuke mana saja lidi menu tarik-turun yang ada untuk penataan gaya otomatis.

Bawaan

Drop-up

Submenu kiri

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Opsi lainnya </a>  
    <ul class = "menu tarik-turun" > 
      ...
    </ul>
  </li>
</ul>

Contoh

Dua opsi dasar, bersama dengan dua variasi yang lebih spesifik.

Grup tombol tunggal

Bungkus serangkaian tombol .btndengan .btn-group.

<div class = "grup btn" > 
  <button class = "btn" > Kiri </button> 
  <button class = "btn" > Tengah </button> 
  <button class = "btn" > Kanan </button> 
</div>

Beberapa grup tombol

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>

Grup tombol vertikal

Buat sekumpulan tombol tampak bertumpuk secara vertikal, bukan horizontal.

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

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.

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

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.

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

ukuran

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

<div class = "grup btn" > 
  <button class = "btn btn-mini" > Tindakan </button> 
  <button class = "btn btn-mini 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>

Default ringan Markup yang sama, kelas yang berbeda

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

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>

Status dinonaktifkan

Untuk komponen navigasi apa pun (tab, pil, atau daftar), tambahkan tautan abu .disabled- abu dan tidak ada efek melayang . Namun, tautan akan tetap dapat diklik, kecuali Anda menghapus hrefatribut tersebut. Atau, Anda dapat menerapkan JavaScript khusus untuk mencegah klik tersebut.

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

Penyelarasan komponen

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

Dapat ditumpuk

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

Tambahkan menu dropdown dengan sedikit tambahan HTML dan plugin JavaScript dropdown .

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

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

Contoh daftar navigasi

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

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

CatatanUntuk bersarang di dalam daftar nav, sertakan class="nav nav-list"pada setiap nested <ul>.

Pembagi horisontal

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

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

Navigasi tabable

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.

Contoh tabable

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

Saya di Bagian 1.

Halo, saya di Bagian 2.

Ada apa gadis, ini Bagian 3.

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

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 .

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 = "tab-content" > 
    ...
  </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 = "tab-content" > 
    ...
  </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 = "tab-content" > 
    ...
  </div>
</div>

Bilah navigasi dasar

Untuk memulai, navbar bersifat statis (tidak tetap di atas) dan menyertakan dukungan untuk nama proyek dan navigasi dasar. Tempatkan satu di mana saja dalam .container, yang menetapkan lebar situs dan konten Anda.

<div class = "bar navigasi" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Judul </a>  
    <ul class = "nav" > 
      <li class = "aktif" ><a href = "#" > Beranda </a></li>  
      <li><a href = "#" > Tautan </a></li> 
      <li><a href = "#" > Tautan </a></li> 
    </ul>
  </div>
</div>

Komponen bilah navigasi

Merek

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

<a class = "brand" href = "#" > Nama proyek </a>

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>

Formulir

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" >  
  <button type = "kirim" class = "btn" > Kirim </button>  
</form>

Cari formulir

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>

Penyelarasan komponen

Sejajarkan tautan navigasi, formulir pencarian, atau teks, gunakan kelas utilitas .pull-leftatau . .pull-rightKedua kelas akan menambahkan float CSS ke arah yang ditentukan.

Menggunakan dropdown

Tambahkan dropdown dan dropup ke nav dengan sedikit markup dan plugin JavaScript dropdown .

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

Kunjungi dokumentasi dropdown JavaScript untuk markup lebih lanjut dan informasi tentang memanggil dropdown.

Teks

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

Variasi tampilan opsional

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

Tetap ke atas

Tambahkan .navbar-fixed-topdan ingat untuk memperhitungkan area tersembunyi di bawahnya dengan menambahkan setidaknya 40px paddingke file <body>. Pastikan untuk menambahkan ini setelah CSS Bootstrap inti dan sebelum CSS responsif opsional.

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

Tetap ke bawah

Tambahkan .navbar-fixed-bottomsebagai gantinya.

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

Navbar atas statis

Buat bilah navigasi lebar penuh yang menggulir halaman dengan menambahkan .navbar-static-top. Berbeda dengan .navbar-fixed-topkelas, Anda tidak perlu mengubah padding apa pun pada file body.

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

Navbar responsif

Untuk menerapkan navbar responsif yang runtuh, bungkus konten navbar 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, dll -->
      </div>
 
    </div>
  </div>
</div>

Perhatian! Navbar responsif memerlukan plugin penciutan dan file CSS Bootstrap responsif .

Variasi terbalik

Ubah tampilan navbar dengan menambahkan .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Contoh

Satu contoh ditampilkan seperti yang mungkin ditampilkan di beberapa halaman.

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

Penomoran halaman standar

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.

<div class = "paginasi" > 
  <ul>
    <li><a href = "#" > Sebelumnya </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > Selanjutnya </a></li> 
  </ul>
</div>

Pilihan

Status dinonaktifkan dan aktif

Tautan dapat disesuaikan untuk keadaan yang berbeda. Gunakan .disableduntuk tautan yang tidak dapat diklik dan .activeuntuk menunjukkan halaman saat ini.

<div class = "paginasi" > 
  <ul>
    <li class = "dinonaktifkan" ><a href = "#" > « </a></li>  
    <li class = "aktif" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Anda dapat secara opsional menukar jangkar yang aktif atau yang dinonaktifkan dengan bentang untuk menghapus fungsionalitas klik sambil mempertahankan gaya yang diinginkan.

<div class = "paginasi" > 
  <ul>
    <li class = "dinonaktifkan" ><span> « </span></li> 
    <li class = "aktif" ><span> 1 </span></li> 
    ...
  </ul>
</div>

ukuran

Ingin pagination yang lebih besar atau lebih kecil? Tambahkan .pagination-large, .pagination-small, atau .pagination-miniuntuk ukuran tambahan.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginasi" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Penyelarasan

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

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.

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

Status dinonaktifkan opsional

Tautan pager juga menggunakan .disabledkelas utilitas umum dari pagination.

<ul class = "pager" > 
  <li class = "sebelumnya dinonaktifkan" > 
    <a href = "#" > ← Lebih tua </a> 
  </li>
  ...
</ul>

Label

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

Lencana

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

Mudah dilipat

Untuk implementasi yang mudah, label dan lencana hanya akan diciutkan (melalui :emptypemilih CSS) ketika tidak ada konten di dalamnya.

Satuan pahlawan

Komponen ringan dan fleksibel untuk menampilkan konten utama di situs Anda. Ini bekerja dengan baik di situs pemasaran dan konten-berat.

Halo Dunia!

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

Belajarlah lagi

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

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

<div class = "header halaman" > 
  <h1> Contoh tajuk halaman <small> Subteks untuk tajuk </small></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
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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Label gambar kecil </h3>
      <p> Keterangan gambar mini... </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.

Peringatan default

Bungkus teks apa pun dan tombol tutup opsional .alertuntuk pesan peringatan peringatan dasar.

Peringatan! Sebaiknya periksa diri Anda sendiri, Anda tidak terlihat terlalu baik.

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

Abaikan tombol

Browser Mobile Safari dan Mobile Opera, selain data-dismiss="alert"atribut, memerlukan href="#"untuk menghilangkan peringatan saat menggunakan <a>tag.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>

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.

<button type = "button" class = "close" data-dismiss = "alert" > × </tombol>

Singkirkan lansiran melalui JavaScript

Gunakan plugin jQuery lansiran untuk menghilangkan lansiran dengan cepat dan mudah.

Pilihan

Untuk pesan yang lebih panjang, tambah padding di bagian atas dan bawah pembungkus peringatan dengan menambahkan .alert-block.

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" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </tombol>   
  <h4> 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 class = "bar" style = " lebar : 60 %; " ></div>   
</div>

bergaris

Menggunakan gradien untuk membuat efek bergaris. Tidak tersedia di IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " lebar : 20 %; " ></div>   
</div>

animasi

Add .activeto .progress-stripeduntuk menganimasikan garis-garis dari kanan ke kiri. Tidak tersedia di semua versi IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " lebar : 40 %; " ></div>   
</div>

Ditumpuk

Tempatkan beberapa batang ke dalam yang sama .progressuntuk menumpuknya.

<div class = "kemajuan" > 
  <div class = "bar bar-success" style = " lebar : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " lebar : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " lebar : 10 %; " ></div>   
</div>

Pilihan

Warna tambahan

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

<div class = "info kemajuan kemajuan" > 
  <div class = "bar" style = " lebar : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " lebar : 40 % " ></div>   
</div>
<div class = "peringatan kemajuan kemajuan" > 
  <div class = "bar" style = " lebar : 60 % " ></div>   
</div>
<div class = "kemajuan kemajuan-bahaya" > 
  <div class = "bar" style = " lebar : 80 % " ></div>   
</div>

Batang bergaris

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " lebar : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " lebar : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " lebar : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " lebar : 80 % " ></div>   
</div>

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.

Versi sebelum Internet Explorer 10 dan Opera 12 tidak mendukung animasi.

Gaya objek abstrak untuk membangun berbagai jenis komponen (seperti komentar blog, Tweet, dll) yang menampilkan gambar rata kiri atau kanan di samping konten tekstual.

Contoh default

Media default memungkinkan untuk mengapungkan 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

<div kelas = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Judul media </h4> 
    ...
 
    <!-- Objek media bersarang -->
    <div kelas = "media" > 
      ...
    </div>
  </div>
</div>

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

<ul class = "daftar media" > 
  <li kelas = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Judul media </h4> 
      ...
 
      <!-- Objek media bersarang -->
      <div kelas = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

sumur

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

Lihat, aku di dalam sumur!

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

Kelas opsional

Kontrol bantalan dan sudut membulat dengan dua kelas pengubah opsional.

Lihat, aku di dalam sumur!

<div class = "well well-large" > 
  ...
</div>

Lihat, aku di dalam sumur!

<div class = "well well-small" > 
  ...
</div>

Tutup ikon

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

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

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

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

Kelas pembantu

Sederhana, kelas terfokus untuk tampilan kecil atau tweak perilaku.

.pull-left

Apung satu elemen ke kiri

class = "tarik-kiri"

. tarik - kiri {
  mengapung : kiri ;
}

.pull-right

Apungkan elemen dengan benar

class = "tarik-kanan"

. tarik - kanan {
  mengapung : benar ;
}

.meredam

Ubah warna elemen menjadi#999

kelas = "dimatikan"

. dibisukan {
  warna : #999; 
}

.clearfix

Hapus floatpada elemen apa pun

kelas = "perbaikan yang jelas"

. perbaikan yang jelas {
  * perbesaran : 1 ; 
  &: sebelumnya ,
  &: setelah {
    tampilan : meja ;
    isi : "" ; 
  }
  &: setelah {
    jelas : keduanya ;
  }
}

Menu tarik-turun

Contoh

Markup

Pilihan

Menyelaraskan menu

Opsi menu yang dinonaktifkan

Sub menu pada dropdown

Grup tombol

Contoh

Grup tombol tunggal

Beberapa grup tombol

Grup tombol vertikal

Kotak centang dan rasa radio

Dropdown dalam grup tombol

Menu tarik-turun tombol

Ikhtisar dan contoh

Bekerja dengan semua ukuran tombol

Memerlukan JavaScript

Pisahkan tombol tarik-turun

ukuran

Menu drop-up

Nav: tab, pil, dan daftar

Default ringan Markup yang sama, kelas yang berbeda

Tab dasar

Pil dasar

Status dinonaktifkan

Penyelarasan komponen

Dapat ditumpuk

Tab bertumpuk

Pil bertumpuk

Dropdown

Tab dengan dropdown

Pil dengan dropdown

daftar navigasi

Contoh daftar navigasi

Pembagi horisontal

Navigasi tabable

Contoh tabable

Memudar di tab

Membutuhkan plugin jQuery

Tabbable ke segala arah

Tab di bagian bawah

Tab di sebelah kiri

Tab di sebelah kanan

navigasi

Bilah navigasi dasar

Komponen bilah navigasi

Merek

tautan navigasi

Formulir

Cari formulir

Penyelarasan komponen

Menggunakan dropdown

Teks

Variasi tampilan opsional

Tetap ke atas

Tetap ke bawah

Navbar atas statis

Navbar responsif

Variasi terbalik

Tepung roti

Contoh

Pagination Dua pilihan untuk paging melalui konten

Penomoran halaman standar

Pilihan

Status dinonaktifkan dan aktif

ukuran

Penyelarasan

halaman

Contoh default

Tautan sejajar

Status dinonaktifkan opsional

Label dan lencana

Label

Lencana

Mudah dilipat

Komponen tipografi

Satuan pahlawan

Halo Dunia!

Kepala halaman