Lijana
Lits'oants'o ke moaho oa mantlha oa Bootstrap o nang le, pad, le ho hokahanya litaba tsa hau ka har'a sesebelisoa kapa sebaka sa pono.
Kamoo li sebetsang kateng
Lits'oants'o ke karolo ea mantlha ea sebopeho ho Bootstrap 'me lia hlokahala ha u sebelisa sistimi ea rona ea kamehla . Lits'oants'o li sebelisetsoa ho kenyelletsa, pad, le (ka linako tse ling) li beha litaba tse ka hare ho tsona. Le hoja lijana li ka etsoa sehlaha, boholo ba libopeho ha li hloke setshelo sa sehlaha.
Bootstrap e tla le lijana tse tharo tse fapaneng:
.container
, e behang sebakamax-width
se seng le se seng se arabelang.container-fluid
, e lengwidth: 100%
likheo tsohle.container-{breakpoint}
, e lengwidth: 100%
ho fihlela sebaka se boletsoeng
Tafole e ka tlase e bonts'a hore na sets'oants'o ka seng se max-width
bapisoa joang le sa mantlha .container
le .container-fluid
ho pholletsa le sebaka se seng le se seng.
Li bone li sebetsa 'me u li bapise mohlaleng oa rona oa Grid .
E nyane haholo <576px |
E nyane ≥576px |
Hare ≥768px |
E kholo ≥992px |
X-Large ≥1200px |
XX-E kholo ≥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% |
Setshelo sa kamehla
Sehlopha sa rona sa kamehla .container
ke setshelo se arabelang, se bophara bo tsitsitseng, ho bolelang max-width
liphetoho tsa sona sebakeng se seng le se seng.
<div class="container">
<!-- Content here -->
</div>
Lijana tse arabelang
Lits'oants'o tse arabelang li u lumella ho hlakisa sehlopha se bophara ba 100% ho fihlela sebaka se boletsoeng se fihletsoe, ka mor'a moo re sebelisa max-width
s bakeng sa sebaka se seng le se seng se phahameng. Mohlala, .container-sm
ke bophara ba 100% ho qala ho fihlela sebaka sa sm
phomolo se fihletsoe, moo se tla nyoloha ka md
, lg
, xl
, le 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>
Lijana tsa metsi
Sebelisa .container-fluid
bakeng sa setshelo sa bophara bo felletseng, se pharalla ka bophara ba sebaka sa pono.
<div class="container-fluid">
...
</div>
Sass
Joalo ka ha ho bonts'itsoe kaholimo, Bootstrap e hlahisa letoto la litlelase tse boletsoeng esale pele ho u thusa ho aha meralo eo u e lakatsang. U ka etsa litlelase tsena tse boletsoeng esale pele ka ho fetola 'mapa oa Sass (o fumanoang ho _variables.scss
) o ba fang matla:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ntle le ho iketsetsa Sass, o ka iketsetsa lijana tsa hau ka motsoako oa rona oa Sass.
// 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();
}
Bakeng sa lintlha tse ling le mehlala ea ho fetola 'mapa le mefuta e fapaneng ea Sass, ka kopo sheba karolo ea Sass ea litokomane tsa Grid .