Bootstrap

Dasar CSS

Elemen HTML dhasar ditata lan ditambah karo kelas sing bisa diperluas.

Tipografi

Judhul

Kabeh judhul HTML, <h1>liwat <h6>kasedhiya.

h1. Heading 1

h2. Heading 2

h3. Judul 3

h4. Judul 4

h5. Judul 5
h6. Judul 6

Salinan awak

Standar global Bootstrap font-sizeyaiku 14px , kanthi line-heightukuran 20px . Iki ditrapake kanggo <body>lan kabeh paragraf. Kajaba iku, <p>(paragraf) nampa wates ngisor setengah dhuwur garis (10px minangka standar).

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

Cum sociis natoque penatibus and 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 lungguh amet non magna. Donec id elit non mi porta gravida lan eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Timbal awak salinan

Gawea paragraf kanthi nambahake .lead.

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

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

Dibangun karo Kurang

Skala tipografi adhedhasar rong variabel KURANG ing variabel.kurang : @baseFontSizelan @baseLineHeight. Sing pertama yaiku ukuran font dhasar sing digunakake ing saindenging lan sing nomer loro yaiku dhuwur garis dhasar. Kita nggunakake variabel kasebut lan sawetara matematika sing gampang kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane. Kustomisasi lan adaptasi Bootstrap.

Emphasis

Gunakake tag emphasis standar HTML kanthi gaya entheng.

<small>

Kanggo de-emphasizing inline utawa pamblokiran teks, gunakake tag cilik.

Baris teks iki kudu dianggep minangka cetakan sing apik.

<p> <cilik> Baris teks iki kudu dianggep minangka cetakan sing apik. < /p>cilik>

Kandel

Kanggo nandheske potongan teks kanthi bobot font sing luwih abot.

Cuplikan teks ing ngisor iki diwenehi teks kandel .

<strong> digawe minangka teks kandel </strong>

Miring

Kanggo nandheske cuplikan teks kanthi miring.

Cuplikan teks ing ngisor iki digawe minangka teks miring .

<em> diwenehi teks miring </em>

Kepala munggah!Bebas bae kanggo nggunakake <b>lan <i>ing HTML5. <b>tegese kanggo nyorot tembung utawa frase tanpa menehi wigati tambahan nalika <i>biasane kanggo swara, istilah teknis, lsp.

Kelas emphasis

Nerangake makna liwat werna kanthi sawetara kelas sarana emphasis.

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. Pellentesque ornare sem lacinia quam venenatis.

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

  1. <p class = "muted" > 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. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, some erat porttitor ligula. </p>

Singkatan

Implementasi gaya saka <abbr>unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan karo titleatribut duwe wates ngisor titik cahya lan kursor bantuan ing hover, nyedhiyakake konteks tambahan ing hover.

<abbr>

Kanggo teks sing ditambahi ing hover dawa saka singkatan, kalebu titleatribut.

Singkatan saka tembung atribut yaiku attr .

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

<abbr class="initialism">

Tambah .initialismmenyang singkatan kanggo ukuran font sing rada cilik.

HTML minangka sing paling apik wiwit roti irisan.

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

Alamat

Saiki informasi kontak kanggo leluhur paling cedhak utawa kabeh awak karya.

<address>

Simpen format kanthi mungkasi kabeh baris nganggo <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Jeneng Lengkap
[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 = "Telpon" > P: </abbr> (123) 456-7890 
  6. </alamat>
  7.  
  8. <alamat>
  9.   <strong> Jeneng Lengkap </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </alamat>

Blockquotes

Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan.

Blockquote standar

Bungkus HTML<blockquote> apa wae minangka kutipan. Kanggo kuotasi langsung disaranake a .<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 a ante. </p>
  3. </blockquote>

Pilihan Blockquote

Gaya lan isi owah-owahan kanggo variasi prasaja ing blockquote standar.

Jeneng sumber

Tambah <small>tag kanggo ngenali sumber. Bungkus jeneng karya sumber ing <cite>.

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

Wong sing misuwur ing Judhul Sumber 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <cite> Wong sing misuwur <cite title = "Sumber Judul" > Sumber Judul </cite></small> 
  4. </blockquote>

Tampilan sulih

Gunakake .pull-rightkanggo kutipan blok sing diambang lan didadekake tengen.

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

Wong sing misuwur ing Judhul Sumber 
  1. <blockquote class = "tarik-tengen" > 
  2.   ...
  3. </blockquote>

Dhaptar

Ora ditata

Dhaptar item sing urutan ora penting banget.

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

dhawuh

Dhaptar item sing urutan kasebut pancen penting.

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

Tanpa gaya

Copot bantalan gawan list-stylelan kiwa ing dhaptar item (mung bocah-bocah langsung).

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

Inline

Selehake kabeh item dhaptar ing baris siji karo inline-blocklan sawetara padding cahya.

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

Katrangan

Dhaptar istilah kanthi katrangan sing gegandhengan.

Dhaptar katrangan
Dhaptar deskripsi sampurna kanggo nemtokake istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida lan eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Deskripsi horisontal

Nggawe istilah lan katrangan ing <dl>baris sisih-by-side.

Dhaptar katrangan
Dhaptar deskripsi sampurna kanggo nemtokake istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida lan 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>

Kepala munggah!Dhaptar deskripsi horisontal bakal ngethok istilah sing dawa banget kanggo pas karo koreksi kolom kiwa text-overflow. Ing tampilan sing luwih sempit, dheweke bakal ganti menyang tata letak tumpukan standar.

Kode

Inline

Bungkus potongan kode inline nganggo <code>.

Contone, <section>kudu dibungkus minangka inline. 
  1. Contone , < code><section> </ code > kudu dibungkus dadi inline .

Blok dhasar

Gunakake <pre>kanggo sawetara baris kode. Aja manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat.

<p>Conto teks ing kene...</p>
  1. <pre>
  2.   <p>Conto teks ing kene...</p>
  3. </pre>

Kepala munggah!Pesthekake supaya kode tetep ing <pre>tag sing paling cedhak ing sisih kiwa; iku bakal nerjemahake kabeh tab.

Sampeyan bisa nambah kelas kanthi opsional .pre-scrollablesing bakal nyetel dhuwur maksimal 350px lan menehi scrollbar sumbu-y.

Tabel

Gaya standar

Kanggo gaya dhasar - bantalan entheng lan mung pembagi horisontal - tambahake kelas dasar .tablemenyang sembarang <table>.

# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
  1. < kelas tabel = "tabel" > 
  2.   …
  3. </tabel>

Kelas opsional

Tambah kelas ing ngisor iki menyang kelas .tabledhasar.

.table-striped

Nambahake zebra-striping menyang sembarang baris tabel ing <tbody>liwat :nth-childpamilih CSS (ora kasedhiya ing IE7-IE8).

# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </tabel>

.table-bordered

Tambah wates lan sudhut dibunderaké kanggo meja.

# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
Tandhani Otto @getbootstrap
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </tabel>

.table-hover

Aktifake status hover ing baris tabel ing a <tbody>.

# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </tabel>

.table-condensed

Nggawe tabel luwih kompak kanthi ngethok lapisan sel dadi setengah.

# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </tabel>

Kelas baris opsional

Gunakake kelas kontekstual kanggo warna larik tabel.

kelas Katrangan
.success Nuduhake tumindak sing sukses utawa positif.
.error Nuduhake tumindak mbebayani utawa duweni potensi negatif.
.warning Nuduhake bebaya sing mbutuhake perhatian.
.info Digunakake minangka alternatif kanggo gaya standar.
# produk Pembayaran dijupuk Status
1 TB - Saben wulan 01/04/2012 disetujoni
2 TB - Saben wulan 02/04/2012 ditolak
3 TB - Saben wulan 03/04/2012 Ditunggu
4 TB - Saben wulan 04/04/2012 Telpon kanggo konfirmasi 
  1. ...
  2.   < tr class = "sukses" >
  3.     <td> 1 < /td>
  4.     <td>TB - Saben wulan</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Disetujoni</ td >
  7.   </ tr >
  8. ...

Markup tabel sing didhukung

Dhaptar unsur HTML tabel sing didhukung lan carane kudu digunakake.

Tag Katrangan
<table> Unsur pambungkus kanggo nampilake data ing format tabular
<thead> Unsur wadhah kanggo baris header tabel ( <tr>) kanggo label kolom tabel
<tbody> Unsur wadhah kanggo larik meja ( <tr>) ing awak meja
<tr> Unsur wadhah kanggo sakumpulan sel tabel ( <td>utawa <th>) sing katon ing baris siji
<td> Sel tabel standar
<th> Sel tabel khusus kanggo label kolom (utawa baris, gumantung saka ruang lingkup lan panggonan)
kudu digunakake ing a<thead>
<caption> Katrangan utawa ringkesan apa sing ana ing meja, utamane migunani kanggo maca layar 
  1. <tabel>
  2.   <caption> ... </caption>
  3.   <sirah>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <awak>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tabel>

Formulir

Gaya standar

Kontrol wangun individu nampa gaya, nanging tanpa kelas dhasar sing dibutuhake <form>utawa owah-owahan gedhe ing markup. Asil ing tumpukan, label sejajar kiwa ing ndhuwur kontrol formulir.

Legenda Conto teks bantuan tingkat blok ing kene. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Legenda </legend>
  4.     <label> Jeneng label </label>
  5.     <input type = "text" placeholder = "Ketik soko…" >  
  6.     <span class = "help-block" > Conto teks bantuan tingkat blok ing kene. </span> 
  7.     <label class = "kotak centang" > 
  8.       <input type = "checkbox" > Priksa kula 
  9.     </label>
  10.     <tombol type = "submit" class = "btn" > Kirim </button>  
  11.   </fieldset>
  12. </form>

tata letak opsional

Klebu karo Bootstrap yaiku telung tata letak formulir opsional kanggo kasus panggunaan umum.

Formulir telusuran

Tambah .form-searchmenyang formulir lan .search-querykanggo <input>input teks ekstra-dibunderaké.

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

Formulir inline

Tambah .form-inlinekanggo label kiwa-selaras lan kontrol inline-block kanggo tata letak kompak.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-cilik" placeholder = "Email" >   
  3.   < tipe input = "sandi" class = "input-cilik" placeholder = "Sandhi" >   
  4.   <label class = "kotak centang" > 
  5.     <input type = "kotak centang" > Elingi aku 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Mlebu </button>  
  8. </form>

Bentuk horisontal

Label sejajar tengen lan ngambang ing sisih kiwa supaya katon ing baris sing padha karo kontrol. Mbutuhake pangowahan markup paling akeh saka formulir standar:

  • Tambah .form-horizontaling wangun
  • Bungkus label lan kontrol.control-group
  • Tambah .control-labelmenyang label
  • Lebokake kabeh kontrol sing gegandhengan .controlskanggo keselarasan sing tepat
  1. <form class = "form-horizontal" > 
  2.   <div class = "kontrol-grup" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "kontrol" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrol-grup" > 
  9.     <label class = "control-label" for = "inputPassword" > Sandi </label>  
  10.     <div class = "kontrol" > 
  11.       <input type = "sandi" id = "inputPassword" placeholder = "Sandi" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrol-grup" > 
  15.     <div class = "kontrol" > 
  16.       <label class = "kotak centang" > 
  17.         <input type = "kotak centang" > Elingi aku 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Mlebu </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kontrol formulir sing didhukung

Conto kontrol wangun standar sing didhukung ing conto tata letak formulir.

Input

Kontrol formulir sing paling umum, kolom input basis teks. Kalebu dhukungan kanggo kabeh jinis HTML5: teks, sandi, datetime, datetime-lokal, tanggal, sasi, wektu, minggu, nomer, email, url, telusuran, tel, lan werna.

Mbutuhake nggunakake tartamtu typeing kabeh wektu.

  1. <input type = "text" placeholder = "Input teks" >

Textarea

Kontrol formulir sing ndhukung pirang-pirang baris teks. Ganti rowsatribut yen perlu.

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

Kothak lan radio

Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar nalika radio kanggo milih siji opsi saka akeh.

Default (ditumpuk)


  1. <label class = "kotak centang" > 
  2.   < tipe input = "kotak centhang" nilai = "" >  
  3.   Opsi siji yaiku iki lan iki - manawa sampeyan kudu nyakup kenapa apik banget
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" dicenthang >     
  8.   Opsi siji yaiku iki lan iki - manawa sampeyan kudu nyakup kenapa apik banget
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Opsi loro bisa dadi liya lan milih bakal mbatalake pilihan siji
  13. </label>

Kothak inline

Tambah .inlinekelas menyang seri kothak utawa radio kanggo kontrol katon ing baris sing padha.

  1. <label class = "kotak centang inline" > 
  2.   < tipe input = "kotak centang" id = "inlineCheckbox1" nilai = "pilihan1" > 1   
  3. </label>
  4. <label class = "kotak centang inline" > 
  5.   <masukan < tipe = "kotak centang" id = "inlineCheckbox2" nilai = "pilihan2" > 2  
  6. </label>
  7. <label class = "kotak centang inline" > 
  8.   < tipe input  = "kotak centang" id = "inlineCheckbox3" nilai = "pilihan3" > 3  
  9. </label>

Milih

Gunakake pilihan standar utawa nemtokake a multiple="multiple"kanggo nuduhake sawetara opsi bebarengan.


  1. <pilih>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </pilih>
  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. </pilih>

Ngluwihi kontrol formulir

Nambahake ing ndhuwur kontrol browser sing ana, Bootstrap kalebu komponen wangun migunani liyane.

Input sing wis ditambahake lan ditambahake

Tambah teks utawa tombol sadurunge utawa sawise input adhedhasar teks. Elinga yenselect unsur ora didhukung ing kene.

Pilihan standar

Bungkus an .add-onlan an inputkaro salah siji saka rong kelas kanggo prepend utawa nambah teks menyang input.

@

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

digabungake

Gunakake loro kelas lan rong conto .add-onkanggo prepend lan nambah 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>

Tombol tinimbang teks

Tinimbang a <span>karo teks, nggunakake a .btnmasang tombol (utawa loro) kanggo input.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "teks" >   
  3.   <button class = "btn" type = "button" > Go! </tombol>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "teks" >   
  3.   <button class = "btn" type = "button" > Telusuri </button>  
  4.   <button class = "btn" type = "button" > Pilihan </button>  
  5. </div>

Tombol dropdowns

  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.       Tumindak
  6.       <span class = "caret" ></span> 
  7.     </tombol>
  8.     <ul class = "menu dropdown" > 
  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.       Tumindak
  5.       <span class = "caret" ></span> 
  6.     </tombol>
  7.     <ul class = "menu dropdown" > 
  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.       Tumindak
  5.       <span class = "caret" ></span> 
  6.     </tombol>
  7.     <ul class = "menu dropdown" > 
  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.       Tumindak
  15.       <span class = "caret" ></span> 
  16.     </tombol>
  17.     <ul class = "menu dropdown" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Grup gulung mudhun sing dipérang

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

Formulir telusuran

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

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Block level inputs

Make any <input> or <textarea> element behave like a block level element.

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

Relative sizing

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

Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

  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>

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.

  1. <div class="controls">
  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. ...

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here 
  1. <span class="input-xlarge uneditable-input">Some value here</span>

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

  1. <div class="form-actions">
  2.   <button type="submit" class="btn btn-primary">Save changes</button>
  3.   <button type="button" class="btn">Cancel</button>
  4. </div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help

Inline help text 
  1. <input type="text"><span class="help-inline">Inline help text</span>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line. 
  1. <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

  1. <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

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

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

  1. <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Something may have gone wrong
Please correct the error
Username is taken
Woohoo! 
  1. <div class="control-group warning">
  2.   <label class="control-label" for="inputWarning">Input with warning</label>
  3.   <div class="controls">
  4.     <input type="text" id="inputWarning">
  5.     <span class="help-inline">Something may have gone wrong</span>
  6.   </div>
  7. </div>
  8. <div class="control-group error">
  9.   <label class="control-label" for="inputError">Input with error</label>
  10.   <div class="controls">
  11.     <input type="text" id="inputError">
  12.     <span class="help-inline">Please correct the error</span>
  13.   </div>
  14. </div>
  15. <div class="control-group success">
  16.   <label class="control-label" for="inputSuccess">Input with success</label>
  17.   <div class="controls">
  18.     <input type="text" id="inputSuccess">
  19.     <span class="help-inline">Woohoo!</span>
  20.   </div>
  21. </div>

Buttons

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

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

Create block level buttons—those that span the full width of a parent— by adding .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>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

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

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
  1. <a class="btn" href="">Link</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">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Images

Add classes to an <img> element to easily style images in any project.

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

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icons by Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

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

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
  1. <div class="btn-toolbar">
  2.   <div class="btn-group">
  3.  
  4.     <a class="btn" href="#"><i class="icon-align-left"></i></a>
  5.     <a class="btn" href="#"><i class="icon-align-center"></i></a>
  6.     <a class="btn" href="#"><i class="icon-align-right"></i></a>
  7.     <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  8.   </div>
  9. </div>
Dropdown in a button group
User 
  1. <div class="btn-group">
  2.   <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  3.   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4.   <ul class="dropdown-menu">
  5.     <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  6.     <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  7.     <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8.     <li class="divider"></li>
  9.     <li><a href="#"><i class="i"></i> Make admin</a></li>
  10.   </ul>
  11. </div>
Button sizes
Star Star Star 
  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>

Navigation

  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> Library</a></li>
  4.   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5.   <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  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>