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

ລະບົບຕາຂ່າຍ

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

ຕົວຢ່າງ

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

ໃໝ່ ຫຼືບໍ່ຄຸ້ນເຄີຍກັບ flexbox? ອ່ານຄູ່ມື CSS Tricks flexbox ນີ້ ສໍາລັບພື້ນຖານ, ຄໍາສັບ, ຄໍາແນະນໍາ, ແລະຕົວຢ່າງຂອງລະຫັດ.
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
html
<div class="container text-center">
  <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
col-sm
col-sm
html
<div class="container text-center">
  <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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
html
<div class="container text-center">
  <!-- 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ທ່ານສາມາດໃຫ້ຖັນຄວາມກວ້າງທໍາມະຊາດຂອງເຂົາເຈົ້າ.

ໃຊ້ຫ້ອງຮຽນຖັນແຖວເຫຼົ່ານີ້ເພື່ອສ້າງໂຄງຮ່າງຕາໜ່າງພື້ນຖານຢ່າງວ່ອງໄວ ຫຼືເພື່ອຄວບຄຸມການຈັດວາງບັດຂອງເຈົ້າ.

ຖັນ
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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>
ຖັນ
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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>
ຖັນ
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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>
ຖັນ
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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>
ຖັນ
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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>
ຖັນ
ຖັນ
ຖັນ
ຖັນ
html
<div class="container text-center">
  <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>

ທ່ານຍັງສາມາດໃຊ້ 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
html
<div class="container text-center">
  <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-row-columns:  6;
$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);

// Offset with margins
@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);
  }
}
ເນື້ອໃນຕົ້ນຕໍ
ເນື້ອໃນຮອງ
html
<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-row-columnsຖືກນໍາໃຊ້ເພື່ອກໍານົດຈໍານວນສູງສຸດຂອງຖັນຂອງ .row-cols-*, ຕົວເລກໃດໆທີ່ເກີນຂອບເຂດຈໍາກັດນີ້ຈະຖືກລະເລີຍ.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, ຫຼື %).