ບັດ

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

ໃນໜ້ານີ້

ກ່ຽວກັບ

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

ຕົວຢ່າງ

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

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

ຊື່ບັດ

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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 ພາຍໃນບັດ.

ນີ້ແມ່ນຂໍ້ຄວາມບາງອັນຢູ່ໃນເນື້ອໃນບັດ.

html

<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ລາຍການ, ຫົວຂໍ້ບັດແລະຄໍາບັນຍາຍແມ່ນສອດຄ້ອງກັນ.

ຊື່ບັດ

ຄໍາບັນຍາຍບັດ

ບັດເຊື່ອມຕໍ່ການເຊື່ອມຕໍ່ ອື່ນ

html

<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 ມາດຕະຖານ.

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.

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

html

<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>

ແນະນຳ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

html

<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>

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ສ່ວນທ້າຍບັດ

html

<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>

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

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

ຊື່ບັດ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ບັດເຊື່ອມຕໍ່ການເຊື່ອມຕໍ່ ອື່ນ

html

<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>

ສ່ວນຫົວ ແລະສ່ວນທ້າຍ

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

ແນະນຳ

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

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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*>ອົງປະກອບ.

ແນະນຳ

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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.

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ

html

<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>

ແນະນຳ

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

2 ມື້ກ່ອນຫນ້ານີ້

html

<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, ຫຼືອຸປະກອນ.

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

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

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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>

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

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

ຊື່ບັດ

ປຸ່ມ

ຊື່ບັດ

ປຸ່ມ

html

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

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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>

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

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

html

<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 .

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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">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>

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ

html

<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">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 ນາທີກ່ອນ

html

<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>

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

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

ຊື່ບັດ

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

ໃຫ້ສັງເກດວ່າເນື້ອຫາບໍ່ຄວນໃຫຍ່ກວ່າຄວາມສູງຂອງຮູບ. ຖ້າເນື້ອຫາໃຫຍ່ກວ່າຮູບພາບ, ເນື້ອຫາຈະຖືກສະແດງຢູ່ນອກຮູບພາບ.

ລວງນອນ

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

ຊື່ບັດ

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

html

<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>

ຮູບແບບບັດ

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

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

ເພີ່ມໃນ v5.2.0

ກໍານົດ background-colorກັບ foreground ກົງກັນຂ້າມ colorກັບ ຜູ້ຊ່ວຍ ຂອງພວກເຮົາ.text-bg-{color} . ກ່ອນຫນ້ານີ້, ມັນຈໍາເປັນຕ້ອງຈັບຄູ່ທາງເລືອກຂອງທ່ານ .text-{color}ແລະ ຜົນ .bg-{color}ປະໂຫຍດສໍາລັບການແຕ່ງຕົວ, ເຊິ່ງທ່ານອາດຈະໃຊ້ຖ້າທ່ານຕ້ອງການ.

ສ່ວນຫົວ

ຊື່ບັດຕົ້ນຕໍ

ສ່ວນຫົວ

ຊື່ບັດຮອງ

ສ່ວນຫົວ

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

ສ່ວນຫົວ

ຊື່ບັດອັນຕະລາຍ

ສ່ວນຫົວ

ຊື່ບັດເຕືອນ

ສ່ວນຫົວ

ຊື່ບັດຂໍ້ມູນ

ສ່ວນຫົວ

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

ສ່ວນຫົວ

ຊື່ບັດຊ້ໍາ

html

<div class="card text-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-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-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-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-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-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-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-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ຫຼືຊຸດຍ່ອຍຂອງເນື້ອໃນຂອງບັດດັ່ງທີ່ສະແດງຂ້າງລຸ່ມນີ້.

ສ່ວນຫົວ

ຊື່ບັດຕົ້ນຕໍ

ສ່ວນຫົວ

ຊື່ບັດຮອງ

ສ່ວນຫົວ

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

ສ່ວນຫົວ

ຊື່ບັດອັນຕະລາຍ

ສ່ວນຫົວ

ຊື່ບັດເຕືອນ

ສ່ວນຫົວ

ຊື່ບັດຂໍ້ມູນ

ສ່ວນຫົວ

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

ສ່ວນຫົວ

ຊື່ບັດຊ້ໍາ

html

<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.

ສ່ວນຫົວ

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

ສ່ວນທ້າຍ

html

<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.

ຊື່ບັດ

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

ຊື່ບັດ

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

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

ຊື່ບັດ

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

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

html

<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>

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

ຊື່ບັດ

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

ຊື່ບັດ

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

ຊື່ບັດ

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

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

html

<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ແຍກສີ່ບັດໃຫ້ຄວາມກວ້າງເທົ່າທຽມກັນໃນທົ່ວຫຼາຍແຖວ, ຈາກຈຸດແບ່ງຂະຫນາດກາງຂຶ້ນ.

ຊື່ບັດ

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

ຊື່ບັດ

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

ຊື່ບັດ

html

<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ແລ້ວເຈົ້າຈະເຫັນບັດທີ່ສີ່ຫໍ່.

ຊື່ບັດ

html

<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.

ຊື່ບັດ

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

ຊື່ບັດ

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

html

<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>

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

ຊື່ບັດ

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

ຊື່ບັດ

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

ຊື່ບັດ

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

html

<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 , ແຕ່ພວກເຮົາໄດ້ສ້າງ ຕົວຢ່າງຕົວຢ່າງ ເພື່ອຊ່ວຍໃຫ້ທ່ານເລີ່ມຕົ້ນ.

CSS

ຕົວແປ

ເພີ່ມໃນ v5.2.0

ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຕົວແປ CSS ທີ່ພັດທະນາຂອງ Bootstrap, ບັດໃນປັດຈຸບັນໃຊ້ຕົວແປ CSS ທ້ອງຖິ່ນ .cardສໍາລັບການປັບແຕ່ງເວລາທີ່ແທ້ຈິງ. ຄ່າສໍາລັບຕົວແປ CSS ແມ່ນຖືກກໍານົດຜ່ານ Sass, ດັ່ງນັ້ນການປັບແຕ່ງ Sass ຍັງຖືກສະຫນັບສະຫນູນ, ເຊັ່ນກັນ.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

ຕົວແປ Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;

ບັດ

ກ່ຽວກັບ

ຕົວຢ່າງ

ຊື່ບັດ

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

ຮ່າງກາຍ

ຫົວຂໍ້, ຂໍ້ຄວາມ, ແລະການເຊື່ອມຕໍ່

ຊື່ບັດ

ຄໍາບັນຍາຍບັດ

ຮູບພາບ

ລາຍຊື່ກຸ່ມ

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

ຊື່ບັດ

ສ່ວນຫົວ ແລະສ່ວນທ້າຍ

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

ແນະນຳ

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

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

ຂະໜາດ

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

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

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

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

ຊື່ບັດ

ຊື່ບັດ

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

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

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

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

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

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

ການນໍາທາງ

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

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

ຮູບພາບ

ໝວກຮູບ

ຊື່ບັດ

ຊື່ບັດ

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

ຊື່ບັດ

ລວງນອນ

ຊື່ບັດ

ຮູບແບບບັດ

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

ຊື່ບັດຕົ້ນຕໍ

ຊື່ບັດຮອງ

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

ຊື່ບັດອັນຕະລາຍ

ຊື່ບັດເຕືອນ

ຊື່ບັດຂໍ້ມູນ

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

ຊື່ບັດຊ້ໍາ

ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

ຊາຍແດນ

ຊື່ບັດຕົ້ນຕໍ

ຊື່ບັດຮອງ

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

ຊື່ບັດອັນຕະລາຍ

ຊື່ບັດເຕືອນ

ຊື່ບັດຂໍ້ມູນ

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

ຊື່ບັດຊ້ໍາ

ຜົນປະໂຫຍດ Mixins

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

ແຜນຜັງບັດ

ກຸ່ມບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ບັດຕາຂ່າຍ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

ຊື່ບັດ

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

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