Bootstrap

Echafodaj

Bootstrap bati sou yon griy 12 kolòn ki reponn. Nou te enkli tou layout fiks ak lajè likid ki baze sou sistèm sa a.

Styles mondyal pou reset CSS, tipografi, ak lyen

Egzije HTML5 doctype

Bootstrap sèvi ak eleman HTML ak pwopriyete CSS ki mande pou sèvi ak HTML5 doctype. Asire w ou mete li nan kòmansman chak paj Bootstrapped nan pwojè ou.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tipografi ak lyen

Nan dosye a scaffolding.less , nou mete debaz mondyal ekspozisyon, tipografi, ak estil lyen. Espesyalman, nou:

  • Retire maj sou kò a
  • Mete background-color: white;sou labody
  • Sèvi ak @baseFontFamily, @baseFontSize, ak @baseLineHeightatribi yo kòm baz tipografik nou an
  • Mete koulè lyen mondyal la atravè @linkColorepi aplike souliye lyen sèlman sou:hover

Reyajiste atravè Nòmalize

Apati Bootstrap 2, reset CSS tradisyonèl la te evolye pou sèvi ak eleman ki soti nan Normalize.css , yon pwojè Nicolas Gallagher ki bay pouvwa HTML5 Boilerplate tou .

Nouvo reset la ka toujou jwenn nan reset.less , men ak anpil eleman retire pou konsizyon ak presizyon.

Default sistèm kadriyaj 12 kolòn ak yon tòde reponn

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Sistèm kadriyaj default yo bay kòm yon pati nan Bootstrap se yon kadriyaj 940px-lajè ak 12 kolòn .

Li tou gen kat varyasyon reponn pou divès aparèy ak rezolisyon: telefòn, pòtrè tablèt, jaden flè tablèt ak ti Desktop, ak gwo Desktop ekran.

  1. <div class = "ranje" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Jan yo montre la a, yo ka kreye yon Layout debaz ak de "kolòn", yo chak kouvri yon kantite 12 kolòn fondamantal nou defini kòm yon pati nan sistèm kadriyaj nou an.


Kolòn konpanse

4
4 konpanse 4
3 konpanse 3
3 konpanse 3
8 konpanse 4 
  1. <div class = "ranje" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Kolòn nidifikasyon

Avèk sistèm kadriyaj estatik (ki pa likid) nan Bootstrap, nidifikasyon fasil. Pou fè nich kontni ou a, jis ajoute yon nouvo .rowak seri .span*kolòn nan yon .span*kolòn ki deja egziste.

Egzanp

Ranje nich yo ta dwe gen ladan yon seri kolòn ki ajoute jiska kantite kolòn paran li yo. Pou egzanp, de .span3kolòn enbrike yo ta dwe mete nan yon .span6.

Nivo 1 nan kolòn
Nivo 2
Nivo 2 
  1. <div class = "ranje" > 
  2.   <div class = "span12" > 
  3.     Nivo 1 nan kolòn
  4.     <div class = "ranje" > 
  5.       <div class = "span6" > Nivo 2 </div> 
  6.       <div class = "span6" > Nivo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistèm kadriyaj likid 12 kolòn ki reponn, ki baze sou pousan

Kolòn likid

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Pousantaj, pa piksèl

Sistèm kadriyaj likid la itilize pousantaj pou lajè kolòn olye pou yo piksèl fiks yo. Li tou gen menm varyasyon yo reponn ak sistèm kadriyaj fiks nou an, asire pwopòsyon apwopriye pou rezolisyon ekran kle ak aparèy.

Ranje likid

Fè nenpòt likid ranje tou senpleman pa chanje .rownan .row-fluid. Kolòn yo rete menm jan an, sa ki fè li trè senp pou baskile ant layouts fiks ak likid.

Marke

  1. <div class = "ranje-likid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Nidifikasyon likid

Nidifikasyon ak kadriyaj likid se yon ti jan diferan: kantite kolòn enbrike pa bezwen matche ak paran an. Olye de sa, kolòn ou yo reset nan chak nivo paske chak ranje pran 100% kolòn paran an.

likid 12
likid 6
likid 6 
  1. <div class = "ranje-likid" > 
  2.   <div class = "span12" > 
  3.     Nivo 1 nan kolòn
  4.     <div class = "ranje-likid" > 
  5.       <div class = "span6" > Nivo 2 </div> 
  6.       <div class = "span6" > Nivo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Griy personnalisation

Varyab Valè default Deskripsyon
@gridColumns 12 Kantite kolòn
@gridColumnWidth 60px Lajè chak kolòn
@gridGutterWidth 20px Espas negatif ant kolòn yo

Varyab nan MWEN

Bati nan Bootstrap gen yon ti ponyen nan varyab pou pèrsonalize sistèm nan kadriyaj default 940px, dokimante pi wo a. Tout varyab pou kadriyaj la estoke nan variables.less.

Ki jan yo Customize

Modifye kadriyaj la vle di chanje twa @grid*varyab yo ak rekonpile Bootstrap. Chanje varyab kadriyaj yo nan variables.less epi sèvi ak youn nan kat fason yo dokimante pou rekonpile . Si w ap ajoute plis kolòn, asire w ou ajoute CSS la pou moun ki nan grid.less.

Rete reponn

Pèsonalizasyon kadriyaj la ap travay sèlman nan nivo default, kadriyaj 940px la. Pou kenbe aspè yo reponn nan Bootstrap, ou pral gen tou Customize gri yo nan responsive.less.

Layouts Modèl debaz yo kreye paj wèb

Layout fiks

Defo ak senp 940px lajè, Layout santre pou prèske nenpòt sitwèb oswa paj ki ofri pa yon sèl <div class="container">.

  1. <kò>
  2.   <div class = "kontenè" > 
  3.     ...
  4.   </div>
  5. </kò>

Layout likid

<div class="container-fluid">bay estrikti paj fleksib, min- ak max-lajè, ak yon bò gòch. Li bon pou aplikasyon ak dokiman.

  1. <div class = "kontenè-likid" > 
  2.   <div class = "ranje-likid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Konteni kò-->
  8.     </div>
  9.   </div>
  10. </div>

Konsepsyon ki reponn medya demann pou divès aparèy ak rezolisyon

Aparèy ki reponn

Sa yo fè

Rekèt medya pèmèt pou CSS koutim ki baze sou yon kantite kondisyon - rapò, lajè, kalite ekspozisyon, elatriye - men anjeneral konsantre alantou min-widthak max-width.

  • Modifye lajè kolòn nan kadriyaj nou an
  • Pile eleman olye pou yo flote nenpòt kote sa nesesè
  • Redimansyone tit ak tèks pou yo ka pi apwopriye pou aparèy yo

Sèvi ak demann medya yon fason responsab epi sèlman kòm yon kòmansman pou odyans mobil ou yo. Pou pi gwo pwojè, konsidere baz kòd dedye epi yo pa kouch medya demann.

Aparèy sipòte

Bootstrap sipòte yon ti ponyen demann medya nan yon sèl dosye pou ede fè pwojè ou yo pi apwopriye sou diferan aparèy ak rezolisyon ekran. Men sa ki enkli:

Mete etikèt sou Lajè Layout Lajè kolòn Lajè goutyè
Smartphones 480px ak anba a Kolòn likid, pa gen lajè fiks
Smartphones pou tablèt 767px ak anba a Kolòn likid, pa gen lajè fiks
Tablèt pòtrè 768px ak pi wo 42px 20px
Default 980px ak plis 60px 20px
Gwo ekspozisyon 1200px ak plis 70px 30px

Egzije meta tag

Pou asire aparèy yo montre paj reponn byen, mete tag meta viewport la.

  1. <meta name = "viewport" content = "width = aparèy-lajè, inisyal-echèl = 1.0" >

Sèvi ak demann medya yo

Bootstrap pa otomatikman enkli demann medya sa yo, men konprann epi ajoute yo trè fasil epi li mande yon konfigirasyon minim. Ou gen kèk opsyon pou enkli karakteristik yo ki reponn nan Bootstrap:

  1. Sèvi ak vèsyon konpile reponn, bootstrap-responsive.css
  2. Ajoute @import "responsive.less" epi rekonpile Bootstrap
  3. Modifye ak rekonpile responsive.less kòm yon dosye separe

Poukisa pa jis enkli li? Se vre wi, se pa tout bagay ki bezwen reponn. Olye pou yo ankouraje devlopè yo retire karakteristik sa a, nou kalkile li pi bon pou pèmèt li.

  1.   // Landscape telefòn ak desann
  2.   @medya ( max - lajè : 480px ) { ... }     
  3.  
  4.   // Landscape telefòn nan tablèt pòtrè
  5.   @medya ( max - lajè : 767px ) { ... }     
  6.  
  7.   // Portre tablèt nan jaden flè ak Desktop
  8.   @medya ( min - lajè : 768 px ) ak ( max - lajè : 979 px ) { ... }        
  9.  
  10.   // Gwo Desktop
  11.   @medya ( min - lajè : 1200px ) { ... }

Klas sèvis piblik ki reponn

Kisa yo ye

Pou yon devlopman ki pi rapid zanmitay mobil, sèvi ak klas sèvis piblik debaz sa yo pou montre ak kache kontni pa aparèy.

Lè pou itilize

Itilize sou yon baz limite epi evite kreye vèsyon totalman diferan nan menm sit la. Olye de sa, sèvi ak yo pou konplete prezantasyon chak aparèy.

Pou egzanp, ou ta ka montre yon <select>eleman pou nav sou layout mobil, men se pa sou tablèt oswa Desktop.

Sipò klas yo

Yo montre la a se yon tablo klas nou sipòte yo ak efè yo sou yon fòm demann medya yo bay (ki make pa aparèy). Yo ka jwenn nan responsive.less.

Klas Telefòn480px ak anba a Tablèt767px ak anba a Bureaux768px ak pi wo
.visible-phone Vizib
.visible-tablet Vizib
.visible-desktop Vizib
.hidden-phone Vizib Vizib
.hidden-tablet Vizib Vizib
.hidden-desktop Vizib Vizib

Ka tès la

Redimansyone navigatè w la oswa chaje sou diferan aparèy pou teste klas ki anwo yo.

Vizib sou...

Mark vèt yo endike ke klas la vizib nan fenèt ou ye kounye a.

  • Telefòn✔ Telefòn
  • Tablèt✔ tablèt
  • Desktop✔ Desktop

Kache sou...

Isit la, mak vèt yo endike ke klas la kache nan fenèt ou ye kounye a.

  • Telefòn✔ Telefòn
  • Tablèt✔ tablèt
  • Desktop✔ Desktop