ບັດ
ບັດຂອງ Bootstrap ສະຫນອງການບັນຈຸເນື້ອໃນທີ່ມີຄວາມຍືດຫຍຸ່ນແລະສາມາດຂະຫຍາຍໄດ້ດ້ວຍຕົວແປແລະທາງເລືອກທີ່ຫຼາກຫຼາຍ.
ກ່ຽວກັບ
ບັດ ແມ່ນ ບັນ ຈຸເນື້ອໃນທີ່ປ່ຽນແປງໄດ້ ແລະຂະຫຍາຍໄດ້. ມັນປະກອບມີຕົວເລືອກຕ່າງໆສຳລັບສ່ວນຫົວ ແລະສ່ວນທ້າຍ, ເນື້ອຫາຫຼາກຫຼາຍ, ສີພື້ນຫຼັງຂອງບໍລິບົດ, ແລະຕົວເລືອກການສະແດງຜົນທີ່ມີປະສິດທິພາບ. ຖ້າທ່ານຄຸ້ນເຄີຍກັບ Bootstrap 3, ບັດປ່ຽນແທນແຜງເກົ່າ, ນໍ້າສ້າງ, ແລະຮູບຕົວຢ່າງຂອງພວກເຮົາ. ການທໍາງານທີ່ຄ້າຍຄືກັນກັບອົງປະກອບເຫຼົ່ານັ້ນແມ່ນມີຢູ່ໃນຫ້ອງຮຽນແກ້ໄຂສໍາລັບບັດ.
ຕົວຢ່າງ
ບັດແມ່ນສ້າງຂຶ້ນດ້ວຍເຄື່ອງໝາຍ ແລະຮູບແບບໜ້ອຍທີ່ສຸດເທົ່າທີ່ຈະເປັນໄປໄດ້, ແຕ່ຍັງຄົງສາມາດຄວບຄຸມ ແລະປັບແຕ່ງໄດ້ຫຼາຍສົມຄວນ. ສ້າງຂຶ້ນດ້ວຍ flexbox, ພວກເຂົາສະຫນອງການຈັດຕໍາແຫນ່ງທີ່ງ່າຍແລະປະສົມກັບອົງປະກອບ Bootstrap ອື່ນໆ. ພວກມັນບໍ່ມີ margin
ຄ່າເລີ່ມຕົ້ນ, ສະນັ້ນໃຫ້ໃຊ້ ສິ່ງອຳນວຍຄວາມສະ ດວກໄລຍະຫ່າງ ຕາມຄວາມຕ້ອງການ.
ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງບັດພື້ນຖານທີ່ມີເນື້ອໃນປະສົມແລະຄວາມກວ້າງຄົງທີ່. ບັດບໍ່ມີຄວາມກວ້າງຄົງທີ່ເພື່ອເລີ່ມຕົ້ນ, ດັ່ງນັ້ນພວກມັນຈະຕື່ມຄວາມກວ້າງເຕັມຂອງອົງປະກອບຫຼັກຂອງມັນ. ນີ້ແມ່ນປັບແຕ່ງໄດ້ງ່າຍດ້ວຍ ຕົວເລືອກຂະໜາດ ຕ່າງໆຂອງພວກເຮົາ .
ຊື່ບັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ<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 ມາດຕະຖານ.
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
<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>
ອ່າງລ້າງຖ້ວຍ
ປະສົມແລະຈັບຄູ່ເນື້ອຫາຫຼາຍປະເພດເພື່ອສ້າງບັດທີ່ທ່ານຕ້ອງການ, ຫຼືຖິ້ມທຸກສິ່ງທຸກຢ່າງຢູ່ໃນນັ້ນ. ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້ແມ່ນຮູບແບບຮູບພາບ, ບລັອກ, ຮູບແບບຂໍ້ຄວາມ, ແລະກຸ່ມລາຍຊື່ - ທັງຫມົດຖືກຫໍ່ຢູ່ໃນບັດຄວາມກວ້າງຄົງທີ່.
ຊື່ບັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
- ລາຍການ
- ລາຍການທີສອງ
- ລາຍການທີສາມ
<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>
ຮູບພາບ
ບັດປະກອບມີທາງເລືອກຈໍານວນຫນ້ອຍສໍາລັບການເຮັດວຽກກັບຮູບພາບ. ເລືອກຈາກ “ໝວກຮູບ” ໃສ່ທ້າຍບັດ, ວາງຮູບພາບທີ່ມີເນື້ອໃນບັດ, ຫຼືພຽງແຕ່ຝັງຮູບໃສ່ໃນບັດ.
ໝວກຮູບ
ຄ້າຍກັບສ່ວນຫົວ ແລະສ່ວນທ້າຍ, ບັດສາມາດລວມເອົາ “ຮູບໃສ່ຫົວ” ເທິງ ແລະລຸ່ມ—ຮູບພາບຢູ່ເທິງ ຫຼື ລຸ່ມສຸດຂອງບັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
<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>
ການວາງຊ້ອນຮູບພາບ
ປ່ຽນຮູບໃຫ້ເປັນພື້ນຫຼັງບັດ ແລະວາງທັບຂໍ້ຄວາມໃນບັດຂອງເຈົ້າ. ອີງຕາມຮູບພາບ, ທ່ານອາດຈະຕ້ອງການຫຼືບໍ່ຕ້ອງການຮູບແບບຫຼືປະໂຫຍດເພີ່ມເຕີມ.
<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-*
ຫ້ອງຮຽນເພື່ອເຮັດໃຫ້ບັດອອກຕາມລວງນອນຢູ່ md
breakpoint ໄດ້. ອາດຈະຈໍາເປັນຕ້ອງມີການປັບປ່ຽນຕື່ມ ຂຶ້ນກັບເນື້ອໃນບັດຂອງທ່ານ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 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;
ເພື່ອຕິດຢູ່ກັບຂະຫນາດທີ່ເປັນເອກະພາບເລີ່ມຕົ້ນທີ່ sm
breakpoint.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ອັບເດດຫຼ້າສຸດ 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>
ເມື່ອໃຊ້ກຸ່ມບັດທີ່ມີສ່ວນທ້າຍ, ເນື້ອຫາຂອງພວກມັນຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
<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
ແຍກສີ່ບັດໃຫ້ຄວາມກວ້າງເທົ່າທຽມກັນໃນທົ່ວຫຼາຍແຖວ, ຈາກຈຸດແບ່ງຂະຫນາດກາງຂຶ້ນ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
<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
ແລ້ວເຈົ້າຈະເຫັນບັດທີ່ສີ່ຫໍ່.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
<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.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດສັ້ນ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
<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>
ຄືກັນກັບກຸ່ມບັດ, ສ່ວນທ້າຍບັດຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
<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;