Bootstrap4速成笔记二 Alert,Badge,Breadcrumb,Button

组件

准备工作

在编辑器中下载bootstrap4组件，我是用的是sublime text3

ctrl+shift+p->package control:install packages->bootstrap 4 snippets

插件安装成功之后就可以较快捷地完成相关操作

首先div设置类component

< div class=“component demo”></ div>

然后输入grid，按Tab键即可调出网格系统代码

Alert提示组件

Bootstarp提供Alert界面框架，可以是Alert的观感比较舒服
使用方法：div中使用alert类，其中可以设置alert的情景模式，例如"alert-success"这样

		<div class="alert alert-success">成功</div>
        <div class="alert alert-info">信息</div>
        <div class="alert alert-warning">警告</div>
        <div class="alert alert-danger">错误</div>

如想在Alert中使用链接，也可以使用Alert样式

 <div class="alert alert-primary">
            hello
            <!-- 链接文字颜色匹配-->
            <a href="#" class="alert-link">see more:</a>
        </div>

不使用Bootstrap效果是这样的链接

如果需要关闭Alert，可以在div的类中加入alert-dismissible设置可关闭，并在div中设置button按钮，按钮中使用close类，dismiss效果为alert，内容为&times ; (×)；我在Alert关闭时设置了fade效果，设置方法就是在div类中加入fade show即可

见代码

 <div class="alert alert-primary alert-dismissable fade show">
            <!-- 链接文字颜色匹配-->
            <button type="button" class="close" data-dismiss="alert">
            &times;
            </button>
            <a href="#">see more:</a>
 </div>

点击关闭时淡出消失

如果想要将关闭的功能外包到其他按钮上，可以首先在alert的div之外新建一个button，button的效果可以自己定，这里我使用的是btn-info效果并写到类中，然后在类中加入close-alert类

 <div class="alert alert-primary alert-dismissable fade show">
            hello
            <!-- 链接文字颜色匹配-->
            <button type="button" class="close" data-dismiss="alert">
                &times;
            </button>
            <a href="#">see more:</a>
        </div>
        <!--新按钮-->
        <button class="btn btn-info close-alert">Close</button>

然后在配置的js文件中监听按钮的点击事件，这里使用jquery，当点击的时候，alert类所在的Alert组件使用alert方法，参数为close关闭参数

$(document).ready(function() {
	$('.close-alert').click(function(event) {
		/* Act on the event */
		$('.alert').alert('close');
	});
});

点击前

点击后

这样就实现了关闭按钮的功能外包
如果想要在关闭按钮的同时做些事情，可以监听关闭事件的close和closed状态；
使用on函数，第一个参数为关闭态设置，第二个参数设置回调函数，代码如下：

$(document).ready(function() {
	$('.close-alert').click(function(event) {
		/* Act on the event */
		$('.alert').alert('close');
	});
	$('.alert').on('close.bs.alert',function(event) {
		/* Act on the event */
		console.log('close alert')
	});
	$('.alert').on('closed.bs.alert', function(event) {
		/* Act on the event */
		console.log('closed alert')
	});
});	

当点击关闭的时候在console输出close，关闭完成之后输出closed

关闭前

关闭后

Badge标签组件

在我们生活中会经常见到如文字后面的“热”，新闻之后的“新”，微博热搜之后的“沸”这样的标签，使用badge可以实现
使用方法是在span这样的内联元素里面设置badge类，这样可以让元素在同一行进行显示；下面代码中badge-primary设置标签效果显示，badge-pill设置标签圆角

<div class="component demo">
            <span class="badge badge-primary badge-pill">new
            </span>
    </div>

标签大小会随着同行文字元素的尺寸而发生改变
h3
h5

<div class="component demo">
        <h5>
        hello <span class="badge badge-primary badge-pill">new
            </span>
        </h5>
    </div>

不同效果的设置可以直接通过修改badge的类内容进行设置

<div class="component demo">
        <span class="badge badge-primary">主要</span>
        <span class="badge badge-secondary">次要</span>
        <span class="badge badge-success">成功</span>
        <span class="badge badge-danger">危险</span>
        <span class="badge badge-warning">警告</span>
        <span class="badge badge-info">信息</span>
        <span class="badge badge-light">浅色</span>
        <span class="badge badge-dark">深色</span>
    </div>

Breadcrumb导航路径组件

Breadcrumb依赖于列表进行多导航的实现
使用方法也是使用类进行设置

<div class="component demo">
            <ol class="breadcrumb nav">
            <li class="breadcrumb-item"><a href="#">首页</a></li>
            <li class="breadcrumb-item"><a href="#">课程</a></li>
            <li class="breadcrumb-item" active>Bootstrap</li>
            </ol>
    </div>

其中默认分隔符为“/”，如若要修改分隔符需要修改Bootstrap的默认样式，在这里就不再进行详述，毕竟重点不在这

Button按钮组件

在内联元素中，例如a,button等，设置btn类即可将button按钮组件设置上，其中可以设置一些情景类进行相关效果的设置
如需要设置按钮效果

 <div class="component demo">
        <!--  <button class="btn btn-outline-danger btn-lg btn-block" disabled>Button</button> -->
        <!-- 标准按钮 -->
        <button type="button" class="btn btn-default">默认</button>
        <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
        <button type="button" class="btn btn-primary">原始</button>
        <!-- 表示一个成功的或积极的动作 -->
        <button type="button" class="btn btn-success">成功</button>
        <!-- 信息警告消息的上下文按钮 -->
        <button type="button" class="btn btn-info">信息</button>
        <!-- 表示应谨慎采取的动作 -->
        <button type="button" class="btn btn-warning">警告</button>
        <!-- 表示一个危险的或潜在的负面动作 -->
        <button type="button" class="btn btn-danger">危险</button>
        <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
        <button type="button" class="btn btn-link">链接</button>
    </div>

如若需要设置边线，可以设置outline

<button class="btn btn-outline-info">Button</button>

在其上还可以设置btn-lg使其大小变大，其他尺寸有xs（超级小）,sm（小）,md（中）,xl（超级大）；
还可以设置btn-block设置其大小与块级元素大小相同

<button class="btn btn-outline-info btn-lg btn-block">Button</button>

如果默认不可点击，可以设置default

<button class="btn btn-outline-info btn-lg btn-block" disabled="disabled">Button</button>

如若需要使用复选框可以先在一个div中设置"btn-group"类，然后设置data-toggle类为"buttons"，然后在其中每个内联元素设置类为"btn btn-效果"，具体效果和上文所见的button大致一致；

 <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-info">1
            </label>
            <label class="btn btn-info">2
            </label>
            <label class="btn btn-info">3
            </label>
        </div>

如若想要修改按钮组大小也可以在group类中加入"btn-group-sm"进行设置；
按钮组默认水平显示，如若想垂直显示可直接在"btn-group"后加上vertical修饰

<div class="btn-group-vertical btn-group-sm" data-toggle="buttons">
            <label class="btn btn-info">1
            </label>
            <label class="btn btn-info">2
            </label>
            <label class="btn btn-info">3
            </label>
        </div>

其他常见效果组合可以在RUNOOB中查看，看哪一款适合你！