Di luhureun Parancah nu, elemen HTML dasar anu styled tur ditingkatkeun ku kelas extensible nyadiakeun seger, katingal konsisten jeung ngarasakeun.
Sakabéh grid tipografi dumasar kana dua Kurang variabel dina file variables.less kami: @baseFontSizejeung @baseLineHeight. Anu kahiji nyaéta ukuran font dasar anu dianggo sapanjang sareng anu kadua nyaéta jangkungna garis dasar.
Kami nganggo variabel-variabel éta, sareng sababaraha matematika, pikeun nyiptakeun margin, paddings, sareng jangkung garis sadaya jinis urang sareng seueur deui.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| unsur | Pamakéan | Pilihan |
|---|---|---|
<strong> |
Pikeun emphasizing a snippét téks kalawan penting | Euweuh |
<em> |
Pikeun ngantebkeun snippet téks sareng setrés | Euweuh |
<abbr> |
Bungkus singketan sareng akronim pikeun nunjukkeun versi anu dilegakeun dina hover | Kaasup .initialismkelas pikeun singketan uppercase. |
<address> |
Pikeun inpo kontak pikeun karuhun pangdeukeutna atawa sakabéh awak karya | Ngawétkeun pormat ku tungtung sakabéh garis kalawan<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Catetan: Ngarasa Luncat ngagunakeun <b>na <i>HTML5, tapi pamakéan maranéhna geus robah saeutik. <b>dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan bari <i>lolobana pikeun sora, istilah teknis, jsb.
Ieu dua conto kumaha <address>tag tiasa dianggo:
Singketan sareng titleatribut ngagaduhan wates handap titik lampu sareng kursor pitulung dina hover. Hal ieu méré pamaké indikasi tambahan yén hal bakal dipintonkeun dina hover.
Tambahkeun initialismkelas kana singketan pikeun ningkatkeun harmoni tipografi ku masihan ukuran téks anu rada leutik.
HTML mangrupa hal pangalusna saprak sliced roti.
Singketan tina kecap atribut nyaéta attr .
| unsur | Pamakéan | Pilihan |
|---|---|---|
<blockquote> |
Unsur tingkat blok pikeun ngutip eusi tina sumber anu sanés | Tambahkeun .pull-leftjeung .pull-rightkelas pikeun pilihan floated |
<small> |
Elemen opsional pikeun nambahkeun kutipan anu disanghareupan ku pamaké, biasana pangarang anu judul karya | Teundeun <cite>sabudeureun judul atawa ngaran sumber |
Pikeun ngawengku blockquote a, mungkus <blockquote>sabudeureun HTML wae sakumaha cutatan nu. Pikeun cutatan lempeng kami nyarankeun a <p>.
Asupkeun unsur pilihan <small>pikeun nyebatkeun sumber anjeun sareng anjeun bakal nampi dasbor —sateuacanna pikeun tujuan gaya.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante venenatis. </p>
- <leutik> Batur kasohor </leutik>
- </blockquote>
Tanda kutip blok standar ditata sapertos kieu:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante venenatis.
Batur kawentar dina Awak gawé
Pikeun ngambang blockquote anjeun ka katuhu, tambahkeun class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante venenatis.
Batur kawentar dina Awak gawé
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Bungkus inline snippét kode sareng <code>.
- Contona , < code> section </ code > kudu dibungkus jadi inline .
Paké <pre>pikeun sababaraha baris kode. Pastikeun pikeun kabur sagala kurung sudut dina kode pikeun rendering ditangtoskeun.
<p>Conto téks di dieu...</p>
- <pre>
- <p>Conto téks di dieu...</p>
- </pre>
Catetan: 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.
Candak <pre>unsur sarua jeung tambahkeun dua kelas pilihan pikeun rendering ditingkatkeun.
- <p> Conto téks di dieu... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Conto téks di dieu...</p>
- </pre>
Unduh google-code-prettify sareng tingali readme pikeun kumaha ngagunakeunana.
| 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 tabel husus pikeun kolom (atawa baris, gumantung kana wengkuan jeung panempatan) labél Kudu dipaké dina a <thead> |
<caption> |
Pedaran atawa kasimpulan naon tabel nahan, utamana mangpaat pikeun pamiarsa layar |
- <méja>
- <head>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <sadayana>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabel>
| Ngaran | Kelas | Katerangan |
|---|---|---|
| Default | Euweuh | Taya gaya, ngan kolom jeung baris |
| Dasar | .table |
Ngan garis horizontal antara baris |
| Diwates | .table-bordered |
Rounds juru sarta nambahan wates luar |
| Zebra-belang | .table-striped |
Nambahkeun warna latar kulawu caang ka baris ganjil (1, 3, 5, jsb) |
| Kentel | .table-condensed |
Motong padding nangtung dina satengah, ti 8px ka 4px, dina sakabéh tdjeung thelemen |
Méja sacara otomatis ditata kalayan ngan ukur sababaraha wates pikeun mastikeun kabaca sareng ngajaga struktur. Kalayan 2.0, .tablekelas diperyogikeun.
- <table class = "méja" >
- …
- </tabel>
| # | Nami payun | Nami pengker | Ngaran pamaké |
|---|---|---|---|
| 1 | Tandaan | Otto | @mdo |
| 2 | Yakub | Thornton | @gajih |
| 3 | Larry | manuk |
Kéngingkeun sakedik méja anjeun ku nambihan zebra-striping-ngan tambahkeun .table-stripedkelasna.
Catetan: tabél belang make :nth-childpamilih CSS jeung teu sadia di IE7-IE8.
- <table class = "méja tabel-belang" >
- …
- </tabel>
| # | Nami payun | Nami pengker | Ngaran pamaké |
|---|---|---|---|
| 1 | Tandaan | Otto | @mdo |
| 2 | Yakub | Thornton | @gajih |
| 3 | Larry | manuk |
Tambahkeun wates sabudeureun sakabéh tabel sarta sudut rounded pikeun tujuan estetika.
- <table class = "table table-bordered" >
- …
- </tabel>
| # | Nami payun | Nami pengker | Ngaran pamaké |
|---|---|---|---|
| 1 | Tandaan | Otto | @mdo |
| Tandaan | Otto | @getbootstrap | |
| 2 | Yakub | Thornton | @gajih |
| 3 | Larry Manuk | ||
Jieun tabel anjeun leuwih kompak ku nambahkeun .table-condensedkelas pikeun motong padding sél tabel dina satengah (tina 8px ka 4px).
- <table class = "méja tabel-condensed" >
- …
- </tabel>
| # | Nami payun | Nami pengker | Ngaran pamaké |
|---|---|---|---|
| 1 | Tandaan | Otto | @mdo |
| 2 | Yakub | Thornton | @gajih |
| 3 | Larry Manuk | ||
Ngarasa Luncat pikeun ngagabungkeun salah sahiji kelas tabel pikeun ngahontal rupa béda ku ngamangpaatkeun salah sahiji kelas sadia.
- <table class = "méja méja-belang méja-bordered méja-condensed" >
- ...
- </tabel>
| Nami lengkep | |||
|---|---|---|---|
| # | Nami payun | Nami pengker | Ngaran pamaké |
| 1 | Tandaan | Otto | @mdo |
| 2 | Yakub | Thornton | @gajih |
| 3 | Larry Manuk | ||
Bagian anu pangsaéna ngeunaan bentuk dina Bootstrap nyaéta yén sadaya input sareng kontrol anjeun katingali saé henteu paduli kumaha anjeun ngawangun éta dina markup anjeun. Taya HTML superfluous diperlukeun, tapi kami nyadiakeun pola pikeun maranéhanana anu merlukeun eta.
Tata perenah anu langkung rumit hadir kalayan kelas anu ringkes sareng skalabel pikeun gaya anu gampang sareng ngariung acara, janten anjeun katutupan dina unggal léngkah.
Bootstrap hadir kalayan dukungan pikeun opat jinis perenah bentuk:
Rupa-rupa bentuk perenah ngabutuhkeun sababaraha parobihan pikeun markup, tapi kadali sorangan tetep sareng kalakuanana sami.
Bentuk Bootstrap kalebet gaya pikeun sadaya kontrol bentuk dasar sapertos input, textarea, sareng pilih anu anjeun ngarepkeun. Tapi ogé hadir kalawan sababaraha komponén custom kawas appended na prepended inputs sarta rojongan pikeun daptar kotak centang.
Nagara sapertos kasalahan, peringatan, sareng kasuksésan kalebet pikeun unggal jinis kontrol formulir. Ogé kaasup gaya pikeun kadali ditumpurkeun.
Bootstrap nyadiakeun markup basajan tur gaya pikeun opat gaya formulir web umum.
| Ngaran | Kelas | Katerangan |
|---|---|---|
| Nangtung (standar) | .form-vertical (teu wajib) |
Tumpuk, labél kénca-blok dina kadali |
| Baris | .form-inline |
labél kénca-Blok jeung kontrol inline-blok pikeun gaya kompak |
| Pilarian | .form-search |
Input téks ékstra-buleud pikeun éstétika milarian anu biasa |
| Horizontal | .form-horizontal |
Ngambang kénca, labél katuhu-blok dina garis sarua salaku kadali |
standar pinter jeung lightweight tanpa markup tambahan.
- <form class = "sumur" >
- <label> Ngaran labél </label>
- <input type = "text" class = "span3" placeholder = "Type something..." >
- <span class = "help-block" > Conto téks pitulung tingkat blok di dieu. </span>
- <label class = "kotak centang" >
- <input type = "kotak centang" > Pariksa kuring kaluar
- </label>
- <button type = "kintunkeun" class = "btn" > Kirim </tombol>
- </form>
Tambahkeun .form-searchka formulir jeung .search-queryka input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "kintunkeun" class = "btn" > Pilarian </button>
- </form>
Tambahkeun .form-inlineka finesse nu alignment nangtung sarta spasi kontrol formulir.
- <form class = "well form-inline" >
- <input type = "text" class = "input-leutik" placeholder = "Email" >
- <input type = "sandi" class = "input-leutik" placeholder = "Sandi" >
- <label class = "kotak centang" >
- <input type = "kotak centang" > Inget kuring
- </label>
- <button type = "submit" class = "btn" > Sign in </button>
- </form>
Ditémbongkeun di sisi katuhu nyaéta sakabéh kadali formulir standar kami ngarojong. Ieu daptar bullet:
Dibikeun tata perenah bentuk conto di luhur, ieu mangrupikeun markup anu aya hubunganana sareng grup input sareng kontrol munggaran. The .control-group, .control-label, jeung .controlskelas sadayana diperlukeun pikeun styling.
- <form class = "formulir-horizontal" >
- <fieldset>
- <legend> téks legenda </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Input téks </label>
- <div class = "kontrol" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Ngarojong téks pitulung </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap nampilkeun gaya pikeun fokus sareng kaayaan anu didukung browser disabled. Urang nyabut Webkit standar outlinejeung nerapkeun box-shadowdina tempatna pikeun :focus.
Éta ogé kalebet gaya validasi pikeun kasalahan, peringatan, sareng kasuksésan. Pikeun ngagunakeun, tambahkeun kelas kasalahan ka sakurilingna .control-group.
- <fieldset
- class = "kasalahan grup kontrol" >
- …
- </fieldset>
Grup input-kalayan téks anu ditambihan atanapi ditambihan-nyadiakeun cara anu gampang pikeun masihan langkung seueur konteks pikeun input anjeun. Conto anu saé kalebet tanda @ kanggo nami pangguna Twitter atanapi $ pikeun kauangan.
Nepi ka v1.4, Bootstrap merlukeun markup tambahan sabudeureun kotak centang jeung radio pikeun tumpukan éta. Ayeuna, éta masalah basajan tina repeating <label class="checkbox">nu wraps nu <input type="checkbox">.
Kotak centang inline sareng radio ogé dirojong. Ngan tambahkeun .inlinekana naon waé .checkboxatanapi .radiosareng anjeun parantos réngsé.
Pikeun make prepend atawa nambahkeun inputs dina formulir inline, pastikeun pikeun nempatkeun .add-onna inputdina garis sarua, tanpa spasi.
Pikeun nambahkeun téks pitulung pikeun inputs formulir anjeun, kaasup téks pitulung inline kalawan <span class="help-inline">atawa blok téks pitulung kalayan <p class="help-block">sanggeus elemen input.
Gantina nyieun unggal ikon hiji pamundut tambahan, kami geus disusun kana sprite - sakumpulan gambar dina hiji file anu ngagunakeun CSS pikeun posisi gambar kalawan background-position. Ieu mangrupikeun metode anu sami anu kami anggo dina Twitter.com sareng parantos damel saé pikeun kami.
Sadaya kelas ikon diapit ku .icon-pikeun namespacing sareng scoping anu leres, sapertos komponén urang anu sanés. Ieu bakal ngabantosan nyegah konflik sareng alat anu sanés.
Glyphicons parantos masihan kami panggunaan Halflings anu disetél dina toolkit open-source kami salami kami nyayogikeun tautan sareng kiridit di dieu dina dokumén. Mangga anggap ngalakukeun hal nu sarua dina proyék Anjeun.
Bootstrap nganggo <i>tag pikeun sadaya ikon, tapi aranjeunna henteu ngagaduhan kelas kasus — ngan ukur awalan anu dibagi. Pikeun ngagunakeun, nempatkeun kodeu ieu di mana waé:
- <i class = "icon-search" ></i>
Aya ogé gaya sadia pikeun inverted (bodas) ikon, dijieun siap kalawan hiji kelas tambahan:
- <i class = "ikon-search ikon-bodas" ></i>
Aya 120 kelas pikeun dipilih pikeun ikon anjeun. Cukup tambahkeun <i>tag sareng kelas anu leres sareng anjeun parantos siap. Anjeun tiasa mendakan daptar lengkep dina sprites.less atanapi di dieu dina dokumen ieu.
Mastaka tegak! Lamun maké gigireun string téks, sakumaha dina tombol atawa Tumbu nav, pastikeun ninggalkeun spasi sanggeus <i>tag pikeun spasi ditangtoskeun.
Ikon anu hébat, tapi dimana hiji bakal ngagunakeun éta? Ieu sababaraha ide:
Intina, dimana waé anjeun tiasa nempatkeun <i>tag, anjeun tiasa nempatkeun ikon.
Paké aranjeunna dina tombol, grup tombol pikeun toolbar, navigasi, atawa inputs formulir prepended.