ɔp
dɔn go
rayt
dɔŋ
Bootstrap fɔ yuz

Bootstrap, frɔm twita

Bootstrap na wan tulkit frɔm Twitter we dɛn mek fɔ kikstart divɛlɔpmɛnt fɔ wɛb ap ɛn sayt dɛn.
I gɛt bays CSS ɛn HTML fɔ taypografi, fɔm, bɔtin, tebul, grid, nevigishɔn, ɛn ɔda tin dɛn.

Nerd alert: Dɛn bil Bootstrap wit Less ɛn dɛn bin mek am fɔ wok aut na di get wit mɔdan brawza dɛn na maynd.

Hotlink di CSS

Fɔ mek yu bigin kwik ɛn izi, jɔs kɔpi dis smɔl pat na yu wɛb pej.

Yuz am wit Less

Wan fan fɔ yuz Less? No prɔblɛm, jɔs klon di repo ɛn ad dɛn layn ya:

Fɔk na GitHub

Daunlod, fɔk, pul, fayl ishu dɛn, ɛn mɔ wit di ɔfishal Bootstrap repo na Github.

Bootstrap na GitHub »

Naw, na v1.3.0

Bɔt Bootstrap Smɔl istri, brawza sɔpɔt, ɛn ɔda tin dɛn

Istri

Injinia dɛm na twita dɔn yuz ɔlmost ɛni laybri we dɛn bin sabi fɔ mit di tin dɛn we dɛn nid fɔ du na di frɔnt ɛnd. Bootstrap bin bigin as ansa to di chalenj dɛm we bin de prɛzɛnt. Wit di ɛp fɔ bɔku wɔndaful pipul dɛn, Bootstrap dɔn gro bɔku bɔku wan.

Rid mɔ na dev.twitter.com ›

Brawza sɔpɔt

Dɛn dɔn tɛst ɛn sɔpɔt Bootstrap na big big brɔuza dɛn we de naw lɛk Chrome, Safari, Intanɛt Ɛksplɔrɔ, ɛn Fayafaks.

Dɛn dɔn tɛst am ɛn sɔpɔt am na Chrome, Safari, Intanɛt Ɛksplɔrɔ, ɛn Fayafaks
  • Latest Safari fɔ di wan dɛn we de wok
  • Di laytst Google Chrome
  • Fayafaks 4+
  • Intanɛt Ɛksplɔrɔ 7+
  • Ɔpa 11. Di wan dɛn we de wok

Wetin de insay

Bootstrap kam kɔmplit wit kɔmpilayt CSS, nɔ kɔmpilayt, ɛn ɛgzampul tɛmplat dɛn.

Ɛgzampul dɛn fɔ stat kwik kwik wan

Nid sɔm kwik tɛmplat dɛn? Chek dɛn bɛsis ɛgzampul dɛn ya we wi dɔn put togɛda:

  • Simpul tri-kɔlɔm layout wit hiro yunit
  • Fluid layout wit statik saydbar
  • Simpul hang kɔntena fɔ ap dɛn

Grid sistem Rok di standad 940px ɔ rol yu yon

Difɔlt grid we dɛn dɔn mek

Di difɔlt grid sistem we dɛn gi as pat pan Bootstrap na 940px waid 16-kɔlɔm grid. Na wan flawa fɔ di pɔpul 960 grid sistɛm, bɔt we nɔ gɛt di ɔda margin/padding na di lɛft ɛn rayt sayd.

Ɛgzampul fɔ mek di grid mak

As wi sho ya, dɛn kin mek wan besik layout wit tu "kɔlɔm dɛn," ɛni wan pan dɛn de span wan nɔmba pan di 16 fawndeshɔn kɔlɔm dɛn we wi bin dɔn difayn as pat pan wi grid sistɛm. Si di ɛgzampul dɛn we de dɔŋ fɔ si mɔ difrɛn tin dɛn.

  1. <div klas = "rɔw" > 
  2.   <div klas = "span6" > 
  3.     ...
  4.   </div> fɔ di wan dɛn we de
  5.   <div klas = "span10" > 
  6.     ...
  7.   </div> fɔ di wan dɛn we de
  8. </div> fɔ di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
1. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
2. Di wan dɛn we de
3. Di wan dɛn we de
3. Di wan dɛn we de
3. Di wan dɛn we de
3. Di wan dɛn we de
3. Di wan dɛn we de
1. Di wan dɛn we de
4. Di wan dɛn we de
4. Di wan dɛn we de
4. Di wan dɛn we de
4. Di wan dɛn we de
1/3 fɔ du dat
1/3 fɔ du dat
1/3 fɔ du dat
1/3 fɔ du dat
2/3 fɔ du dat
4. Di wan dɛn we de
6. Di wan dɛn we de
6. Di wan dɛn we de
8. Di wan dɛn we de
8. Di wan dɛn we de
5. Di wan dɛn we de
11 we de tɔk bɔt
16 we de tɔk bɔt

Fɔ ɔfset kɔlɔm dɛn

4. Di wan dɛn we de
8 ɔfset 4. Di wan dɛn we de wok
1/3 ɔfset 2/3s
4 ɔfset 4. Di wan dɛn we de wok
4 ɔfset 4. Di wan dɛn we de wok
5 ɔfset 3. Di wan dɛn we de wok
5 ɔfset 3. Di wan dɛn we de wok
10 ɔfset 6.

Kɔlɔm dɛn we de mek dɛn nɛst

Nest yu kɔntinyu if yu fɔ bay we yu mek wan .rowinsay wan kɔlɔm we dɔn de.

Ɛgzampul fɔ kɔlɔm dɛn we dɛn dɔn nɛst

Level 1 na di kɔlɔm
Lɛvul 2
Lɛvul 2 
  1. <div klas = "rɔw" > 
  2.   <div klas = "span12" > 
  3.     Level 1 na di kɔlɔm
  4.     <div klas = "rɔw" > 
  5.       <div klas = "span6" > 
  6.         Lɛvul 2
  7.       </div> fɔ di wan dɛn we de
  8.       <div klas = "span6" > 
  9.         Lɛvul 2
  10.       </div> fɔ di wan dɛn we de
  11.     </div> fɔ di wan dɛn we de
  12.   </div> fɔ di wan dɛn we de
  13. </div> fɔ di wan dɛn we de

Rol yu yon grid

Bil insay Bootstrap na wan anful vɛriɔbul fɔ kɔstɔmayz di difɔlt 940px grid sistem. If yu kɔstɔmayz smɔl, yu kin chenj di sayz fɔ di kɔlɔm dɛn, dɛn gɔta dɛn, ɛn di kɔntena we dɛn de insay.

Insay di grid

Di vayriɔbul dɛn we nid fɔ chenj di grid sistɛm naw ɔl de na preboot.less.

Di tin dɛn we kin chenj Difɔlt valyu Tɔk bɔt
@gridColumns 16 we de tɔk bɔt Di nɔmba fɔ di kɔlɔm dɛn we de insay di grid
@gridColumnWidth 40px na di pikchɔ Di wit fɔ ɛni kɔlɔm insay di grid
@gridGutterWidth 20px we gɛt Di negatif spes bitwin ɛni kɔlɔm
@siteWidth Kɔmpyuta sɔm fɔ ɔl di kɔlɔm ɛn gɔta dɛn Wi yuz sɔm besik mach fɔ kɔnt di nɔmba fɔ di kɔlɔm ɛn gɔta ɛn sɛt di wit fɔ di .fixed-container()miksin.

Naw fɔ kɔstɔmayt

Fɔ chenj di grid min fɔ chenj di tri @grid-*vɛriɔbul dɛn ɛn kɔmpilayt di Les fayl dɛn bak.

Bootstrap kam wit ɛkwipmɛnt fɔ handle wan grid sistem wit te to 24 kɔlɔm dɛn; di difɔlt na jɔs 16. Na so yu grid vɛriɔbul dɛn go luk kɔstɔmayt to 24-kɔlɔm grid.

  1. @gridKɔlɔm dɛn : 24 ;       
  2. @gridKɔlɔmWid : 20px ;   
  3. @gridGɔtaWid : 20px ;

Wans recompiled, yu go bi set!

Layouts Besik tɛmplat fɔ mek wɛb pej dɛn

Fiks layout we dɛn dɔn mek

Di difɔlt ɛn simpul 940px-wayd, sɛntrɛd layout fɔ jɔs lɛk ɛni wɛbsayt ɔ pej we wan singl gi <div.container>.

  1. <bɔdi>
  2.   <div klas = "kɔntena" > 
  3.     ...
  4.   </div> fɔ di wan dɛn we de
  5. </bɔdi>

Fluid layout fɔ mek tin dɛn

Wan ɔda, fleksibul fluid pej strɔkchɔ wit min- ɛn maks-wid ɛn wan lɛft-an saydbar. Gret fɔ ap ɛn doks.

  1. <bɔdi>
  2.   <div klas = "kɔntena-fluid" > 
  3.     <div klas = "saydbar" > 
  4.       ...
  5.     </div> fɔ di wan dɛn we de
  6.     <div klas = "kɔntinɛnt" > 
  7.       ...
  8.     </div> fɔ di wan dɛn we de
  9.   </div> fɔ di wan dɛn we de
  10. </bɔdi>

Taypografi Ɛd dɛn, paregraf dɛn, list dɛn, ɛn ɔda inlayn tayp ɛlimɛnt dɛn

Di edlayn dɛn & kɔpi

Wan standad taypografik hayari fɔ strɔkchɔ yu wɛb pej dɛn.

Di wan ol taypografik grid de bays pan tu Less variebul dɛn na wi preboot.less fayl: @basefontɛn @baseline. 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ɔ.

h1. Di edlayn 1

h2. Di edlayn 2

h3. Di edlayn 3

h4. Di edlayn 4

h5. Di edlayn 5
h6. Di edlayn 6

Ɛgzampul paregraf

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 ut id elit.

Ɛgzampul edlayn I gɛt sɔb-hɛdin...

Difrɛn difrɛn tin dɛn. di ɛlimɛnt dɛn

Yuz ɛmpɛshimɛnt, adrɛs, & abbrevieshɔn

<strong> <em> <address> <abbr>

Ustɛm fɔ yuz am

Dɛn fɔ yuz ɛmpɛshimɛnt tɛg dɛn ( <strong>ɛn <em>) fɔ sho ɔda impɔtant ɔ ɛmpɛshmɛnt fɔ wan wɔd ɔ frɛz we yu kɔmpia am wit di kɔpi we de rawnd am. Yuz <strong>fɔ impɔtant ɛn <em>fɔ strɛs ɛmpɛshmɛnt.

Di tin dɛn we dɛn tɔk mɔ bɔt na wan paregraf

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: I stil okay fɔ yuz <b>ɛn <i>tag dɛn na HTML5 ɛn dɛn nɔ nid fɔ stayl bold ɛn italik, rispɛktful wan (pan ɔl we if mɔ sɛmantik ɛlimɛnt de, yuz am). <b>na fɔ aylayt wɔd ɔ frɛz dɛn we nɔ de gi ɔda impɔtant tin dɛn, we <i>na fɔ vɔys, tɛknikal wɔd dɛn, ɛn ɔda tin dɛn.

Adrɛs dɛn

Di <address>elemɛnt de yuz fɔ kɔntakt infɔmeshɔn fɔ in gret gret granpa we de nia am, ɔ di wan ol bɔdi fɔ wok. Na tu ɛgzampul dɛn ya bɔt aw dɛn go ebul fɔ yuz am:

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

Notis: Ɛni layn na wan <address>fɔ dɔn wit layn-brɛk ( <br />) ɔ dɛn fɔ rap am wit blɔk-lɛvel tɛg (ɛgz., <p>) fɔ mek i ebul fɔ strɔkchɔ di tin dɛn we de insay fayn fayn wan.

Di tin dɛn we dɛn kin yuz fɔ shɔt

Fɔ shɔt ɛn akɔdin, yuz di <abbr>tɛg ( <acronym>dɛn nɔ de yuz am na HTML5 ). Put di shɔthand fɔm insay di tag ɛn sɛt taytul fɔ di kɔmplit nem.

Blɔkkɔt dɛn

<blockquote> <p> <small>

Aw fɔ kot

Fɔ put wan blɔkkɔt, rap <blockquote>rawnd <p>ɛn <small>tag dɛn. Yuz di <small>element fo cite yu source en yu go geht wan em dash &mdash;bifo am.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante venenatis dapibus posuere velit alikɛt.

Dɔktɔ Juliɔs Hibɛt 
  1. <blɔkkɔt>
  2.   <p> Lorem ipsum dolor sidɔm amet, kɔnsɛktɛtur adipisin ɛlit. Intaj posuere erat wan ante venenatis dapibus posuere velit alikɛt. </p>we de sho aw fɔ du dat
  3.   <smɔl> Dɔktɔ Juliɔs Hibɛt </small>
  4. </blɔkkɔt>

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

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.

Kɔd fɔ di Baybul

<code> <pre>

Pimp yu kod in stayl wit tu simpul tag. Fɔ ivin mɔ awesomeness tru javascript, drɔp in Google in kɔd prettify laybri ɛn yu dɔn sɛt.

Fɔ prizent di kɔd

Kɔd, blɔk dɛn ɔ jɔs snipɛt dɛn insay layn, yu kin sho am wit stayl jɔs bay we yu rap am na di rayt tɛg. Fɔ blɔk dɛn we gɛt kɔd we de span bɔku layn dɛn, yuz di <pre>ɛlimɛnt. Fɔ inlayn kɔd, yuz di <code>ɛlimɛnt.

Tin Rizɔlt
<code> Insay wan layn we gɛt tɛks lɛk dis, yu kɔd we yu rap go tan lɛk dis >html<ɛlimɛnt.
<pre> 
<div> fɔ di wan dɛn we de
  <h1>Hɛd</h1>
  <p>Sɔmtin rayt ya...</p>
</div> fɔ di wan dɛn we de

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

Yuz di google-code-prettify laybri, yu de blɔk dɛn fɔ kɔd gɛt smɔl difrɛn vijual stayl ɛn ɔtomɛtik sɛntaks aylaytin.

<div> <h1> Ɛd </h1> <p> Sɔntin rayt ya... </p> </div>

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

Inlayn lɛbl dɛn

<span class="label">

Kɔl atɛnshɔn to ɔ flag ɛni wɔd we de na yu bɔdi tɛks.

Lebul ɛnitin

Ɛva nid wan pan dɛn fayn fayn Nyu! ɔ Impɔtant flag dɛn we yu de rayt kɔd? Wɛl, naw yu gɛt dɛn. Na dis na wetin de insay bay difɔlt:

Kɔl Rizɔlt
<span class="label">Default</span> Balans
<span class="label success">New</span> Nyu
<span class="label warning">Warning</span> Wɔnin
<span class="label important">Important</span> Impɔtant
<span class="label notice">Notice</span> Notis

Midia Fɔ sho pikchɔ ɛn fim dɛn

Midya grid fɔ di wan dɛn we de

Display smɔl pikchɔ dɛn we gɛt difrɛn sayz dɛn na pej dɛn we gɛt smɔl HTML futprin ɛn we nɔ gɛt bɔku stayl dɛn.

Ɛgzampul smɔl smɔl pikchɔ dɛn

Thumbnails in di .media-gridkin bi ɛni saiz, bɔt dɛn kin wok fayn we dɛn map dɛn dairekt to di Bootstrap grid sistem we dɛn bil insay. Imej witd lɛk 90, 210, ɛn 330 kin jɔyn wit sɔm piksɛl dɛn fɔ pad fɔ ikwal to di .span2, .span4, ɛn .span6kɔlɔm saiz dɛn.

Big

Lukin-grɔn uman

Smɔl

Fɔ kɔd dɛn

Midia grid dɛn izi fɔ yuz ɛn dɛn rili simpul na di mak sayd. Dɛn dimɛnshɔn dɛn jɔs de bay di sayz fɔ di pikchɔ dɛn we de insay.

  1. <ul klas = "midia-grid" > 
  2.   <li> fɔ di wan dɛn we de
  3.     <a href = "#" > we de na di wɔl 
  4.       <img klas = "thumbnail" src = "https://pleshold.it/330x230" alt = "" >   
  5.     </a> fɔ di wan dɛn we de
  6.   </li> fɔ di wan dɛn we de
  7.   <li> fɔ di wan dɛn we de
  8.     <a href = "#" > we de na di wɔl 
  9.       <img klas = "thumbnail" src = "https://pleshold.it/330x230" alt = "" >   
  10.     </a> fɔ di wan dɛn we de
  11.   </li> fɔ di wan dɛn we de
  12. </ul> fɔ di wan dɛn we de

Tebul Fɔ, yu gɛs am, tebul data

Fɔ bil tebul dɛn

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tebul dɛn fayn—fɔ bɔku tin dɛn. Gret tebul dɛn, bɔt, nid smɔl mak-ap lɔv fɔ bi yusful, skel, ɛn rid (na di kɔd lɛvɛl). Na sɔm tin dɛn ya we go ɛp yu.

Ɔltɛm rap yu kɔlɔm hεda dɛn insay wan <thead>so dat di hayarki go bi <thead>> <tr>> <th>.

Semweso lɛk di kɔlɔm ɛda dɛn, ɔl di tin dɛn we de insay yu tebul fɔ rap insay wan <tbody>so yu hayari na <tbody>> <tr>> <td>.

Example: Difɔlt tebul stayl dɛn

Ɔl di tebul dɛn go ɔtomɛtik stayl wit di impɔtant bɔda dɛn nɔmɔ fɔ mek shɔ se dɛn ebul fɔ rid ɛn mek dɛn kɔntinyu fɔ gɛt strɔkchɔ. Nɔ nid fɔ ad ɛkstra klas ɔ atribyut dɛn.

# Di wan dɛn we de Fɔs nem Las nem Langwej
1. Di wan dɛn we de Sɔm Wan Inglish
2. Di wan dɛn we de Joe bin de Sikspak fɔ di wan dɛn we de Inglish
3. Di wan dɛn we de Stud dɛn we de stɔdi Dent fɔ di wan dɛn we de Kɔd fɔ di Baybul 
  1. <tebul>
  2.   ...
  3. </tebul>

Fɔ ɛgzampul: Zɛbra-strip

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

# Di wan dɛn we de Fɔs nem Las nem Langwej
1. Di wan dɛn we de Sɔm Wan Inglish
2. Di wan dɛn we de Joe bin de Sikspak fɔ di wan dɛn we de Inglish
3. Di wan dɛn we de Stud dɛn we de stɔdi Dent fɔ di wan dɛn we de Kɔd fɔ di Baybul

Notis: Zebra-striping na wan prɔgrɛsiv ɛnhansmɛnt we nɔ de fɔ ol brawza dɛn lɛk IE8 ɛn dɔŋ ya.

  1. <tebul klas = "zibra-strip" > 
  2. ...
  3. </tebul>

Example: Zɛbra-strip w/ TableSorter.js

We wi tek di ɛgzampul we wi bin dɔn tɔk bɔt, wi de mek wi tebul dɛn yusful bay we wi de gi sɔt funkshɔnaliti tru jQuery ɛn di Tablesorter plɔgin. Klik ɛni kɔlɔm in hεda fɔ chenj di sɔt.

# Di wan dɛn we de Fɔs nem Las nem Langwej
2. Di wan dɛn we de Joe bin de Sikspak fɔ di wan dɛn we de Inglish
3. Di wan dɛn we de Stud dɛn we de stɔdi Dent fɔ di wan dɛn we de Kɔd fɔ di Baybul
1. Di wan dɛn we de Yu Wan Inglish 
  1. <skript src = "js/jkwɛri/jkwɛri.tebulsɔrta.min.js" ></skript> 
  2. <skript > 
  3.   $ ( fɛnshɔn () { . 
  4.     $ ( "tebul#sɔtTebulƐgzampul" ). tebulsɔrta ({ sɔrtList : [[ 1 , 0 ]] });  
  5.   });
  6. </skript>
  7. <tebul klas = "zibra-strip" > 
  8.   ...
  9. </tebul>

Fɔm dɛn

Difɔlt stayl dɛn

Dɛn gi ɔl di fɔm dɛn difɔlt stayl dɛn fɔ prisent dɛn di we we pɔsin kin rid ɛn we pɔsin kin skel. Dɛn dɔn gi stayl dɛn fɔ put di tɛks, di list dɛn we dɛn dɔn pik, di say dɛn we dɛn rayt tɛks, di redio bɔtin dɛn ɛn di chɛkbɔks dɛn, ɛn di bɔtin dɛn.

Ɛgzampul fɔm lɛjɛnd
Sɔm dɛn valyu ya
Smɔl smɔl pat pan ɛp tɛks
Ɛgzampul fɔm lɛjɛnd
@
Ɛgzampul fɔm lɛjɛnd
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ɔ.
to Ɔl di tɛm dɛn de sho as Pasifik Standart Taym (GMT -08:00).
Blɔk fɔ ɛp tɛks fɔ diskrayb di fil we de ɔp if nid de.
 

Fɔm dɛn we dɛn dɔn stak

Ad .form-stackedto yu fɔm in HTML ɛn yu go gɛt lɛbl dɛn ɔp dɛn fil dɛn instead fɔ de na dɛn lɛft. Dis kin wok fayn if yu fɔm dɛn shɔt ɔ yu gɛt tu kɔlɔm dɛn fɔ input fɔ fɔm dɛn we ebi.

Ɛgzampul fɔm lɛjɛnd
Ɛgzampul fɔm lɛjɛnd
Smɔl smɔl pat pan ɛp tɛks
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ɔ.
 

Fɔm fil saiz dɛn

Kastamayz ɛni fɔm input, select, ɔ textareawit bay we yu ad jɔs sɔm klas dɛn to yu mak.

As of v1.3.0, wi dɔn ad di grid-bɛs sayzin klas dɛn fɔ fɔm ɛlimɛnt dɛn. Duya yuz di dɛn wan ya oba di .mini, .small, etc klas dɛn we dɔn de.

Bɔtin dɛn

As kɔnvɛnshɔn, dɛn kin yuz bɔtin fɔ akshɔn dɛn we dɛn kin yuz link fɔ tin dɛn. Fɔ ɛgzampul, "Dɔnlod" kin bi bɔtin ɛn "aktiviti we dɛn jɔs du" kin bi link.

Ɔl di bɔtin dɛn de difɔlt to layt grey stayl, bɔt dɛn kin yuz bɔku klas dɛn we de wok fɔ difrɛn kɔlɔ stayl dɛn. Dɛn klas dɛn ya gɛt blu .primaryklas, layt-blu .infoklas, grɛn .successklas, ɛn rɛd .dangerklas.

Ɛgzampul bɔtin dɛn

Bɔtin stayl dɛn kin aplay to ɛnitin wit di .btnaplay. Tipikli yu go want fɔ yuz dɛn tin ya fɔ jɔs <a>, <button>, ɛn pik <input>ɛlimɛnt dɛn. Na so i luk:

       

Alternate saiz dɛn fɔ yuz

Fans big ɔ smɔl bɔtin dɛn? Yu fɔ gɛt am!

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ɔ de wok ɔ we di ap dɔn disable fɔ wan rizin ɔ ɔda rizin, yuz di stet we dɛn dɔn disable. Dat na .disabledfɔ link ɛn :disabledfɔ <button>ɛlimɛnt dɛn.

Links dɛn

Di men tin we dɛn fɔ du Du

Bɔtin dɛn

 

Alerts & Errors Stayl fɔ sakses, wɔnin, ɛn mistek mɛsej ɔ alɛt

Di bɛsis alɛt dɛn

.alert-message

Wan layn mɛsej fɔ sho di fayl, pɔsibul fɔlt, ɔ sakses fɔ wan akshɔn. I fayn mɔ fɔ di fɔm dɛn.

Get di javaskript »

×

Oli guacamole! Best check yo self, yu no luk tu gud.

×

Oh snap! Chenj dis ɛn dat ɛn tray bak.

×

Wɛl dɔn! Yu rid dis alɛt mɛsej fayn fayn wan.

×

Hed dɛn de ɔp! Dis na wan alɛt we nid yu atɛnshɔn, bɔt i nɔto big prɔyoritɛt jɔs naw.

Ɛgzampul kɔd

  1. <div klas = "alɛt-mɛsej wɔnin" > 
  2.   <a klas = "klos" href = "#" > × </a>  
  3.   <p><strong> Oli guacamole! </strong> Best check yo self, yu no de luk tu gud. </p>we de sho aw fɔ du dat
  4. </div> fɔ di wan dɛn we de

Blɔk mɛsej dɛn

.alert-message.block-message

Fɔ mɛsej dɛn we nid fɔ ɛksplen smɔl, wi gɛt paregraf stayl alɛt dɛn. Dɛn tin ya fayn fɔ bɔb fɔ lɔng mistek mɛsej dɛn, fɔ wɔn pɔsin we de yuz am fɔ du sɔntin we de wet fɔ du, ɔ jɔs fɔ prisent infɔmeshɔn fɔ mek dɛn ɛksplen mɔ bɔt di pej.

Get di javaskript »

×

Oli guacamole! Dis na wɔnin! Best check yo self, yu no luk tu gud. Nulla vitae elit libero, we na wan pharetra augu. Praesent commodo cursus magna, vel scelerisk nisl kɔnsɛkt ɛn.

Tek dis akshɔn Ɔ du dis
×

Oh snap! Yu get wan error! Chenj dis ɛn dat ɛn tray bak.

  • Duis mollis est we nɔ gɛt wan kɔmodo
  • Nisi erat pɔtitɔr ligula
  • Eget lacinia odio sem nec elit
Tek dis akshɔn Ɔ du dis
×

Wɛl dɔn! Yu rid dis alɛt mɛsej fayn fayn wan. Cum sociis natoque penatibus ɛn magnis dis we de bɔn pikin, nascetur ridiculus mus. Maecenas faucibus mollis we de na di wɔl.

Tek dis akshɔn Ɔ du dis
×

Hed dɛn de ɔp! Dis na wan alɛt we nid yu atɛnshɔn, bɔt i nɔto big prɔyoritɛt jɔs naw.

Tek dis akshɔn Ɔ du dis

Ɛgzampul kɔd

  1. <div klas = "alert-mɛsej blɔk-mɛsej wɔnin" > 
  2.   <a klas = "klos" href = "#" > × </a>  
  3.   <p><strong> Oli guacamole! Dis na wɔnin! </strong> Best check yo self, yu no de luk tu gud. Nulla vitae elit libero, we na wan pharetra augu. Praesent commodo cursus magna, vel scelerisk nisl kɔnsɛkt ɛn. </p>we de sho aw fɔ du dat
  4.   <div klas = "alɛt-akshɔn dɛn" > 
  5.     <a klas = "btn smɔl" href = "#" > Tek dis akshɔn </a> <a klas = "btn smɔl" href = "#" > Ɔ du dis </a>     
  6.   </div> fɔ di wan dɛn we de
  7. </div> fɔ di wan dɛn we de

Popovers Komponent fɔ sho kɔntinyu insay modals, tultips, ɛn popovers

Modal dɛn

Modal—daylɔg ɔ laytbɔks—na fayn fɔ kɔntɛkstual akshɔn dɛn na sityueshɔn dɛn usay i impɔtant fɔ mek dɛn kip di bakgrɔn kɔntɛks.

Get di javaskript »

×

Modal Hɛdin

Wan fayn fayn bɔdi...

Fɔs Sɛkɔndari

Tultip dɛn fɔ yuz

Twipsies na supa yusful fɔ ɛp wan kɔnfyus yuza ɛn pɔynt dɛn na di rayt dairekshɔn.

Get di javaskript »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo kwasi odit aut natus konsekkyuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam arkitekto eksplikabo sidon kwasi fugit fugit, totam doloremque unde sunt sed dicta quae akusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis kwasi quae.

Popovers dɛn

Yuz popovers fɔ gi sɔbtɛkstual infɔmeshɔn to wan pej we nɔ afɛkt layout.

Get di javaskript »

Popover Taytul fɔ di wan dɛn we de

Etiam porta sem malesuada magna mollis yusmod. Maecenas faucibus mollis we de na di wɔl. Morbi leo risus, porta ac konsektetur ac, vestibulum na eros.

Yuz javascript wit Bootstrap Wan indeks fɔ plɔgin dɛn fɔ mek yu bigin

Fɔ bigin fɔ wok

Integrating javascript wit di Bootstrap laybri na supa izi. Dɔŋ ya wi go ova di bɛsis tin dɛn ɛn gi yu sɔm fayn fayn plɔgin dɛn fɔ mek yu bigin!

Luk di javaskript dɔkyumɛnt dɛn »

Wetin de insay

Bring sɔm pan Bootstrap in praymari kɔmpɔnɛnt dɛn to layf wit nyu kɔstɔm plɔgin dɛn we de wok wit jQuery ɛn Ender . Wi de ɛnkɔrej yu fɔ ɛkstɛnd ɛn chenj dɛn fɔ fit yu patikyula divɛlɔpmɛnt nid dɛn.

Fayl Tɔk bɔt
bootstrap-modal.js fɔ di wan dɛn we de yuz am Wi Modal plɔgin na wan supa slim tek pan di tradishɔnal modal js plɔgin! Wi tek spɛshal kia fɔ inklud ɔl di bare funkshɔnaliti we wi nid na twita.
bootstrap-alɛt dɛn.js Di alɛt plɔgin na wan supa smɔl klas fɔ ad klos funkshɔnaliti to alɛt dɛn.
bootstrap-drɔpdɔwn.js Dis plɔgin na fɔ ad drɔpdɔwn intarakshɔn to di butstrap tɔpba ɔ tab nevigishɔn dɛn.
bootstrap-skrolspy.js fɔ di wan dɛn we de yuz am Di ScrollSpy plɔgin na fɔ ad wan ɔto ɔpdet nav bays pan skrol pozishɔn to di butstrap tɔpba.
di bootstrap-tab dɛn.js Dis plɔgin ad kwik, dinamik tab ɛn pil funkshɔnaliti fɔ sayklis tru lokal kɔntinyu.
bootstrap-twipsy.js fɔ di wan dɛn we de wok Bays pan di fayn fayn jQuery.tipsy plɔgin we Jason Frame rayt; twipsy na wan ɔpdet vɛshɔn, we nɔ de abop pan pikchɔ dɛn, i de yuz css3 fɔ animashɔn, ɛn data-atribyut fɔ lokal taytul stɔrɔj!
bootstrap-popover.js fɔ di wan dɛn we de wok Di popover plɔgin de gi yu wan simpul intafays fɔ ad popovers to yu aplikeshɔn. I de ɛkstɛnd di boostrap-twipsy.js plɔgin, so mek shɔ se yu grap da fayl de bak we yu de inklud popovers insay yu prɔjek!

Yu tink se javascript nid fɔ de?

Nɔ-o! Bootstrap na fɔs ɛn fɔs fɔ bi CSS laybri. Dis javascript de gi wan besik intaraktiv layt pan di stayl dɛn we de insay.

Bɔt fɔ di wan dɛn we nid javascript, wi dɔn gi yu di plɔgin dɛn we de ɔp fɔ ɛp yu fɔ ɔndastand aw fɔ intagret Bootstrap wit javascript ɛn fɔ gi yu wan kwik, layt opshɔn fɔ di bɛsis wok wantɛm wantɛm.

Fɔ no mɔ ɛn fɔ si sɔm layv dɛmos, duya luk na wi plɔgin dɔkyumentri pej .

Yuz Bootstrap wit Less Supercharge yu CSS wit variebul, mixin, ɛn fɛnshɔn dɛn

Dɛn bin bil Bootstrap wit Preboot , wan opin-sɔs pak fɔ miksin ɛn vɛriɔbul dɛn we dɛn go yuz togɛda wit Less , wan CSS prɛprosɛsɔ fɔ mek wɛb divɛlɔpmɛnt fast ɛn izi.

Chek aw wi yuz Preboot na Bootstrap ɛn aw yu kin mek yus to am if yu pik fɔ rɔn Less pan yu nɛks prɔjek.

Aw fɔ yuz am

Yuz dis opshɔn fɔ mek ful yus to Bootstrap in Less vɛriɔbul dɛn, miksin dɛn, ɛn nɛst insay CSS tru javaskript na yu brɔwza.

  1. <link rel = "staylshit/lɛs" href = "lɛs/bɔtstrap.lɛs" midia = "ɔl" />    
  2. <skript src = "js/lɛs-1.1.3.min.js" ></skript>

Yu nɔ de fil di .js sɔlvishɔn? Tray di Less Mac ap ɔ yuz Node.js fɔ kɔmpilayt we yu de diploy yu kɔd.

Wetin de insay

Na sɔm pan di aylayt dɛm fɔ wetin de insay Twitter Bootstrap as pat pan Bootstrap. Hed ova to di Bootstrap wɛbsayt ɔ Github projɛkt pej fɔ dawnlod ɛn lan mɔ.

Di tin dɛn we kin chenj

Variables in Less na perfekt fɔ mentenɛt ɛn ɔpdet yu CSS ed-ak fri. We yu want fɔ chenj wan kɔlɔ valyu ɔ wan valyu we yu kin yuz bɔku tɛm, ɔpdet am na wan ples ɛn yu dɔn sɛt.

  1. // Links dɛn
  2. @linkKɔlɔ : #8b59c2 ɛn di wan dɛn we de wok;         
  3. @linkKɔlɔHɔva :     dak ( @linkKɔlɔ , 10 ); 
  4.  
  5. // Greys dɛn
  6. @blak : #000 fɔ di wan dɛn;             
  7. @grayDark :           layt ( @blak , 25 %); 
  8. @grey :               layt ( @blak , 50 %); 
  9. @greyLight :          layt ( @blak , 70 %); 
  10. @greyLighter :        layt ( @blak , 90 %); 
  11. @wayt : #fff ɛn di wan dɛn we de;             
  12.  
  13. // Aksɛn Kɔlɔ dɛn
  14. @blu : #08b5fb na wan wan wan wan;              
  15. @grin : #46a546 fɔ di wan dɛn we de;             
  16. @rɛd : # 9d261d;               
  17. @yɔlɔ : #ffc40d;            
  18. @ɔrɛnj : #f89406;            
  19. @pink : #c3325f ɛn di wan dɛn we de;              
  20. @papul : #7a43b6;            
  21.  
  22. // Grid fɔ di beslayn
  23. @basefont : 13px fɔ di wan dɛn we de ;          
  24. @bayslayn : 18px ;

Fɔ kɔmɛnt

Less de gi ɔda stayl bak fɔ kɔmɛnt apat frɔm di nɔmal /* ... */sɛntaks we CSS gɛt.

  1. // Dis na kɔmɛnt
  2. /* Dis na kɔmɛnt bak */

Mixins up di wazoo

Mixins na besik inklud ɔ pat fɔ CSS, we de alaw yu fɔ jɔyn wan blɔk fɔ kɔd insay wan. Dɛn fayn fɔ vendor prɛfiks prɔpati dɛn lɛk box-shadow, krɔs-brawza grɛdiɛnt, font stak, ɛn mɔ. Dis dɔŋ ya na wan ɛgzampul fɔ di miksin dɛn we de insay wit Bootstrap.

Font stak dɛn

  1. #font na di font {
  2.   . shɔthand ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {     
  3.     font - sayz : @sayz ; 
  4.     font - weit : @weit ; 
  5.     layn - ayt : @laynAyt ; 
  6.   } .
  7.   . sans - serif ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {     
  8.     font - famili : "Hɛlvɛtika Nyu" , Ɛlvetika , Arial , sans - sɛrif ;   
  9.     font - sayz : @sayz ; 
  10.     font - weit : @weit ; 
  11.     layn - ayt : @laynAyt ; 
  12.   } .
  13.   ...
  14. } .

Grɛdiɛnt dɛn

  1. #grɛdiɛnt { .
  2.   ...
  3.   . vertikal ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333) { 
  4.     bakgrɔn - kɔlɔ : @ɛndKɔlɔ ; 
  5.     bakgrɔn - ripit : ripit - x ;
  6.     bakgrɔn - imej : - khtml - gradient ( linya , lɛft ɔp , lɛft dɔŋ , frɔm ( @startKɔlɔ ), to ( @ɛndKɔlɔ )); // Di pɔsin we de kɔndɔkt   
  7.     bakgrɔn - imej : -moz - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // FF 3.6+ fɔ di wan dɛn we de   
  8.     bakgrɔn - imej : -ms - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // IE10 fɔ di wan dɛn we de   
  9.     bakgrɔn - imej : - wɛbkit - grɛdiɛnt ( linya , lɛft ɔp , lɛft bɔt , kɔlɔ - stɔp ( 0 %, @startKɔlɔ ), kɔlɔ - stɔp ( 100 %, @ɛndKɔlɔ )); // Safari 4+, Krom 2+    
  10.     bakgrɔn - imej : -wɛbkit - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // Safari 5.1+, Krom 10+   
  11.     bakgrɔn - imej : -o - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // Ɔpa 11.10   
  12.     bakgrɔn - imej : linya - gradient ( @startKɔlɔ , @ɛndKɔlɔ ); // Di standad  
  13.   } .
  14.   ...
  15. } .

Di opareshɔn dɛn

Get fansi ɛn du sɔm mats fɔ jenarayz fleksibul ɛn pawaful miksin dɛn lɛk di wan we de dɔŋ ya.

  1. // Griditude fɔ di wan dɛn we de
  2. @gridKɔlɔm dɛn : 16 ;       
  3. @gridKɔlɔmWid : 40px ;   
  4. @gridGɔtaWid : 20px ;   
  5. @saytWid : ( @gridKɔlɔm dɛn * @gridKɔlɔmWid ) + ( @gridGɔtaWid * ( @gridKɔlɔm dɛn - 1 ));                 
  6.  
  7. // Mek sɔm kɔlɔm dɛn
  8. . kɔlɔm dɛn ( @kolomSpan : 1 ) {  
  9.   width : ( @gridKɔlɔmWid * @kɔlɔmSpan ) + ( @gridGɔtaWid * ( @kɔlɔmSpan - 1 ));         
  10. } .

We dɛn de kɔmpilayt Less

Afta yu dɔn chenj di .lessfayl dɛn na /lib/, yu go nid fɔ kɔmpilayt dɛn bak fɔ mek yu ebul fɔ rijenere di bootstrap-*.*.*.css ɛn bootstrap-*.*.*.min.css fayl dɛn. If yu de sɛn pul riŋwe to GitHub, yu fɔ de kɔmpilayt bak ɔltɛm.

We dɛn fɔ kɔmpilayt

We Step dɛn fɔ du
Node wit mekfayl

Instɔl di less kɔmand layn kɔmpayla wit npm bay we yu rɔn di kɔmand we de dɔŋ ya:

$ npm instɔl lessc

Wans yu don instɔl jɔs rɔn makefrɔm di rut fɔ yu bootstrap dairektrɔ ɛn yu ɔl dɔn sɛt.

Apat frɔm dat, if yu dɔn instɔl watchr , yu kin rɔn make watchfɔ mek dɛn bil bootstrap ɔtomɛtik wan ɛvri tɛm we yu ɛdit fayl na di bootstrap lib (dis nɔ nid, na jɔs wan kɔvinɛns we).
JavaSkript fɔ di Baybul

Daunlod di laytst Less.js ɛn put di rod fɔ go de (ɛn Bootstrap) insay di head.

  1. <link rel = "staylshit/lɛs" href = "/pat/to/butstrap.lɛs" >  
  2. <skript src = "/pat/to/lɛs.js" ></skript>

Fɔ kɔmpilayt di .less fayl dɛn bak, jɔs sev dɛn ɛn lod yu pej bak. Less.js de kɔmpilayt dɛn ɛn kip dɛn na lokal stɔrɔj.
Kɔmand layn

If yu dɔn ɔlrɛdi gɛt di less kɔmand layn tul we dɛn dɔn instɔl, jɔs rɔn di kɔmand we de dɔŋ ya:

$ lessc ./lib/butstrap.lɛs > bɔtstrap.css

Mek shɔ se yu put --compressinsay da kɔmand de if yu de tray fɔ sev sɔm bayt dɛn!
Less Mac ap fɔ yuz

Di ɔnofishal Mac ap de wach dairektrɔ dɛn fɔ .less fayl dɛn ɛn kɔmpilayt di kɔd to lokal fayl dɛn afta ɛvri sev we dɛn dɔn sev .less fayl we dɛn wach.

If yu want, yu kin chenj di tin dɛn we yu lɛk na di ap fɔ mek yu ebul fɔ smɔl smɔl ɛn us dairektrɔ di fayl dɛn we dɛn dɔn kɔmpilayt kin dɔn insay.