ລະບົບຕາຂ່າຍ

ໃຊ້ຕາຂ່າຍ flexbox ມືຖືທີ່ມີປະສິດທິພາບທໍາອິດຂອງພວກເຮົາເພື່ອສ້າງໂຄງຮ່າງຂອງທຸກຮູບຮ່າງແລະຂະຫນາດຍ້ອນລະບົບສິບສອງຖັນ, ຫົກຊັ້ນຕອບສະຫນອງມາດຕະຖານ, Sass variables ແລະ mixins, ແລະຫຼາຍສິບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ລ່ວງຫນ້າ.

ໃນໜ້ານີ້

ຕົວຢ່າງ

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

ໃໝ່ ຫຼືບໍ່ຄຸ້ນເຄີຍກັບ flexbox? ອ່ານຄູ່ມື CSS Tricks 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-4spans ສີ່). widths ຖືກກໍານົດເປັນເປີເຊັນສະນັ້ນທ່ານສະເຫມີມີຂະຫນາດພີ່ນ້ອງດຽວກັນ.
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 ທີ່ທ່ານຕ້ອງການ ແລະທຸກຖັນຈະມີຄວາມກວ້າງດຽວກັນ.

1 ຈາກທັງໝົດ 2

2 ຈາກທັງໝົດ 2

1 ຈາກທັງໝົດ 3

2 ຈາກທັງໝົດ 3

3 ຈາກທັງໝົດ 3

<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, ຫຼືຄວາມກວ້າງໃນແຖວ. ໃຫ້ສັງເກດວ່າຖັນອື່ນໆຈະປັບຂະຫນາດບໍ່ວ່າຄວາມກວ້າງຂອງຖັນກາງ.

1 ຈາກທັງໝົດ 3

2 ຈາກທັງໝົດ 3 (ກວ້າງກວ່າ)

3 ຈາກທັງໝົດ 3

1 ຈາກທັງໝົດ 3

2 ຈາກທັງໝົດ 3 (ກວ້າງກວ່າ)

3 ຈາກທັງໝົດ 3

<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ຫ້ອງຮຽນເພື່ອຂະຫນາດຖັນໂດຍອີງໃສ່ຄວາມກວ້າງທໍາມະຊາດຂອງເນື້ອຫາຂອງພວກເຂົາ.

1 ຈາກທັງໝົດ 3

ເນື້ອໃນຄວາມກວ້າງຂອງຕົວແປ

3 ຈາກທັງໝົດ 3

1 ຈາກທັງໝົດ 3

ເນື້ອໃນຄວາມກວ້າງຂອງຕົວແປ

3 ຈາກທັງໝົດ 3

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

ຄໍ

ຄໍ-8

ຄໍ-4

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

col-sm-8

col-sm-4

col-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 ໃນຊັ້ນຕາຂ່າຍໄຟຟ້າບາງ? ໃຊ້ການປະສົມປະສານຂອງຊັ້ນຮຽນທີ່ແຕກຕ່າງກັນສໍາລັບແຕ່ລະຊັ້ນຕາມຄວາມຕ້ອງການ. ເບິ່ງຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບຄວາມຄິດທີ່ດີກວ່າຂອງວິທີການເຮັດວຽກທັງຫມົດ.

.col-md-8

.col-6 .col-md-4

.col-6

<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 ຖັນ).

ລະດັບ 1: .col-sm-3

ລະດັບ 2: .col-8 .col-sm-6

ລະດັບ 2: .col-4 .col-sm-6

<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, ຫຼື %).