Bootstrap

CSS asas

Elemen HTML asas digayakan dan dipertingkatkan dengan kelas yang boleh diperluaskan.

Tipografi

Tajuk

Semua tajuk HTML, <h1>melalui <h6>tersedia.

h1. Tajuk 1

h2. Tajuk 2

h3. Tajuk 3

h4. Tajuk 4

h5. Tajuk 5
h6. Tajuk 6

Salinan badan

Lalai global Bootstrap font-sizeialah 14px , line-heightdengan 20px . Ini digunakan pada <body>dan semua perenggan. Di samping itu, <p>(perenggan) menerima margin bawah separuh ketinggian garisnya (10px secara lalai).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Salinan badan utama

Jadikan perenggan menonjol dengan menambah .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ini bukan commodo luctus.

<p class = "lead" > ... </p>

Dibina dengan Kurang

Skala tipografi adalah berdasarkan dua pembolehubah KURANG dalam pembolehubah.less : @baseFontSizedan @baseLineHeight. Yang pertama ialah saiz fon asas yang digunakan sepanjang dan yang kedua ialah ketinggian garis asas. Kami menggunakan pembolehubah tersebut dan beberapa matematik mudah untuk mencipta jidar, pelapik dan ketinggian garis semua jenis kami dan banyak lagi. Sesuaikan mereka dan Bootstrap menyesuaikan diri.

Penekanan

Gunakan teg penekanan lalai HTML dengan gaya ringan.

<small>

Untuk tidak menekankan sebaris atau blok teks, gunakan teg kecil.

Baris teks ini dimaksudkan untuk dianggap sebagai cetakan halus.

<p> <small> Baris teks ini dimaksudkan untuk dianggap sebagai cetakan halus. </kecil> </p>

berani

Untuk menekankan coretan teks dengan berat fon yang lebih berat.

Coretan teks berikut dipaparkan sebagai teks tebal .

<strong> dipaparkan sebagai teks tebal </strong>

Italic

Untuk menekankan coretan teks dengan huruf condong.

Coretan teks berikut dipaparkan sebagai teks condong .

<em> diberikan sebagai teks condong </em>

Angkat kepala!Jangan ragu untuk menggunakan <b>dan <i>dalam HTML5. <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.

Kelas penjajaran

Selaraskan semula teks dengan mudah kepada komponen dengan kelas penjajaran teks.

Teks dijajar ke kiri.

Teks sejajar tengah.

Teks dijajar kanan.

  1. <p class = "text-left" > Teks dijajar ke kiri. </p> 
  2. <p class = "text-center" > Teks sejajar tengah. </p> 
  3. <p class = "teks-kanan" > Teks dijajar ke kanan. </p>

Kelas penekanan

Sampaikan makna melalui warna dengan segelintir kelas utiliti penekanan.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Hiasan pellentesque sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "redam" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Hiasan pellentesque sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Singkatan

Pelaksanaan bergaya <abbr>elemen HTML untuk singkatan dan akronim untuk menunjukkan versi dikembangkan pada tuding. Singkatan dengan titleatribut mempunyai sempadan bawah titik terang dan kursor bantuan pada tuding, memberikan konteks tambahan pada tuding.

<abbr>

Untuk teks dikembangkan pada tuding panjang bagi singkatan, sertakan titleatribut.

Singkatan perkataan atribut ialah attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Tambahkan .initialismpada singkatan untuk saiz fon yang lebih kecil sedikit.

HTML adalah perkara terbaik sejak roti dihiris.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Alamat

Bentangkan maklumat hubungan untuk nenek moyang terdekat atau seluruh badan kerja.

<address>

Kekalkan pemformatan dengan menamatkan semua baris dengan <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nama Penuh
[email protected] 
  1. <alamat>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </alamat>
  7.  
  8. <alamat>
  9.   <strong> Nama Penuh </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </alamat>

Sekat petikan

Untuk memetik blok kandungan daripada sumber lain dalam dokumen anda.

Petikan blok lalai

Bungkus <blockquote>mana-mana HTML sebagai petikan. Untuk petikan lurus kami mengesyorkan <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  3. </blockquote>

Pilihan blockquote

Perubahan gaya dan kandungan untuk variasi mudah pada petikan blok standard.

Menamakan sumber

Tambah <small>tag untuk mengenal pasti sumber. Balut nama kerja sumber dalam <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk Sumber 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  3.   <small> Seseorang yang terkenal <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Paparan ganti

Gunakan .pull-rightuntuk petikan blok terapung dan dijajarkan ke kanan.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk Sumber 
  1. <blockquote class = "tarik-kanan" > 
  2.   ...
  3. </blockquote>

Senarai

Tidak tertib

Senarai item yang susunannya tidak penting secara eksplisit.

  • Lorem ipsum dolor duduk amet
  • Consectetur adipiscing elit
  • Integer molestie lorem dan massa
  • Facilisis dalam pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean duduk amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Mengarahkan

Senarai item yang susunannya penting secara eksplisit.

  1. Lorem ipsum dolor duduk amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem dan massa
  4. Facilisis dalam pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean duduk amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Tidak bergaya

Alih keluar padding lalai list-styledan kiri pada item senarai (kanak-kanak segera sahaja).

  • Lorem ipsum dolor duduk amet
  • Consectetur adipiscing elit
  • Integer molestie lorem dan massa
  • Facilisis dalam pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean duduk amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "tidak digayakan" > 
  2.   <li> ... </li>
  3. </ul>

Dalam barisan

Letakkan semua item senarai pada satu baris dengan inline-blockdan beberapa padding ringan.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "sebaris" > 
  2.   <li> ... </li>
  3. </ul>

Penerangan

Senarai istilah dengan perihalan berkaitannya.

Senarai penerangan
Senarai huraian sesuai untuk menentukan istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Penerangan mendatar

Buat istilah dan huraian dalam <dl>barisan sebelah-menyebelah.

Senarai penerangan
Senarai huraian sesuai untuk menentukan istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Angkat kepala!Senarai perihalan mendatar akan memotong istilah yang terlalu panjang untuk dimuatkan dalam pembetulan lajur kiri text-overflow. Dalam ruang pandang yang lebih sempit, ia akan bertukar kepada susun atur bertindan lalai.

Kod

Dalam barisan

Balut coretan sebaris kod dengan <code>.

Sebagai contoh, <section>hendaklah dibalut sebagai sebaris. 
  1. Contohnya , <code > & lt ; bahagian & gt ;</ code > hendaklah dibalut sebagai sebaris .

Blok asas

Gunakan <pre>untuk berbilang baris kod. Pastikan anda melepaskan sebarang kurungan sudut dalam kod untuk pemaparan yang betul.

<p>Contoh teks di sini...</p>
  1. <pra>
  2.   <p>Contoh teks di sini...</p>
  3. </pre>

Angkat kepala!Pastikan anda menyimpan kod dalam <pre>teg sedekat mungkin dengan sebelah kiri; ia akan memaparkan semua tab.

Anda boleh menambah .pre-scrollablekelas secara pilihan yang akan menetapkan ketinggian maksimum 350px dan menyediakan bar skrol paksi-y.

Meja

Gaya lalai

Untuk penggayaan asas—lapik ringan dan hanya pembahagi mendatar—tambahkan kelas asas .tablepada mana-mana <table>.

# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
  1. <table class = "jadual" > 
  2.   …
  3. </ jadual>

Kelas pilihan

Tambahkan mana-mana kelas berikut pada kelas .tableasas.

.table-striped

Menambah jaluran zebra pada mana-mana baris jadual dalam <tbody>melalui :nth-childpemilih CSS (tidak tersedia dalam IE7-8).

# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
  1. <table class = "jalur meja meja" > 
  2.   …
  3. </ jadual>

.table-bordered

Tambahkan jidar dan bucu bulat pada jadual.

# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
Tandakan Otto @getbootstrap
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </ jadual>

.table-hover

Dayakan keadaan tuding pada baris jadual dalam <tbody>.

# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </ jadual>

.table-condensed

Menjadikan meja lebih padat dengan memotong padding sel menjadi dua.

# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </ jadual>

Kelas baris pilihan

Gunakan kelas kontekstual untuk mewarnai baris jadual.

Kelas Penerangan
.success Menunjukkan tindakan yang berjaya atau positif.
.error Menunjukkan tindakan berbahaya atau berpotensi negatif.
.warning Menunjukkan amaran yang mungkin memerlukan perhatian.
.info Digunakan sebagai alternatif kepada gaya lalai.
# produk Pembayaran Diambil Status
1 TB - Bulanan 01/04/2012 Diluluskan
2 TB - Bulanan 02/04/2012 ditolak
3 TB - Bulanan 03/04/2012 Yang belum selesai
4 TB - Bulanan 04/04/2012 Panggil masuk untuk mengesahkan 
  1. ...
  2.   < tr class = "berjaya" >
  3.     <td> 1 < /td>
  4.     <td>TB - Bulanan</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Diluluskan</ td >
  7.   </ tr >
  8. ...

Penanda jadual yang disokong

Senarai elemen HTML jadual yang disokong dan cara ia harus digunakan.

Tag Penerangan
<table> Elemen pembalut untuk memaparkan data dalam format jadual
<thead> Elemen bekas untuk baris pengepala jadual ( <tr>) untuk melabel lajur jadual
<tbody> Unsur bekas untuk baris jadual ( <tr>) dalam badan jadual
<tr> Elemen bekas untuk set sel jadual ( <td>atau <th>) yang muncul pada satu baris
<td> Sel jadual lalai
<th> Sel jadual khas untuk label lajur (atau baris, bergantung pada skop dan peletakan).
<caption> Perihalan atau ringkasan tentang kandungan jadual, terutamanya berguna untuk pembaca skrin 
  1. <jadual>
  2.   <caption> ... </caption>
  3.   <kepala>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </ jadual>

Borang

Gaya lalai

Kawalan borang individu menerima penggayaan, tetapi tanpa sebarang kelas asas yang diperlukan pada <form>atau perubahan besar dalam markup. Hasil dalam tindanan, label dijajar ke kiri di atas kawalan borang.

Lagenda Contoh teks bantuan peringkat blok di sini. 
  1. <borang>
  2.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> Nama label </label>
  5.     < jenis input = "teks" pemegang tempat = "Taip sesuatu…" >  
  6.     <span class = "help-block" > Contoh teks bantuan peringkat blok di sini. </span> 
  7.     <label class = "kotak semak" > 
  8.       < jenis input = "kotak semak" > Semak saya keluar 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Submit </button>  
  11.   </fieldset>
  12. </form>

Susun atur pilihan

Termasuk dengan Bootstrap ialah tiga susun atur bentuk pilihan untuk kes penggunaan biasa.

Borang carian

Tambahkan .form-searchpada borang dan .search-querypada <input>untuk input teks yang lebih bulat.

  1. <form class = "carian borang" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Cari </button>  
  4. </form>

Borang sebaris

Tambahkan .form-inlineuntuk label dijajar kiri dan kawalan blok sebaris untuk reka letak padat.

  1. <form class = "form-inline" > 
  2.   < jenis input = "teks" class = "input-small" pemegang tempat = "E-mel" >   
  3.   < jenis input = "kata laluan" kelas = "input-kecil" pemegang tempat = "Kata Laluan" >   
  4.   <label class = "kotak semak" > 
  5.     < jenis input = "kotak semak" > Ingat saya 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Log masuk </button>  
  8. </form>

Bentuk mendatar

Jajar kanan label dan apungkan ke kiri untuk menjadikannya kelihatan pada baris yang sama dengan kawalan. Memerlukan perubahan markup terbanyak daripada borang lalai:

  • Tambah .form-horizontalpada borang
  • Balut label dan kawalan ke dalam.control-group
  • Tambahkan .control-labelpada label
  • Balut sebarang kawalan yang berkaitan .controlsuntuk penjajaran yang betul
  1. <form class = "form-horizontal" > 
  2.   <div class = "kumpulan kawalan" > 
  3.     <label class = "control-label" for = "inputEmail" > E- mel </label>  
  4.     <div class = "kawalan" > 
  5.       < jenis input = "teks" id = "inputEmail" pemegang tempat = "E-mel" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kumpulan kawalan" > 
  9.     <label class = "control-label" for = "inputPassword" > Kata laluan </label>  
  10.     <div class = "kawalan" > 
  11.       < jenis input = "kata laluan" id = "inputPassword" pemegang tempat = "Kata Laluan" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kumpulan kawalan" > 
  15.     <div class = "kawalan" > 
  16.       <label class = "kotak semak" > 
  17.         < jenis input = "kotak semak" > Ingat saya 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Log masuk </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kawalan borang yang disokong

Contoh kawalan borang standard yang disokong dalam reka letak borang contoh.

Input

Kawalan borang yang paling biasa, medan input berasaskan teks. Termasuk sokongan untuk semua jenis HTML5: teks, kata laluan, tarikh tarikh, tarikh-tempatan, tarikh, bulan, masa, minggu, nombor, e-mel, url, carian, telefon dan warna.

Memerlukan penggunaan yang ditentukan typepada setiap masa.

  1. < jenis input = "teks" pemegang tempat = "Input teks" >

Textarea

Kawalan bentuk yang menyokong berbilang baris teks. Tukar rowsatribut jika perlu.

  1. <textarea rows = "3" ></textarea>

Kotak semak dan radio

Kotak pilihan adalah untuk memilih satu atau beberapa pilihan dalam senarai manakala radio adalah untuk memilih satu pilihan daripada banyak.

Lalai (bertindan)


  1. <label class = "kotak semak" > 
  2.   < jenis input = "kotak semak" nilai = "" >  
  3.   Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" diperiksa >     
  8.   Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Pilihan dua boleh menjadi sesuatu yang lain dan memilihnya akan menyahpilih pilihan satu
  13. </label>

Kotak semak sebaris

Tambahkan .inlinekelas pada satu siri kotak pilihan atau radio untuk kawalan muncul pada baris yang sama.

  1. <label class = "kotak semak sebaris" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "kotak semak sebaris" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "kotak semak sebaris" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Memilih

Gunakan pilihan lalai atau tentukan a multiple="multiple"untuk menunjukkan berbilang pilihan sekaligus.


  1. <pilih>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Memperluas kawalan borang

Menambah di atas kawalan penyemak imbas sedia ada, Bootstrap menyertakan komponen bentuk berguna yang lain.

Input yang didahulukan dan ditambah

Tambahkan teks atau butang sebelum atau selepas sebarang input berasaskan teks. Sila ambil perhatian bahawa selectelemen tidak disokong di sini.

Pilihan lalai

Balut an .add-ondan an inputdengan satu daripada dua kelas untuk menambah atau menambahkan teks pada input.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

digabungkan

Gunakan kedua-dua kelas dan dua contoh .add-onuntuk menambah dan menambah input.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Butang dan bukannya teks

Daripada a <span>dengan teks, gunakan a .btnuntuk melampirkan butang (atau dua) pada input.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Pergi! </butang>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Cari </button>  
  4.   <button class = "btn" type = "button" > Pilihan </button>  
  5. </div>

Butang lungsur turun

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Tindakan
  6.       <span class = "caret" ></span> 
  7.     </butang>
  8.     <ul class = "menu lungsur" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Tindakan
  5.       <span class = "caret" ></span> 
  6.     </butang>
  7.     <ul class = "menu lungsur" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Tindakan
  5.       <span class = "caret" ></span> 
  6.     </butang>
  7.     <ul class = "menu lungsur" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Tindakan
  15.       <span class = "caret" ></span> 
  16.     </butang>
  17.     <ul class = "menu lungsur" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Kumpulan lungsur turun dibahagikan

  1. <borang>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < jenis input = "teks" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < jenis input = "teks" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Borang carian

  1. <form class = "carian borang" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Cari </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Cari </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Kawalan saiz

Gunakan kelas saiz relatif seperti .input-largeatau padankan input anda dengan saiz lajur grid menggunakan .span*kelas.

Input tahap blok

Jadikan mana -mana <input>atau <textarea>elemen berkelakuan seperti elemen tahap blok.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Saiz relatif

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Angkat kepala!Dalam versi akan datang, kami akan mengubah penggunaan kelas input relatif ini untuk memadankan saiz butang kami. Sebagai contoh, .input-largeakan meningkatkan padding dan saiz fon input.

Saiz grid

Gunakan .span1untuk .span12untuk input yang sepadan dengan saiz lajur grid yang sama.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Untuk berbilang input grid setiap baris, gunakan .controls-rowkelas pengubah suai untuk jarak yang betul . Ia mengapungkan input untuk meruntuhkan ruang putih, menetapkan jidar yang betul dan mengosongkan apungan.

  1. <div class = "kawalan" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Input yang tidak boleh diedit

Persembahkan data dalam bentuk yang tidak boleh diedit tanpa menggunakan penanda borang sebenar.

Beberapa nilai di sini 
  1. <span class = "input-xlarge uneditable-input" > Beberapa nilai di sini </span>

Membentuk tindakan

Tamatkan borang dengan sekumpulan tindakan (butang). Apabila diletakkan dalam .form-actions, butang akan secara automatik inden untuk selaras dengan kawalan borang.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Simpan perubahan </button>  
  3.   <button type = "button" class = "btn" > Batal </button>  
  4. </div>

Teks bantuan

Sokongan peringkat sebaris dan blok untuk teks bantuan yang muncul di sekitar kawalan borang.

Bantuan sebaris

Teks bantuan sebaris 
  1. < jenis input = "teks" ><span class = "help-inline" > Teks bantuan sebaris </span>

Sekat bantuan

Blok teks bantuan yang lebih panjang yang terputus ke baris baharu dan mungkin melepasi satu baris. 
  1. <input type = "text" ><span class = "help-block" > Blok teks bantuan yang lebih panjang yang terputus ke baris baharu dan mungkin melepasi satu baris. </span>

Keadaan kawalan bentuk

Berikan maklum balas kepada pengguna atau pelawat dengan keadaan maklum balas asas tentang kawalan dan label borang.

Fokus input

Kami mengalih keluar gaya lalai outlinepada beberapa kawalan borang dan menggunakan a box-shadowsebagai gantinya untuk :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ini difokuskan..." >

Input tidak sah

Input gaya melalui fungsi penyemak imbas lalai dengan :invalid. Tentukan a type, tambahkan requiredatribut jika medan itu bukan pilihan dan (jika berkenaan) nyatakan a pattern.

Ini tidak tersedia dalam versi Internet Explorer 7-9 kerana kekurangan sokongan untuk pemilih pseudo CSS.

  1. <input class = "span3" type = "email" diperlukan >

Input dilumpuhkan

Tambahkan disabledatribut pada input untuk menghalang input pengguna dan mencetuskan rupa yang sedikit berbeza.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Input dilumpuhkan di sini..." dilumpuhkan >

Negeri pengesahan

Bootstrap termasuk gaya pengesahan untuk ralat, amaran, maklumat dan mesej kejayaan. Untuk menggunakan, tambahkan kelas yang sesuai pada persekitaran .control-group.

Mungkin ada yang tidak kena
Sila betulkan kesilapan
Nama pengguna diambil
Woohoo! 
  1. <div class = "amaran kumpulan kawalan" > 
  2.   <label class = "control-label" for = "inputWarning" > Input dengan amaran </label>  
  3.   <div class = "kawalan" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Sesuatu mungkin telah berlaku </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "ralat kumpulan kawalan" > 
  10.   <label class = "control-label" for = "inputError" > Input dengan ralat </label>  
  11.   <div class = "kawalan" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Sila betulkan ralat </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "maklumat kumpulan kawalan" > 
  18.   <label class = "control-label" for = "inputInfo" > Input dengan maklumat </label>  
  19.   <div class = "kawalan" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Nama pengguna sudah diambil </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kejayaan kumpulan kawalan" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input dengan kejayaan </label>  
  27.   <div class = "kawalan" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Butang

Butang lalai

Gaya butang boleh digunakan pada apa-apa sahaja dengan .btnkelas digunakan. Walau bagaimanapun, lazimnya anda perlu menggunakan ini hanya pada elemen <a>dan untuk pemaparan terbaik.<button>

Butang kelas="" Penerangan
btn Butang kelabu standard dengan kecerunan
btn btn-primary Memberi berat visual tambahan dan mengenal pasti tindakan utama dalam satu set butang
btn btn-info Digunakan sebagai alternatif kepada gaya lalai
btn btn-success Menunjukkan tindakan yang berjaya atau positif
btn btn-warning Menunjukkan berhati-hati harus diambil dengan tindakan ini
btn btn-danger Menunjukkan tindakan berbahaya atau berpotensi negatif
btn btn-inverse Butang kelabu gelap ganti, tidak terikat pada tindakan atau penggunaan semantik
btn btn-link Kurangkan penekanan butang dengan menjadikannya kelihatan seperti pautan sambil mengekalkan tingkah laku butang

Keserasian silang pelayar

IE9 tidak memangkas kecerunan latar belakang pada sudut bulat, jadi kami mengalih keluarnya. Berkaitan, IE9 menghapuskan buttonelemen yang dilumpuhkan, menjadikan teks berwarna kelabu dengan bayangan teks yang jahat yang tidak dapat kami betulkan.

Saiz butang

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Butang besar </button>  
  3.   <button class = "btn btn-large" type = "button" > Butang besar </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Butang lalai </button>  
  7.   <button class = "btn" type = "button" > Butang lalai </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Butang kecil </button>  
  11.   <button class = "btn btn-small" type = "button" > Butang kecil </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Butang mini </button>  
  15.   <button class = "btn btn-mini" type = "button" > Butang mini </button>  
  16. </p>

Buat butang tahap blok—yang menjangkau lebar penuh ibu bapa— dengan menambahkan .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Block level button </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Block level button </button>

Keadaan kurang upaya

Jadikan butang kelihatan tidak boleh diklik dengan memudarkannya kembali 50%.

Elemen sauh

Tambahkan .disabledkelas pada <a>butang.

Pautan utama Pautan 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Pautan utama </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Pautan </a>

Angkat kepala!Kami gunakan .disabledsebagai kelas utiliti di sini, serupa dengan .activekelas biasa, jadi tiada awalan diperlukan. Selain itu, kelas ini hanya untuk estetik; anda mesti menggunakan JavaScript tersuai untuk melumpuhkan pautan di sini.

Elemen butang

Tambahkan disabledatribut pada <button>butang.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Butang utama </button>   
  2. <button type = "button" class = "btn btn-large" disabled > Button </button>

Satu kelas, berbilang tag

Gunakan .btnkelas pada <a>, <button>, atau <input>elemen.

Pautan 
  1. <a class = "btn" href = "" > Pautan </a>  
  2. <button class = "btn" type = "submit" > Button </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Sebagai amalan terbaik, cuba padankan elemen untuk konteks anda untuk memastikan pemadanan merentas pelayar. Jika anda mempunyai input, gunakan <input type="submit">butang untuk anda.

Imej

Tambahkan kelas pada <img>elemen untuk menggayakan imej dengan mudah dalam mana-mana projek.

140x140 140x140 140x140 
  1. <img src = "..." kelas = "img-bulat" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." kelas = "img-polaroid" >

Angkat kepala! .img-roundeddan .img-circletidak berfungsi dalam IE7-8 kerana kekurangan border-radiussokongan.

Ikon oleh Glyphicons

Ikon glyph

140 ikon dalam bentuk sprite, tersedia dalam kelabu gelap (lalai) dan putih, disediakan oleh Glyphicons .

  • kaca ikon
  • ikon-muzik
  • carian ikon
  • sampul surat ikon
  • ikon-hati
  • bintang ikon
  • ikon-bintang-kosong
  • pengguna ikon
  • filem ikon
  • ikon-ke-besar
  • ikon ke-
  • senarai-ikon
  • ikon-ok
  • ikon-buang
  • ikon-zum-masuk
  • ikon-zum-keluar
  • ikon dimatikan
  • isyarat ikon
  • ikon-cog
  • ikon-sampah
  • ikon-rumah
  • fail ikon
  • masa ikon
  • jalan ikon
  • ikon-muat turun-alt
  • muat turun ikon
  • muat naik ikon
  • ikon-peti masuk
  • ikon-main-bulatan
  • ikon-ulang
  • ikon-refresh
  • ikon-senarai-alt
  • kunci ikon
  • bendera ikon
  • fon kepala ikon
  • ikon-volume-mati
  • ikon-volume-turun
  • ikon-volume-up
  • icon-qrcode
  • ikon-kod bar
  • teg ikon
  • tag ikon
  • buku ikon
  • penanda buku ikon
  • cetak ikon
  • ikon-kamera
  • fon ikon
  • ikon-tebal
  • ikon-italic
  • ikon-teks-tinggi
  • ikon-teks-lebar
  • ikon-jajar-kiri
  • ikon-selaraskan-pusat
  • ikon-selaraskan-kanan
  • icon-align-justify
  • senarai ikon
  • ikon-inden-kiri
  • ikon-inden-kanan
  • ikon-facetime-video
  • ikon-gambar
  • ikon-pensel
  • ikon-peta-penanda
  • ikon-laraskan
  • warna ikon
  • ikon-edit
  • kongsi ikon
  • semak ikon
  • ikon-gerak
  • ikon-langkah-undur
  • ikon-cepat-undur
  • ikon ke belakang
  • permainan ikon
  • ikon-jeda
  • ikon-berhenti
  • ikon-ke hadapan
  • ikon-fast-forward
  • ikon-langkah-ke hadapan
  • ikon-eject
  • ikon-chevron-kiri
  • ikon-chevron-kanan
  • ikon-tambah-tanda
  • ikon-tolak-tanda
  • ikon-buang-tanda
  • ikon-ok-tanda
  • ikon-tanda-soalan
  • ikon-info-tanda
  • tangkapan skrin ikon
  • ikon-buang-bulatan
  • ikon-ok-bulatan
  • bulatan-larangan ikon
  • ikon-anak panah-kiri
  • ikon-anak panah-kanan
  • ikon-anak panah ke atas
  • ikon-anak panah-bawah
  • ikon-kongsi-alt
  • ikon-saiz-penuh
  • ikon-saiz-kecil
  • ikon-tambah
  • ikon-tolak
  • ikon-asterisk
  • ikon-tanda-seru
  • hadiah ikon
  • daun ikon
  • ikon-api
  • ikon-terbuka-mata
  • ikon-tutup-mata
  • ikon-tanda-amaran
  • pesawat ikon
  • ikon-kalendar
  • ikon-rawak
  • ikon-komen
  • ikon-magnet
  • ikon-chevron-up
  • ikon-chevron-down
  • ikon-tweet semula
  • ikon-keranjang-belanja
  • ikon-folder-tutup
  • ikon-folder-buka
  • ikon-saiz-menegak
  • ikon-ubah saiz-mendatar
  • ikon-hdd
  • ikon-bullhorn
  • loceng ikon
  • sijil ikon
  • ikon-ibu jari
  • ikon-ibu jari ke bawah
  • ikon-tangan-kanan
  • ikon-tangan-kiri
  • tangan-ikon
  • ikon-tangan-turun
  • ikon-bulatan-anak panah-kanan
  • ikon-bulatan-anak panah-kiri
  • ikon-bulatan-anak panah atas
  • ikon-bulatan-anak panah-bawah
  • ikon-glob
  • sepana ikon
  • ikon-tugas
  • penapis ikon
  • beg bimbit ikon
  • ikon-skrin penuh

Atribusi Glyphicons

Glyphicons Halflings biasanya tidak tersedia secara percuma, tetapi pengaturan antara Bootstrap dan pencipta Glyphicons telah membolehkan anda melakukannya tanpa sebarang kos kepada anda sebagai pembangun. Sebagai ucapan terima kasih, kami meminta anda memasukkan pautan pilihan kembali ke Glyphicons apabila praktikal.

Bagaimana nak guna

Semua ikon memerlukan <i>teg dengan kelas unik, diawali dengan icon-. Untuk menggunakan, letakkan kod berikut di mana-mana sahaja:

  1. <i class = "icon-search" ></i>

Terdapat juga gaya yang tersedia untuk ikon terbalik (putih), yang disediakan dengan satu kelas tambahan. Kami akan menguatkuasakan kelas ini secara khusus pada keadaan tuding dan aktif untuk pautan nav dan lungsur turun.

  1. <i class = "icon-search icon-white" ></i>

Angkat kepala!Apabila menggunakan di sebelah rentetan teks, seperti dalam butang atau pautan navigasi, pastikan anda meninggalkan ruang selepas <i>teg untuk jarak yang betul.

Contoh ikon

Gunakannya dalam butang, kumpulan butang untuk bar alat, navigasi atau input borang yang diprapendi.

Butang

Kumpulan butang dalam bar alat butang
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Jatuh turun dalam kumpulan butang
pengguna 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Pengguna </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "menu lungsur" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Padam </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Larangan </a></li>  
  8.     <li class = "pembahagi" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Jadikan pentadbir </a></li>  
  10.   </ul>
  11. </div>
Saiz butang
Bintang Bintang Bintang 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Navigasi

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Perpustakaan </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikasi </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Lain -lain </a></li>  
  6. </ul>

Medan borang

  1. <div class = "kumpulan kawalan" > 
  2.   <label class = "control-label" for = "inputIcon" > Alamat e-mel </label>  
  3.   <div class = "kawalan" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>