引入

直接引入（基于jquery的）bootstrap.js

复习：.min / .map / CDN……

唯一需要注意：放在jquery.js之后。

套路

bootstrap.js主要作用于组件，已事先为我们准备好了一系列的

方法

主动的产生一些JavaScript行为。以Modal为例：

• 方法名和组件同名
• 通过参数控制行为，参数可以是
  1. 字符串形式的（单一）指令：常见的"show"、"hide"、"toggle"……

     $('#show').click(function(){
         $('.modal').modal('show');

  2. 对象形式的（复合）options：

     $('#show').click(function(){
         $('.modal').modal({
             backdrop: 'static',
             keyboard: false

还包括：Alert、Carousel、Collapse、Dropdowns、ListGroup和Navs（方法名tab）、Popovers、Scrollspy、Toasts、Tooltips

演示：点击按钮弹出关闭Modal

事件

在组件行为的若干阶段插入自定义的行为。仍然以Modal为例，事件名由原点（.）分割，依次是：

1. 事件描述，比如：show（显示前/中） / shown（显示完成） / hide / hidden ……
2. bs：bootstrap的缩写
3. 组件名

具体哪些组件提供了事件，请查阅文档。

演示：弹出Modal后Ajax加载内容

其他

tooltip需要显式激活

作业

完成（但不限于）以下bootstrap组件的JavaScript操作：

1. 求助列表侧边栏“关键字”，能够由tooltip效果
2. 发布求助页面：
   1. 首次加载时弹出Modal，勾选不再提示后不再显示
   2. 关键字项，用dropdown代替之前的select
3. 发布文章页面，可以添加一个新系列。新系列会提交到后台，并返回该系列的Id，供系列的select option使用
4. 点击用户主页上的用户名，
   1. 弹出Modal，
   2. Modal上的统计数据由Ajax加载
   3. 还可以Ajax的方式发布留言

在当前系列 Bootstrap和JQuery 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：

QQ群：273534701

答疑解惑，远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧