Awọn apoti
Awọn apoti jẹ bulọọki ile ipilẹ ti Bootstrap ti o ni, paadi, ati ṣe deede akoonu rẹ laarin ẹrọ ti a fun tabi wiwo wiwo.
Bawo ni wọn ṣe n ṣiṣẹ
Awọn apoti jẹ ẹya ipilẹ akọkọ julọ ni Bootstrap ati pe a nilo nigba lilo eto akoj aiyipada wa . Awọn apoti ni a lo lati ni, paadi, ati (nigbakugba) aarin akoonu laarin wọn. Lakoko ti awọn apoti le jẹ itẹ-ẹiyẹ, ọpọlọpọ awọn ipalemo ko nilo eiyan itẹ-ẹiyẹ kan.
Bootstrap wa pẹlu awọn apoti oriṣiriṣi mẹta:
.container
, eyi ti o ṣeto amax-width
ni kọọkan idahun breakpoint.container-fluid
, eyi ti o jẹwidth: 100%
ni gbogbo breakpoints.container-{breakpoint}
, ti o jẹwidth: 100%
titi ti pàtó kan breakpoint
Awọn tabili ni isalẹ sapejuwe bi kọọkan eiyan ká max-width
afiwe si awọn atilẹba .container
ati ki o .container-fluid
kọja kọọkan breakpoint.
Wo wọn ni iṣe ki o ṣe afiwe wọn ninu apẹẹrẹ Grid wa .
Afikun kekere <576px |
Kekere ≥576px |
Alabọde ≥768px |
Nla ≥992px |
X-Large ≥1200px |
XX-Nla ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Eiyan aiyipada
Kilasi aiyipada .container
wa jẹ idahun, eiyan iwọn ti o wa titi, afipamo awọn max-width
iyipada rẹ ni aaye fifọ kọọkan.
<div class="container">
<!-- Content here -->
</div>
Awọn apoti idahun
Awọn apoti idahun gba ọ laaye lati pato kilasi kan ti o jẹ 100% fife titi ti aaye isinmi ti a sọ pato ti de, lẹhin eyi a lo max-width
s fun ọkọọkan awọn aaye fifọ giga. Fun apẹẹrẹ, .container-sm
ni 100% fife lati bẹrẹ titi aaye sm
fifọ yoo ti de, nibiti yoo ti ṣe iwọn pẹlu md
, lg
, xl
, ati 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>
Awọn apoti omi
Lo .container-fluid
fun eiyan iwọn ni kikun, ti o yika gbogbo iwọn ti oju wiwo naa.
<div class="container-fluid">
...
</div>
Sass
Gẹgẹbi a ti han loke, Bootstrap ṣe ipilẹṣẹ lẹsẹsẹ ti awọn kilasi eiyan ti a ti sọ tẹlẹ lati ṣe iranlọwọ fun ọ lati kọ awọn ipilẹ ti o fẹ. O le ṣe akanṣe awọn kilasi eiyan ti a ti sọ tẹlẹ nipa iyipada maapu Sass (ti o wa ninu _variables.scss
) ti o fun wọn ni agbara:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ni afikun si isọdi Sass, o tun le ṣẹda awọn apoti tirẹ pẹlu apopọ Sass wa.
// 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();
}
Fun alaye diẹ sii ati awọn apẹẹrẹ lori bii o ṣe le yipada awọn maapu Sass wa ati awọn oniyipada, jọwọ tọka si apakan Sass ti iwe Grid .