ຖັນ

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

ໃນໜ້ານີ້

ລະວັງ! ໃຫ້ແນ່ໃຈວ່າ ອ່ານຫນ້າ Grid ທໍາອິດກ່ອນທີ່ຈະເຂົ້າໄປໃນວິທີການດັດແກ້ແລະປັບແຕ່ງຖັນຕາຂ່າຍໄຟຟ້າຂອງທ່ານ.

ເຂົາເຈົ້າເຮັດວຽກແນວໃດ

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

ຈັດຮຽງ

ໃຊ້ເຄື່ອງມືການຈັດຮຽງ flexbox ເພື່ອຈັດແຖວຕາມແນວຕັ້ງ ແລະແນວນອນ.

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

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

html

<div class="container text-center">
  <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>

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

html

<div class="container text-center">
  <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>

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

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

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ການຫໍ່ຖັນ

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

.col-9

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

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

html

<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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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ຕະ 5ຫຼອດທັງຫົກຊັ້ນຕາຂ່າຍ.

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

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

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

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6, ຕາມລໍາດັບ. ຫ້ອງຮຽນເຫຼົ່ານີ້ຍັງສາມາດປະສົມກັບ .order-*ຫ້ອງຮຽນຕົວເລກຕາມຄວາມຕ້ອງການ.

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

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

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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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, ທ່ານສາມາດນໍາໃຊ້ປະໂຫຍດຂອງຂອບເຊັ່ນ .me-autoການບັງຄັບຖັນອ້າຍນ້ອງຢູ່ຫ່າງຈາກກັນແລະກັນ.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ຫ້ອງຮຽນຖັນແບບດ່ຽວ

ຫ້ອງ .col-*ຮຽນຍັງສາມາດຖືກນໍາໃຊ້ຢູ່ນອກ a .rowເພື່ອໃຫ້ອົງປະກອບທີ່ມີຄວາມກວ້າງສະເພາະ. ເມື່ອໃດກໍໄດ້ທີ່ຫ້ອງຮຽນຖັນຖືກໃຊ້ເປັນລູກແຖວທີ່ບໍ່ແມ່ນໂດຍກົງ, ແຜ່ນຮອງຈະຖືກລະເວັ້ນ.

.col-3: ຄວາມກວ້າງຂອງ 25%

.col-sm-9: ຄວາມກວ້າງຂອງ 75% ຂ້າງເທິງຈຸດແບ່ງ sm

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

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

ຫຍໍ້ໜ້າຂອງຂໍ້ຄວາມຕົວຍຶດ. ພວກເຮົາກຳລັງໃຊ້ມັນຢູ່ບ່ອນນີ້ເພື່ອສະແດງການນຳໃຊ້ clearfix class. ພວກເຮົາກໍາລັງເພີ່ມປະໂຫຍກທີ່ບໍ່ມີຄວາມຫມາຍບາງຢ່າງຢູ່ທີ່ນີ້ເພື່ອສະແດງໃຫ້ເຫັນວ່າຄໍລໍາມີປະຕິກິລິຍາແນວໃດກັບຮູບພາບທີ່ເລື່ອນໄດ້.

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

ແລະຢ່າງໃດກໍ່ຕາມ, ຢູ່ທີ່ນີ້, ເຈົ້າຍັງພະຍາຍາມອ່ານຂໍ້ຄວາມຕົວຍຶດນີ້, ຫວັງວ່າຈະມີຄວາມເຂົ້າໃຈເພີ່ມເຕີມ, ຫຼືບາງໄຂ່ easter ທີ່ເຊື່ອງໄວ້ຂອງເນື້ອຫາ. ຕະຫລົກ, ບາງທີ. ແຕ່ຫນ້າເສຍດາຍ, ບໍ່ມີອັນໃດທີ່ນີ້.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>