Bootstrap yubatswe kumurongo wa 12 winkingi. Twashizemo kandi imiterere- na fluid-ubugari imiterere ishingiye kuri sisitemu.
Sisitemu isanzwe ya grid yatanzwe nkigice cya Bootstrap ni 940px-ubugari, 12-inkingi .
Ifite kandi uburyo bune bwitondewe bwibikoresho bitandukanye nibyemezo: terefone, ibishushanyo mbonera bya tablet, imiterere yimeza hamwe na desktop ntoya, hamwe na desktop nini yagutse.
- <div class = "umurongo" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Nkuko bigaragara hano, imiterere shingiro irashobora gushirwaho hamwe n "" inkingi "ebyiri, buri kimwekimwe cyose cyumubare winkingi 12 zifatizo twasobanuye nkigice cya sisitemu ya gride.
- <div class = "umurongo" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Hamwe na sisitemu ya static (idafite amazi) muri sisitemu ya Bootstrap, guterana biroroshye. Kugirango ushire ibikubiyemo, gusa ongeraho ibishya .row
kandi ushireho .span*
inkingi murwego ruriho .span*
.
Imirongo yatoranijwe igomba gushiramo urutonde rwinkingi ziyongera kumubare winkingi zababyeyi. Kurugero, .span3
inkingi ebyiri zegeranye zigomba gushyirwa muri a .span6
.
- <div class = "umurongo" >
- <div class = "span12" >
- Urwego 1 rwinkingi
- <div class = "umurongo" >
- <div class = "span6" > Urwego 2 </div>
- <div class = "span6" > Urwego 2 </div>
- </div>
- </div>
- </div>
Sisitemu ya grid sisitemu ikoresha ijanisha ryubugari bwinkingi aho kuba pigiseli ihamye. Ifite kandi ibisubizo bitandukanye nkibisubizo bya gride sisitemu ihamye, byemeza neza ibipimo byingenzi bya ecran n'ibikoresho.
Kora umurongo uwo ariwo wose utemba uhinduye .row
kuri .row-fluid
. Inkingi zigumaho neza, bigatuma zoroha cyane guhindagurika hagati yimiterere ihamye kandi itemba.
- <div class = "umurongo-utemba" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Gutera hamwe na gride ya fluid iratandukanye gato: umubare winkingi zometse ntukeneye guhuza nababyeyi. Ahubwo, inkingi zawe zisubirwamo kuri buri rwego kuko buri murongo ufata 100% yinkingi yababyeyi.
- <div class = "umurongo-utemba" >
- <div class = "span12" >
- Urwego 1 rwinkingi
- <div class = "umurongo-utemba" >
- <div class = "span6" > Urwego 2 </div>
- <div class = "span6" > Urwego 2 </div>
- </div>
- </div>
- </div>
Birahinduka | Agaciro gasanzwe | Ibisobanuro |
---|---|---|
@gridColumns |
12 | Umubare winkingi |
@gridColumnWidth |
60px | Ubugari bwa buri nkingi |
@gridGutterWidth |
20px | Umwanya mubi hagati yinkingi |
@siteWidth |
Kubara igiteranyo cyinkingi zose | Kubara umubare winkingi nigituba kugirango ushireho ubugari bwa .container-fixed() mixin |
Yubatswe muri Bootstrap nintoki zimpinduka zo guhitamo sisitemu ya gride ya 940px isanzwe, yanditse hejuru. Ibihinduka byose kuri gride bibitswe mubihinduka.less.
Guhindura gride bisobanura guhindura ibintu bitatu @grid*
bihinduka no gusubiramo Bootstrap. Hindura grid ihindagurika mubihinduka.nta kandi ukoreshe bumwe muburyo bune bwanditse kugirango usubiremo . Niba wongeyeho inkingi nyinshi, menya neza ko wongera CSS kubari muri grid.less.
Guhindura gride ikora gusa kurwego rusanzwe, gride ya 940px. Kugirango ugumane ibintu bisubiza muri Bootstrap, ugomba kandi guhitamo gride mubisubizo.less.
Mburabuzi kandi yoroshye 940px-ubugari, imiterere igizwe nurubuga rwose cyangwa page yatanzwe numwe <div class="container">
.
- <body>
- <div class = "kontineri" >
- ...
- </div>
- </body>
<div class="container-fluid">
itanga urupapuro rworoshye, min- na max-ubugari, hamwe nibumoso. Nibyiza kuri porogaramu na doc.
- <div class = "kontineri-fluid" >
- <div class = "umurongo-utemba" >
- <div class = "span2" >
- <! - Ibirimo kuruhande ->
- </div>
- <div class = "span10" >
- <! - Ibiri mu mubiri ->
- </div>
- </div>
- </div>
Bootstrap ishyigikira urutonde rwibibazo byitangazamakuru muri dosiye imwe kugirango ifashe gukora imishinga yawe neza kubikoresho bitandukanye no gukemura ibyemezo. Dore ibirimo:
Ikirango | Ubugari bw'imiterere | Ubugari bw'inkingi | Ubugari |
---|---|---|---|
Amaterefone | 480px no hepfo | Inkingi zamazi, nta bugari bwagenwe | |
Ibishushanyo mbonera | 480px kugeza kuri 768px | Inkingi zamazi, nta bugari bwagenwe | |
Ibibaho | 768px kugeza kuri 979px | 42px | 20px |
Mburabuzi | 980px no hejuru | 60px | 20px |
Kugaragaza binini | 1210px no hejuru | 70px | 30px |
Kugirango ibikoresho byerekana impapuro zishubije neza, shyiramo icyerekezo cya meta tag.
- <meta izina = "kureba" ibirimo = "ubugari = igikoresho-ubugari, intangiriro-igipimo = 1.0" >
Ibibazo byibitangazamakuru byemerera CSS yihariye ishingiye kubintu byinshi - ibipimo, ubugari, ubwoko bwerekana, nibindi - ariko mubisanzwe byibanda hafi min-width
na max-width
.
Bootstrap ntabwo ihita ikubiyemo ibyo bibazo byitangazamakuru, ariko kubyumva no kubyongera biroroshye cyane kandi bisaba gushiraho bike. Ufite amahitamo make yo gushiramo ibiranga ibisubizo bya Bootstrap:
Ubona gute ushizemo gusa? Ukuri kuvugwe, ntabwo ibintu byose bigomba kwitabwaho. Aho gushishikariza abitezimbere gukuraho iyi miterere, dusanga ari byiza kuyishoboza.
- // Amaterefone yimiterere no hepfo
- @media ( max - ubugari : 480px ) { ... }
- // Terefone nyaburanga kugirango igaragaze tablet
- @media ( max - ubugari : 768px ) { ... }
- // Igishushanyo cyerekana ibishushanyo mbonera hamwe na desktop
- @media ( min - ubugari : 768px ) na ( max - ubugari : 980px ) { ... }
- // Ibiro binini
- @media ( min - ubugari : 1200px ) { .. }