第八章 輔助類
文字類
| 類 | 描述 |
|---|---|
| .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=)