Komponen

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

Kumpulan butang

Gunakan kumpulan butang untuk menggabungkan berbilang butang bersama-sama sebagai satu komponen komposit. Bina mereka dengan satu siri <a>atau <button>elemen.

Amalan terbaik

Kami mengesyorkan garis panduan berikut untuk menggunakan kumpulan butang dan bar alat:

  • Sentiasa gunakan elemen yang sama dalam satu kumpulan butang, <a>atau <button>.
  • Jangan campurkan butang dengan warna yang berbeza dalam kumpulan butang yang sama.
  • Gunakan ikon sebagai tambahan kepada atau bukannya teks, tetapi pastikan sertakan teks alt dan tajuk jika sesuai.

Kumpulan Butang Berkaitan dengan menu lungsur (lihat di bawah) harus dipanggil secara berasingan dan sentiasa menyertakan karet lungsur turun untuk menunjukkan tingkah laku yang dimaksudkan.

Contoh lalai

Begini cara HTML mencari kumpulan butang standard yang dibina dengan butang teg sauh:

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

Contoh bar alat

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>

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.

Dapatkan javascript »

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.

Butang lungsur turun

Gambaran keseluruhan dan contoh

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

Contoh markup

Sama seperti kumpulan butang, penanda kami menggunakan penanda butang biasa, tetapi dengan beberapa tambahan untuk memperhalusi gaya dan menyokong pemalam jQuery lungsur Bootstrap.

  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. saiz butang anda kepada .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

Gambaran keseluruhan dan contoh

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.

Saiz

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "tarik turun-menu tarik-kanan" >
  4. <!-- pautan menu lungsur turun -->
  5. </ul>
  6. </div>

Contoh markup

Kami mengembangkan menu lungsur butang biasa untuk menyediakan tindakan butang kedua yang beroperasi sebagai pencetus lungsur turun yang berasingan.

  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>

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

Bila nak guna

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

Pautan halaman stateful

Pautan boleh disesuaikan dan berfungsi dalam beberapa keadaan dengan kelas yang betul. .disableduntuk pautan yang tidak boleh diklik dan .activeuntuk halaman semasa.

Penjajaran fleksibel

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

Contoh

Komponen penomboran lalai adalah fleksibel dan berfungsi dalam beberapa variasi.

Penanda

Dibalut dengan <div>, penomboran hanyalah <ul>.

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

Pager Untuk pautan cepat sebelum dan seterusnya

Mengenai pager

Komponen kelui ialah satu set pautan untuk pelaksanaan penomboran mudah dengan penanda ringan dan juga gaya yang lebih ringan. Ia bagus untuk tapak ringkas seperti blog atau majalah.

Keadaan orang kurang upaya pilihan

Pautan kelui juga menggunakan .disabledkelas umum daripada penomboran.

Contoh lalai

Secara lalai, alat kelui memusatkan pautan.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Sebelumnya </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Seterusnya </a>
  7. </li>
  8. </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>
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>

Tentang

Lencana ialah komponen kecil dan ringkas untuk memaparkan penunjuk atau kiraan sejenis. Ia biasanya ditemui dalam klien e-mel seperti Mail.app atau pada apl mudah alih untuk pemberitahuan tolak.

Kelas yang ada

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>

Unit wira

Bootstrap menyediakan komponen yang ringan dan fleksibel yang dipanggil unit wira untuk mempamerkan kandungan di tapak anda. Ia berfungsi dengan baik pada tapak pemasaran dan kandungan yang berat.

Penanda

Balut kandungan anda dalam bentuk divseperti ini:

  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>

Hai dunia!

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

Ketahui lebih lanjut

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

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

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 = "span3" >
  3. <a href = "#" class = "gambar kecil" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "gambar kecil" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Label lakaran kecil </h5>
  6. <p> Kapsyen lakaran kecil di sini... </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.

lalai ringan

Kelas asas yang ditulis semula

Dengan Bootstrap 2, kami telah memudahkan kelas asas: .alertbukannya .alert-message. Kami juga telah mengurangkan penanda minimum yang diperlukan—tidak <p>diperlukan secara lalai, hanya bahagian luar <div>.

Mesej amaran tunggal

Untuk komponen yang lebih tahan lama dengan kurang kod, kami telah mengalih keluar rupa pembezaan untuk makluman blok, mesej yang disertakan dengan lebih banyak padding dan biasanya lebih banyak teks. Kelas juga telah bertukar kepada .alert-block.


Sangat sesuai dengan javascript

Bootstrap didatangkan dengan pemalam jQuery yang hebat yang menyokong mesej amaran, menjadikannya cepat dan mudah untuk menolaknya.

Dapatkan pemalam »

Contoh makluman

Balut mesej anda dan ikon tutup pilihan dalam div dengan kelas mudah.

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

Angkat kepala! Peranti iOS memerlukan href="#"untuk menolak makluman. Pastikan anda memasukkannya dan atribut data untuk ikon tutup sauh. 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.

Panjangkan mesej makluman standard dengan mudah dengan dua kelas pilihan: .alert-blockuntuk lebih banyak padding dan kawalan teks dan .alert-headinguntuk tajuk yang sepadan.

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. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Amaran! </h4>
  4. Sebaiknya semak diri anda, anda tidak...
  5. </div>

Alternatif kontekstual Tambah kelas pilihan untuk menukar konotasi amaran

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"
  3. style = " lebar : 60 %; " ></div>
  4. </div>

berjalur

Menggunakan kecerunan untuk mencipta kesan berjalur (tiada IE).

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

Beranimasi

Mengambil contoh berjalur dan menghidupkannya (tiada IE).

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

Pilihan dan sokongan penyemak imbas

Warna tambahan

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

Bar berjalur

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

Tingkah laku

Bar kemajuan menggunakan peralihan CSS3, jadi jika anda melaraskan lebar secara dinamik melalui javascript, ia akan mengubah saiz dengan lancar.

Jika anda menggunakan .activekelas, .progress-stripedbar kemajuan anda akan menghidupkan jalur dari kiri ke kanan.

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.

Opera dan IE tidak menyokong animasi pada masa ini.

perigi

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

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

Tutup ikon

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

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

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

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