Bootstrap 工具类

2024-01-24 13:58:10

公共样式
1. 使用.close 和&times 构建一个关闭按钮；

<button type="button" class="close" aria-label="关闭">
    <span aria-hidden="true">&times;</span>
</button>

2. 使用.clearfix 给浮动的区域的父元素添加，实现清理浮动的功能；

div.border {
width: 200px;
height: 200px;
}
<div class="clearfix">
    <div class="float-left border border-success">left</div>
    <div class="float-right border border-success">right</div>
</div>
<div class="border border-warning">both</div>

3. 使用.float-left、.float-right、.float-none 实现浮动效果；
4. 还可以使用.float-*-left 等来实现不同屏幕的浮动效果；

<div class="float-md-left border border-success">left</div>
<div class="float-md-right border border-success">right</div>

5. 使用.text-hide 来隐藏元素标签内容，但本身还存在保持 SEO 优化；

<h1 class="text-hide" style="background:url('img/img1.png');">
　　Bootstrap4.x
</h1>

6. 使用.overflow-auto 和.overflow-hidden 来设置区域显示方式；

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

7. 使用.visible 和.invisible 来设置内容可见或不可见；

<div class="visible">Bootstrap4.x</div>
<div class="invisible">Bootstrap4.x</div>

8. 使用.align-*来设置内容文本的对齐方式；

<span class="align-baseline">baseline 基准</span>
<span class="align-text-top">text-top 文本顶部</span>
<span class="align-top">top 顶部</span>
<span class="align-middle">middle 垂直居中</span>
<span class="align-bottom">bottom 底部</span>
<span class="align-text-bottom">text-bottom 文本底部</span>
<table class="table table-bordered" style="height: 200px;">
    <tbody>
        <tr>
            <td class="align-baseline">baseline</td>
            <td class="align-top">top</td>
            <td class="align-middle">middle</td>
            <td class="align-bottom">bottom</td>
            <td class="align-text-top">text-top</td>
            <td class="align-text-bottom">text-bottom</td>
        </tr>
    </tbody>
</table>

PS：垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、
表格单元格 table cell 元素

9. 使用.p-*来设置内边距(padding)，范围在 0-5 之间和 auto；

<span class="p-5">Bootstrap4.x</span>

10. 使用.m-*来设置外边距(margin)，范围在 0-5 之间和 auto；

<span class="m-5">Bootstrap4.x</span>

11. 使用.pt-*或 mt-*设置边缘的距离，这里的 t 可以是 top；
12. 其它的还有 b(bottom)、l(left)、r(right)等；

<span class="pt-5">Bootstrap4.x</span>
<span class="mt-5">Bootstrap4.x</span>

13. 使用.px-*或 mx-*设置左右边缘的距离，这里的 x 表示(left、right);

<span class="px-5">Bootstrap4.x</span>
<span class="mx-5">Bootstrap4.x</span>

14. 使用.py-*或 my-*设置上下边缘的距离，这里的 y 表示(top、bottom)；

<span class="py-5">Bootstrap4.x</span>
<span class="my-5">Bootstrap4.x</span>

15. 使用.pt-*-5，*可以是 md、lg 等响应式的方式来设置边缘；
16. 使用.w-*设置元素的长度，包括 25%、50%、75%、100%和 auto；

<div class="p-3 w-25 bg-info">25%</div>
<div class="p-3 w-50 bg-info">50%</div>
<div class="p-3 w-75 bg-info">75%</div>
<div class="p-3 w-100 bg-info">100%</div>
<div class="p-3 w-auto bg-info">auto</div>

17. 使用.h-*设置元素的高度，包括 25%、50%、75%、100%和 auto；

<div class="border border-success">
    <div class="p-3 h-25 bg-info d-inline-block">25%</div>
    <div class="p-3 h-50 bg-info d-inline-block">50%</div>
    <div class="p-3 h-75 bg-info d-inline-block">75%</div>
    <div class="p-3 h-100 bg-info d-inline-block">100%</div>
    <div class="p-3 h-auto bg-info d-inline-block">auto</div>
</div>

18. 使用.mw-*和.mh-*设置 max-width 和 max-height；

<div class="p-3 mw-100 mh-100 bg-info">max-100%</div>

19. 使用.vw-*和.vh-*设置相对于窗口的大小；

<div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>

20. 使用.shadow-*实现元素的阴影效果；

<div class="shadow-none mb-5">Bootstrap4.x</div>
<div class="shadow-sm mb-5">Bootstrap4.x</div>
<div class="shadow mb-5">Bootstrap4.x</div>
<div class="shadow-lg mb-5">Bootstrap4.x</div>

21. 使用.d-*来设置元素的 display 模式，比如 inline、block 等；
22. none、inline、inline-block、block、table、table-row
23. flex、inline-flex 这些常用的均为 display 可以设置的模式；

<div class="p-2 bg-info d-inline">Bootstrap4.x</div>

24. 也可以通过.d-md-*中的 md 设置响应式的媒体查询效果；

<div class="p-2 bg-info d-md-none">Bootstrap4.x</div>

25. 使用.embed-responsive 实现嵌入响应式，比如<iframe>、<embed>等；
26. 再使用.embed-responsive-16by9 实现响应式比例，还可以 21:9，4:3，1:1；

<div class="embed-responsive embed-responsive-21by9">
    <iframe src="http://www.baidu.com"></iframe>
</div>

27. 使用.text-*设置文本的对齐方式，有 left、center、right；
28. 也可以设置.text-md-*实现响应式的媒体查询效果；

<div class="p-2 text-center">Bootstrap4.x</div>

29. 使用.text-warp 和.text-nowarp 实现文本溢出时是否换行；

<div class="p-2 text-nowrap text-center" style="width: 6rem;">Bootstrap 4.x</div>

30. 使用.text-break 对于很长的字符串，且中间没有空格实现换行；

<div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>

31. 使用.text-lowercase 设置小写，.text-uppercase 设置大写，以及
.text-capitalize 设置首字母大写；

<div class="p-2 text-lowercase">the bootstrap4.x</div>
<div class="p-2 text-uppercase">the bootstrap4.x</div>
<div class="p-2 text-capitalize">the bootstrap4.x</div>

32. 使用.font-weight-bold 加粗、.font-weight-normal 正常、
.font-weight-light 纤细、.font-weight-italic 倾斜；

<div class="p-2 font-weight-bold">Bootstrap4.x</div>
<div class="p-2 font-weight-normal">Bootstrap4.x</div>
<div class="p-2 font-weight-light">Bootstrap4.x</div>
<div class="p-2 font-italic">Bootstrap4.x</div>

33. 使用.text-monospace 设置等宽字体；

<div class="p-2 text-monospace">Bootstrap 4.x</div>

34. 使用.text-reset 实现字体颜色的重置；

<div class="text-muted">
    Bootstrap 最新版本： <a href="#" class="text-reset">V4.3</a>
</div>

35. 使用.text-decoration-none 删除超链接下划线；

<a href="#" class="text-decoration-none">V4.3</a>

内容选自李炎恢的Bootstrap v4.x教程笔记

码农公寓

相关文章