Bootstrap

Dasar CSS

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

Kepala munggah! Dokumen iki kanggo v2.3.2, sing ora didhukung kanthi resmi. Priksa versi paling anyar saka Bootstrap!

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

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 diterjemahake 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 Alignment

Gampang nyelarasake teks menyang komponen kanthi kelas keselarasan teks.

Teks sejajar kiwa.

Teks selaras tengah.

Teks sejajar tengen.

  1. <p class = "text-left" > Teks rata kiri. </p> 
  2. <p class = "text-center" > Teks selaras tengah. </p> 
  3. <p class = "text-right" > Teks rata kanan. </p>

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

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

Wong sing misuwur ing Judhul Sumber 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat 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 a ante.

Wong sing misuwur ing Judhul Sumber 
  1. <blockquote class = "tarik-kanan" > 
  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 , < kode> & lt ; bagean & gt ;</ code > kudu kebungkus minangka 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-8).

# 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 Manuk @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 Manuk @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 Manuk @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).
<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.   <tiyang>
  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.     <button type = "submit" class = "btn" > Submit </button>  
  11.   </fieldset>
  12. </form>

tata letak opsional

Klebu karo Bootstrap ana telung tata letak wangun 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 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.   < tipe input = "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 yen selectunsur 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" > Telusuri </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Telusuri </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Kontrol ukuran

Gunakake kelas ukuran relatif kaya .input-largeutawa cocog input sampeyan menyang ukuran kolom kothak nggunakake .span*kelas.

Input tingkat blok

Nggawe samubarang <input>utawa <textarea>unsur tumindak kaya unsur tingkat blok.

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

Ukuran relatif

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-cilik" tipe = "teks" placeholder = ".input-cilik" >   
  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" >

Kepala munggah!Ing versi sabanjure, kita bakal ngganti panggunaan kelas input relatif iki supaya cocog karo ukuran tombol. Contone, .input-largebakal nambah padding lan font-ukuran input.

Ukuran grid

Gunakake .span1kanggo .span12input sing cocog karo ukuran kolom kothak.

  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. <pilih kelas = "span1" > 
  5.   ...
  6. </pilih>
  7. <pilih kelas = "span2" > 
  8.   ...
  9. </pilih>
  10. <pilih kelas = "span3" > 
  11.   ...
  12. </pilih>

Kanggo sawetara input kothak saben baris, gunakake .controls-rowkelas modifier kanggo spasi sing tepat . Ngambang input kanggo ambruk spasi putih, nyetel wates sing tepat, lan mbusak float.

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

Input sing ora bisa diowahi

Tampilake data ing formulir sing ora bisa diowahi tanpa nggunakake markup formulir sing nyata.

Sawetara nilai kene 
  1. <span class = "input-xlarge uneditable-input" > Sawetara nilai ing kene </span>

Tumindak wangun

Mungkasi formulir kanthi klompok tumindak (tombol). Nalika diselehake ing a .form-actions, tombol bakal kanthi otomatis indent kanggo baris munggah karo kontrol wangun.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Simpen owah-owahan </button>  
  3.   <tombol type = "tombol" class = "btn" > Batal </tombol>  
  4. </div>

Teks bantuan

Dhukungan level inline lan blok kanggo teks pitulung sing katon ing kontrol formulir.

Bantuan inline

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

Blok bantuan

Blok teks bantuan sing luwih dawa sing bisa dadi baris anyar lan bisa ngluwihi siji baris. 
  1. <input type = "text" ><span class = "help-block" > Blok teks bantuan sing luwih dawa sing pecah menyang baris anyar lan bisa ngluwihi siji baris. </span>

Formulir kontrol negara

Nyedhiyani umpan balik kanggo pangguna utawa pengunjung kanthi kahanan umpan balik dhasar babagan kontrol lan label formulir.

Fokus input

Kita mbusak gaya gawan outlineing sawetara kontrol wangun lan aplikasi box-shadowing panggonan kanggo :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Iki fokus..." >

Input ora sah

Input gaya liwat fungsi browser standar kanthi :invalid. Nemtokake a type, nambah requiredatribut yen kolom ora opsional, lan (yen ana) nemtokake a pattern.

Iki ora kasedhiya ing versi Internet Explorer 7-9 amarga kurang dhukungan kanggo pamilih pseudo CSS.

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

Input dipatèni

Tambah disabledatribut ing input kanggo nyegah input pangguna lan micu tampilan sing rada beda.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Input dipateni ing kene..." dipateni >

Negara validasi

Bootstrap kalebu gaya validasi kanggo pesen kesalahan, peringatan, info, lan sukses. Kanggo nggunakake, nambah kelas cocok kanggo lingkungan .control-group.

Ana sing salah
Mangga mbenerake kesalahan
Jeneng pangguna dijupuk
Woohoo! 
  1. <div class = "peringatan kelompok kontrol" > 
  2.   <label class = "control-label" for = "inputWarning" > Input kanthi bebaya </label>  
  3.   <div class = "kontrol" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Ana sing salah </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kesalahan grup kontrol" > 
  10.   <label class = "control-label" for = "inputError" > Input kanthi kesalahan </label>  
  11.   <div class = "kontrol" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Mangga koreksi kesalahan </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "informasi grup kontrol" > 
  18.   <label class = "control-label" for = "inputInfo" > Input karo info </label>  
  19.   <div class = "kontrol" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Jeneng panganggo wis dijupuk </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrol-grup sukses" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input kanthi sukses </label>  
  27.   <div class = "kontrol" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Tombol

Tombol standar

Gaya tombol bisa ditrapake kanggo apa .btnwae sing ditrapake ing kelas. Nanging, biasane sampeyan pengin aplikasi iki mung <a>lan <button>unsur kanggo rendering paling apik.

Tombol kelas="" Katrangan
btn Tombol werna abu-abu standar kanthi gradien
btn btn-primary Nyedhiyakake bobot visual ekstra lan ngenali tumindak utama ing sakumpulan tombol
btn btn-info Digunakake minangka alternatif kanggo gaya standar
btn btn-success Nuduhake tumindak sing sukses utawa positif
btn btn-warning Nuduhake ati-ati kudu dijupuk karo tumindak iki
btn btn-danger Nuduhake tumindak mbebayani utawa duweni potensi negatif
btn btn-inverse Tombol abu-abu peteng sulih, ora kaiket karo tumindak utawa panggunaan semantik
btn btn-link Deemphasize tombol kanthi nggawe katon kaya link nalika njaga prilaku tombol

Kompatibilitas lintas browser

IE9 ora ngethok gradien latar mburi ing sudhut sing dibunderaké, mula kita nyopot. Related, IE9 jankifies buttonunsur dipatèni, Rendering teks werna abu-abu karo awon teks-bayangan sing ora bisa ndandani.

Ukuran tombol

Apik tombol luwih gedhe utawa luwih cilik? Tambah .btn-large, .btn-small, utawa .btn-minikanggo ukuran tambahan.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Tombol gedhe </button>  
  3.   <button class = "btn btn-large" type = "button" > Tombol gedhe </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Tombol standar </button>  
  7.   <button class = "btn" type = "button" > Tombol standar </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-cilik btn-primary" type = "tombol" > Tombol cilik </tombol>  
  11.   <button class = "btn btn-cilik" type = "tombol" > Tombol cilik </tombol>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Tombol mini </button>  
  15.   <button class = "btn btn-mini" type = "button" > Tombol Mini </button>  
  16. </p>

Nggawe tombol tingkat pemblokiran-sing ukurane jembare wong tuwa- kanthi nambahake .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blok level tombol </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Tombol level blok </button>

negara dipatèni

Nggawe tombol katon ora bisa diklik kanthi ngilangi 50%.

Unsur jangkar

Tambah .disabledkelas kanggo <a>tombol.

pranala utami Link 

  1. <a href = "#" class = "btn btn-gedhe btn-utama dipatèni" > Tautan utama </a>  
  2. <a href = "#" class = "btn btn-gedhe dipatèni" > Link </a>

Kepala munggah!Kita digunakake .disabledminangka kelas sarana ing kene, padha karo .activekelas umum, mula ora perlu prefiks. Uga, kelas iki mung kanggo estetika; sampeyan kudu nggunakake JavaScript khusus kanggo mateni pranala ing kene.

Elemen tombol

Tambah disabledatribut menyang <button>tombol.

  1. < tipe tombol = "tombol" class = "btn btn-gedhe btn-utama dipatèni" disabled = "dipatèni" > Tombol utama </tombol>   
  2. < tipe tombol = "tombol" class = "btn btn-gedhe" dipateni > Tombol </tombol>

Siji kelas, pirang-pirang tag

Gunakake .btnkelas ing <a>, <button>, utawa <input>unsur.

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

Minangka laku paling apik, nyoba kanggo cocog unsur kanggo konteks kanggo mesthekake cocog cross-browser rendering. Yen sampeyan duwe input, gunakake <input type="submit">tombol kanggo sampeyan.

Gambar

Tambah kelas menyang <img>unsur supaya gambar gampang gaya ing proyek apa wae.

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

Kepala munggah! .img-roundedlan .img-circleora bisa ing IE7-8 amarga lack of border-radiussupport.

Ikon dening Glyphicons

Ikon glyphs

140 lambang ing wangun sprite, kasedhiya ing werna abu-abu peteng (standar) lan putih, diwenehake dening Glyphicons .

  • ikon-kaca
  • lambang-musik
  • lambang-search
  • lambang-amplop
  • lambang-ati
  • lambang-lintang
  • lambang-lintang-kosong
  • lambang-user
  • ikon-film
  • lambang-th-gedhe
  • lambang-th
  • lambang-th-daftar
  • lambang-ok
  • lambang-mbusak
  • lambang-zoom-in
  • lambang-zoom-out
  • lambang mati
  • lambang-sinyal
  • lambang-cog
  • lambang-sampah
  • lambang-omah
  • lambang-file
  • lambang-wektu
  • lambang-dalan
  • lambang-download-alt
  • lambang-download
  • lambang-upload
  • lambang-kotak mlebu
  • lambang-muter-bunder
  • lambang-baleni
  • lambang-refresh
  • lambang-dhaftar-alt
  • lambang-kunci
  • lambang-flag
  • lambang-headphone
  • ikon-volume-mati
  • ikon-volume-mudhun
  • ikon-volume-up
  • lambang-qrcode
  • lambang-barcode
  • lambang-tag
  • lambang-tag
  • buku lambang
  • lambang-tetenger
  • lambang-print
  • ikon-kamera
  • lambang-font
  • lambang-kandel
  • lambang-miring
  • dhuwur lambang-teks
  • lambang-teks-jembaré
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • lambang-dhaftar
  • icon-indent-kiwa
  • icon-indent-right
  • ikon-facetime-video
  • lambang-gambar
  • lambang-potlot
  • lambang-peta-marker
  • lambang-nyetel
  • lambang-warna
  • lambang-suntingan
  • lambang-nuduhake
  • mriksa lambang
  • lambang-pindhah
  • lambang-langkah-mundur
  • lambang-cepet-mundur
  • lambang-mundur
  • lambang-muter
  • lambang-ngaso
  • lambang-mandeg
  • lambang-maju
  • lambang-cepet-maju
  • lambang-langkah-maju
  • lambang-eject
  • lambang-chevron-kiwa
  • lambang-chevron-tengen
  • lambang-tambah-tandha
  • lambang-minus-tandha
  • lambang-mbusak-tandha
  • lambang-ok-tandha
  • lambang-pitakonan-tandha
  • lambang-info-tandha
  • lambang-screenshot
  • lambang-mbusak-bunder
  • lambang-ok-bunder
  • lambang-ban-bunder
  • lambang-panah-kiwa
  • lambang-panah-tengen
  • lambang-panah-munggah
  • lambang-panah-mudhun
  • icon-share-alt
  • icon-resize-full
  • lambang-ukuran-cilik
  • lambang-plus
  • lambang-minus
  • lambang-asterisk
  • lambang-panguwuh-tandha
  • lambang-hadiah
  • godhong-ikon
  • lambang-geni
  • lambang-mripat-mbukak
  • lambang-mripat-nutup
  • lambang-warning-tandha
  • lambang-pesawat
  • lambang-kalender
  • lambang-acak
  • lambang-komentar
  • lambang-magnet
  • lambang-chevron-up
  • lambang-chevron-mudhun
  • lambang-retweet
  • lambang-shopping-cart
  • lambang-folder-nutup
  • lambang-folder-mbukak
  • ikon-resize-vertikal
  • ikon-resize-horizontal
  • lambang-hdd
  • lambang-bullhorn
  • lonceng lambang
  • lambang-sertifikat
  • ikon-jempol
  • lambang-jempol-mudhun
  • lambang-tangan-tengen
  • lambang-tangan-kiwa
  • icon-hand-up
  • icon-hand-mudhun
  • lambang-bunder-panah-tengen
  • lambang-bunder-panah-kiwa
  • lambang-bunderan-panah-munggah
  • lambang-bunder-panah-mudhun
  • lambang-globe
  • lambang-kunci
  • lambang-tugas
  • saringan lambang
  • lambang-koper
  • lambang-layar wutuh

Atribusi Glyphicons

Glyphicons Halflings biasane ora kasedhiya kanthi gratis, nanging pengaturan antarane Bootstrap lan pencipta Glyphicons wis bisa ditindakake kanthi gratis kanggo sampeyan minangka pangembang. Minangka matur nuwun, dijaluk sampeyan kalebu link opsional bali menyang Glyphicons nalika praktis.

Carane nggunakake

Kabeh lambang mbutuhake <i>tag kanthi kelas unik, sing diawali karo icon-. Kanggo nggunakake, lebokake kode ing ngisor iki ing ngendi wae:

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

Ana uga gaya kasedhiya kanggo lambang kuwalik (putih), digawe siap karo siji kelas ekstra. Kita bakal khusus ngleksanakake kelas iki ing hover lan negara aktif kanggo nav lan gulung mudhun pranala.

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

Kepala munggah!Nalika nggunakake jejere strings teks, kaya ing tombol utawa pranala nav, manawa kanggo ninggalake spasi sawise <i>tag kanggo spasi sing tepat.

Conto lambang

Gunakake ing tombol, grup tombol kanggo toolbar, pandhu arah, utawa input formulir prepended.

Tombol

Klompok tombol ing toolbar tombol
  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>
Gulung mudhun ing grup tombol
panganggo 
  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 = "menu dropdown" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Sunting </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Busak </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Larangan </a></li>  
  8.     <li class = "pembagi" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Gawe admin </a></li>  
  10.   </ul>
  11. </div>
Ukuran tombol
Lintang Lintang Lintang 
  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>

Pandhu arah

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

Bidang formulir

  1. <div class = "kontrol-grup" > 
  2.   <label class = "control-label" for = "inputIcon" > Alamat email </label>  
  3.   <div class = "kontrol" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "teks" >   
  7.     </div>
  8.   </div>
  9. </div>