Mga sudlanan
Ang mga sudlanan usa ka sukaranan nga bloke sa pagtukod sa Bootstrap nga adunay sulud, pad, ug align sa imong sulud sulod sa gihatag nga aparato o viewport.
Giunsa nila pagtrabaho
Ang mga sudlanan mao ang labing sukaranan nga elemento sa layout sa Bootstrap ug gikinahanglan kung gamiton ang among default nga grid system . Ang mga sudlanan gigamit sa pagtago, pad, ug (usahay) isentro ang sulud sa sulod niini. Samtang ang mga sudlanan mahimong magsalag, kadaghanan sa mga layout wala magkinahanglan usa ka salag nga sudlanan.
Ang Bootstrap adunay tulo ka lainlaing mga sudlanan:
.container
, nga nagtakda ugmax-width
sa matag responsive breakpoint.container-fluid
, nga anaawidth: 100%
sa tanang breakpoints.container-{breakpoint}
, ngawidth: 100%
hangtod sa gitakda nga breakpoint
Ang lamesa sa ubos naghulagway kung giunsa pagtandi ang matag sudlanan max-width
sa orihinal .container
ug .container-fluid
sa matag breakpoint.
Tan-awa sila sa aksyon ug itandi sila sa among Grid nga ehemplo .
Mas gamay <576px |
Gamay nga ≥576px |
Medium ≥768px |
Dako ≥992px |
X-Large ≥1200px |
XX-Dagko ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140 px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140 px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140 px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140 px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140 px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Default nga sudlanan
Ang among default .container
nga klase usa ka responsive, fixed-width nga sudlanan, nagpasabut nga ang mga max-width
pagbag-o niini sa matag breakpoint.
<div class="container">
<!-- Content here -->
</div>
Responsive nga mga sudlanan
Ang mga responsive nga mga sudlanan nagtugot kanimo sa pagpiho sa usa ka klase nga 100% ang gilapdon hangtod maabot ang espesipikong breakpoint, nga human niini atong i-apply max-width
ang s alang sa matag usa sa mas taas nga breakpoints. Pananglitan, .container-sm
100% ang gilapdon aron magsugod hangtod sm
maabot ang breakpoint, diin kini mosaka sa md
, lg
, xl
, ug xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Mga sudlanan sa likido
Gamit .container-fluid
alang sa usa ka bug-os nga gilapdon nga sudlanan, nga nagsangkad sa tibuuk nga gilapdon sa viewport.
<div class="container-fluid">
...
</div>
Sass
Sama sa gipakita sa ibabaw, ang Bootstrap nagmugna og usa ka serye sa mga predefined nga mga klase sa sudlanan aron matabangan ka sa paghimo sa mga layout nga imong gusto. Mahimo nimong ipasibo kining gitakda nang daan nga mga klase sa sudlanan pinaagi sa pag-usab sa mapa sa Sass (makita sa _variables.scss
) nga nagpalihok kanila:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Dugang sa pag-customize sa Sass, mahimo ka usab nga maghimo sa imong kaugalingon nga mga sudlanan gamit ang among Sass mixin.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Para sa dugang nga impormasyon ug mga pananglitan kon unsaon pag-usab sa atong Sass nga mga mapa ug mga variable, palihog tan-awa ang Sass nga seksyon sa Grid nga dokumentasyon .