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.
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è tab ak ti Desktop, ak gwo Desktop ekran.
- <div class = "ranje" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </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.
- <div class = "ranje" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Avèk sistèm kadriyaj estatik (ki pa likid) nan Bootstrap, nidifikasyon fasil. Pou fè nich kontni ou a, jis ajoute yon nouvo .row
ak seri .span*
kolòn nan yon .span*
kolòn ki deja egziste.
Ranje nich yo ta dwe gen ladan yon seri kolòn ki ajoute jiska kantite kolòn paran li yo. Pou egzanp, de .span3
kolòn enbrike yo ta dwe mete nan yon .span6
.
- <div class = "ranje" >
- <div class = "span12" >
- Nivo 1 nan kolòn
- <div class = "ranje" >
- <div class = "span6" > Nivo 2 </div>
- <div class = "span6" > Nivo 2 </div>
- </div>
- </div>
- </div>
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.
Fè nenpòt likid ranje tou senpleman pa chanje .row
nan .row-fluid
. Kolòn yo rete menm jan an, sa ki fè li trè senp pou baskile ant layouts fiks ak likid.
- <div class = "ranje-likid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
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.
- <div class = "ranje-likid" >
- <div class = "span12" >
- Nivo 1 nan kolòn
- <div class = "ranje-likid" >
- <div class = "span6" > Nivo 2 </div>
- <div class = "span6" > Nivo 2 </div>
- </div>
- </div>
- </div>
Varyab | Valè default | Deskripsyon |
---|---|---|
@gridColumns |
12 | Kantite kolòn |
@gridColumnWidth |
60px | Lajè chak kolòn |
@gridGutterWidth |
20px | Espas negatif ant kolòn yo |
@siteWidth |
Sòm kalkile tout kolòn ak goutyè yo | Konte kantite kolòn ak goutyè pou mete lajè .container-fixed() mixin la |
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.
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.
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.
Defo ak senp 940px lajè, Layout santre pou prèske nenpòt sitwèb oswa paj bay yon sèl <div class="container">
.
- <kò>
- <div class = "kontenè" >
- ...
- </div>
- </kò>
<div class="container-fluid">
bay estrikti paj fleksib, min- ak max-lajè, ak yon bò gòch. Li bon pou aplikasyon ak dokiman.
- <div class = "kontenè-likid" >
- <div class = "ranje-likid" >
- <div class = "span2" >
- <!--Sidebar content-->
- </div>
- <div class = "span10" >
- <!--Konteni kò-->
- </div>
- </div>
- </div>
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 | |
Tablèt pòtrè | 480px pou 768px | Kolòn likid, pa gen lajè fiks | |
Tablèt Landscape | 768px pou 979px | 42px | 20px |
Default | 980px ak plis | 60px | 20px |
Gwo ekspozisyon | 1210px ak plis | 70px | 30px |
Pou asire aparèy yo montre paj reponn byen, mete tag meta viewport la.
- <meta name = "viewport" content = "width = aparèy-lajè, inisyal-echèl = 1.0" >
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-width
ak max-width
.
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:
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.
- // Landscape telefòn ak desann
- @medya ( max - lajè : 480px ) { ... }
- // Landscape telefòn nan tablèt pòtrè
- @medya ( max - lajè : 768px ) { ... }
- // Portre tablèt nan jaden flè ak Desktop
- @medya ( min - lajè : 768 px ) ak ( max - lajè : 980 px ) { ... }
- // Gwo Desktop
- @medya ( min - lajè : 1200px ) { .. }