Typographic nsenia a wɔde kyerɛw nsɛm

Typographic grid no nyinaa gyina Less variables abien so wɔ yɛn variables.less fael no mu: @baseFontSizene @baseLineHeight. Nea edi kan ne base font-size a wɔde di dwuma wɔ ne nyinaa mu na nea ɛto so abien ne base line-height.

Yɛde saa variables no, ne akontabuo bi, yɛ margins, paddings, ne line-heights a ɛwɔ yɛn type no nyinaa ne nea ɛkeka ho.

Nhwɛso nipadua mu nsɛm

Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma.

Lead nipadua no mfonini

Ma nkyekyem bi da nsow denam .lead.

Vivamus sagittis lacus vel augue laoreet a ɛyɛ mmerɛw sɛ wobɛtɔ no. Duis mollis, est a ɛnyɛ ade a wɔde yɛ nneɛma.

Sɛ wode nsɛm a wosi so dua di dwuma

Fusce dapibus , tellus ac cursus commodo , tortor mauris aduru a wɔde yɛ aduan nibh , ut aduru a wɔde yɛ aduru a wɔde yɛ aduru a wɔde yɛ aduan a ɛyɛ mmerɛw sɛ wobɛtra ase amet risus. Maecenas faucibus mollis a ɛwɔ ntam no. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Hyɛ no nsow: Fa ahofadi de di dwuma <b>ne <i>HTML5 mu, nanso wɔn dwumadie asesa kakra. <b>no kyerɛ sɛ ɛbɛtwe adwene asi nsɛmfua anaa nsɛmfua so a ɛrenkyerɛ hia foforo a ɛho hia bere a <i>ɛyɛ nea ɛfa nne, mfiridwuma mu nsɛmfua, ne nea ɛkeka ho ho titiriw.

Address ahorow ho nhwɛso

Nhwɛso abien a ɛkyerɛ sɛnea <address>wobetumi de tag no adi dwuma ni:

795
Folsom Ave, Suite 600
San Francisco, CA 94107 Kr
: (123)

Edin a edi mũ
[email protected]

Nhwɛso ahorow a wɔatwa no tiaa

Nsɛmfua a wɔatwa no tiaa a ɛwɔ titlesu bi wɔ ase hye a ɛwɔ nsensanee a ɛyɛ hann ne mmoa cursor a ɛwɔ hover so. Eyi ma users extra indication biribi a wɔbɛkyerɛ wɔ hover so.

Fa initialismadesuakuw no ka asɛmfua tiawa bi ho na ama nkyerɛwee a ɛne ne ho hyia no ayɛ kɛse denam nsɛm a wobɛma ayɛ ketewaa kakra no so.

HTML yɛ ade a eye sen biara fi bere a wɔatwitwa paanoo no.

Asɛmfua su no a wɔatwa no tiaa ne attr .

Sɛ wode blockquote bɛka ho a, fa HTML<blockquote> biara kyekyere ho sɛ quote no. Sɛ wopɛ nsɛm a wɔafa aka tẽẽ a yɛkamfo kyerɛ sɛ .<p>

Fa <small>element a wopɛ ka ho a wode bɛkyerɛ wo fibea na wubenya em dash —ansa na ɛreba ama styling atirimpɔw ahorow.

<asɛm a wɔde siw ano>
  | _ Integer posuere erat a ɛyɛ anim a ɛyɛ mmerɛw. </p> no
  <small> Obi a wagye din </small>
</blockquote> a wɔde kyerɛw nsɛm

Wɔayɛ blockquotes a wɔahyɛ da ayɛ no sɛnea ɛte no:

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Integer posuere erat a ɛyɛ anim aduru.

Obi a wagye din wɔ Body of work mu

Sɛ wopɛ sɛ wo blockquote no kɔ nifa so a, fa ka ho class="pull-right":

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Integer posuere erat a ɛyɛ anim aduru.

Obi a wagye din wɔ Body of work mu

Wɔnhyɛ da

<ul>

• Lorem ipsum dolor tena ase amet
• Consectetur adipiscing a ɛyɛ fɛ yiye
• Integer molestie lorem wɔ massa no mu
• Facilisis a ɛwɔ pretium nisl aliquet mu
• Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
  • Phasellus iaculis a ɛwɔ nipadua no mu
  • Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
  • Vestibulum laoreet hyɛn gyinabea sem
  • Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
• Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
• Aenean tena ase amet erat nunc
• Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

Wɔannwene no

<ul class="unstyled">

• Lorem ipsum dolor tena ase amet
• Consectetur adipiscing a ɛyɛ fɛ yiye
• Integer molestie lorem wɔ massa no mu
• Facilisis a ɛwɔ pretium nisl aliquet mu
• Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
  • Phasellus iaculis a ɛwɔ nipadua no mu
  • Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
  • Vestibulum laoreet hyɛn gyinabea sem
  • Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
• Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
• Aenean tena ase amet erat nunc
• Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

Wɔahyɛ sɛ

<ol>

1. Lorem ipsum dolor tena ase amet
2. Consectetur adipiscing a ɛyɛ fɛ yiye
3. Integer molestie lorem wɔ massa no mu
4. Facilisis a ɛwɔ pretium nisl aliquet mu
5. Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
6. Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
7. Aenean tena ase amet erat nunc
8. Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

Nkyerɛmu

<dl>

Nkyerɛkyerɛmu a wɔahyehyɛ

Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.

Euismod ho asɛm

Vestibulum id ligula porta felis euismod awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.

Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.

Malesuada a ɛwɔ porta

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Horizontal nkyerɛkyerɛmu

<dl class="dl-horizontal">

Nkyerɛkyerɛmu a wɔahyehyɛ

Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.

Euismod ho asɛm

Vestibulum id ligula porta felis euismod awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.

Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.

Malesuada a ɛwɔ porta

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Felis euismod semper a ɛma obi nya lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut aduru a wɔde yɛ aduru a ɛma obi tena ase amet risus.

---

Ti a ɛwɔ soro! Horizontal description lists bɛtwa nsɛmfua a ɛware dodo sɛ ɛbɛhyɛ benkum column fix text-overflowno mu . Wɔ viewports teateaa mu no, wɔbɛsesa akɔ default stacked layout no so.

Inline no mu

Fa inline snippets a ɛwɔ code no mu no kyekyere <code>.

Sɛ nhwɛso no , ɛsɛ sɛ wɔkyekyere <code> ɔfã </ code > no sɛ inline .  

Mfitiaseɛ block

Fa di dwuma <pre>ma koodu nkyerɛwde ahorow pii. Hwɛ hu sɛ wubeguan afi angle brackets biara a ɛwɔ code no mu no mu na ama woatumi akyerɛ ase yiye.

<p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>

<pre> no
  <p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>
</pre> no

Hyɛ no nsow: Hwɛ hu sɛ wode code bɛto <pre>tag ahorow no mu a ɛbɛn benkum sɛnea wubetumi; ɛbɛkyerɛ tab ahorow no nyinaa ase.

Wubetumi apaw de .pre-scrollableadesuakuw a ɛbɛhyehyɛ max-height a ɛyɛ 350px na ama y-axis scrollbar no aka ho.

Google Nsɛm a Wɔka Kyerɛ

Fa <pre>element koro no ara na fa adesua ahorow abien a wopɛ ka ho ma nkyerɛase a ɛkɔ anim.

<p> Nsɛm a wɔakyerɛw ho nhwɛso wɔ ha... </p>

<pre class = "asɛm a ɛyɛ fɛ." 
     nkyerɛwde ahorow" >
  <p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>
</pre> no

Twe google-code-prettify na hwɛ readme no na woahu sɛnea wode bedi dwuma.

Ahyɛnsoɔ	Nkyerɛmu
<table>	Wrapping element a wɔde kyerɛ data wɔ tabular format mu
<thead>	Container element ma table header rows ( <tr>) de hyɛ table columns agyirae
<tbody>	Container element ma table rows ( <tr>) wɔ table no nipadua mu
<tr>	Container element ma table cells ( <td>anaa <th>) a epue wɔ row biako so
<td>	Default table cell a wɔde ahyɛ mu
<th>	Table cell soronko ma column (anaasɛ row, a egyina scope ne placement so) labels Ɛsɛ sɛ wɔde di dwuma wɔ a<thead>
<caption>	Nea pon no kura ho nkyerɛkyerɛmu anaa nsɛm a wɔaboaboa ano, titiriw a ɛho wɔ mfaso ma screen akenkanfo

<pon>
  <ti>
    <tr>
      <th> ... </th> na ɛwɔ hɔ
      <th> ... </th> na ɛwɔ hɔ
    </tr>a ɛwɔ hɔ
  </thead> no ho
  <nipadua>
    <tr>
      <td> ... </td> na ɛwɔ hɔ
      <td> ... </td> na ɛwɔ hɔ
    </tr>a ɛwɔ hɔ
  </tbody> no ho
</table> no

Wɔayɛ pon ahorow no ho nhyehyɛe ankasa a ɛwɔ ahye kakraa bi pɛ na ama wɔatumi akenkan na wɔakura nhyehyɛe mu. Sɛ wowɔ 2.0 a, .tableadesuakuw no yɛ nea wɔhwehwɛ.

<pon adesua = "pon" > 
  ...
</table> no

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

Nya wo pon ahorow no ho fɛfɛɛfɛ kakra denam zebra-striping a wode bɛka ho no so —fa .table-stripedadesuakuw no ka ho ara kwa.

Hyɛ no nsow: Striped tables de :nth-childCSS selector no di dwuma na enni IE7-IE8 mu.

<pon adesua = "pon pon-striped" > 
  ...
</table> no

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

Fa ahye atwa pon no nyinaa ho ahyia ne ntwea a ɛyɛ kurukuruwa ka ho ma ɛyɛ fɛ.

<table class = "pon a ɛwɔ pon so" > 
  ...
</table> no

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
	Marko	Otto na ɔkyerɛwee	@getbootstrap na ɛyɛ
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

Ma wo tables no nyɛ ketewaa denam .table-condensedadesua no a wode bɛka ho de atwitwa table cell padding no mu fã (efi 8px kosi 4px).

<table class = "pon pon-a wɔatwa no tiaa" > 
  ...
</table> no

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

Fa ahofadi bɛka table adesua ahorow no mu biara abom na ama woanya hwɛbea ahorow denam adesua ahorow a ɛwɔ hɔ no mu biara a wode bedi dwuma no so.

<table class = "pon pon-striped pon-hye so pon-a wɔabɔ no mua" > 
  ...
</table> no

	Edin mũ no nyinaa
# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

HTML ne CSS a ɛyɛ mmerɛw

Ɔfã a eye sen biara wɔ nkrataa a ɛwɔ Bootstrap mu ne sɛ wo inputs ne controls nyinaa hwɛ yiye ɛmfa ho sɛnea wobɛkyekye wɔ wo markup no mu. HTML a ɛho nhia biara nhia, nanso yɛde nhwɛso ahorow no ma wɔn a wɔhwehwɛ no.

Nhyehyɛe a ɛyɛ den kɛse no de adesua ahorow a ɛyɛ tiawa na wotumi sesa no ba ma ɛyɛ mmerɛw sɛ wobɛhyehyɛ ne adeyɛ a ɛkyekyere, enti wɔakata wo so wɔ anammɔn biara mu.

Nhyehyɛe anan ka ho

Bootstrap de mmoa ma fom nhyehyɛe ahorow anan ba:

• Ɛgyina hɔ (default) .
• Hwehwɛ
• Inline no mu
• Ne tɛtrɛtɛ mu

Fom nhyehyeɛ ahodoɔ hwehwɛ sɛ wɔyɛ nsakraeɛ bi wɔ agyiraeɛhyɛdeɛ mu, nanso controls no ankasa kɔ so tra hɔ na ɛyɛ wɔn ade saa ara.

Control states ne nea ɛkeka ho

Bootstrap no nkrataa no ka styles ma base form controls nyinaa te sɛ input, textarea, ne select a wobɛhwɛ kwan. Nanso ɛsan nso de custom components dodow bi te sɛ appended ne prepended inputs ne mmoa ma lists of checkboxes ba.

Nsɛm te sɛ mfomso, kɔkɔbɔ, ne nkonimdi ka ho ma kratasin sohwɛ ahorow biara. Nea ɛka ho nso ne styles a wɔde yɛ controls a wɔadi dɛm.

Mfitiase kwan so ɔkwan

Smart ne lightweight defaults a enni markup foforo.

Label din a wɔde kyerɛw

Nhwɛsoɔ block-level mmoa nsɛm wɔ ha.

Hwɛ me mu Fa kɔ

<form class = "wiɛ" > 
  <label> Label din </label>
  <input type = "text" class = "span3" beaeɛ = "Twerɛ biribi..." >   
  <span class = "help-block" > Nhwɛsoɔ block-level mmoa nkyerɛwee wɔ ha. </span> no 
  <label adesuakuw = "nhyɛnsode adaka" > 
    <input type = "checkbox" > Hwɛ me 
  </label> a wɔde kyerɛw nsɛm
  <button type = "fa kɔ" class = "btn" > Fa kɔ </button>  
</form>

Hwehwɛ kratasin no

Fa ka .form-searchkratasin no ho .search-queryne input.

Hwehwɛ

<form class = "wia fom-hwehwɛ" > 
  <input type = "text" class = "input-medium hwehwɛ-asɛmmisa" >  
  <button type = "submit" class = "btn" > Hwehwɛ </bɔtn>  
</form>

Inline kratasin no

Fa ka ho .form-inlinema finesse vertical alignment ne spacing a ɛwɔ form controls no mu.

Kae me Fa wo ho hyɛ mu

<form class = "wia fom-inline" > 
  <nhyɛaseɛ su = "nkyerɛwee" adesuakuw = "nhyɛaseɛ-ketewa" beaeɛ = "Email" >   
  <input type = "password" class = "input-ketewa" beae = "Asɛmfua" >   
  <label adesuakuw = "nhyɛnsode adaka" > 
    <input type = "checkbox" > Kae me 
  </label> a wɔde kyerɛw nsɛm
  <button type = "submit" class = "btn" > Fa wo ho hyɛ mu </button>  
</form>

Wɔakyerɛ wɔ nifa so ne default form controls a yɛboa no nyinaa. Nsɛm a wɔahyehyɛ a wɔabɔ no atuo no ni:

• nsɛm a wɔde hyɛ mu (nsɛm, asɛmfua, email, ne nea ɛkeka ho) .
• ahyɛnsode adaka no mu
• radio so
• yi ho
• pii paw
• fael a wɔde hyɛ mu
• textarea a wɔde kyerɛw nsɛm

Nsɛm a wɔde hyɛ mu

Wɔ freeform nkyerɛwee akyi no, HTML5 nkyerɛwee a egyina nsɛm so biara a wɔde hyɛ mu no da adi te sɛ nea ɛte saa.

Hwɛ adaka no mu

Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho

Paw list no

biribi 2. 2. 3. 3 4. 4. 5. 5

Multicon-paw nea ɛwɔ hɔ

1. 1. 2. 2. 3. 3 4. 4. 5. 5

Fael a wɔde hyɛ mu

Textarea a wɔde kyerɛw nsɛm

Fa nsakrae ahorow no sie Twam

Nhwɛso a wɔde hyɛ agyirae

Sɛ yɛde atifi hɔ nhwɛso krataa nhyehyɛe no ama a, ɛha na markup a ɛbata input ne control kuw a edi kan no ho. , .control-group, .control-labelne .controlsadesua ahorow no nyinaa yɛ nea wɔhwehwɛ ma styling.

<fom adesuakuw = "fom-horizontal" > 
  <afuw mu nhyehyɛe>
    <anansesɛm> Atetesɛm mu nsɛm </anansesɛm>
    <div class = "ahyɛnsodeɛ-kuo" > 
      <label class = "control-label" ma = "nhyɛase01" > Nsɛm a wɔde hyɛ mu </label>  
      <div adesuakuw = "ahyɛnsode" > 
        <nhyɛaseɛ type = "nkyerɛwee" adesuakuw = "nhyɛase-xlarge" id = "nhyɛase01" >   
        <p class = "help-block" > Mmoa nkyerɛwee a ɛboa </p> 
      </div> no
    </div> no
  </afuw mu nhyehyɛe>
</form>

Bootstrap kyerɛ styles ma browser-boa focused ne disabledstates. Yɛyi Webkit a wɔahyɛ da ayɛ no outlinena yɛde a box-shadowsi n’ananmu ma :focus.

---

Fom a ɛkyerɛ sɛ ɛyɛ nokware

Ɛsan nso de validation styles ma mfomso, kɔkɔbɔ, ne nkonimdi ka ho. Sɛ wode bedi dwuma a, fa mfomso adesuakuw no ka nea atwa ho ahyia no ho .control-group.

<afuw mu nhyehyɛe
  class = "ahyɛnsodeɛ-kuo mfomsoɔ" >
  ...
</afuw mu nhyehyɛe>

Nsɛm a wɔde hyɛ mu a wɔde wɔn adwene si so

Nsɛm a wɔde hyɛ mu a wontumi nsiesie

Ebinom som bo wɔ ha

Nsɛm a wɔde hyɛ mu a wɔagyae

Disabled checkbox a ɛwɔ hɔ no

Eyi yɛ checkbox a wɔagyae mu

Fa kɔkɔbɔ hyɛ mu

Ebia na biribi anyɛ yiye

Input a mfomso wom

Yɛsrɛ sɛ siesie mfomso no

Input ne nkonimdi

Woohoo!

Paw no yiye

1. 1. 2. 2. 3. 3 4. 4. 5. 5 Woohoo!

Fa nsakrae ahorow no sie Twam

Prepend & fa nsɛm a wɔde hyɛ mu no ka ho

Nsɛm a wɔde hyɛ mu akuw ahorow—a wɔde nsɛm a wɔde aka ho anaa wɔde ahyɛ mu ma—ma ɔkwan a ɛyɛ mmerɛw a wobɛfa so ama nsɛm a ɛfa ho pii ama wo nsɛm a wode bɛhyɛ mu no. Nhwɛsoɔ akɛseɛ bi ne @ sɛnkyerɛnne a ɛkyerɛ Twitter dwumadie din anaa $ ma sikasɛm.

---

Nnaka a wɔde hyɛ mu ne radio ahorow

Ɛde besi v1.4 no, na Bootstrap hia markup foforo atwa checkboxes ne radio ahorow ho ahyia na ama wɔatumi ayɛ stack. Afei, ɛyɛ asɛm a ɛyɛ mmerɛw sɛ wobɛsan ayɛ nea <label class="checkbox">ɛkata <input type="checkbox">.

Wɔboa inline checkboxes ne radio ahorow nso. Fa bi ka anaa .inlinebiara ho kɛkɛ na woawie..checkbox.radio

---

Inline nkrataa ne append/prepend

Sɛ wode prepend anaa append inputs bedi dwuma wɔ inline form mu a, hwɛ hu sɛ wode .add-onne inputno bɛto line koro no ara so, a space biara nni mu.

---

Form mmoa nsɛm

Sɛ wode mmoa nsɛm bɛka wo fom nsɛm a wode bɛhyɛ mu no ho a, fa inline mmoa nsɛm a ɛwɔ mu <span class="help-inline">anaa mmoa nsɛm a wɔde siw ano <p class="help-block">wɔ nsɛm a wɔde hyɛ mu no akyi ka ho.

Kyerɛw grid akɛse

1. 1. 2. 2. 3. 3 4. 4. 5. 5 1. 1. 2. 2. 3. 3 4. 4. 5. 5 1. 1. 2. 2. 3. 3 4. 4. 5. 5

Fa .span*adesua koro no ara a efi grid nhyehyɛe no mu di dwuma ma input akɛse.

Fa akɛse a ɛsesa

Wubetumi nso de static class ahorow a ɛnyɛ map kɔ grid no so, ɛyɛ nsakrae wɔ CSS styles a ɛyɛ mmuae no mu, anaasɛ akontaabu ma control ahorow ahorow (sɛ nhwɛso no, inputvs. select).

Nsɛm a wɔadi kan akyerɛw

@

Mmoa nsɛm bi ni

Nsɛm a wɔde aka ho

.00 na ɛwɔ hɔ

Mmoa nsɛm pii ni

Fa ka ho na prepend

$ .00 na ɛwɔ hɔ

Fa button no ka ho

Kɔ!

Nneɛma abien a ɛwɔ bɔtn a wɔde ka ho

Hwehwɛ Nneɛma a wubetumi apaw

Nneɛma a wɔde hyɛ mu

1. 1. 2. 2. 3. 3

Nnaka a wɔde hyɛ mu

Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho Wobetumi nso ahwɛ ɔkwan a ɛto so abien no na wɔde ahyɛ kratasin no aba mu Wobetumi ahwɛ ɔkwan a ɛto so abiɛsa no nso—yiw, woasusuw ho—na wɔde aka kratasin no aba ho

Hyɛ no nsow: Labels atwa nneɛma a wubetumi apaw nyinaa ho ahyia ama mmeae akɛse a wobɛkyere ne kratasin a wotumi de di dwuma kɛse.

Radio so nsɛm a wɔde di dwuma

Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho Option two betumi ayɛ biribi foforo na sɛ wopaw no a, ɛbɛyi option one no afi hɔ

Fa nsakrae ahorow no sie Twam

Buttons a wɔde yɛ nneyɛe

Sɛ́ nhyiam no, ɛsɛ sɛ wɔde bɔtn di dwuma ma nneyɛe nkutoo bere a ɛsɛ sɛ wɔde hyperlink di dwuma ma nneɛma. Sɛ nhwɛso no, ɛsɛ sɛ "Twe" yɛ bɔtn bere a ɛsɛ sɛ "nnansa yi dwumadi" yɛ link.

Wobetumi de button styles adi dwuma wɔ biribiara ho a wɔde .btnadesuakuw no adi dwuma. Nanso, mpɛn pii no wobɛpɛ sɛ wode eyinom di dwuma wɔ only <a>ne <button>elements so.

Cross browser a ɛne ne ho hyia

IE9 ntwitwa akyi gradients wɔ ntwea a ɛyɛ kurukuruwa so, enti yeyi fi hɔ. Nea ɛfa ho no, IE9 jankifies buttonelements a wɔadi dɛm, rendering text gray ne nasty text-shadow a yentumi nsiesie.

Nneɛma akɛse pii

Fancy akɛse anaa nketewa buttons? Fa .btn-large, .btn-small, anaa .btn-minika ho ma akɛse abien foforo.

Adeyɛ titiriw Anamɔntuo

Adeyɛ titiriw Anamɔntuo

Adeyɛ titiriw Anamɔntuo

Tebea a wɔadi dɛm

Sɛ wopɛ buttons a wɔadi dɛm a, fa .disabledclass no ka links ne disabledattribute no ho ma <button>elements.

Nkitahodi titiriw Link

Mfitiaseɛ bɔtɔn Bɔtom

Ti a ɛwɔ soro! Yɛde di dwuma .disabledsɛ utility class wɔ ha, a ɛte sɛ common .activeclass no, enti prefix biara ho nhia.

Adesuakuw biako, tag ahorow pii

Fa .btnadesua no di dwuma wɔ <a>, <button>, anaa <input>element bi so.

Link Bɔtom

<a adesuakuw = "btn" href = "" > Nkitahodi </a>  
<button class = "btn" type = "de kɔ" >  
  Bɔtom
</button> no ho
<input adesuakuw = "btn" type = "bɔtn".  
         bo = "Nsɛm a wɔde hyɛ mu" >
<input class = "btn" type = "de kɔma".  
         value = "Fa kɔma" >

Sɛ́ adeyɛ a eye sen biara no, bɔ mmɔden sɛ wobɛma element no ahyia ama wo nsɛm a ɛfa ho no na ama woahwɛ ahu sɛ cross-browser nkyerɛase no bɛyɛ pɛ. Sɛ wowɔ input, fa bi di dwuma <input type="submit">ma wo bɔtn no.

• ahyɛnsode-ahwehwɛ
• icon-nnwom
• ahyɛnsode-hwehwɛ
• icon-envelope a wɔde kyerɛw nsɛm
• ahyɛnsode-koma
• ahyɛnsode-nsoromma
• ahyɛnsode-nsoromma-a hwee nni mu
• ahyɛnsode-ɔdefo
• ahyɛnsode-sini
• icon-th-kɛse a ɛto so abien
• ahyɛnsode-th
• ahyɛnsode-th-list
• ahyɛnsode-ok
• ahyɛnsode-yi fi hɔ
• ahyɛnsode-a-yɛ-soom-in
• icon-zoom-a ɛyɛ kɛse
• ahyɛnsode-off
• ahyɛnsode-nsɛnkyerɛnne
• ahyɛnsode-cog
• ahyɛnsode-nwura
• ahyɛnsode-fie
• ahyɛnsode-fael
• ahyɛnsode-bere
• ahyɛnsode-kwan
• ahyɛnsode-twe-alt
• ahyɛnsode-twe
• ahyɛnsode-upload
• ahyɛnsode-inbox
• ahyɛnsode-agoru-kyinhyia
• ahyɛnsode-a wɔasan ayɛ
• ahyɛnsode-a ɛyɛ foforo
• ahyɛnsode-kyerɛw-alt
• ahyɛnsode-a wɔde hyɛ mu
• ahyɛnsode-frankaa
• ahyɛnsode-asɛm a wɔde bɔ asom

• icon-volume-a wɔadum
• icon-volume-a ɛkɔ fam
• icon-volume-a ɛwɔ soro
• ahyɛnsodeɛ-qrcode
• ahyɛnsode-barcode a wɔde di dwuma
• ahyɛnsode-tag
• ahyɛnsode-tag ahorow
• ahyɛnsode-nhoma
• ahyɛnsode-nkyerɛwee
• ahyɛnsode-tintim
• ahyɛnsode-kamera
• ahyɛnsode-font
• ahyɛnsode-a ɛyɛ den
• ahyɛnsode-nkyerɛwee
• ahyɛnsode-nsɛm-a-korɔn
• ahyɛnsode-nsɛm-trɛw
• ahyɛnsode-align-benkum so
• icon-align-mfinimfini
• icon-align-nifa so
• icon-align-bu no bem
• ahyɛnsode-nkyerɛwee
• ahyɛnsode-indent-benkum so
• ahyɛnsode-indent-nifa so
• ahyɛnsode-animbere-video
• ahyɛnsode-mfonini
• ahyɛnsode-pɛnsere
• icon-map-agyiraehyɛde
• ahyɛnsode-ayɛ nsakrae
• ahyɛnsode-tint
• ahyɛnsode-sesa
• ahyɛnsode-kyɛ
• ahyɛnsode-hwɛ
• ahyɛnsode-a wɔde tu kwan
• icon-anammɔn-akyi
• ahyɛnsode-ntɛmntɛm-akyi

• ahyɛnsode-akyi
• icon-play a wɔde di agoru
• ahyɛnsode-gyinabea
• ahyɛnsode-gyinabea
• ahyɛnsode-anim
• icon-fast-forward a wɔde kɔ anim
• icon-anammɔn-a ɛkɔ anim
• ahyɛnsode-eject
• ahyɛnsode-chevron-benkum so
• ahyɛnsode-chevron-nifa so
• ahyɛnsode-plus-sɛnkyerɛnne
• ahyɛnsode-minus-sɛnkyerɛnne
• ahyɛnsode-yi-nsɛnkyerɛnne
• ahyɛnsode-ok-sɛnkyerɛnne
• ahyɛnsode-asɛmmisa-sɛnkyerɛnne
• ahyɛnsode-nsɛm-sɛnkyerɛnne
• ahyɛnsode-a ɛwɔ screenshot so
• ahyɛnsode-yi-kyinhyia
• ahyɛnsode-ok-kyinhyia
• ahyɛnsode-ban-kyinhyia
• ahyɛnsode-agyan-benkum so
• ahyɛnsode-agyan-nifa so
• ahyɛnsode-agyan-a-kɔ soro
• ahyɛnsode-agyan-a ɛkɔ fam
• ahyɛnsode-kyɛ-alt
• icon-resize-a ɛyɛ fɛ
• ahyɛnsode-sesa-ketewa
• ahyɛnsode-plus
• ahyɛnsode-a wɔayi afi mu
• ahyɛnsode-nsoromma
• icon-exclamation-ahyɛnsode
• ahyɛnsode-akyɛde
• ahyɛnsode-ahaban
• ahyɛnsode-ogya
• icon-ani-abue

• icon-ani-a wɔde hyɛ mu
• ahyɛnsode-kɔkɔbɔ-sɛnkyerɛnne
• ahyɛnsode-wimhyɛn
• ahyɛnsode-kalenda so
• ahyɛnsode-a ɛyɛ random
• icon-nsɛm a wɔka kyerɛ
• ahyɛnsode-magnet
• ahyɛnsode-chevron-a ɛwɔ soro
• ahyɛnsode-chevron-a ɛwɔ fam
• ahyɛnsode-retweet
• icon-adetɔ-teaseɛnam
• ahyɛnsode-folda-a wɔato mu
• ahyɛnsode-folda-abue
• icon-resize-gyina hɔ pintinn
• ahyɛnsode-sesa-kɛse-a ɛkɔ soro
• ahyɛnsode-hdd
• ahyɛnsode-nantwinini abɛn
• ahyɛnsode-dɔn
• icon-adansedi krataa
• ahyɛnsode-nsateaa-a-kɔ soro
• icon-nsateaa-a ɛwɔ fam
• icon-nsa-nifa so
• icon-nsa-benkum so
• ahyɛnsode-nsa-a-kɔ soro
• ahyɛnsode-nsa-ase-ase
• ahyɛnsode-kuruwa-agyan-nifa
• ahyɛnsode-kuruwa-agyan-benkum so
• ahyɛnsode-kuruwa-agyan-a-kɔ soro
• ahyɛnsode-kuruwa-agyan-a ɛkɔ fam
• ahyɛnsode-wiase nyinaa
• ahyɛnsode-safoa
• ahyɛnsode-nnwuma
• ahyɛnsode-filter
• icon-briefcase a wɔde kyerɛw nneɛma
• ahyɛnsode-a ɛwɔ screen no so

Wɔkyekyee sɛ sprite

Sɛ́ anka yɛbɛma ahyɛnsode biara ayɛ abisade foforo no, yɛaboaboa ano ayɛ no sprite —mfonini ahorow a ɛwɔ fael biako mu a ɛde CSS di dwuma de mfonini ahorow no si hɔ denam background-position. Eyi ne ɔkwan koro no ara a yɛde di dwuma wɔ Twitter.com na ayɛ adwuma yiye ama yɛn.

Wɔde ahyɛnsodeɛ adesua ahodoɔ no nyinaa di anim .icon-ma edin ntam kwan ne scoping a ɛfata, te sɛ yɛn afã foforɔ no ara pɛ. Eyi bɛboa ma woakwati ntawntawdi ne nnwinnade afoforo.

Glyphicons ama yɛn kwan sɛ yɛde Halflings a wɔahyehyɛ no nni dwuma wɔ yɛn open-source toolkit no mu bere tenten a yɛde link ne credit bɛma wɔ ha wɔ docs no mu no. Yɛsrɛ sɛ susuw ho sɛ wobɛyɛ saa ara wɔ wo nnwuma ahorow mu.

Sɛnea wɔde bedi dwuma

Bootstrap de <i>tag di dwuma ma ahyɛnsode ahorow nyinaa, nanso wonni case class biara —prefix a wɔakyekyɛ nkutoo. Sɛ wode bedi dwuma a, ɛkame ayɛ sɛ fa koodu a edidi so yi to baabiara:

<i adesuakuw = "ahyɛnsode-hwehwɛ" ></i> 

Afei nso, nneɛma ahorow bi wɔ hɔ a wɔde yɛ ahyɛnsode ahorow a wɔadan no (fitaa), a wɔayɛ no krado a wɔde adesuakuw biako aka ho:

<i class = "ahyɛnsode-hwehwɛ ahyɛnsode-fitaa" ></i> 

Adesuakuw ahorow 140 na ɛwɔ hɔ a wubetumi apaw bi ama wo mfonini ahorow no. Fa <i>tag bi ka ho kɛkɛ a ɛwɔ classes a ɛfata na woayɛ set. Wubetumi ahu list no nyinaa wɔ sprites.less anaa ha yi ara wɔ saa krataa yi mu.

Ti a ɛwɔ soro! Sɛ wode nsɛm a ɛwɔ nhama ho redi dwuma, te sɛ nea ɛwɔ bɔtn anaa nav link ahorow mu no a, hwɛ hu sɛ wubegyaw baabi wɔ <i>tag no akyi ama ntam kwan a ɛfata.

Fa nsɛm a wɔakyerɛw di dwuma

Ahyɛnsode ahorow yɛ kɛse, nanso ɛhe na obi de bedi dwuma? Nsusuwii kakraa bi ni:

• Sɛ́ mfonini ahorow a wode bɛyɛ wo sidebar navigation
• Sɛnea ɛbɛyɛ a wobɛfa akwantu a wɔde ahyɛnsode di dwuma nkutoo
• Sɛnea ɛbɛyɛ a bɔton ahorow bɛboa ma wɔada adeyɛ bi ase
• Ne links a wɔde bɛkyɛ nsɛm a ɛfa ho wɔ baabi a ɔde di dwuma no rekɔ

Ne titiriw no, baabiara a wubetumi de <i>tag ahyɛ mu no, wubetumi de ahyɛnsode bi ahyɛ mu.

Ma wo ho tɔ wo Hwɛ sɛnea wobɛtɔ Pepa

Adwenkyerɛ Nsiesiei ahorow Nsɛm pii

Email address a wɔde di dwuma