Contoh

Menu kontekstual boleh togol untuk memaparkan senarai pautan. Dibuat interaktif dengan pemalam JavaScript lungsur turun .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Tindakan </a></li>  
  <li><a tabindex = "-1" href = "#" > Satu lagi tindakan </a></li>  
  <li><a tabindex = "-1" href = "#" > Sesuatu yang lain di sini </a></li>  
  <li class = "pembahagi" ></li> 
  <li><a tabindex = "-1" href = "#" > Pautan terpisah </a></li>  
</ul>

Penanda

Melihat hanya menu lungsur turun, berikut ialah HTML yang diperlukan. Anda perlu membungkus pencetus lungsur turun dan menu lungsur turun dalam .dropdown, atau elemen lain yang mengisytiharkan position: relative;. Kemudian buat menu sahaja.

<div class = "dropdown" > 
  <!-- Pautan atau butang untuk menogol lungsur turun -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Tindakan </a></li>  
    <li><a tabindex = "-1" href = "#" > Satu lagi tindakan </a></li>  
    <li><a tabindex = "-1" href = "#" > Sesuatu yang lain di sini </a></li>  
    <li class = "pembahagi" ></li> 
    <li><a tabindex = "-1" href = "#" > Pautan terpisah </a></li>  
  </ul>
</div>

Pilihan

Jajarkan menu ke kanan dan tambahkan sertakan tahap lungsur turun tambahan.

Menyelaraskan menu

Tambahkan .pull-rightpada .dropdown-menujajaran ke kanan menu lungsur turun.

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

Pilihan menu dilumpuhkan

Tambahkan .disabledpada a <li>dalam menu lungsur untuk melumpuhkan pautan.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Pautan biasa </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Pautan dilumpuhkan </a></li>   
  <li><a tabindex = "-1" href = "#" > Satu lagi pautan </a></li>  
</ul>

Sub menu pada lungsur turun

Tambahkan tahap tambahan menu lungsur turun, muncul pada tuding seperti OS X, dengan beberapa tambahan penanda mudah. Tambahkan .dropdown-submenupada mana-mana lidalam menu lungsur sedia ada untuk penggayaan automatik.

Lalai

Dropup

Submenu kiri

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Lagi pilihan </a>  
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </li>
</ul>

Contoh

Dua pilihan asas, bersama dengan dua variasi yang lebih khusus.

Kumpulan butang tunggal

Balut satu siri butang dengan .btndalam .btn-group.

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

Kumpulan butang berbilang

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

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

Kumpulan butang menegak

Jadikan satu set butang kelihatan disusun secara menegak dan bukannya mendatar.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Kotak semak dan perisa radio

Kumpulan butang juga boleh berfungsi sebagai radio, di mana hanya satu butang mungkin aktif, atau kotak semak, di mana sebarang bilangan butang mungkin aktif. Lihat dokumen JavaScript untuk itu.

Jatuh turun dalam kumpulan butang

Angkat kepala!Butang dengan menu lungsur mesti dibungkus secara berasingan dengan butangnya sendiri .btn-groupdalam a .btn-toolbaruntuk pemaparan yang betul.

Gambaran keseluruhan dan contoh

Gunakan sebarang butang untuk mencetuskan menu lungsur dengan meletakkannya di dalam .btn-groupdan memberikan penanda menu yang betul.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Tindakan
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Berfungsi dengan semua saiz butang

Butang lungsur turun berfungsi pada sebarang saiz: .btn-large, .btn-small, atau .btn-mini.

Memerlukan JavaScript

Butang lungsur turun memerlukan pemalam lungsur Bootstrap untuk berfungsi.

Dalam sesetengah kes—seperti mudah alih—menu lungsur turun akan dilanjutkan di luar port pandangan. Anda perlu menyelesaikan penjajaran secara manual atau dengan JavaScript tersuai.

Butang pisah turun bawah

Membina gaya kumpulan butang dan penanda, kami boleh membuat butang pisah dengan mudah. Butang pisah menampilkan tindakan standard di sebelah kiri dan togol lungsur turun di sebelah kanan dengan pautan kontekstual.

<div class = "btn-group" > 
  <button class = "btn" > Tindakan </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </butang>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Saiz

Gunakan kelas butang tambahan .btn-mini, .btn-small, atau .btn-largeuntuk saiz.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Tindakan </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </butang>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Menu lungsur

Menu lungsur turun juga boleh ditogol dari bawah ke atas dengan menambahkan satu kelas kepada induk terdekat .dropdown-menu. Ia akan membalikkan arah .caretdan meletakkan semula menu itu sendiri untuk bergerak dari bawah ke atas dan bukannya atas ke bawah.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </butang>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Lalai ringan Penanda yang sama, kelas yang berbeza

Semua komponen nav di sini—tab, pil dan senarai— berkongsi penanda dan gaya asas yang sama melalui .navkelas.

Tab asas

Ambil <ul>pautan biasa dan tambah .nav-tabs:

<ul class = "nav-tabs" > 
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pil asas

Ambil HTML yang sama, tetapi gunakan .nav-pills:

<ul class = "pil nav nav" > 
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Keadaan kurang upaya

Untuk mana-mana komponen nav (tab, pil atau senarai), tambah .disableduntuk pautan kelabu dan tiada kesan tuding . Pautan akan kekal boleh diklik, walau bagaimanapun, melainkan anda mengalih keluar hrefatribut tersebut. Sebagai alternatif, anda boleh melaksanakan JavaScript tersuai untuk menghalang klik tersebut.

<ul class = "pil nav nav" > 
  ...
  <li class = "disabled" ><a href = "#" > Home </a></li>  
  ...
</ul>

Penjajaran komponen

Untuk menjajarkan pautan navigasi, gunakan kelas .pull-leftatau .pull-rightutiliti. Kedua-dua kelas akan menambah apungan CSS ke arah yang ditentukan.

Boleh ditindan

Memandangkan tab dan pil adalah mendatar secara lalai, cuma tambahkan kelas kedua, .nav-stacked, untuk menjadikannya kelihatan disusun secara menegak.

Tab bertindan

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

Pil bertindan

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

Jatuh turun

Tambahkan menu lungsur turun dengan sedikit HTML tambahan dan pemalam JavaScript lungsur turun .

Tab dengan lungsur turun

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "turun turun-togol" 
       data-toggle = "dropdown"
       href = "#" >
        Jatuh turun
        <b class = "karet" ></b> 
      </a>
    <ul class = "menu lungsur" > 
      <!-- pautan -->
    </ul>
  </li>
</ul>

Pil dengan dropdown

<ul class = "pil nav nav" > 
  <li class = "dropdown" > 
    <a class = "turun turun-togol" 
       data-toggle = "dropdown"
       href = "#" >
        Jatuh turun
        <b class = "karet" ></b> 
      </a>
    <ul class = "menu lungsur" > 
      <!-- pautan -->
    </ul>
  </li>
</ul>

Senarai navigasi

Cara mudah dan mudah untuk membina kumpulan pautan navigasi dengan pengepala pilihan. Ia paling sesuai digunakan dalam bar sisi seperti Finder dalam OS X.

Contoh senarai nav

Ambil senarai pautan dan tambah class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Pengepala senarai </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Perpustakaan </a></li> 
  ...
</ul>

CatatanUntuk bersarang dalam senarai nav, sertakan class="nav nav-list"pada mana-mana bersarang <ul>.

Pembahagi mendatar

Tambahkan pembahagi mendatar dengan mencipta item senarai kosong dengan class .divider, seperti:

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

Nav boleh tab

Hidupkan tab anda dengan pemalam mudah untuk menogol antara kandungan melalui tab. Bootstrap menyepadukan tab boleh tab dalam empat gaya: atas (lalai), kanan, bawah dan kiri.

Contoh jadual

Untuk menjadikan tab boleh tab, buat .tab-paneID unik untuk setiap tab dan bungkusnya dengan .tab-content.

Saya di Bahagian 1.

Apa khabar, saya di Bahagian 2.

Apa khabar perempuan, ini Bahagian 3.

<div class = "tabable" > <!-- Hanya diperlukan untuk tab kiri/kanan -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Bahagian 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Bahagian 2 </a></li>  
  </ul>
  <div class = "kandungan tab" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Saya berada di Bahagian 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Apa khabar, saya di Bahagian 2. </p>
    </div>
  </div>
</div>

Pudar dalam tab

Untuk membuat tab pudar, tambahkan .fadepada setiap .tab-pane.

Memerlukan pemalam jQuery

Semua tab boleh tab dikuasakan oleh pemalam jQuery kami yang ringan. Baca lebih lanjut tentang cara menghidupkan tab boleh tab pada halaman dokumen JavaScript .

Boleh tab dalam mana-mana arah

Tab di bahagian bawah

Balikkan susunan HTML dan tambahkan kelas untuk meletakkan tab di bahagian bawah.

Saya di Bahagian A.

Apa khabar, saya di Bahagian B.

Apa khabar perempuan, ini Bahagian C.

<div class = "tab boleh tab-di bawah" > 
  <div class = "kandungan tab" > 
    ...
  </div>
  <ul class = "nav-tabs" > 
    ...
  </ul>
</div>

Tab di sebelah kiri

Tukar kelas untuk meletakkan tab di sebelah kiri.

Saya di Bahagian A.

Apa khabar, saya di Bahagian B.

Apa khabar perempuan, ini Bahagian C.

<div class = "tab boleh tab-kiri" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "kandungan tab" > 
    ...
  </div>
</div>

Tab di sebelah kanan

Tukar kelas untuk meletakkan tab di sebelah kanan.

Saya di Bahagian A.

Apa khabar, saya di Bahagian B.

Apa khabar perempuan, ini Bahagian C.

<div class = "tab boleh tab-kanan" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "kandungan tab" > 
    ...
  </div>
</div>

Navbar asas

Untuk memulakan, navbar adalah statik (tidak ditetapkan ke atas) dan termasuk sokongan untuk nama projek dan navigasi asas. Letakkan satu di mana-mana sahaja dalam .container, yang menetapkan lebar tapak dan kandungan anda.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Tajuk </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Pautan </a></li> 
      <li><a href = "#" > Pautan </a></li> 
    </ul>
  </div>
</div>

Komponen Navbar

Jenama

Pautan mudah untuk menunjukkan jenama atau nama projek anda hanya memerlukan tag anchor.

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

Pautan navigasi

Item Nav mudah untuk ditambah melalui senarai tidak tersusun.

<ul class = "nav" > 
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li><a href = "#" > Pautan </a></li> 
  <li><a href = "#" > Pautan </a></li> 
</ul>

Anda boleh menambah pembahagi dengan mudah pada pautan navigasi anda dengan item senarai kosong dan kelas mudah. Hanya tambah ini antara pautan:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Borang

Untuk menggayakan dan meletakkan borang dengan betul dalam bar navigasi, tambahkan kelas yang sesuai seperti yang ditunjukkan di bawah. Untuk borang lalai, masukkan .navbar-formdan sama ada .pull-leftatau .pull-rightuntuk menjajarkannya dengan betul.

<form class = "navbar-form pull-left" > 
  < jenis input = "teks" kelas = "span2" >  
  <button type = "submit" class = "btn" > Submit </button>  
</form>

Borang carian

Untuk borang carian yang lebih tersuai, tambahkan .navbar-searchpada formdan .search-querypada input untuk gaya khusus dalam bar navigasi.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Cari" >   
</form>

Penjajaran komponen

Jajarkan pautan navigasi, borang carian atau teks, gunakan kelas .pull-leftatau .pull-rightutiliti. Kedua-dua kelas akan menambah apungan CSS ke arah yang ditentukan.

Menggunakan dropdown

Tambahkan dropdown dan drop-up pada nav dengan sedikit markup dan dropdown pemalam JavaScript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Akaun
      <b class = "karet" ></b> 
    </a>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </li>
</ul>

Lawati dokumentasi lungsur turun JavaScript untuk mendapatkan lebih banyak markup dan maklumat tentang panggilan lungsur turun.

Teks

Balut rentetan teks dalam elemen dengan .navbar-text, biasanya pada <p>teg untuk petunjuk dan warna yang betul.

Variasi paparan pilihan

Betulkan bar navigasi ke bahagian atas atau bawah port pandangan dengan kelas tambahan pada div paling luar, .navbar.

Ditetapkan ke atas

Tambah .navbar-fixed-topdan ingat untuk mengambil kira kawasan tersembunyi di bawahnya dengan menambahkan sekurang-kurangnya 40px paddingpada <body>. Pastikan anda menambah ini selepas CSS Bootstrap teras dan sebelum CSS responsif pilihan.

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

Tetap ke bawah

Tambah .navbar-fixed-bottomsebaliknya.

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

Navbar atas statik

Buat navbar lebar penuh yang menatal keluar dengan halaman dengan menambah .navbar-static-top. Tidak seperti .navbar-fixed-topkelas, anda tidak perlu menukar sebarang padding pada body.

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

Navbar responsif

Untuk melaksanakan navbar responsif yang runtuh, bungkus kandungan navbar anda dalam div yang mengandungi, .nav-collapse.collapse, dan tambahkan butang togol navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "bekas" > 
 
      <!-- .btn-navbar digunakan sebagai togol untuk kandungan navbar yang diruntuhkan -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Pastikan anda meninggalkan jenama di luar sana jika anda mahu ia ditunjukkan -->
      <a class = "brand" href = "#" > Nama projek </a>  
 
      <!-- Semua yang anda mahu disembunyikan pada 940px atau kurang, letakkan di sini -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, dll -->
      </div>
 
    </div>
  </div>
</div>

Angkat kepala! Navbar responsif memerlukan pemalam runtuh dan fail CSS Bootstrap responsif .

Variasi terbalik

Ubah suai rupa navbar dengan menambah .navbar-inverse.

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

Contoh

Satu contoh ditunjukkan kerana ia mungkin dipaparkan merentas berbilang halaman.

<ul class = "serbuk roti" > 
  <li><a href = "#" > Laman Utama </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Perpustakaan </a> <span class = "divider" > / </span></li>   
  <li class = "aktif" > Data </li> 
</ul>

Penomboran standard

Penomboran mudah yang diilhamkan oleh Rdio, bagus untuk apl dan hasil carian. Blok besar sukar untuk dilepaskan, mudah berskala dan menyediakan kawasan klik yang besar.

<div class = "penomboran" > 
  <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 = "#" > Seterusnya </a></li> 
  </ul>
</div>

Pilihan

Keadaan kurang upaya dan aktif

Pautan boleh disesuaikan untuk keadaan yang berbeza. Gunakan .disableduntuk pautan yang tidak boleh diklik dan .activeuntuk menunjukkan halaman semasa.

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

Anda boleh menukar sauh aktif atau dilumpuhkan secara pilihan untuk rentang untuk mengalih keluar fungsi klik sambil mengekalkan gaya yang dimaksudkan.

<div class = "penomboran" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "aktif" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Saiz

Inginkan penomboran yang lebih besar atau lebih kecil? Tambah .pagination-large, .pagination-small, atau .pagination-miniuntuk saiz tambahan.

<div class = "penomboran penomboran-besar" > 
  <ul>
    ...
  </ul>
</div>
<div class = "penomboran" > 
  <ul>
    ...
  </ul>
</div>
<div class = "penomboran penomboran-kecil" > 
  <ul>
    ...
  </ul>
</div>
<div class = "penomboran penomboran-mini" > 
  <ul>
    ...
  </ul>
</div>

Penjajaran

Tambah satu daripada dua kelas pilihan untuk menukar penjajaran pautan penomboran: .pagination-centereddan .pagination-right.

<div class = "penomboran berpusatkan penomboran" > 
  ...
</div>

<div class = "penomboran penomboran-kanan" > 
  ...
</div>

Alat kelui

Pautan pantas sebelum dan seterusnya untuk pelaksanaan penomboran mudah dengan penanda dan gaya ringan. Ia bagus untuk tapak ringkas seperti blog atau majalah.

Contoh lalai

Secara lalai, alat kelui memusatkan pautan.

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

Pautan sejajar

Sebagai alternatif, anda boleh menyelaraskan setiap pautan ke sisi:

<ul class = "pager" > 
  <li class = "sebelumnya" > 
    <a href = "#" > ← Lebih lama </a> 
  </li>
  <li class = "seterusnya" > 
    <a href = "#" > Lebih baharu → </a> 
  </li>
</ul>

Keadaan orang kurang upaya pilihan

Pautan kelui juga menggunakan .disabledkelas utiliti umum daripada penomboran.

<ul class = "pager" > 
  <li class = "sebelum ini dilumpuhkan" > 
    <a href = "#" > ← Lebih lama </a> 
  </li>
  ...
</ul>

Label

Label	Penanda
Lalai	`<span class="label">Default</span>`
Kejayaan	`<span class="label label-success">Success</span>`
Amaran	`<span class="label label-warning">Warning</span>`
penting	`<span class="label label-important">Important</span>`
info	`<span class="label label-info">Info</span>`
Songsang	`<span class="label label-inverse">Inverse</span>`

Lencana

Nama	Contoh	Penanda
Lalai	1	`<span class="badge">1</span>`
Kejayaan	2	`<span class="badge badge-success">2</span>`
Amaran	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>`
Songsang	10	`<span class="badge badge-inverse">10</span>`

Mudah dilipat

Untuk pelaksanaan yang mudah, label dan lencana hanya akan runtuh (melalui :emptypemilih CSS) apabila tiada kandungan wujud di dalamnya.

Unit wira

Komponen yang ringan dan fleksibel untuk mempamerkan kandungan utama di tapak anda. Ia berfungsi dengan baik pada tapak pemasaran dan kandungan yang berat.

Hai dunia!

Ini ialah unit wira ringkas, komponen gaya jumbotron ringkas untuk menarik perhatian tambahan kepada kandungan atau maklumat yang ditampilkan.

Ketahui lebih lanjut

<div class = "unit wira" > 
  <h1> Tajuk </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Ketahui lebih lanjut
    </a>
  </p>
</div>

Pengepala halaman

Cangkang ringkas untuk h1menjarakkan dan membahagikan bahagian kandungan pada halaman dengan sewajarnya. Ia boleh menggunakan elemen h1lalai small, serta kebanyakan komponen lain (dengan gaya tambahan).

<div class = "pengepala halaman" > 
  <h1> Contoh pengepala halaman <small> Subteks untuk pengepala </small></h1>
</div>

Lakaran kecil lalai

Secara lalai, lakaran kecil Bootstrap direka untuk mempamerkan imej terpaut dengan penanda yang diperlukan minimum.

Sangat boleh disesuaikan

Dengan sedikit penanda tambahan, anda boleh menambah apa-apa jenis kandungan HTML seperti tajuk, perenggan atau butang ke dalam lakaran kecil.

Label lakaran kecil

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tindakan Tindakan
Label lakaran kecil

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tindakan Tindakan
Label lakaran kecil

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tindakan Tindakan

Mengapa menggunakan lakaran kecil

Imej kecil (sebelum ini .media-gridsehingga v1.4) bagus untuk grid foto atau video, hasil carian imej, produk runcit, portfolio dan banyak lagi. Ia boleh menjadi pautan atau kandungan statik.

Penanda mudah dan fleksibel

Penanda lakaran kecil adalah mudah— uldengan sebarang bilangan lielemen adalah semua yang diperlukan. Ia juga sangat fleksibel, membenarkan apa-apa jenis kandungan dengan hanya sedikit lagi penanda untuk membungkus kandungan anda.

Menggunakan saiz lajur grid

Akhir sekali, komponen lakaran kenit menggunakan kelas sistem grid sedia ada—seperti .span2atau— .span3untuk mengawal dimensi lakaran kecil.

Penanda

Seperti yang dinyatakan sebelum ini, penanda yang diperlukan untuk lakaran kecil adalah ringan dan mudah. Berikut ialah lihat pada persediaan lalai untuk imej terpaut :

<ul class = "gambar kecil" > 
  <li class = "span4" > 
    <a href = "#" class = "gambar kecil" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Untuk kandungan HTML tersuai dalam lakaran kecil, penanda berubah sedikit. Untuk membenarkan kandungan tahap blok di mana-mana sahaja, kami menukar <a>kandungan <div>seperti itu:

<ul class = "gambar kecil" > 
  <li class = "span4" > 
    <div class = "gambar kecil" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Label lakaran kecil </h3>
      <p> Kapsyen lakaran kecil... </p>
    </div>
  </li>
  ...
</ul>

Lagi contoh

Terokai semua pilihan anda dengan pelbagai kelas grid yang tersedia untuk anda. Anda juga boleh mencampur dan memadankan saiz yang berbeza.

Makluman lalai

Balut sebarang teks dan butang buang pilihan .alertuntuk mesej amaran amaran asas.

Amaran! Best semak diri anda, anda tidak kelihatan terlalu bagus.

<div class = "makluman" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </butang>   
  <strong> Amaran! </strong> Sebaiknya semak diri anda, anda tidak kelihatan terlalu bagus.
</div>

Ketepikan butang

Penyemak imbas Safari Mudah Alih dan Opera Mudah Alih, sebagai tambahan kepada data-dismiss="alert"atribut, memerlukan a href="#"untuk menolak makluman apabila menggunakan <a>teg.

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

Sebagai alternatif, anda boleh menggunakan <button>elemen dengan atribut data, yang telah kami pilih untuk lakukan untuk dokumen kami. Apabila menggunakan <button>, anda mesti memasukkan type="button"atau borang anda tidak boleh diserahkan.

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

Tolak makluman melalui JavaScript

Gunakan pemalam jQuery makluman untuk menolak makluman yang cepat dan mudah.

Pilihan

Untuk mesej yang lebih panjang, tingkatkan pelapik pada bahagian atas dan bawah pembungkus makluman dengan menambahkan .alert-block.

Amaran!

Best semak diri anda, anda tidak kelihatan terlalu bagus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "block alert alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </butang>   
  <h4> Amaran! </h4>
  Sebaiknya semak diri anda, anda tidak...
</div>

Alternatif kontekstual

Tambahkan kelas pilihan untuk menukar konotasi makluman.

Ralat atau bahaya

Oh kejap! Ubah beberapa perkara dan cuba serahkan sekali lagi.

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

Kejayaan

Bagus! Anda berjaya membaca mesej makluman penting ini.

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

Maklumat

Angkat kepala! Makluman ini memerlukan perhatian anda, tetapi ia tidak begitu penting.

<div class = "maklumat amaran amaran" > 
  ...
</div>

Contoh dan markup

asas

Bar kemajuan lalai dengan kecerunan menegak.

<div class = "kemajuan" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

berjalur

Menggunakan kecerunan untuk mencipta kesan berjalur. Tidak tersedia dalam IE7-8.

<div class = "berjalur kemajuan kemajuan" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Beranimasi

Tambahkan .activeke .progress-stripeduntuk menghidupkan jalur dari kanan ke kiri. Tidak tersedia dalam semua versi IE.

<div class = "berjalur kemajuan kemajuan aktif" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Bertindan

Letakkan berbilang bar ke dalam yang sama .progressuntuk menyusunnya.

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

Pilihan

Warna tambahan

Bar kemajuan menggunakan beberapa butang yang sama dan kelas amaran untuk gaya yang konsisten.

<div class = "maklumat kemajuan kemajuan" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "kemajuan kemajuan-kejayaan" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "amaran kemajuan kemajuan" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-bahaya" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Bar berjalur

Sama seperti warna pepejal, kami mempunyai bar kemajuan berjalur yang pelbagai.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "kemajuan kemajuan-berjalur kemajuan bahaya" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Sokongan penyemak imbas

Bar kemajuan menggunakan kecerunan CSS3, peralihan dan animasi untuk mencapai semua kesannya. Ciri ini tidak disokong dalam IE7-9 atau versi Firefox yang lebih lama.

Versi lebih awal daripada Internet Explorer 10 dan Opera 12 tidak menyokong animasi.

Gaya objek abstrak untuk membina pelbagai jenis komponen (seperti ulasan blog, Tweet, dll) yang menampilkan imej dijajar ke kiri atau kanan bersama kandungan teks.

Contoh lalai

Media lalai membenarkan mengapungkan objek media (imej, video, audio) ke kiri atau kanan blok kandungan.

Tajuk media

Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis dalam faucibus.

Tajuk media

<div class = "media" > 
  <a class = "tarik-kiri" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Objek media bersarang -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Senarai media

Dengan sedikit penanda tambahan, anda boleh menggunakan senarai dalam media (berguna untuk urutan ulasan atau senarai artikel).

Tajuk media

Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Tajuk media bersarang
Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Tajuk media bersarang
Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Tajuk media bersarang
Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Tajuk media
Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "senarai media" > 
  <li class = "media" > 
    <a class = "tarik-kiri" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Objek media bersarang -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

perigi

Gunakan perigi sebagai kesan mudah pada elemen untuk memberikan kesan sisipan.

Lihat, saya dalam perigi!

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

Kelas pilihan

Kawal pelapik dan sudut bulat dengan dua kelas pengubah suai pilihan.

Lihat, saya dalam perigi!

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

Lihat, saya dalam perigi!

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

Tutup ikon

Gunakan ikon tutup generik untuk mengetepikan kandungan seperti modal dan makluman.

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

Peranti iOS memerlukan acara href="#"untuk klik jika anda lebih suka menggunakan sauh.

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

Kelas pembantu

Kelas yang ringkas dan fokus untuk paparan kecil atau tweak tingkah laku.

.tarik-kiri

Terapungkan elemen kiri

kelas = "tarik-kiri"

. tarik - kiri {
  terapung : kiri ;
}

.tarik-kanan

Terapungkan elemen dengan betul

kelas = "tarik-kanan"

. tarik - kanan {
  terapung : betul ;
}

.diredamkan

Tukar warna elemen kepada#999

kelas = "dibisukan"

. disenyapkan {
  warna : #999; 
}

.pembetulan jelas

Kosongkan floatpada mana-mana elemen

kelas = "pembetulan jelas"

. clearfix {
  * zum : 1 ; 
  &: sebelum ,
  &: selepas {
    paparan : meja ;
    kandungan : "" ; 
  }
  &: selepas {
    jelas : kedua -duanya ;
  }
}

Menu lungsur turun

Contoh

Penanda

Pilihan

Menyelaraskan menu

Pilihan menu dilumpuhkan

Sub menu pada lungsur turun

Kumpulan butang

Contoh

Kumpulan butang tunggal

Kumpulan butang berbilang

Kumpulan butang menegak

Kotak semak dan perisa radio

Jatuh turun dalam kumpulan butang

Menu lungsur turun butang

Gambaran keseluruhan dan contoh

Berfungsi dengan semua saiz butang

Memerlukan JavaScript

Butang pisah turun bawah

Saiz

Menu lungsur

Nav: tab, pil dan senarai

Lalai ringan Penanda yang sama, kelas yang berbeza

Tab asas

Pil asas

Keadaan kurang upaya

Penjajaran komponen

Boleh ditindan

Tab bertindan

Pil bertindan

Jatuh turun

Tab dengan lungsur turun

Pil dengan dropdown

Senarai navigasi

Contoh senarai nav

Pembahagi mendatar

Nav boleh tab

Contoh jadual

Pudar dalam tab

Memerlukan pemalam jQuery

Boleh tab dalam mana-mana arah

Tab di bahagian bawah

Tab di sebelah kiri

Tab di sebelah kanan

Navbar

Navbar asas

Komponen Navbar

Jenama

Pautan navigasi

Borang

Borang carian

Penjajaran komponen

Menggunakan dropdown

Teks

Variasi paparan pilihan

Ditetapkan ke atas

Tetap ke bawah

Navbar atas statik

Navbar responsif

Variasi terbalik

Serbuk roti

Contoh

Penomboran Dua pilihan untuk halaman melalui kandungan

Penomboran standard

Pilihan

Keadaan kurang upaya dan aktif

Saiz

Penjajaran

Alat kelui

Contoh lalai

Pautan sejajar

Keadaan orang kurang upaya pilihan

Label dan lencana

Label

Lencana

Mudah dilipat

Komponen tipografi

Unit wira

Hai dunia!

Pengepala halaman