大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: Bootstrap和JQuery 修改

引入

直接引入(基于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.js 插件
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

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

下一课: 已经是最后一课了……

我们的 特色

  • 先学习,后付费
  • 线上/线下,自由组合

更多了解

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

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