Bootstrap 5 ປະກາດຄຳເວົ້າ/ການຈັດສັນ
- ບ່ອນໜ້າທີ່ກ່ອນ ພາກສ່ວນທີ່ມີສະໜອງຂອງ BS5
- ບ່ອນໜ້າຫລັງ ສີ BS5
Bootstrap 5 默认设置
Bootstrap 5 默认 font-size
为 1rem(默认为 16px),line-height
为 1.5。
此外,所有 <p>
元素都设置了 margin-top: 0
和 margin-bottom: 1rem
(默认为 16px)。
<h1> - <h6>
Bootstrap 5 把 HTML 标题(<h1>
到 <h6>
)的样式设置为有更粗的 font-weight 以及响应式的 font-size。
ຕົວຢ່າງ
如果需要,您还可以在其他元素上使用 .h1
到 .h6
类,使它们表现为标题:
ຕົວຢ່າງ
<p class="h1">h1 Bootstrap heading</p> <p class="h2">h2 Bootstrap heading</p> <p class="h3">h3 Bootstrap heading</p> <p class="h4">h4 Bootstrap heading</p> <p class="h5">h5 Bootstrap heading</p> <p class="h6">h6 Bootstrap heading</p>
display 标题
display 标题用于比普通标题更突出(更大的 font-size 和更细的 font-weight),有六个类可供选择:.display-1
到 .display-6
:
ຕົວຢ່າງ
当引用其他来源的内容块时,请将 .blockquote
类添加到 。当命名来源时,例如“来自世界自然基金会的网站”,请使用
.blockquote-footer
类:
ຕົວຢ່າງ
ນັກກົດພິມອີກຫລາຍ
ນັກກົດພິມ Bootstrap 5 ທີ່ມີຂຶ້ນພາຍໃນ HTML ຂອງສິນລະປະກອບ ສາມາດຕື່ມເຂົ້າໃນການຈັດການສິນລະປະກອບ HTML.
ນັກກົດພິມ | ສະແດງ | ຕົວຢ່າງ |
---|---|---|
.lead |
ການສະແດງວິຫານລະບົບ. | ທົດລອງອີກ |
.text-left |
ກໍານົດຂໍ້ຄວາມທີ່ຕິດຕັ້ງທາງຊ້າຍ. | ທົດລອງອີກ |
.text-break |
ປ້ອງກັນການທຳລາຍການຈັດການຕັ້ງທີ່ຫລຸດການຕັ້ງທີ່ຫລຸດ. | ທົດລອງອີກ |
.text-center |
ກໍານົດຂໍ້ຄວາມທີ່ຕິດຕັ້ງທາງກາງ. | ທົດລອງອີກ |
.text-decoration-none |
ລົບກົນລາຍການສີສົ່ງທີ່ຢູ່ໃນທໍານາຍ. | ທົດລອງອີກ |
.text-end |
ກໍານົດຂໍ້ຄວາມທີ່ຕິດຕັ້ງທາງຊ້າຍ. | ທົດລອງອີກ |
.text-nowrap |
ກໍານົດຂໍ້ຄວາມທີ່ບໍ່ຕ້ອງຫລຸດການຫົວໜ້າ. | ທົດລອງອີກ |
.text-lowercase |
ກໍານົດຂໍ້ຄວາມທີ່ເປັນຄຳສັບຄຳນັກພິມ. | ທົດລອງອີກ |
.text-uppercase |
ກໍານົດຂໍ້ຄວາມທີ່ເປັນຄຳສັບຄຳນັກພິມ. | ທົດລອງອີກ |
.text-capitalize |
ກໍານົດຂໍ້ຄວາມທີ່ເປັນຄຳສັບຄຳນັກພິມ. | ທົດລອງອີກ |
.initialism |
ສະແດງຂໍ້ຄວາມທີ່ຢູ່ໃນ <abbr> ທີ່ມີຫົວຂໍ້ນ້ອຍກວ່າ. | ທົດລອງອີກ |
.list-unstyled |
ລົບກົນລະບຽບລາຍການລັກສະນະລະບົບສະໜອງແລະສາຍພາຍສະໜອງທີ່ຢູ່ທາງຊ້າຍ (ສະໜອງໃຫ້ <ul> ແລະ <ol>). ນີ້ພຽງແຕ່ຕົກພັນລາຍການທີ່ມີຫລັງກັນທັງໝົດ. ຖ້າຕ້ອງການລົບກົນລະບຽບລາຍການລັກສະນະລະບົບສະໜອງຈາກລາຍການລະບົບລັກສະນະພາຍໃນ, ການສະໜອງນີ້ຄວນຖືກນຳໃຊ້ຕາມລາຍການລັກສະນະພາຍໃນ. |
ທົດລອງອີກ |
.list-inline |
ການປະກອບລາຍການທັງໝົດໃນເຫດການກັນຫລັງຈາກກັນ. ພວກມັນຄວນຖືກໃຊ້ກັບ <li> ແບບ .list-inline-item. |
ທົດລອງອີກ |
- ບ່ອນໜ້າທີ່ກ່ອນ ພາກສ່ວນທີ່ມີສະໜອງຂອງ BS5
- ບ່ອນໜ້າຫລັງ ສີ BS5