bootstrap学习笔记02-公共样式

1.文字颜色

.text-success:成功绿

.text-danger：危险红

具体样式参考：字体颜色

代码示例：

<!--字体添加样式-->
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>

2.背景颜色

.bg-success:成功绿

.bg-danger：危险红

具体样式参考：背景颜色

代码示例：

<!--给段落添加背景颜色-->
<p class="bg-success">.text-success</p>
<p class="bg-danger">.text-danger</p>

3.边框

1）边框颜色：

.border-success:成功绿

.border-danger：危险红

具体样式参考：边框颜色及样式

代码示例：

<div class="border border-success"></div>

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>

页面显示效果：

5.浮动

.float-left：左浮动

.float-right:右浮动

代码示例：

<!--clearfix清除父元素的浮动，使其可以显示背景颜色-->
<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（内边距）值

详细说明参考链接间隔

代码示例：

<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:快速设置图片等比拉伸

代码示例：

<img src="1.jpg" alt="" class="img-fluid">