Ederede HTML ndị bụ isi ma jiri klaasị nwee ike kwalite.
Isi HTML niile, <h1>
site <h6>
na dị.
Ndabara zuru ụwa ọnụ nke Bootstrap font-size
bụ 14px , yana line-height
nke 20px . A na-etinye nke a <body>
na paragraf niile. Na mgbakwunye, <p>
(paragraf) na-enweta oke ala nke ọkara ogologo ahịrị ha (9px na ndabara).
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.
N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Donec ullamcorper nulla na-abụghị metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla na-abụghị metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Achọpụtaghị m porta gravida na eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p> ... </p>
Mee ka paragraf pụta ìhè site n'ịgbakwunye .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor omee. Duis mollis, ọ bụghị commodo luctus.
<p klas = "edu" > ... </p>
Ọnụ ọgụgụ ederede dabere na mgbanwe abụọ dị obere na mgbanwe . obere : @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ụ na ụfọdụ mgbakọ na mwepụ dị mfe iji mepụta oke, paddings, na ogologo ahịrị ụdị anyị niile na ndị ọzọ. Hazie ha na Bootstrap na-emegharị.
Jiri mkpado mkpado ndabara HTML jiri ụdị dị fechaa mee ihe.
<small>
Maka imesi ike inline ma ọ bụ ngọngọ ederede, jiri obere mkpado.
Ezubere ahịrị ederede a ka ewere ya dị ka ezigbo mbipụta.
<p> <obere> Ahịrị ederede a bụ ka e were were dị ka ezigbo mbipụta. </small> </p>
<strong>
Maka iji mkpa dị mkpa mesie snippet nke ederede ike
Asụgharịrị snippet nke a dị ka ederede siri ike .
<strong> sụgharịrị dị ka ederede nkwuwa okwu </strong>
<em>
Maka iji nrụgide mesie snippet nke ederede ike
Asụgharịrị snipet ederede na-esote dị ka ederede italicized .
<em> sụgharịrị dị ka ederede </em>
Welie isi elu! Enwere onwe gị iji <b>
na <i>
HTML5. <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.
Mmejuputa ihe HTML emeziri nke <abbr>
ọma maka ndebiri na mkpọ okwu iji gosi ụdị agbasawanye na hover. Mbiri nke nwere title
njiri mara nwere obere ntụpọ nwere ntụpọ ala yana ihe enyemaka na hover, na-enye mgbakwunye mgbakwunye na hover.
<abbr>
Maka ederede gbasaara ogologo oge nke ndebiri, tinye title
njiri mara.
Mbiri nke okwu àgwà bụ attr .
<abbr aha = "njirimara" > attr </abbr>
<abbr class="initialism">
Tinye .initialism
na ndebiri maka obere mkpụrụedemede pere mpe.
HTML bụ ihe kacha mma ebe ọ bụ na achịcha sliced.
<abbr aha = "njirimara" klaasị = "initialism" > attr </abbr>
Nye ozi kọntaktị maka nna nna kacha nso ma ọ bụ akụkụ niile nke ọrụ.
<address>
Chekwaa nhazi site na iji ahịrị niile mechie <br>
.
- <adreesị>
- <strong> Twitter, Inc. </strong><br>
- 795 Folsom Ave, Suite 600 <br>
- San Francisco, CA 94107 <br>
- <abbr aha = "ekwentị" > P: </abbr> (123) 456-7890
- </ address>
- <adreesị>
- <strong> Aha zuru oke </strong><br>
- <a href = "mailto:#" > [email protected] </a>
- </ address>
Maka ịhota ngọngọ nke ọdịnaya sitere na isi mmalite ọzọ n'ime akwụkwọ gị.
Kechie <blockquote>
gburugburu HTML ọ bụla dị ka ntinye akwụkwọ. Maka nkwuputa okwu kwụ ọtọ anyị na-akwado a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe. </p>
- </blockquote>
Ụdị na ọdịnaya na-agbanwe maka ndịiche dị mfe na ọkọlọtọ blockquote.
Tinye <small>
mkpado maka ịchọpụta isi mmalite. Kechie aha ọrụ isi mmalite na <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
Onye ama ama na Isi mmalite
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe. </p>
- <small> Onye ama ama <cite title = "Isi mmalite" > Isi mmalite </cite></small>
- </blockquote>
Jiri .pull-right
maka ihe mgbochi n'esepụghị aka na aka nri.
- <blockquote class = "pull-right" >
- ...
- </blockquote>
Ndepụta ihe nke usoro ahụ adịghị mkpa n'ụzọ doro anya.
- <ul>
- <li> ... </li>
- </ul>
Ndepụta nke ihe n'usoro na- emetụta nke ọma.
- <ol>
- <li> ... </li>
- </ol>
Ndepụta ihe na-enweghị list-style
ma ọ bụ agbakwunyere padding aka ekpe.
- <ul klas = "Enweghị ụdịdị" >
- <li> ... </li>
- </ul>
Ndepụta okwu na nkọwa ha metụtara.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Mee usoro na nkọwa <dl>
n'ahịrị n'akụkụ n'akụkụ.
- <dl klas = "dl-horizontal" >
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Welie isi elu! Ndepụta nkọwa kwụ ọtọ ga-ewepụ okwu ndị toro ogologo na ọ dabara na nhazi kọlụm aka ekpe text-overflow
. N'ọdụ ụgbọ mmiri dị warara, ha ga-agbanwe gaa na nhazi nke etinyere nke ọma.
Jiri snippet kechie koodu inline <code>
.
<section>
ekwesịrị ịfụkọta ya dị ka inline.
- Dịka ọmụmaatụ , <code> ngalaba> </ koodu > kwesịrị ka ekpuchie ya dị ka inline .
Jiri <pre>
maka ọtụtụ ahịrị koodu. Jide n'aka na ị ga-agbanarị brackets akụkụ ọ bụla dị na koodu maka nsụgharị kwesịrị ekwesị.
<p>Ihe atụ ederede ebe a...</p>
- < tupu >
- <p>Nlere ederede ebe a...</p>
- </pre>
Welie isi elu! Jide n'aka na idobe koodu n'ime <pre>
mkpado dị nso n'aka ekpe dịka o kwere mee; ọ ga-emepe taabụ niile.
Ị nwere ike ịgbakwunye .pre-scrollable
klas ahụ nke ga-edobe max-elu 350px wee nye akwụkwọ mpịakọta y-axis.
Maka nhazi nke nkiti — padding ọkụ na naanị ndị na-ekesa kehoraizin — tinye klaasị isi na nke .table
ọ bụla <table>
.
# | Aha mbụ | Aha ikpeazụ | Aha njirimara |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jekọb | Thornton | @abụba |
3 | Larry | Nnụnụ ahụ |
- <tebụl klas = "tebụl" >
- …
- </table>
Tinye ihe ọ bụla n'ime klaasị ndị a na klaasị .table
ntọala.
.table-striped
Na-agbakwụnye eriri zebra na ahịrị tebụl ọ bụla n'ime <tbody>
site na onye na :nth-child
-ahọrọ CSS (adịghị na IE7-IE8).
# | Aha mbụ | Aha ikpeazụ | Aha njirimara |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jekọb | Thornton | @abụba |
3 | Larry | Nnụnụ ahụ |
- <tebụl klas = "tebụl e kewara tebụl" >
- …
- </table>
.table-bordered
Tinye akuku na akụkụ gburugburu na tebụl.
# | Aha mbụ | Aha ikpeazụ | Aha njirimara |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @getbootstrap | |
2 | Jekọb | Thornton | @abụba |
3 | Larry The Bird |
- <tebụl klas = "tebụlụ nwere oke ókè" >
- …
- </table>
.table-hover
Kwado ọnọdụ hover na ahịrị tebụl n'ime a <tbody>
.
# | Aha mbụ | Aha ikpeazụ | Aha njirimara |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jekọb | Thornton | @abụba |
3 | Larry The Bird |
- <table class = "tebụl-hover" >
- …
- </table>
.table-condensed
Na-eme ka tebụl dị kọmpat karịa site n'ịbelata ihe mgbochi cell na ọkara.
# | Aha mbụ | Aha ikpeazụ | Aha njirimara |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jekọb | Thornton | @abụba |
3 | Larry The Bird |
- <tebụl klas = "tebụl-condensed" >
- …
- </table>
Jiri klaasị okirikiri mee ka ahịrị tebụl agba agba.
Klas | Nkọwa |
---|---|
.success |
Na-egosi omume ọma ma ọ bụ nke ọma. |
.error |
Na-egosi omume dị ize ndụ ma ọ bụ nwere ike adịghị mma. |
.info |
Ejiri ya dị ka ihe ọzọ na ụdị ndabara. |
# | Ngwaahịa | Anara ugwo | Ọnọdụ |
---|---|---|---|
1 | TB - kwa ọnwa | 01/04/2012 | Ekwenyere |
2 | TB - kwa ọnwa | 02/04/2012 | Ajụjụ |
3 | TB - kwa ọnwa | 03/04/2012 | Na-echere |
- ...
- < tr klas = "ihe ịga nke ọma" >
- 1 < td >
- <td>TB - kwa ọnwa</ td >
- <td> 01 / 04 / 2012 < /td>
- <td>Akwadoro</ td >
- </ tr >
- ...
Ndepụta HTML ihe tebụl akwadoro yana otu esi eji ha.
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>
- <caption> ... </caption>
- <okwu>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </ thead>
- <tbody>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </table>
Njikwa ụdị n'otu n'otu na-enweta styling, mana na-enweghị klaasị ọ bụla achọrọ na <form>
mgbanwe ma ọ bụ nnukwu mgbanwe na akara. Nsonaazụ dị n'ahịrị ndị ekpokọtara ọnụ, aka ekpe n'elu njikwa ụdị.
- <ụdị>
- <akụkọ ifo > Akụkọ mgbe ochie
- <label> Aha akara </label>
- < ụdị ntinye = "ederede" ebe nchekwa = "Pịnye ihe..." >
- <span class = "help-block" > Ihe atụ ederede enyemaka ngọngọ ebe a. </span>
- <label class = "checkbox" >
- < ụdị ntinye = "checkbox" > Lelee m
- </label>
- < ụdị bọtịnụ = "nyefere" klas = "btn" > Nyefee </button>
- </form>
Tinyere ya na Bootstrap bụ nhazi ụdị nhọrọ atọ maka ikpe ndị a na-ejikarị eme ihe.
Tinye .form-search
na mpempe akwụkwọ na .search-query
na <input>
maka ntinye ederede agbakọtara.
- <ụdị klas = "ụdị-nyocha" >
- < ụdị ntinye = "ederede" klaasị = "ajụjụ-ajụjụ ntinye-medium" >
- <button type = "nyefere" klas = "btn" > Chọọ </button>
- </form>
Tinye .form-inline
maka akara aka ekpe na njikwa mgbochi inline maka nhazi kọmpat.
- <ụdị klas = "ụdị-inline" >
- < ụdị ntinye = "ederede" klaasị = "ntinye-small" ebe nchekwa = "Email" >
- < ụdị ntinye = "paswọọdụ" klas = "ntinye-small" ebe nchekwa = "Paswọọdụ" >
- <label class = "checkbox" >
- < ụdị ntinye = "checkbox" > Cheta m
- </label>
- <button type = "nyefere" klaasị = "btn" > Banye </button>
- </form>
Hazie akara n'aka nri wee see ha n'aka ekpe ka ha pụta n'otu ahịrị dị ka njikwa. Achọrọ mgbanwe nrịbama kachasị site na ụdị ndabara:
.form-horizontal
na mpempe akwụkwọ.control-group
.control-label
na labelụ.controls
maka nhazi kwesịrị ekwesị
- <ụdị klas = "ụdị-horizontal" >
- <div class = "control-otu" >
- <label class = "control-label" maka = "inputEmail" > Email </label>
- <div class = "njikwa" >
- < ụdị ntinye = "ederede" id = "inputEmail" ebe nchekwa = "Email" >
- </div>
- </div>
- <div class = "control-otu" >
- <label class = "control-label" maka = "inputPassword" > Okwuntughe </label>
- <div class = "njikwa" >
- < ụdị ntinye = "paswọọdụ" id = "inputPassword" ebe nchekwa = "Paswọọdụ" >
- </div>
- </div>
- <div class = "control-otu" >
- <div class = "njikwa" >
- <label class = "checkbox" >
- < ụdị ntinye = "checkbox" > Cheta m
- </label>
- <button type = "nyefere" klaasị = "btn" > Banye </button>
- </div>
- </div>
- </form>
Ihe atụ nke njikwa ụdị ọkọlọtọ akwadoro na nhazi ụdị ihe atụ.
Njikwa ụdị a na-ahụkarị, mpaghara ntinye dabere na ederede. Gụnyere nkwado maka ụdị HTML5 niile: ederede, okwuntughe, oge ụbọchị, oge ụbọchị - mpaghara, ụbọchị, ọnwa, oge, izu, nọmba, email, url, ọchụchọ, tel, na agba.
Na-achọ ka ojiji nke akọwapụtara type
n'oge niile.
- < ụdị ntinye = "ederede" ebe nchekwa = "ntinye ederede" >
Njikwa ụdị nke na-akwado ọtụtụ ahịrị ederede. Gbanwee row
àgwà ka ọ dị mkpa.
- <textarea ahịrị = "3" > </textarea>
Igbe nlele bụ maka ịhọrọ otu ma ọ bụ ọtụtụ nhọrọ na ndepụta ebe redio bụ maka ịhọrọ otu nhọrọ n'ime ọtụtụ.
- <label class = "checkbox" >
- < ụdị ntinye = "checkbox" uru = "" >
- Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
- </label>
- <label klas = "redio" >
- < ụdị ntinye = "redio" aha = "nhọrọRadios" id = "nhọrọRadios1" uru = "nhọrọ1" enyochara >
- Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
- </label>
- <label klas = "redio" >
- < ụdị ntinye = "redio" aha = "nhọrọRadios" id = "nhọrọRadios2" uru = "nhọrọ2" >
- Nhọrọ nke abụọ nwere ike ịbụ ihe ọzọ na ịhọrọ ya ga-ewepụ nhọrọ otu
- </label>
Tinye .inline
klas ahụ na igbe nlele ma ọ bụ redio maka njikwa pụtara n'otu ahịrị.
- <label klas = "checkbox inline" >
- < ụdị ntinye = "checkbox" id = "inlineCheckbox1" uru = "nhọrọ1" > 1
- </label>
- <label klas = "checkbox inline" >
- < ụdị ntinye = "checkbox" id = "inlineCheckbox2" uru = "nhọrọ2" > 2
- </label>
- <label klas = "checkbox inline" >
- < ụdị ntinye = "checkbox" id = "inlineCheckbox3" uru = "nhọrọ3" > 3
- </label>
Jiri ndabara nhọrọ ma ọ bụ ezipụta a multiple="multiple"
iji gosi ọtụtụ nhọrọ otu mgbe.
- <họrọ>
- <nhọrọ> 1 </nhọrọ>
- <nhọrọ> 2 </nhọrọ>
- <nhọrọ> 3 </nhọrọ>
- <nhọrọ> 4 </nhọrọ>
- <nhọrọ> 5 </nhọrọ>
- </họrọ>
- <họrọ otutu = "ọtụtụ" >
- <nhọrọ> 1 </nhọrọ>
- <nhọrọ> 2 </nhọrọ>
- <nhọrọ> 3 </nhọrọ>
- <nhọrọ> 4 </nhọrọ>
- <nhọrọ> 5 </nhọrọ>
- </họrọ>
Na-agbakwụnye n'elu njikwa ihe nchọgharị dị adị, Bootstrap gụnyere ihe ndị ọzọ bara uru ụdị ngwa.
Tinye ederede ma ọ bụ bọtịnụ tupu ma ọ bụ mgbe ntinye dabere na ederede ọ bụla. Rịba ama na select
akwadoghị ihe ndị a ebe a.
Kechie .add-on
otu input
n'ime klaasị abụọ iji kwado ma ọ bụ tinye ederede na ntinye.
- <div klas = "ntinye-prepend" >
- <span class = "add-on" > @ </span>< ụ klaasị = "span2" id = "prependedInput" size = "16" ụdị = "ederede" ebede = "Aha njirimara" >
- </div>
- <div class = "ntinye-append" >
- < klas ntinye = "span2" id = "appendedInput" nha = "16" ụdị = "ederede" ><span klas = "agbakwunyere" > .00 </span>
- </div>
Jiri ma klaasị na ihe atụ abụọ .add-on
iji kwado ma tinye ntinye.
- <div class = " ntinye-prepend ntinye-append" >
- <span class = "add-on" > $ </span>< ụ klaasị = "span2" id = "appendedPrependedInput" size = "16" ụdị = "ederede" ><span klas = "gbakwunye-na" > .00 </span>
- </div>
Kama nke <span>
nwere ederede, jiri a .btn
tinye bọtịnụ (ma ọ bụ abụọ) na ntinye.
- <div class = "ntinye-append" >
- < klas ntinye = "span2" id = "appendedInputButton" nha = "16" ụdị = "ederede" ><button klas = "btn" ụdị = "bọtịnụ" > Gaa! </bọtịnụ>
- </div>
- <div class = "ntinye-append" >
- < klas ntinye = "span2" id = "appendedInputButtons" size = "16" ụdị = "ederede" ><button klas = "btn" ụdị = "bọtịnụ" > Chọọ </button><button klas = "btn" ụdị = "bọtịnụ" > Nhọrọ </button>
- </div>
- <ụdị klas = "ụdị-nyocha" >
- <div class = "ntinye-append" >
- < ụdị ntinye = "ederede" klaasị = "span2 search-query" >
- <button type = "nyefere" klas = "btn" > Chọọ </button>
- </div>
- <div klas = "ntinye-prepend" >
- <button type = "nyefere" klas = "btn" > Chọọ </button>
- < ụdị ntinye = "ederede" klaasị = "span2 search-query" >
- </div>
- </form>
Jiri klaasị nha nha dịka .input-large
ma ọ bụ dakọtara ntinye gị na nha kọlụm grid site na iji .span*
klaasị.
- < klas ntinye = " ụdị ntinye-mini" = "ederede" ebe nchekwa = " .input -mini" >
- < klas ntinye = " ụdị ntinye-small" = "ederede" ebe nchekwa = " .input -small" >
- < klas ntinye = " ụdị ntinye-medium" = "ederede" ebe nchekwa = " .input -medium" >
- < klas ntinye = " ụdị ntinye-large" = "ederede" ebe nchekwa = " .input -large" >
- < klas ntinye = " ụdị ntinye-xlarge" = "ederede" ebe nchekwa = ".input-xlarge" >
- < klas ntinye = " ụdị ntinye-xxlarge" = "ederede" ebe nchekwa = ".input-xxlarge" >
Welie isi elu! N'ụdị ga-abịa n'ihu, anyị ga na-agbanwe ojiji nke klaasị ntinye ndị ikwu ka ọ dabara nha bọtịnụ anyị. Ọmụmaatụ, .input-large
ga-abawanye mpe mpe akwa na nha font nke ntinye.
Jiri .span1
maka .span12
ntinye dakọtara nha nke kọlụm grid.
- < klas ntinye = "span1" ụdị = "ederede" ebe nchekwa = ".span1" >
- < klas ntinye = "span2" ụdị = "ederede" ebe nchekwa = ".span2" >
- < klas ntinye = "span3" ụdị = "ederede" ebe nchekwa = ".span3" >
- <họrọ klas = "span1" >
- ...
- </họrọ>
- <họrọ klas = "span2" >
- ...
- </họrọ>
- <họrọ klas = "span3" >
- ...
- </họrọ>
Maka ọtụtụ ntinye grid kwa ahịrị, jiri .controls-row
klaasị modifier maka oghere kwesịrị ekwesị . Ọ na-ese n'elu ihe ntinye ka ọ daa oghere ọcha, na-edozi oke nke kwesịrị ekwesị, na-ekpochapụ ihe ise n'elu mmiri.
- <div class = "njikwa" >
- < klas ntinye = "span5" ụdị = "ederede" ebe nchekwa = ".span5" >
- </div>
- <div class = "njikwa-ahiri" >
- < klas ntinye = "span4" ụdị = "ederede" ebe nchekwa = ".span4" >
- < klas ntinye = "span1" ụdị = "ederede" ebe nchekwa = ".span1" >
- </div>
- ...
Wepụta data n'ụdị anaghị edezi na-ejighi akara n'ezie.
- <span class = "input-xlarge uneditable-input" > Ụfọdụ uru ebe a </span>
Mechie mpempe akwụkwọ na otu omume (bọtịnụ). Mgbe etinyere n'ime a .form-horizontal
, bọtịnụ ndị ahụ ga-abanye na-akpaghị aka ka ha na njikwa ụdị.
- <div class = "ụdị-omume" >
- <button type = "nyefere" klas = "btn btn-primary" > Chekwa mgbanwe </button>
- < ụdị bọtịnụ = "bọtịnụ" klas = "btn" > Kagbuo </button>
- </div>
Nkwado n'ahịrị na ngọngọ maka ederede enyemaka na-egosi gburugburu njikwa ụdị.
- <input type = "text" ><span class = "help-inline" > Ederede enyemaka ntanetị </span>
- <input type = "text" ><span class = "help-block" > Mgbochi ederede enyemaka dị ogologo nke na-adaba n'ahịrị ọhụrụ ma nwee ike ịgbatị karịa otu ahịrị. </span>
Nye nzaghachi nye ndị ọrụ ma ọ bụ ndị ọbịa nwere steeti nzaghachi bụ isi na njikwa ụdị na akara.
Anyị na-ewepụ ụdị ndabara outline
na ụfọdụ njikwa ụdị wee tinye a box-shadow
n'ọnọdụ ya maka :focus
.
- < klas ntinye = "ntinye-xlarge" id = "focusedInput" ụdị = "ederede" uru = "Nke a lekwasịrị anya..." >
Tinye disabled
njirimara na ntinye iji gbochie ntinye onye ọrụ wee kpalite ọdịdị dịtụ iche.
- < klas ntinye = "input-xlarge" id = "disabledInput" ụdị = "ederede" ebe nchekwa = "Ntinye nwere nkwarụ ebe a..." nwere nkwarụ >
Bootstrap gụnyere ụdị nkwado maka njehie, ịdọ aka ná ntị na ozi ịga nke ọma. Iji jiri, tinye klaasị kwesịrị ekwesị na gburugburu .control-group
.
- <div class = "ịdọ aka na ntị otu ìgwè" >
- <label class = "control-label" maka = "inputWarning" > Ntinye na ịdọ aka ná ntị </label>
- <div class = "njikwa" >
- < ụdị ntinye = "ederede" id = "inputWarning" >
- <span class = "help-inline" > Ọ nwere ike bụrụ na ọ garaghị nke ọma </span>
- </div>
- </div>
- <div class = "njehie otu njikwa" >
- <label class = "control-label" maka = "inputError" > Ntinye nwere mperi </label>
- <div class = "njikwa" >
- < ụdị ntinye = "ederede" id = "inputError" >
- <span class = "help-inline" > Biko dozie njehie ahụ </span>
- </div>
- </div>
- <div class = "ihe ịga nke ọma otu njikwa" >
- <label class = "control-label" maka = "inputSuccess" > Ntinye na ihe ịga nke ọma </label>
- <div class = "njikwa" >
- < ụdị ntinye = "ederede" id = "inputSuccess" >
- <span class = "help-inline" > Woohoo! </span>
- </div>
- </div>
Tinye klaasị na <img>
mmewere iji hazie onyonyo n'ụzọ dị mfe na ọrụ ọ bụla.
- <img src = "..." klaasị = "img-rounded" >
- <img src = "..." klaasị = "img-circle" >
- <img src = "..." klaasị = "img-polaroid" >
Welie isi elu! .img-rounded
ma .img-circle
ghara ịrụ ọrụ na IE7-8 n'ihi enweghị border-radius
nkwado.
Akara ngosi 140 n'ụdị sprite, dị na isi awọ gbara ọchịchịrị (nke ndabara) na ọcha, nke Glyphicons nyere .
Glyphicons Halflings anaghị adị n'efu, mana nhazi dị n'etiti Bootstrap na ndị okike Glyphicons emeela ka nke a kwe omume n'efu dị ka ndị nrụpụta. Dịka ekele gị, anyị na-arịọ gị ka itinye njikọ nhọrọ azụ na Glyphicons mgbe ọ bụla ọ bara uru.
Akara ngosi niile chọrọ <i>
mkpado nwere klaasị pụrụ iche, nke etinyere ya na icon-
. 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ị akwadoro. Anyị ga-amanye klaasị a kpọmkwem na hover na steeti na-arụ ọrụ maka njikọ ụgbọ mmiri na dropdown.
- <i class = "akara ngosi-nyocha-ọcha" >>
Welie isi elu! Mgbe ị na-eji n'akụkụ eriri ederede, dị ka ọ dị na bọtịnụ ma ọ bụ njikọ nav, jide n'aka na ị ga-ahapụ oghere mgbe <i>
mkpado ahụ gasịrị maka oghere kwesịrị ekwesị.
Jiri ha na bọtịnụ, otu bọtịnụ maka ogwe ngwaọrụ, igodo, ma ọ bụ ntinye ụdị echedoro.
- <div class = "btn-toolbar" >
- <div klas = "btn-otu" >
- <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
- </div>
- </div>
- <div klas = "btn-otu" >
- <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Onye ọrụ </a>
- <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
- <ul klas = "ndropdown-menu" >
- <li><a href = "#" ><i class = "icon-pencil" ></i> Dezie </a></li>
- <li><a href = "#" ><i class = "icon-trash" ></i> Hichapụ </a></li>
- <li><a href = "#" ><i class = "icon-ban-circle" ></i> Machibido </a></li>
- <li klas = "onye nkesa" </li>
- <li><a href = "#" ><i class = "i" ></i> Mepụta onye nchịkwa </a></li>
- </ul>
- </div>
- <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>
- <ul klas = "nav nav-list" >
- <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Ụlọ </a></li>
- <li><a href = "#" ><i class = "icon-book" </i> Library </a></li>
- <li><a href = "#" ><i class = "icon-pencil" ></i> Ngwa </a></li>
- <li><a href = "#" ><i class = "i" ></i> Misc </a></li>
- </ul>
- <div class = "control-otu" >
- <label class = "control-label" maka = "inputIcon" > adreesị ozi-e </label>
- <div class = "njikwa" >
- <div klas = "ntinye-prepend" >
- <span class = "add-on" ><i klaasị = "akara ngosi-envelopu" ><i><span>< igbo klas = "span2" id = "inputIcon" ụdị = "ederede" >
- </div>
- </div>