Bootstrap yakavakirwa pane inopindura 12-column grid. Isu takasanganisira yakagadziriswa- uye fluid-width marongero anoenderana neiyo system.
Iyo yakasarudzika grid system yakapihwa sechikamu cheBootstrap ndeye 940px-yakafara, 12-column grid .
Iyo ine zvakare ina inopindura misiyano yeakasiyana maturusi uye zvigadziriso: foni, piritsi mufananidzo, tafura landscape uye madiki desktops, uye yakakura widescreen desktops.
- <div kirasi = "mutsara" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </ div>
Sezvinoratidzwa pano, hurongwa hwekutanga hunogona kugadzirwa ne "makoroni" maviri, imwe neimwe inotora nhamba yezvikamu gumi nembiri zvekutanga zvatakatsanangura sechikamu chegridi yedu.
- <div kirasi = "mutsara" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </ div>
Neiyo static (isina-fluid) grid system muBootstrap, nesting iri nyore. Kuti uise zvirimo zvako, ingo wedzera nyowani .row
uye seti .span*
yemakoramu mukati meiyo iripo .span*
column.
- <div kirasi = "mutsara" >
- <div class = "span12" >
- Chikamu 1 chechikamu
- <div kirasi = "mutsara" >
- <div class = "span6" > Level 2 </div>
- <div class = "span6" > Level 2 </div>
- </ div>
- </ div>
- </ div>
Variable | Default value | Tsanangudzo |
---|---|---|
@gridColumns |
12 | Nhamba yezvikamu |
@gridColumnWidth |
60px | Kufara kwembiru imwe neimwe |
@gridGutterWidth |
20px | Negative nzvimbo pakati pembiru |
@siteWidth |
Yakaverengerwa huwandu hwese makolamu uye magita | Inoverenga nhamba yemakoramu nemagita kuseta hupamhi .container-fixed() hwemusanganiswa |
Yakavakwa muBootstrap mashoma mashoma ekugadzirisa iyo default 940px grid system, yakanyorwa pamusoro. Zvose zvakasiyana-siyana zvegridi zvakachengetwa muzvinyorwa.zvishoma.
Kugadzirisa grid kunoreva kushandura matatu @grid*
akasiyana uye kudzorera Bootstrap. Shandura mabhidhiri egidhi mumabhii.less uye shandisa imwe yenzira ina dzakanyorwa kuunganidza . Kana uri kuwedzera mamwe makoramu, iva nechokwadi chekuwedzera CSS kune avo vari grid.less.
Kugadziriswa kwegridi kunongoshanda padanho rekutanga, iyo 940px grid. Kuti uchengetedze zvinoteerera zveBootstrap, iwe zvakare uchafanirwa kugadzirisa magidhi mukupindura.less.
Iyo yakasarudzika uye yakapusa 940px-yakafara, yakatarisana dhizaini yeinongoita chero webhusaiti kana peji rinopihwa neamwechete <div class="container">
.
- <muviri>
- <div kirasi = "mudziyo" >
- ...
- </ div>
- </ body>
<div class="container-fluid">
inopa inochinjika peji chimiro, min- uye max-upamhi, uye kuruboshwe-kuruboshwe. Yakanakira maapplication uye madoku.
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Sidebar content-->
- </ div>
- <div class = "span10" >
- <!--Muviri zvemukati-->
- </ div>
- </ div>
- </ div>
Bootstrap inotsigira mashoma emibvunzo midhiya kubatsira kuita kuti mapurojekiti ako ave akakodzera pamidziyo yakasiyana uye skrini yekugadzirisa. Hezvino izvo zvinosanganisirwa:
Label | Layout width | Column width | Gutter width |
---|---|---|---|
Mafonifoni | 480px uye pasi | Fluid columns, hapana hupamhi hwakagadziriswa | |
Portrait mahwendefa | 480px kusvika 768px | Fluid columns, hapana hupamhi hwakagadziriswa | |
Mahwendefa emamiriro ezvinhu | 768px kusvika 940px | 44px | 20px |
Default | 940px uye kumusoro | 60px | 20px |
Kuratidzwa kukuru | 1210px uye kumusoro | 70px | 30px |
Mivhunzo yeMedia inobvumira tsika yeCSS zvichibva pane akati wandei mamiriro- retio, upamhi, mhando yekuratidzira, nezvimwe-asi kazhinji inotarisana nekutenderera min-width
uye max-width
.
Bootstrap haingosanganisire iyi mibvunzo midhiya, asi kunzwisisa nekuwedzera kuri nyore kwazvo uye kunoda kushomeka kuseta. Iwe une mashoma sarudzo dzekusanganisira anopindura maficha eBootstrap:
Wadii kungoisanganisira? Chokwadi kutaurirwa, hazvisi zvese zvinoda kupindurwa. Panzvimbo pekukurudzira vanogadzira kuti vabvise chimiro ichi, isu tinoona zviri nani kuti tigone kugonesa.
- // Mafoni epasi uye pasi
- @media ( max - width : 480px ) { ... }
- // Landscape foni kune portrait piritsi
- @media ( max - width : 768px ) { ... }
- // Portrait piritsi kune landscape uye desktop
- @media ( min - width : 768px ) uye ( max - width : 940px ) { ... }
- // Desktop hombe
- @media ( min - width : 1200px ) { .. }