ລະບົບຕາຂ່າຍ
ໃຊ້ຕາຂ່າຍ flexbox ມືຖືທີ່ມີປະສິດທິພາບທໍາອິດຂອງພວກເຮົາເພື່ອສ້າງໂຄງຮ່າງຂອງທຸກຮູບຮ່າງແລະຂະຫນາດຍ້ອນລະບົບສິບສອງຖັນ, ຫົກຊັ້ນຕອບສະຫນອງມາດຕະຖານ, Sass variables ແລະ mixins, ແລະຫຼາຍສິບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ລ່ວງຫນ້າ.
ຕົວຢ່າງ
ລະບົບຕາຂ່າຍໄຟຟ້າຂອງ Bootstrap ໃຊ້ຊຸດບັນຈຸ, ແຖວ, ແລະຖັນເພື່ອຈັດວາງ ແລະຈັດວາງເນື້ອຫາ. ມັນຖືກສ້າງຂຶ້ນດ້ວຍ flexbox ແລະຕອບສະຫນອງຢ່າງເຕັມສ່ວນ. ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງແລະຄໍາອະທິບາຍໃນຄວາມເລິກສໍາລັບວິທີການລະບົບຕາຂ່າຍໄຟຟ້າມາຮ່ວມກັນ.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
ຕົວຢ່າງຂ້າງເທິງນີ້ສ້າງສາມຖັນຄວາມກວ້າງເທົ່າກັນໃນທົ່ວທຸກອຸປະກອນ ແລະຊ່ອງເບິ່ງໂດຍນໍາໃຊ້ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າທີ່ກໍານົດໄວ້ກ່ອນຂອງພວກເຮົາ. ຖັນເຫຼົ່ານັ້ນແມ່ນຢູ່ເຄິ່ງກາງຂອງໜ້າດ້ວຍຫຼັກ .container
.
ມັນເຮັດວຽກແນວໃດ
ທໍາລາຍມັນ, ນີ້ແມ່ນວິທີການລະບົບຕາຂ່າຍໄຟຟ້າມາຮ່ວມກັນ:
-
ຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາຮອງ ຮັບ 6 ຈຸດຢຸດຕອບ ສະໜອງ . ຈຸດແບ່ງແມ່ນອີງໃສ່ການ
min-width
ສອບຖາມສື່, ຊຶ່ງຫມາຍ���ວາມວ່າພວກມັນມີຜົນກະທົບຕໍ່ຈຸດຢຸດນັ້ນ ແລະທັງໝົດຂ້າງເທິງນັ້ນ (ເຊັ່ນ:.col-sm-4
ໃຊ້ກັບsm
,md
,lg
,xl
, ແລະxxl
). ນີ້ຫມາຍຄວາມວ່າທ່ານສາມາດຄວບຄຸມຂະຫນາດບັນຈຸແລະຖັນແລະພຶດຕິກໍາໂດຍແຕ່ລະ breakpoint. -
ກາງຕູ້ຄອນເທນເນີ ແລະວາງອອກຕາມລວງນອນຂອງເນື້ອຫາຂອງທ່ານ. ໃຊ້
.container
ສໍາລັບຄວາມກວ້າງຂອງ pixels ລວງທີ່ຕອບສະຫນອງ,.container-fluid
ສໍາລັບwidth: 100%
ທຸກ viewports ແລະອຸປະກອນ, ຫຼື container ຕອບສະຫນອງ (ເຊັ່ນ,.container-md
) ສໍາລັບການປະສົມປະສານຂອງ fluid ແລະ pixel widths. -
ແຖວແມ່ນຫໍ່ສຳລັບຖັນ. ແຕ່ລະຖັນມີແນວນອນ
padding
(ເອີ້ນວ່າ gutter) ສໍາລັບການຄວບຄຸມຊ່ອງຫວ່າງລະຫວ່າງເຂົາເຈົ້າ. ອັນນີ້padding
ຈະຖືກຕ້ານກັບແຖວທີ່ມີຂອບທາງລົບເພື່ອຮັບປະກັນວ່າເນື້ອໃນໃນຖັນຂອງທ່ານຖືກຈັດຮຽງຕາມທາງສາຍຕາລົງທາງຊ້າຍ. ແຖວຍັງສະຫນັບສະຫນູນຫ້ອງຮຽນຕົວແກ້ໄຂເພື່ອ ນໍາໃຊ້ຂະຫນາດຖັນ ແລະ ຊັ້ນ gutter ເປັນເອກະພາບ ເພື່ອປ່ຽນໄລຍະຫ່າງຂອງເນື້ອຫາຂອງທ່ານ. -
ຖັນແມ່ນມີຄວາມຍືດຫຍຸ່ນຢ່າງບໍ່ຫນ້າເຊື່ອ. ມີ 12 ຖັນແມ່ແບບທີ່ມີຢູ່ຕໍ່ແຖວ, ຊ່ວຍໃຫ້ທ່ານສາມາດສ້າງການປະສົມປະສານທີ່ແຕກຕ່າງກັນຂອງອົງປະກອບທີ່ກວມເອົາຈໍານວນຄໍລໍາໃດໆ. ຫ້ອງຮຽນຖັນຊີ້ບອກຈໍານວນຂອງຖັນແມ່ແບບທີ່ຈະ span (ເຊັ່ນ:
col-4
spans ສີ່).width
s ຖືກກໍານົດເປັນເປີເຊັນສະນັ້ນທ່ານສະເຫມີມີຂະຫນາດພີ່ນ້ອງດຽວກັນ. -
Gutters ຍັງຕອບສະຫນອງແລະປັບແຕ່ງໄດ້. ຫ້ອງຮຽນ Gutter ແມ່ນມີຢູ່ ທົ່ວທຸກຈຸດພັກຜ່ອນ, ມີຂະຫນາດດຽວກັນກັບ ຂອບໃບ ແລະຊ່ອງຫວ່າງ ຂອງພວກເຮົາ . ປ່ຽນ gutters ແນວນອນກັບ
.gx-*
ຫ້ອງຮຽນ, gutters ຕັ້ງກັບ.gy-*
, ຫຼື gutters ທັງຫມົດທີ່ມີ.g-*
ຫ້ອງຮຽນ..g-0
ຍັງມີການເອົາ gutters. -
ຕົວແປ Sass, ແຜນທີ່, ແລະ mixins ເສີມສ້າງຕາຂ່າຍໄຟຟ້າ. ຖ້າຫາກວ່າທ່ານບໍ່ຕ້ອງການທີ່ຈະນໍາໃຊ້ຊັ້ນຕາຂ່າຍໄຟຟ້າທີ່ກໍານົດໄວ້ລ່ວງຫນ້າໃນ Bootstrap, ທ່ານສາມາດນໍາໃຊ້ Sass ແຫຼ່ງຕາຂ່າຍໄຟຟ້າ ຂອງພວກເຮົາ ເພື່ອສ້າງຂອງທ່ານເອງທີ່ມີ markup semantic ຫຼາຍ. ພວກເຮົາຍັງລວມເອົາຄຸນສົມບັດທີ່ກໍາຫນົດເອງ CSS ບາງຢ່າງເພື່ອບໍລິໂພກຕົວແປ Sass ເຫຼົ່ານີ້ເພື່ອຄວາມຍືດຫຍຸ່ນຫຼາຍກວ່າເກົ່າສໍາລັບທ່ານ.
ຈົ່ງຮູ້ເຖິງຂໍ້ຈຳກັດ ແລະ ຂໍ້ບົກພ່ອງຕ່າງໆຢູ່ອ້ອມແອ້ມ flexbox , ເຊັ່ນຄວາມ ບໍ່ສາມາດນຳໃຊ້ບາງອົງປະກອບ HTML ເປັນ flex containers .
ຕົວເລືອກຕາຕະລາງ
ລະບົບຕາໜ່າງຂອງ Bootstrap ສາມາດປັບຕົວໄດ້ທົ່ວທັງ 6 ຈຸດແບ່ງຂັ້ນຕົ້ນ, ແລະຈຸດຢຸດຕ່າງໆທີ່ທ່ານປັບແຕ່ງ. ຫົກຊັ້ນຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນມີດັ່ງນີ້:
- ນ້ອຍພິເສດ (xs)
- ຂະໜາດນ້ອຍ (sm)
- ປານກາງ (md)
- ໃຫຍ່ (lg)
- ຂະໜາດໃຫຍ່ພິເສດ (xl)
- ຂະໜາດໃຫຍ່ພິເສດ (xxl)
ດັ່ງທີ່ໄດ້ກ່າວໄວ້ຂ້າງເທິງ, ແຕ່ລະຈຸດແບ່ງເຫຼົ່ານີ້ມີບັນຈຸຂອງຕົນເອງ, ຄໍານໍາຫນ້າຂອງຊັ້ນທີ່ເປັນເອກະລັກ, ແລະຕົວແກ້ໄຂ. ນີ້ແມ່ນວິທີທີ່ຕາຕະລາງປ່ຽນແປງໃນທົ່ວຈຸດແບ່ງເຫຼົ່ານີ້:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
ຕູ້ຄອນເທນເນີmax-width |
ບໍ່ມີ (ອັດຕະໂນມັດ) | 540px | 720px | 960px | 1140px | 1320px |
ຄຳນຳໜ້າຫ້ອງຮຽນ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# ຂອງຖັນ | 12 | |||||
ຄວາມກວ້າງຂອງ Gutter | 1.5rem (.75rem ຊ້າຍແລະຂວາ) | |||||
gutters ແບບກໍາຫນົດເອງ | ແມ່ນແລ້ວ | |||||
ຮັງ | ແມ່ນແລ້ວ | |||||
ການສັ່ງຖັນ | ແມ່ນແລ້ວ |
ຖັນການຈັດວາງອັດຕະໂນມັດ
ໃຊ້ຄລາສຖັນສະເພາະຈຸດແບ່ງຈຸດເພື່ອປັບຂະໜາດຖັນງ່າຍ ໂດຍບໍ່ມີຊັ້ນເລກທີ່ຊັດເຈນເຊັ່ນ .col-sm-6
.
ຄວາມກວ້າງເທົ່າກັນ
ຕົວຢ່າງ, ນີ້ແມ່ນສອງຮູບແບບຕາຂ່າຍໄຟຟ້າທີ່ໃຊ້ກັບທຸກອຸປະກອນ ແລະຊ່ອງເບິ່ງ, ຈາກ xs
ໄປຫາ xxl
. ຕື່ມການຈໍານວນຫົວໜ່ວຍຫນ້ອຍລົງສໍາລັບແຕ່ລະ breakpoint ທີ່ທ່ານຕ້ອງການ ແລະທຸກຖັນຈະມີຄວາມກວ້າງດຽວກັນ.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ກໍານົດຄວາມກວ້າງຫນຶ່ງຖັນ
ແຜນຜັງອັດຕະໂນມັດສໍາລັບຖັນຕາຂ່າຍໄຟຟ້າ flexbox ຍັງຫມາຍຄວາມວ່າທ່ານສາມາດກໍານົດຄວາມກວ້າງຂອງຖັນຫນຶ່ງແລະໃຫ້ຖັນພີ່ນ້ອງປັບຂະຫນາດອັດຕະໂນມັດອ້ອມຮອບມັນ. ທ່ານສາມາດນໍາໃຊ້ຫ້ອງຮຽນຕາຕະລາງທີ່ກໍານົດໄວ້ລ່ວງຫນ້າ (ດັ່ງທີ່ສະແດງຂ້າງລຸ່ມນີ້), ຕາຕະລາງ mixins, ຫຼືຄວາມກວ້າງໃນແຖວ. ໃຫ້ສັງເກດວ່າຖັນອື່ນໆຈະປັບຂະຫນາດບໍ່ວ່າຄວາມກວ້າງຂອງຖັນກາງ.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ເນື້ອໃນຄວາມກວ້າງຂອງຕົວແປ
ໃຊ້ col-{breakpoint}-auto
ຫ້ອງຮຽນເພື່ອຂະຫນາດຖັນໂດຍອີງໃສ່ຄວາມກວ້າງທໍາມະຊາດຂອງເນື້ອຫາຂອງພວກເຂົາ.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
ຫ້ອງຮຽນທີ່ຕອບສະຫນອງ
ຕາຂ່າຍໄຟຟ້າຂອງ Bootstrap ປະກອບມີຫົກຊັ້ນຂອງຊັ້ນຮຽນທີ່ໄດ້ກໍານົດໄວ້ລ່ວງໜ້າສໍາລັບການສ້າງໂຄງຮ່າງການຕອບສະໜອງທີ່ຊັບຊ້ອນ. ປັບຂະຫນາດຂອງຖັນຂອງທ່ານຢູ່ໃນອຸປະກອນຂະຫນາດນ້ອຍພິເສດ, ຂະຫນາດນ້ອຍ, ຂະຫນາດກາງ, ຂະຫນາດໃຫຍ່, ຫຼືຂະຫນາດໃຫຍ່ພິເສດຢ່າງໃດກໍຕາມທີ່ທ່ານເຫັນວ່າເຫມາະ.
ຈຸດຢຸດທັງໝົດ
ສໍາລັບຕາຂ່າຍໄຟຟ້າທີ່ຄືກັນຈາກອຸປະກອນຂະຫນາດນ້ອຍສຸດໄປຫາໃຫຍ່ທີ່ສຸດ, ໃຫ້ໃຊ້ .col
ແລະ .col-*
ຫ້ອງຮຽນ. ລະບຸຫ້ອງຮຽນທີ່ມີຕົວເລກໃນເວລາທີ່ທ່ານຕ້ອງການຖັນທີ່ມີຂະຫນາດໂດຍສະເພາະ; ຖ້າບໍ່ດັ່ງນັ້ນ, ຮູ້ສຶກວ່າບໍ່ເສຍຄ່າທີ່ຈະຕິດກັບ .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
stacked ກັບແນວນອນ
ການນໍາໃຊ້ຊຸດດຽວຂອງ .col-sm-*
ຫ້ອງຮຽນ, ທ່ານສາມາດສ້າງລະບົບຕາຂ່າຍໄຟຟ້າຂັ້ນພື້ນຖານທີ່ຈະເລີ່ມຕົ້ນອອກ stacked ແລະກາຍເປັນອອກຕາມລວງນອນຢູ່ໃນຈຸດແບ່ງແຍກຂະຫນາດນ້ອຍ ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
ປະສົມແລະຈັບຄູ່
ບໍ່ຕ້ອງການຄໍລໍາຂອງທ່ານພຽງແຕ່ stack ໃນຊັ້ນຕາຂ່າຍໄຟຟ້າບາງ? ໃຊ້ການປະສົມປະສານຂອງຊັ້ນຮຽນທີ່ແຕກຕ່າງກັນສໍາລັບແຕ່ລະຊັ້ນຕາມຄວາມຕ້ອງການ. ເບິ່ງຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບຄວາມຄິດທີ່ດີກວ່າຂອງວິທີການເຮັດວຽກທັງຫມົດ.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
ຖັນແຖວ
ໃຊ້ .row-cols-*
ຫ້ອງຮຽນທີ່ຕອບສະໜອງເພື່ອກຳນົດຈຳນວນຖັນທີ່ສະແດງເນື້ອຫາ ແລະໂຄງຮ່າງຂອງທ່ານໄດ້ໄວທີ່ສຸດ. ໃນຂະນະທີ່ .col-*
ຊັ້ນຮຽນປົກກະຕິໃຊ້ກັບແຕ່ລະຖັນ (ເຊັ່ນ, .col-md-4
), ຫ້ອງຮຽນຖັນແຖວຖືກຕັ້ງຢູ່ເທິງຫຼັກ .row
ເປັນຄ່າເລີ່ມຕົ້ນຂອງຖັນບັນຈຸ. ກັບ .row-cols-auto
ທ່ານສາມາດໃຫ້ຖັນຄວາມກວ້າງທໍາມະຊາດຂອງເຂົາເຈົ້າ.
ໃຊ້ຫ້ອງຮຽນຖັນແຖວເຫຼົ່ານີ້ເພື່ອສ້າງໂຄງຮ່າງຕາໜ່າງພື້ນຖານຢ່າງວ່ອງໄວ ຫຼືເພື່ອຄວບຄຸມການຈັດວາງບັດຂອງເຈົ້າ ແລະທັບຊ້ອນເມື່ອຈຳເປັນໃນລະດັບຖັນ.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
ທ່ານຍັງສາມາດໃຊ້ Sass mixin ທີ່ມາພ້ອມກັບ, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
ຮັງ
ເພື່ອວາງເນື້ອຫາຂອງທ່ານດ້ວຍຕາຂ່າຍເລີ່ມຕົ້ນ, ໃຫ້ເພີ່ມຖັນໃໝ່ .row
ແລະຊຸດຂອງ .col-sm-*
ຖັນພາຍໃນຖັນທີ່ມີຢູ່ແລ້ວ .col-sm-*
. ແຖວທີ່ຊ້ອນກັນຄວນປະກອບມີຊຸດຂອງຖັນທີ່ເພີ່ມສູງສຸດ 12 ຫຼືໜ້ອຍກວ່ານັ້ນ (ມັນບໍ່ຈຳເປັນທີ່ທ່ານໃຊ້ທັງໝົດ 12 ຖັນ).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
ຊາສ
ເມື່ອໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງ Bootstrap, ທ່ານມີທາງເລືອກທີ່ຈະໃຊ້ຕົວແປ Sass ແລະ mixins ເພື່ອສ້າງຫນ້າ custom, semantic, ແລະຕອບສະຫນອງ. ຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າຂອງພວກເຮົາໃຊ້ຕົວແປ ແລະ mixins ດຽວກັນເຫຼົ່ານີ້ເພື່ອສະໜອງຊຸດຊັ້ນຮຽນທີ່ພ້ອມນຳໃຊ້ທັງໝົດສຳລັບການຈັດວາງທີ່ຕອບສະໜອງໄວ.
ຕົວແປ
ຕົວແປ ແລະແຜນທີ່ກຳນົດຈຳນວນຖັນ, ຄວາມກວ້າງຂອງທໍ່ນ້ຳ, ແລະຈຸດສອບຖາມສື່ທີ່ຈະເລີ່ມຖັນລອຍ. ພວກເຮົາໃຊ້ສິ່ງເຫຼົ່ານີ້ເພື່ອສ້າງຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າໃນເອກະສານຂ້າງເທິງ, ເຊັ່ນດຽວກັນກັບເຄື່ອງປະສົມແບບກຳນົດເອງທີ່ລະບຸໄວ້ຂ້າງລຸ່ມນີ້.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
ມິກຊິນ
Mixins ຖືກໃຊ້ຮ່ວມກັບຕົວແປຕາຕະລາງເພື່ອສ້າງ CSS semantic ສໍາລັບຖັນຕາຂ່າຍໄຟຟ້າສ່ວນບຸກຄົນ.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
ຕົວຢ່າງການນໍາໃຊ້
ທ່ານສາມາດດັດແປງຕົວແປໃຫ້ກັບຄ່າທີ່ກໍາຫນົດເອງຂອງທ່ານເອງ, ຫຼືພຽງແຕ່ໃຊ້ mixins ກັບຄ່າເລີ່ມຕົ້ນຂອງພວກມັນ. ນີ້ແມ່ນຕົວຢ່າງຂອງການໃຊ້ການຕັ້ງຄ່າເລີ່ມຕົ້ນເພື່ອສ້າງຮູບແບບສອງຖັນທີ່ມີຊ່ອງຫວ່າງລະຫວ່າງ.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ການປັບແຕ່ງຕາຂ່າຍໄຟຟ້າ
ການນໍາໃຊ້ຕົວແປແລະແຜນທີ່ Sass ທີ່ມີຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ, ມັນເປັນໄປໄດ້ທີ່ຈະປັບແຕ່ງຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າທີ່ກໍານົດໄວ້ລ່ວງຫນ້າຢ່າງສົມບູນ. ປ່ຽນຈຳນວນຂອງຊັ້ນ, ຂະໜາດການສອບຖາມສື່, ແລະຄວາມກວ້າງຂອງບັນຈຸ - ຈາກນັ້ນປະກອບຄືນໃໝ່.
ຖັນ ແລະ gutters
ຈໍານວນຂອງຖັນຕາຂ່າຍໄຟຟ້າສາມາດໄດ້ຮັບການແກ້ໄຂໂດຍຜ່ານຕົວແປ Sass. $grid-columns
ຖືກນໍາໃຊ້ເພື່ອສ້າງຄວາມກວ້າງ (ເປັນເປີເຊັນ) ຂອງແຕ່ລະຖັນສ່ວນບຸກຄົນໃນຂະນະທີ່ $grid-gutter-width
ກໍານົດຄວາມກວ້າງສໍາລັບ gutters ຖັນ.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
ຊັ້ນຕາຂ່າຍ
ຍ້າຍອອກໄປນອກຖັນຕົວມັນເອງ, ເຈົ້າອາດຈະປັບແຕ່ງຈຳນວນຂອງຕາຂ່າຍໄຟຟ້າໄດ້. ຖ້າທ່ານຕ້ອງການພຽງແຕ່ສີ່ຊັ້ນຕາຫນ່າງ, ທ່ານຕ້ອງການປັບປຸງ $grid-breakpoints
ແລະ $container-max-widths
ບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
ເມື່ອປ່ຽນແປງຕົວແປ Sass ຫຼືແຜນທີ່, ທ່ານຈະຕ້ອງບັນທຶກການປ່ຽນແປງຂອງທ່ານແລະລວບລວມຄືນໃຫມ່. ການເຮັດແນວນັ້ນຈະອອກຊຸດໃໝ່ຂອງຊັ້ນຕາຂ່າຍທີ່ກຳນົດໄວ້ລ່ວງໜ້າສຳລັບຄວາມກວ້າງຂອງຖັນ, ຄ່າຊົດເຊີຍ ແລະການຈັດລຳດັບ. ເຄື່ອງມືການເບິ່ງເຫັນແບບຕອບສະໜອງຍັງຈະຖືກອັບເດດເພື່ອໃຊ້ຈຸດຢຸດທີ່ກຳນົດເອງ. ໃຫ້ແນ່ໃຈວ່າໄດ້ກໍານົດຄ່າ grid ໃນ px
(ບໍ່ rem
, em
, ຫຼື %
).