银河娱乐网平台

新闻动态
技术中心
技术中心
当前位置:银河娱乐网平台 >> 服务支持 >> 技术中心 >> 浏览文章
浅谈前端BootStrap的优缺点
作者:周红艳 日期:2019年06月19日 来源:研发部 浏览:

内容导读:Bootstrap是近几年来比较流行、也是比较受欢迎的一种前端框架。随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。

Bootstrap是近几年来比较流行、也是比较受欢迎的一种前端框架。随着CSS3HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。Bootstrap就是这样的一个框架。

     Bootstrap是由规范的CSSJavaScript插件构成,其最大的优势是响应式布局,CSS媒体查询(Media Query)的功劳,使得开发者可以方便的让网页无论在台式机,手机上都获得最佳的体验。 下面就从他做的相当不错的栅格系统,css模块化以及js插件来说说他的优点。

栅格系统(结构)

Bootstrap的优势之一就是可以根据用户屏幕尺寸调整页面,使其在各个尺寸上都表现良好。实现这个功能依赖两个东西,一个是view,另一个是max-widthmin-width

Bootstrap栅格系统的本质就是通过CSS3的媒体查询实现的,如果您熟练使用max-width等媒体查询属性的话就可以抛开Bootstrap,定制属于自己的响应式网站。Bootstrap将屏幕尺寸分为四类,超小屏幕<768px,小屏幕 平板>=768px,中等屏幕 桌面显示器>=992px以及大屏幕 大桌面显示器>=1200px。每一列又被平均分成了12格,每一个8.33333333%12格就无限接近于100%

这里要特别提一下的就是Bootstrap的盒模型,Bootstrap强制把所有元素的盒模型都设置成了border-box,这是IE首创的,用于混杂模式下显示网页,因此在CSS3中新增了这个属性。border-box盒模型的尺寸包含了padding+border+content content-box盒模型的尺寸仅仅包含content部分,设置paddingborder还的重新计算包含块尺寸,使用上要比border-box麻烦的多。

类前缀使用是掌握栅格系统最重要的部分,类前缀分四个超小屏幕.col-xs-*,小屏幕 平板.col-sm-*,中等屏幕 桌面显示器>.col-md-*以及大屏幕 大桌面显示器.col-lg-*,以下代码即可实现不同屏幕呈现不同的显示方式:

 

 

 

 

<div class="row">

    <div class="col-xs-12 col-md-6"></div>

    <div class="col-xs-12 col-md-6"></div>

</div>

这段代码的意思是,在超小屏幕下分两行显示,桌面显示器则并行显示。更详细的应用大家可以参考Bootstrap的官方文档,这里就不再赘述。

 

CSS模块化(表现)

Bootstrap预先定义了很多CSS类,使用的时候直接给class赋予对应的类名即可,如text-lefttext-align.table等。最有代表性的就是btn类,Bootstrap定义了一个.bootstrap的基础类,如果还想要其他样式可以在这个基础类上进行扩展,实现不同的视觉效果。

.btn类之所以典型在于他的样式定义,CSS大牛和菜鸟的区别表现在三个方面,文件大小,后期维护以及hack,大牛的CSS文件都比较小(具体多少为小要看项目的大小);后期维护容易,能快速定位,修改一个样式需要动的地方比较少;hack使用也少。相反菜牛则会出一个庞大的文件,后期维护一团乱麻,改一个样式需要改很多地方,hack,内联,important满天飞。

CSS很多值都是有相互依赖关系的,比如em,我们都知道em是相对单位,浏览器渲染的时候是必须明确到具体值的,因此必须进行计算。正因为这些相对单位我们才可以实现模块化,.btn类就是利用相对单位和字体大小之间的关系实现的,将按钮的line-heightpaddingborder-radius设置为相对单位,字体大小设置为绝对单位,需要大按钮的时候增加字体,需要小按钮的时候减小字体,案例代码如下:

1

.btn{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle;}

这里的line-height会根据font-size计算出相应的值,修改font-size按钮就会相应的变大变小,一个小小的改动就实现了视觉上的变化是不是很方便

BootstrapCSS系统令人称道的地方还有很多,想CSS更进一步的话可以研究下他的思路,您也可以单独提取出来放到自己样式库中,以后做项目的时候可以快速使用。

JavaScript插件(交互)

BootstrapJavaScript插件非常丰富,既可以用现成的也可以自己扩充,Bootstrap提供了一个集成板的Bootstrap.js您可以直接拿过来使用也可以单个使用引入*.js即可。

JS插件优秀的地方在于,哪怕是不懂JS的开发人员也可以使用,只要按照官方文档提供的格式写即可,比如模态框,您只要按要求设置好classdata-toggledata-target即可,一句JS都不用写,是不是很方便。

Bootstrap的插件开发模式基本都是相似的,先定义一个类,实现主体功能,然后是个Plugin函数,再把这个函数扩展到JQuery原型上,最后通过委托的方式给特定元素绑定事件。

     Bootstrap不足:

IE兼容也存在不小的问题,Bootstrap将所有的元素盒模型都设置成了border-box,这是IE混杂模式下的盒模型,光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法,这些语法标签兼容性方面同样存在不小的问题,当然网上存在很多兼容IE的办法,但需要引入其他文件,有些还不小,势必导致加载速度变慢,影响用户体验。

BootstrapIE67的兼容性肯定不好,对IE8的支持也需要一些额外的文件。

IE8的媒体查询需要response.js的配合才能实现

Bootstrap不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到你的页面中:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

F12 键打开 IE 的调试工具,就可以看到 IE 当前的渲染模式是什么。

    以上所述是给大家介绍的bootstrap优缺点,希望对大家有所帮助

上一篇文章:开关电源初次上电“防炸机”必杀技 下一篇文章:没有了
相关链接
发表评论
用户评论

银河产品

推荐产品

版权所有 山西银河娱乐网平台股份有限公司 晋ICP备09004627号    晋公网安备 14019202000008号