Sisitemu ya sisitemu
Koresha imbaraga zacu zigendanwa-yambere flexbox grid kugirango wubake imiterere yuburyo bwose nubunini dukesha sisitemu cumi na zibiri, ibice bitandatu byitondewe byitabira, Sass variable na mixins, hamwe nibyiciro byinshi byateganijwe mbere.
Urugero
Sisitemu ya Bootstrap ikoresha urukurikirane rwibikoresho, umurongo, hamwe ninkingi kugirango uhuze kandi uhuze ibirimo. Yubatswe na flexbox kandi irasubiza rwose. Hasi nurugero nibisobanuro byimbitse byukuntu sisitemu ya gride ihurira hamwe.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Urugero ruvuzwe haruguru rurema ubugari butatu buringaniye mubikoresho byose hamwe no kureba ukoresheje ibyiciro byateganijwe mbere ya gride. Izo nkingi zegeranye kurupapuro hamwe nababyeyi .container
.
Uburyo ikora
Kumena, dore uko sisitemu ya gride ihurira hamwe:
-
Urusobe rwacu rushyigikira ibice bitandatu byitabira . Ibice bitandukanijwe bishingiye
min-width
kubibazo byitangazamakuru, bivuze ko bigira ingaruka kuri ibyo bice ndetse no hejuru yabyo byose (urugero, bireba.col-sm-4
,,,sm
na ,md
) . Ibi bivuze ko ushobora kugenzura kontineri hamwe nubunini bwinkingi hamwe nimyitwarire kuri buri gice.lg
xl
xxl
-
Ibikoresho birimo hagati na horizontalale ibirimo. Koresha
.container
ubugari bwa pigiseli isubiza,.container-fluid
kubirebawidth: 100%
byose bireba nibikoresho, cyangwa ikintu gisubiza (urugero,.container-md
) kugirango uhuze amazi na pigiseli y'ubugari. -
Imirongo ni ibipfunyika byinkingi. Buri nkingi ifite horizontal
padding
(bita gutter) yo kugenzura umwanya hagati yabo. Ibipadding
noneho birwanya umurongo hamwe numurongo utari mwiza kugirango umenye neza ibiri mu nkingi zawe bihujwe neza kuruhande rwibumoso. Imirongo nayo ishyigikira ibyiciro byo guhindura kugirango ushyire hamwe inkingi ingana na gutter ibyiciro kugirango uhindure umwanya wibirimo. -
Inkingi ziroroshye guhinduka. Hano hari inyandikorugero 12 ziboneka kumurongo, zikwemerera gukora ibice bitandukanye byibintu bikurikirana umubare winkingi. Ibyiciro byinkingi byerekana umubare wicyitegererezo cyinkingi kugirango uzenguruke (urugero,
col-4
ine).width
s zashyizwe ku ijanisha kuburyo burigihe ufite ubunini bungana. -
Imyanda nayo irasubizwa kandi irashobora guhindurwa. Amasomo ya Gutter arahari murwego rwose, hamwe nubunini bungana na margin hamwe na padi intera . Hindura imyanda itambitse hamwe
.gx-*
namasomo, umuyoboro uhagaze hamwe.gy-*
, cyangwa imyanda yose hamwe.g-*
namasomo..g-0
irahari kandi kugirango ikureho imyanda. -
Impinduka za Sass, amakarita, hamwe no kuvanga imbaraga za gride. Niba udashaka gukoresha ibyiciro byateganijwe mbere ya Bootstrap, urashobora gukoresha isoko ya gride ya Sass kugirango ukore ibyawe hamwe nibisobanuro byinshi. Dushyiramo kandi ibintu bimwe na bimwe bya CSS kugirango dukoreshe ibihinduka bya Sass kugirango birusheho guhinduka kuri wewe.
Menya aho ugarukira hamwe nudukosa dukikije flexbox , nkudashobora gukoresha ibintu bimwe na bimwe bya HTML nkibikoresho bya flex .
Amahitamo ya gride
Sisitemu ya gride ya Bootstrap irashobora guhuza ibice bitandatu byose byacitse, hamwe nibice byose uhitamo. Ibice bitandatu bidasanzwe bya gride ni nkibi bikurikira:
- Ntoya (xs)
- Ntoya (sm)
- Hagati (md)
- Kinini (lg)
- Kinini cyane (xl)
- Ibinini byiyongereye (xxl)
Nkuko byavuzwe haruguru, buri kimwe muri ibyo bice gifite kontineri yacyo, icyiciro cyihariye kidasanzwe, hamwe nabahindura. Dore uko gride ihinduka muribi bice:
xs <576px |
sm ≥576px |
md 68768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Ibikoreshomax-width |
Nta na kimwe (auto) | 540px | 720px | 960px | 1140px | 1320px |
Icyiciro cyambere | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# yinkingi | 12 | |||||
Ubugari | 1.5rem (.75rem ibumoso n'iburyo) | |||||
Imiyoboro ya Customer | Yego | |||||
Nestable | Yego | |||||
Gutumiza inkingi | Yego |
Imashini-yimiterere
Koresha ibice-byihariye byinkingi ibyiciro kugirango byoroshye inkingi zingana nta numero igaragara ifite nka .col-sm-6
.
Ubugari bungana
Kurugero, hano hari grid grid ebyiri zikoreshwa kuri buri gikoresho no kureba, kuva xs
kuri xxl
. Ongeraho umubare uwo ariwo wose wibice-bitari bike kuri buri cyiciro ukeneye kandi buri nkingi izaba ubugari bumwe.
<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>
Gushiraho ubugari bumwe
Auto-layout ya flexbox grid inkingi nayo isobanura ko ushobora gushiraho ubugari bwinkingi imwe hanyuma ukagira inkingi ya barumuna ihita ihinduka hafi yayo. Urashobora gukoresha ibyiciro bya grid byateganijwe mbere (nkuko bigaragara hano), imiyoboro ya gride, cyangwa ubugari bwumurongo. Menya ko izindi nkingi zizahinduka ntakibazo ubugari bwikigo hagati.
<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>
Ubugari butandukanye
Koresha col-{breakpoint}-auto
amasomo kugirango ubunini bw'inkingi ukurikije ubugari busanzwe bwibirimo.
<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>
Amasomo ashubije
Urusobe rwa Bootstrap rurimo ibyiciro bitandatu byibyiciro byateganijwe mbere yo kubaka imiterere igoye. Hindura ingano yinkingi zawe hejuru yinyongera ntoya, ntoya, iringaniye, nini, cyangwa ibikoresho binini cyane ariko ubona bikwiye.
Ibice byose
Kuri gride imwe nimwe kuva mubikoresho bito kugeza binini, koresha i .col
hamwe .col-*
namasomo. Kugaragaza icyiciro cyumubare mugihe ukeneye inkingi nini cyane; bitabaye ibyo, umva neza .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>
Bishyizwe kuri horizontal
Ukoresheje icyiciro kimwe .col-sm-*
cyamasomo, urashobora gukora sisitemu shingiro ya gride itangira gutondekanya hanyuma igahinduka horizontal kumurongo muto ( 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>
Kuvanga no guhuza
Ntushaka ko inkingi zawe zishira gusa murwego runaka? Koresha guhuza ibyiciro bitandukanye kuri buri cyiciro nkuko bikenewe. Reba urugero rukurikira kugirango ubone igitekerezo cyiza cyukuntu byose bikora.
<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>
Inkingi
Koresha .row-cols-*
ibyiciro byitabira kugirango ushireho vuba umubare winkingi zitanga neza ibikubiyemo hamwe nimiterere. Mugihe .col-*
ibyiciro bisanzwe bikurikizwa kumurongo wihariye (urugero, .col-md-4
), umurongo winkingi ibyiciro byashyizwe kubabyeyi .row
nkumuhigo. Hamwe .row-cols-auto
nawe ushobora gutanga inkingi ubugari bwazo.
Koresha iyi mirongo yinkingi ibyiciro kugirango wihute gukora imiterere shingiro ya gride cyangwa kugenzura ikarita yawe.
<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>
Urashobora kandi gukoresha Sass ivanze iherekejwe , 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);
}
}
Icyari
Kugirango ushire ibikubiyemo hamwe na gride isanzwe, ongeramo ibishya .row
kandi ushireho .col-sm-*
inkingi muburyo buriho .col-sm-*
. Imirongo yashizwemo igomba gushiramo urutonde rwinkingi ziyongera kuri 12 cyangwa nkeya (ntibisabwa ko ukoresha inkingi 12 zose ziboneka).
<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
Iyo ukoresheje inkomoko ya Bootstrap ya Sass dosiye, ufite amahitamo yo gukoresha Sass variable hamwe na mixin kugirango ukore imiterere, ibisobanuro, nibisubizo byurupapuro. Ibyiciro byateganijwe mbere ya gride ikoresha ibyo bihinduka hamwe na mixin kugirango itange suite yose yiteguye-gukoresha-amasomo yihuse.
Ibihinduka
Ibihinduka n'amakarita bigena umubare winkingi, ubugari bwamazi, hamwe nibibazo byitangazamakuru aho byatangirira kureremba inkingi. Dukoresha ibi kugirango tubyare ibyiciro byateganijwe byateganijwe hejuru, kimwe no kuvanga ibicuruzwa byavuzwe haruguru.
$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
);
Imvange
Imvange zikoreshwa zifatanije na gride ihindagurika kugirango itange ibisobanuro bya CSS kubisobanuro bya grid inkingi.
// 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);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Urugero
Urashobora guhindura ibihinduka kubiciro byawe bwite, cyangwa ugakoresha gusa ivanga nagaciro kabo gasanzwe. Dore urugero rwo gukoresha igenamiterere risanzwe kugirango ukore imiterere-inkingi ebyiri hamwe nu cyuho hagati.
.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>
Guhindura gride
Ukoresheje ibyubatswe muri gride Sass ihinduka namakarita, birashoboka guhitamo byimazeyo ibyiciro byateganijwe mbere. Hindura umubare w'ibyiciro, ibipimo by'ibibazo by'itangazamakuru, n'ubugari bwa kontineri - hanyuma usubiremo.
Inkingi
Umubare wa grid inkingi urashobora guhindurwa ukoresheje Sass variable. $grid-columns
ni Byakoreshejwe Kuri Kubyara Ubugari (ku ijana) ya buri nkingi ku giti cye mugihe $grid-gutter-width
ishyiraho ubugari bwinkingi.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Urwego
Kwimuka kurenga inkingi ubwazo, urashobora kandi guhitamo umubare wa grid tiers. Niba ushaka ibice bine bya gride gusa, wavugurura i $grid-breakpoints
no $container-max-widths
kubintu nkibi:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Mugihe uhinduye ibintu byose byahinduwe na Sass, uzakenera kubika impinduka zawe no kwisubiraho. Kubikora bizasohoka ibishya bishya byateganijwe mbere ya grid ibyiciro kubugari bwinkingi, offsets, no gutumiza. Ibisubizo byingirakamaro byingirakamaro nabyo bizavugururwa kugirango ukoreshe ibicuruzwa byacitse. Witondere gushiraho indangagaciro muri px
(ntabwo rem
, em
cyangwa, %
).