Komponen

Berpuluh-puluh komponen boleh guna semula dibina untuk menyediakan navigasi, makluman, popover dan banyak lagi.

Contoh

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

Kumpulan butang tunggal

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Kiri </button>
  3. <button class = "btn" > Tengah </button>
  4. <button class = "btn" > Kanan </button>
  5. </div>

Kumpulan butang berbilang

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Kumpulan butang menegak

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

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Tindakan
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu lungsur" >
  7. <!-- pautan menu lungsur turun -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Tindakan </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </butang>
  6. <ul class = "menu lungsur" >
  7. <!-- pautan menu lungsur turun -->
  8. </ul>
  9. </div>

Saiz

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Tindakan </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </butang>
  6. <ul class = "menu lungsur" >
  7. <!-- pautan menu lungsur turun -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </butang>
  6. <ul class = "menu lungsur" >
  7. <!-- pautan menu lungsur turun -->
  8. </ul>
  9. </div>

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.

  1. <div class = "penomboran" >
  2. <ul>
  3. <li><a href = "#" > Sebelumnya </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Seterusnya </a></li>
  10. </ul>
  11. </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.

  1. <div class = "penomboran" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "aktif" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "penomboran" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "aktif" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Saiz

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

  1. <div class = "penomboran penomboran-besar" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "penomboran" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "penomboran penomboran-kecil" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "penomboran penomboran-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Penjajaran

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

  1. <div class = "penomboran berpusatkan penomboran" >
  2. ...
  3. </div>
  1. <div class = "penomboran penomboran-kanan" >
  2. ...
  3. </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.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Sebelumnya </a></li>
  3. <li><a href = "#" > Seterusnya </a></li>
  4. </ul>

Pautan sejajar

Sebagai alternatif, anda boleh menyelaraskan setiap pautan ke sisi:

  1. <ul class = "pager" >
  2. <li class = "sebelumnya" >
  3. <a href = "#" > Lebih lama </a>
  4. </li>
  5. <li class = "seterusnya" >
  6. <a href = "#" > Lebih baharu → </a>
  7. </li>
  8. </ul>

Keadaan orang kurang upaya pilihan

Pautan kelui juga menggunakan .disabledkelas utiliti umum daripada penomboran.

  1. <ul class = "pager" >
  2. <li class = "sebelum ini dilumpuhkan" >
  3. <a href = "#" > Lebih lama </a>
  4. </li>
  5. ...
  6. </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

  1. <div class = "unit wira" >
  2. <h1> Tajuk </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Ketahui lebih lanjut
  7. </a>
  8. </p>
  9. </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).

  1. <div class = "pengepala halaman" >
  2. <h1> Contoh pengepala halaman <small> Subteks untuk pengepala </small></h1>
  3. </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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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 :

  1. <ul class = "gambar kecil" >
  2. <li class = "span4" >
  3. <a href = "#" class = "gambar kecil" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "gambar kecil" >
  2. <li class = "span4" >
  3. <div class = "gambar kecil" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Label lakaran kecil </h3>
  6. <p> Kapsyen lakaran kecil... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = "makluman" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </butang>
  3. <strong> Amaran! </strong> Sebaiknya semak diri anda, anda tidak kelihatan terlalu bagus.
  4. </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.

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

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

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

Alternatif kontekstual

Tambahkan kelas pilihan untuk menukar konotasi makluman.

Ralat atau bahaya

Oh kejap! Ubah beberapa perkara dan cuba serahkan sekali lagi.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Kejayaan

Bagus! Anda berjaya membaca mesej makluman penting ini.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Maklumat

Angkat kepala! Makluman ini memerlukan perhatian anda, tetapi ia tidak begitu penting.
  1. <div class = "maklumat amaran amaran" >
  2. ...
  3. </div>

Contoh dan markup

asas

Bar kemajuan lalai dengan kecerunan menegak.

  1. <div class = "kemajuan" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

berjalur

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

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

Beranimasi

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

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

Bertindan

Letakkan berbilang bar ke dalam yang sama .progressuntuk menyusunnya.

  1. <div class = "kemajuan" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Pilihan

Warna tambahan

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

  1. <div class = "maklumat kemajuan kemajuan" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "kemajuan kemajuan-kejayaan" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "amaran kemajuan kemajuan" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-bahaya" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Bar berjalur

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "kemajuan kemajuan-berjalur kemajuan bahaya" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </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.

64x64

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

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

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.
  1. <div class = "media" >
  2. <a class = "tarik-kiri" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- Objek media bersarang -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Senarai media

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

  • 64x64

    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.

    64x64

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

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

    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.
  • 64x64

    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.
  1. <ul class = "senarai media" >
  2. <li class = "media" >
  3. <a class = "tarik-kiri" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- Objek media bersarang -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

perigi

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

Lihat, saya dalam perigi!
  1. <div class = "well" >
  2. ...
  3. </div>

Kelas pilihan

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

Lihat, saya dalam perigi!
  1. <div class = "well well-large" >
  2. ...
  3. </div>
Lihat, saya dalam perigi!
  1. <div class = "well well-small" >
  2. ...
  3. </div>

Tutup ikon

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

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

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

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

Kelas pembantu

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

.tarik-kiri

Terapungkan elemen kiri

  1. kelas = "tarik-kiri"
  1. . tarik - kiri {
  2. terapung : kiri ;
  3. }

.tarik-kanan

Terapungkan elemen dengan betul

  1. kelas = "tarik-kanan"
  1. . tarik - kanan {
  2. terapung : betul ;
  3. }

.diredamkan

Tukar warna elemen kepada#999

  1. kelas = "dibisukan"
  1. . disenyapkan {
  2. warna : #999;
  3. }

.pembetulan jelas

Kosongkan floatpada mana-mana elemen

  1. kelas = "pembetulan jelas"
  1. . clearfix {
  2. * zum : 1 ;
  3. &: sebelum ,
  4. &: selepas {
  5. paparan : meja ;
  6. kandungan : "" ;
  7. }
  8. &: selepas {
  9. jelas : kedua -duanya ;
  10. }
  11. }