ຈຸດພັກຜ່ອນ
Breakpoints ແມ່ນຄວາມກວ້າງທີ່ສາມາດປັບແຕ່ງໄດ້ທີ່ກໍານົດວ່າຮູບແບບການຕອບສະຫນອງຂອງທ່ານປະຕິບັດແນວໃດໃນທົ່ວອຸປະກອນຫຼືຂະຫນາດ viewport ໃນ Bootstrap.
ແນວຄວາມຄິດຫຼັກ
-
ຈຸດແບ່ງແມ່ນຕົວສ້າງຂອງການອອກແບບທີ່ຕອບສະຫນອງ. ໃຊ້ພວກມັນເພື່ອຄວບຄຸມເວລາທີ່ໂຄງຮ່າງຂອງທ່ານສາມາດປັບຕົວໄດ້ໃນຊ່ອງເບິ່ງ ຫຼືຂະໜາດອຸປະກອນສະເພາະ.
-
ໃຊ້ການສອບຖາມສື່ເພື່ອອອກແບບ CSS ຂອງທ່ານໂດຍຈຸດຢຸດ. ການສອບຖາມສື່ແມ່ນຄຸນສົມບັດຂອງ CSS ທີ່ອະນຸຍາດໃຫ້ທ່ານນຳໃຊ້ຮູບແບບຕາມເງື່ອນໄຂໂດຍອີງໃສ່ຊຸດຂອງຕົວທ່ອງເວັບ ແລະຕົວກໍານົດການຂອງລະບົບປະຕິບັດການ. ພວກເຮົາໃຊ້ຫຼາຍທີ່ສຸດ
min-width
ໃນການສອບຖາມສື່ຂອງພວກເຮົາ. -
ມືຖືທໍາອິດ, ການອອກແບບຕອບສະຫນອງແມ່ນເປົ້າຫມາຍ. CSS ຂອງ Bootstrap ມີຈຸດປະສົງເພື່ອນໍາໃຊ້ຮູບແບບຕໍາ່ສຸດທີ່ເປົ່າເພື່ອເຮັດໃຫ້ໂຄງຮ່າງເຮັດວຽກຢູ່ໃນຈຸດແບ່ງຂັ້ນນ້ອຍທີ່ສຸດ, ແລະຫຼັງຈາກນັ້ນວາງຊັ້ນໃນຮູບແບບຕ່າງໆເພື່ອປັບການອອກແບບນັ້ນສໍາລັບອຸປະກອນຂະຫນາດໃຫຍ່. ນີ້ເພີ່ມປະສິດທິພາບ CSS ຂອງທ່ານ, ປັບປຸງເວລາການສະແດງຜົນ, ແລະໃຫ້ປະສົບການທີ່ດີສໍາລັບຜູ້ມາຢ້ຽມຢາມຂອງທ່ານ.
ຈຸດຢຸດທີ່ມີຢູ່
Bootstrap ປະກອບມີ 6 ຈຸດຢຸດເລີ່ມຕົ້ນ, ບາງຄັ້ງເອີ້ນວ່າ grid tiers , ສໍາລັບການກໍ່ສ້າງທີ່ຕອບສະຫນອງ. ຈຸດແບ່ງເຫຼົ່ານີ້ສາມາດປັບແຕ່ງໄດ້ຫາກເຈົ້າກຳລັງໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາ.
ຈຸດພັກຜ່ອນ | ໝວດໝູ່ | ຂະໜາດ |
---|---|---|
X-ນ້ອຍ | ບໍ່ມີ | <576px |
ຂະຫນາດນ້ອຍ | sm |
≥576px |
ຂະຫນາດກາງ | md |
≥768px |
ຂະຫນາດໃຫຍ່ | lg |
≥992px |
ຂະຫນາດໃຫຍ່ພິເສດ | xl |
≥1200px |
ຂະຫນາດໃຫຍ່ພິເສດ | xxl |
≥1400px |
ແຕ່ລະ breakpoint ໄດ້ຖືກເລືອກໃຫ້ສະດວກສະບາຍໃນການເກັບພາຊະນະທີ່ມີຄວາມກວ້າງຂອງຕົວຄູນ 12. Breakpoints ຍັງເປັນຕົວແທນຂອງຊຸດຍ່ອຍຂອງຂະຫນາດອຸປະກອນທົ່ວໄປແລະຂະຫນາດ viewport - ພວກມັນບໍ່ໄດ້ກໍານົດເປົ້າຫມາຍໂດຍສະເພາະທຸກໆກໍລະນີທີ່ໃຊ້ຫຼືອຸປະກອນ. ແທນທີ່ຈະ, ຂອບເຂດສະຫນອງພື້ນຖານທີ່ເຂັ້ມແຂງແລະສອດຄ່ອງເພື່ອສ້າງສໍາລັບເກືອບທຸກອຸປະກອນ.
ຈຸດແບ່ງເຫຼົ່ານີ້ສາມາດປັບແຕ່ງໄດ້ຜ່ານ Sass—ເຈົ້າຈະພົບເຫັນພວກມັນຢູ່ໃນແຜນທີ່ Sass ໃນແຜ່ນສະໄຕລ ໌ຂອງພວກເຮົາ _variables.scss
.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມແລະຕົວຢ່າງກ່ຽວກັບວິທີການແກ້ໄຂແຜນທີ່ Sass ແລະຕົວແປຂອງພວກເຮົາ, ກະລຸນາເບິ່ງ ພາກ Sass ຂອງເອກະສານ Grid .
ຄໍາຖາມສື່ມວນຊົນ
ເນື່ອງຈາກ Bootstrap ຖືກພັດທະນາໃຫ້ເປັນມືຖືກ່ອນ, ພວກເຮົາໃຊ້ການ ສອບຖາມສື່ ຈຳນວນໜຶ່ງ ເພື່ອສ້າງຈຸດແບ່ງທີ່ເໝາະສົມສຳລັບການຈັດວາງ ແລະສ່ວນຕິດຕໍ່ຂອງພວກເຮົາ. ຈຸດແບ່ງເຫຼົ່ານີ້ສ່ວນຫຼາຍແມ່ນອີງໃສ່ຄວາມກວ້າງຂອງຊ່ອງເບິ່ງຕໍາ່ສຸດທີ່ແລະອະນຸຍາດໃຫ້ພວກເຮົາຂະຫຍາຍອົງປະກອບໃນຂະນະທີ່ viewport ປ່ຽນແປງ.
ຄວາມກວ້າງຕ່ຳສຸດ
Bootstrap ຕົ້ນຕໍແມ່ນໃຊ້ຂອບເຂດການສອບຖາມສື່ຕໍ່ໄປນີ້ - ຫຼືຈຸດຢຸດ - ໃນໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາສໍາລັບໂຄງຮ່າງ, ລະບົບຕາຂ່າຍໄຟຟ້າແລະອົງປະກອບຂອງພວກເຮົາ.
// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage
// 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;
}
}
Sass mixins ເຫຼົ່ານີ້ແປໃນ CSS ທີ່ລວບລວມຂອງພວກເຮົາໂດຍໃຊ້ຄ່າທີ່ປະກາດຢູ່ໃນຕົວແປ Sass ຂອງພວກເຮົາ. ຍົກຕົວຢ່າງ:
// X-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) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
ຄວາມກວ້າງສູງສຸດ
ບາງຄັ້ງພວກເຮົາໃຊ້ການສອບຖາມສື່ທີ່ໄປໃນທິດທາງອື່ນ (ຂະຫນາດຫນ້າຈໍທີ່ໃຫ້ ຫຼືນ້ອຍກວ່າ ):
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
ປະສົມເຫຼົ່ານີ້ເອົາຈຸດຢຸດທີ່ປະກາດໄວ້, ລົບອອກ .02px
ຈາກພວກມັນ, ແລະໃຊ້ພວກມັນເປັນ max-width
ຄຸນຄ່າຂອງພວກເຮົາ. ຍົກຕົວຢ່າງ:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
min-
ແລະ max-
viewports ທີ່ມີຄວາມກວ້າງແຕ່ສ່ວນຫນຶ່ງ (ຊຶ່ງສາມາດເກີດຂຶ້ນໄດ້ພາຍໃຕ້ເງື່ອນໄຂສະເພາະໃດຫນຶ່ງໃນອຸປະກອນ dpi ສູງ, ສໍາລັບການຍົກຕົວຢ່າງ) ໂດຍການນໍາໃຊ້ຄ່າທີ່ມີຄວາມແມ່ນຍໍາສູງ.
ຈຸດຢຸດດຽວ
ນອກນັ້ນຍັງມີການສອບຖາມສື່ ແລະ 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) { ... }
@include media-breakpoint-only(xxl) { ... }
ສໍາລັບຕົວຢ່າງ, @include media-breakpoint-only(md) { ... }
ມັນຈະສົ່ງຜົນໃຫ້:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
ລະຫວ່າງຈຸດຢຸດ
ເຊັ່ນດຽວກັນ, ການສອບຖາມສື່ອາດຈະຂະຫຍາຍຄວາມກວ້າງຂອງ breakpoint ຫຼາຍ:
@include media-breakpoint-between(md, xl) { ... }
ເຊິ່ງຜົນໄດ້ຮັບໃນ:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }