认识Bootstrap之前
- 这里下载的是Bootstrap v4.0 dev 版本
- css预处理器使用了sass
- js使用了es6
- Bootstrap是依赖于Jquery的,其所有javascript组件都是注册在jquery原型上的,即一般组件末尾会有如下代码:
$.fn.xxx = Plugin
,也即jQuery.prototype.xxx = Plugin
- 如果在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')