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: @baseFontSize
lan @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, 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 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 | 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 opsional title kanggo teks sing ditambahi |
<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 frase tanpa menehi wigati tambahan nalika <i>
biasane kanggo swara, istilah teknis, lsp.
Ing ngisor iki ana rong conto carane <address>
tag bisa digunakake:
Singkatan ditata nganggo teks huruf gedhe lan wates ngisor titik cahya. Dheweke uga duwe kursor bantuan ing hover supaya pangguna duwe indikasi tambahan sing bakal ditampilake ing hover.
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-left lan .pull-right kelas 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>
Bungkus potongan kode inline nganggo <code>
.
- Contone , < code> bagean </ code > kudu dibungkus minangka inline .
Gunakake <pre>
kanggo sawetara baris kode. Priksa manawa sampeyan ngowahi sembarang carets dadi karakter unicode kanggo rendering sing tepat.
<p>Conto teks ing kene...</p>
- <pre>
- <p>Conto teks ing kene...</p>
- </pre>
Cathetan: Pesthekake supaya kode tetep ing <pre>
tag paling cedhak ing sisih kiwa; iku bakal nerjemahake kabeh tab.
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 kanggo 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 td lan th unsur |
Tabel kanthi otomatis gaya mung sawetara wates kanggo mesthekake readability lan njaga struktur. Kanthi 2.0, .table
kelas dibutuhake.
- < kelas tabel = "tabel" >
- …
- </tabel>
# | Jeneng pisanan | Jeneng mburi | Basa |
---|---|---|---|
1 | Tandhani | Otto | CSS |
2 | Yakub | Thornton | Javascript |
3 | Stu | Dent | HTML |
Nggawe meja kanthi apik kanthi nambahake zebra-striping-mung nambah .table-striped
kelas.
Cathetan: Tabel sprite nggunakake :nth-child
pamilih CSS lan ora kasedhiya ing IE7-IE8.
- <table class = "table table-striped" >
- …
- </tabel>
# | Jeneng pisanan | Jeneng mburi | Basa |
---|---|---|---|
1 | Tandhani | Otto | CSS |
2 | Yakub | Thornton | Javascript |
3 | Stu | Dent | HTML |
Tambah wates ing sakubenge kabeh meja lan sudhut bunder kanggo tujuan estetis.
- <table class = "table table-bordered" >
- …
- </tabel>
# | Jeneng pisanan | Jeneng mburi | Basa |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Yakub | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
Nggawe tabel luwih kompak kanthi nambahake .table-condensed
kelas kanggo Cut padding sel tabel ing setengah (saka 8px kanggo 4px).
- <table class = "table table-condensed" >
- …
- </tabel>
# | Jeneng pisanan | Jeneng mburi | Basa |
---|---|---|---|
1 | Tandhani | Otto | CSS |
2 | Yakub | Thornton | Javascript |
3 | Stu | Dent | HTML |
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 pisanan | Jeneng mburi | Basa |
---|---|---|---|
1 | Tandhani | Otto | CSS |
2 | Yakub | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
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 dilengkapi 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:
Beda jinis tata letak formulir 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 |
Kanthi v2.0, kita duwe standar sing luwih entheng lan luwih pinter kanggo gaya formulir. Ora ana markup ekstra, mung kontrol formulir.
Nggambarake gaya WebKit standar, tambahake .form-search
kanggo kolom telusuran sing dibunderaké.
Input minangka level blok kanggo miwiti. Kanggo .form-inline
lan .form-horizontal
, kita nggunakake inline-block.
Dituduhake ing sisih kiwa kabeh kontrol wangun standar sing kita ndhukung. Punika dhaptar bullet:
Nganti v1.4, gaya standar Bootstrap nggunakake tata letak horisontal. Kanthi Bootstrap 2, kita ngilangi kendala kasebut supaya duwe standar sing luwih pinter lan bisa diukur kanggo wangun apa wae.
Bootstrap nduweni gaya kanggo fokus lan disabled
negara sing didhukung browser. Kita mbusak Webkit gawan outline
lan aplikasi box-shadow
ing panggonan iku 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 .inline
kanggo sembarang .checkbox
utawa .radio
lan sampeyan wis rampung.
Kanggo nggunakake prepend utawa nambah input ing wangun inline, manawa kanggo nyelehake .add-on
lan input
ing 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.
:after
. Ing docs, kita nuduhake werna latar mburi abang cahya ing hover kanggo nyorot ukuran lambang.
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 minangka cara sing padha sing digunakake ing Twitter.com lan wis bisa digunakake kanthi apik 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.
Kanthi v2.0.0, kita wis milih nggunakake <i>
tag kanggo kabeh lambang, nanging padha 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 120 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.
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.