目录
一、情境文本颜色
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<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>
运行结果：
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<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>
运行结果：
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<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>
运行结果：
四、三角符号
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<span class="caret"></span>
</body>
</html>
运行结果：
五、快速浮动
1、说明
通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用；
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<div class="pull-left">左浮动</div>
<div class="pull-right">右浮动</div>
</body>
</html>
运行结果：
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<!-- 这里必须设置style才能实现居中 -->
<div class="center-block" style="width:150px;background-color:#ff0000;">居中</div>
</body>
</html>
运行结果：
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<!-- Usage as a class -->
<!-- 这个只能清除普通浮动，bootstrap自己的快速浮动是无法清除的 -->
<div class="clearfix">
清除浮动
<div style="float: left;">右普通浮动</div>
<div class="pull-left">左快速浮动</div>
<div class="pull-right">右快速浮动</div>
</div>
</body>
</html>
运行结果：
八、显示或隐藏内容
1、说明
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用；
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only ；
另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布；
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<div class="show">显示</div>
<div class="hidden">隐藏</div>
</body>
</html>
运行结果：
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<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>
运行结果：
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
<div class="text-hide">在 div 元素中插入一些文本。</div>
</body>
</html>
运行结果：
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
