Source

ລະບົບຕາຂ່າຍ

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

ມັນເຮັດວຽກແນວໃດ

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

ໃໝ່ ຫຼືບໍ່ຄຸ້ນເຄີຍກັບ flexbox? ອ່ານຄູ່ມື CSS Tricks flexbox ນີ້ ສໍາລັບພື້ນຖານ, ຄໍາສັບ, ຄໍາແນະນໍາ, ແລະຕົວຢ່າງຂອງລະຫັດ.

ຫນຶ່ງໃນສາມຖັນ

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

ການທໍາລາຍມັນ, ນີ້ແມ່ນວິທີການເຮັດວຽກ:

ຕູ້ຄອນເທນເນີສະຫນອງວິທີການສູນກາງແລະຢຽດຕາມລວງນອນ pad ເນື້ອໃນຂອງເວັບໄຊທ໌ຂອງທ່ານ. ໃຊ້ .containerສໍາລັບຄວາມກວ້າງຂອງ pixels ລວງທີ່ຕອບສະຫນອງຫຼື .container-fluidສໍາລັບ width: 100%ທຸກ viewport ແລະຂະຫນາດອຸປະກອນ.
ແຖວແມ່ນຫໍ່ສຳລັບຖັນ. ແຕ່ລະຖັນມີແນວນອນ padding(ເອີ້ນວ່າ gutter) ສໍາລັບການຄວບຄຸມຊ່ອງຫວ່າງລະຫວ່າງເຂົາເຈົ້າ. ອັນນີ້ paddingຈະຖືກຕ້ານກັບແຖວທີ່ມີຂອບທາງລົບ. ດ້ວຍວິທີນີ້, ເນື້ອຫາທັງໝົດໃນຖັນຂອງເຈົ້າຖືກຈັດຮຽງຕາມທາງສາຍຕາລົງທາງຊ້າຍ.
ໃນການຈັດວາງຕາໜ່າງ, ເນື້ອຫາຕ້ອງຖືກວາງໄວ້ພາຍໃນຖັນ ແລະສະເພາະຖັນເທົ່ານັ້ນທີ່ອາດຈະເປັນລູກແຖວທັນທີ.
ຂໍຂອບໃຈກັບ flexbox, ຖັນຕາຂ່າຍໄຟຟ້າໂດຍບໍ່ມີການກໍານົດ widthຈະຈັດວາງອັດຕະໂນມັດເປັນຖັນຄວາມກວ້າງເທົ່າທຽມກັນ. ຕົວຢ່າງ, ສີ່ຕົວຢ່າງຂອງ .col-smແຕ່ລະອັດຕະໂນມັດຈະກວ້າງ 25% ຈາກຈຸດແບ່ງຂັ້ນນ້ອຍຂຶ້ນໄປ. ເບິ່ງ ພາກສ່ວນ ຖັນການຈັດວາງອັດຕະໂນມັດ ສຳລັບຕົວຢ່າງເພີ່ມເຕີມ.
ຖັນແຖວສະແດງເຖິງຈຳນວນຖັນທີ່ເຈົ້າຕ້ອງການໃຊ້ຈາກ 12 ແຖວທີ່ເປັນໄປໄດ້. ດັ່ງນັ້ນ, ຖ້າທ່ານຕ້ອງການສາມຖັນທີ່ມີຄວາມກວ້າງເທົ່າທຽມກັນ, ທ່ານສາມາດນໍາໃຊ້ .col-4.
ຖັນ widths ຖືກຕັ້ງເປັນເປີເຊັນ, ສະນັ້ນພວກມັນມີຄວາມຄ່ອງຕົວ ແລະຂະໜາດສະເໝີກັບອົງປະກອບຫຼັກຂອງເຂົາເຈົ້າ.
ຖັນມີລວງນອນ paddingເພື່ອສ້າງທໍ່ລະຫວ່າງຖັນແຕ່ລະແຖວ, ແນວໃດກໍ່ຕາມ, ທ່ານສາມາດເອົາອອກ marginຈາກແຖວແລະ paddingຈາກຖັນທີ່ມີ .no-guttersຢູ່ເທິງ .row.
ເພື່ອເຮັດໃຫ້ຕາໜ່າງຕອບສະໜອງ, ມີຫ້າຈຸດແບ່ງຕາຂ່າຍ, ໜຶ່ງຈຸດສຳລັບແຕ່ລະ ຈຸດແບ່ງການຕອບສະ ໜອງ: ຈຸດ ແບ່ງທັງໝົດ (ນ້ອຍພິເສດ), ນ້ອຍ, ກາງ, ໃຫຍ່, ແລະໃຫຍ່ພິເສດ.
ຈຸດແບ່ງຕາຂ່າຍແມ່ນອີງໃສ່ການສອບຖາມສື່ຄວາມກວ້າງຕໍ່າສຸດ, ຊຶ່ງຫມາຍຄວາມວ່າ ພວກມັນໃຊ້ກັບຈຸດແບ່ງຈຸດນັ້ນ ແລະທັງໝົດຂ້າງເທິງນັ້ນ (ເຊັ່ນ: .col-sm-4ໃຊ້ກັບອຸປະກອນຂະໜາດນ້ອຍ, ກາງ, ຂະໜາດໃຫຍ່ ແລະຂະໜາດໃຫຍ່ພິເສດ, ແຕ່ບໍ່ແມ່ນຈຸດແບ່ງຂັ້ນທຳອິດ xs).
ທ່ານສາມາດນໍາໃຊ້ຫ້ອງຕາລາງກໍານົດໄວ້ລ່ວງຫນ້າ (ເຊັ່ນ: .col-4) ຫຼື Sass mixins ສໍາລັບການ markup semantic ຫຼາຍ.

ຈົ່ງຮູ້ເຖິງຂໍ້ຈຳກັດ ແລະ ຂໍ້ບົກພ່ອງຕ່າງໆຢູ່ອ້ອມແອ້ມ flexbox , ເຊັ່ນຄວາມ ບໍ່ສາມາດນຳໃຊ້ບາງອົງປະກອບ HTML ເປັນ flex containers .

ຕົວເລືອກຕາຕະລາງ

ໃນຂະນະທີ່ Bootstrap ໃຊ້ ems ຫຼື rems ສໍາລັບກໍານົດຂະຫນາດສ່ວນໃຫຍ່, pxs ແມ່ນໃຊ້ສໍາລັບ breakpoints ຕາຂ່າຍໄຟຟ້າແລະຄວາມກວ້າງຂອງ container. ນີ້ແມ່ນຍ້ອນວ່າຄວາມກວ້າງຂອງ viewport ຢູ່ໃນ pixels ແລະບໍ່ປ່ຽນແປງກັບ ຂະຫນາດຕົວອັກສອນ .

ເບິ່ງວ່າລະບົບຕາຂ່າຍ Bootstrap ເຮັດວຽກແນວໃດໃນທົ່ວອຸປະກອນຕ່າງໆດ້ວຍຕາຕະລາງທີ່ມີປະໂຫຍດ.

	ຂະຫນາດນ້ອຍພິເສດ <576px	ຂະໜາດນ້ອຍ ≥576px	ຂະຫນາດກາງ ≥768px	ຂະໜາດໃຫຍ່ ≥992px	ຂະໜາດໃຫຍ່ພິເສດ ≥1200px
ຄວາມກວ້າງຂອງບັນຈຸສູງສຸດ	ບໍ່ມີ (ອັດຕະໂນມັດ)	540px	720px	960px	1140px
ຄຳນຳໜ້າຫ້ອງຮຽນ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ຂອງຖັນ	12
ຄວາມກວ້າງຂອງ Gutter	30px (15px ໃນແຕ່ລະດ້ານຂອງຖັນ)
ຮັງ	ແມ່ນແລ້ວ
ການສັ່ງຖັນ	ແມ່ນແລ້ວ

ຖັນການຈັດວາງອັດຕະໂນມັດ

ໃຊ້ຄລາສຖັນສະເພາະຈຸດແບ່ງຈຸດເພື່ອປັບຂະໜາດຖັນງ່າຍ ໂດຍບໍ່ມີຊັ້ນເລກທີ່ຊັດເຈນເຊັ່ນ .col-sm-6.

ຄວາມກວ້າງເທົ່າກັນ

ຕົວຢ່າງ, ນີ້ແມ່ນສອງຮູບແບບຕາຂ່າຍໄຟຟ້າທີ່ໃຊ້ກັບທຸກອຸປະກອນ ແລະຊ່ອງເບິ່ງ, ຈາກ xsໄປຫາ xl. ຕື່ມການຈໍານວນຫົວໜ່ວຍຫນ້ອຍລົງສໍາລັບແຕ່ລະ 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>

ຄວາມກວ້າງເທົ່າກັນຫຼາຍເສັ້ນ

ສ້າງຖັນທີ່ມີຄວາມກວ້າງເທົ່າກັນທີ່ຂະຫຍາຍຫຼາຍແຖວໂດຍການໃສ່ .w-100ບ່ອນທີ່ທ່ານຕ້ອງການໃຫ້ຖັນແຕກເປັນແຖວໃໝ່. ເຮັດໃຫ້ການແບ່ງປັນຕອບສະຫນອງໂດຍການປະສົມ .w-100ກັບ ອຸປະກອນການ ສະແດງຜົນຕອບສະຫນອງ ບາງຢ່າງ .

ມີ ຂໍ້ຜິດພາດຂອງ Safari flexbox ທີ່ປ້ອງກັນບໍ່ໃຫ້ສິ່ງນີ້ເຮັດວຽກໂດຍບໍ່ມີຄວາມຊັດເຈນ flex-basisຫຼື border. ມີການແກ້ໄຂສໍາລັບຕົວທ່ອງເວັບທີ່ເກົ່າກວ່າ, ແຕ່ພວກມັນບໍ່ຈໍາເປັນຖ້າຕົວທ່ອງເວັບເປົ້າຫມາຍຂອງທ່ານບໍ່ຕົກຢູ່ໃນສະບັບ buggy.

ຄໍ

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</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>

Gutters

Gutters ສາມາດຖືກປັບປ່ຽນໄດ້ໂດຍການປັບຕົວແບບເຈາະຈົງສະເພາະຈຸດ ແລະ ຫ້ອງຮຽນຜົນປະໂຫຍດດ້ານລົບ. ເພື່ອປ່ຽນ gutters ໃນແຖວທີ່ກໍານົດ, ຈັບຄູ່ຜົນປະໂຫຍດຂອບທາງລົບໃສ່ .rowແລະຈັບຄູ່ຜົນປະໂຫຍດ padding ໃນ .cols. .containerຫຼື ພໍ່ ແມ່ .container-fluidອາດຈະຕ້ອງໄດ້ຮັບການປັບເກີນໄປເພື່ອຫຼີກເວັ້ນການ overflow ທີ່ບໍ່ຕ້ອງການ, ນໍາໃຊ້ອຸປະກອນການຈັບຄູ່ padding ອີກເທື່ອຫນຶ່ງ.

ນີ້ແມ່ນຕົວຢ່າງຂອງການປັບແຕ່ງ Bootstrap grid ຢູ່ lgbreakpoint ຂະຫນາດໃຫຍ່ ( ) ແລະຂ້າງເທິງ. ພວກເຮົາໄດ້ເພີ່ມຂຶ້ນ .colpadding ກັບ .px-lg-5, counteracted ກັບທີ່ມີ .mx-lg-n5ກ່ຽວກັບພໍ່ແມ່ .rowແລະຫຼັງຈາກນັ້ນປັບ .containerwrapper ກັບ .px-lg-5.

ແຜ່ນຖັນແບບກຳນົດເອງ

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

ຖັນແຖວ

ໃຊ້ .row-cols-*ຫ້ອງຮຽນທີ່ຕອບສະໜອງເພື່ອກຳນົດຈຳນວນຖັນທີ່ສະແດງເນື້ອຫາ ແລະໂຄງຮ່າງຂອງທ່ານໄດ້ໄວທີ່ສຸດ. ໃນຂະນະທີ່ .col-*ຊັ້ນຮຽນປົກກະຕິໃຊ້ກັບແຕ່ລະຖັນ (ຕົວຢ່າງ, .col-md-4), ຫ້ອງຮຽນຖັນແຖວຖືກຕັ້ງຢູ່ເທິງຫຼັກ .rowເປັນທາງລັດ.

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

ຖັນ

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

ທ່ານຍັງສາມາດໃຊ້ 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);
  }
}

ຈັດຮຽງ

ໃຊ້ເຄື່ອງມືການຈັດຮຽງ flexbox ເພື່ອຈັດແຖວຕາມແນວຕັ້ງ ແລະແນວນອນ. Internet Explorer 10-11 ບໍ່ຮອງຮັບການຈັດຮຽງຕາມແນວຕັ້ງຂອງລາຍການ flex ເມື່ອກ່ອງບັນຈຸ flex ມີຮູບ min-heightຂ້າງລຸ່ມ. ເບິ່ງ Flexbugs #3 ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ.

ການຈັດລຽງຕາມແນວຕັ້ງ

ຫນຶ່ງໃນສາມຖັນ

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ຫນຶ່ງໃນສາມຖັນ

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ການຈັດວາງແນວນອນ

ຫນຶ່ງໃນສອງຖັນ

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ບໍ່ມີ gutters

gutters ລະ ຫວ່າງ ຖັນ ໃນ ຫ້ອງ ຕາ ຂ່າຍ ໄຟ ຟ້າ ກໍາ ນົດ ໄວ້ ຂອງ ພວກ ເຮົາ ສາ ມາດ ເອົາ ອອກ ໄດ້ ດ້ວຍ .no-gutters. ນີ້ຈະລົບ margins ລົບອອກຈາກ .rowແລະແນວນອນ paddingຈາກທຸກຖັນເດັກນ້ອຍທັນທີທັນໃດ.

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

ຕ້ອງການການອອກແບບແຂບໄປແຂບ? ຖິ້ມພໍ່ແມ່ .containerຫຼື .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

ໃນການປະຕິບັດ, ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງ. ກະລຸນາຮັບຊາບວ່າເຈົ້າສາມາດສືບຕໍ່ໃຊ້ອັນນີ້ກັບຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າທັງໝົດໄດ້ (ລວມທັງຄວາມກວ້າງຂອງຖັນ, ລະດັບການຕອບສະໜອງ, ການສັ່ງຄືນໃໝ່, ແລະອື່ນໆອີກ).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ການຫໍ່ຖັນ

ຖ້າຫຼາຍກວ່າ 12 ຖັນຖືກວາງໄວ້ພາຍໃນແຖວດຽວ, ແຕ່ລະກຸ່ມຂອງຖັນເພີ່ມເຕີມຈະ, ເປັນຫນ່ວຍດຽວ, ຫໍ່ໃສ່ແຖວໃຫມ່.

.col-9

.col-4
ຕັ້ງແຕ່ 9 + 4 = 13 > 12, div ກວ້າງ 4 ຖັນນີ້ຖືກຫໍ່ໃສ່ແຖວໃໝ່ເປັນໜຶ່ງໜ່ວຍທີ່ຕິດກັນ.

.col-6
ຖັນຕໍ່ມາສືບຕໍ່ໄປຕາມແຖວໃໝ່.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ການແບ່ງຖັນ

ການແຍກຖັນໄປຫາແຖວໃໝ່ໃນ flexbox ຮຽກຮ້ອງໃຫ້ມີການແຮັກນ້ອຍໆ: ເພີ່ມອົງປະກອບໃສ່ width: 100%ບ່ອນໃດກໍໄດ້ທີ່ທ່ານຕ້ອງການຫໍ່ຄໍລຳຂອງທ່ານໃສ່ແຖວໃໝ່. ປົກກະຕິແລ້ວນີ້ແມ່ນສໍາເລັດດ້ວຍຫຼາຍ .rows, ແຕ່ບໍ່ແມ່ນທຸກວິທີການປະຕິບັດສາມາດບັນຊີສໍາລັບການນີ້.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

ທ່ານອາດຈະໃຊ້ການພັກຜ່ອນນີ້ໃນຈຸດຢຸດສະເພາະກັບອຸ ປະກອນການ ສະແດງຜົນ ທີ່ຕອບສະໜອງຂອງພວກເຮົາ .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

ກຳລັງຈັດຮຽງໃໝ່

ຫ້ອງຮຽນສັ່ງ

ໃຊ້ .order-ຫ້ອງຮຽນເພື່ອຄວບຄຸມການຈັດ ລໍາດັບສາຍຕາ ຂອງເນື້ອຫາຂອງທ່ານ. ຫ້ອງຮຽນເຫຼົ່ານີ້ແມ່ນຕອບສະຫນອງ, ດັ່ງນັ້ນທ່ານສາມາດກໍານົດ orderໂດຍ breakpoint (ເຊັ່ນ, .order-1.order-md-2). ຮວມເອົາການຮອງຮັບ 1ຜ່ານ 12ທັງຫ້າຊັ້ນຕາຂ່າຍ.

ທໍາອິດໃນ DOM, ບໍ່ມີການສັ່ງຊື້

ອັນທີສອງໃນ DOM, ມີຄໍາສັ່ງໃຫຍ່ກວ່າ

ທີສາມໃນ DOM, ດ້ວຍຄໍາສັ່ງຂອງ 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

ນອກນັ້ນຍັງມີການຕອບສະ ໜອງ .order-firstແລະ .order-lastຊັ້ນຮຽນທີ່ປ່ຽນ orderອົງປະກອບໂດຍການ ນຳ ໃຊ້ order: -1ແລະ order: 13( order: $columns + 1), ຕາມລຳດັບ. ຫ້ອງຮຽນເຫຼົ່ານີ້ຍັງສາມາດປະສົມກັບ .order-*ຫ້ອງຮຽນຕົວເລກຕາມຄວາມຕ້ອງການ.

ທໍາອິດໃນ DOM, ສັ່ງສຸດທ້າຍ

ອັນທີສອງໃນ DOM, ບໍ່ມີຄໍາສັ່ງ

ທີສາມໃນ DOM, ສັ່ງກ່ອນ

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

ການຊົດເຊີຍຖັນ

ທ່ານສາມາດຊົດເຊີຍຖັນຕາຂ່າຍໄຟຟ້າໃນສອງວິທີ: .offset-ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າທີ່ຕອບສະຫນອງຂອງພວກເຮົາແລະ ຜົນປະໂຫຍດຂອບ ຂອງພວກເຮົາ . ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າມີຂະຫນາດເພື່ອໃຫ້ກົງກັບຖັນໃນຂະນະທີ່ຂອບແມ່ນມີປະໂຫຍດຫຼາຍສໍາລັບການຈັດວາງໄວທີ່ຄວາມກວ້າງຂອງ offset ມີການປ່ຽນແປງ.

ຫ້ອງຮຽນຊົດເຊີຍ

ຍ້າຍຖັນໄປທາງຂວາໂດຍໃຊ້ .offset-md-*ຊັ້ນຮຽນ. ຫ້ອງຮຽນເຫຼົ່ານີ້ເພີ່ມຂອບຊ້າຍຂອງຖັນໂດຍ *ຖັນ. ຕົວຢ່າງ, .offset-md-4ຍ້າຍ .col-md-4ຫຼາຍກວ່າສີ່ຖັນ.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

ນອກເຫນືອຈາກການລຶບຖັນຢູ່ທີ່ຈຸດແບ່ງການຕອບສະໜອງ, ທ່ານອາດຈະຕ້ອງຣີເຊັດການຊົດເຊີຍ. ເບິ່ງນີ້ໃນການປະຕິບັດໃນ ຕົວຢ່າງຕາຕະລາງ .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

ຜົນປະໂຫຍດຂອບ

ດ້ວຍການຍ້າຍໄປ flexbox ໃນ v4, ທ່ານສາມາດນໍາໃຊ້ປະໂຫຍດຂອງຂອບເຊັ່ນ .mr-autoການບັງຄັບຖັນອ້າຍນ້ອງຢູ່ຫ່າງຈາກກັນແລະກັນ.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ຮັງ

ເພື່ອວາງເນື້ອຫາຂອງທ່ານດ້ວຍຕາຂ່າຍເລີ່ມຕົ້ນ, ໃຫ້ເພີ່ມຖັນໃໝ່ .rowແລະຊຸດຂອງ .col-sm-*ຖັນພາຍໃນຖັນທີ່ມີຢູ່ແລ້ວ .col-sm-*. ແຖວທີ່ຊ້ອນກັນຄວນປະກອບມີຊຸດຂອງຖັນທີ່ເພີ່ມສູງສຸດ 12 ຫຼືໜ້ອຍກວ່ານັ້ນ (ມັນບໍ່ຈຳເປັນທີ່ທ່ານໃຊ້ທັງໝົດ 12 ຖັນ).

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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 mixins

ເມື່ອໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງ Bootstrap, ທ່ານມີທາງເລືອກທີ່ຈະໃຊ້ຕົວແປ Sass ແລະ mixins ເພື່ອສ້າງຫນ້າ custom, semantic, ແລະຕອບສະຫນອງ. ຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າຂອງພວກເຮົາໃຊ້ຕົວແປ ແລະ mixins ດຽວກັນເຫຼົ່ານີ້ເພື່ອສະໜອງຊຸດຊັ້ນຮຽນທີ່ພ້ອມນຳໃຊ້ທັງໝົດສຳລັບການຈັດວາງທີ່ຕອບສະໜອງໄວ.

ຕົວແປ

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

ມິກຊິນ

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();
@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 {
  width: 800px;
  @include make-container();
}

.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: 30px !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, ຫຼື %).