为什么前端都不愿意用web前端框架bootstrapp框架

来源：蜘蛛抓取(WebSpider) 时间：2016-05-02 01:48 标签： bootstrap 前端
　　很久之前就有很多人给我推荐twitter的Bootstrap框架，但是直到前几天我才真正学习了下Bootstrap，的确是相当棒的框架，至少从视觉体验上超越了很多以前碰到了前端UI框架。今天我要聊聊Bootstrap，最后给出一份我整理的Bootstrap的UI的demo，以及我自己使用Bootstrap开发的例子。
　　下面我在这里简单的介绍下Bootstrap框架。
　　Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。
　　一个完整的Bootstrap框架包含如下四个部分：
脚手架（不知道官网为啥这么翻译）：用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术，比如重置背景这样的操作，这些比较简单我就不展开叙述了，脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列，栅格系统分为两种类型，一种是默认栅格系统，这时候栅格系统是按940px像素进行等分，我们可以使用span1，span4这样的class属性操作默认栅格布局，另一种是流式栅格系统，这个时候分列的宽度就不是固定，而是根据你可视页面进行12等分，同样可以使用span1，span4操作流式栅格。这个系统非常之好，做css最难的就是div布局，使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了，布局也分为固定和流式，让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。大部分做网站的人都不是美工出身，做出赏心悦目的网页是件很困难的事情，css提供的样式很专业很精美，能让我们轻松开发出一套精美的网站
Css组件：Bootstrap还提供一些常用的css组件，同样很优秀很棒。
Javascript插件：Bootstrap是个开放的系统，我们可以随意扩展Bootstrap，特别是javascript的框架，这样Bootstrap就会更加专业。
　　Bootstrap是个操作性质的框架，没必要做深入分析，最关键是有没有好的使用实例，我下载Bootstrap发现，下载包里的example不是太强大，例子都在它的官网上，很多对css和javascript不是特别熟悉的人使用起来都不太习惯，因此我将这些例子进行了整合，作为单独的例子工程，这个工程非常全面，我在网上找过，目前还没有比我整理的更详尽的例子，大伙下载下来按照我的工程目录结构就可以进行开发了。此外，我做了一个简单的demo，也分享给大家，demo的截图是：
下载链接：
我整理的实例：
我做的demo：
相信这些例子对大家学习bootstrap会提供一定的帮助。
阅读(...) 评论()OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(
订阅邮件周刊
Bootstrap vs Foundation如何选择靠谱前端框架
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
现在有两套前端模板了，分别基于& 和 & （最近已经提交到上)。经过一段时间使用，对于二者有一些粗略的了解，关于具体的比较细节，可以参考 已经写的非常详细了。这里只是从另外一些角度来比较这两个目前最流行的 前端框架；Bootstrap和Foundation的粗略比较整体来说Foundation比Bootstrap略显高大上一点，使用的都是比较新的技术，整体观是以Mofile first(移动优先)来考虑的。Foundation默认不带图标集，它推荐使用来实现ICON，好处是可以通过字体大小来调节图片大小， 而bootstrap自带一个默认的由传统图片实现的图标集；Foundation 使用 border-box 盒子模型（box model) 即 它定义width 和 height时，border 和 padding是被包含在内的， IE6即使用这种模型，个人认为这是一把双刃剑，可能会跟有些第三方的前端插件有冲突。Foundation 的网格流式布局跟 Bootstrap差不多，他们都把网页划分为十二列，针对不同的设备显示不同的列数，如手机只能显视一个列单元，桌面电脑可以显示12个。Bootstrap 2.2&div class="row-fluid"&& & &div class="span7"&&/div&& & &div class="span1"&&/div&& & &div class="span4"&&/div&&/div&
Foundation 5&div class="row"&& & & &div class="large-4 columns"&&/div&& & & &div class="large-4 columns"&&/div&& & & &div class="large-4 columns"&&/div&&/div&&Foundation是首先实现Off Canvas布局的，即隐藏的菜单可以从厕面移出；而Bootstrap2的菜单只能从菜单顶部向下展开，个人认为Foundation的体验在手机上更好一些; 好在Bootstrap 3.0 版本也加入了Off Canvas布局。Bootstrap和Foundation的浏览器兼容&Bootstrap最大的优点就是浏览器兼容，因为使用的技术较新，Foundation无法支持旧版IE：&Bootstrap 2.3 &支持 &IE7.0+Bootstrap 3 & & 支持 &IE8.0+Foundation & & &支持 &IE9.0+&XP系统最高只能升级到IE8, &Win7 默认安装的是IE8， 选择Foundation即意味着放弃整个XP系统和不能连网升级的Win7系统，这也基本上意味着你基本放弃了一部分中国的电脑桌面，对于面向非IT专业人士的网站来说，这一点有点致命。对于面向中国用户的网站来说，Bootstrap也许是更更好的选择。对于IE6则可以放心大胆地不支持了，这是OurJS的浏览器使用情况, 数据来自Google Analytics （谷歌分析）最近访问者浏览器版本分布情况, 由于OurJS大多面向程序员，所以IE的比例非常小 & 5%的样子, 因此使用Foundation应该也没什么大问题。1.&Chrome26,79365.78%2.&Firefox4,83611.87%3.&Safari (in-app)2,0074.93%4.&Internet Explorer2,0004.91%5.&Android Browser1,9864.88%6.&Safari1,9124.69%7.&UC Browser4651.14%最近访问者IE浏览器版本分布，可以看出IE8的比例还是非常高的，IE6/IE7 非常小，Bootstrap3应该也可以放心大胆的用了。1.&11.070735.35%2.&10.039919.95%3.&8.037318.65%4.&9.029614.80%5.&7.01587.90%6.&6.0643.20%&其实说两套开源框架都在不断的相互学习，很难讲分出优劣，每个人可以根据自己的需要做出选择。PS:&OurJS的中文版选择基于修改过的Bootstrap2.3，英文版则采用了Foundation 5。
&热门文章 - 分享最多
&相关阅读 - 心得体会
&关键字 - OurJS
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

我要回帖

更多关于 bootstrap 前端 的文章

 

随机推荐