Bootstrap

Dasar CSS

Elemen HTML dasar digayakeun sareng ditingkatkeun ku kelas anu tiasa diperpanjang.

Tipografi

lulugu

Kabéh lulugu HTML, <h1>ngaliwatan <h6>sadia.

h1. Judul 1

h2. Judul 2

h3. Judul 3

h4. Judul 4

h5. Judul 5
h6. Judul 6

Salinan awak

Standar global Bootstrap font-sizenyaéta 14px , kalayan line-height20px . Ieu diterapkeun ka <body>sareng sadaya paragraf. Salaku tambahan, <p>(paragraf) nampi margin handap satengah jangkungna garis (10px sacara standar).

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>

Timbal awak salinan

Jieun paragraf nangtung kaluar ku nambahkeun .lead.

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

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

Diwangun ku Kurang

Skala tipografi dumasar kana dua variabel KURANG dina variabel.kurang : @baseFontSizejeung @baseLineHeight. Anu kahiji nyaéta ukuran font dasar anu dianggo sapanjang sareng anu kadua nyaéta jangkungna garis dasar. Kami nganggo variabel-variabel sareng sababaraha math basajan pikeun nyiptakeun margin, paddings, sareng jangkung garis sadaya jinis kami sareng seueur deui. Sesuaikeun aranjeunna sareng Bootstrap adaptasi.

Tekenan

Anggo tag tekenan standar HTML kalayan gaya anu ringan.

<small>

Pikeun de-emphasizing inline atawa blok téks, make tag leutik.

Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku citak anu saé.

<p> <leutik> Baris téks ieu dimaksudkeun pikeun dianggap salaku citak anu saé. </p>leutik> </p>

Kandel

Pikeun ngantebkeun snippet téks kalayan beurat font anu langkung beurat.

Potongan téks di handap ieu didamel salaku téks kandel .

<strong> dipasihan janten téks tebal </strong>

Miring

Pikeun nekenkeun snippet téks nganggo miring.

Snippet téks di handap ieu dijantenkeun salaku téks miring .

<em> disalin salaku téks miring </em>

Mastaka tegak!Ngarasa Luncat ngagunakeun <b>na <i>di HTML5. <b>dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan bari <i>lolobana pikeun sora, istilah teknis, jsb.

Kelas alignment

Gampang realign téks kana komponén sareng kelas alignment téks.

Téks dijajarkeun kénca.

Téks dijajarkeun tengah.

Téks anu dijajarkeun katuhu.

  1. <p class = "text-left" > Téks rata kénca. </p> 
  2. <p class = "text-center" > Téks dijajarkeun tengah. </p> 
  3. <p class = "text-right" > Téks anu dijajarkeun katuhu. </p>

Kelas tekenan

Nepikeun harti ngaliwatan kelir kalawan sakeupeul kelas utiliti tekenan.

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>

Singgetan

Palaksanaan gaya <abbr>unsur HTML pikeun singketan sareng akronim pikeun nunjukkeun versi anu dilegakeun dina hover. Singketan sareng titleatribut gaduh wates handap titik lampu sareng kursor pitulung dina hover, nyayogikeun kontéks tambahan dina hover.

<abbr>

Pikeun téks dimekarkeun dina hover panjang hiji singketan, kaasup titleatribut.

Singketan tina kecap atribut nyaéta attr .

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

<abbr class="initialism">

Tambahkeun .initialismka singketan pikeun ukuran font anu rada leutik.

HTML mangrupa hal pangalusna saprak sliced ​​roti.

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

Alamat

Nampilkeun inpormasi kontak pikeun karuhun anu pangdeukeutna atanapi sakumna awak padamelan.

<address>

Simpen pormat ku mungkas sadaya garis sareng <br>.

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

Blockquotes

Pikeun ngadugikeun blok eusi tina sumber anu sanés dina dokumén anjeun.

Blockquote standar

Bungkus <blockquote>sabudeureun sagala HTML salaku cutatan. Pikeun cutatan lempeng kami nyarankeun 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 a Ante. </p>
  3. </blockquote>

Pilihan blockquote

Parobahan gaya jeung eusi pikeun variasi basajan dina blockquote baku.

Ngaran hiji sumber

Tambahkeun <small>tag pikeun ngaidentipikasi sumberna. Bungkus nami karya sumber dina <cite>.

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

Batur kawentar dina Judul Sumber 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante. </p>
  3.   <leutik> Batur anu kasohor <cite title = "Sumber Judul" > Sumber Judul </cite></small> 
  4. </blockquote>

Pintonan alternatip

Paké .pull-rightpikeun floated, blockquote-Blok katuhu.

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

Batur kawentar dina Judul Sumber 
  1. <blockquote class = "tarik-katuhu" > 
  2.   ...
  3. </blockquote>

Daptar

Teu diurut

Daptar item nu urutan teu eksplisit masalah.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem jeung massa
  • Facilisis di 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 diuk amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Dititah

Daptar barang anu urutanna sacara eksplisit penting.

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

Teu gaya

Cabut padding standar list-stylesareng kénca dina daptar item (ngan barudak saharita).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem jeung massa
  • Facilisis di 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 diuk amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "teu gaya" > 
  2.   <li> ... </li>
  3. </ul>

Baris

Teundeun sadaya item daptar dina garis tunggal inline-blockjeung sababaraha padding lampu.

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

Katerangan

Daptar istilah sareng déskripsi anu aya hubunganana.

Daptar pedaran
Daptar pedaran sampurna pikeun nangtukeun istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Katerangan horisontal

Jieun istilah jeung déskripsi dina <dl>baris nepi sisi-demi-sisi.

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

Mastaka tegak!Daptar déskripsi horisontal bakal motong istilah anu panjang teuing pikeun pas dina ngalereskeun kolom kénca text-overflow. Dina viewports narrower, maranéhna bakal robah kana tata perenah tumpuk standar.

Kodeu

Baris

Bungkus inline snippét kode sareng <code>.

Contona, <section>kudu dibungkus sakumaha inline. 
  1. Contona , < kode> & lt ; bagian & GT ;</ kode > kudu dibungkus sakumaha inline .

Blok dasar

Paké <pre>pikeun sababaraha baris kode. Pastikeun pikeun kabur sagala kurung sudut dina kode pikeun rendering ditangtoskeun.

<p>Conto téks di dieu...</p>
  1. <pre>
  2.   <p>Conto téks di dieu...</p>
  3. </pre>

Mastaka tegak!Pastikeun pikeun nyimpen kode dina <pre>tag sacaket mungkin ka kénca; eta bakal ngajadikeun sakabeh tab.

Anjeun tiasa milih nambihan .pre-scrollablekelas anu bakal nyetél jangkungna maksimal 350px sareng nyayogikeun scrollbar sumbu-y.

tabél

Gaya standar

Pikeun gaya dasar - padding lampu sareng ngan ukur pamisah horizontal - tambahkeun kelas dasar .tablekana naon waé <table>.

# Nami payun Nami pengker Ngaran pamaké
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @twitter 
  1. <table class = "méja" > 
  2.   …
  3. </tabel>

kelas pilihan

Tambahkeun salah sahiji kelas di handap ieu kana kelas .tabledasar.

.table-striped

Nambahkeun zebra-striping kana sagala baris tabel dina <tbody>via :nth-childpamilih CSS (teu sadia di IE7-8).

# Nami payun Nami pengker Ngaran pamaké
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @twitter 
  1. <table class = "méja tabel-belang" > 
  2.   …
  3. </tabel>

.table-bordered

Tambahkeun wates jeung sudut rounded kana tabél.

# Nami payun Nami pengker Ngaran pamaké
1 Tandaan Otto @mdo
Tandaan Otto @getbootstrap
2 Yakub Thornton @gajih
3 Larry Manuk @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </tabel>

.table-hover

Aktipkeun kaayaan hover dina baris tabel dina a <tbody>.

# Nami payun Nami pengker Ngaran pamaké
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </tabel>

.table-condensed

Ngajadikeun tabel leuwih kompak ku motong padding sél dina satengah.

# Nami payun Nami pengker Ngaran pamaké
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter 
  1. <table class = "méja tabel-condensed" > 
  2.   …
  3. </tabel>

Kelas baris pilihan

Anggo kelas kontekstual pikeun ngawarnaan baris tabel.

Kelas Katerangan
.success Nunjukkeun hiji aksi suksés atawa positif.
.error Nunjukkeun tindakan bahaya atanapi berpotensi négatip.
.warning Nunjukkeun peringatan anu peryogi perhatian.
.info Dipaké salaku alternatif pikeun gaya standar.
# produk Pembayaran Dicandak Status
1 TB - Bulanan 01/04/2012 Disatujuan
2 TB - Bulanan 02/04/2012 ditolak
3 TB - Bulanan 03/04/2012 Ditunggu
4 TB - Bulanan 04/04/2012 Nelepon pikeun mastikeun 
  1. ...
  2.   < tr class = "sukses" >
  3.     <td> 1 < /td>
  4.     <td>TB - Bulanan</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Disatujuan</ td >
  7.   </ tr >
  8. ...

Dirojong markup méja

Daptar elemen HTML tabel anu dirojong sareng kumaha aranjeunna kedah dianggo.

Tag Katerangan
<table> Unsur wrapping pikeun mintonkeun data dina format tabular
<thead> Unsur wadahna pikeun baris lulugu tabel ( <tr>) pikeun labél kolom tabel
<tbody> Unsur wadahna pikeun baris tabel ( <tr>) dina awak tabél
<tr> Unsur wadahna pikeun sakumpulan sél méja ( <td>atawa <th>) nu nembongan dina hiji baris
<td> Sél méja standar
<th> Sél méja khusus pikeun labél kolom (atanapi baris, gumantung kana ruang lingkup sareng panempatan).
<caption> Pedaran atawa kasimpulan naon tabel nahan, utamana mangpaat pikeun pamiarsa layar 
  1. <méja>
  2.   <caption> ... </caption>
  3.   <head>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <sadayana>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tabel>

Bentuk

Gaya standar

Kadali formulir individu narima styling, tapi tanpa kelas dasar diperlukeun dina <form>atawa parobahan badag dina markup. Hasil dina tumpukan, labél kénca-blok dina luhureun kadali formulir.

Katerangan Conto téks pitulung tingkat blok di dieu. 
  1. <formulir>
  2.   <fieldset>
  3.     <legend> Legenda </legend>
  4.     <label> Ngaran labél </label>
  5.     <input type = "text" placeholder = "Type something..." >  
  6.     <span class = "help-block" > Conto téks pitulung tingkat blok di dieu. </span> 
  7.     <label class = "kotak centang" > 
  8.       <input type = "kotak centang" > Pariksa kuring kaluar 
  9.     </label>
  10.     <button type = "kintunkeun" class = "btn" > Kirim </tombol>  
  11.   </fieldset>
  12. </form>

Layouts pilihan

Kaasup sareng Bootstrap aya tilu perenah bentuk pilihan pikeun kasus pamakean umum.

Formulir pilarian

Tambahkeun .form-searchka formulir jeung .search-queryka <input>pikeun input téks tambahan-rounded.

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

Bentuk inline

Tambahkeun .form-inlinepikeun labél kénca-blok jeung kontrol inline-block pikeun perenah kompak.

  1. <form class = "formulir-inline" > 
  2.   <input type = "text" class = "input-leutik" placeholder = "Email" >   
  3.   <input type = "sandi" class = "input-leutik" placeholder = "Sandi" >   
  4.   <label class = "kotak centang" > 
  5.     <input type = "kotak centang" > Inget kuring 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Sign in </button>  
  8. </form>

Bentuk horisontal

Katuhu align labél jeung ngambang ka kénca pikeun nyieun eta nembongan dina garis sarua salaku kadali. Merlukeun panglobana parobahan markup tina formulir standar:

  • Tambahkeun .form-horizontalka formulir
  • Bungkus labél sareng kadali.control-group
  • Tambahkeun .control-labelka labél
  • Bungkus sagala kadali pakait .controlspikeun alignment ditangtoskeun
  1. <form class = "formulir-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Surélék </label>  
  4.     <div class = "kontrol" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  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 = "control-group" > 
  15.     <div class = "kontrol" > 
  16.       <label class = "kotak centang" > 
  17.         <input type = "kotak centang" > Inget kuring 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Sign in </button>  
  20.     </div>
  21.   </div>
  22. </form>

Dirojong kontrol formulir

Conto kadali formulir standar dirojong dina tata perenah formulir conto.

Input

Paling umum kontrol formulir, widang input basis téks. Ngawengku pangrojong pikeun sagala jinis HTML5: téks, sandi, datetime, datetime-lokal, tanggal, bulan, waktu, minggu, nomer, email, url, pilarian, tel, jeung warna.

Merlukeun pamakéan a husus typesepanjang waktos.

  1. <input type = "text" placeholder = "Teks input" >

Textarea

Kontrol bentuk anu ngadukung sababaraha baris téks. Robah rowsatribut sakumaha diperlukeun.

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

Kotak centang jeung radio

Kotak centang kanggo milih hiji atanapi sababaraha pilihan dina daptar sedengkeun radio kanggo milih hiji pilihan tina seueur.

Default (tumpuk)


  1. <label class = "kotak centang" > 
  2.   <input type = "kotak centang" nilai = "" >  
  3.   Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" dipariksa >     
  8.   Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Pilihan dua tiasa janten hal anu sanés sareng milih éta bakal ngabatalkeun pilihan hiji
  13. </label>

Kotak centang inline

Tambahkeun .inlinekelas kana runtuyan kotak centang atawa radio pikeun kadali nembongan dina garis sarua.

  1. <label class = "kotak centang inline" > 
  2.   < jenis input = "kotak centang" id = "inlineCheckbox1" nilai = "pilihan1" > 1   
  3. </label>
  4. <label class = "kotak centang inline" > 
  5.   < jenis 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

Paké pilihan standar atawa nangtukeun a multiple="multiple"nembongkeun sababaraha pilihan sakaligus.


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

Ngalegaan kadali formulir

Nambahkeun dina luhureun kadali browser aya, Bootstrap ngawengku komponén formulir mangpaat séjén.

Input anu disayogikeun sareng ditambihan

Tambahkeun téks atanapi tombol sateuacan atanapi saatos input dumasar-téks. Catet yén selectelemen henteu didukung di dieu.

Pilihan standar

Bungkus an .add-onsareng an inputsareng salah sahiji tina dua kelas pikeun nambihan atanapi nambihan téks kana input.

@

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

Dihijikeun

Anggo kelas sareng dua conto .add-onpikeun nyiapkeun sareng nambihan 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 téks

Gantina a <span>kalawan téks, make a .btnngagantelkeun hiji tombol (atawa dua) kana input.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > Go! </tombol>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Pilarian </button>  
  4.   <button class = "btn" type = "button" > Options </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.       Aksi
  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.       Aksi
  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.       Aksi
  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.       Aksi
  15.       <span class = "caret" ></span> 
  16.     </tombol>
  17.     <ul class = "menu dropdown" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Grup dropdown anu dibagi

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

Formulir pilarian

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

Kontrol ukuran

Anggo kelas ukuran relatif sapertos .input-largeatanapi cocog sareng input anjeun kana ukuran kolom grid nganggo .span*kelas.

Input tingkat blok

Jieun naon <input>atawa <textarea>unsur kalakuanana kawas elemen tingkat blok.

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

Ukuran rélatif

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

Mastaka tegak!Dina vérsi anu bakal datang, urang bakal ngarobih panggunaan kelas input relatif ieu pikeun cocog sareng ukuran tombol urang. Contona, .input-largebaris ngaronjatkeun padding jeung font-ukuran hiji input.

Ukuran grid

Anggo .span1pikeun .span12input anu cocog sareng ukuran kolom grid anu sami.

  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>

Pikeun sababaraha inputs grid per garis, make .controls-rowkelas modifier pikeun spasi ditangtoskeun . Ieu floats inputs ambruk bodas-spasi, susunan margins ditangtoskeun, sarta mupus ngambang.

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

Input anu teu tiasa diédit

Nampilkeun data dina bentuk anu henteu tiasa diédit tanpa nganggo markup formulir anu saleresna.

Sababaraha nilai di dieu 
  1. <span class = "input-xlarge uneditable-input" > Sababaraha nilai di dieu </span>

Bentuk tindakan

Tungtung formulir ku grup lampah (tombol). Nalika ditempatkeun dina hiji .form-actions, tombol bakal otomatis indent baris nepi ka kontrol formulir.

  1. <div class = "formulir-aksi" > 
  2.   <button type = "kintunkeun" class = "btn btn-primary" > Simpen parobahan </button>  
  3.   <button type = "button" class = "btn" > Bolay </button>  
  4. </div>

Pitulung téks

Pangrojong tingkat inline sareng blok pikeun téks pitulung anu muncul di sekitar kontrol formulir.

Pitulung inline

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

Blok pitulung

Blok téks pitulung anu langkung panjang anu ngarobih kana garis énggal sareng tiasa ngalegaan langkung ti hiji garis. 
  1. <input type = "text" ><span class = "help-block" > Blok leuwih panjang tina téks pitulung anu ngarecah kana baris anyar jeung bisa leuwih ti hiji baris. </span>

kaayaan kontrol formulir

Nyadiakeun eupan balik ka pamaké atawa datang kalawan kaayaan eupan balik dasar dina kadali formulir jeung labél.

Input fokus

Urang nyabut gaya standar outlinedina sababaraha kadali formulir jeung nerapkeun box-shadowdina tempatna pikeun :focus.

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

Input teu valid

Input gaya via fungsionalitas browser standar nganggo :invalid. Sebutkeun a type, tambahkeun requiredatribut upami sawah henteu opsional, sareng (upami tiasa dianggo) sebutkeun a pattern.

Ieu teu sadia dina versi Internet Explorer 7-9 alatan kurangna rojongan pikeun CSS pseudo selectors.

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

Input ditumpurkeun

Tambahkeun disabledatribut dina input pikeun nyegah input pamaké sarta micu katingal rada béda.

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

Nagara validasi

Bootstrap kalebet gaya validasi pikeun kasalahan, peringatan, inpormasi, sareng pesen kasuksésan. Pikeun ngagunakeun, tambahkeun kelas anu cocog ka sakurilingna .control-group.

Aya anu salah
Mangga ngalereskeun kasalahan
Ngaran pamaké dicokot
Heueuh! 
  1. <div class = "peringatan grup kontrol" > 
  2.   <label class = "control-label" for = "inputWarning" > Input kalayan peringatan </label>  
  3.   <div class = "kontrol" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Aya nu salah </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kasalahan grup kontrol" > 
  10.   <label class = "control-label" for = "inputError" > Input kalawan kasalahan </label>  
  11.   <div class = "kontrol" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Mangga koreksi kasalahan </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "inpormasi grup kontrol" > 
  18.   <label class = "control-label" for = "inputInfo" > Input sareng info </label>  
  19.   <div class = "kontrol" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Ngaran pamaké geus dicokot </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrol-grup kasuksésan" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input kalawan suksés </label>  
  27.   <div class = "kontrol" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Kancing

Tombol standar

Gaya tombol tiasa diterapkeun kana naon waé kalayan .btnkelas anu diterapkeun. Nanging, biasana anjeun badé nerapkeun ieu ngan ukur <a>sareng <button>elemen pikeun rendering anu pangsaéna.

Tombol kelas = "" Katerangan
btn Tombol abu standar sareng gradién
btn btn-primary Nyadiakeun beurat visual tambahan sarta nangtukeun aksi primér dina sakumpulan tombol
btn btn-info Dipaké salaku alternatif pikeun gaya standar
btn btn-success Nunjukkeun hiji aksi suksés atawa positif
btn btn-warning Nunjukkeun caution kudu dilaksanakeun kalawan aksi ieu
btn btn-danger Nunjukkeun tindakan bahaya atanapi berpotensi négatip
btn btn-inverse Tombol abu poék alternatif, teu dihijikeun ka aksi semantik atawa pamakéan
btn btn-link Deemphasize tombol ku nyieun eta kasampak kawas link bari ngajaga kabiasaan tombol

kasaluyuan cross browser

IE9 henteu motong gradién latar dina sudut anu dibuleud, ku kituna urang hapus. Patali, IE9 jankifies buttonelemen ditumpurkeun, ngajadikeun téks abu ku téks-kalangkang jahat nu urang teu bisa ngalereskeun.

Ukuran tombol

Fancy tombol gedé atawa leutik? Tambahkeun .btn-large, .btn-small, atawa .btn-minipikeun ukuran tambahan.

  1. <p>
  2.   <button class = "btn btn-ageung btn-primary" type = "button" > Tombol badag </button>  
  3.   <button class = "btn btn-large" type = "button" > Tombol badag </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-leutik btn-primary" type = "tombol" > Tombol leutik </button>  
  11.   <button class = "btn btn-small" type = "button" > Tombol leutik </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" > Tombol Mini </button>  
  16. </p>

Nyiptakeun tombol tingkat blok — anu ngalegaan lebar pinuh ku kolot — ku nambihan .btn-block.

  1. <button class = "btn btn-gede btn-block btn-primary" type = "button" > Blok tingkat tombol </button>  
  2. <button class = "btn btn-gede btn-block" type = "tombol" > Blok tingkat tombol </button>

kaayaan ditumpurkeun

Jieun tombol kasampak unclickable ku fading aranjeunna deui 50%.

Unsur jangkar

Tambahkeun .disabledkelas kana <a>tombol.

Tumbu primér Tumbu 

  1. <a href = "#" class = "btn btn-badag btn-primér ditumpurkeun" > Tumbu primér </a>  
  2. <a href = "#" class = "btn btn-ageung ditumpurkeun" > Link </a>

Mastaka tegak!Kami nganggo .disabledsalaku kelas utiliti di dieu, sami sareng .activekelas umum, janten henteu aya awalan anu diperyogikeun. Ogé, kelas ieu ngan pikeun éstétika; anjeun kedah nganggo JavaScript khusus pikeun nganonaktipkeun tautan di dieu.

Unsur tombol

Tambahkeun disabledatribut kana <button>tombol.

  1. <tombol type = "tombol" class = "btn btn-ageung btn-primér ditumpurkeun" disabled = "disabled" > Tombol primér </button>   
  2. < jenis tombol = "tombol" class = "btn btn-ageung" ditumpurkeun > Tombol </tombol>

Hiji kelas, sababaraha tag

Paké .btnkelas dina hiji <a>, <button>, atawa <input>unsur.

Tumbu 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "kintunkeun " > Tombol </button>  
  3. <input class = "btn" type = "tombol" nilai = "Input" >   
  4. <input class = "btn" type = "kintunkeun " nilai = "Kirimkeun" >

Salaku prakték pangalusna, coba cocog unsur pikeun konteks Anjeun pikeun mastikeun rendering cross-browser cocog. Upami Anjeun gaduh hiji input, make an <input type="submit">pikeun tombol Anjeun.

Gambar

Tambihkeun kelas kana <img>unsur pikeun gampang ngagayakeun gambar dina proyék naon waé.

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

Mastaka tegak! .img-roundedsarta .img-circleteu dianggo dina IE7-8 alatan kurangna border-radiusrojongan.

Ikon ku Glyphicons

Ikon glyphs

140 ikon dina bentuk sprite, sayogi dina warna abu poék (standar) sareng bodas, disayogikeun ku Glyphicons .

  • ikon-kaca
  • ikon-musik
  • ikon-search
  • ikon-amplop
  • ikon-haté
  • ikon-béntang
  • ikon-béntang-kosong
  • ikon-pamaké
  • ikon-pilem
  • ikon-th-badag
  • ikon-th
  • ikon-th-daptar
  • ikon-ok
  • ikon-ngahapus
  • ikon-zum-di
  • ikon-zum-kaluar
  • ikon-pareum
  • ikon-sinyal
  • ikon-cog
  • ikon-sampah
  • ikon-imah
  • ikon-file
  • ikon-waktos
  • ikon-jalan
  • ikon-download-alt
  • ikon-download
  • ikon-munggah
  • ikon-koropak
  • ikon-muter-bunderan
  • ikon-ulang
  • ikon-refresh
  • ikon-daptar-alt
  • ikon-konci
  • ikon-bandéra
  • ikon-headphone
  • ikon-volume-off
  • ikon-volume-handap
  • ikon-volume-up
  • ikon-qrcode
  • ikon-barcode
  • ikon-tag
  • ikon-tag
  • ikon-buku
  • ikon-bookmark
  • ikon-print
  • ikon-kaméra
  • ikon-font
  • ikon-kandel
  • ikon-miring
  • ikon-téks-jangkungna
  • ikon-téks-lebar
  • ikon-align-kénca
  • ikon-align-puseur
  • ikon-align-katuhu
  • ikon-align-menerkeun
  • ikon-daptar
  • ikon-indent-kénca
  • ikon-indent-katuhu
  • ikon-facetime-video
  • ikon-gambar
  • ikon-pensil
  • ikon-peta-spidol
  • ikon-nyaluyukeun
  • ikon-tint
  • ikon-edit
  • ikon-dibagikeun
  • ikon-pariksa
  • ikon-pindah
  • ikon-lengkah-mundur
  • ikon-gancang-mundur
  • ikon-mundur
  • ikon-muter
  • ikon-reureuh
  • ikon-eureun
  • ikon-hareup
  • ikon-gancang-maju
  • ikon-léngkah-hareup
  • ikon-ngaluarkeun
  • ikon-chevron-kénca
  • ikon-chevron-katuhu
  • ikon-tambah-tanda
  • ikon-minus-tanda
  • ikon-ngahapus-tanda
  • ikon-ok-tanda
  • ikon-sual-tanda
  • ikon-info-tanda
  • ikon-screenshot
  • ikon-ngahapus-bunderan
  • ikon-ok-bunderan
  • ikon-larangan-bunderan
  • ikon-panah-kénca
  • ikon-panah-katuhu
  • ikon-panah-up
  • ikon-panah-handap
  • ikon-share-alt
  • ikon-ukuran-pinuh
  • ikon-ukuran-leutik
  • ikon-tambah
  • ikon-minus
  • ikon-asteris
  • ikon-exclamation-tanda
  • ikon-kado
  • ikon-daun
  • ikon-seuneu
  • ikon-panon-buka
  • ikon-panon-deukeut
  • ikon-warning-tanda
  • ikon-pesawat
  • ikon-kalender
  • ikon-acak
  • ikon-koméntar
  • ikon-magnét
  • ikon-chevron-up
  • ikon-chevron-handap
  • ikon-retweet
  • ikon-balanja-karanjang
  • ikon-folder-nutup
  • ikon-folder-buka
  • ikon-ukuran-vertikal
  • ikon-ukuran-horizontal
  • ikon-hdd
  • ikon-bullhorn
  • ikon-bel
  • ikon-sertipikat
  • ikon-jempol-up
  • ikon-jempol-handap
  • ikon-leungeun-katuhu
  • ikon-leungeun-kénca
  • ikon-leungeun-up
  • ikon-leungeun-handap
  • ikon-bunderan-panah-katuhu
  • ikon-bunderan-panah-kénca
  • ikon-bunderan-panah-up
  • ikon-bunderan-panah-handap
  • ikon-dunya
  • ikon-rengkuh
  • ikon-tugas
  • ikon-filter
  • ikon-koper
  • ikon-layar pinuh

Atribusi Glyphicons

Glyphicons Halflings biasana henteu sayogi gratis, tapi susunan antara Bootstrap sareng panyipta Glyphicons parantos ngajantenkeun ieu tanpa biaya kanggo anjeun salaku pamekar. Salaku hatur nuhun, kami nyuhunkeun anjeun ngalebetkeun tautan pilihan deui ka Glyphicons iraha waé praktis.

Kumaha ngagunakeun

Sadaya ikon ngabutuhkeun <i>tag kalayan kelas anu unik, diapit ku icon-. Pikeun ngagunakeun, nempatkeun kodeu ieu di mana waé:

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

Aya ogé gaya sadia pikeun inverted (bodas) ikon, dijieun siap kalawan hiji kelas tambahan. Urang husus bakal ngalaksanakeun kelas ieu dina hover jeung nagara aktip pikeun nav na dropdown Tumbu.

  1. <i class = "ikon-search ikon-bodas" ></i>

Mastaka tegak!Lamun maké gigireun string téks, sakumaha dina tombol atawa Tumbu nav, pastikeun ninggalkeun spasi sanggeus <i>tag pikeun spasi ditangtoskeun.

Conto ikon

Paké aranjeunna dina tombol, grup tombol pikeun toolbar, navigasi, atawa inputs formulir prepended.

Kancing

Grup tombol dina 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>
Dropdown dina grup tombol
Pamaké 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Pamaké </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> Édit </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Hapus </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Larang </a> </li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Jieun admin </a></li>  
  10.   </ul>
  11. </div>
Ukuran tombol
Béntang Béntang Béntang 
  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>

Napigasi

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

Widang formulir

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > Alamat surélék </label>  
  3.   <div class = "kontrol" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-amplop" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>