N'elu ihe nlegharị anya, a na-ahazi ihe ndị bụ isi HTML ma jiri klaasị nwee ike mee ka ọ dị ọhụrụ, ọdịdị na mmetụta na-agbanwe agbanwe.
Ihe niile grid ederede dabere na mgbanwe abụọ pere mpe na mgbanwe anyị. faịlụ enweghị: @baseFontSize
na @baseLineHeight
. Nke mbụ bụ nha font-isi ejiri mee ihe niile na nke abụọ bụ ogologo ahịrị ntọala.
Anyị na-eji mgbanwe ndị ahụ, yana ụfọdụ mgbakọ na mwepụ, iji mepụta oke, paddings, na ogologo ahịrị ụdị anyị niile na ndị ọzọ.
Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor omee. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
Ihe | Ojiji | Nhọrọ |
---|---|---|
<strong> |
Maka iji mkpa dị mkpa mesie snippet nke ederede ike | Ọ dịghị |
<em> |
Maka iji nrụgide mesie snippet nke ederede ike | Ọ dịghị |
<abbr> |
Kechie ndebiri na mkpọghe okwu iji gosi ụdị agbasawanye na hover | Tinye nhọrọ title maka ederede gbasaa |
<address> |
Maka ozi kọntaktị maka nna nna ya kacha nso ma ọ bụ ọrụ niile | Chekwaa nhazi site na iji ahịrị niile mechie<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.
Mara: nweere onwe gị iji <b>
na <i>
HTML5, mana ojiji ha agbanweela ntakịrị. <b>
bu n'obi ime ka okwu ma ọ bụ nkebiokwu pụta ìhè na-ebupụtaghị mkpa ọzọ ebe ọ <i>
na-abụkarị maka olu, okwu teknụzụ, wdg.
Nke a bụ ihe atụ abụọ nke <address>
otu enwere ike iji mkpado ahụ:
A na-eji ederede mkpụrụedemede ukwu na obere ntụpọ nwere ntụpọ dị n'ime ala. Ha nwekwara ihe enyemaka cursor na hover ka ndị ọrụ nwee mgbakwunye ihe ga-egosi ihe na hover.
HTML bụ ihe kacha mma ebe ọ bụ na achịcha sliced.
Mbiri nke okwu àgwà bụ attr .
Ihe | Ojiji | Nhọrọ |
---|---|---|
<blockquote> |
Ihe mgbochi mgbochi maka ịhota ọdịnaya sitere na isi mmalite ọzọ | Tinye .pull-left na .pull-right klaasị maka nhọrọ ndị sere n'elu mmiri |
<small> |
Nhọrọ maka ịgbakwunye nrụtụ aka na-eche onye ọrụ, na-abụkarị onye ode akwụkwọ nwere aha ọrụ | Debe <cite> gburugburu aha ma ọ bụ aha isi iyi |
Iji tinye blockquote, kechie <blockquote>
gburugburu HTML ọ bụla dị ka ntinye okwu. Maka nkwuputa okwu kwụ ọtọ anyị na-akwado a <p>
.
Tinye ihe nhọrọ <small>
iji hota isi mmalite gị ma ị ga-enweta em dash —
n'ihu ya maka ebumnuche ịke.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ọnụọgụ ọnụọgụgụ na-abawanye na ante venenatis. </p>
- <obere> Onye ama ama </small>
- </blockquote>
A na-edopụta okwu ngọngọ dị ka ndị a:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ọnụọgụ ọnụọgụgụ na-abawanye na ante venenatis.
Onye a ma ama n'arụ ọrụ
Ka sere n'elu blockquote gị n'aka nri, tinye class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ọnụọgụ ọnụọgụgụ na-abawanye na ante venenatis.
Onye a ma ama n'arụ ọrụ
<ul>
<ul class="unstyled">
<ol>
<dl>
Jiri snippet kechie koodu inline <code>
.
- Dịka ọmụmaatụ , <code> ngalaba </ code > kwesịrị ka ekpuchie ya dị ka inline .
Jiri <pre>
maka ọtụtụ ahịrị koodu. Jide n'aka na ị ga-atụgharị nlekọta ọ bụla ka ọ bụrụ mkpụrụedemede unicode ha maka nsụgharị nke ọma.
<p>Ihe atụ ederede ebe a...</p>
- < tupu >
- <p>Nlere ederede ebe a...</p>
- </pre>
Cheta na: Jide n'aka na idobe koodu n'ime <pre>
mkpado dị nso n'aka ekpe dịka o kwere mee; ọ ga-emepe taabụ niile.
Were otu <pre>
ihe ahụ ma tinye klaasị nhọrọ abụọ maka nrụpụta nkwalite.
- <p> Ihe atụ ederede ebe a... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Nlere ederede ebe a...</p>
- </pre>
Budata google-code-prettify wee lelee readme maka otu esi eji.
Mkpado | Nkọwa |
---|---|
<table> |
Ihe nkpuchi maka igosipụta data n'ụdị tabular |
<thead> |
Ihe mmewere maka ahịrị nkụnye eji isi mee tebụl ( <tr> ) iji kpọọ ogidi tebụl |
<tbody> |
Ihe eji eme ihe maka ahịrị okpokoro ( <tr> ) n'ime ahụ nke tebụl |
<tr> |
Ngwakọta akpa maka otu mkpụrụ ndụ tebụl ( <td> ma ọ bụ <th> ) nke na-egosi n'otu ahịrị |
<td> |
cell okpokoro mbụ |
<th> |
Mkpụrụ ndụ tebụl pụrụ iche maka kọlụm (ma ọ bụ ahịrị, dabere na oke na ntinye) ga-eji akara n'ime a <thead> |
<caption> |
Nkọwa ma ọ bụ nchịkọta nke ihe tebụl na-ejide, karịsịa bara uru maka ndị na-agụ ihuenyo |
- <tebụl>
- <okwu>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </ thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
Aha | Klas | Nkọwa |
---|---|---|
Ọdabara | Ọ dịghị | Enweghị ụdị, naanị ogidi na ahịrị |
Isi | .table |
Naanị ahịrị kwụ n'etiti ahịrị |
Oke oke | .table-bordered |
Gburugburu akụkụ ma na-agbakwụnye oke n'èzí |
Zebra-eriri | .table-striped |
Na-agbakwunye ụcha okirikiri isi awọ na ahịrị ndị na-adịghị mma (1, 3, 5, wdg) |
Ejikọtara ya | .table-condensed |
Na-egbutu padding kwụ ọtọ na ọkara, site na 8px ruo 4px, n'ime ihe niile td na th ihe niile |
A na-eji naanị oke ala ole na ole hazie tebụl na-akpaghị aka iji hụ na a na-agụ ya na ijikwa usoro ya. Na 2.0, .table
a chọrọ klas ahụ.
- <tebụl klas = "tebụl" >
- …
- </table>
# | Aha mbụ | Aha ikpeazụ | Asụsụ |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jekọb | Thornton | Javascript |
3 | Stu | Det | HTML |
Nweta ntakịrị mmasị na tebụl gị site na ịgbakwunye zebra-striping - naanị tinye .table-striped
klas ahụ.
Mara: Tebụl ndị gbasasịrị na-eji :nth-child
nhọrọ CSS adịghị na IE7-IE8.
- <tebụl klas = "tebụl e kewara tebụl" >
- …
- </table>
# | Aha mbụ | Aha ikpeazụ | Asụsụ |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jekọb | Thornton | Javascript |
3 | Stu | Det | HTML |
Tinye akụkụ gburugburu tebụl na akụkụ gburugburu maka ebumnuche ịchọ mma.
- <tebụl klas = "tebụlụ nwere oke ókè" >
- …
- </table>
# | Aha mbụ | Aha ikpeazụ | Asụsụ |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jekọb | Thornton | Javascript |
3 | Stu | Det | |
3 | Brosef | Stalin | HTML |
Mee ka tebụl gị dịkwuo kọmpat site n'ịgbakwunye .table-condensed
klaasị ka ebibie cell padding na ọkara (site na 8px ruo 4px).
- <tebụl klas = "tebụl-condensed" >
- …
- </table>
# | Aha mbụ | Aha ikpeazụ | Asụsụ |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jekọb | Thornton | Javascript |
3 | Stu | Det | HTML |
Enwere onwe gị ijikọ klaasị tebụl ọ bụla iji nweta ọdịdị dị iche iche site na iji klaasị ọ bụla dị.
- <tebụlụ klas = "tebụlụ nwere tebulu nke nwere tebulu nke nwere oke n'akụkụ tebụl" >
- ...
- </table>
# | Aha mbụ | Aha ikpeazụ | Asụsụ |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Jekọb | Thornton | Javascript |
3 | Stu | Det | HTML |
4 | Brosef | Stalin | HTML |
Akụkụ kachasị mma gbasara ụdị dị na Bootstrap bụ na ntinye na njikwa gị niile na-adị mma n'agbanyeghị otu esi ewulite ha na akara gị. Ọ nweghị HTML enweghị oke achọrọ, mana anyị na-enye ụkpụrụ maka ndị chọrọ ya.
Nhazi ndị gbagwojuru anya na-abịa na klaasị dị nkenke na nke nwere ike ịgbatị maka nhazi dị mfe yana njikọ mmemme, yabụ ị na-ekpuchi ya na usoro ọ bụla.
Bootstrap na-abịa na nkwado maka ụdị nhazi ụdị anọ:
Ụdị nhazi ụdị dị iche iche chọrọ mgbanwe ụfọdụ iji mee akara, mana njikwa n'onwe ha na-anọgide ma na-akpa àgwà otu.
Ụdị Bootstrap gụnyere ụdị maka njikwa ụdị ntọala niile dị ka ntinye, ederede, na họrọ ị ga-atụ anya ya. Mana ọ na-abịa na ọtụtụ ngwa omenala dị ka ntinye agbakwunyere na nke akwadoro na nkwado maka ndepụta igbe nlele.
Agụnyere steeti dị ka njehie, ịdọ aka ná ntị na ihe ịga nke ọma maka ụdị njikwa ụdị ọ bụla. Agbanyekwara bụ ụdị maka njikwa nkwarụ.
Bootstrap na-enye akara dị mfe na ụdị maka ụdị anọ nke ụdị weebụ nkịtị.
Aha | Klas | Nkọwa |
---|---|---|
Vetikal (nke ndabara) | .form-vertical (anaghị achọ) |
Akpọkọbara, akara aka ekpe n'elu njikwa |
N'ahịrị | .form-inline |
Akara aka ekpe na njikwa mgbochi inline maka ụdị kọmpat |
Chọọ | .form-search |
Ntinye ederede agbagoro agbagoro maka ịchọ mma achọkarị |
Kehoraizin | .form-horizontal |
Fee n'elu aka ekpe, akara aka nri kwadoro n'otu ahịrị dị ka njikwa |
Site na v2.0, anyị nwere ndabara dị mfe na nke mara mma maka ụdị ụdị. Enweghị nrịbama ọzọ, naanị ụdị njikwa.
Na-atụgharị ụdịdị WebKit ndabara, tinye naanị .form-search
maka mpaghara ọchụchọ gbara okirikiri.
Ntinye bụ ọkwa mgbochi ịmalite. Maka .form-inline
na .form-horizontal
, anyị na-eji ngọngọ inline.
Egosiri n'aka ekpe bụ njikwa ụdị ndabara niile anyị na-akwado. Nke a bụ ndepụta mgbọ:
Ruo v1.4, ụdị ndabara nke Bootstrap ji okirikiri nhọrọ ukwuu. Site na Bootstrap 2, anyị wepụrụ mmachi ahụ ka ọ nwee amamihe karịa, ndabara nwere ike ịgbatị karịa maka ụdị ọ bụla.
Bootstrap nwere ụdị maka ihe nchọgharị akwadoro lekwasịrị anya na disabled
steeti. Anyị na-ewepụ Webkit ndabara outline
wee tinye box-shadow
n'ọnọdụ ya maka :focus
.
Ọ gụnyekwara ụdị nkwado maka mmejọ, ịdọ aka ná ntị na ịga nke ọma. Iji jiri, tinye klaasị njehie na gburugburu .control-group
.
- <fieldset
- klas = "njehie otu njikwa" >
- …
- </fieldset>
Otu ntinye - nke nwere ederede agbakwunyere ma ọ bụ nke emebere ya - na-enye ụzọ dị mfe iji nyekwuo ọnọdụ maka ntinye gị. Nnukwu ọmụmaatụ gụnyere @ akara maka aha njirimara Twitter ma ọ bụ $ maka ego.
Ruo v1.4, Bootstrap chọrọ ntinye akara n'akụkụ igbe nlele na redio iji kpokọta ha. Ugbu a, ọ bụ ihe dị mfe ikwugharị nke <label class="checkbox">
na-ekpuchi <input type="checkbox">
.
A na-akwadokwa igbe nrịbama n'ịntanetị na redio. Naanị tinye .inline
na nke ọ bụla .checkbox
ma ọ bụ .radio
na ị mechara.
Iji jiri prepend ma ọ bụ tinye ntinye n'ụdị inline, jide n'aka na itinye ya .add-on
na input
otu ahịrị, na-enweghị oghere.
Ka ịgbakwunye ederede enyemaka maka ntinye ụdị gị, tinye ederede enyemaka inline <span class="help-inline">
ma ọ bụ ngọngọ ederede enyemaka <p class="help-block">
mgbe mmewere ntinye.
:after
. N'ime akwụkwọ ndị ahụ, anyị na-egosi ụcha okirikiri uhie na-acha uhie uhie ka ọ na-egosipụta nha akara ngosi ahụ.
Kama ime akara ngosi ọ bụla ka ọ bụrụ arịrịọ agbakwunyere, anyị achịkọtala ha ka ọ bụrụ sprite — ụyọkọ onyonyo n'otu faịlụ na-eji CSS idobe onyonyo na background-position
. Nke a bụ otu usoro anyị na-eji na Twitter.com ma ọ rụpụtagoro anyị nke ọma.
A na-edobe klaasị akara ngosi niile nke .icon-
ọma maka mkpị aha na nlegharị anya, dị ka ihe ndị ọzọ anyị mejupụtara. Nke a ga - enyere aka zere esemokwu na ngwaọrụ ndị ọzọ.
Glyphicons enyela anyị ohere iji Halflings setịpụrụ na ngwa ngwa anyị mepere emepe ma ọ bụrụhaala na anyị na-enye njikọ na kredit ebe a na docs. Biko tụlee ime otu ihe ahụ na ọrụ gị.
Site na v2.0.0, anyị ahọrọla iji <i>
mkpado maka akara ngosi anyị niile, mana ha enweghị klas ikpe-naanị prefix nkekọrịta. Iji jiri, tinye koodu na-esonụ ebe ọ bụla:
- <i class = "akara ngosi-nyocha" </i>
Enwekwara ụdịdị maka akara ngosi (ọcha) tụgharịrị, ejiri otu klaasị gbakwunyere mee ya:
- <i class = "akara ngosi-nyocha-ọcha" >>
Enwere klaasị 120 ịhọrọ maka akara ngosi gị. Naanị tinye <i>
mkpado na klaasị ziri ezi wee hazie gị. Ị nwere ike ịchọta ndepụta zuru ezu na sprites.less ma ọ bụ nri ebe a na akwụkwọ a.
Akara ngosi mara mma, mana kedụ ebe mmadụ ga-eji ha? Nke a bụ echiche ole na ole:
N'ezie, ebe ọ bụla ị nwere ike itinye <i>
mkpado, ị nwere ike itinye akara ngosi.
Jiri ha na bọtịnụ, otu bọtịnụ maka ogwe ngwaọrụ, igodo, ma ọ bụ ntinye ụdị echedoro.