ພາບລວມ

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

ບັນຈຸ

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

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

• .container, ເຊິ່ງກໍານົດ a max-widthໃນແຕ່ລະຈຸດພັກຜ່ອນທີ່ຕອບສະຫນອງ
• .container-fluid, ເຊິ່ງ width: 100%ຢູ່ໃນຈຸດຢຸດທັງຫມົດ
• .container-{breakpoint}, ເຊິ່ງແມ່ນ width: 100%ຈົນກ່ວາ breakpoint ທີ່ກໍານົດໄວ້

ຕາຕະລາງຂ້າງລຸ່ມນີ້ສະແດງໃຫ້ເຫັນວິທີການ max-widthປຽບທຽບຂອງແຕ່ລະຖັງກັບຕົ້ນສະບັບ .containerແລະ .container-fluidໃນທົ່ວແຕ່ລະ breakpoint.

ເບິ່ງພວກມັນໃນການປະຕິບັດແລະປຽບທຽບພວກມັນຢູ່ໃນ ຕົວຢ່າງຕາຕະລາງ ຂອງພວກເຮົາ .

ທັງໝົດໃນອັນດຽວ

ຫ້ອງຮຽນ ເລີ່ມຕົ້ນຂອງພວກເຮົາ .containerແມ່ນກ່ອງບັນຈຸທີ່ມີຄວາມກວ້າງຄົງທີ່ທີ່ຕອບສະໜອງໄດ້, ຊຶ່ງໝາຍເຖິງ max-widthການປ່ຽນແປງຂອງມັນໃນແຕ່ລະຈຸດຢຸດ.

<div class="container">
  <!-- Content here -->
</div>

ນ້ໍາ

ໃຊ້ .container-fluidສໍາລັບບັນຈຸຄວາມກວ້າງເຕັມ, ຂະຫຍາຍຄວາມກວ້າງທັງຫມົດຂອງຊ່ອງເບິ່ງ.

<div class="container-fluid">
  ...
</div>

ຕອບສະໜອງ

ກ່ອງບັນຈຸທີ່ຕອບສະໜອງແມ່ນໃໝ່ໃນ Bootstrap v4.4. ພວກເຂົາອະນຸຍາດໃຫ້ທ່ານລະບຸຊັ້ນຮຽນທີ່ມີຄວາມກວ້າງ 100% ຈົນກ່ວາຈຸດຢຸດທີ່ລະບຸໄວ້, ຫຼັງຈາກນັ້ນພວກເຮົານໍາໃຊ້ max-widths ສໍາລັບແຕ່ລະ breakpoints ທີ່ສູງກວ່າ. ຕົວຢ່າງ, .container-smແມ່ນກວ້າງ 100% ເພື່ອເລີ່ມຕົ້ນຈົນກ່ວາ smຈຸດຢຸດຈະບັນລຸ, ບ່ອນທີ່ມັນຈະຂະຫຍາຍດ້ວຍ md, lg, ແລະ xl.

<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>

ຈຸດພັກຜ່ອນທີ່ຕອບສະໜອງ

ເນື່ອງຈາກ Bootstrap ຖືກພັດທະນາໃຫ້ເປັນມືຖືກ່ອນ, ພວກເຮົາໃຊ້ການ ສອບຖາມສື່ ຈຳນວນໜຶ່ງ ເພື່ອສ້າງຈຸດແບ່ງທີ່ເໝາະສົມສຳລັບການຈັດວາງ ແລະສ່ວນຕິດຕໍ່ຂອງພວກເຮົາ. ຈຸດແບ່ງເຫຼົ່ານີ້ສ່ວນຫຼາຍແມ່ນອີງໃສ່ຄວາມກວ້າງຂອງຊ່ອງເບິ່ງຕໍາ່ສຸດທີ່ແລະອະນຸຍາດໃຫ້ພວກເຮົາຂະຫຍາຍອົງປະກອບໃນຂະນະທີ່ viewport ປ່ຽນແປງ.

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

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ນັບຕັ້ງແຕ່ພວກເຮົາຂຽນ CSS ແຫຼ່ງຂອງພວກເຮົາໃນ Sass, ທຸກໆຄໍາຖາມສື່ຂອງພວກເຮົາແມ່ນມີຢູ່ຜ່ານ Sass mixins:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

ບາງຄັ້ງພວກເຮົາໃຊ້ການສອບຖາມສື່ທີ່ໄປໃນທິດທາງອື່ນ (ຂະຫນາດຫນ້າຈໍທີ່ໃຫ້ ຫຼືນ້ອຍກວ່າ ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

ອີກເທື່ອ ໜຶ່ງ, ການສອບຖາມສື່ເຫຼົ່ານີ້ຍັງມີຢູ່ຜ່ານ Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

ນອກນັ້ນຍັງມີການສອບຖາມສື່ ແລະ mixins ສຳລັບການກຳນົດເປົ້າໝາຍສ່ວນດຽວຂອງຂະໜາດໜ້າຈໍໂດຍໃຊ້ຄວາມກວ້າງຂອງຈຸດແບ່ງຂັ້ນຕ່ຳ ແລະສູງສຸດ.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ການສອບຖາມສື່ເຫຼົ່ານີ້ຍັງມີຢູ່ຜ່ານ Sass mixins:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

ເຊັ່ນດຽວກັນ, ການສອບຖາມສື່ອາດຈະຂະຫຍາຍຄວາມກວ້າງຂອງ breakpoint ຫຼາຍ:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Sass mixin ສໍາລັບການກໍາຫນົດເປົ້າຫມາຍຂອບເຂດຂະຫນາດຫນ້າຈໍດຽວກັນຈະເປັນ:

@include media-breakpoint-between(md, xl) { ... }

Z-index

ອົງປະກອບ Bootstrap ຫຼາຍໆອັນໃຊ້ z-index, ຄຸນສົມບັດ CSS ທີ່ຊ່ວຍຄວບຄຸມການຈັດວາງໂດຍການສະຫນອງແກນທີສາມເພື່ອຈັດແຈງເນື້ອຫາ. ພວກເຮົາໃຊ້ຂະຫນາດ z-index ເລີ່ມຕົ້ນໃນ Bootstrap ທີ່ຖືກອອກແບບເພື່ອການນໍາທາງຊັ້ນ, ຄໍາແນະນໍາແລະ popovers, modals, ແລະອື່ນໆຢ່າງຖືກຕ້ອງ.

ຄຸນຄ່າທີ່ສູງກວ່າເຫຼົ່ານີ້ເລີ່ມຕົ້ນດ້ວຍຕົວເລກທີ່ມັກ, ສູງ ແລະສະເພາະພໍທີ່ຈະຫຼີກລ່ຽງການຂັດແຍ້ງກັນໄດ້. ພວກເຮົາຕ້ອງການຊຸດມາດຕະຖານເຫຼົ່ານີ້ໃນທົ່ວອົງປະກອບຊັ້ນຂອງພວກເຮົາ - ຄໍາແນະນໍາເຄື່ອງມື, popovers, navbars, dropdowns, modals - ດັ່ງນັ້ນພວກເຮົາສາມາດສອດຄ່ອງຢ່າງສົມເຫດສົມຜົນໃນພຶດຕິກໍາ. ບໍ່ມີເຫດຜົນທີ່ພວກເຮົາບໍ່ສາມາດໃຊ້ 100+ ຫຼື 500+.

ພວກເຮົາບໍ່ສົ່ງເສີມການປັບແຕ່ງຄ່າສ່ວນບຸກຄົນເຫຼົ່ານີ້; ຖ້າເຈົ້າປ່ຽນອັນໜຶ່ງ, ເຈົ້າອາດຈະຕ້ອງປ່ຽນພວກມັນທັງໝົດ.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

ເພື່ອຈັດການການທັບຊ້ອນກັນພາຍໃນອົງປະກອບ (ເຊັ່ນ: ປຸ່ມ ແລະອິນພຸດໃນກຸ່ມການປ້ອນຂໍ້ມູນ), ພວກເຮົາໃຊ້ z-indexຄ່າຕົວເລກດຽວທີ່ຕໍ່າຂອງ 1, 2, ແລະ 3ສໍາລັບຄ່າເລີ່ມຕົ້ນ, ເລື່ອນ ແລະສະຖານະທີ່ເຄື່ອນໄຫວ. ເມື່ອ hover/focus/active, ພວກເຮົາເອົາອົງປະກອບສະເພາະອັນໃດອັນໜຶ່ງມາຢູ່ແຖວໜ້າດ້ວຍ z-indexມູນຄ່າທີ່ສູງກວ່າເພື່ອສະແດງຂອບຂອງເຂົາເຈົ້າຕໍ່ກັບອົງປະກອບຂອງພີ່ນ້ອງ.