免費AI編程助手
Bootstrap 輔助類
2018-03-22 17:19 更新
情境背景色
我們可以使用情境背景顏色類來設(shè)置元素的背景顏色。
<!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>關(guān)閉圖標(biāo)
Bootstrap有一個關(guān)閉圖標(biāo)，用于關(guān)閉模態(tài)框和警報框。
<!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有一個三角符號圖標(biāo)來指示元素具有下拉菜單。
插入符號圖標(biāo)的方向?qū)⒃谙吕藛蜗吕瓡r自動反轉(zhuǎn)。
<!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>內(nèi)容塊居中
我們可以使用 .center-block類來居中對齊內(nèi)容塊。
<!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>顯示或隱藏內(nèi)容
我們可以使用.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 類可以對屏幕閱讀器之外的所有設(shè)備隱藏元素。
<!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來隱藏元素的文本內(nèi)容。
.text-hide使用color:transparent和font-size:0px來隱藏文本。搜索引擎將此類技術(shù)視為垃圾郵件。
<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>
以上內(nèi)容是否對您有幫助：
更多建議：