Bootstrap 5 ການຈັດສັງງານ

ສະໜາມ

ສະໜາມ Bootstrap 5 ແມ່ນການບໍລິໂພກວົງວອກກັບວົງວອກກັບບັນດາຂັ້ນການບັນດາສະໜາມທີ່ບໍ່ມີວົງວອກ,ກັບຂັ້ນການບັນດາສະໜາມທີ່ມີວົງວອກ.ມັນລວມມີຫົວໜ້າ,ຕາມຟອດ,ຂັ້ນການ,ສີກະດາດແລະອີກຫຼາຍເລື່ອງ.

ສະໜາມບັນດາບັນດາສະໜາມພື້ນຖານ

ສະໜາມບັນດາບັນດາສະໜາມພື້ນຖານແມ່ນ .card ທີ່ສ້າງມາໂດຍປະເພດ .card-body ປະເພດ:

ຕົວຢ່າງ

<div class="card">
  <div class="card-body">ສະໜາມບັນດາບັນດາສະໜາມພື້ນຖານ</div>
</div>

ທ້າທາຍຕື່ມມັນ

ຕາມຟອດແລະຕາມຟອດ

.card-header ສຳລັບການໃຫ້ຫົວສະຫລອງໃຫ້ສະໜາມ:.card-footer ສຳລັບການໃຫ້ຕາມຟອດໃຫ້ສະໜາມ:

ຕົວຢ່າງ

<div class="card">
  <div class="card-header">ຫົວໜ້າ</div>
  <div class="card-body">ຂັ້ນການ</div>
  <div class="card-footer">ຕາມຟອດ</div>
</div>

ທ້າທາຍຕື່ມມັນ

ສະໜາມສັນສົມ

ສຳລັບການໃຫ້ສີກະດາດບັນດາສະໜາມ,ຍັງໃຊ້ປະເພດສັນສົມຂອງສັນສົມສະໜາມ:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

ຕົວຢ່າງ

ທ້າທາຍຕື່ມມັນ

ຫົວສະຫລອງ,ຂໍ້ຄວາມແລະຜູ້ເຊື່ອມ

ຍັງບໍ່,ຍັງໃຊ້ .card-title ສົ່ງຫົວສະຫລອງການສະແດງໃຫ້ກັບປະກອບຫົວສະຫລອງໃດໜຶ່ງ.ຖ້າ <p> ພັກສະເພາະ .card-body ສຸດທ້າຍຂອງພັກລູກຫຼືພັກລູກທີ່ມີພຽງຫຼາຍຄັ້ງດຽວ .card-text ປະໂຫຍດຂອງ .card-text <p> ຂອບເຂດດ້ານລຸ່ມຂອງປະກອບ..card-link ການເພີ່ມສີຟ້າແລະຜົນກະທົບຂອງການພັກສະໝອງສຳລັບການເຊື່ອມຕໍ່ທີ່ບໍ່ມີພາສາ.

ຕົວຢ່າງ

<div class="card">
  <div class="card-body">
    <h4 class="card-title">ຫົວຂໍ້ຂອງການເຊື່ອມຕໍ່</h4>
    <p class="card-text">ຂໍ້ມູນຄົນຄວນ. ຂໍ້ມູນຄົນຄວນ.</p>
    <a href="#" class="card-link">ການເຊື່ອມຕໍ່ສະບັບ</a>
    <a href="#" class="card-link">ການເຊື່ອມຕໍ່ອື່ນ</a>
  </div>
</div>

ທ້າທາຍຕື່ມມັນ

ພາບຫຼັງການສະແດງ

ປ່ຽນ .card-img-top ຫຼື .card-img-bottom ເພີ່ມໃຫ້ <img>ສາມາດຕິດຕັ້ງຮູບໃສ່ຫົວຮູບຫຼືຫຼັງຮູບ.

ບໍ່ມີຄວາມລະອຽດ ພວກເຮົາໄດ້ເພີ່ມຮູບໃສ່ .card-body ເພື່ອກວມທັງໝົດຄວາມກວມ:

ຕົວຢ່າງ

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates ແມ່ນນັກການກຳລັງງານແລະນັກການອາກາດ. ຂໍ້ມູນຄົນຄວນ. ຂໍ້ມູນຄົນຄວນ.</p>
    <a href="#" class="btn btn-primary">ທັກທາຍຂໍ້ມູນຂອງຂ້ອຍ</a>
  </div>
</div>

ທ້າທາຍຕື່ມມັນ

ພາບຫຼັງການສະແດງສະບັບການຫຼັງການສະແດງ

ປ່ຽນຮູບໃຫ້ເປັນພາບຫຼັງການສະແດງແລະນໍາໃຊ້: .card-img-overlay ການເພີ່ມຂໍ້ມູນໃສ່ຫົວຮູບ:

ຕົວຢ່າງ

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">ຂໍ້ມູນຄົນຄວນ. ຂໍ້ມູນຄົນຄວນ.</p>
    <a href="#" class="btn btn-primary">ທັກທາຍຂໍ້ມູນຂອງຂ້ອຍ</a>
  </div>
</div>

ທ້າທາຍຕື່ມມັນ