eriri akpụkpọ ụkwụ

Isi CSS

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.

Isi akwụkwọ edemede, paragraf, ndepụta na ihe ndị ọzọ ụdị inline

Isiokwu & ozu oyiri

Ọnụ ọgụgụ ederede

Ihe niile grid ederede dabere na mgbanwe abụọ pere mpe na mgbanwe anyị. faịlụ enweghị: @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ụ, yana ụfọdụ mgbakọ na mwepụ, iji mepụta oke, paddings, na ogologo ahịrị ụdị anyị niile na ndị ọzọ.

Ihe atụ ederede

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.

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.

h1. Isi nke 1

h2. Isi nke 2

h3. Isi nke 3

h4. Isi nke 4

h5. Isi nke 5
h6. Isi nke 6

Nkwado, adreesị, na ndebiri

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 njirimara nhọrọ titlemaka ederede agbasawanye

Jiri .initialismklas maka mbiri nke mkpụrụedemede ukwu.
<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>

Iji mesie ike

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.

adreesị ihe atụ

Nke a bụ ihe atụ abụọ nke <address>otu enwere ike iji mkpado ahụ:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Aha zuru oke
[email protected]

Mbibiri ihe atụ

Mbiri nke nwere titlenjirimara nwere oke ala nwere ntụpọ dị ọkụ yana ihe enyemaka na hover. Nke a na-enye ndị ọrụ mgbakwunye ihe ngosi ga-egosi ihe na hover.

Tinye initialismklas ahụ na mbiri ka iwelie ndakọrịta ederede site n'inye ya nha ederede dị ntakịrị ntakịrị.

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

Mbiri nke okwu àgwà bụ attr .

Ihe mgbochi

Ihe Ojiji Nhọrọ
<blockquote> Ihe mgbochi mgbochi maka ịhota ọdịnaya sitere na isi mmalite ọzọ

Tinye citenjirimara maka URL isi iyi

Jiri .pull-leftna .pull-rightklaasị 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 &mdash;n'ihu ya maka ebumnuche ịke.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ọnụọgụ ọnụọgụgụ na-abawanye na ante venenatis. </p>
  3.   <obere> Onye ama ama </small>
  4. </blockquote>

Ihe atụ blockquotes

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ụ

Ndepụta

Edeghị iwu

<ul>

  • 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

Ekebeghị ụdị

<ul class="unstyled">

  • 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

Enyere iwu

<ol>

  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

Nkọwa

<dl>

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.

Nkọwa kwụ ọtọ

<dl class="dl-horizontal">

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.

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 inline ma gbochie snippets koodu

N'ahịrị

Jiri snippet kechie koodu inline <code>.

  1. Dịka ọmụmaatụ , <code> ngalaba </ code > kwesịrị ka ekpuchie 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>

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.

Ị nwere ike ịgbakwunye .pre-scrollableklas ahụ nke ga-edobe max-elu 350px wee nye akwụkwọ mpịakọta y-axis.

Google Prettify

Were otu <pre>ihe ahụ ma tinye klaasị nhọrọ abụọ maka nrụpụta nkwalite.

  1. <p> Ihe atụ ederede ebe a... </p>
  1. <pre class = "prettyprint 
  2.      linenums" >
  3.   <p>Nlere ederede ebe a...</p>
  4. </pre>

Budata google-code-prettify wee lelee readme maka otu esi eji.

Tebụlụ Maka, ị chepụtara ya, data tabular

Akara tebụl

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 
  1. <tebụl>
  2.   <okwu>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </ thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </table>

Nhọrọ tebụl

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-agbakwunye oke oke
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 tdna thihe niile

Tebụl atụ

1. Ụdị okpokoro okpokoro

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, .tablea chọrọ klas ahụ.

  1. <tebụl klas = "tebụl" > 
  2.   …
  3. </table>
# Aha mbụ Aha ikpeazụ Aha njirimara
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter

2. Tebụl na-adọkpụ

Nweta ntakịrị mmasị na tebụl gị site na ịgbakwunye zebra-striping - naanị tinye .table-stripedklas ahụ.

Mara: Tebụl ndị a kewara ekewa na-eji onye na :nth-child-ahọpụta CSS ma ọ dịghị na IE7-IE8.

  1. <tebụl klas = "tebụl e kewara tebụl" > 
  2.   …
  3. </table>
# Aha mbụ Aha ikpeazụ Aha njirimara
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter

3. Okpokoro ókè

Tinye akụkụ gburugburu tebụl na akụkụ gburugburu maka ebumnuche ịchọ mma.

  1. <tebụl klas = "tebụlụ nwere oke ókè" > 
  2.   …
  3. </table>
# Aha mbụ Aha ikpeazụ Aha njirimara
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter

4. Okpokoro condensed

Mee ka tebụl gị dịkwuo kọmpat site n'ịgbakwunye .table-condensedklaasị ka ebibie cell padding na ọkara (site na 8px ruo 4px).

  1. <tebụl klas = "tebụl-condensed" > 
  2.   …
  3. </table>
# Aha mbụ Aha ikpeazụ Aha njirimara
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter

5. Jikọta ha niile!

Enwere onwe gị ijikọ klaasị tebụl ọ bụla iji nweta ọdịdị dị iche iche site na iji klaasị ọ bụla dị.

  1. <tebụlụ klas = "tebụlụ nwere tebulu nke nwere tebulu nke nwere oke n'akụkụ tebụl" > 
  2.   ...
  3. </table>
Aha n'uju
# Aha mbụ Aha ikpeazụ Aha njirimara
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter

Ụdị

HTML na CSS na-agbanwe agbanwe

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.

Nhazi anọ gụnyere

Bootstrap na-abịa na nkwado maka ụdị nhazi ụdị anọ:

  • Vetikal (nke ndabara)
  • Chọọ
  • N'ahịrị
  • Kehoraizin

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

Ọchịchị nchịkwa na ndị ọzọ

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

Ụdị ụdị anọ

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

Ụdị ihe atụ na- eji naanị njikwa ụdị, enweghị akara ọzọ

Ụdị ntọala

Ihe ndabara mara mma na nke dị fechaa na-enweghị mgbakwunye mgbakwunye.

Ihe atụ ederede enyemaka ngọngọ ebe a.

  1. <ụdị klas = "nke ọma" > 
  2.   <label> Aha akara </label>
  3.   < ụdị ntinye = "ederede" klaasị = "span3" ebe nchekwa = "Pịnye ihe..." >   
  4.   <span class = "help-block" > Ihe atụ ederede enyemaka ngọngọ ebe a. </span> 
  5.   <label class = "checkbox" > 
  6.     < ụdị ntinye = "checkbox" > Lelee m 
  7.   </label>
  8.   < ụdị bọtịnụ = "nyefere" klas = "btn" > Nyefee </button>  
  9. </form>

Ụdị ọchụchọ

Tinye .form-searchna mpempe akwụkwọ na .search-queryna input.

  1. <ụdị klas = "nke ọma ụ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-inlineka mezie nhazi kwụ ọtọ na oghere nke njikwa ụdị.

  1. <ụdị klas = "nke ọma ụ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ọ

Egosiri n'aka nri bụ njikwa ụdị ndabara niile anyị na-akwado. Nke a bụ ndepụta mgbọ:

  • ntinye ederede (ederede, paswọọdụ, email, wdg)
  • igbe nlele
  • redio
  • họrọ
  • otutu họrọ
  • ntinye faịlụ
  • ederede

Na mgbakwunye na ederede freeform, ntinye HTML5 ọ bụla dabere na ederede na-egosi otu a.

Ihe atụ akara

N'inye nhazi ụdị ihe atụ dị n'elu, nke a bụ akara aka jikọtara ya na ntinye mbụ na otu njikwa. Ihe .control-group, .control-label, na .controlsklaasị niile ka achọrọ maka ịke.

  1. <ụdị klas = "ụdị-horizontal" > 
  2.   <fieldset>
  3.     <akụkọ ifo> Ederede akụkọ ifo </ legend>
  4.     <div class = "control-otu" > 
  5.       <label class = "control-label" maka = "ntinye01" > Ntinye ederede </label>  
  6.       <div class = "njikwa" > 
  7.         < ụdị ntinye = "ederede" klaasị = "ntinye-xlarge" id = "ntinye01" >   
  8.         <p class = "help-block" > Ederede enyemaka na-akwado </p> 
  9.       </div>
  10.     </div>
  11.   </fieldset>
  12. </form>

Ụdị njikwa na-ekwu

Bootstrap nwere ụdị maka ihe nchọgharị akwadoro lekwasịrị anya na disabledsteeti. Anyị na-ewepụ Webkit ndabara outlinewee tinye a box-shadown'ọnọdụ ya maka :focus.

Nkwado ụdị

Ọ gụnyekwara ụdị nkwado maka mmejọ, ịdọ aka ná ntị na ịga nke ọma. Iji jiri, tinye klaasị njehie na gburugburu .control-group.

  1. <fieldset
  2.   klas = "njehie otu njikwa" >
  3.   …
  4. </fieldset>
Ụfọdụ bara uru ebe a
O nwere ike ịbụ na ọ garaghị nke ọma
Biko dozie njehie ahụ
Woohoo!
Woohoo!

Na-agbatị njikwa ụdị

Kwadebe & tinye ntinye

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.

Igbe nlele na redio

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 .inlinena nke ọ bụla .checkboxma ọ bụ .radiona ị mechara.

Ụdị inline na tinye/prepend

Iji jiri prepend ma ọ bụ tinye ntinye n'ụdị inline, jide n'aka na itinye ya .add-onna inputotu ahịrị, na-enweghị oghere.

Ụdị ederede enyemaka

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.

Jiri otu .span*klaasị si na sistemụ grid maka nha ntinye.

Ị nwekwara ike iji klaasị kwụ ọtọ nke na-adịghị maapụ na grid, na-emegharị n'ụdị CSS na-anabata, ma ọ bụ akaụntụ maka ụdị njikwa dị iche iche (dịka ọmụmaatụ, inputvs. select).

@

Nke a bụ ụfọdụ ederede enyemaka

.00
Nke a bụ ederede enyemaka ọzọ
$ .00

Mara: Akara akara gbara nhọrọ niile maka mpaghara ọpịpị buru ibu yana ụdị enwere ike iji ya.

Bọtịnụ

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

Bọtịnụ maka omume

Dịka mgbakọ, a ga-eji bọtịnụ naanị maka omume ebe hyperlinks ga-eji maka ihe. Dịka ọmụmaatụ, "Download" kwesịrị ịbụ bọtịnụ ebe "ọrụ na-adịbeghị anya" kwesịrị ịbụ njikọ.

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

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.

Ọtụtụ nha

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


Ọnọdụ nkwarụ

Maka bọtịnụ ndị nwere nkwarụ, tinye .disabledklas ahụ na njikọ yana disablednjirimara maka <button>ihe.

Njikọ mbụ Njikọ

Welie isi elu! Anyị na-eji .disableddị ka klaasị ịba uru ebe a, dị ka .activeklaasị nkịtị, yabụ enweghị prefix achọrọ.

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ụ klaasị = "btn" ụdị = "nyefere" >  
  3.   Bọtịnụ
  4. </bọtịnụ>
  5. < klas ntinye = "btn" ụdị = "bọtịnụ"  
  6.          uru = "Ntinye" >
  7. < klas ntinye = "btn" ụdị = "nyefere"  
  8.          uru = "Nyefee" >

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

Akara ngosi ejiri amara nke Glyphicons wetara

  • 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 ngosi-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

Ewuru dị ka sprite

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

Otu esi eji

Bootstrap na-eji <i>mkpado maka akara ngosi niile, mana ha enweghị klas ikpe-naanị prefix nkekọrịta. 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ị gbakwunyere mee ya:

  1. <i class = "akara ngosi-nyocha-ọcha" >>

Enwere klaasị 140 ị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.

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 ikpe

Akara ngosi mara mma, mana kedụ ebe mmadụ ga-eji ha? Nke a bụ echiche ole na ole:

  • Dị ka visuals maka ntugharị sidebar gị
  • Maka igodo na-ebugharị akara ngosi
  • Maka bọtịnụ iji nyere aka kọwaa ihe omume
  • Site na njikọ iji kesaa gburugburu ebe onye ọrụ na-aga

N'ezie, ebe ọ bụla ị nwere ike itinye <i>mkpado, ị nwere ike itinye akara ngosi.

Ihe atụ

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

Onye ọrụ

Weghachite ume Lelee Hichapụ

Ikwu Ntọala Ozi ndị ọzọ