Bays CSS fɔ di Baybul

Pan tap di skɔf, dɛn stayl ɛn ɛnjɔy di bɛsis HTML ɛlimɛnt dɛn wit ɛkstensible klas dɛn fɔ gi wan fresh, kɔnsistɛns luk ɛn fil.

Di edlayn dɛn & bɔdi kɔpi

Taypografik skel

Di ɔl taypografik grid de bays pan tu Less vɛriɔbul dɛn na wi vayriɔbul dɛn.less fayl: @baseFontSizeɛn @baseLineHeight. Di fɔs wan na di bays font-sayz we dɛn yuz ɔlsay ɛn di sɛkɔn wan na di bays layn-ayt.

Wi de yuz dɛn vɛriɔbul dɛn de, ɛn sɔm mats, fɔ mek di margin, padding, ɛn layn-ayt dɛn fɔ ɔl wi tayp ɛn mɔ.

Ɛgzampul bɔdi tɛks

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ɛn magnis dis we de bɔn pikin, nascetur ridiculus mus. Nullam id dolor id nibh ultrisis vehikula.

Lid bɔdi kɔpi

Mek wan paregraf difrɛn bay we yu ad .lead.

Vivamus sagittis lakus vel augu laoreet rutrum faucibus dolor ɔkta. Duis mollis, est we nɔto kɔmɔdo luktɔs.

h1. Di edlayn 1

h2. Di edlayn 2

h3. Di edlayn 3

h4. Di edlayn 4

h5. Di edlayn 5
h6. Di edlayn 6

Ɛmpɛshmɛnt, adrɛs, ɛn shɔt

Tin Aw fɔ yuz am Pɔsibul
<strong> Fɔ ɛksplen wan smɔl tɛks wit impɔtant Nɔn
<em> Fɔ ɛksplen wan smɔl tɛks wit strɛs Nɔn
<abbr> Rap abrevieshɔn ɛn akɔdin fɔ sho di ɛkspanda vɛshɔn we de na hova

Inklud opshɔnal titleatribyut fɔ ɛkspanda tɛks

Yuz .initialismklas fɔ big big abrɛvieshɔn dɛn.
<address> Fɔ kɔntakt infɔmeshɔn fɔ in gret gret granpa we de nia am ɔ di wan ol bɔdi fɔ wok Priziv fɔmat bay we yu dɔn ɔl di layn dɛn wit<br>

Yuz di ɛmpɛshimɛnt

Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimentum nibh , ut fεmεnt massa jכst sit amet risus. Maecenas faucibus mollis we de na di wɔl. Nulla vitae elit libero, we na wan pharetra augu.

Notis: Fil fri fɔ yuz <b>ɛn <i>insay HTML5, bɔt aw dɛn de yuz dɛn dɔn chenj smɔl. <b>na fɔ aylayt wɔd ɔ frɛz dɛn we nɔ de gi ɔda impɔtants we <i>na fɔ vɔys, tɛknikal wɔd dɛn, ɛn ɔda tin dɛn.

Ɛgzampul adrɛs dɛn

Na tu ɛgzampul dɛn ya bɔt aw dɛn <address>kin yuz di tag:

795
Folsom Ave, Suit 600
San Fransisko, CA 94107
P: (123) 456-7890
Ful Nem
[email protected]

Ɛgzampul fɔ shɔt dɛn

Abbrevieshɔn dɛn wit titleatribyut gɛt layt dɔt bɔt bɔda ɛn ɛp kɔsa we de hova. Dis de gi yuzman dɛn ɛkstra indikashɔn fɔ sɔntin we dɛn go sho pan hova.

Ad di initialismklas to wan abrevieshɔn fɔ mek di taypografik harmoni mɔ bay we yu gi am wan tɛks saiz we smɔl smɔl.

HTML na di bes tin sins slais bred.

Wan shɔt we fɔ di wɔd atribyut na attr .

Blɔkkɔt dɛn

Tin Aw fɔ yuz am Pɔsibul
<blockquote> Blɔk-lɛvel ɛlimɛnt fɔ kot kɔntinyu frɔm ɔda sɔs

Ad citeatribyut fɔ sɔs URL

Yuz .pull-leftɛn .pull-rightklas fɔ flot opshɔn dɛn
<small> Opshɔnal ɛlimɛnt fɔ ad wan yuz-fes saytayshɔn, tipikli wan ɔda pɔsin we gɛt taytul fɔ wok Put di <cite>rawnd di taytul ɔ di nem usay dɛn pul am

Fɔ put blɔkkɔt, rap <blockquote>rawnd ɛni HTML as di kot. Fɔ stret kot dɛn wi kin advays fɔ mek wan <p>.

Inklud wan opshɔnal <small>ɛlimɛnt fɔ sayt yu sɔs ɛn yu go gɛt wan em dash &mdash;bifo am fɔ stayl pɔpɔshɔn dɛn.

  1. <blɔkkɔt>
  2. <p> Lorem ipsum dolor sidɔm amet, kɔnsɛktɛtur adipisin ɛlit. Intaj posuere erat wan ante venenatis. </p>we de sho aw fɔ du dat
  3. <small> Sɔmbɔdi we gɛt nem </small>
  4. </blɔkkɔt>

Ɛgzampul blɔkkɔt dɛn

Difɔlt blɔkkɔt dɛn de stayl lɛk dis:

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante venenatis.

Sɔmbɔdi we gɛt nem na Bɔdi fɔ wok

Fɔ flot yu blɔkkɔt na di rayt say, ad class="pull-right":

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante venenatis.

Sɔmbɔdi we gɛt nem na Bɔdi fɔ wok

List dɛn

Nɔ ɔda ɔda tin dɛn

<ul>

  • Lorem ipsum dolor sidon amet
  • Konsectetur adipiscing elit we de na di bɔdi
  • Integer molestie lorem na massa
  • Fasilisis in prɛtiɔm nisl alikɛt
  • Nulla volutpat alikɔm velit
    • Fasɛl iakulis nɛk
    • Purus sodales di wan dɛn we de bɔn
    • Vestibulum laoreet pɔtitɔr sem
    • A tristik libero volutpat na
  • Faucibus porta lakus fringila vel
  • Aenean sidon amet erat nunc
  • Eget porttitor lorem we yu de du

Nɔ stayl

<ul class="unstyled">

  • Lorem ipsum dolor sidon amet
  • Konsectetur adipiscing elit we de na di bɔdi
  • Integer molestie lorem na massa
  • Fasilisis in prɛtiɔm nisl alikɛt
  • Nulla volutpat alikɔm velit
    • Fasɛl iakulis nɛk
    • Purus sodales di wan dɛn we de bɔn
    • Vestibulum laoreet pɔtitɔr sem
    • A tristik libero volutpat na
  • Faucibus porta lakus fringila vel
  • Aenean sidon amet erat nunc
  • Eget porttitor lorem we yu de du

Dɛn dɔn ɔda am

<ol>

  1. Lorem ipsum dolor sidon amet
  2. Konsectetur adipiscing elit we de na di bɔdi
  3. Integer molestie lorem na massa
  4. Fasilisis in prɛtiɔm nisl alikɛt
  5. Nulla volutpat alikɔm velit
  6. Faucibus porta lakus fringila vel
  7. Aenean sidon amet erat nunc
  8. Eget porttitor lorem we yu de du

Tɔk bɔt

<dl>

Diskripshɔn list dɛn
Wan diskripshɔn list fayn fɔ difayn wɔd dɛn.
Yuismod bin de
Vestibulum id ligula porta felis yuismod semper eget lasinia odio sem nec elit.
Donec id elit non mi porta gravida na eget metus.
Malesuada we de na di wɔl
Etiam porta sem malesuada magna mollis yusmod.

Ɔrizɔntal diskripshɔn

<dl class="dl-horizontal">

Diskripshɔn list dɛn
Wan diskripshɔn list fayn fɔ difayn wɔd dɛn.
Yuismod bin de
Vestibulum id ligula porta felis yuismod semper eget lasinia odio sem nec elit.
Donec id elit non mi porta gravida na eget metus.
Malesuada we de na di wɔl
Etiam porta sem malesuada magna mollis yusmod.
Felis euismod semper eget lasinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimɛnt nibh, ut fɛmintɔm massa jɔs sidɔm amet risus.

Hed dɛn de ɔp! Ɔrizɔntal diskripshɔn list dɛn go kɔt tɛm dɛn we tu lɔng fɔ fit insay di lɛft kɔlɔm fiks text-overflow. Insay smɔl smɔl viupɔt dɛn, dɛn go chenj to di difɔlt layout we dɛn dɔn stak.

Inlayn

Rap inlayn snipet dɛn fɔ kɔd wit <code>.

  1. ɛgzampul , <kɔd> sɛkshɔn </ kɔd > fɔ rap lɛk inlayn .

Besik blɔk

Yuz <pre>fɔ bɔku layn dɛn fɔ kɔd. Mek shɔ se yu rɔnawe pan ɛni angul brakɛt na di kɔd fɔ mek yu rɛnd fayn fayn wan.

<p>Sampul tɛks ya...</p>
  1. <prɛ>
  2. <p>Sampul tɛks ya...</p>
  3. </pre> fɔ di wan dɛn we de

Notis: Mek shɔ se yu kip kɔd insay <pre>tag dɛn as klos to di lɛft as yu ebul; i go rɛnd ɔl di tab dɛn.

Yu kin opshɔnali ad di .pre-scrollableklas we go sɛt maks-ayt fɔ 350px ɛn gi wan y-aks skrolba.

Google Prettify fɔ di wan dɛn we de yuz am

Tek di sem <pre>ɛlimɛnt ɛn ad tu opshɔnal klas dɛn fɔ mek yu rɛnd fayn fayn wan.

  1. <p> Sampul tɛks ya... </p>
  1. <pre klas = "prɛti prɛnt ."
  2. linɔm dɛn" >
  3. <p>Sampul tɛks ya...</p>
  4. </pre> fɔ di wan dɛn we de

Daunlod google-code-prettify ɛn si di readme fɔ aw fɔ yuz am.

Tebul mak-ap

Pent Tɔk bɔt
<table> Wrapping element fɔ sho data insay wan tebul fɔmat
<thead> Kɔntinɛnt ɛlimɛnt fɔ tebul hεda rɔw dɛn ( <tr>) fɔ lɛbul tebul kɔlɔm dɛn
<tbody> Kɔntinɛnt ɛlimɛnt fɔ tebul rɔw dɛn ( <tr>) na di bɔdi fɔ di tebul
<tr> Kɔntinɛnt ɛlimɛnt fɔ wan sɛt fɔ tebul sɛl dɛn ( <td>ɔ <th>) we de apia na wan rɔw
<td> Difɔlt tebul sɛl
<th> Speshal tebul sɛl fɔ kɔlɔm (ɔ row, dipen pan skɔp ɛn ples) lɛbl dɛn
Yu fɔ yuz insay a<thead>
<caption> Diskripshɔn ɔ sɔma fɔ wetin di tebul gɛt, mɔ fɔ di wan dɛn we de rid di skrin
  1. <tebul>
  2. <di ed>
  3. <tr> fɔ di wan dɛn we de
  4. <th> ... </th> fɔ di wan dɛn we de
  5. <th> ... </th> fɔ di wan dɛn we de
  6. </tr>we de sho aw fɔ du dat
  7. </thead> fɔ di wan dɛn we de
  8. <tbɔdi>
  9. <tr> fɔ di wan dɛn we de
  10. <td> ... </td> fɔ di wan dɛn we de
  11. <td> ... </td> fɔ di wan dɛn we de
  12. </tr>we de sho aw fɔ du dat
  13. </tbɔdi>
  14. </tebul>

Tebul opshɔn dɛn

Nem Klas Tɔk bɔt
Balans Nɔn Nɔ stayl, na jɔs kɔlɔm ɛn row dɛn
Men .table Na ɔrizɔntal layn dɛn nɔmɔ de bitwin di row dɛn
I gɛt bɔda .table-bordered Raun kɔna ɛn ad ɔda bɔda
Zɛbra-strip .table-striped Ad layt grey bakgrɔn kɔlɔ to odd row dɛn (1, 3, 5, ɛn ɔda wan dɛn)
Dɛn dɔn kɔndɛns am .table-condensed Kɔt vertikal padding insay af, frɔm 8px to 4px, insay ɔl tdɛn thɛlimɛnt dɛn

Ɛgzampul tebul dɛn

1. Difɔlt tebul stayl dɛn

Dɛn kin mek tebul dɛn ɔtomɛtik wan wit sɔm bɔda dɛn nɔmɔ fɔ mek shɔ se dɛn ebul fɔ rid dɛn ɛn fɔ mek dɛn kɔntinyu fɔ gɛt strɔkchɔ. Wit 2.0, di .tableklas nid fɔ de.

  1. <tebul klas = "tebul" >
  2. ...
  3. </tebul>
# Di wan dɛn we de Fɔs nem Las nem Yuzɛn nem
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twita na di twitter

2. Tebul we gɛt strɛp

Gɛt smɔl fansi wit yu tebul dɛn bay we yu ad zibra-strip—jɔs ad di .table-stripedklas.

Notis: Striped tebul dɛn de yuz di :nth-childCSS sɛlɛktɔ ɛn dɛn nɔ de na IE7-IE8.

  1. <tebul klas = "tebul tebul-strip" >
  2. ...
  3. </tebul>
# Di wan dɛn we de Fɔs nem Las nem Yuzɛn nem
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twita na di twitter

3. Tebul we gɛt bɔda

Ad bɔda dɛn rawnd di wan ol tebul ɛn rawnd kɔna dɛn fɔ mek yu fayn.

  1. <tebul klas = "tebul-bɔda" >
  2. ...
  3. </tebul>
# Di wan dɛn we de Fɔs nem Las nem Yuzɛn nem
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
Mak Ɔto bin de @gɛtbɔtstrap
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twita na di twitter

4. Tebul we dɛn dɔn kɔndɛns

Mek yu tebul dɛn mɔ kɔmpakt bay we yu ad di .table-condensedklas fɔ kɔt tebul sɛl pad insay af (frɔm 8px to 4px).

  1. <tebul klas = "tebul tebul-kɔndɛns" >
  2. ...
  3. </tebul>
# Di wan dɛn we de Fɔs nem Las nem Yuzɛn nem
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twita na di twitter

5. Kɔmbayn dɛn ɔl!

Fil fri fɔ jɔyn ɛni wan pan di tebul klas dɛn fɔ ajɔst difrɛn luk dɛn bay we yu yuz ɛni wan pan di klas dɛn we de.

  1. <tebul klas = "tebul tebul-strip tebul-bɔda tebul-kɔndɛns" >
  2. ...
  3. </tebul>
Ful nem
# Di wan dɛn we de Fɔs nem Las nem Yuzɛn nem
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twita na di twitter

Fleksibul HTML ɛn CSS

Di bɛst pat bɔt fɔm dɛn na Bootstrap na dat ɔl yu input ɛn kɔntrol dɛn luk fayn ilɛk aw yu bil dɛn na yu mak. No HTML we nɔ impɔtant nɔ nid, bɔt wi de gi di patɛns fɔ di wan dɛn we nid am.

Mɔ kɔmplikɛt layout dɛn kin kam wit sɔk ɛn skel klas dɛn fɔ izi stayl ɛn ivin binding, so yu de kɔba na ɛvri stɛp.

Fo layout dɛn bin de insay

Bootstrap kam wit sɔpɔt fɔ 4 kayn fɔm layout dɛn:

  • Vɛtikal (difɔlt) .
  • Luk fɔ
  • Inlayn
  • Bifo ɛn biɛn

Difrɛn kayn fɔm layout dɛn nid sɔm chenj dɛn fɔ mak, bɔt di kɔntrol dɛnsɛf de stil de ɛn dɛn de biev di sem.

Kɔntrol stet ɛn mɔ

Bootstrap in fɔm dɛn gɛt stayl dɛn fɔ ɔl di bays fɔm kɔntrol dɛn lɛk input, tɛksɛria, ɛn sɛlɛkshɔn we yu go ɛkspɛkt. Bɔt i kam bak wit bɔku kɔstɔm kɔmpɔnɛnt dɛn lɛk input dɛn we dɛn dɔn ad ɛn we dɛn dɔn pripen ɛn sɔpɔt fɔ list dɛn fɔ chɛkbɔks dɛn.

Stet dɛn lɛk mistek, wɔnin, ɛn sakrifays de insay fɔ ɛni kayn fɔm kɔntrol. Dɔn bak, dɛn put stayl dɛn fɔ kɔntrol dɛn we nɔ ebul fɔ waka.

Fo kayn fɔm dɛn

Bootstrap de gi simpul mak ɛn stayl fɔ 4 stayl dɛn fɔ kɔmɔn wɛb fɔm dɛn.

Nem Klas Tɔk bɔt
Vɛtikal (difɔlt) . .form-vertical (nɔ nid fɔ de) Stak, lɛft-alayn lɛbl dɛn oba kɔntrol dɛn
Inlayn .form-inline Left-alayned lebul ɛn inlayn-blɔk kɔntrol fɔ kɔmpakt stayl
Luk fɔ .form-search Ekstra-raun tɛks input fɔ wan tipik sɔch ɛstitik
Bifo ɛn biɛn .form-horizontal Flɔt lɛft, rayt-alayn lɛbl dɛn na di sem layn we di kɔntrol dɛn de

Ɛgzampul fɔm dɛn we de yuz jɔs fɔm kɔntrol dɛn, nɔ gɛt ɛkstra mak

Besik fɔm

Smat ɛn laytwɛt difɔlt dɛn we nɔ gɛt ɛkstra mak.

Ɛgzampul blɔk-lɛvel ɛp tɛks ya.

  1. <fɔm klas = "wɛl" >
  2. <lɛbul> Lebul nem </label>
  3. <input tayp = "tɛks" klas = "span3" pleshɔlda = "Tayp sɔntin..." >
  4. <span class = "help-block" > Ɛgzampul blɔk-lɛvel ɛp tɛks ya. </span> fɔ di wan dɛn we de
  5. <lɛbul klas = "chɛkbɔks" >
  6. <input type = "checkbox" > Chɛk mi aut
  7. </label> fɔ di wan dɛn we de
  8. <bɔtin tayp = "sɔbmit" klas = "btn" > Sɔbmit </bɔtin>
  9. </fɔm>

Fɔm fɔ fɛn tin dɛn

Ad .form-searchto di fɔm ɛn .search-queryto di input.

  1. <fɔm klas = "wɛl fɔm-sɔch" >
  2. <input tayp = "tɛks" klas = "input-midiɔm sɔch-kwɛstyɔn" >
  3. <bɔtin tayp = "sɔbmit" klas = "btn" > Sɔch </bɔtin>
  4. </fɔm>

Fɔm we de insay di layn

Ad .form-inlinefɔ fayn di vertikal alaynɛshɔn ɛn spɛshal fɔm kɔntrol dɛn.

  1. <fɔm klas = "wɛl fɔm-inlayn" >
  2. <input tayp = "tɛks" klas = "input-smɔl" pleshɔlda = "Imel" >
  3. <input tayp = "paswɔd" klas = "input-smɔl" pleshɔlda = "Paswɔd" >
  4. <lɛbul klas = "chɛkbɔks" >
  5. <input type = "checkbox" > Mɛmba mi
  6. </label> fɔ di wan dɛn we de
  7. <bɔtin tayp = "sɔbmit" klas = "btn" > Sayn insay </bɔtin>
  8. </fɔm>

Ɔrizɔntal fɔm dɛn

Dɛn sho na di rayt say na ɔl di difɔlt fɔm kɔntrol dɛn we wi de sɔpɔt. Na di list we gɛt di bulɛt dɛn:

  • tɛks input dɛn (tɛks, paswɔd, imel, ɛn ɔda tin dɛn)
  • chɛk bɔks
  • redio
  • pik
  • bɔku bɔku pik
  • fayl input
  • tɛks eria

Apat frɔm frifɔm tɛks, ɛni HTML5 tɛks-based input de apin lɛk so.

Ɛgzampul fɔ mak

Gi di ɛgzampul fɔm layout we de ɔp, na di mak we gɛt fɔ du wit di fɔs input ɛn kɔntrol grup. Di .control-group, .control-label, ɛn .controlsklas dɛn ɔl nid fɔ stayl.

  1. <fɔm klas = "fɔm-ɔrizɔntal" >
  2. <fild sɛt>
  3. <lɛjɛnd> Lɛjɛnd tɛks </lɛjɛnd>
  4. <div klas = "kɔntrol-grup" >
  5. <lɛbul klas = "kɔntrol-lɛbul" = "input01" > Tɛks input </lɛbul>
  6. <div klas = "kɔntrol dɛn" >
  7. <input tayp = "tɛks" klas = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Sɔpɔt ɛp tɛks </p>
  9. </div> fɔ di wan dɛn we de
  10. </div> fɔ di wan dɛn we de
  11. </fild sɛt>
  12. </fɔm>

Fɔm kɔntrol stet dɛn

Bootstrap ficha stayl fɔ brawza-sɔpɔt fɔs ɛn disabledstet. Wi de pul di difɔlt Wɛbkit outlineɛn aplay wan box-shadowinsay in ples fɔ :focus.


Fɔm validɛshɔn

I gɛt bak validɛshɔn stayl dɛn fɔ mistek, wɔnin, ɛn sakrifays. Fɔ yuz, ad di mistek klas to di tin dɛn we de rawnd .control-group.

  1. <fild sɛt
  2. klas = "kɔntrol-grup mistek" >
  3. ...
  4. </fild sɛt>
Sɔm dɛn valyu ya
Sɔntɛm sɔntin bin apin we nɔ rayt
Duya kɔrɛkt di mistek
Woohoo!
Woohoo!

Fɔ ɛkstɛnd fɔm kɔntrol dɛn

Prepend & apɛnd input dɛn

Input grup dɛn—wit tɛks we dɛn ad ɔ we dɛn dɔn ad bifo tɛm—de gi yu wan izi we fɔ gi mɔ kɔntɛks fɔ yu input dɛn. Gret ɛgzampul dɛn inklud di @ sayn fɔ Twitter yuzɛn nem ɔ $ fɔ faynans.


Chɛkbɔks dɛn ɛn redio dɛn

Te to v1.4, Bootstrap bin nid ɛkstra mak rawnd chɛkbɔks ɛn redio fɔ stak dɛn. Naw, na simpul tin fɔ ripit di <label class="checkbox">we de rap di <input type="checkbox">.

Inlayn chɛkbɔks ɛn redio dɛn de sɔpɔt bak. Jus ad .inlineto eni .checkboxor .radioen yu don don.


Inlayn fɔm ɛn apɛnd/prɛpɛnd

Fɔ yuz prɛpɛnd ɔ apɛnd input dɛn na inlayn fɔm, mek shɔ se yu put di .add-onɛn inputna di sem layn, we nɔ gɛt spɛs.


Fɔm ɛp tɛks

Fɔ ad ɛp tɛks fɔ yu fɔm input dɛn, put inlayn ɛp tɛks wit <span class="help-inline">ɔ wan ɛp tɛks blɔk wit <p class="help-block">afta di input ɛlimɛnt.

Yuz di sem .span*klas dɛn frɔm di grid sistem fɔ input saiz dɛn.

Yu kin yuz statik klas dɛn bak we nɔ de map to di grid, adap to di CSS stayl dɛn we de ansa, ɔ akɔn fɔ difrɛn kayn kɔntrol dɛn (ɛgz., inputvs. select).

@

Na sɔm ɛp tɛks

.00 fɔ di wan dɛn we de
Na dis na mɔ ɛp tɛks
$ .00 fɔ di wan dɛn we de

Notis: Lebul dɛn de rawnd ɔl di opshɔn dɛn fɔ bɔku big klik eria dɛn ɛn fɔm we yu go yuz mɔ.

Bɔtin klas="" Tɔk bɔt
btn Standart grey button wit gradient
btn btn-primary I de gi ɛkstra vijual wet ɛn i de sho di men akshɔn insay wan sɛt fɔ bɔtin dɛn
btn btn-info Yuz am as ɔda we fɔ di difɔlt stayl dɛn
btn btn-success I de sho se pɔsin dɔn du sɔntin fayn ɔ i dɔn du gud tin
btn btn-warning I de sho se dɛn fɔ tek tɛm wit dis akshɔn
btn btn-danger I de sho se dɛn du sɔntin we denja ɔ we go mek dɛn du bad tin
btn btn-inverse Alternate dak grey bɔtin, nɔ tay to sɛmantik akshɔn ɔ yuz

Bɔtin dɛn fɔ akshɔn dɛn

As kɔnvɛnshɔn, dɛn fɔ jɔs yuz bɔtin fɔ akshɔn dɛn we dɛn fɔ yuz haypa link fɔ tin dɛn. Fɔ ɛgzampul, "Download" fɔ bi bɔtin we "recent activity" fɔ bi link.

Yu kin yuz bɔtin stayl dɛn fɔ ɛnitin we dɛn yuz di .btnklas. Aweva, tipikli yu go wan aplay dis to onli <a>en <button>elements.

Krɔs brawza kɔmpatibiliti

IE9 nɔ de krop bakgrɔn grɛdiɛnt pan rawnd kɔna, so wi de pul am. Rilayt, IE9 de jankifies disabled buttonelements, rεndεr tεks grey wit wan nasty tεks-shadow we wi nכ kin fiks.

Bɔku bɔku saiz dɛn

Fans big ɔ smɔl bɔtin dɛn? Ad .btn-large, .btn-small, ɔ .btn-minifɔ tu ɔda saiz dɛn.


Disabled stet

Fɔ di bɔtin dɛn we nɔ ebul fɔ wok, ad di .disabledklas to link dɛn ɛn di disabledatribyut fɔ di <button>ɛlimɛnt dɛn.

Praymari link fɔ di wan dɛn we de Link

Hed dɛn de ɔp! Wi de yuz .disabledas yutiliti klas ya, we fiba di kɔmɔn .activeklas, so dɛn nɔ nid fɔ gɛt prɛfiks.

Wan klas, bɔku bɔku tag dɛn

Yuz di .btnklas pan wan <a>, <button>, ɔ <input>ɛlimɛnt.

Link
  1. <a klas = "btn" href = "" > Link </a>
  2. <bɔtin klas = "btn" tayp = "sɔbmit" >
  3. Bɔtin
  4. </bɔtin>
  5. <input klas = "btn" tayp = "bɔtin".
  6. valyu = "Input" >
  7. <input klas = "btn" tayp = "sɔbmit".
  8. valyu = "Sɔbmit" >

As di bɛst we fɔ du tin, tray fɔ mek di ɛlimɛnt fɔ yu kɔntɛks mach fɔ mek shɔ se di krɔs-brawza rɛnda mach. If yu gɛt input, yuz wan <input type="submit">fɔ yu bɔtin.

  • aykɔn-glas
  • aykɔn-myuzik
  • aykɔn-sɔch
  • aykɔn-ɛnvilɔp
  • aykɔn-at
  • aykɔn-sta
  • aykɔn-sta-ɛmti
  • aykɔn-yuz
  • aykɔn-fim
  • aykɔn-th-big
  • aykɔn-th
  • aykɔn-th-list
  • aykɔn-ok
  • aykɔn-rimov
  • aykɔn-zum-in
  • aykɔn-zum-ɔut
  • aykɔn-ɔf
  • aykɔn-sayn
  • aykɔn-kɔg
  • aykɔn-trash
  • aykɔn-os
  • aykɔn-fayl
  • aykɔn-taym
  • aykɔn-road
  • aykɔn-dɔwnlod-alt
  • aykɔn-dɔwnlod
  • aykɔn-ɔplod
  • aykɔn-inbɔks
  • aykɔn-ple-sɛklɔ
  • aykɔn-ripit
  • aykɔn-rifresh
  • aykɔn-list-alt
  • aykɔn-lɔk
  • aykɔn-flag
  • aykɔn-ɛdfɔn dɛn
  • aykɔn-volyum-ɔf
  • aykɔn-volyum-dɔwn
  • aykɔn-volyum-ɔp
  • aykɔn-qrkɔd
  • aykɔn-bakɔd
  • aykɔn-tɛg
  • aykɔn-tɛg dɛn
  • aykɔn-buk
  • aykɔn-bukmak
  • aykɔn-print
  • aykɔn-kamɛra
  • aykɔn-font
  • aykɔn-bɔld
  • aykɔn-italik
  • aykɔn-tɛks-ayt
  • aykɔn-tɛks-wid
  • aykɔn-alayn-lɛft
  • aykɔn-alayn-sɛnt
  • aykɔn-alayn-rayt
  • aykɔn-alayn-jɔstifay
  • aykɔn-list
  • aykɔn-indent-lɛft
  • aykɔn-indent-rayt
  • aykɔn-festaym-vidio
  • aykɔn-pikchɔ
  • aykɔn-pensil
  • aykɔn-map-mak
  • aykɔn-adjɔst
  • aykɔn-tint
  • aykɔn-ɛdit
  • aykɔn-shɛri
  • aykɔn-chɛk
  • aykɔn-muv
  • aykɔn-stɛp-bakwɔd
  • aykɔn-fast-bakwɔd
  • aykɔn-bakwɔd
  • aykɔn-play
  • aykɔn-pɔz
  • aykɔn-stɔp
  • aykɔn-fɔwad
  • aykɔn-fast-fɔwad
  • aykɔn-stɛp-fɔwad
  • aykɔn-ɛjɛkt
  • aykɔn-shɛvrɔn-lɛft
  • aykɔn-chɛvrɔn-rayt
  • aykɔn-plɔs-sayn
  • aykɔn-mayns-sayn
  • aykɔn-rimov-sayn
  • aykɔn-ok-sayn
  • aykɔn-kwɛstyɔn-sayn
  • aykɔn-info-sayn
  • aykɔn-skrin sho
  • aykɔn-rimov-sɛklɔ
  • aykɔn-ok-sɛklɔ
  • aykɔn-ban-sɛklɔ
  • aykɔn-aro-lɛft
  • aykɔn-aro-rayt
  • aykɔn-aro-ɔp
  • aykɔn-aro-dɔwn
  • aykɔn-shɛri-alt
  • aykɔn-sayz-ful
  • aykɔn-sayz-smɔl
  • aykɔn-plɔs
  • aykɔn-maynɔs
  • aykɔn-asterisk
  • aykɔn-ɛksklamashɔn-sayn
  • aykɔn-gift
  • aykɔn-lif
  • aykɔn-faya
  • aykɔn-ay-opin
  • aykɔn-ay-klos
  • aykɔn-wɔnin-sayn
  • aykɔn-plɛyn
  • aykɔn-kalɛnda
  • aykɔn-random
  • aykɔn-kɔmɛnt
  • aykɔn-magnet
  • aykɔn-chɛvrɔn-ɔp
  • aykɔn-shɛvrɔn-dɔwn
  • aykɔn-ritwit
  • aykɔn-shopin-kat
  • aykɔn-fɔlda-klos
  • aykɔn-fɔlda-opin
  • aykɔn-sayz-vɛtikal
  • aykɔn-sayz-ɔrizɔntal
  • aykɔn-hdd
  • aykɔn-bulhɔn
  • aykɔn-bɛl
  • aykɔn-sɛtifiket
  • aykɔn-tumb dɛn-ɔp
  • aykɔn-tumbs-dɔwn
  • aykɔn-an-rayt
  • aykɔn-an-lɛft
  • aykɔn-an-ɔp
  • aykɔn-an-dɔwn
  • aykɔn-sɛklɔ-aro-rayt
  • aykɔn-sɛklɔ-aro-lɛft
  • aykɔn-sɛklɔ-aro-ɔp
  • aykɔn-sɛklɔ-aro-dɔwn
  • aykɔn-glɔb
  • aykɔn-rɛnch
  • aykɔn-task dɛn
  • aykɔn-filta
  • aykɔn-brifkɛs
  • aykɔn-fulskrin

Dɛn bil am lɛk sprite

Bifo wi mek ɛvri aykɔn bi ɛkstra riŋwe, wi dɔn kɔmpilayt dɛn to wan sprite—wan bɔku pikchɔ dɛn na wan fayl we de yuz CSS fɔ put di pikchɔ dɛn wit background-position. Dis na di sem we we wi de yuz fo Twitter.com and i don wok wel fo wi.

Ɔl di aykɔn klas dɛn gɛt prɛfiks wit .icon-fɔ di rayt nemspɛs ɛn skɔp, jɔs lɛk wi ɔda kɔmpɔnɛnt dɛn. Dis go ɛp fɔ mek dɛn nɔ gɛt wanwɔd wit ɔda tul dɛn.

Glyphicons dɔn gi wi fɔ yuz di Halflings we dɛn dɔn sɛt na wi opin-sɔs tulkit sote wi de gi wan link ɛn kredit ya na di doks. Duya tink bɔt fɔ du di sem tin na yu prɔjek dɛn.

Aw fɔ yuz am

Bootstrap de yuz wan <i>tag fɔ ɔl di aykɔn dɛn, bɔt dɛn nɔ gɛt kes klas—na wan prɛfiks nɔmɔ we dɛn sheb. Fɔ yuz am, put di kɔd we de dɔŋ ya jɔs lɛk ɛnisay:

  1. <i klas = "aykɔn-sɔch" </i>

Stayl dɛn de bak fɔ invayt (wayt) aykɔn dɛn, we dɛn mek rɛdi wit wan ɛkstra klas:

  1. <i klas = "aykɔn-sɔch aykɔn-wayt" ></i>

140 klas dɛn de fɔ pik frɔm fɔ yu aykɔn dɛn. Jɔs ad wan <i>tag wit di rayt klas dɛn ɛn yu dɔn sɛt. Yu kin fɛn di ful list na sprites.less ɔ rayt ya na dis dɔkyumɛnt.

Hed dɛn de ɔp! We yu de yuz nia string dɛn we gɛt tɛks, lɛk bɔtin ɔ nav link dɛn, mek shɔ se yu lɛf ples afta di <i>tɛg fɔ mek yu ebul fɔ spes fayn fayn wan.

Yuz kes dɛn

Aykɔn dɛn fayn, bɔt usay pɔsin go yuz dɛn? Na sɔm aidia dɛn ya:

  • As vijual fɔ yu saydbar nevigishɔn
  • Fɔ wan klin aykɔn-driven nevigishɔn
  • Fɔ mek bɔtin dɛn ɛp fɔ sho di minin fɔ wan akshɔn
  • Wit link fɔ sheb kɔntɛks na di say we pɔsin de go

Essentially, eniwe yu fit put <i>tag, yu fit put icon.

Ɛgzampul dɛn

Yuz dɛn na bɔtin dɛn, bɔtin grup dɛn fɔ wan tulba, nevigishɔn, ɔ fɔm input dɛn we dɛn dɔn pripend.