Bekas
Bekas ialah blok binaan asas Bootstrap yang mengandungi, mengepad dan menjajarkan kandungan anda dalam peranti atau ruang pandang tertentu.
Bagaimana mereka bekerja
Bekas ialah elemen susun atur paling asas dalam Bootstrap dan diperlukan apabila menggunakan sistem grid lalai kami . Bekas digunakan untuk memuatkan, meletakkan, dan (kadangkala) memusatkan kandungan di dalamnya. Walaupun bekas boleh bersarang, kebanyakan reka letak tidak memerlukan bekas bersarang.
Bootstrap datang dengan tiga bekas berbeza:
.container
, yang menetapkan amax-width
pada setiap titik putus responsif.container-fluid
, yang beradawidth: 100%
pada semua titik putus.container-{breakpoint}
, iaituwidth: 100%
sehingga titik putus yang ditentukan
Jadual di bawah menggambarkan bagaimana setiap bekas max-width
dibandingkan dengan yang asal .container
dan .container-fluid
merentasi setiap titik putus.
Lihat mereka dalam tindakan dan bandingkan mereka dalam contoh Grid kami .
Lebih kecil <576px |
Kecil ≥576px |
Sederhana ≥768px |
Besar ≥992px |
X-Besar ≥1200px |
XX-Besar ≥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% |
Bekas lalai
Kelas lalai kami .container
ialah bekas yang responsif, lebar tetap, bermakna max-width
perubahannya pada setiap titik putus.
<div class="container">
<!-- Content here -->
</div>
Bekas responsif
Bekas responsif membolehkan anda menentukan kelas yang 100% lebar sehingga titik putus yang ditentukan dicapai, selepas itu kami menggunakan max-width
s untuk setiap titik putus yang lebih tinggi. Sebagai contoh, .container-sm
adalah 100% lebar untuk dimulakan sehingga sm
titik putus dicapai, di mana ia akan meningkat dengan md
, lg
, xl
, dan 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>
Bekas cecair
Gunakan .container-fluid
untuk bekas lebar penuh, merentangi keseluruhan lebar port pandangan.
<div class="container-fluid">
...
</div>
Sass
Seperti yang ditunjukkan di atas, Bootstrap menjana satu siri kelas kontena yang dipratentukan untuk membantu anda membina reka letak yang anda inginkan. Anda boleh menyesuaikan kelas kontena yang dipratentukan ini dengan mengubah suai peta Sass (terdapat dalam _variables.scss
) yang memberi kuasa kepada mereka:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Selain menyesuaikan Sass, anda juga boleh mencipta bekas anda sendiri dengan campuran Sass kami.
// 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();
}
Untuk mendapatkan maklumat lanjut dan contoh tentang cara mengubah suai peta dan pembolehubah Sass kami, sila rujuk bahagian Sass dalam dokumentasi Grid .