Bootstrap警告提示框、徽章、面包屑导航样式

警告框样式

• 使用.alert设置警告框基础样式，并使用.alert-success等设置警告框颜色;
• 在使用了警告框的元素内部设置超链接.alert-link,会搭配相应的颜色;
• 使用.alert-heading可以设置继承颜色，alert本身也可以设置水平线段落等;

警告框组件

• 在组件一栏，可以和浏览器交互功能，警告框的关闭效果，通过data-dismiss=" alert”实现父元素关闭;
• .fade和.show实现了关闭后的淡出效果;
• .alert-dismissible从调试器可以看到是padding-right:4rem;
• 真正实现关闭效果的只有data-dismiss=" alert";
• 直接使用脚本的方式也可以关闭$(元素).alert("close"); 练习：

		<div class="alert alert-danger">
			警告框样式
		</div>
		<div class="alert alert-success">
			警告框样式
		</div>
		<div class="alert alert-info">
			警告框样式
			<a href="#" class="alert-link">超链接</a>
			<p class="alert-heading">继承颜色(本身已继承，可设可不设)</p>
		</div>
		<div class="alert alert-success fade show one">
			确定关闭么？
			<button class="close two" data-dismiss="alert" >&times;</button>
		</div>
                
<script>
//	$(function(){
//		$(".two").click(function(){
//			$(".one").alert("close");
//		});
//		
//	});
</script>                

徽章样式

• 使用.badge设置徽章基础样式，并使用.badge-success等设置徽章颜色;
• 使用.badge-pill可对其进行椭圆胶囊形设计；
• 在使用了警告框的元素内部设置超链接，鼠标悬浮会有颜色变换;

		<h1>123@123<span class="badge badge-danger">.com</span></h1>
		<h2>123@123<span class="badge badge-success">.com</span></h2>
		<h3>123@123<span class="badge badge-info badge-pill">.com</span></h3>
		<h3>123@123<a herf="#" class="badge badge-info badge-pill">.com</a></h3>

面包屑导航样式

• 对列表使用.breadcrumb样式；
• 对列表项使用.breadcrumb-item样式；会使列表项位于一行，并用/隔开；
• 可用.active对列表项进行选中

		<nav>
			<ul class="breadcrumb">
				<li class="breadcrumb-item">aa</li>
				<li class="breadcrumb-item active">bb</li>
				<li class="breadcrumb-item">cc</li>
			</ul>
		</nav>