阅读(4482)
赞(3)
Bootstrap 辅助类
2017-01-05 16:29:09 更新
情境背景色
我们可以使用情境背景颜色类来设置元素的背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
p{
padding: 10px;
}
</style>
</head>
<body>
<div class="bs-example">
<p class="bg-primary">Important. This is important.</p>
<p class="bg-success">Success: This is successful.</p>
<p class="bg-info">Note: This is an information.</p>
<p class="bg-warning">Warning: This is a warning.</p>
<p class="bg-danger">Error: This is an error.</p>
</div>
</body>
</html>关闭图标
Bootstrap有一个关闭图标，用于关闭模态框和警报框。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong>.
</div>
</div>
</body>
</html>三角符号
Bootstrap有一个三角符号图标来指示元素具有下拉菜单。
插入符号图标的方向将在下拉菜单下拉时自动反转。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>内容块居中
我们可以使用 .center-block类来居中对齐内容块。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.wrapper{
margin: 20px;
padding: 10px;
background: #EEEEEE;
border: 1px solid #000;
}
.center-block{
width: 50%;
padding: 30px;
background: #e3b740;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center-block">Center Aligned DIV Box</div>
<p><strong>Note:</strong>.</p>
</div>
</body>
</html>快速浮动
我们可以使用.pull-left和.pull-right类将元素向左或向右浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
.bs-example div{
margin: 20px;
padding: 20px;
background: #f0e68c;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="pull-left">Floated to left.</div>
<div class="pull-right">Floated to right.</div>
</div>
</body>
</html>清除浮动
.clearfix类清除任何元素上的浮动（float）。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.wrapper{
margin: 20px;
padding: 10px;
background: #fffacd;
border: 1px solid #000;
}
.pull-left, .pull-right{
padding: 20px;
background: #e3b740;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="pull-left">Float to left</div>
<div class="pull-right">Float to right</div>
</div>
</body>
</html>显示或隐藏内容
我们可以使用.show和.hidden类显示或隐藏一个元素。
.invisible 类可以用来仅切换元素的可见性，元素占用布局中的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
.bs-example div{
margin: 20px;
padding: 20px;
background: #f0e68c;
}
div.hint{
display: none;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="hint show">This is visible to the user.</div>
<div class="hidden">This is not visible to the user.</div>
<div class="invisible">This is not visible but affects the layout.</div>
<p>This is a normal paragraph.</p>
</div>
</body>
</html>屏幕阅读器
.sr-only 类可以对屏幕阅读器之外的所有设备隐藏元素。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>This paragraph is visible to all devices.</p>
<p class="sr-only">This paragraph is only visible to screen readers.</p>
</div>
</body>
</html>仅隐藏文本
我们可以使用类.text-hide来隐藏元素的文本内容。
.text-hide使用color:transparent和font-size:0px来隐藏文本。搜索引擎将此类技术视为垃圾邮件。
<h1 class="text-hide">The text of this heading is not visible</h1> <p class="text-hide">The text of this paragraph is not visible.</p>