bootstrap学习笔记02-公共样式

快来打我* 2024-04-19 10:10 70阅读 0赞

1.文字颜色

.text-success:成功绿

.text-danger：危险红

具体样式参考：[字体颜色][Link 1]

代码示例：

<p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>

2.背景颜色

.bg-success:成功绿

.bg-danger：危险红

具体样式参考：[背景颜色][Link 1]

代码示例：

<p class="bg-success">.text-success</p>
    <p class="bg-danger">.text-danger</p>

3.边框

1）边框颜色：

.border-success:成功绿

.border-danger：危险红

具体样式参考：[边框颜色及样式][Link 2]

代码示例：

2）圆角边框

代码示例：

<div class="border rounded"></div>
    
    <div class="border rounded-circle"></div>
    
    <div class="border rounded-pill"></div>
    
    <div class="border rounded-0"></div>

4.显示属性

`.d-{value}` 用于小屏幕适配（即手机适配）

`.d-{breakpoint}-{value}` 用于 `sm`、`md`、`lg`、`xl`等多设备适配

代码示例：

<p class="bg-success d-inline">我是时代峰峻收到后</p>

页面显示效果：

![20190917094149533.png][]

5.浮动

.float-left：左浮动

.float-right:右浮动

代码示例：

<div class="bg-success clearfix">
        <div class="float-left">左浮动</div>
        <div class="float-right">右浮动</div>
    </div>

6.间隔

`m` - 这个Class属性会设定 `margin（外边距）`值。m-0清除`margin，m-auto水平居中`

`p` - 这个Class属性会设定 `padding（内边距）`值

详细说明参考链接[间隔][Link 3]

代码示例：

<div class="bg-success m-2" style="height: 100px; width: 100px;">我是div</div>
    <div class="bg-success p-2" style="height: 100px; width: 100px;">我是div</div>

7.快速去除项目符号

.list-unstyled：快速去除项目符号

代码示例：

<ul class="list-unstyled">
        <li>jkjkj</li>
        <li>jkjkj</li>
        <li>jkjkj</li>
    </ul>

8.快速设置图片等比拉伸

.img-fluid:快速设置图片等比拉伸

代码示例：

[Link 1]: http://code.z01.com/v4/utilities/colors.html
[Link 2]: http://code.z01.com/v4/utilities/borders.html
[20190917094149533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0162fd6ea7b74a6398f4794280fa1a9c.png
[Link 3]: http://code.z01.com/v4/utilities/spacing.html