eriri akpụkpọ ụkwụ

Isi CSS

Ederede HTML ndị bụ isi ma jiri klaasị nwee ike kwalite.

Welie isi elu! Dọkịta ndị a bụ maka v2.3.2, nke anaghịzi akwado ọchịchị. Lelee ụdị Bootstrap kachasị ọhụrụ!

Ederede

Isi okwu

Isi HTML niile, <h1>site <h6>na dị.

h1. Isi nke 1

h2. Isi nke 2

h3. Isi nke 3

h4. Isi nke 4

h5. Isi nke 5
h6. Isi nke 6

Mpempe ahụ

Ndabara zuru ụwa ọnụ nke Bootstrap font-sizebụ 14px , yana line-heightnke 20px . A na-etinye nke a <body>na paragraf niile. Na mgbakwunye, <p>(paragraf) na-enweta oke ala nke ọkara ogologo ahịrị ha (10px 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>

Nkomi nke ndu

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>

Eji Obere wuo ya

Ọnụ ọgụgụ ederede dabere na mgbanwe abụọ dị obere na mgbanwe . obere : @baseFontSizena @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ị.

Nkwado

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>

Obi ike

Maka imesi snippet nke ederede ike na iji mkpụrụedemede dị arọ karịa.

Asụgharịrị snippet nke a dị ka ederede siri ike .

<strong> sụgharịrị dị ka ederede nkwuwa okwu </strong>

Italics

Maka iji ọkpịsị aka na-emesi 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.

Klas mmezi

Hazie ederede n'ụzọ dị mfe na klaasị nhazi ederede.

Ederede akwadoro akaekpe.

Ederede dabara n'etiti.

Ederede akwadoro akanri.

  1. <p class = "ederede-ekpe" > Ederede kwadoro akaekpe. </p> 
  2. <p class = "text-center" > Edemede dakọtara n'etiti . </p> 
  3. <p class = "ederede-right" > Ederede akwadoro akanri. </p>

Klas mesiri ike

Wepụta ihe pụtara site na agba na obere klaasị ịba uru.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla na-abụghị metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, bụ nke na-abụghị commodo luctus, bụ nke na-adịghị commodo luctus.

  1. <p klaasị = "mechiri emechi" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "ederede-ịdọ aka na ntị" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla na-abụghị metus auctor fringilla. </p> 
  4. <p klas = "ederede-ozi" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "ederede-aga nke ọma" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Ndebiri

Mmejuputa HTML nke ahaziri <abbr>ahazi maka ndebiri na mkpọ okwu iji gosi ụdị gbasaara na hover. Mbiri nke nwere titlenjiri 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 titlenjiri mara.

Mbiri nke okwu àgwà bụ attr .

<abbr aha = "njirimara" > attr </abbr>

<abbr class="initialism">

Tinye .initialismna ndebiri maka obere mkpụrụedemede pere mpe.

HTML bụ ihe kacha mma ebe ọ bụ na achịcha sliced.

<abbr aha = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Adreesị

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>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Aha zuru oke
[email protected] 
  1. <adreesị>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr aha = "ekwentị" > P: </abbr> (123) 456-7890 
  6. </ address>
  7.  
  8. <adreesị>
  9.   <strong> Aha zuru oke </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </ address>

Ihe mgbochi

Maka ịhota ngọngọ nke ọdịnaya sitere na isi mmalite ọzọ n'ime akwụkwọ gị.

Nkwukọrịta ngọngọ

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.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe. </p>
  3. </blockquote>

Nhọrọ Blockquote

Ụdị na ọdịnaya na-agbanwe maka ndịiche dị mfe na ọkọlọtọ blockquote.

Ịkpọ aha isi iyi

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 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe. </p>
  3.   <small> Onye ama ama <cite title = "Isi mmalite" > Isi mmalite </cite></small> 
  4. </blockquote>

Ngosipụta ọzọ

Jiri .pull-rightmaka ihe mgbochi n'esepụghị aka na aka nri.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

Onye ama ama na Isi mmalite 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Ndepụta

Edeghị iwu

Ndepụta ihe nke usoro ahụ adịghị mkpa n'ụzọ doro anya.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem na massa
  • Facilisis na pretium nisl aliquet
  • Ngwa ngwa ngwa ngwa ngwa
    • Phasellus iaculis bụ ihe dị mkpa
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat na
  • Faucibus Porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Enyere iwu

Ndepụta nke ihe n'usoro na- emetụta nke ọma.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem na massa
  4. Facilisis na pretium nisl aliquet
  5. Ngwa ngwa ngwa ngwa ngwa
  6. Faucibus Porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Ekebeghị ụdị

Wepu ndabara list-stylena mpe mpe akwa aka ekpe na ndetu ihe (naanị ụmụaka ozugbo).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem na massa
  • Facilisis na pretium nisl aliquet
  • Ngwa ngwa ngwa ngwa ngwa
    • Phasellus iaculis bụ ihe dị mkpa
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat na
  • Faucibus Porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul klas = "Enweghị ụdịdị" > 
  2.   <li> ... </li>
  3. </ul>

N'ahịrị

Debe ihe ndepụta niile n'otu ahịrị yana inline-blockobere ihe mkpuchi ọkụ.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul klas = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Nkọwa

Ndepụta okwu na nkọwa ha metụtara.

Ndepụta nkọwa
Ndepụta nkọwa zuru oke maka ịkọwa okwu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Achọpụtaghị m porta gravida na eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Nkọwa kwụ ọtọ

Mee usoro na nkọwa <dl>n'ahịrị n'akụkụ n'akụkụ.

Ndepụta nkọwa
Ndepụta nkọwa zuru oke maka ịkọwa okwu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Achọpụtaghị m porta gravida na eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl klas = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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.

Koodu

N'ahịrị

Jiri snippet kechie koodu inline <code>.

Dịka ọmụmaatụ, <section>ekwesịrị ịfụkọta ya dị ka inline. 
  1. Dịka ọmụmaatụ , <code> & lt ; ngalaba & gt ;</ code > kwesịrị ka e kechie ya dị ka inline .

Ihe mgbochi

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>
  1. < tupu >
  2.   <p>Nlere ederede ebe a...</p>
  3. </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-scrollableklas ahụ nke ga-edobe max-elu 350px wee nye akwụkwọ mpịakọta y-axis.

Tebụl

Ụdị ndị ezighi ezi

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ụ @twitter 
  1. <tebụl klas = "tebụl" > 
  2.   …
  3. </table>

Klas nke nhọrọ

Tinye nke ọ bụla n'ime klaasị ndị a na klaasị .tablentọ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-8).

# Aha mbụ Aha ikpeazụ Aha njirimara
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter 
  1. <tebụl klas = "tebụl e kewara tebụl" > 
  2.   …
  3. </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 @twitter 
  1. <tebụl klas = "tebụlụ nwere oke ókè" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "tebụl-hover" > 
  2.   …
  3. </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 @twitter 
  1. <tebụl klas = "tebụl-condensed" > 
  2.   …
  3. </table>

Klas ahịrị nhọrọ

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.
.warning Na-egosi ịdọ aka ná ntị nwere ike ịchọ nlebara anya.
.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
4 TB - kwa ọnwa 04/04/2012 Kpọọ ka ị gosi 
  1. ...
  2.   < tr klas = "ihe ịga nke ọma" >
  3.     1 < td >
  4.     <td>TB - kwa ọnwa</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Akwadoro</ td >
  7.   </ tr >
  8. ...

Akara tebụl akwadoro

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> cell okpokoro pụrụ iche maka kọlụm (ma ọ bụ ahịrị, dabere na oke na ntinye) akara
<caption> Nkọwa ma ọ bụ nchịkọta nke ihe tebụl na-ejide, karịsịa bara uru maka ndị na-agụ ihuenyo 
  1. <tebụl>
  2.   <caption> ... </caption>
  3.   <okwu>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </ thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Ụdị

Ụdị ndị ezighi ezi

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ị.

Akụkọ mgbe ochie Ihe atụ ederede enyemaka ngọngọ ebe a. 
  1. <ụdị>
  2.   <fieldset>
  3.     <akụkọ ifo > Akụkọ mgbe ochie
  4.     <label> Aha akara </label>
  5.     < ụdị ntinye = "ederede" ebe nchekwa   = "Pịnye ihe..." >
  6.     <span class = "help-block"  > Ihe atụ ederede enyemaka ngọngọ ebe a. </span>
  7.     <klabe akara  = "checkbox" >
  8.       < ụdị ntinye =  "checkbox" > Lelee m
  9.     </label>
  10.     < ụdị bọtịnụ = "nyefere" klaasị = "btn" >   Nyefee </button>
  11.   </fieldset>
  12. </form>

Nhazi nhọrọ

Tinyere ya na Bootstrap bụ nhazi ụdị nhọrọ atọ maka ikpe ndị a na-ejikarị eme ihe.

Ụdị ọchụchọ

Tinye .form-searchna mpempe akwụkwọ na .search-queryna <input>maka ntinye ederede agbakọtara.

  1. <ụdị klas = "ụdị-nyocha" > 
  2.   < ụdị ntinye = "ederede" klaasị = "ajụjụ-ajụjụ ntinye-medium" >  
  3.   <button type = "nyefere" klas = "btn" > Chọọ </button>  
  4. </form>

Ụdị n'ịntanetị

Tinye .form-inlinemaka akara aka ekpe na njikwa mgbochi inline maka nhazi kọmpat.

  1. <ụdị klas = "ụdị-inline" > 
  2.   < ụdị ntinye = "ederede" klaasị = "ntinye-small" ebe nchekwa = "Email" >   
  3.   < ụdị ntinye = "paswọọdụ" klas = "ntinye-small" ebe nchekwa = "Paswọọdụ" >   
  4.   <label class = "checkbox" > 
  5.     < ụdị ntinye = "checkbox" > Cheta m 
  6.   </label>
  7.   <button type = "nyefere" klaasị = "btn" > Banye </button>  
  8. </form>

Ụdị kwụ ọtọ

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:

  • Tinye .form-horizontalna mpempe akwụkwọ
  • Kechie akara na njikwa na.control-group
  • Tinye .control-labelna labelụ
  • Kechie njikwa ọ bụla metụtara .controlsmaka nhazi kwesịrị ekwesị
  1. <ụdị klas = "ụdị-horizontal" > 
  2.   <div class = "control-otu" > 
  3.     <label class = "control-label" maka = "inputEmail" > Email </label>  
  4.     <div class = "njikwa" > 
  5.       < ụdị ntinye = "ederede" id = "inputEmail" ebe nchekwa = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-otu" > 
  9.     <label class = "control-label" maka = "inputPassword" > Okwuntughe </label>  
  10.     <div class = "njikwa" > 
  11.       < ụdị ntinye = "paswọọdụ" id = "inputPassword" ebe nchekwa = "Paswọọdụ" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-otu" > 
  15.     <div class = "njikwa" > 
  16.       <label class = "checkbox" > 
  17.         < ụdị ntinye = "checkbox" > Cheta m 
  18.       </label>
  19.       <button type = "nyefere" klaasị = "btn" > Banye </button>  
  20.     </div>
  21.   </div>
  22. </form>

Njikwa ụdị akwadoro

Ihe atụ nke njikwa ụdị ọkọlọtọ akwadoro na nhazi ụdị ihe atụ.

Ntinye

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 typen'oge niile.

  1. < ụdị ntinye = "ederede" ebe nchekwa = "ntinye ederede" >

Mpaghara ederede

Njikwa ụdị nke na-akwado ọtụtụ ahịrị ederede. Gbanwee rowsàgwà ka ọ dị mkpa.

  1. <textarea ahịrị = "3" > </textarea>

Igbe nlele na redio

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ụ.

Ndi an-kpọ (kpakọtara)


  1. <label class = "checkbox" > 
  2.   < ụdị ntinye = "checkbox" uru = "" >  
  3.   Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
  4. </label>
  5.  
  6. <label klas = "redio" > 
  7.   < ụdị ntinye = "redio" aha = "nhọrọRadios" id = "nhọrọRadios1" uru = "nhọrọ1" enyochara >     
  8.   Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
  9. </label>
  10. <label klas = "redio" > 
  11.   < ụdị ntinye = "redio" aha = "nhọrọRadios" id = "nhọrọRadios2" uru = "nhọrọ2" >    
  12.   Nhọrọ nke abụọ nwere ike ịbụ ihe ọzọ na ịhọrọ ya ga-ewepụ nhọrọ otu
  13. </label>

Igbe nrịbama n'ịntanetị

Tinye .inlineklas ahụ na igbe nlele ma ọ bụ redio maka njikwa pụtara n'otu ahịrị.

  1. <label klas = "checkbox inline" > 
  2.   < ụdị ntinye = "checkbox" id = "inlineCheckbox1" uru = "nhọrọ1" > 1   
  3. </label>
  4. <label klas = "checkbox inline" > 
  5.   < ụdị ntinye = "checkbox" id = "inlineCheckbox2" uru = "nhọrọ2" > 2   
  6. </label>
  7. <label klas = "checkbox inline" > 
  8.   < ụdị ntinye = "checkbox" id = "inlineCheckbox3" uru = "nhọrọ3" > 3   
  9. </label>

Họrọ

Jiri ndabara nhọrọ ma ọ bụ ezipụta a multiple="multiple"iji gosi ọtụtụ nhọrọ otu mgbe.


  1. <họrọ>
  2.   <nhọrọ> 1 </nhọrọ>
  3.   <nhọrọ> 2 </nhọrọ>
  4.   <nhọrọ> 3 </nhọrọ>
  5.   <nhọrọ> 4 </nhọrọ>
  6.   <nhọrọ> 5 </nhọrọ>
  7. </họrọ>
  8.  
  9. <họrọ otutu = "ọtụtụ" > 
  10.   <nhọrọ> 1 </nhọrọ>
  11.   <nhọrọ> 2 </nhọrọ>
  12.   <nhọrọ> 3 </nhọrọ>
  13.   <nhọrọ> 4 </nhọrọ>
  14.   <nhọrọ> 5 </nhọrọ>
  15. </họrọ>

Na-agbatị njikwa ụdị

Na-agbakwụnye n'elu njikwa ihe nchọgharị dị adị, Bootstrap gụnyere ihe ndị ọzọ bara uru ụdị ngwa.

Ntinye akwadoro na agbakwunyere

Tinye ederede ma ọ bụ bọtịnụ tupu ma ọ bụ mgbe ntinye dabere na ederede ọ bụla. Rịba ama na selectakwadoghị ihe ndị a ebe a.

Nhọrọ ndabara

Kechie .add-onotu inputn'ime klaasị abụọ iji kwado ma ọ bụ tinye ederede na ntinye.

@

.00 
  1. <div klas = "ntinye-prepend" > 
  2.   <span class = "agbakwunyere" > @ </span> 
  3.   < klas ntinye = "span2" id = "prependedInput" ụdị = "ederede" ebe nchekwa = "Aha njirimara" >    
  4. </div>
  5. <div class = "ntinye-append" > 
  6.   < klas ntinye = "span2" id = "appendedInput" ụdị = "ederede" >   
  7.   <span class = "agbakwunyere" > .00 </span> 
  8. </div>

Ejikọtara

Jiri ma klaasị na ihe atụ abụọ .add-oniji kwado ma tinye ntinye.

$ .00 
  1. <div class = " ntinye-prepend ntinye-append" > 
  2.   <span class = "agbakwunyere" > $ </span> 
  3.   < klas ntinye = "span2" id = "appendedPrependedInput" ụdị = "ederede" >   
  4.   <span class = "agbakwunyere" > .00 </span> 
  5. </div>

Bọtịnụ kama ederede

Kama nke <span>nwere ederede, jiri a .btntinye bọtịnụ (ma ọ bụ abụọ) na ntinye.

  1. <div class = "ntinye-append" > 
  2.   < klas ntinye = "span2" id = "appendedInputButton" ụdị = "ederede" >   
  3.   <bọtịnụ klas = "btn" ụdị = "bọtịnụ" > Gaa! </bọtịnụ>  
  4. </div>
  1. <div class = "ntinye-append" > 
  2.   < klas ntinye = "span2" id = "appendedInputButtons" ụdị = "ederede" >   
  3.   <bọtịnụ klas = "btn" ụdị = "bọtịnụ" > Chọọ </button>  
  4.   <bọtịnụ klas = "btn" ụdị = "bọtịnụ" > Nhọrọ </button>  
  5. </div>

Mbudata bọtịnụ

  1. <div class = "ntinye-append" > 
  2.   < klas ntinye = "span2" id = "appendedDropdownButton" ụdị = "ederede" >   
  3.   <div klas = "btn-otu" > 
  4.     <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >  
  5.       Omume
  6.       <span class = "nlekọta" </span> 
  7.     </bọtịnụ>
  8.     <ul klas = "ndropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div klas = "ntinye-prepend" > 
  2.   <div klas = "btn-otu" > 
  3.     <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >  
  4.       Omume
  5.       <span class = "nlekọta" </span> 
  6.     </bọtịnụ>
  7.     <ul klas = "ndropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < klas ntinye = "span2" id = "prependedDropdownButton" ụdị = "ederede" >   
  12. </div>
  1. <div class = " ntinye-prepend ntinye-append" > 
  2.   <div klas = "btn-otu" > 
  3.     <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >  
  4.       Omume
  5.       <span class = "nlekọta" </span> 
  6.     </bọtịnụ>
  7.     <ul klas = "ndropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < klas ntinye = "span2" id = "appendedPrependedDropdownButton" ụdị = "ederede" >   
  12.   <div klas = "btn-otu" > 
  13.     <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >  
  14.       Omume
  15.       <span class = "nlekọta" </span> 
  16.     </bọtịnụ>
  17.     <ul klas = "ndropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Otu mkpọda nkewa

  1. <ụdị>
  2.   <div klas = "ntinye-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < ụdị ntinye = "ederede" > 
  5.   </div>
  6.   <div class = "ntinye-append" > 
  7.     < ụdị ntinye = "ederede" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Ụdị ọchụchọ

  1. <ụdị klas = "ụdị-nyocha" > 
  2.   <div class = "ntinye-append" > 
  3.     < ụdị ntinye = "ederede" klaasị = "span2 search-query" >  
  4.     <button type = "nyefere" klas = "btn" > Chọọ </button>  
  5.   </div>
  6.   <div klas = "ntinye-prepend" > 
  7.     <button type = "nyefere" klas = "btn" > Chọọ </button>  
  8.     < ụdị ntinye = "ederede" klaasị = "span2 search-query" >  
  9.   </div>
  10. </form>

Njikwa nha nha

Jiri klaasị nha nha dịka .input-largema ọ bụ dakọtara ntinye gị na nha kọlụm grid site na iji .span*klaasị.

Mgbochi ntinye ọkwa

Mee ka ihe ọ bụla <input>ma ọ bụ <textarea>mmewere na-akpa àgwà ka mmewere larịị ngọngọ.

  1. < klas ntinye = " ụdị ntinye-block-level" = "ederede" ebe nchekwa = " .input -block-level" >

Nha nha nha

  1. < klas ntinye = " ụdị ntinye-mini" = "ederede" ebe nchekwa = " .input -mini" >   
  2. < klas ntinye = " ụdị ntinye-small" = "ederede" ebe nchekwa = " .input -small" >   
  3. < klas ntinye = " ụdị ntinye-medium" = "ederede" ebe nchekwa = " .input -medium" >   
  4. < klas ntinye = " ụdị ntinye-large" = "ederede" ebe nchekwa = " .input -large" >   
  5. < klas ntinye = " ụdị ntinye-xlarge" = "ederede" ebe nchekwa = ".input-xlarge" >   
  6. < 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 na nha bọtịnụ anyị. Ọmụmaatụ,.input-large ga-abawanye mpe mpe akwa na nha font nke ntinye.

Nha grid

Jiri .span1maka .span12ntinye dakọtara nha nke kọlụm grid.

  1. < klas ntinye = "span1" ụdị = "ederede" ebe nchekwa = ".span1" >   
  2. < klas ntinye = "span2" ụdị = "ederede" ebe nchekwa = ".span2" >   
  3. < klas ntinye = "span3" ụdị = "ederede" ebe nchekwa = ".span3" >   
  4. <họrọ klas = "span1" > 
  5.   ...
  6. </họrọ>
  7. <họrọ klas = "span2" > 
  8.   ...
  9. </họrọ>
  10. <họrọ klas = "span3" > 
  11.   ...
  12. </họrọ>

Maka ọtụtụ ntinye grid kwa ahịrị, jiri .controls-rowklaasị modifier maka oghere kwesịrị ekwesị . Ọ na-ese n'elu ihe ntinye ka ọ daa oghere ọcha, na-edozi oke kwesịrị ekwesị, ma kpochapụ ihe dị n'elu mmiri.

  1. <div class = "njikwa" > 
  2.   < klas ntinye = "span5" ụdị = "ederede" ebe nchekwa = ".span5" >   
  3. </div>
  4. <div class = "njikwa-ahiri" > 
  5.   < klas ntinye = "span4" ụdị = "ederede" ebe nchekwa = ".span4" >   
  6.   < klas ntinye = "span1" ụdị = "ederede" ebe nchekwa = ".span1" >   
  7. </div>
  8. ...

Ntinye anaghị edezi

Wepụta data n'ụdị anaghị edezi na-ejighi akara n'ezie.

Ụfọdụ bara uru ebe a 
  1. <span class = "input-xlarge uneditable-input" > Ụfọdụ uru ebe a </span>

Ụdị omume

Mechie mpempe akwụkwọ na otu omume (bọtịnụ). Mgbe etinyere n'ime a .form-actions, bọtịnụ ndị ahụ ga-abanye na-akpaghị aka ka ha na njikwa ụdị.

  1. <div class = "ụdị-omume" > 
  2.   <button type = "nyefere" klas = "btn btn-primary" > Chekwa mgbanwe </button>  
  3.   < ụdị bọtịnụ = "bọtịnụ" klas = "btn" > Kagbuo </button>  
  4. </div>

Ederede enyemaka

Nkwado n'ahịrị na ngọngọ maka ederede enyemaka na-egosi gburugburu njikwa ụdị.

Enyemaka inline

Ederede enyemaka n'ịntanetị 
  1. <input type = "text" ><span class = "help-inline" > Ederede enyemaka ntanetị </span>

Gbochie enyemaka

Ederede enyemaka dị ogologo nke na-adaba n'ahịrị ọhụrụ nwere ike ịgbatị karịa otu ahịrị. 
  1. <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>

Ụdị njikwa na-ekwu

Nye nzaghachi nye ndị ọrụ ma ọ bụ ndị ọbịa nwere steeti nzaghachi bụ isi na njikwa ụdị na akara.

Ntinye ntinye

Anyị na-ewepụ ụdị ndabara outlinena ụfọdụ njikwa ụdị wee tinye a box-shadown'ọnọdụ ya maka :focus.

  1. < klas ntinye = "ntinye-xlarge" id = "focusedInput" ụdị = "ederede" uru = "Nke a lekwasịrị anya..." >

Ntinye ezighi ezi

Ntinye ụdị site na ọrụ ihe nchọgharị ndabere nwere :invalid. Ezipụta a type, gbakwunye requiredàgwà ma ọ bụrụ na ubi abụghị nhọrọ, na (ọ bụrụ na ọdabara) ezipụta a pattern.

Nke a adịghị na ụdị Internet Explorer 7-9 n'ihi enweghị nkwado maka CSS pseudo selectors.

  1. < klas ntinye = "span3" ụdị = "email" chọrọ >

Ntinye nkwarụ

Tinye disablednjirimara na ntinye iji gbochie ntinye onye ọrụ wee kpalite ọdịdị dịtụ iche.

  1. < klas ntinye = "input-xlarge" id = "disabledInput" ụdị = "ederede" ebe nchekwa = "Ntinye nwere nkwarụ ebe a..." nwere nkwarụ >

Steeti nkwado

Bootstrap gụnyere ụdị nkwado maka njehie, ịdọ aka ná ntị, ozi na ozi ịga nke ọma. Iji jiri, tinye klaasị kwesịrị ekwesị na gburugburu .control-group.

O nwere ike ịbụ na ọ garaghị nke ọma
Biko dozie njehie ahụ
Ewere aha njirimara
Woohoo! 
  1. <div class = "ịdọ aka na ntị otu ìgwè" > 
  2.   <label class = "control-label" maka = "inputWarning" > Ntinye na ịdọ aka ná ntị </label>  
  3.   <div class = "njikwa" > 
  4.     < ụdị ntinye = "ederede" id = "inputWarning" >  
  5.     <span class = "help-inline" > Ọ nwere ike bụrụ na ọ garaghị nke ọma </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "njehie otu njikwa" > 
  10.   <label class = "control-label" maka = "inputError" > Ntinye nwere mperi </label>  
  11.   <div class = "njikwa" > 
  12.     < ụdị ntinye = "ederede" id = "inputError" >  
  13.     <span class = "help-inline" > Biko dozie njehie ahụ </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "ozi otu njikwa" > 
  18.   <label class = "control-label" maka = "inputInfo" > Ntinye nwere ozi </label>  
  19.   <div class = "njikwa" > 
  20.     < ụdị ntinye = "ederede" id = "inputInfo" >  
  21.     <span class = "help-inline" > ewegharala aha njirimara </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "ihe ịga nke ọma otu njikwa" > 
  26.   <label class = "control-label" maka = "inputSuccess" > Ntinye na ihe ịga nke ọma </label>  
  27.   <div class = "njikwa" > 
  28.     < ụdị ntinye = "ederede" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Bọtịnụ

Bọtịnụ ndị emepụtara

Enwere ike itinye ụdị bọtịnụ na ihe ọ bụla na .btnklas etinyere ya. Agbanyeghị, ị ga-achọ itinye ihe ndị a naanị <a>yana <button>ihe maka ntụgharị kacha mma.

Bọtịnụ klas = "" Nkọwa
btn Bọtịnụ isi awọ ọkọlọtọ nwere gradient
btn btn-primary Na-enye oke anya n'ihu ma na-achọpụta ihe omume bụ isi na otu bọtịnụ
btn btn-info Ejiri ya dị ka ihe ọzọ na ụdị ndabara
btn btn-success Na-egosi omume ọma ma ọ bụ nke ọma
btn btn-warning Na-egosi na ekwesịrị iji ihe a kpachara anya
btn btn-danger Na-egosi omume dị ize ndụ ma ọ bụ nwere ike adịghị mma
btn btn-inverse Bọtịnụ isi awọ ọzọ gbara ọchịchịrị, ejikọtaghị ya na usoro ọmụmụ ma ọ bụ ojiji
btn btn-link Mesie bọtịnụ ike site n'ime ka ọ dị ka njikọ ka ị na-ejigide omume bọtịnụ

Ndakọrịta ihe nchọgharị gafere

IE9 anaghị egbutu gradients ndabere n'akụkụ akụkụ, yabụ anyị na-ewepụ ya. Njikọ, IE9 na -eme ka buttonihe ndị nwere nkwarụ na-eme ka ọ bụrụ isi awọ, na-eji onyinyo ederede jọrọ njọ nke anyị enweghị ike idozi.

Nha bọtịnụ

Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Tinye .btn-large, .btn-small, ma ọ bụ .btn-minimaka nha ndị ọzọ.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" ụdị = "bọtịnụ" > Nnukwu bọtịnụ </button>  
  3.   <bọtịnụ klas = "btn btn-large" ụdị = "bọtịnụ" > Nnukwu bọtịnụ </button>  
  4. </p>
  5. <p>
  6.   <bọtịnụ klas = "btn btn-primary" ụdị = "bọtịnụ" > bọtịnụ </button>  
  7.   <bọtịnụ klas = "btn" ụdị = "bọtịnụ" > Bọtịnụ </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" ụdị = "bọtịnụ" > Obere bọtịnụ </button>  
  11.   <button class = "btn btn-small" ụdị = "bọtịnụ" > Obere bọtịnụ </button>  
  12. </p>
  13. <p>
  14.   <bọtịnụ klas = "btn btn-mini btn-primary" ụdị = "bọtịnụ" > Obere bọtịnụ </button>  
  15.   <bọtịnụ klas = "btn btn-mini" ụdị = "bọtịnụ" > Obere bọtịnụ </button>  
  16. </p>

Mepụta bọtịnụ mgbochi mgbochi-ndị na-agbatị obosara nke nne na nna - site na ịgbakwunye .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" ụdị = "bọtịnụ" > Bọtịnụ ọkwa mgbochi </button>  
  2. <bọtịnụ klas = "btn btn-large btn-block" ụdị = "bọtịnụ" > Bọtịnụ ọkwa mgbochi </button>

Ọnọdụ nkwarụ

Mee ka bọtịnụ yie ihe na-enweghị ike ịpị site na ịla azụ 50%.

Ihe arịlịka

Tinye .disabledklas na <a>bọtịnụ.

Njikọ mbụ Njikọ 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Njikọ mbụ </a>  
  2. <a href = "#" klas = "btn btn-large nkwarụ" > Njikọ </a>

Welie isi elu!Anyị na-eji .disableddị ka klaasị ịba uru ebe a, dị ka .activeklaasị nkịtị, yabụ enweghị prefix achọrọ. Ọzọkwa, klas a bụ naanị maka aesthetic; ị ga-eji Javascript omenala iji gbanyụọ njikọ ebe a.

Ihe bọtịnụ

Tinye disablednjirimara na <button>bọtịnụ.

  1. <button type = "bọtịnụ" klaasị = "btn btn-large btn-primary disabled" nkwarụ = "nkwarụ" > Bọtịnụ isi </button>   
  2. <bọtịnụ ụdị = "bọtịnụ" klas = "btn btn-large" nwere nkwarụ > bọtịnụ </button>

Otu klas, ọtụtụ mkpado

Jiri .btnklaasị na <a>, <button>, ma ọ bụ <input>mmewere.

Njikọ 
  1. <a class = "btn" href = "" > Njikọ </a>  
  2. <bọtịnụ klas = "btn" ụdị = "nyefere" > bọtịnụ </button>  
  3. < klas ntinye = "btn" ụdị = "bọtịnụ" uru = "Ntinye" >   
  4. < klas ntinye = "btn" ụdị = "nyefere" uru = "Nyefee" >

Dị ka omume kacha mma, gbalịa ka ị kwekọọ na mmewere maka ihe gbara gị gburugburu ka ị hụ na ntụgharị ihe nchọgharị dabara adaba. Ọ bụrụ na ị nwere input, jiri <input type="submit">bọtịnụ maka gị.

Onyonyo

Tinye klaasị na <img>mmewere iji hazie onyonyo n'ụzọ dị mfe na ọrụ ọ bụla.

140x140 140x140 140x140 
  1. <img src = "..." klaasị = "img-rounded" >  
  2. <img src = "..." klaasị = "img-circle" >  
  3. <img src = "..." klaasị = "img-polaroid" >

Welie isi elu! .img-roundedma .img-circleghara ịrụ ọrụ na IE7-8 n'ihi enweghị border-radiusnkwado.

Akara ngosi nke Glyphicons

Akara ngosi

Akara ngosi 140 n'ụdị sprite, dị na isi awọ gbara ọchịchịrị (nke ndabara) na ọcha, nke Glyphicons nyere .

  • akara ngosi-glass
  • akara-egwu
  • akara-nchọta
  • akara-envelopu
  • icon-obi
  • akara-kpakpando
  • akara-kpakpando-efu
  • akara-onye ọrụ
  • icon-ihe nkiri
  • icon-th-nnukwu
  • akara ngosi-th
  • icon-th-ndepụta
  • akara-ok
  • akara ngosi-wepu
  • akara ngosi-mbubata
  • akara ngosi-mbugharị-apụ
  • akara ngosi
  • akara ngosi
  • icon-cog
  • akara ngosi - ahịhịa
  • icon-ụlọ
  • icon-faịlụ
  • icon-oge
  • akara-ụzọ
  • icon-download-alt
  • akara-nbudata
  • akara-ebugote
  • akara ngosi-igbe mbata
  • akara ngosi-egwu-gburugburu
  • akara ngosi-emegharị
  • akara ngosi - ume ọhụrụ
  • icon-ndepụta-alt
  • akara ngosi-mkpọchi
  • akara ngosi-ọkọlọtọ
  • akara ekweisi
  • akara ngosi-olu-apụ
  • akara ngosi-olu-ala
  • akara ngosi-olu-elu
  • akara ngosi-qrcode
  • akara ngosi-barcode
  • akara ngosi
  • akara ngosi
  • akara-akwụkwọ
  • akara ngosi-bookmark
  • akara ngosi-ebipụta
  • akara ngosi igwefoto
  • akara ngosi-font
  • akara ngosi-ike
  • akara ngosi-italic
  • akara ngosi-ederede-elu
  • akara ngosi-ederede-obosara
  • akara-nhazi-akaekpe
  • icon-align-center
  • akara-nhazi-aka nri
  • akara-nhazi-zie ezi
  • akara ngosi-ndepụta
  • akara-aka-aka ekpe
  • akara-aka-nri
  • icon-facetime-video
  • akara ngosi-foto
  • icon-pensụl
  • akara ngosi-mapụ-akara
  • akara ngosi-gbanwee
  • icon-tint
  • akara ngosi-edit
  • akara ngosi-oke
  • akara ngosi-nyochaa
  • akara-nkwaghari
  • akara ngosi-nzọụkwụ-azụ
  • akara ngosi-ngwa ngwa-azụ
  • akara ngosi-azụ
  • akara ngosi-egwu
  • akara ngosi-kwụsịtụ
  • akara ngosi-nkwụsị
  • akara ngosi-n'ihu
  • akara ngosi-ngwa ngwa-aga n'ihu
  • akara ngosi-nzọụkwụ-na-aga n'ihu
  • akara ngosi-ịpụ
  • akara-chevron-ekpe
  • akara-chevron-nri
  • akara ngosi-gbakwunyere-akara
  • akara ngosi-mwepu-akara
  • akara ngosi-ewepu-akara
  • akara-ok-akara
  • akara ngosi-ajụjụ-akara
  • akara ngosi-ama-akara
  • icon-screenshot
  • akara ngosi-ewepụ-okirikiri
  • akara-ok-okirikiri
  • akara-amachibido-okirikiri
  • akara ngosi-akụ-akaekpe
  • akara-akụ-nri
  • akara-akụ-elu
  • akara ngosi-akụ-ala
  • icon-share-alt
  • akara ngosi-nha-uju
  • akara ngosi-nha-obere
  • akara ngosi-gbakwunyere
  • akara ngosi-mwepu
  • akara mmuke
  • akara ngosi-mkpu-akara
  • akara ngosi-onyinye
  • akara-akwụkwọ
  • icon-ọkụ
  • akara-anya-emeghe
  • akara-anya-emechi
  • akara ngosi-ịdọ aka na ntị-akara
  • icon-ụgbọ elu
  • akara-kalịnda
  • akara ngosi-random
  • akara-okwu
  • icon-magnet
  • icon-chevron-elu
  • akara-chevron-ala
  • akara ngosi-retweet
  • icon-ịzụ ahịa-cart
  • akara ngosi-nchekwa-nchekwa
  • akara ngosi-nchekwa-emeghe
  • akara ngosi-nha-oghere
  • akara ngosi-nha nha-horizontal
  • akara-hdd
  • akara-nnụnụ
  • icon-mgbịrịgba
  • akara ngosi-akara ngosi
  • akara-aka-elu
  • akara-aka-ala
  • akara-aka-nri
  • akara-aka-ekpe
  • akara-aka-elu
  • akara ngosi-aka-ala
  • akara ngosi-okirikiri-akụ-nri
  • akara-okirikiri-akụ-akaekpe
  • akara-okirikiri-akụ-elu
  • akara-okirikiri-akụ-ala
  • icon-globe
  • akara ngosi
  • akara-ọrụ
  • akara ngosi-nyo
  • akara ngosi-akpa
  • akara ngosi - ihuenyo zuru oke

Njirimara Glyphicons

Glyphicons Halflings anaghị adị n'efu, mana nhazi n'etiti Bootstrap na ndị okike Glyphicons emeela ka nke a kwe omume n'enweghị ọnụ ahịa gị 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.

Otu esi eji

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:

  1. <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.

  1. <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ị.

Ihe atụ akara

Jiri ha na bọtịnụ, otu bọtịnụ maka ogwe ngwaọrụ, igodo, ma ọ bụ ntinye ụdị echedoro.

Bọtịnụ

Otu bọtịnụ n'ime bọtịnụ bọtịnụ
  1. <div class = "btn-toolbar" > 
  2.   <div klas = "btn-otu" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Mbudata n'ime otu bọtịnụ
Onye ọrụ 
  1. <div klas = "btn-otu" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Onye ọrụ </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul klas = "ndropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Dezie </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Hichapụ </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Machibido </a></li>  
  8.     <li klas = "onye nkesa" </li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Mepụta onye nchịkwa </a></li>  
  10.   </ul>
  11. </div>
Nha bọtịnụ
Kpakpando Kpakpando Kpakpando 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Kpakpando </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Kpakpando </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Kpakpando </a>

Nsoro ụzọ

  1. <ul klas = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Ụlọ </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" </i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Ngwa </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Ụdị ụdị

  1. <div class = "control-otu" > 
  2.   <label class = "control-label" maka = "inputIcon" > adreesị ozi-e </label>  
  3.   <div class = "njikwa" > 
  4.     <div klas = "ntinye-prepend" > 
  5.       <span class = "add-on" ><i class = "akara ngosi-envelopu" </i></span>  
  6.       < klas ntinye = "span2" id = "inputIcon" ụdị = "ederede" >   
  7.     </div>
  8.   </div>
  9. </div>