【Bootstrap】009-全局样式：辅助类

谁借莪１个温暖的怀抱￠ 2023-10-05 11:05 7阅读 0赞

# **目录** #

一、情境文本颜色

1、说明

2、演示

代码演示：

运行结果：

3、处理差异

4、向辅助技术传递意义

二、情景背景色

1、说明

2、演示

代码演示：

运行结果：

3、处理差异

4、向辅助技术传递意义

三、关闭按钮

1、说明

2、演示

代码演示：

运行结果：

四、三角符号

1、说明

2、演示

代码演示：

运行结果：

五、快速浮动

1、说明

2、演示

代码演示：

运行结果：

3、CSS源码

六、让内容块居中

1、说明

2、演示

代码演示：

运行结果：

3、CSS源码

七、清除浮动

1、说明

2、演示

代码演示：

运行结果：

八、显示或隐藏内容

1、说明

2、演示

代码演示：

运行结果：

3、CSS源码

九、屏幕阅读器和键盘导航

1、说明

2、演示

代码演示：

运行结果：

3、CSS源码

十、图片替换

1、说明

2、演示

代码演示：

运行结果：

--------------------

# 一、情境文本颜色 #

## 1、说明 ##

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		<p class="text-muted">柔和</p>
    		<p class="text-primary">基本</p>
    		<p class="text-success">成功</p>
    		<p class="text-info">信息</p>
    		<p class="text-warning">警告</p>
    		<p class="text-danger">危险</p>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 3、处理差异 ##

有时，由于另一个选择器的特殊性，强调类不能应用。在大多数情况下，一个充分的解决办法是用类将文本包装在 < span > 中；

## 4、向辅助技术传递意义 ##

使用颜色来增加意义只提供一个视觉指示，而不会传达给使用辅助技术的用户，例如屏幕阅读器。确保用颜色表示的信息从内容本身来看是显而易见的(上下文颜色只用于强化已经存在于文本/标记中的含义) ，或者通过其他方式包含，例如使用.sr-only class。

# 二、情景背景色 #

## 1、说明 ##

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		<p class="bg-primary">基本</p>
    		<p class="bg-success">成功</p>
    		<p class="bg-info">信息</p>
    		<p class="bg-warning">警告</p>
    		<p class="bg-danger">危险</p>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 3、处理差异 ##

有时，由于另一个选择器的特殊性，上下文背景类无法应用。在某些情况下，一个充分的解决办法是将元素的内容包装在 < div > 中并与class一起使用；

## 4、向辅助技术传递意义 ##

与上下文的颜色一样，确保通过颜色传达的任何意义也是以一种非纯粹表象的格式传达的；

# 三、关闭按钮 #

## 1、说明 ##

通过使用一个象征关闭的图标，可以让模态框和警告框消失；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

# 四、三角符号 #

## 1、说明 ##

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的；

## 2、演示 ##

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

# 五、快速浮动 #

### 1、说明 ###

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用；

![20201005093522195.png][]

## 2、演示 ##

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

## 3、CSS源码 ##

// Classes
    .pull-left {
      float: left !important;
    }
    .pull-right {
      float: right !important;
    }
    
    // Usage as mixins
    .element {
      .pull-left();
    }
    .another-element {
      .pull-right();
    }

# 六、让内容块居中 #

## 1、说明 ##

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		
    		<div class="center-block" style="width:150px;background-color:#ff0000;">居中</div>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

## 3、CSS源码 ##

// Class
    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    // Usage as a mixin
    .element {
      .center-block();
    }

# 七、清除浮动 #

## 1、说明 ##

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		
    		
    		<div class="clearfix">
    			清除浮动
    			<div style="float: left;">右普通浮动</div>
    			<div class="pull-left">左快速浮动</div>
    			<div class="pull-right">右快速浮动</div>
    		</div>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

# 八、显示或隐藏内容 #

## 1、说明 ##

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用；

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only ；

另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布；

## 2、演示 ##

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7][]

## 3、CSS源码 ##

// Classes
    .show {
      display: block !important;
    }
    .hidden {
      display: none !important;
    }
    .invisible {
      visibility: hidden;
    }
    
    // Usage as mixins
    .element {
      .show();
    }
    .another-element {
      .hidden();
    }

# 九、屏幕阅读器和键盘导航 #

## 1、说明 ##

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		<p> .sr-only 类除了屏幕阅读器外，其他设备上都隐藏元素:</p>
    		<a class="sr-only" href="#">跳转到主要内容</a>
    		<p>与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户):</p>
    		<a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8][]

## 3、CSS源码 ##

// Usage as a mixin
    .skip-navigation {
      .sr-only();
      .sr-only-focusable();
    }

# 十、图片替换 #

## 1、说明 ##

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图；

## 2、演示 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    	</head>
    	<body>
    		<p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
    		<div class="text-hide">在 div 元素中插入一些文本。</div>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201005092443770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020100509281440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201005093043138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020100509320880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20201005093522195.png]: https://img-blog.csdnimg.cn/20201005093522195.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201005093409122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201005094504360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020100509500175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201005095210971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2020100509570655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201005100032996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70