Bootstrap 5 实用工具
- 上一页 BS5 Offcanvas
- 下一页 BS5 Flex
Utilities / Helper Classes
Bootstrap 5 ມີປະເພດຊັບພະຍານສຳລັບການຈັດວັດຖຸວັດຖຸປະກອບສັນວັດບໍ່ຕ້ອງໃຊ້ລະບັບ CSS:
ຊາຍ
ການໃຊ້ປະເພດເຂົ້າຊາຍກັບປະເພດເລກກະຕຸບາຍຂອງບັນດາປະກອບສັນວັດໃຫ້ບຸກລະດັບມີຊາຍຫຼືບໍ່ມີຊາຍ:
实例
<span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> <br> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span>
ວົງວຽນກວ້າງ
使用 .border-1 ໄປ .border-5 ເພື່ອປ່ຽນວົງວຽນກວ້າງຂອງວົງວຽນ:
实例
<span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>
ສີວົງວຽນ
ນຳໃຊ້ປະເພດສີກັບສັນຍາວົງວຽນທີ່ສະເພາະນັ້ນຈະເພີ່ມສີກັບວົງວຽນ:
实例
<span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span>
ວົງວຽນກາບຂອງເຂົ້າ
使用 rounded ພິມກັບແຜງກະດາການວົງວຽນ
实例
<span class="rounded"></span> <span class="rounded-top"></span> <span class="rounded-end"></span> <span class="rounded-bottom"></span> <span class="rounded-start"></span> <span class="rounded-circle"></span> <span class="rounded-pill" style="width:130px"></span> <span class="rounded-0"></span> <span class="rounded-1"></span> <span class="rounded-2"></span> <span class="rounded-3"></span>
ການປິນແລະການລົບການປິນ
使用 .float-end ປະເພດການປິນເທິງຂ້າງຊ້າຍ, ຫຼືໃຊ້ .float-start ປິນເທິງຂ້າງຊ້າຍ, ແລະໃຊ້ .clearfix ປະເພດການລົບການປິນ:
实例
<div class="clearfix"> <span class="float-start">ປິນເທິງຂ້າງຊ້າຍ</span> <span class="float-end">ປິນເທິງຂ້າງຊ້າຍ</span> </div>
ປິນຕອບສະໜອງ
ພິມສະຖານທີ່ຢູ່ຂ້າງຊ້າຍຫຼືຂ້າງຊ້າຍຍ້ອນການກວດສອບຂະໜາດໜ້າຈໍານວນ, ນຳໃຊ້ປະເພດປິນຕອບສະໜອງ (.float-*-left|right) ດັ່ງນັ້ນ * ແມ່ນ:
sm(> = 576px)md(> = 768px)lg(> = 992px)xl(> = 1200px)xxl(> = 1400px)
实例
<div class="float-sm-end">ປິນເທິງໜ້າຈໍານວນຫຼາຍຫຼືຫຼາຍກວ່າຈໍານວນຫຼາຍ</div><br> <div class="float-md-end">ປິນເທິງໜ້າຈໍານວນຫຼາຍຫຼືຫຼາຍກວ່າຈໍານວນຫຼາຍ</div><br> <div class="float-lg-end">ປິນເທິງໜ້າຈໍານວນຫຼາຍຫຼືຫຼາຍກວ່າຈໍານວນຫຼາຍ</div><br> <div class="float-xl-end">ປິນເທິງໜ້າຈໍານວນຫຼາຍຫຼືຫຼາຍກວ່າຈໍານວນຫຼາຍ</div><br> <div class="float-xxl-end">ປິນເທິງໜ້າຈໍານວນຫຼາຍຫຼືຫຼາຍກວ່າຈໍານວນຫຼາຍ</div><br> <div class="float-none">ບໍ່ມີການປິນ</div>
ການຈັດຢູ່ກາງ
使用 .mx-auto ປະເພດສະຖານທີ່ຢູ່ກາງ (ສຳລັບ margin-left ແລະ margin-right: auto):
实例
<div class="mx-auto bg-warning" style="width:150px">ການການສູນກາງ</div>
ວົງກວ້າງ
ນຳໃຊ້ປະເພດ w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）ການກະກຽມເພດວົງກວ້າງຂອງປະກອບ:
实例
<div class="w-25 bg-warning">ວົງກວ້າງ 25%</div> <div class="w-50 bg-warning">ວົງກວ້າງ 50%</div> <div class="w-75 bg-warning">ວົງກວ້າງ 75%</div> <div class="w-100 bg-warning">ວົງກວ້າງ 100%</div> <div class="w-auto bg-warning">ກວ້າງສູງສູງ</div> <div class="mw-100 bg-warning">ເພດກວ້າງ 100%</div>
ສູງ
ນຳໃຊ້ປະເພດ h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）ການກະກຽມສູງຂອງປະກອບ:
实例
<div style="height:200px;background-color:#ddd"> <div class="h-25 bg-warning">ສູງ 25%</div> <div class="h-50 bg-warning">ສູງ 50%</div> <div class="h-75 bg-warning">ສູງ 75%</div> <div class="h-100 bg-warning">ສູງ 100%</div> <div class="h-auto bg-warning">ສູງສູງສູງສູງ</div> <div class="mh-100 bg-warning" style="height:500px">ສູງສູງສູງ 100%</div> </div>
ຂອບຂອງຄວາມກວດ
Bootstrap 5 ມີປະເພດການຕອບສະໜອງ margin ແລະ padding ທີ່ກວ້າງຂວາງ. ພວກມັນຕົກຕາມບັນດາບັນຫາ:
xs(<= 576px)sm(> = 576px)md(> = 768px)lg(> = 992px)xl(> = 1200px)xxl(> = 1400px)
ການນຳໃຊ້ຂອງປະເພດນີ້ແມ່ນ:{property}{sides}-{size} ສຳລັບ xs，ແລະ {property}{sides}-{breakpoint}-{size} ສຳລັບ sm、md、lg、xl ແລະ xxl。
property ມີເປັນໜຶ່ງຈາກນີ້:
m- ການປະກັນmarginp- ການປະກັນpadding
sides ມີເປັນໜຶ່ງຈາກນີ້:
t- ການປະກັນmargin-top或padding-topb- ການປະກັນmargin-bottom或padding-bottoms- ການປະກັນmargin-left或padding-lefte- ການປະກັນmargin-right或padding-rightx- ການປະກັນຮ່ວມpadding-leftແລະpadding-right或margin-leftແລະmargin-righty- ການປະກັນຮ່ວມpadding-topແລະpadding-bottom或margin-topແລະmargin-bottom- blank - ການປະກັນຂ້າງທັງສີ່ຝາຍຂອງວິທະຍັກ
margin或padding
size ມີເປັນໜຶ່ງຈາກນີ້:
0- ຕື່ມmargin或paddingການປະກັນໃຫ້ເປັນ01- ຕື່ມmargin或paddingການປະກັນໃຫ້ເປັນ.25rem2- ຕື່ມmargin或paddingການປະກັນໃຫ້ເປັນ.5rem3- ຕື່ມmargin或paddingການປະກັນໃຫ້ເປັນ1rem4- ຕື່ມmargin或paddingການປະກັນໃຫ້ເປັນ1.5rem5- ຕື່ມmargin或paddingການປະກັນໃຫ້ເປັນ3remauto- ຕື່ມmarginການປະກັນໃຫ້ເປັນ auto
实例
<div class="pt-4 bg-warning">ຂ້າພວກເຮົາມີພຽງການປະກອບດ້ານເທິງ (1.5rem)</div> <div class="p-5 bg-success">ຂ້າງຂອງຂ້າພວກເຮົາມີການປະກອບຂ້າງນອກ (3rem)</div> <div class="m-5 pb-5 bg-info">ຂ້າງຂອງຂ້າພວກເຮົາມີການປະກອບນອກ (3rem) ແລະ ການປະກອບດ້ານກ້າວ (3rem)</div>
ຕົວຢ່າງການປະກອບຂອງຂະໜາດຫຼາຍກ່ຽວກັບ
| .m-# / m-*-# | ປະກອບທັງສອງການປະກອບນອກ | ການທົດລອງ |
| .mt-# / mt-*-# | ຂ້າງເທິງ | ການທົດລອງ |
| .mb-# / mb-*-# | ຂ້າງດ້ານກ້າວ | ການທົດລອງ |
| .ms-# / ms-*-# | ຂ້າງຊ້າຍ | ການທົດລອງ |
| .me-# / me-*-# | ຂ້າງຊ້າຍນອກ | ການທົດລອງ |
| .mx-# / mx-*-# | ຂ້າງຊ້າຍແລະຊ້າຍນອກ | ການທົດລອງ |
| .my-# / my-*-# | ຂ້າງເທິງແລະຂ້າງດ້ານກ້າວ | ການທົດລອງ |
| .p-# / p-*-# | ປະກອບທັງສອງການປະກອບຂ້າງນອກ (ການຂວາງ) | ການທົດລອງ |
| .pt-# / pt-*-# | ຂ້າງເທິງ | ການທົດລອງ |
| .pb-# / pb-*-# | ຂ້າງດ້ານກ້າວ | ການທົດລອງ |
| .ps-# / ps-*-# | ຂ້າງຊ້າຍ | ການທົດລອງ |
| .pe-# / pe-*-# | ຂ້າງຊ້າຍນອກ | ການທົດລອງ |
| .py-# / py-*-# | ຂ້າງເທິງແລະຂ້າງດ້ານກ້າວ | ການທົດລອງ |
| .px-# / px-*-# | ຂ້າງຊ້າຍແລະຊ້າຍນອກ | ການທົດລອງ |
ທ່ານສາມາດອ່ານໃນຕຳຫຼວດຂອງພວກເຮົາ: ຄູ່ມວນຊົນສະເພາະຈຸດຄຳນວຍມາຍ ການອ່ານຫຼາຍກ່ຽວກັບ rem ແລະ ສະເພາະຈຸດຂະໜາດ.
ສັບສານ
请使用 shadow- ປະເພດວິທະຍັກແມ່ນສະເພາະມີສັບສານ:
实例
<div class="shadow-none p-4 mb-4 bg-light">ບໍ່ມີສັບສານ</div>小型阴影默认阴影大型阴影
垂直对齐
请使用 align- 类更改元素的对齐方式（仅适用于 inline、 inline-block、inline-table 和表格单元格元素）：
实例
baseline top middle bottom text-top text-bottom
纵横比
根据父级的宽度创建响应式视频或幻灯片。
ຕື່ມ .ratio ປະເພດວິທະຍາກັບສ່ວນຕົວທີ່ເຈົ້າເລືອກ .aspect-ratio-* ຕື່ມໃຫ້ແກ່ປະກອບຂໍ້ພາຍໃນພາຍໃຕ້ພາຍໃຫ້ແກ່ປະກອບສາຍພາຍໃຫ້ແກ່ບັນທຶກພາບພາບວິດີໂອຫຼື iframe:
实例
<!-- Aspect ratio 1:1 --> <div class="ratio ratio-1x1"> <iframe src="shanghai.mp4"></iframe> </div> <!-- Aspect ratio 4:3 --> <div class="ratio ratio-4x3"> <iframe src="shanghai.mp4"></iframe> </div> <!-- Aspect ratio 16:9 --> <div class="ratio ratio-16x9"> <iframe src="shanghai.mp4"></iframe> </div> <!-- Aspect ratio 21:9 --> <div class="ratio ratio-21x9"> <iframe src="shanghai.mp4"></iframe> </div>
ຄວາມເປັນເບື່ອງ
使用 .visible 或 .invisible ປະເພດວິທະຍາຍັງສາມາດຄວບຄຸມຄວາມເປັນເບື່ອງຂອງປະກອບຂໍ້ຂັດແຍ່ງ:
ລົງຄວາມຄິດ:ເຄື່ອງໝາຍນີ້ບໍ່ໄດ້ປ່ຽນຄູ່ມູນຂອງ CSS display value. ພວກເຂົາພຽງແຕ່ຕື່ມ visibility:visible 或 visibility:hidden。
实例
我是可见的。我是不可见的。
屏幕阅读器
使用 .visually-hidden 类可在所有设备上隐藏元素，屏幕阅读器除外：
实例
I will be hidden on all screens except for screen readers.
颜色
如“颜色”一章所述，下面列出了所有文本和背景颜色类的列表：
针对文本颜色的类是：
.text-muted.text-primary.text-success.text-info.text-warning.text-danger.text-secondary.text-white.text-dark.text-body（默认 body 颜色/通常为黑色）.text-light
实例
上下文文本类也可用于链接：
实例
您还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度：
实例
背景色
针对背景颜色的类是：
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
请注意，背景颜色不会设置文本颜色，因此在某些情况下，您需要将它们与 .text-* 类一起使用。
实例
- 上一页 BS5 Offcanvas
- 下一页 BS5 Flex
