Ing ndhuwur scaffolding, unsur HTML dhasar ditata lan ditingkatake kanthi kelas sing bisa diperluas kanggo menehi tampilan lan rasa sing seger lan konsisten.
Kabeh kothak tipografi adhedhasar rong variabel Kurang ing file variables.less kita: @baseFontSizelan @baseLineHeight. Sing pisanan yaiku ukuran font dhasar sing digunakake ing saindenging lan sing nomer loro yaiku dhuwur garis dhasar.
Kita nggunakake variabel kasebut, lan sawetara matematika, kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane.
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.
Gawea paragraf kanthi nambahake .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| unsur | Panggunaan | Opsional |
|---|---|---|
<strong> |
Kanggo nandheske snippet teks karo penting | ora ana |
<em> |
Kanggo nandheske potongan teks kanthi stres | ora ana |
<abbr> |
Wraps singkatan lan akronim kanggo nuduhake versi ditambahi ing hover | Kalebu .initialismkelas kanggo singkatan huruf gedhe. |
<address> |
Kanggo informasi kontak kanggo leluhur paling cedhak utawa kabeh awak karya | Simpen format kanthi mungkasi kabeh baris karo<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.
Cathetan: Aja bebas nggunakake <b>lan <i>ing HTML5, nanging panggunaane wis rada owah. <b>tegese kanggo nyorot tembung utawa frasa tanpa menehi wigati tambahan nalika <i>biasane kanggo swara, istilah teknis, lsp.
Ing ngisor iki ana rong conto carane <address>tag bisa digunakake:
Singkatan karo titleatribut duwe wates ngisor titik cahya lan kursor bantuan ing hover. Iki menehi pangguna pratondo ekstra sing bakal ditampilake ing hover.
Tambah initialismkelas menyang singkatan kanggo nambah harmoni tipografi kanthi menehi ukuran teks sing rada cilik.
HTML minangka sing paling apik wiwit roti irisan.
Singkatan saka tembung atribut yaiku attr .
| unsur | Panggunaan | Opsional |
|---|---|---|
<blockquote> |
Unsur tingkat blok kanggo ngutip isi saka sumber liya | Tambah .pull-leftlan .pull-rightkelas kanggo opsi floated |
<small> |
Elemen opsional kanggo nambahake kutipan sing diadhepi pangguna, biasane penulis kanthi judhul karya | Selehake <cite>watara judhul utawa jeneng sumber |
Kanggo nyakup kutipan blokir, bungkus HTML<blockquote> apa wae minangka kutipan. Kanggo kuotasi langsung disaranake a .<p>
<small>Kalebu unsur opsional kanggo nyebut sumber sampeyan lan sampeyan bakal entuk em dash —sadurunge kanggo tujuan gaya.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
- <cilik> Wong sing misuwur </cilik>
- </blockquote>
Kutipan blokir standar ditata kaya:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.
Wong sing misuwur ing Badan kerja
Kanggo ngambang blockquote ing sisih tengen, tambahake class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.
Wong sing misuwur ing Badan kerja
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Bungkus potongan kode inline nganggo <code>.
- Contone , < code> bagean </ code > kudu dibungkus minangka inline .
Gunakake <pre>kanggo sawetara baris kode. Aja manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat.
<p>Conto teks ing kene...</p>
- <pre>
- <p>Conto teks ing kene...</p>
- </pre>
Cathetan: 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.
Njupuk <pre>unsur padha lan nambah rong kelas opsional kanggo nambah Rendering.
- <p> Tuladha teks ing kene... </p>
- <pre class = "prettyprint
- linenum" >
- <p>Conto teks ing kene...</p>
- </pre>
Download google-code-prettify lan deleng readme babagan carane nggunakake.
| 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 |
- <tabel>
- <sirah>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <awak>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabel>
| jeneng | kelas | Katrangan |
|---|---|---|
| Default | ora ana | Ora ana gaya, mung kolom lan larik |
| dhasar | .table |
Mung garis horisontal antarane larik |
| wewatesan | .table-bordered |
Bunder sudhut lan nambah wates njaba |
| Zebra-belang | .table-striped |
Nambahake werna latar mburi abu-abu cahya menyang larik ganjil (1, 3, 5, lsp) |
| Dipadhetke | .table-condensed |
Cut padding vertikal ing setengah, saka 8px kanggo 4px, ing kabeh tdlan thunsur |
Tabel kanthi otomatis gaya mung sawetara wates kanggo mesthekake readability lan njaga struktur. Kanthi 2.0, .tablekelas dibutuhake.
- < kelas tabel = "tabel" >
- …
- </tabel>
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry | manuk |
Nggawe meja kanthi apik kanthi nambahake zebra-striping-mung nambah .table-stripedkelas.
Cathetan: Tabel belang nggunakake :nth-childpamilih CSS lan ora kasedhiya ing IE7-IE8.
- <table class = "table table-striped" >
- …
- </tabel>
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry | manuk |
Tambah wates ing sakubenge kabeh meja lan sudhut bunder kanggo tujuan estetis.
- <table class = "table table-bordered" >
- …
- </tabel>
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| Tandhani | Otto | @getbootstrap | |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry Manuk | ||
Nggawe tabel luwih kompak kanthi nambahake .table-condensedkelas kanggo Cut padding sel tabel ing setengah (saka 8px kanggo 4px).
- <table class = "table table-condensed" >
- …
- </tabel>
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry Manuk | ||
Bebas bae kanggo gabungke sembarang kelas meja kanggo entuk tampilan beda kanthi nggunakake sembarang kelas kasedhiya.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </tabel>
| jeneng lengkap | |||
|---|---|---|---|
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry Manuk | ||
Sisih paling apik babagan formulir ing Bootstrap yaiku kabeh input lan kontrol sampeyan katon apik, ora preduli carane nggawe markup sampeyan. Ora HTML superfluous dibutuhake, nanging kita nyedhiyani pola kanggo sing mbutuhake.
Tata letak sing luwih rumit disedhiyakake karo kelas sing ringkes lan bisa diukur supaya gampang gaya lan ngiket acara, supaya sampeyan bisa nutupi saben langkah.
Bootstrap dilengkapi dhukungan kanggo papat jinis tata letak formulir:
Jinis tata letak formulir sing beda-beda mbutuhake sawetara owah-owahan kanggo markup, nanging kontrol dhewe tetep lan tumindak padha.
Formulir Bootstrap kalebu gaya kanggo kabeh kontrol formulir dhasar kaya input, textarea, lan pilih sing dikarepake. Nanging uga dilengkapi karo sawetara komponen khusus kaya input sing ditambahake lan prepended lan dhukungan kanggo dhaptar kothak.
Negara kaya kesalahan, peringatan, lan sukses kalebu kanggo saben jinis kontrol formulir. Uga kalebu gaya kanggo kontrol dipatèni.
Bootstrap nyedhiyakake markup lan gaya sing prasaja kanggo papat gaya formulir web umum.
| jeneng | kelas | Katrangan |
|---|---|---|
| Vertikal (standar) | .form-vertical (ora dibutuhake) |
Label sing ditumpuk, didadekake kiwa liwat kontrol |
| Inline | .form-inline |
Label kiwa lan kontrol blok inline kanggo gaya kompak |
| Nggoleki | .form-search |
Input teks ekstra-bunder kanggo estetika telusuran sing khas |
| Horisontal | .form-horizontal |
Ngambang kiwa, label sejajar tengen ing baris sing padha karo kontrol |
Standar sing cerdas lan entheng tanpa markup ekstra.
- <form class = "uga" >
- <label> Jeneng label </label>
- <input type = "text" class = "span3" placeholder = "Ketik soko…" >
- <span class = "help-block" > Conto teks bantuan tingkat blok ing kene. </span>
- <label class = "kotak centang" >
- <input type = "checkbox" > Priksa kula
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
Tambah .form-searchmenyang formulir lan .search-querymenyang input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Telusuri </button>
- </form>
Tambah .form-inlinekanggo finesse alignment vertikal lan spasi saka kontrol wangun.
- <form class = "well form-inline" >
- <input type = "text" class = "input-cilik" placeholder = "Email" >
- < tipe input = "sandi" class = "input-cilik" placeholder = "Sandhi" >
- <label class = "kotak centang" >
- <input type = "kotak centang" > Elingi aku
- </label>
- <button type = "submit" class = "btn" > Mlebu </button>
- </form>
Dituduhake ing sisih tengen kabeh kontrol formulir standar sing kita dukung. Punika dhaptar bullet:
Diwenehi conto tata letak formulir ing ndhuwur, iki markup sing digandhengake karo grup input lan kontrol pisanan. Kelas .control-group, .control-label, lan .controlskabeh dibutuhake kanggo gaya.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Teks legenda </legend>
- <div class = "kontrol-grup" >
- <label class = "control-label" for = "input01" > Input teks </label>
- <div class = "kontrol" >
- < tipe input = "teks" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Teks bantuan sing ndhukung </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap nduweni gaya kanggo fokus lan disablednegara sing didhukung browser. Kita mbusak Webkit gawan outlinelan aplikasi box-shadowing panggonan kanggo :focus.
Uga kalebu gaya validasi kanggo kesalahan, bebaya, lan sukses. Kanggo nggunakake, nambah kelas kesalahan ing saubengé .control-group.
- <fieldset
- class = "kesalahan grup kontrol" >
- …
- </fieldset>
Klompok input-karo teks sing ditambahake utawa ditambahake-nyedhiyakake cara sing gampang kanggo menehi konteks luwih akeh kanggo input sampeyan. Conto apik kalebu tandha @ kanggo jeneng panganggo Twitter utawa $ kanggo keuangan.
Nganti v1.4, Bootstrap mbutuhake markup ekstra ing sakubenge kothak centhang lan radio kanggo numpuk. Saiki, iku prasaja kanggo mbaleni <label class="checkbox">sing mbungkus <input type="checkbox">.
Kothak lan radio inline uga didhukung. Mung nambah .inlinekanggo sembarang .checkboxutawa .radiolan sampeyan wis rampung.
Kanggo nggunakake prepend utawa nambah input ing wangun inline, manawa kanggo nyelehake .add-onlan inputing baris sing padha, tanpa spasi.
Kanggo nambah teks bantuan kanggo input formulir, kalebu teks bantuan inline <span class="help-inline">utawa blok teks bantuan <p class="help-block">sawise unsur input.
Tinimbang nggawe saben lambang minangka panyuwunan ekstra, kita wis nyawiji dadi sprite—kumpulan gambar ing siji file sing nggunakake CSS kanggo posisi gambar nganggo background-position. Iki cara sing padha digunakake ing Twitter.com lan wis bisa uga kanggo kita.
Kabeh kelas lambang diwenehi awalan .icon-kanggo namespacing lan scoping sing tepat, kaya komponen liyane. Iki bakal mbantu supaya ora konflik karo alat liyane.
Glyphicons wis menehi kita nggunakake set Halflings ing toolkit open-source kita anggere kita nyedhiyani link lan kredit kene ing docs. Mangga nimbang nglakoni sing padha ing proyek sampeyan.
Bootstrap nggunakake <i>tag kanggo kabeh lambang, nanging ora duwe kelas cilik-mung ater-ater sing dienggo bareng. Kanggo nggunakake, lebokake kode ing ngisor iki ing ngendi wae:
- <i class = "icon-search" ></i>
Ana uga gaya kasedhiya kanggo lambang kuwalik (putih), digawe siap karo siji kelas ekstra:
- <i class = "icon-search icon-white" ></i>
Ana 140 kelas sing bisa dipilih kanggo lambang sampeyan. Mung nambah <i>tag karo kelas tengen lan sampeyan wis disetel. Sampeyan bisa nemokake dhaptar lengkap ing sprites.less utawa ing kene ing dokumen iki.
Kepala munggah! Nalika nggunakake jejere strings teks, kaya ing tombol utawa pranala nav, manawa kanggo ninggalake spasi sawise <i>tag kanggo spasi sing tepat.
Ikon apik banget, nanging ing endi sing bakal digunakake? Ing ngisor iki sawetara gagasan:
Ateges, ing ngendi wae sampeyan bisa nyelehake <i>tag, sampeyan bisa nyelehake lambang.
Gunakake ing tombol, grup tombol kanggo toolbar, pandhu arah, utawa input formulir prepended.