Grid system
Shandisa yedu ine simba mobile-yekutanga flexbox grid kuvaka marongero eese maumbirwo uye saizi nekuda kwegumi nembiri column system, matanhatu default anopindura matairi, Sass akasiyana uye musanganiswa, uye akawanda emakirasi akafanotsanangurwa.
Muenzaniso
Bootstrap's grid system inoshandisa nhevedzano yemidziyo, mitsetse, uye makoramu kurongedza uye kurongedza zvirimo. Yakavakwa neflexbox uye inopindura zvizere. Pazasi pane muenzaniso uye yakadzama tsananguro yekuti iyo grid system inosangana sei.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Muenzaniso uri pamusoro unogadzira makoramu matatu akaenzana-akaenzana pane ese maturusi uye ekuona zviteshi uchishandisa yedu yakafanotsanangurwa grid makirasi. Makoramu iwayo ari pakati pepeji nemubereki .container
.
Zvinoshanda sei
Kuchityora, heino nzira iyo grid system inouya pamwe chete:
-
Gridi yedu inotsigira matanhatu anopindura breakpoints . Breakpoints yakavakirwa pamibvunzo
min-width
midhiya, zvichireva kuti inobata iyo breakpoint uye zvese zviri pamusoro payo (semuenzaniso,.col-sm-4
zvinoshanda kunasm
,md
,lg
,xl
, uyexxl
). Izvi zvinoreva kuti iwe unogona kudzora mudziyo uye column saizi uye maitiro nechero breakpoint. -
Containers pakati uye yakatwasuka padhiza zvirimo. Shandisa
.container
hupamhi hwepixel inopindura,.container-fluid
kunewidth: 100%
ese maratidziro nemidziyo, kana mudziyo unopindura (semuenzaniso,.container-md
) wemusanganiswa wemvura uye pixel upamhi. -
Mitsara inoputira pamakoramu. Koramu yega yega ine gorizontal
padding
(inonzi gutter) yekudzora nzvimbo iri pakati pawo. Izvipadding
zvinobva zvapikiswa pamitsara ine miganho isina kunaka kuti ive nechokwadi chekuti zviri mumakoramu ako zvinooneka zvakadzika nekuruboshwe. Mitsara inotsigirawo makirasi ekugadzirisa kuti ashandise zvakafanana column sizeng uye gutter makirasi kuti uchinje nzvimbo yezvako. -
Makoramu anochinjika zvinoshamisa. Kune gumi nemaviri template makoramu anowanikwa pamutsara, achikubvumidza iwe kugadzira akasiyana masanganiswa ezvinhu zvinotenderera chero nhamba yemakoramu. Column makirasi anoratidza huwandu hwematemplate makoramu kusvika kureba (semuenzaniso,
col-4
anotenderera mana).width
s akaiswa muzvikamu saka unogara uine saizi yakafanana. -
Gutters zvakare inopindura uye inogoneka. Gutter makirasi anowanikwa pane ese mabreakpoints, aine ese saizi akafanana neyedu margin uye padding spacing . Chinja marata akachinjika ane
.gx-*
makirasi, magita akatwasuka ane.gy-*
, kana ese magita ane.g-*
makirasi..g-0
inowanikwawo kubvisa magata. -
Sass zvinosiyana, mepu, uye musanganiswa simba iyo grid. Kana iwe usingade kushandisa akatemerwa gidhi makirasi muBootstrap, unogona kushandisa yedu grid sosi Sass kugadzira yako neyakawanda semantic markup. Isu tinosanganisirawo zvimwe zveCSS tsika zvivakwa kuti utore aya maSass akasiyana kuti atonyanya kuchinjika kwauri.
Ziva zvipimo uye tsikidzi dzakatenderedza flexbox , sekutadza kushandisa zvimwe zvinhu zveHTML semidziyo inochinjika .
Grid options
Bootstrap's grid system inogona kuchinjika pane ese matanhatu default breakpoints, uye chero mabreakpoints aunogadzirisa. Iwo matanhatu default grid tiers ndeaya anotevera:
- Yakawedzera diki (xs)
- Diki (sm)
- Pakati (md)
- Huru (lg)
- Yakawedzera hombe (xl)
- Yakawedzera kukura (xxl)
Sezvataurwa pamusoro apa, imwe neimwe yeaya mabreakpoint ine mudziyo wayo, yakasarudzika kirasi prefix, uye modifiers. Heano machinjiro egridi pane aya mabreakpoints:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Containermax-width |
Hapana (otomatiki) | 540px | 720px | 960px | 1140px | 1320px |
Chivakashure chekirasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# yembiru | 12 | |||||
Gutter width | 1.5rem (.75rem kuruboshwe nekurudyi) | |||||
Custom gutters | Ehe | |||||
Nestable | Ehe | |||||
Column kuronga | Ehe |
Auto-layout columns
Shandisa breakpoint-specific column makirasi kuitira nyore kuyera makoramu pasina kirasi ine nhamba dzakajeka senge .col-sm-6
.
Kuenzana-upamhi
Semuenzaniso, heano maviri magidhi marongero anoshanda kune yega yega mudziyo uye yekutarisa, kubva xs
kusvika xxl
. Wedzera chero nhamba yeyuniti-shoma makirasi ega ega breakpoint yaunoda uye yega column ichave yakafanana hupamhi.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Kuisa upamhi hwembiru imwe
Auto-layout yeflexbox grid columns zvakare zvinoreva kuti iwe unogona kuseta hupamhi hwekoramu imwe uye kuita kuti makoramu ehama adzore otomatiki akaitenderedza. Unogona kushandisa makirasi egidhi akatsanangurwa (sezvinoratidzwa pazasi), musanganiswa wegidhi, kana inline upamhi. Ziva kuti mamwe makoramu achaita saizi zvisinei nehupamhi hwepakati column.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Variable wide content
Shandisa col-{breakpoint}-auto
makirasi kuhukuru makoramu zvichienderana nehupamhi hwechisikigo chezviri mukati.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Makirasi anopindura
Giridhi yeBootstrap inosanganisira matanhatu matavi emakirasi akatemerwa ekuvaka akaomarara anopindura marongero. Gadzirisa saizi yemakoramu ako pane yakawedzera diki, diki, yepakati, hombe, kana yakawedzera hombe zvishandiso zvisinei iwe zvaunoona zvakakodzera.
All breakpoints
Kune magridi akafanana kubva kudiki yemidziyo kusvika kune yakakura, shandisa iyo .col
uye .col-*
makirasi. Rondedzera kirasi ine nhamba kana iwe uchida yakanyanya saizi column; kana zvisina kudaro, inzwa wakasununguka kunamatira .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Yakaturikidzana kune yakachinjika
Uchishandisa seti imwe .col-sm-*
yemakirasi, unogona kugadzira yakakosha grid system iyo inotanga yakaturikidzana uye inova yakachinjika padiki breakpoint ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Sanganisa uye fananidza
Haudi kuti makoramu ako angomira mune mamwe grid tiers? Shandisa musanganiswa wemakirasi akasiyana kune imwe neimwe tier sezvinodiwa. Ona muenzaniso pazasi kuti uwane zano riri nani rekuti zvese zvinoshanda sei.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Row columns
Shandisa .row-cols-*
makirasi anopindura kukurumidza kuseta huwandu hwemakoramu anonyatso kupa zvirimo zvako uye marongero. Nepo .col-*
makirasi akajairwa anoshanda kumakoramu ega ega (eg, .col-md-4
), makirasi emitsetse akaiswa pamubereki .row
sechigadziro chekoramu dzirimo. Nemi .row-cols-auto
iwe unogona kupa makoramu hupamhi hwavo hwepanyama.
Shandisa aya mitsara makoramu makirasi kukurumidza kugadzira ekutanga grid marongero kana kudzora ako kadhi marongero uye nekupfuura pazvinenge zvichidikanwa pachikamu chekoramu.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Iwe unogona zvakare kushandisa inoperekedza Sass musanganiswa row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Nesting
Kuti uise zvirimo zvako neiyo default grid, wedzera nyowani .row
uye seti .col-sm-*
yemakoramu mukati meiyo iripo .col-sm-*
column. Mitsara yakamira inofanira kusanganisira seti yemakoramu anowedzera kusvika gumi nemaviri kana mashoma (hazvidiwi kuti ushandise makoramu gumi nemaviri aripo).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass
Paunenge uchishandisa Bootstrap's source Sass mafaera, iwe une sarudzo yekushandisa Sass zvinosiyana uye musanganiswa kugadzira tsika, semantic, uye inoteerera peji marongero. Yedu yakafanotsanangurwa makirasi egidhi anoshandisa aya akasiyana-siyana uye musanganiswa kuti ape yakazara sutu yeakagadzirira-kushandisa-makirasi ekukurumidza anopindura marongero.
Variables
Zvinosiyana-siyana uye mepu zvinotarisa huwandu hwemakoramu, hupamhi hweguta, uye nzvimbo yemibvunzo yenhau panotangira makoramu akayangarara. Isu tinoshandisa izvi kugadzira iyo yakafanotsanangurwa makirasi egidhi akanyorwa pamusoro, pamwe neyetsika musanganiswa akanyorwa pazasi.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mixins
Mixins anoshandiswa pamwe chete negridhi zvinosiyana kugadzira semantic CSS yemakoramu ega ega.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Muenzaniso kushandiswa
Iwe unogona kushandura mavhezheni kune ako ega tsika tsika, kana kungo shandisa mamixins ane maitiro avo akasarudzika. Heino muenzaniso wekushandisa zvigadziriso zvekutanga kugadzira maviri-column marongero ane gap pakati.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Kugadzirisa grid
Uchishandisa yedu yakavakirwa-mukati gidhi Sass akasiyana uye mepu, zvinogoneka kugadzirisa zvizere makirasi egidhi akatsanangurwa. Shandura huwandu hwetiyeri, midhiya yemubvunzo zviyero, uye upamhi hwemudziyo - wobva wadzokorora.
Columns uye gutters
Huwandu hwemakoramu egridi anogona kugadziridzwa kuburikidza neSass zvinosiyana. $grid-columns
inoshandiswa kugadzira hupamhi (mumuzana) yekoramu yega yega ichiseta $grid-gutter-width
hupamhi hwemagita emakoramu.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Grid tiers
Kufamba kupfuura makoramu pachawo, iwe unogona zvakare kugadzirisa huwandu hwegridi tiers. Kana iwe waida magidhi mana chete, waizovandudza $grid-breakpoints
uye $container-max-widths
kune chimwe chinhu chakadai:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Paunenge uchiita chero shanduko kune maSass akasiyana kana mepu, iwe unozofanirwa kuchengetedza shanduko dzako uye kudzorera. Kuita izvi kunoburitsa seti nyowani yeyakafanotsanangurwa makirasi egidhi yemakoramu hupamhi, zvigadziriso, uye kuronga. Inoteerera inoonekwa zvinoshandiswa zvakare ichagadziridzwa kuti ishandise tsika yekutyora. Ita shuwa yekuseta grid values mukati px
(kwete rem
, em
, kana %
).