Gyina CSS so

Wɔ scaffolding no atifi no, wɔayɛ HTML nneɛma atitiriw no su na wɔde adesua ahorow a wotumi trɛw mu ayɛ no yiye de ama woanya hwɛ ne atenka foforo a ɛkɔ so daa.

Nsɛmti & nipadua no mfonini

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.

h1. Asɛmti 1

h2. Asɛmti 2

h3. Asɛmti 3

h4. Asɛmti 4

h5. Asɛmti 5
h6. Asɛmti 6

Nsɛm a wosi so dua, address, ne nsɛm a wɔatwa no tiaa

Adeɛ Sɛnea wɔde di dwuma Ɛnyɛ ɔhyɛ
<strong> Sɛ́ wusi nsɛm a wɔakyerɛw no fã bi so dua a ɛho hia Ɛnyɛ ebiara
<em> Sɛ́ wode adwennwen si nsɛm a wɔakyerɛw no fã bi so dua no Ɛnyɛ ebiara
<abbr> Ɔkyekyere nsɛmfua ntiantiaa ne nsɛmfua a wɔatwa no tiaa de kyerɛ nkyerɛase a wɔatrɛw mu no wɔ hover so

Fa su a wopɛ titleka ho ma nsɛm a wɔatrɛw mu

Fa .initialismclass di dwuma ma nkyerɛwde akɛse a wɔatwa no tiaa.
<address> Sɛ wopɛ ne nana a ɔbɛn no paa anaa adwuma no nyinaa ho nsɛm a Kora formatting so denam nkyerɛwde nyinaa a wode bɛba awiei no so<br>

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 .

Nsɛm a wɔde siw ano

Adeɛ Sɛnea wɔde di dwuma Ɛnyɛ ɔhyɛ
<blockquote> Block-level element a wɔde fa nsɛm a efi fibea foforo mu ka

Fa citeattribute ka ho ma source URL

Fa .pull-leftne .pull-rightadesua ahorow ma floated options
<small> Optional element a wode bɛka asɛm bi a ɛfa nea ɔde di dwuma ho, mpɛn pii no ɔkyerɛwfo a ɔwɔ adwuma no asɛmti Fa nea <cite>ɛwɔ asɛmti anaa din a efi fibea no ho hyia

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 &mdash;ansa na ɛreba ama styling atirimpɔw ahorow.

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

Nhwɛso a ɛfa blockquotes ho

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

Nsɛm a wɔahyehyɛ

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

  1. nhwɛso no , ɛsɛ sɛ wɔkyekyere <code> ɔfã </ code > no 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>
  1. <pre> no
  2. <p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>
  3. </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.

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

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

Table a wɔde hyɛ agyirae

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
  1. <pon>
  2. <ti>
  3. <tr>
  4. <th> ... </th> na ɛwɔ hɔ
  5. <th> ... </th> na ɛwɔ hɔ
  6. </tr>a ɛwɔ hɔ
  7. </thead> no ho
  8. <nipadua>
  9. <tr>
  10. <td> ... </td> na ɛwɔ hɔ
  11. <td> ... </td> na ɛwɔ hɔ
  12. </tr>a ɛwɔ hɔ
  13. </tbody> no ho
  14. </table> no

Table a wobetumi apaw

Din Klaase Nkyerɛmu
Mfiaseɛ Ɛnyɛ ebiara Styles biara nni hɔ, columns ne rows kɛkɛ
Mfiasesɛm .table Ntrɛwmu a ɛda ntoatoaso ntam nkutoo
Wɔde hye so .table-bordered Rounds corners na ɛde akyi hye ka ho
Ɔsebɔ-a ɛyɛ nsensanee .table-striped Ɛde akyi kɔla a ɛyɛ hann a ɛyɛ fitaa ka row ahorow a ɛyɛ nwonwa (1, 3, 5, ne nea ɛkeka ho) ho .
Wɔayɛ no tiawa .table-condensed Twitwa vertical padding mu fã, fi 8px kosi 4px, wɔ ne nyinaa tdne thelements mu

Nhwɛso ahorow a wɔde kyerɛw nsɛm

1. Default table ahorow a wɔde yɛ nneɛma

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

  1. <pon adesua = "pon" >
  2. ...
  3. </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

2. Ɔpon a ɛwɔ nsensanee

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.

  1. <pon adesua = "pon pon-striped" >
  2. ...
  3. </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

3. Pon a ɛwɔ hye so

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

  1. <table class = "pon a ɛwɔ pon so" >
  2. ...
  3. </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

4. Pon a wɔayɛ no tiawa

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

  1. <table class = "pon pon-a wɔatwa no tiaa" >
  2. ...
  3. </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

5. Ka wɔn nyinaa bom!

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.

  1. <table class = "pon pon-striped pon-hye so pon-a wɔabɔ no mua" >
  2. ...
  3. </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.

Nneɛma ahorow anan a wɔde yɛ nneɛma

Bootstrap ma markup a ɛnyɛ den ne styles ma styles anan a ɛwɔ wɛb nkrataa a wɔtaa de di dwuma.

Din Klaase Nkyerɛmu
Ɛgyina hɔ (default) . .form-vertical (ɛnyɛ nea wɔhwehwɛ) . Nkyerɛwde ahorow a wɔaboaboa ano, a wɔahyehyɛ no benkum so wɔ nneɛma a wɔde di dwuma so
Inline no mu .form-inline Benkum-aligned label ne inline-block controls ma compact style
Hwehwɛ .form-search Extra-rounded text input ma typical nhwehwɛmu aesthetic
Ne tɛtrɛtɛ mu .form-horizontal Float benkum, nifa-ahyɛnsode labels wɔ line koro no ara so sɛ controls

Nhwɛso nkrataa a wɔde nkrataa sohwɛ nkutoo di dwuma, markup foforo biara nni hɔ

Mfitiase kwan so ɔkwan

Smart ne lightweight defaults a enni markup foforo.

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

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

Hwehwɛ kratasin no

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

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

Inline kratasin no

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

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

Nneɛma a ɛwɔ sorosoro

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

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.

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.

  1. <fom adesuakuw = "fom-horizontal" >
  2. <afuw mu nhyehyɛe>
  3. <anansesɛm> Atetesɛm mu nsɛm </anansesɛm>
  4. <div class = "ahyɛnsodeɛ-kuo" >
  5. <label class = "control-label" ma = "nhyɛase01" > Nsɛm a wɔde hyɛ mu </label>
  6. <div adesuakuw = "ahyɛnsode" >
  7. <nhyɛaseɛ type = "nkyerɛwee" adesuakuw = "nhyɛase-xlarge" id = "nhyɛase01" >
  8. <p class = "help-block" > Mmoa nkyerɛwee a ɛboa </p>
  9. </div> no
  10. </div> no
  11. </afuw mu nhyehyɛe>
  12. </form>

Form control tebea horow

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.

  1. <afuw mu nhyehyɛe
  2. class = "ahyɛnsodeɛ-kuo mfomsoɔ" >
  3. ...
  4. </afuw mu nhyehyɛe>
Ebinom som bo wɔ ha
Ebia na biribi anyɛ yiye
Yɛsrɛ sɛ siesie mfomso no
Woohoo!
Woohoo!

Ntrɛwmu a wɔde di dwuma wɔ kratasin so

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.

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

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

@

Mmoa nsɛm bi ni

.00 na ɛwɔ hɔ
Mmoa nsɛm pii ni
$ .00 na ɛwɔ hɔ

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.

Bɔtom adesuakuw="" Nkyerɛmu
btn Standard grey button a ɛwɔ gradient
btn btn-primary Ɛma aniwa mu duru a ɛboro so na ɛkyerɛ adeyɛ titiriw a ɛwɔ bɔtn ahorow bi mu
btn btn-info Wɔde di dwuma sɛ ɔkwan foforo a wɔfa so si default styles no ananmu
btn btn-success Ɛkyerɛ adeyɛ a edi mu anaasɛ ɛyɛ papa
btn btn-warning Ɛkyerɛ sɛ ɛsɛ sɛ wɔyɛ ahwɛyiye wɔ adeyɛ yi ho
btn btn-danger Ɛkyerɛ adeyɛ a asiane wom anaasɛ ebetumi ayɛ bɔne
btn btn-inverse Fa bɔton a ɛyɛ tuntum a ɛyɛ fitaa no sesa, ɛnyɛ nea wɔde kyekyere nkyerɛase adeyɛ anaa dwumadie bi ho

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.


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

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
  1. <a adesuakuw = "btn" href = "" > Nkitahodi </a>
  2. <button class = "btn" type = "de kɔ" >
  3. Bɔtom
  4. </button> no ho
  5. <input adesuakuw = "btn" type = "bɔtn".
  6. bo = "Nsɛm a wɔde hyɛ mu" >
  7. <input class = "btn" type = "de kɔma".
  8. 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:

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

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

Nhwɛso ahorow

Fa di dwuma wɔ bɔtn, bɔtn akuw ma adwinnade pon, akwantu, anaa kratasin a wɔde ahyɛ mu a wɔadi kan ahyɛ mu.