CSS通用样式4——工具类

Bootstrap提供了十几个辅助工具类，包括边框、清除浮动、颜色、display、浮动、定位、文本对
齐等。在开发中可以直接应用这些类，让开发更加快捷和简单。

一.边框

Bootstrap提供了边框类样式，可以快速地添加、删除边框，也可以设置边框的颜色，边框的圆角。
Bootstrap给元素边框设置了.border基类，如果想要加其他的样式，都要在.border的基础上去添加。边框的样式可以组合使用，多个样式之间只需使用空格隔开即可。
1.添加边框

给元素添加border类可以添加四个方向的边框。也可以单独设置某一个方向上的边框。

.border-top：添加上边框

.border-right：添加右边框

.border-bottom：添加下边框

.border-left：添加左边框

2.删除边框

给元素添加border-0类可以移除这四个方向的所有边框。也可以单独移除某一个方向上的边框。
 

3.边框颜色

考虑到Bootstrap提供的.border类默认边框颜色是淡灰色，在实际开发中如果想要修改边框颜色，可以使用.border-*来设置想要的场景颜色。"1*的取值有: primary、secondary、success、danger、warning、info、 iant、dark. white。
 

4.圆角边框 

给元素添加rounder类可以实现圆角边框的效果。也可以单独指定某一个方向上的圆角边框。

 二.清除浮动

通过添加.clearfix工具类，可以快速轻松地清除容器中浮动的内容。为父元素添加.clearfix可以很容易地清除浮动。

三.颜色

网页中通过颜色来传达情景意义、表达不同的模块，在Bootstrap提供了一系列的颜色样式，包括
文本颜色、链接文本颜色、背景颜色等于状态相关的样式。
 

1.文本颜色

 针对上表中文本颜色样式进行介绍。

• 可以使用.text-*将文本设置为指定的颜色。
• .text-light和.text-white在白色背景下看不清楚，可以设置一个黑色的背景来辅助查看效果。
• 可以使用.text-white-数值和.text-black-数值来设置颜色的透明度效果，后面的数值表示的是透明度。如.text-white-50和.text-black-50，分别表示透明度为0.5的白色或黑色文本。

 2.链接颜色

文本颜色类也能够应用在超链接上，当鼠标悬停在超链接或超链接获取焦点时，文本颜色会变暗

 

3.背景颜色

Bootstrap中定义了一套类名，用来设置文本背景色，

 

四.display属性

通过给元素添加display属性类，可以快速的切换元素的显示或隐藏等状态。
1.基本使用

在bootstrap中更改元素的显示或隐藏状态，可以使用d-{sm,md,lg,xl}-value类样式。其中value的取值说明如下：

none：隐藏元素

inline：显示为内联元素

inline-block :行内块元素

block：显示为块元素

table：作为一个块级表格显示

table-cell：作为一个表格单元格显示

table-row：作为一个表格行显示

flex：作为弹性伸缩盒显示

inline-flex：作为内联块级弹性伸缩盒显示

下面实例中，使用d-inline类样式设置div为内联元素，使用d-block类样式设置span为块级元素

2. 实现响应式

五.浮动

使用Bootstrap提供的float浮动通用样式，可以实现往左或往右浮动。也可以在任何设备断点上切换浮动，即实现响应式切换浮动。
 响应式浮动

六.定位

Boostrap提供了定位属性类可以实现对元素的位置进行设定，包括将元素固定在顶部、固定在底部
以及定位。

.position-static：无定位

.position-relative：相对定位

.position-absolute：绝对定位

.position-fixed：固定定位

.position-sticky：黏性定位

.sticky-top：黏性定位top阈值类

.fixed-top：固定在顶部

.fixed-bottom：固定在底部

七. 文本对齐：

Bootstrap定义了一些样式类，用来控制文本的水平对齐方式，包括左对齐、右对齐、居中对齐，
两端对齐。
text-right：右对齐

text-center：居中对齐

text-justify：两端对齐