ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

ຈຸດພັກຜ່ອນ

Breakpoints ແມ່ນຄວາມກວ້າງທີ່ສາມາດປັບແຕ່ງໄດ້ທີ່ກໍານົດວ່າຮູບແບບການຕອບສະຫນອງຂອງທ່ານປະຕິບັດແນວໃດໃນທົ່ວອຸປະກອນຫຼືຂະຫນາດ viewport ໃນ Bootstrap.

ແນວຄວາມຄິດຫຼັກ

  • ຈຸດແບ່ງແມ່ນຕົວສ້າງຂອງການອອກແບບທີ່ຕອບສະຫນອງ. ໃຊ້ພວກມັນເພື່ອຄວບຄຸມເວລາທີ່ໂຄງຮ່າງຂອງທ່ານສາມາດປັບຕົວໄດ້ໃນຊ່ອງເບິ່ງ ຫຼືຂະໜາດອຸປະກອນສະເພາະ.

  • ໃຊ້ການສອບຖາມສື່ເພື່ອອອກແບບ CSS ຂອງທ່ານໂດຍຈຸດຢຸດ. ການສອບຖາມສື່ແມ່ນຄຸນສົມບັດຂອງ CSS ທີ່ອະນຸຍາດໃຫ້ທ່ານນຳໃຊ້ຮູບແບບຕາມເງື່ອນໄຂໂດຍອີງໃສ່ຊຸດຂອງຕົວທ່ອງເວັບ ແລະຕົວກໍານົດການຂອງລະບົບປະຕິບັດການ. ພວກເຮົາໃຊ້ຫຼາຍທີ່ສຸດ min-widthໃນການສອບຖາມສື່ຂອງພວກເຮົາ.

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

ຈຸດຢຸດທີ່ມີຢູ່

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

ຈຸດພັກຜ່ອນ ໝວດໝູ່ ຂະໜາດ
ຂະຫນາດນ້ອຍພິເສດ ບໍ່ມີ <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) { ... }
ເປັນຫຍັງຕ້ອງລົບ .02px? ປະຈຸບັນຕົວທ່ອງເວັບບໍ່ຮອງຮັບ ການສອບຖາມ ບໍລິບົດໄລຍະ , ດັ່ງນັ້ນພວກເຮົາເຮັດວຽກກ່ຽວກັບຂໍ້ຈໍາກັດຂອງ ຄໍານໍາຫນ້າ 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) { ... }