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

ບັດ

ບັດຂອງ Bootstrap ສະຫນອງການບັນຈຸເນື້ອໃນທີ່ມີຄວາມຍືດຫຍຸ່ນແລະສາມາດຂະຫຍາຍໄດ້ດ້ວຍຕົວແປແລະທາງເລືອກທີ່ຫຼາກຫຼາຍ.

ກ່ຽວກັບ

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

ຕົວຢ່າງ

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

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

Placeholder Image cap
ຊື່ບັດ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ປະເພດເນື້ອຫາ

ບັດສະຫນັບສະຫນູນຫຼາກຫຼາຍຂອງເນື້ອຫາ, ລວມທັງຮູບພາບ, ຂໍ້ຄວາມ, ກຸ່ມລາຍຊື່, ການເຊື່ອມຕໍ່, ແລະອື່ນໆ. ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງສິ່ງທີ່ສະຫນັບສະຫນູນ.

ຮ່າງກາຍ

ຕຶກອາຄານຂອງບັດແມ່ນ .card-body. ໃຊ້ມັນທຸກຄັ້ງທີ່ທ່ານຕ້ອງການສ່ວນ padded ພາຍໃນບັດ.

ນີ້ແມ່ນຂໍ້ຄວາມບາງອັນຢູ່ໃນເນື້ອໃນບັດ.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ຊື່ບັດແມ່ນໃຊ້ໂດຍການເພີ່ມ .card-titleໃສ່ <h*>ແທັກ. ໃນລັກສະນະດຽວກັນ, ການເຊື່ອມຕໍ່ຖືກເພີ່ມແລະວາງຢູ່ຂ້າງກັນໂດຍການເພີ່ມ .card-linkໃສ່ <a>ແທັກ.

ຄໍາບັນຍາຍຖືກໃຊ້ໂດຍການເພີ່ມໃສ່ .card-subtitleແທັກ <h*>. ຖ້າ​ຫາກ​ວ່າ .card-title​ແລະ .card-subtitle​ລາຍ​ການ​ໄດ້​ຖືກ​ຈັດ​ໃສ່​ໃນ .card-body​ລາຍ​ການ​, ຫົວ​ຂໍ້​ບັດ​ແລະ​ຄໍາ​ບັນ​ຍາຍ​ແມ່ນ​ສອດ​ຄ້ອງ​ກັນ​.

ຊື່ບັດ
ຄໍາບັນຍາຍບັດ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ບັດເຊື່ອມຕໍ່ການເຊື່ອມຕໍ່ ອື່ນ
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ຮູບພາບ

.card-img-topເອົາຮູບໃສ່ເທິງສຸດຂອງບັດ. ດ້ວຍ .card-text, ຂໍ້ຄວາມສາມາດຖືກເພີ່ມໃສ່ບັດ. ຂໍ້ຄວາມພາຍໃນ .card-textຍັງສາມາດຖືກຈັດຮູບແບບດ້ວຍແທັກ HTML ມາດຕະຖານ.

Placeholder Image cap

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ລາຍຊື່ກຸ່ມ

ສ້າງລາຍຊື່ເນື້ອຫາຢູ່ໃນບັດທີ່ມີກຸ່ມລາຍຊື່ flush.

  • ລາຍການ
  • ລາຍການທີສອງ
  • ລາຍການທີສາມ
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
ແນະນຳ
  • ລາຍການ
  • ລາຍການທີສອງ
  • ລາຍການທີສາມ
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • ລາຍການ
  • ລາຍການທີສອງ
  • ລາຍການທີສາມ
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

ອ່າງ​ລ້າງ​ຖ້ວຍ

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

Placeholder Image cap
ຊື່ບັດ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

  • ລາຍການ
  • ລາຍການທີສອງ
  • ລາຍການທີສາມ
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ເພີ່ມສ່ວນຫົວທາງເລືອກ ແລະ/ຫຼືສ່ວນທ້າຍພາຍໃນບັດ.

ແນະນຳ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ສ່ວນ ຫົວບັດສາມາດຖືກຈັດຮູບແບບໂດຍການເພີ່ມ .card-headerໃສ່ <h*>ອົງປະກອບ.

ແນະນຳ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ວົງຢືມ

ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ແນະນຳ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

ຂະໜາດ

ບັດຖືວ່າບໍ່ສະເພາະ widthເພື່ອເລີ່ມຕົ້ນ, ສະນັ້ນພວກມັນຈະກວ້າງ 100% ເວັ້ນເສຍແຕ່ໄດ້ລະບຸໄວ້ເປັນຢ່າງອື່ນ. ທ່ານ​ສາ​ມາດ​ປ່ຽນ​ແປງ​ອັນ​ນີ້​ໄດ້​ຕາມ​ຄວາມ​ຕ້ອງ​ການ​ທີ່​ມີ CSS ທີ່​ກໍາ​ນົດ​ໄວ້​, ຫ້ອງ​ຮຽນ​ຕາ​ຂ່າຍ​ໄຟ​ຟ້າ​, grid Sass mixins​, ຫຼື​ອຸ​ປະ​ກອນ​.

ການນໍາໃຊ້ເຄື່ອງຫມາຍຕາຕະລາງ

ການນໍາໃຊ້ຕາຂ່າຍໄຟຟ້າ, ຫໍ່ບັດໃນຖັນແລະແຖວຕາມຄວາມຕ້ອງການ.

ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ການ​ນໍາ​ໃຊ້​ອຸ​ປະ​ກອນ​

ໃຊ້ເຄື່ອງມືການ ປັບຂະໜາດທີ່ມີຢູ່ ຂອງພວກເຮົາ ເພື່ອກຳນົດຄວາມກວ້າງຂອງບັດຢ່າງໄວວາ.

ຊື່ບັດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ປຸ່ມ
ຊື່ບັດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ປຸ່ມ
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

ການໃຊ້ CSS ແບບກຳນົດເອງ

ໃຊ້ CSS ແບບກຳນົດເອງໃນສະໄຕລ໌ຊີດຂອງເຈົ້າ ຫຼືເປັນຮູບແບບໃນແຖວເພື່ອກຳນົດຄວາມກວ້າງ.

ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ການຈັດຮຽງຂໍ້ຄວາມ

ທ່ານ​ສາ​ມາດ​ປ່ຽນ​ການ​ຈັດ​ວາງ​ຂໍ້​ຄວາມ​ຂອງ​ບັດ​ໄດ້​ຢ່າງ​ວ່ອງ​ໄວ — ໃນ​ທັງ​ຫມົດ​ຫຼື​ພາກ​ສ່ວນ​ສະ​ເພາະ​ຂອງ​ມັນ — ກັບ ​ຫ້ອງ​ຮຽນ​ການ​ຈັດ​ຂໍ້​ຄວາມ ​ຂອງ​ພວກ​ເຮົາ ​.

ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ເພີ່ມການນໍາທາງບາງຢ່າງໃສ່ສ່ວນຫົວຂອງບັດ (ຫຼືບລັອກ) ດ້ວຍ ອົງປະກອບ navigation ຂອງ Bootstrap .

ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ການປິ່ນປົວຫົວຂໍ້ພິເສດ

ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

ໄປບ່ອນໃດບ່ອນນຶ່ງ
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ຮູບພາບ

ບັດປະກອບມີທາງເລືອກຈໍານວນຫນ້ອຍສໍາລັບການເຮັດວຽກກັບຮູບພາບ. ເລືອກຈາກ “ໝວກຮູບ” ໃສ່ທ້າຍບັດ, ວາງຮູບພາບທີ່ມີເນື້ອໃນບັດ, ຫຼືພຽງແຕ່ຝັງຮູບໃສ່ໃນບັດ.

ໝວກຮູບ

ຄ້າຍກັບສ່ວນຫົວ ແລະສ່ວນທ້າຍ, ບັດສາມາດລວມເອົາ “ຮູບໃສ່ຫົວ” ເທິງ ແລະລຸ່ມ—ຮູບພາບຢູ່ເທິງ ຫຼື ລຸ່ມສຸດຂອງບັດ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

Placeholder Image cap
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

ການວາງຊ້ອນຮູບພາບ

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

Placeholder Card image
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
ໃຫ້ສັງເກດວ່າເນື້ອຫາບໍ່ຄວນໃຫຍ່ກວ່າຄວາມສູງຂອງຮູບ. ຖ້າເນື້ອຫາໃຫຍ່ກວ່າຮູບພາບ, ເນື້ອຫາຈະຖືກສະແດງຢູ່ນອກຮູບພາບ.

ລວງນອນ

ການນໍາໃຊ້ການປະສົມປະສານຂອງຕາຂ່າຍໄຟຟ້າແລະຊັ້ນຮຽນທີ່ເປັນປະໂຫຍດ, ບັດສາມາດເຮັດຕາມແນວນອນໃນວິທີທີ່ເປັນມິດກັບມືຖືແລະຕອບສະຫນອງ. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ພວກເຮົາເອົາ gutters ຕາຂ່າຍໄຟຟ້າອອກ .g-0ແລະນໍາໃຊ້ .col-md-*ຫ້ອງຮຽນເພື່ອເຮັດໃຫ້ບັດອອກຕາມລວງນອນຢູ່ mdbreakpoint ໄດ້. ອາດຈະຈໍາເປັນຕ້ອງມີການປັບປ່ຽນຕື່ມ ຂຶ້ນກັບເນື້ອໃນບັດຂອງທ່ານ.

Placeholder Image
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

ຮູບແບບບັດ

ບັດປະກອບມີທາງເລືອກຕ່າງໆສໍາລັບການປັບແຕ່ງພື້ນຫລັງ, ຂອບ, ແລະສີ.

ພື້ນຫລັງແລະສີ

ໃຊ້ ສີຂໍ້ຄວາມ ແລະ ເຄື່ອງໃຊ້ພື້ນຫຼັງ ເພື່ອປ່ຽນລັກສະນະຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຕົ້ນຕໍ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຮອງ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຫົວຂໍ້ບັດສໍາເລັດ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດອັນຕະລາຍ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດເຕືອນ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຂໍ້ມູນ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດແສງສະຫວ່າງ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຊ້ໍາ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

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

ຊາຍແດນ

ໃຊ້ ອຸ ປະກອນຊາຍແດນ ເພື່ອປ່ຽນພຽງແຕ່ border-colorບັດ. ໃຫ້ສັງເກດວ່າທ່ານສາມາດວາງ .text-{color}ຊັ້ນຮຽນຢູ່ໃນພໍ່ແມ່ .cardຫຼືຊຸດຍ່ອຍຂອງເນື້ອໃນຂອງບັດດັ່ງທີ່ສະແດງຂ້າງລຸ່ມນີ້.

ສ່ວນຫົວ
ຊື່ບັດຕົ້ນຕໍ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຮອງ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຫົວຂໍ້ບັດສໍາເລັດ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດອັນຕະລາຍ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດເຕືອນ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຂໍ້ມູນ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດແສງສະຫວ່າງ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ
ຊື່ບັດຊ້ໍາ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ຜົນປະໂຫຍດ Mixins

ນອກ​ນັ້ນ​ທ່ານ​ຍັງ​ສາ​ມາດ​ປ່ຽນ​ຂອບ​ເຂດ​ໃນ​ຫົວ​ບັດ​ແລະ​ສ່ວນ​ທ້າຍ​ຂອງ​ບັດ​ໄດ້​ຕາມ​ຄວາມ​ຕ້ອງ​ການ​, ແລະ​ເຖິງ​ແມ່ນ​ວ່າ​ເອົາ​ຂອງ​ພວກ​ເຂົາ background-color​ກັບ .bg-transparent.

ສ່ວນຫົວ
ຫົວຂໍ້ບັດສໍາເລັດ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

ແຜນຜັງບັດ

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

ກຸ່ມບັດ

ໃຊ້ກຸ່ມບັດເພື່ອສະແດງບັດເປັນອົງປະກອບດຽວທີ່ຕິດຄັດມາກັບຖັນຄວາມກວ້າງແລະຄວາມສູງເທົ່າທຽມກັນ. ກຸ່ມບັດເລີ່ມຕົ້ນຈາກ stacked ແລະນໍາໃຊ້ display: flex;ເພື່ອຕິດຢູ່ກັບຂະຫນາດທີ່ເປັນເອກະພາບເລີ່ມຕົ້ນທີ່ smbreakpoint.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

Placeholder Image cap
ຊື່ບັດ

ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

Placeholder Image cap
ຊື່ບັດ

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

ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

ເມື່ອໃຊ້ກຸ່ມບັດທີ່ມີສ່ວນທ້າຍ, ເນື້ອຫາຂອງພວກມັນຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.

Placeholder Image cap
ຊື່ບັດ

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

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

ບັດຕາຂ່າຍ

ໃຊ້ລະບົບຕາຕະລາງ Bootstrap ແລະ .row-colsຫ້ອງຮຽນ ຂອງມັນ ເພື່ອຄວບຄຸມຈໍານວນຖັນຕາຂ່າຍໄຟຟ້າ (ຫໍ່ຢູ່ອ້ອມບັດຂອງທ່ານ) ທີ່ທ່ານສະແດງຕໍ່ແຖວ. ຕົວຢ່າງ, ນີ້ແມ່ນ .row-cols-1ການຈັດວາງບັດຢູ່ໃນຖັນຫນຶ່ງ, ແລະ .row-cols-md-2ແຍກສີ່ບັດໃຫ້ຄວາມກວ້າງເທົ່າທຽມກັນໃນທົ່ວຫຼາຍແຖວ, ຈາກຈຸດແບ່ງຂະຫນາດກາງຂຶ້ນ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ປ່ຽນມັນໄປ .row-cols-3ແລ້ວເຈົ້າຈະເຫັນບັດທີ່ສີ່ຫໍ່.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ເມື່ອທ່ານຕ້ອງການຄວາມສູງເທົ່າທຽມກັນ, ເພີ່ມ .h-100ໃສ່ບັດ. ຖ້າທ່ານຕ້ອງການຄວາມສູງເທົ່າທຽມກັນໂດຍຄ່າເລີ່ມຕົ້ນ, ທ່ານສາມາດກໍານົດ $card-height: 100%ໃນ Sass.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດສັ້ນ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ຄືກັນກັບກຸ່ມບັດ, ສ່ວນທ້າຍບັດຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.

Placeholder Image cap
ຊື່ບັດ

ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.

Placeholder Image cap
ຊື່ບັດ

ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.

Placeholder Image cap
ຊື່ບັດ

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

ຊ່າງກໍ່ສ້າງ

ໃນ v4ພວກເຮົາໄດ້ໃຊ້ເຕັກນິກ CSS ເທົ່ານັ້ນເພື່ອເຮັດຕາມພຶດຕິກໍາຂອງ ຖັນຄ້າຍຄື Masonry , ແຕ່ເຕັກນິກນີ້ມາພ້ອມກັບ ຜົນກະທົບຂ້າງຄຽງ ທີ່ບໍ່ຫນ້າພໍໃຈຫຼາຍ . ຖ້າທ່ານຕ້ອງການທີ່ຈະມີຮູບແບບນີ້ຢູ່ໃນ v5, ທ່ານພຽງແຕ່ສາມາດໃຊ້ plugin Masonry. Masonry ບໍ່ໄດ້ລວມຢູ່ໃນ Bootstrap , ແຕ່ພວກເຮົາໄດ້ສ້າງ ຕົວຢ່າງຕົວຢ່າງ ເພື່ອຊ່ວຍໃຫ້ທ່ານເລີ່ມຕົ້ນ.

ຊາສ

ຕົວແປ

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;