Bootstrap源码分析

最新推荐文章于 2024-07-28 18:10:47 发布

cithegod

最新推荐文章于 2024-07-28 18:10:47 发布

阅读量2.2k

点赞数

分类专栏： javaScript 文章标签： bootstrap jquery

本文链接：https://blog.csdn.net/cithegod/article/details/50504524

版权

本文分析了Bootstrap框架的源码，重点关注jQuery版本检测和Alert类的实现。Bootstrap源码依赖jQuery，要求版本至少为1.9.1。CSS过渡检测用于确保浏览器支持，而Alert类的关闭功能通过事件监听和CSS过渡配合实现，展示了Bootstrap插件的常见设计模式。此外，文章还探讨了Bootstrap的冲突检测和插件注册机制。

摘要由CSDN通过智能技术生成

bootstrap是twitter公司基于HTML5、CSS3和jQuery创建的一种前端框架，是现在使用范围比较广泛的一种前端框架，其源码对于学习前端的一些技术非常有帮助。

bootstrap源码可以从bootstrap中文网（http://www.bootcss.com/）上面下载，但是安装源码需要配置Nodejs环境，安装方法可以自行百度。这个网站上面也可以下载到用于生产的精简源码。

bootstrap源码主要有几个部分，包括样式表，脚本以及字体库等等，其中最重要的就是脚本，所以这里只拿脚本来进行分析。

jQuery版本检测

+function ($) {
     
  //+function中的+号仅仅表示添加的意思，并没有实际效果
  'use strict';  
  //use strict放在函数的开头表示函数咋在严格模式下运行
  var version = $.fn.jquery.split(' ')[0].split('.')
  ...... //版本检测
  }
}(jQuery);

bootstrap源代码中bootstrap.js文件中的所有插件都是这样的结构，首先插件是以一个直接运行的匿名函数构造的，这个匿名函数的形参是$，实参是jQuery对象，并且在function关键前面有一个+号，这个加号并没有实际的含义，这个符号仅仅表示添加一个函数。所有的bootstrap插件都是在严格模式下运行的，以标记”use strict”来表示出来，并且bootstrap插件使用的是jQuery进行编写的，所以首先要检测jQuery的版本是否足够，我现在使用的是3.3.5版本的bootstrap，这个版本要求的jQuery的最低版本是1.9.1。

CSS过渡浏览器支持检测

bootstrap中的基本所有的动画都是使用CSS过渡来完成的，并没有使用jQuery自带的动画函数来完成。所以需要检测浏览器内核版本来确定CSS中使用transition的前缀。transitionEnd事件是在CSS过渡完成之后自动触发的一个事件，有些动画需要在动画结束之后对执行动画的元素进行一些收尾工作，包括数据清理等，所以需要一个可以触发的事件，用来给他绑定回调函数。

具体和CSS过渡有关的内容可以点这里：CSS过渡&&bootstrap transition

+function ($) {
   

//检测浏览器支持的CSS transition属性名。和浏览器有关
  function transitionEnd() {
   
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozT