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.

<p class = "text-left" > Teks dijajar ke kiri. </p> 
<p class = "text-center" > Teks sejajar tengah. </p> 
<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.

<p class = "redam" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Hiasan pellentesque sem lacinia quam venenatis. </p> 
<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]

<alamat>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
</alamat>
 
<alamat>
  <strong> Nama Penuh </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</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.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
</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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  <small> Seseorang yang terkenal <cite title = "Source Title" > Source Title </cite></small> 
</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

<blockquote class = "tarik-kanan" > 
  ...
</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

<ul>
  <li> ... </li>
</ul>

Mengarahkan

Senarai item yang susunannya 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
Faucibus porta lacus fringilla vel
Aenean duduk amet erat nunc
Eget porttitor lorem

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

<ul class = "tidak digayakan" > 
  <li> ... </li>
</ul>

Dalam barisan

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "sebaris" > 
  <li> ... </li>
</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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</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.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</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.

Dalam barisan

Balut coretan sebaris kod dengan <code>.

Sebagai contoh, <section>hendaklah dibalut sebagai sebaris.

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>

<pra>
  <p>Contoh teks di sini...</p>
</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.

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

<table class = "jadual" > 
  …
</ 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

<table class = "jalur meja meja" > 
  …
</ jadual>

`.table-bordered`

Tambahkan jidar dan bucu bulat pada jadual.

#	Nama pertama	Nama terakhir	Nama pengguna
1	Tandakan	Otto	@mdo
1	Tandakan	Otto	@getbootstrap
2	Yakub	Thornton	@gemuk
3	Larry the Bird		@twitter

<table class = "table table-bordered" > 
  …
</ 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

<table class = "table table-hover" > 
  …
</ 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

<table class = "table table-condensed" > 
  …
</ 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	Hubungi masuk untuk mengesahkan

...
  < tr class = "berjaya" >
    <td> 1 < /td>
    <td>TB - Bulanan</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Diluluskan</ td >
  </ tr >
...

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

<jadual>
  <caption> ... </caption>
  <kepala>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </head>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</ jadual>

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.

<borang>
  <fieldset>
    <legend> Legend </legend>
    <label> Nama label </label>
    < jenis input = "teks" pemegang tempat = "Taip sesuatu…" >  
    <span class = "help-block" > Contoh teks bantuan peringkat blok di sini. </span> 
    <label class = "kotak semak" > 
      < jenis input = "kotak semak" > Semak saya keluar 
    </label>
    <button type = "submit" class = "btn" > Submit </button>  
  </fieldset>
</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.

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

Borang sebaris

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

<form class = "form-inline" > 
  < jenis input = "teks" class = "input-small" pemegang tempat = "E-mel" >   
  < jenis input = "kata laluan" kelas = "input-kecil" pemegang tempat = "Kata Laluan" >   
  <label class = "kotak semak" > 
    < jenis input = "kotak semak" > Ingat saya 
  </label>
  <button type = "submit" class = "btn" > Log masuk </button>  
</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

<form class = "form-horizontal" > 
  <div class = "kumpulan kawalan" > 
    <label class = "control-label" for = "inputEmail" > E- mel </label>  
    <div class = "kawalan" > 
      < jenis input = "teks" id = "inputEmail" pemegang tempat = "E-mel" >   
    </div>
  </div>
  <div class = "kumpulan kawalan" > 
    <label class = "control-label" for = "inputPassword" > Kata laluan </label>  
    <div class = "kawalan" > 
      < jenis input = "kata laluan" id = "inputPassword" pemegang tempat = "Kata Laluan" >   
    </div>
  </div>
  <div class = "kumpulan kawalan" > 
    <div class = "kawalan" > 
      <label class = "kotak semak" > 
        < jenis input = "kotak semak" > Ingat saya 
      </label>
      <button type = "submit" class = "btn" > Log masuk </button>  
    </div>
  </div>
</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.

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

Textarea

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

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

<label class = "kotak semak" > 
  < jenis input = "kotak semak" nilai = "" >  
  Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" diperiksa >     
  Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Pilihan dua boleh menjadi sesuatu yang lain dan memilihnya akan menyahpilih pilihan satu
</label>

Kotak semak sebaris

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

<label class = "kotak semak sebaris" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "kotak semak sebaris" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "kotak semak sebaris" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Memilih

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

<pilih>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</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.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

digabungkan

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

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

Butang dan bukannya teks

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

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > Pergi! </butang>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Cari </button>  
  <button class = "btn" type = "button" > Pilihan </button>  
</div>

Butang lungsur turun

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Tindakan
      <span class = "caret" ></span> 
    </butang>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Tindakan
      <span class = "caret" ></span> 
    </butang>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Tindakan
      <span class = "caret" ></span> 
    </butang>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Tindakan
      <span class = "caret" ></span> 
    </butang>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </div>
</div>

Kumpulan lungsur turun dibahagikan

<borang>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < jenis input = "teks" > 
  </div>
  <div class = "input-append" > 
    < jenis input = "teks" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Borang carian

<form class = "carian borang" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Cari </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Cari </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Kawalan saiz

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

Input tahap blok

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

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

Saiz relatif

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<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.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</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.

<div class = "kawalan" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Input yang tidak boleh diedit

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

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

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Simpan perubahan </button>  
  <button type = "button" class = "btn" > Batal </button>  
</div>

Teks bantuan

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

Bantuan sebaris

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

Sekat bantuan

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

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

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

Input dilumpuhkan

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

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

<div class = "amaran kumpulan kawalan" > 
  <label class = "control-label" for = "inputWarning" > Input dengan amaran </label>  
  <div class = "kawalan" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Sesuatu mungkin telah berlaku </span> 
  </div>
</div>
 
<div class = "ralat kumpulan kawalan" > 
  <label class = "control-label" for = "inputError" > Input dengan ralat </label>  
  <div class = "kawalan" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Sila betulkan ralat </span> 
  </div>
</div>
 
<div class = "maklumat kumpulan kawalan" > 
  <label class = "control-label" for = "inputInfo" > Input dengan maklumat </label>  
  <div class = "kawalan" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Nama pengguna sudah diambil </span> 
  </div>
</div>
 
<div class = "kejayaan kumpulan kawalan" > 
  <label class = "control-label" for = "inputSuccess" > Input dengan kejayaan </label>  
  <div class = "kawalan" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

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 penyemak imbas silang

IE9 tidak memangkas kecerunan latar belakang pada sudut bulat, jadi kami mengalih keluarnya. Berkaitan, jankifies IE9 dilumpuhkanbutton unsur-unsur yang dilumpuhkan, menjadikan teks berwarna kelabu dengan bayangan teks 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.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Butang besar </button>  
  <button class = "btn btn-large" type = "button" > Butang besar </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Butang lalai </button>  
  <button class = "btn" type = "button" > Butang lalai </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Butang kecil </button>  
  <button class = "btn btn-small" type = "button" > Butang kecil </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Butang mini </button>  
  <button class = "btn btn-mini" type = "button" > Butang mini </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "button" > Block level button </button>  
<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

<a href = "#" class = "btn btn-large btn-primary disabled" > Pautan utama </a>  
<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.

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

Satu kelas, berbilang tag

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

<a class = "btn" href = "" > Pautan </a>  
<button class = "btn" type = "submit" > Button </button>  
<input class = "btn" type = "button" value = "Input" >   
<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.

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

<img src = "..." kelas = "img-bulat" >  
<img src = "..." class = "img-circle" >  
<img src = "..." kelas = "img-polaroid" >

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

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:

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

<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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Jatuh turun dalam kumpulan butang

pengguna

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Pengguna </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "menu lungsur" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Padam </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Larangan </a></li>  
    <li class = "pembahagi" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Jadikan pentadbir </a></li>  
  </ul>
</div>

Saiz butang

Bintang Bintang Bintang

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Navigasi

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Perpustakaan </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikasi </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Lain -lain </a></li>  
</ul>

Medan borang

<div class = "kumpulan kawalan" > 
  <label class = "control-label" for = "inputIcon" > Alamat e-mel </label>  
  <div class = "kawalan" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Tipografi

Tajuk

h1. Tajuk 1

h2. Tajuk 2

h3. Tajuk 3

h4. Tajuk 4

h5. Tajuk 5

h6. Tajuk 6

Salinan badan

Salinan badan utama

Dibina dengan Kurang

Penekanan

<small>

berani

Italic

Kelas penjajaran

Kelas penekanan

Singkatan

<abbr>

<abbr class="initialism">

Alamat

<address>

Sekat petikan

Petikan blok lalai

Pilihan blockquote

Menamakan sumber

Paparan ganti

Senarai

Tidak tertib

Mengarahkan

Tidak bergaya

Dalam barisan

Penerangan

Penerangan mendatar

Kod

Dalam barisan

Blok asas

Meja

Gaya lalai

Kelas pilihan

.table-striped

.table-bordered

.table-hover

.table-condensed

Kelas baris pilihan

Penanda jadual yang disokong

Borang

Gaya lalai

Susun atur pilihan

Borang carian

Borang sebaris

Bentuk mendatar

Kawalan borang yang disokong

Input

Textarea

Kotak semak dan radio

Lalai (bertindan)

Kotak semak sebaris

Memilih

Memperluas kawalan borang

Input yang didahulukan dan ditambah

Pilihan lalai

digabungkan

Butang dan bukannya teks

Butang lungsur turun

Kumpulan lungsur turun dibahagikan

Borang carian

Kawalan saiz

Input tahap blok

Saiz relatif

Saiz grid

Input yang tidak boleh diedit

Membentuk tindakan

Teks bantuan

Bantuan sebaris

Sekat bantuan

Keadaan kawalan bentuk

Fokus input

Input tidak sah

Input dilumpuhkan

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`