<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>辅助类和响应式工具类</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
.a{
height: 50px;
width: 200px;
border: 1px solid #ccc;
background-color: #eee;
}
</style>
<body style="margin:50px;">
<!-- 辅助类 -->
<!--
前景色
text-muted：柔和灰
text-primary：主要蓝
text-success：成功绿
text-info：信息蓝
text-warning：警告黄
text-danger：危险红
背景色
bg-primary：主要蓝
bg-success：成功绿
bg-info：信息蓝
bg-warning：警告黄
bg-danger：危险红
-->
<p class="text-muted">bootstrap柔和灰</p>
<p class="text-primary">bootstrap主要蓝</p>
<p class="text-success">bootstrap成功绿</p>
<p class="bg-info">bootstrap信息蓝</p>
<p class="bg-warning">bootstrap警告黄</p>
<p class="bg-danger">bootstrap危险红</p>
<!-- 关闭按钮 -->
<button class="close">×</button>
<!-- 三角符号 -->
<span class="caret"></span>
<hr>
<!-- 快速浮动 -->
<div class="pull-left a">
左边
</div>
<div class="pull-right a">
右边
</div>
<!-- 块级居中 -->
<div class="center-block a">居中</div>
<hr>
<!-- 清理浮动 -->
<div class="pull-left a">
左边
</div>
<div class="clearfix"></div>
<div class="a">
右边
</div>
<hr>
<!-- 显示和隐藏 -->
<div class="show">
显示
</div>
<div class="hidden">
隐藏
</div>
<!--
超小屏幕 小屏幕 中等屏幕 大屏幕
.visible-xs-* 见 藏 藏 藏
.visible-sm-* 藏 见 藏 藏
.visible-md-* 藏 藏 见 藏
.visible-lg-* 藏 藏 藏 见
.hidden-xs 藏 见 见 见
.hidden-sm 见 藏 见 见
.hidden-mc 见 见 藏 见
.hidden-lg 见 见 见 藏
对于显示的内容，有三种。分别为：block、inline-block、inline
-->
<!-- 超小屏幕显示 -->
<div class="visible-xs-block a">超小屏幕**显示</div>
<!-- 超小屏幕隐藏 -->
<div class="hidden-xs a">超小屏幕隐藏</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
