Bootstrap fɔ yuz

Skɔf we dɛn kin yuz fɔ mek skɔf

Bootstrap na bil pan 12-kɔlɔm grid dɛn we de ansa, layout dɛn, ɛn kɔmpɔnɛnt dɛn we de ansa.

Di wɔl sɛtin dɛn

I nid fɔ gɛt HTML5 dɔktayp

Bootstrap de mek yus to sɔm HTML ɛlimɛnt dɛn ɛn CSS prɔpati dɛn we nid fɔ yuz di HTML5 dɔktayp. Put am insay di biginin fɔ ɔl yu prɔjek dɛn.

  1. <!DƆKTAYP html>
  2. <html lang = "en" > 
  3.   ...
  4. </html> fɔ di wan dɛn we de

Taypografi ɛn link dɛn

Bootstrap de sɛt di bɛsis glob ɔl displei, taypografi, ɛn link stayl dɛn. Speshali, wi:

  • Rimov marginpan di bɔdi
  • Set background-color: white;pan dibody
  • Yuz di @baseFontFamily, @baseFontSize, ɛn @baseLineHeightatribyut dɛn as wi taypografik bays
  • Set di global link kala via @linkColorɛn aplay link ɔndalayn dɛn nɔmɔ pan:hover

Yu kin fɛn dɛn stayl ya insay skɔf.less .

Riset via Nɔmalayz

Wit Bootstrap 2, di ol riset blɔk dɔn drɔp in favɔrit fɔ Normalize.css , wan prɔjek we Nicolas Gallagher ɛn Jonathan Neal du we de gi pawa bak to di HTML5 Boilerplate . Pan ɔl we wi de yuz bɔku pan Normalize insay wi reset.less , wi dɔn pul sɔm ɛlimɛnt dɛn spɛshal fɔ Bootstrap.

Difɔlt grid sistem

Layf grid ɛgzampul

Di difɔlt Bootstrap grid sistem de yuz 12 kɔlɔm dɛn , we de mek fɔ wan 940px waid kɔntena we nɔ gɛt rispɔnsiv ficha dɛn we dɛn dɔn ɛnabul. Wit di rispɔnsiv CSS fayl we dɛn ad, di grid de adap fɔ bi 724px ɛn 1170px waid dipen pan yu viupɔt. Dɔŋ 767px viupɔt, di kɔlɔm dɛn kin bi fluid ɛn stak vertikal.

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
3. Di wan dɛn we de
4. Di wan dɛn we de
4. Di wan dɛn we de
5. Di wan dɛn we de
9. Di wan dɛn we de

Besik grid HTML

Fɔ simpul tu kɔlɔm layout, mek wan .rowɛn ad di rayt nɔmba fɔ di .span*kɔlɔm dɛn. As dis na 12 kɔlɔm grid, ɛni wan pan .span*dɛn span wan nɔmba pan dɛn 12 kɔlɔm dɛn de, ɛn dɛn fɔ ad 12 ɔltɛm fɔ ɛni row (ɔ di nɔmba fɔ di kɔlɔm dɛn na di mama ɔ papa).

  1. <div klas = "rɔw" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span8" > ... </div> 
  4. </div> fɔ di wan dɛn we de

Given dis ɛgzampul, wi gɛt .span4ɛn .span8, we de mek fɔ 12 totɛl kɔlɔm dɛn ɛn wan kɔmplit row.

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

Muv kɔlɔm dɛn to di rayt say yuz .offset*klas dɛn. Ɛni klas de mek di lɛft say na wan kɔlɔm go ɔp bay wan ol kɔlɔm. Fɔ ɛgzampul, .offset4i de muv .span4oba 4 kɔlɔm dɛn.

4. Di wan dɛn we de
3 ɔfset 2. Di wan dɛn we de wok
3 ɔfset 1. Di wan dɛn we de wok
3 ɔfset 2. Di wan dɛn we de wok
6 ɔfset 3. 
  1. <div klas = "rɔw" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span3 ɔfset2" > ... </div> 
  4. </div> fɔ di wan dɛn we de

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

Fɔ nest yu kɔntinyu wit di difɔlt grid, ad nyu .rowɛn sɛt fɔ .span*kɔlɔm dɛn insay wan .span*kɔlɔm we dɔn de. Di row dɛn we dɛn dɔn nɛst fɔ gɛt wan sɛt fɔ kɔlɔm dɛn we de ad to di nɔmba fɔ di kɔlɔm dɛn we in mama ɔ papa gɛt.

Level 1 kɔlɔm
Lɛvul 2
Lɛvul 2 
  1. <div klas = "rɔw" > 
  2.   <div klas = "span9" > 
  3.     Level 1 kɔlɔm
  4.     <div klas = "rɔw" > 
  5.       <div klas = "span6" > Lɛvɛl 2 </div> 
  6.       <div klas = "span3" > Lɛvɛl 2 </div> 
  7.     </div> fɔ di wan dɛn we de
  8.   </div> fɔ di wan dɛn we de
  9. </div> fɔ di wan dɛn we de

Sistem grid fluid

Layf fluid grid ɛgzampul

Di fluid grid sistem de yuz pasɛnt instead ɔf piksɛl fɔ kɔlɔm wit. I gɛt di sem rispɔnsiv kapabiliti dɛn lɛk wi fiks grid sistɛm, we de mek shɔ se dɛn gɛt di rayt prɔpɔshɔn fɔ di ki skrin rizɔlt ɛn divays dɛn.

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
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
8. Di wan dɛn we de
6. Di wan dɛn we de
6. Di wan dɛn we de
12 we de tɔk bɔt

Besik fluid grid HTML

Mek ɛni row "fluid" bay we yu chenj .rowto .row-fluid. Di kɔlɔm klas dɛn kin de di sem, we kin mek i izi fɔ flip bitwin fiks ɛn fluid grid dɛn.

  1. <div klas = "rɔw-fluid" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span8" > ... </div> 
  4. </div> fɔ di wan dɛn we de

Fluid we de ɔfset

I de wok di sem we lɛk di fiks grid sistɛm ɔfset: ad .offset*to ɛni kɔlɔm fɔ ɔfset bay da bɔku kɔlɔm de.

4. Di wan dɛn we de
4 ɔfset 4. Di wan dɛn we de wok
3 ɔfset 3. Di wan dɛn we de wok
3 ɔfset 3. Di wan dɛn we de wok
6 ɔfset 6. 
  1. <div klas = "rɔw-fluid" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span4 ɔfset2" > ... </div> 
  4. </div> fɔ di wan dɛn we de

Fluid we de mek dɛn nɛst

Fluid grid dɛn de yuz nɛst difrɛn we: ɛni nɛst lɛvɛl fɔ kɔlɔm dɛn fɔ ad te to 12 kɔlɔm dɛn. Dis na bikɔs di fluid grid de yuz pasɛnt, nɔto piksɛl, fɔ sɛt di wit.

Fluid we de insay 12
Fluid we de insay 6
Fluid we de insay 6
Fluid we de insay 6
Fluid we de insay 6 
  1. <div klas = "rɔw-fluid" > 
  2.   <div klas = "span12" > 
  3.     Fluid we de insay 12
  4.     <div klas = "rɔw-fluid" > 
  5.       <div klas = "span6" > 
  6.         Fluid we de insay 6
  7.         <div klas = "rɔw-fluid" > 
  8.           <div klas = "span6" > Fluid 6 </div> 
  9.           <div klas = "span6" > Fluid 6 </div> 
  10.         </div> fɔ di wan dɛn we de
  11.       </div> fɔ di wan dɛn we de
  12.       <div klas = "span6" > Fluid 6 </div> 
  13.     </div> fɔ di wan dɛn we de
  14.   </div> fɔ di wan dɛn we de
  15. </div> fɔ di wan dɛn we de

Di layout dɛn

Fiks layout we dɛn dɔn mek

Gi wan kɔmɔn fiks-wid (ɛn opshɔnal rispɔnsiv) layout wit ɔl <div class="container">we dɛn nid.

  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

Krio wan fluid, tu-kɔlɔm pej wit <div class="container-fluid">—great fɔ aplikeshɔn ɛn doks.

  1. <div klas = "kɔntena-fluid" > 
  2.   <div klas = "rɔw-fluid" > 
  3.     <div klas = "span2" > 
  4.       <!--Sidbar kɔntinyu-->
  5.     </div> fɔ di wan dɛn we de
  6.     <div klas = "span10" > 
  7.       <!--Bɔdi kɔntinyu-->
  8.     </div> fɔ di wan dɛn we de
  9.   </div> fɔ di wan dɛn we de
  10. </div> fɔ di wan dɛn we de

Dizayn we de ansa

Fɔ mek yu ebul fɔ yuz di ficha dɛn we de ansa

On responsive CSS in yu projɛkt bay we yu put di rayt mɛta tag ɛn ɔda staylshit insay di <head>ɔf yu dɔkyumɛnt. If yu dɔn kɔmpilayt Bootstrap frɔm di Customize pej, yu nid fɔ jɔs put di mɛta tag.

  1. <meta nem = "viupɔt" kɔntinyu = "wid=divays-wid, initial-skel=1.0" >  
  2. <link href = "asɛt/css/butstrap-rɛspɔnsiv.css" rel = "staylshit" >

Hed dɛn de ɔp!Bootstrap nɔ inklud rispɔnsiv ficha dɛn bay difɔlt dis tɛm as nɔto ɔltin nid fɔ rispɔnsiv. Bifo wi ɛnkɔrej di wan dɛn we de mek am fɔ pul dis ficha, wi kin tink se i bɛtɛ fɔ mek dɛn ebul fɔ yuz am as nid de.

Na bɔt di Bootstrap we de ansa

Divays dɛn we de ansa

Midia kwɛstyɔn dɛn kin alaw fɔ kɔstɔm CSS bay we dɛn de yuz bɔku kɔndishɔn dɛn—rɛsɛshɔn, wit, displei tayp, ɛn ɔda tin dɛn—bɔt bɔku tɛm i kin pe atɛnshɔn rawnd min-widthɛn max-width.

  • Modify di wit fɔ di kɔlɔm na wi grid
  • Stak ɛlimɛnt dɛn instead fɔ flot ɛnisay we nid de
  • Risayz di edlayn ɛn tɛks fɔ mek i go fayn fɔ divays dɛn

Yuz midia kwɛstyɔn dɛn wit rɛspɔnsibiliti ɛn jɔs as stat fɔ yu mobayl ɔdiɛns dɛn. Fɔ big prɔjek dɛn, du tink bɔt dediket kɔd bays ɛn nɔto layers fɔ midia kwɛstyɔn dɛn.

Divays dɛn we dɛn de sɔpɔt

Bootstrap de sɔpɔt wan anful midia kwɛstyɔn dɛn na wan fayl fɔ ɛp fɔ mek yu prɔjek dɛn fit mɔ pan difrɛn divays dɛn ɛn skrin rizɔlt dɛn. Na dis na di tin dɛn we de insay:

Kɔl Width fɔ layout Width fɔ di kɔlɔm Width fɔ di gɔta
Big big displei 1200px ɛn ɔp 70px na di pikchɔ 30px na di pikchɔ
Balans 980px ɛn ɔp 60px na di pikchɔ 20px we gɛt
Tablɛt dɛn we de sho pikchɔ dɛn 768px ɛn ɔp 42px na di pikchɔ 20px we gɛt
Fɔn dɛn to tablɛt dɛn 767px ɛn dɔŋ ya Fluid kɔlɔm dɛn, nɔ gɛt fiks wit
Fɔn dɛn 480px ɛn dɔŋ ya Fluid kɔlɔm dɛn, nɔ gɛt fiks wit 
  1. /* Big big dɛsktɔp */
  2. @media ( min - width : 1200px ) { ... } Wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan     
  3.  
  4. /* Portret tablɛt to land skay ɛn dɛsktɔp */
  5. @media ( min - width : 768px ) ɛn ( maks - wid : 979px ) { ... }        
  6.  
  7. /* Landskɛp fon fɔ pɔtrɛt tablɛt */
  8. @media ( maks - width : 767px ) { ... }.     
  9.  
  10. /* Landskɛp fon dɛn ɛn dɔŋ */
  11. @media ( maks - width : 480px ) { ... }.

Rispɔnsiv yutiliti klas dɛn

Fɔ mek yu ebul fɔ divɛlɔp di mobayl kwik kwik wan, yuz dɛn yutiliti klas ya fɔ sho ɛn ayd tin dɛn bay divays. Dis dɔŋ ya na wan tebul fɔ di klas dɛn we de ɛn dɛn ifɛkt pan wan givɛn midia kwɛstyɔn layout (we dɛn lɛbul bay divays). Yu kin fɛn dɛn na responsive.less.

Klas Fɔn dɛn767px ɛn dɔŋ ya Tablɛt dɛn979px to 768px Dɛsktɔp dɛnBalans
.visible-phone Wi kin si am
.visible-tablet Wi kin si am
.visible-desktop Wi kin si am
.hidden-phone Wi kin si am Wi kin si am
.hidden-tablet Wi kin si am Wi kin si am
.hidden-desktop Wi kin si am Wi kin si am

Ustɛm fɔ yuz am

Yuz am smɔl ɛn nɔ mek difrɛn difrɛn vɛshɔn dɛn fɔ di sem sayt. Bifo dat, yuz dɛn fɔ kɔmplit di prɛzɛntɛnshɔn we de na ɛni divays. Rispɔnsiv yutiliti dɛn nɔ fɔ yuz wit tebul dɛn, ɛn as a so dɛn nɔ de sɔpɔt dɛn.

Rispɔnsiv yutiliti tɛst kes

Risayz yu brɔwza ɔ lod am na difrɛn divays dɛn fɔ tɛst di klas dɛn we de ɔp.

Yu kin si am na...

Grin chɛkmak dɛn de sho se di klas de sho na di say we yu de si naw.

  • Fon✔ Fɔn
  • Tablɛt fɔ yuz✔ Tablɛt fɔ yuz
  • Dɛsktɔp✔ Dɛsktɔp

Dɛn ayd am na...

Na ya, grɛn chɛkmak dɛn de sho se klas de ayd na di say we yu de si naw.

  • Fon✔ Fɔn
  • Tablɛt fɔ yuz✔ Tablɛt fɔ yuz
  • Dɛsktɔp✔ Dɛsktɔp