Bootstrap 简单认识之Alert组件

认识Bootstrap之前

1. 这里下载的是Bootstrap v4.0 dev 版本
2. css预处理器使用了sass
3. js使用了es6
4. Bootstrap是依赖于Jquery的，其所有javascript组件都是注册在jquery原型上的，即一般组件末尾会有如下代码： $.fn.xxx = Plugin，也即 jQuery.prototype.xxx = Plugin
5. 如果在jQuery中定义了与Bootstrap组件同名的组件(没必要同名吧？)，那么可以调用 $.fn.xxx.noConflict 来覆盖Bootstrap中的组件。

---

Alert（警告框）组件

一、简介

此组件应该是bootstrap中最简单的组件了，代码量较少，所以优先了解。此组件常见于为用户操作提供反馈信息，比如登陆密码错误，没有操作权限等简单提示。

二、样式

• 警告框必须有 alert 类
• 分别有四种配色： alert-success， alert-info， alert-warning， alert-danger
• 警告框里也可以美化链接样式： 对a标签添加 alert-link 类即可

三、脚本（可选）

为警告框添加关闭按钮，让用户有更好的体验。
从代码中提取整个组件的轮廓：

class Alert {
    // 点击关闭按钮时真正触发的函数
    close(ele) {}

    // $('xxx').alert()触发
    static _jQueryInterface(config) {
        // 使用jquery的data api为控制元素绑定alert实例
        // if config is 'close': trigger('close')