Bootstrap 5 ການສະແດງການເບິ່ງຫຼັງສຳຫຼັບສິ່ງອື່ນ

Offcanvas (ບົດຮູບ)

Offcanvas (ບົດຮູບ) ແມ່ນຄືກັບ Modal (ບໍ່ສະແດງແບບລະເບີດ ແລະ ສະແດງເວລາທີ່ເປັນອິດສະຫຼະ), ແຕ່ວ່າມັນຫຼາຍກວ່າຈະເປັນໃຫ້ເປັນສາຍຄາງຂາຍການນຳທາງ.

ການສ້າງ Offcanvas ສາຍຄາງຂາຍ

ການສະແດງຢ່າງຈະເປັນຂອງການສ້າງ Offcanvas ສາຍຄາງຂາຍ:

ຄວາມຈິງ

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">ຫົວຂໍ້</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>ຂໍ້ຄວາມ. ຂໍ້ຄວາມ. ຂໍ້ຄວາມ.</p>
    <p>ຂໍ້ຄວາມ. ຂໍ້ຄວາມ. ຂໍ້ຄວາມ.</p>
    <button class="btn btn-secondary" type="button">ຫົວຫຼັກ</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  ເປີດ Offcanvas ຂາຍສາຍ
</button>

ຕະຫລອດຕົວເອງ

ການອະທິບາຍຄວາມຄິດ

.offcanvas class ສ້າງ offcanvas ຂາຍສາຍ.

.offcanvas-start class ຕິດຕັ້ງ offcanvas ແລະ ກຳນົດຄວາມກວດມິດຂອງຂອງນັ້ນໃຫ້ 400px. ສຳລັບປະເພດຕິດຕັ້ງອື່ນໆ, ບັນປະຊາສັກຢູ່ໃນລາຍການລາຍການລາຍການ.

.offcanvas-title class ທີ່ກຳນົດການປ່ຽນທີ່ຂອງພາບປະກອບ ແລະ ຄວາມສູງຂອງການກະຕຸ້ນ.

ຫລັງຈາກນັ້ນ, ທ່ານຈະເພີ່ມເນື້ອຫາຂອງທ່ານເຂົ້າໃນ .offcanvas-body ໃນປະເພດ.

ເພື່ອເປີດ offcanvas ຂາຍສາຍ, ທ່ານຕ້ອງນຳໃຊ້ <button> ຫລື <a> ທີ່ຕິດຕັ້ງ .offcanvas id ຂອງບໍລິສັດ (ໃນກໍລະນີຂອງພວກເຮົາແມ່ນ #demo()).

ເພື່ອນຳໃຊ້ <a> ປະກອບສະໜອງ offcanvas ຂາຍສາຍ, ທ່ານສາມາດນຳໃຊ້ ປະສົມປະສານ href ທີ່ data-bs-target ທີ່ຕິດຕັ້ງ #demo.

ການຕິດຕັ້ງ Offcanvas

ກະຕຸ້ນໃຊ້ .offcanvas-start|end|top|bottom ການຕິດຕັ້ງ offcanvas ຕາມຂວາ, ຂວາ, ສູງ ຫລື ກ້ອງ:

ຄວາມຈຳນວນດ້ານຂວາ

<div class="offcanvas offcanvas-end" id="demo">

ຕະຫລອດຕົວເອງ

ຄວາມຈຳນວນດ້ານສູງ

<div class="offcanvas offcanvas-top" id="demo">

ຕະຫລອດຕົວເອງ

ຄວາມຈຳນວນດ້ານກ້ອງ

<div class="offcanvas offcanvas-bottom" id="demo">

ຕະຫລອດຕົວເອງ