网站前端有必要学习bootstrap么?前端从bootstrap中可以学到什么

更新日期: 2017-11-23阅读: 4.4k标签: bootstrap

bootstrap出现的本意是为了提高开发效率,官网的描述是:

Bootstrap是一款简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

从bootstrap的使用率来讲,使用最多的是一些后端的管理界面,对于某些对前端开发要求不高的场景比较适用,基于它能快速搭建可交互界面原型。作为前端开发而言:在实际开发中使用bootstrap的是比较少的,不过我们可以借鉴Bootstrap的一些css和js上的思想,去分析它的代码实现,组织架构里使用的一些技巧。


前端bootstrap中可以学到什么?


1: 闭包
boot的闭包方式有点特别,普通的闭包是这样的:

(function ($) {
 
})(jquery)

这种写法是怕全局污染,把$封闭在自己的空间里,暴露在外面的只有jQuery,这样,如果用了别的也用$的控件,就可以避免冲突。
而boot的闭包又有一些不同:

+function ($) {
 
}(jQuery)

这样写除了之前的好处,还有一点就是简洁,以及更重要的一点,避免之前的括号没有闭合,导致的冲突。这样,更加的独立,之前的包没有闭合也不会影响到这里。就好像保守的程序员,喜欢在个别的语句前,多家一个";",为的就是怕之前的语句与现在的语句合在了一起。

2:冲突的避免
除了控制jQuery中$的冲突,还要避免插件重名所带来的冲突。
jQuery 有自己的避免$全局污染的方法,就是noConflict。他可以把变量过渡到别的符号上,或者只是把$收回,只暴露出jQuery来。
而boot自己也有类似的冲突解决方法。
下面是所有boot插件的格式,以alert为例:

+function($){
 var old = $.fn.alert;
 $.fn.alert = function (option) {}
 $.fn.alert.Constructor = Alert;
 $.fn.alert.noConflict = function () {
 $.fn.alert = old;
 return this;
 }
}(jQuery)

这样接入有一个别的alert控件,也叫做alert。那么我们就会把他储存到old里。然后在把他重新生命为自己的alert控件。
如果在接下来,我们需要用之前的alert,那么就noConflict一下,这样,alert就又付给了之前的alert控件,也就是old。
再把咱们自己写的alert返回出来。我们可以再给他付给别的空间名,这样两个就都可以用了。
而且我们也可以用Constructor来查看现在alert究竟是哪个控件。

3:on的使用
boot很方便,有些控件是自动的绑定在了特定的元素上的。还是以alert为例。

var dismiss = '[data-dismiss="alert"]'
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close);

这里就是on的用法,他可以监听整个document,然后在根据参数,冒泡到特定的元素上去,这样做的好处是,可以再元素未被渲染的情况下,就把事件绑定到上面去,这样做,不用ready,也可以对新生成的元素执行同样的事件。所以boot的空间,除了特定的一些(比如tooltip),都可以在写出来的同时,就可以应用,只需要给元素特定的属性。

4:css3的兼容解决方案
有时候,我们需要在动画效果结束后在来去调用一些函数,在我们用jquery的动画时,animate的done参数可以帮我们很好地解决这方面的事情,可是当我们的大部分动画,都应用了css3的时候,要怎么办呢。所以boot'用了 一下这个方法:

+function ($) {
 'use strict';
 
 // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
 // ============================================================
 
 function transitionEnd() {
 var el = document.createElement('bootstrap')
 
 var transEndEventNames = {
 WebkitTransition : 'webkitTransitionEnd',
 MozTransition : 'transitionend',
 OTransition : 'oTransitionEnd otransitionend',
 transition : 'transitionend'
 }
 
 for (var name in transEndEventNames) {
 if (el.style[name] !== undefined) {
 return { end: transEndEventNames[name] }
 }
 }
 
 return false // explicit for ie8 (  ._.)
 }
 
 // http://blog.alexmaccaw.com/css-transitions
 $.fn.emulateTransitionEnd = function (duration) {
 var called = false
 var $el = this
 $(this).one('bsTransitionEnd', function () { called = true })
 var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
 setTimeout(callback, duration)
 return this
 }
 
 $(function () {
 $.support.transition = transitionEnd()
 
 if (!$.support.transition) return
 
 $.event.special.bsTransitionEnd = {
 bindType: $.support.transition.end,
 delegateType: $.support.transition.end,
 handle: function (e) {
 if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
 }
 }
 })
 
}(jQuery);

他首先去问浏览器,是否支持transitionend这个属性,如果支持,那么我们在来做后续的操作,同样以alert为例:

$.support.transition && $parent.hasClass('fade') ?
 $parent
 .one('bsTransitionEnd', removeElement)
 .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
 removeElement()

首先$.support.transition,调用transitionEnd方法,看看是否支持这个属性,如果支持,那么就用one注册一次 transitionend,然后在用emulateTransitionEnd去调用一下,参数为这个css3动画的时间duration。这个时间之后去调用这次事件,就可以达成callback的形式。当然如果不支持这个属性,那么我们就直接执行callback,就ok了。

5:trigger的应用
trigger可以手动的触发事件,以modal控件为例,在之前的版本的控件中,当modal框弹出来的时候,底部主窗口的滚动条没有取消,所以在后续的控件中(大概3.0.3左右),用了自身的注册事件来避免这部分的小bug。代码如下:

$(document)
 .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
 .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })

他在每次点开modal框之前,也就是show事件中,给body添加class:modal-open,这个样式把overflow给hidden掉。再在关闭modal框之后,也就是hidden事件中,再把这个class给remove掉。
这里注册了时间,那么哪里去触发呢?这就用到了trigger方法,在特定的地方

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
 that.$element.trigger(e)

这样就触发了事件。大部分的外部接口就是这样给出的。

6:事件注销的技巧
boot在事件注册的时候给了很多的后缀。比如 click.bs.alert,show.bs.modal。这样做事为了什么呢。
加入我想取消掉alert的click事件。可是我不能把所有的click事件都取消掉,所以我们在off事件的时候,就要这样写:

$(document).off('click.bs.alert')

如果我想注销掉全部的alert的事件,那么就要:

$(document).off('.bs.alert')

同理,要是想注销掉全部的boot注册的时间 那么就要:

$(document).off('.bs')

所以在注册时间时候,才要麻烦的加后缀,是为了我们之后的行为做准备的。这样写非常的有道理。

7:api的使用
boot给了我们简单的接口,但是没有给我们全部,可是其实我们是可以拿到的。
boot把方法给了data。如下面:

$.fn.alert = function (option) {
 return this.each(function () {
 var $this = $(this)
 var data = $this.data('bs.alert')
 
 if (!data) $this.data('bs.alert', (data = new Alert(this)))
 if (typeof option == 'string') data[option].call($this)
 })
 }

在alert的时候,首先检查元素中用没有alert这个data,有的话,则直接调用,没有的话才生成新的。
那么其实我们可以这样做:

$('.alert').alert();
var api = $('.alert').data('bs.alert');
api.hide();

这是和$('.alert').alert('hide');一样用的。

8:proxy的应用
proxy调用一个方法,切用参数取代方法中的this,好像我自己写的控件form就有这么一段:

this.$element.on('click','[data-formtype="reset"]',$.proxy(function () {
 this.reset();
 }, this));

我用了$element冒泡到的data-formtype=reset的元素,那么this自然指向了它,它的click事件是调用方法本身的reset()事件,可是里面的this不是这个方法,那么我们就用proxy来指向当前方法的this。这个方法灵活运用,对于封装控件有很大作用。

链接: https://www.fly63.com/article/detial/159

bootstrap的响应式开发,如何使用bootstrap制作响应式布局网站

bootsrap响应式开发是为了让用户在不同尺寸的设备上,同一URL下浏览网页都可以获得良好的视觉效果。为了实现bootsrap响应式设计,我们需要创建适配各种设备尺寸的css,让页面加载的时候去匹配对应的css样式。

bootstrap组件有哪些?bootstrap常用组件推荐

这篇文章主要整理bootstrap中常用的组件,比如:表格、表单验证、文件上传、复选下拉框、弹出框、时间组件、加载效果等

Bootstrap后台管理模板推荐_最值得拥有的免费Bootstrap后台管理模板

在网站开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台:AdminLTE、Gentelella Admin、Vali Admin、ModularAdmin、Metis、Ace

和 jQuery 说再见,Bootstrap 5 将移除对其依赖

Bootstrap 最新版本 4.3.1 已发布,作为 Bootstrap 4.3 发布的一部分,团队也公布了下一个主要版本 Bootstrap 5 的开发计划。将会在开发 Bootstrap 5 的过程中实现一些关键变化

响应式网站设计---Bootstrap

响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性。

bootstrap-select使用过程中的一些问题

这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子。点击没有反应,下拉框不出现

vue-cli项目引入jquery和bootstrap

webpack.ProvidePlugin插件里面可以配置全局引用,比如此处配置了jquery的使用,后面再vue里使用$,jQuery,windows.JQuery都等同于使用jquery,不需要再require或import

bootstrap-table树形结构(展开和折叠)

今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉,然后去百度,结果也不是很准确。最后经过Google才找到。下面分享给大家

Vue 组件:给Bootstrap Modal增加缩放功能

Bootstrap 应该还是目前最流行的前端基础框架之一。因为架构方面的优势,它的侵入性很低,可以以各种方式集成到其它项目当中。在我厂的各种产品里,都有它的用武之地。前两天,老板抱怨,说 Modal(弹窗)在他的屏幕上太小

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!