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.
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.
Fɔ mek yu bigin kwik ɛn izi, jɔs kɔpi dis smɔl pat na yu wɛb pej.
Wan fan fɔ yuz Less? No prɔblɛm, jɔs klon di repo ɛn ad dɛn layn ya:
Daunlod, fɔk, pul, fayl ishu dɛn, ɛn mɔ wit di ɔfishal Bootstrap repo na Github.
Insay di fɔs tɛm we dɛn bin de yuz twita, injinia dɛn bin de yuz ɔlmost ɛni laybri we dɛn sabi fɔ mit di tin dɛn we dɛn nid fɔ du na di frɔnt ɛnd. Bootstrap bigin as ansa to di chalenj dɛm we prɛzɛnt ɛn divɛlɔpmɛnt kwik kwik wan aksɛleret di tɛm we twita in fɔs Hackweek.
Wit di ɛp ɛn fidbak we bɔku injinia dɛn na twita dɔn gi, Bootstrap dɔn gro bad bad wan fɔ kɔba nɔto jɔs di bɛsik stayl dɛn, bɔt mɔ elegant ɛn durable frɔnt-ɛnd dizayn patɛn dɛn.
Rid mɔ na dev.twitter.com ›
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.
Bootstrap kam kɔmplit wit kɔmpilayt CSS, nɔ kɔmpilayt, ɛn ɛgzampul tɛmplat dɛn.
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.
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.
- <div klas = "rɔw" >
- <div klas = "span6 kɔlɔm dɛn" >
- ...
- </div> fɔ di wan dɛn we de
- <div klas = "span10 kɔlɔm dɛn" >
- ...
- </div> fɔ di wan dɛn we de
- </div> fɔ di wan dɛn we de
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>
.
- <bɔdi>
- <div klas = "kɔntena" >
- ...
- </div> fɔ di wan dɛn we de
- </bɔdi>
Wan ɔda, fleksibul fluid pej strɔkchɔ wit min- ɛn maks-wid ɛn wan lɛft-an saydbar. Gret fɔ ap ɛn doks.
- <bɔdi>
- <div klas = "kɔntena-fluid" >
- <div klas = "saydbar" >
- ...
- </div> fɔ di wan dɛn we de
- <div klas = "kɔntinɛnt" >
- ...
- </div> fɔ di wan dɛn we de
- </div> fɔ di wan dɛn we de
- </bɔdi>
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ɔ.
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.
Yuz ɛmpɛshimɛnt, adrɛs, & abbrevieshɔn
<strong>
<em>
<address>
<abbr>
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.
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.
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 so i luk:
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.
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.
<blockquote>
<p>
<small>
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 —
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
<ul>
<ul.unstyled>
<ol>
dl
<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>
.
Ɔ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 |
- <tebul>
- ...
- </tebul>
Gɛt smɔl fansi wit yu tebul dɛn bay we yu ad zibra-strip—jɔs ad di .zebra-striped
klas.
# 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.
- <tebul klas = "zibra-strip" >
- ...
- </tebul>
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 |
---|---|---|---|
1. Di wan dɛn we de | Yu | 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 |
- <skript src = "js/jkwɛri/jkwɛri.tebulsɔrta.min.js" ></skript>
- <skript >
- $ ( fɛnshɔn () { .
- $ ( "tebul#sɔtTebulƐgzampul" ). tebulsɔrta ({ sɔrtList : [[ 1 , 0 ]] });
- });
- </skript>
- <tebul klas = "zibra-strip" >
- ...
- </tebul>
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.
Ad .form-stacked
to 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.
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 .primary
klas, layt-blu .info
klas, grɛn .success
klas, ɛn rɛd .danger
klas. Plus, rol yu own stail dem na easy peasy.
Bɔtin stayl dɛn kin aplay to ɛnitin wit di .btn
aplay. 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:
Fans big ɔ smɔl bɔtin dɛn? Yu fɔ gɛt am!
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 .disabled
fɔ link ɛn :disabled
fɔ <button>
ɛlimɛnt dɛn.
div.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.
div.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.
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.
Wan fayn fayn bɔdi...
Twipsies na supa yusful fɔ ɛp wan kɔnfyus yuza ɛn pɔynt dɛn na di rayt dairekshɔn.
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.
Yuz popovers fɔ gi sɔbtɛkstual infɔmeshɔn to wan pej we nɔ afɛkt layout.
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.
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.
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.
- <link rel = "staylshit/lɛs" href = "lɛs/bɔtstrap.lɛs" midia = "ɔl" />
- <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.
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ɔ.
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.
- // Links dɛn
- @linkKɔlɔ : #8b59c2 ɛn di wan dɛn we de wok;
- @linkKɔlɔHɔva : dak ( @linkKɔlɔ , 10 );
- // Greys dɛn
- @blak : #000 fɔ di wan dɛn;
- @grayDark : layt ( @blak , 25 %);
- @grey : layt ( @blak , 50 %);
- @greyLight : layt ( @blak , 70 %);
- @greyLighter : layt ( @blak , 90 %);
- @wayt : #fff ɛn di wan dɛn we de;
- // Aksɛn Kɔlɔ dɛn
- @blu : #08b5fb na wan wan wan wan;
- @grin : #46a546 fɔ di wan dɛn we de;
- @rɛd : # 9d261d;
- @yɔlɔ : #ffc40d;
- @ɔrɛnj : #f89406;
- @pink : #c3325f ɛn di wan dɛn we de;
- @papul : #7a43b6;
- // Grid fɔ di beslayn
- @basefont : 13px fɔ di wan dɛn we de ;
- @bayslayn : 18px ;
Less de gi ɔda stayl bak fɔ kɔmɛnt apat frɔm di nɔmal /* ... */
sɛntaks we CSS gɛt.
- // Dis na kɔmɛnt
- /* Dis na kɔmɛnt bak */
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 na di font {
- . shɔthand ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {
- font - sayz : @sayz ;
- font - weit : @weit ;
- layn - ayt : @laynAyt ;
- } .
- . sans - serif ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {
- font - famili : "Hɛlvɛtika Nyu" , Ɛlvetika , Arial , sans - sɛrif ;
- font - sayz : @sayz ;
- font - weit : @weit ;
- layn - ayt : @laynAyt ;
- } .
- . serif ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {
- font - famili : "Jɔjia" , Tayms Nyu Roman , Tayms , sans - serif ;
- font - sayz : @sayz ;
- font - weit : @weit ;
- layn - ayt : @laynAyt ;
- } .
- . monospace ( @weit : nɔmal , @sayz : 12px , @laynAyt : 20px ) {
- font - famili : "Monako" , Kɔriɔ Nyu , wan spɛs ;
- font - sayz : @sayz ;
- font - weit : @weit ;
- layn - ayt : @laynAyt ;
- } .
- } .
- #grɛdiɛnt { .
- . horizontal ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333) {
- bakgrɔn - kɔlɔ : @ɛndKɔlɔ ;
- bakgrɔn - ripit : ripit - x ;
- bakgrɔn - imej : - khtml - gradient ( linya , lɛft ɔp , rayt ɔp , frɔm ( @startKɔlɔ ), to ( @ɛndKɔlɔ )); // Di pɔsin we de kɔndɔkt
- bakgrɔn - imej : -moz - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // FF 3.6+ fɔ di wan dɛn we de
- bakgrɔn - imej : -ms - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // IE10 fɔ di wan dɛn we de
- bakgrɔn - imej : - wɛbkit - grɛdiɛnt ( linya , lɛft ɔp , rayt ɔp , kɔlɔ - stɔp ( 0 %, @startKɔlɔ ), kɔlɔ - stɔp ( 100 %, @ɛndKɔlɔ )); // Safari 4+, Krom 2+
- bakgrɔn - imej : -wɛbkit - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // Safari 5.1+, Krom 10+
- bakgrɔn - imej : -o - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // Ɔpa 11.10
- bakgrɔn - imej : linya - gradient ( lɛft , @startKɔlɔ , @ɛndKɔlɔ ); // Le standad
- } .
- . vertikal ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333) {
- bakgrɔn - kɔlɔ : @ɛndKɔlɔ ;
- bakgrɔn - ripit : ripit - x ;
- 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
- bakgrɔn - imej : -moz - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // FF 3.6+ fɔ di wan dɛn we de
- bakgrɔn - imej : -ms - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // IE10 fɔ di wan dɛn we de
- 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+
- bakgrɔn - imej : -wɛbkit - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // Safari 5.1+, Krom 10+
- bakgrɔn - imej : -o - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // Ɔpa 11.10
- bakgrɔn - imej : linya - gradient ( @startKɔlɔ , @ɛndKɔlɔ ); // Di standad
- } .
- . dairekshɔn ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333, @deg: 45deg) {
- ...
- } .
- . vertikal - tri - kɔlɔ dɛn ( @startKɔlɔ : #00b3ee, @midKɔlɔ: #7a43b6, @kɔlɔStɔp: 50%, @ɛndKɔlɔ: #c3325f) {
- ...
- } .
- } .
Get fansi ɛn du sɔm mats fɔ jenarayz fleksibul ɛn pawaful miksin dɛn lɛk di wan we de dɔŋ ya.
- // Griditude fɔ di wan dɛn we de
- @gridKɔlɔm dɛn : 16 ;
- @gridKɔlɔmWid : 40px ;
- @gridGɔtaWid : 20px ;
- @saytWid : ( @gridKɔlɔm dɛn * @gridKɔlɔmWid ) + ( @gridGɔtaWid * ( @gridKɔlɔm dɛn - 1 ));
- // Sistem fɔ Grid
- . kɔntena { .
- wit : @saytWidth ;
- margin : 0 ɔto ;
- . kliafiks ();
- } .
- . kɔlɔm dɛn ( @kolomSpan : 1 ) {
- width : ( @gridKɔlɔmWid * @kɔlɔmSpan ) + ( @gridGɔtaWid * ( @kɔlɔmSpan - 1 ));
- } .
- . ofset ( @kolomOfset : 1 ) {
- margin - left : ( @gridKɔlɔmWid * @kɔlɔmƆfset ) + ( @gridGɔtaWid * ( @kɔlɔmƆfset - 1 )) + @ɛkstraSpɛs ;
- } .