第八章 辅助类
文字类
| 类 | 描述 |
|---|---|
| .text-muted | “text-muted” 类的文本样式 |
| – | – |
| .text-primary | “text-primary” 类的文本样式 |
| – | – |
| .text-success | “text-success” 类的文本样式 |
| – | – |
| .text-info | “text-info” 类的文本样式 |
| – | – |
| .text-warning | “text-warning” 类的文本样式 |
| – | – |
| .text-danger | “text-danger” 类的文本样式 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<p class="text-danger">哈哈哈哈</p>
<p class="text-warning">哈哈哈哈</p>
<p class="text-info">哈哈哈哈</p>
<p class="text-muted">哈哈哈哈</p>
<p class="text-primary">哈哈哈哈</p>
<p class="text-success">哈哈哈哈</p>
</div>
</body>
</html>
背景类
| 类 | 描述 |
|---|---|
| .bg-primary | 表格单元格使用了 “bg-primary” 类 |
| – | – |
| .bg-success | 表格单元格使用了 “bg-success” 类 |
| – | – |
| .bg-info | 表格单元格使用了 “bg-info” 类 |
| – | – |
| .bg-warning | 表格单元格使用了 “bg-warning” 类 |
| – | – |
| .bg-danger | 表格单元格使用了 “bg-danger” 类 |
其他类
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
<style type="text/css">
.box{
width: 200px;
height: 100px;
border: 1px solid red;
}
.box1{
width: 200px;
height: 100px;
border: 1px solid red;
}
span{
width: 200px;
height: 100px;
border: 1px solid red;
}
/* .bb{
clear: both;
} */
</style>
</head>
<body>
<div class="container">
<p class="box pull-right">哈哈哈</p>
<div class="bb clearfix"></div>
<p class="box1">呵呵呵</p>
<span class="center-block pull-left">啦啦啦</span>
</div>
</body>
</html>
![响应式前端框架Bootstrap系列（15）面板[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)