<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>辅助类和响应式工具</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .a{ background-color:red ; color: aquamarine; border: 1px red solid; width: 90px; } </style> </head> <body style="margin:50px;"> <!-- 情景文本颜色: text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红 text-default 默认色 情景背景颜色: bg-primary 主要蓝 bg-success 成功绿 bg-info 信息蓝 bg-warning 警告黄 bg-danger 危险红 bg-default 默认色 --> <!-- close 关闭按钮 --> <button class="close"></button> <p class="text-danger bg-success">世界真奇妙</p> <!-- caret 三角标 pull-left 左浮动 clearfix 清理浮动 pull-right 右浮动 center-block 块元素居中 --> <span class="caret"></span> <div class="pull-left a">小希</div> <div class="clearfix"></div> <div class="a">小周</div> <div class="center-block a">居中</div> <div class="show">显示</div> <div class="hidden">隐藏</div> <!-- 屏幕隐藏显示响应 visible-xs-block hidden-xs --> <div class="visible-xs-block a">超小屏幕显示</div> <div class="clearfix"></div> <div class="hidden-lg a">超大屏幕隐藏</div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>