ບັນຈຸ
ຕູ້ຄອນເທນເນີແມ່ນການກໍ່ສ້າງພື້ນຖານຂອງ Bootstrap ທີ່ບັນຈຸ, pad, ແລະຈັດລໍາດັບເນື້ອຫາຂອງທ່ານພາຍໃນອຸປະກອນຫຼື viewport.
ເຂົາເຈົ້າເຮັດວຽກແນວໃດ
Containers ແມ່ນອົງປະກອບໂຄງຮ່າງພື້ນຖານທີ່ສຸດໃນ Bootstrap ແລະ ຕ້ອງການໃນເວລາທີ່ນໍາໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງພວກເຮົາ . ຕູ້ຄອນເທນເນີແມ່ນໃຊ້ເພື່ອບັນຈຸ, pad, ແລະ (ບາງຄັ້ງ) ເນື້ອຫາຢູ່ກາງຂອງພວກມັນ. ໃນຂະນະທີ່ຕູ້ຄອນເທນເນີ ສາມາດ ເຮັດຮັງໄດ້, ການຈັດວາງສ່ວນໃຫຍ່ບໍ່ຈໍາເປັນຕ້ອງມີຖັງທີ່ມີຮັງ.
Bootstrap ມາພ້ອມກັບສາມຖັງທີ່ແຕກຕ່າງກັນ:
.container
, ເຊິ່ງກໍານົດ amax-width
ໃນແຕ່ລະຈຸດພັກຜ່ອນທີ່ຕອບສະຫນອງ.container-fluid
, ເຊິ່ງwidth: 100%
ຢູ່ໃນຈຸດຢຸດທັງຫມົດ.container-{breakpoint}
, ເຊິ່ງແມ່ນwidth: 100%
ຈົນກ່ວາ breakpoint ທີ່ກໍານົດໄວ້
ຕາຕະລາງຂ້າງລຸ່ມນີ້ສະແດງໃຫ້ເຫັນວິທີການ max-width
ປຽບທຽບຂອງແຕ່ລະຖັງກັບຕົ້ນສະບັບ .container
ແລະ .container-fluid
ໃນທົ່ວແຕ່ລະ breakpoint.
ເບິ່ງພວກມັນໃນການປະຕິບັດແລະປຽບທຽບພວກມັນຢູ່ໃນ ຕົວຢ່າງຕາຕະລາງ ຂອງພວກເຮົາ .
ຂະຫນາດນ້ອຍພິເສດ <576px |
ຂະໜາດນ້ອຍ ≥576px |
ຂະຫນາດກາງ ≥768px |
ຂະໜາດໃຫຍ່ ≥992px |
X-ໃຫຍ່ ≥1200px |
XX-ໃຫຍ່ ≥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% |
ກ່ອງບັນຈຸເລີ່ມຕົ້ນ
ຫ້ອງຮຽນ ເລີ່ມຕົ້ນຂອ���ພວກເຮົາ .container
ແມ່ນກ່ອງບັນຈຸທີ່ມີຄວາມກວ້າງຄົງທີ່ທີ່ຕອບສະໜອງໄດ້, ຊຶ່ງໝາຍເຖິງ max-width
ການປ່ຽນແປງຂອງມັນໃນແຕ່ລະຈຸດຢຸດ.
<div class="container">
<!-- Content here -->
</div>
ບັນຈຸທີ່ຕອບສະຫນອງ
ຕູ້ຄອນເທນເນີທີ່ຕອບສະຫນອງຊ່ວຍໃຫ້ທ່ານສາມາດກໍານົດຊັ້ນຮຽນທີ່ມີຄວາມກວ້າງ 100% ຈົນກ່ວາຈຸດຢຸດທີ່ກໍານົດຈະບັນລຸ, ຫຼັງຈາກນັ້ນພວກເຮົານໍາໃຊ້ max-width
s ສໍາລັບແຕ່ລະ breakpoints ທີ່ສູງກວ່າ. ຕົວຢ່າງ, .container-sm
ແມ່ນກວ້າງ 100% ເພື່ອເລີ່ມຕົ້ນຈົນກ່ວາ sm
ຈຸດຢຸດຈະບັນລຸ, ບ່ອນທີ່ມັນຈະຂະຫຍາຍດ້ວຍ md
, lg
, xl
, ແລະ 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>
ບັນຈຸນ້ໍາ
ໃຊ້ .container-fluid
ສໍາລັບບັນຈຸຄວາມກວ້າງເຕັມ, ຂະຫຍາຍຄວາມກວ້າງທັງຫມົດຂອງຊ່ອງເບິ່ງ.
<div class="container-fluid">
...
</div>
ຊາສ
ດັ່ງທີ່ສະແດງຢູ່ຂ້າງເທິງ, Bootstrap ສ້າງຊຸດຂອງຊັ້ນບັນຈຸທີ່ກໍານົດໄວ້ລ່ວງຫນ້າເພື່ອຊ່ວຍໃຫ້ທ່ານສ້າງຮູບແບບທີ່ທ່ານຕ້ອງການ. ເຈົ້າອາດຈະປັບແຕ່ງຫ້ອງບັນຈຸທີ່ກຳນົດໄວ້ລ່ວງໜ້າເຫຼົ່ານີ້ໂດຍການດັດແກ້ແຜນທີ່ Sass (ພົບໃນ _variables.scss
) ທີ່ໃຫ້ອຳນາດແກ່ພວກມັນ:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
ນອກເຫນືອຈາກການປັບແຕ່ງ Sass, ທ່ານຍັງສາມາດສ້າງຖັງຂອງທ່ານເອງກັບ 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();
}
ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມແລະຕົວຢ່າງກ່ຽວກັບວິທີການແກ້ໄຂແຜນທີ່ Sass ແລະຕົວແປຂອງພວກເຮົາ, ກະລຸນາເບິ່ງ ພາກ Sass ຂອງເອກະສານ Grid .