Bootstrap常用的辅助类

前言

学习Bootstrap的好处就是大大提高了前端的开发速度，节约成本，而今天所介绍的Bootstrap常用的辅助类，有文本，背景，还有元素的辅助类。

（1）文本辅助类

主要有（text-muted,text-primary,text-success,text-info,text-warning,text-warning,text-danger），文本辅助类，就是能显示出多样的文本颜色，这为我们添加了文本的丰富多样性，同时，也不用写那么的样式，起到了快速提高开发速度的榜样。

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>boostrap案例</title>
		<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
	<script src="../Bootstrap/js/bootstrap.bundle.min.css"></script>
	</head>
	<body>
		<br />
		<br />
		<h2>bootsrap文本辅助类</h2>
		<br />
		<br />
		<div class="container">
			<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>
		</div>
	</body>
</html>

运行效果：

Bootstrap常用的辅助类

（2）背景辅助类

背景辅助类：主要有（bg-primary,bg-success,bg-info,bg-warning,bg-danger），背景辅助类，就是能显示出多样的背景颜色，这为我们添加了背景的丰富多样性，同时，也不用写那么多的样式，起到了快速提高开发速度，节约成本的效果。

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>boostrap案例</title>
		<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
	<script src="../Bootstrap/js/bootstrap.bundle.min.css"></script>
	</head>
	<body>
		<br />
		<br />
		<h2>bootsrap背景辅助类</h2>
		<br />
		<br />
		<div class="container">
			<p class="bg-primary">bg-primary</p>
			<p class="bg-success">text-success</p>
			<p class="bg-info">text-info</p>
			<p class="bg-warning">text-warning</p>
			<p class="bg-danger">text-danger</p>
		</div>
	</body>
</html>

运行效果：

Bootstrap常用的辅助类

（3）元素辅助类

元素辅助类大致有如下几种常用的，而这些我都是在网上找，直接截屏复制过来的，如有缺少的地方，敬请谅解。

Bootstrap常用的辅助类

这里有很多种的元素类，而今天我就不写了，还剩余的其它元素辅助类，我就不写了，如果想了解的朋友，可以自己动手来试一试，如有不懂的地方，可以baidu.com查一查。