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