ບັນຈຸ

ຕູ້ຄອນເທນເນີແມ່ນການກໍ່ສ້າງພື້ນຖານຂອງ Bootstrap ທີ່ບັນຈຸ, pad, ແລະຈັດລໍາດັບເນື້ອຫາຂອງທ່ານພາຍໃນອຸປະກອນຫຼື viewport.

ໃນໜ້ານີ້

ເຂົາເຈົ້າເຮັດວຽກແນວໃດ

Containers ແມ່ນອົງປະກອບໂຄງຮ່າງພື້ນຖານທີ່ສຸດໃນ Bootstrap ແລະ ຕ້ອງການໃນເວລາທີ່ນໍາໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງພວກເຮົາ . ຕູ້ຄອນເທນເນີແມ່ນໃຊ້ເພື່ອບັນຈຸ, pad, ແລະ (ບາງຄັ້ງ) ເນື້ອຫາຢູ່ກາງຂອງພວກມັນ. ໃນຂະນະທີ່ຕູ້ຄອນເທນເນີ ສາມາດ ເຮັດຮັງໄດ້, ການຈັດວາງສ່ວນໃຫຍ່ບໍ່ຈໍາເປັນຕ້ອງມີຖັງທີ່ມີຮັງ.

Bootstrap ມາພ້ອມກັບສາມຖັງທີ່ແຕກຕ່າງກັນ:

.container, ເຊິ່ງກໍານົດ a max-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-widths ສໍາລັບແຕ່ລະ 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 .