Bootstrap之辅助类样式,响应式工具和小图标组件的使用
一. 辅助类样式
Bootstrap 在布局方面提供了一些细小的辅助类样式,用于文字颜色以及背景色的设置、显示关闭图标等等。
1. 文本颜色类
2. 背景颜色类
3. 其他类
关闭按钮 close
三角符号 caret
块级居中 center-block
快速浮动 pull-left(左浮动),pull-right(右浮动)
清理浮动 clearfix
显示和隐藏 show(显示),hidden(隐藏)
二. 响应式工具
之所以介绍响应式工具,是因为在媒体查询时,针对不同的屏幕大小,有时需要显示和隐藏部分内容。
超小屏幕激活隐藏 hidden-xs
超小屏幕激活显示 visible-xs-block
注:对于显示的内容,有三种变体,分别为:block、inline-block、inline。
三. 小图标组件
Bootstrap 提供了免费的 263 个小图标(数字可能改变),具体可以参考中文官网的组件。
网址:http://v3.bootcss.com/components/#glyphicons。
部分小图标:
使用方式:
- 配合标签使用
<i class="glyphicon glyphicon-star">star</i>
<span class="glyphicon glyphicon-heart">heart</span>
- 配合按钮使用
<button class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-glass"></i>
</button>
四. 具体使用演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<title>test4 辅助类和响应式工具</title>
<link rel="stylesheet" href="../bootstrap-3.3.4/css/bootstrap.min.css">
<style type="text/css">
.a{
height:50px;
width: 100px;
border: 1px solid black;
background-color: #ccc;
}
</style>
</head>
<body style="margin: 10px; ">
文本颜色
<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>
<br>背景颜色
<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>
<br>关闭按钮<br>
<button class="close">×</button>
<br>三角符号<br>
<span class="caret"></span>
<hr style= "border: 1px solid red">
<br>快速浮动<br>
<div class="pull-left a">left</div>
<div class="pull-right a">right</div>
<hr style= "border: 1px solid red">
<br><br>区块居中<br>
<div class="center-block a">center-block</div>
<hr style= "border: 1px solid red">
<br>请除浮动<br>
<div class="pull-left a">left</div>左浮动
<div class="clearfix"></div> <!-- 请除浮动,如果没有这句,那么no-flow的背景会被浮动的left掩盖 -->
<div class="a">no-flow</div>
<hr style= "border: 1px solid red">
<br>显示/隐藏<br>
<div class="show">show</div>
<div class="hidden">hidden</div>
<!-- 响应式工具 -->
<div class="visible-xs-inline a">超小屏激活显示</div>
<div class="hidden-xs a">超小屏激活隐藏</div>
<!-- 小图标组件 -->
<!-- 配合标签使用 -->
<i class="glyphicon glyphicon-star">star</i>
<span class="glyphicon glyphicon-heart">heart</span>
<!-- 配合按钮使用 -->
<button class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-glass"></i>
</button>
</body>
</html>