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>