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.

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
fɔ[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 .

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 —bifo am fɔ stayl pɔpɔshɔn dɛn.

<blɔkkɔt>
  <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
  <small> Sɔmbɔdi we gɛt nem </small>
</blɔkkɔt>

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

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

Fɔ ɛ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>

<prɛ>
  <p>Sampul tɛks ya...</p>
</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.

<p> Sampul tɛks ya... </p>

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

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

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

<tebul>
  <di ed>
    <tr> fɔ di wan dɛn we de
      <th> ... </th> fɔ di wan dɛn we de
      <th> ... </th> fɔ di wan dɛn we de
    </tr>we de sho aw fɔ du dat
  </thead> fɔ di wan dɛn we de
  <tbɔdi>
    <tr> fɔ di wan dɛn we de
      <td> ... </td> fɔ di wan dɛn we de
      <td> ... </td> fɔ di wan dɛn we de
    </tr>we de sho aw fɔ du dat
  </tbɔdi>
</tebul>

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.

<tebul klas = "tebul" > 
  ...
</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

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.

<tebul klas = "tebul tebul-strip" > 
  ...
</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

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

<tebul klas = "tebul-bɔda" > 
  ...
</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

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

<tebul klas = "tebul tebul-kɔndɛns" > 
  ...
</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

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.

<tebul klas = "tebul tebul-strip tebul-bɔda tebul-kɔndɛns" > 
  ...
</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.

Besik fɔm

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

Lebul nem

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

Chek mi aut Rɛdi fɔ de ɔnda

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

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

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

Luk fɔ

<fɔm klas = "wɛl fɔm-sɔch" > 
  <input tayp = "tɛks" klas = "input-midiɔm sɔch-kwɛstyɔn" >  
  <bɔtin tayp = "sɔbmit" klas = "btn" > Sɔch </bɔtin>  
</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.

Mɛmba mi Sayn insay

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

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

Input fɔ tɛks

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

Chɛkbɔks

Opshɔn wan na dis ɛn dat—mek shɔ se yu put wetin mek i fayn

Pik wan list

sɔntin 2. Di wan dɛn we de 3. Di wan dɛn we de 4. Di wan dɛn we de 5. Di wan dɛn we de

Multikɔn-sɛlekt

1. Di wan dɛn we de 2. Di wan dɛn we de 3. Di wan dɛn we de 4. Di wan dɛn we de 5. Di wan dɛn we de

Fayl input

Teks eria

Sev di chenj dɛn we yu dɔn mek nɔ

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

<fɔm klas = "fɔm-ɔrizɔntal" > 
  <fild sɛt>
    <lɛjɛnd> Lɛjɛnd tɛks </lɛjɛnd>
    <div klas = "kɔntrol-grup" > 
      <lɛbul klas = "kɔntrol-lɛbul" fɔ = "input01" > Tɛks input </lɛbul>  
      <div klas = "kɔntrol dɛn" > 
        <input tayp = "tɛks" klas = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Sɔpɔt ɛp tɛks </p> 
      </div> fɔ di wan dɛn we de
    </div> fɔ di wan dɛn we de
  </fild sɛt>
</fɔm>

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.

<fild sɛt
  klas = "kɔntrol-grup mistek" >
  ...
</fild sɛt>

Input we de pe atɛnshɔn

Input we nɔ go ebul fɔ ɛdit

Sɔm dɛn valyu ya

Input we dɔn disable

Disabled chɛkbɔks

Dis na chɛkbɔks we dɛn dɔn disable

Input wit wɔnin

Sɔntɛm sɔntin bin apin we nɔ rayt

Input wit mistek

Duya kɔrɛkt di mistek

Input wit sakses

Woohoo!

Pik wit sakrifays

1. Di wan dɛn we de 2. Di wan dɛn we de 3. Di wan dɛn we de 4. Di wan dɛn we de 5. Di wan dɛn we de Woohoo!

Sev di chenj dɛn we yu dɔn mek 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.

Fɔm grid saiz dɛn

1. Di wan dɛn we de 2. Di wan dɛn we de 3. Di wan dɛn we de 4. Di wan dɛn we de 5. Di wan dɛn we de 1. Di wan dɛn we de 2. Di wan dɛn we de 3. Di wan dɛn we de 4. Di wan dɛn we de 5. Di wan dɛn we de 1. Di wan dɛn we de 2. Di wan dɛn we de 3. Di wan dɛn we de 4. Di wan dɛn we de 5. Di wan dɛn we de

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

Alternate saiz dɛn fɔ yuz

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

Tekst we dɛn dɔn pripen bifo tɛm

@

Na sɔm ɛp tɛks

Di tɛks we dɛn ad

.00 fɔ di wan dɛn we de

Na dis na mɔ ɛp tɛks

Apɛnd ɛn prɛpɛnd

$ .00 fɔ di wan dɛn we de

Apɛnd wit bɔtin

Go!

Tu-bɔtin dɛn de ad

Luk fɔ Di tin dɛn we yu kin pik fɔ du

Inlayn chɛkbɔks dɛn

1. Di wan dɛn we de 2. Di wan dɛn we de 3. Di wan dɛn we de

Chɛkbɔks dɛn

Opshɔn wan na dis ɛn dat—mek shɔ se yu put wetin mek i fayn Yu kin chɛk di opshɔn tu bak ɛn put am na di fɔm rizɔlt Opshɔn tri kin—yes, yu dɔn gɛs am—sɛf dɛn kin chɛk ɛn put am na di fɔm rizɔlt

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

Redio bɔtin dɛn

Opshɔn wan na dis ɛn dat—mek shɔ se yu put wetin mek i fayn Opshɔn tu kin bi ɔda tin ɛn we yu pik am i go pul opshɔn wan

Sev di chenj dɛn we yu dɔn mek nɔ

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.

Di men tin we dɛn fɔ du Du

Di men tin we dɛn fɔ du Du

Di men tin we dɛn fɔ du Du

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

Di praymari bɔtin Bɔtin

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 Bɔtin

<a klas = "btn" href = "" > Link </a>  
<bɔtin klas = "btn" tayp = "sɔbmit" >  
  Bɔtin
</bɔtin>
<input klas = "btn" tayp = "bɔtin".  
         valyu = "Input" >
<input klas = "btn" tayp = "sɔbmit".  
         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:

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

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

Rifresh yu Chɛk ɔut Dilit

Kɔmɛnt Di sɛtin dɛn Mɔ Infɔmeshɔn

Imel adrɛs