这就是我喜欢 Bootstrap的五个原因
作者:51cto
Bootstrap&是 最受欢迎的Web前端框架之一。&自从官方2011年发布以来，Bootstrap&经过数次优化。&现在，Bootstrap是最稳定，响应最好的框架 之一。它被各种水平的开发者所喜爱，因为通过使用Bootstrap，&他们能够在几分钟内设计一个功能齐全，有吸引力的前端页面。即使是一个只具备 HTML和一些CSS基础知识的初学者也能够轻易地上手Bootstrap。
不管工程的大小，Bootstrap&为各种网站提供了系统完整的前端基础。Bootstrap通过Normalize.css消除网页元素在不同浏览器之间的差异。&Bootstrap还提供了大量的元素样式。一些基础的HTML表单中的元素，例如复选框，单选按钮等被重新设计了更现代化的样式。我选择使用Bootstrap是因为它能够节省大量的精力。
当今的网站应该更现代化，更流畅，响应更好，并且应该把手机端放在首位。Bootstrap帮助我们用最少的精力去完成这些目标。下面是我深爱Bootstrap的5个主要原因：
原因1：强大的Grid&系统
Bootstrap&有一个响应最好的Grid系统，并且能够在手机端通用。&其使用简单、灵活。从最小的移动设备到高清晰度的显示器,它将屏幕逻辑地分成12列,这样你就可以决定每个元素应该占用多少屏幕宽度。
原因2：快速开发
Bootstrap使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能。你只需要将一些HTML插入Bootstrap的模板，无需花费大量的时间编写复杂的CSS和JavaScript。此外，所有这些组件都是响应式的。
原因3：浏览器兼容
Bootstrap&兼容所有当代的浏览器以及IE8和其更高版面的IE浏览器。如果Bootstrap的说明使用得当，你可以创造一个可以在所有这些浏览器中工作良好的网站。像HTML5Shiv和Respond.js这些插件已经成为Bootstrap默认模板的一部分。这些特性可以帮助HTML5元素移植到老的非HTML5的浏览器。
不过，如果你的老板非要兼容IE7，没办法，那只能使用其他技术了。
原因4：自定义
Bootstrap&提供很多方法来自定义它的默认设计。你可以覆盖它所有默认的CSS和JavaScript的行为。如果你是一个&Less或者 Sass的开发者，Bootstrap将会更合你的胃口。因为它包括Less和Sass自定义选项。这些功能让你能够流畅地制作新的Bootstrap模 板。
原因5：开源
Bootstrap是Github&上的一个开源项目。它是在MIT的许可下发布的。这是我使用Bootstrap的最大原因。&我的客户将不必处理购买和许可的问题。并且Bootstrap的许可允许我彻底改变和尝试它。
译文链接：/article/why-i-love-bootstrap.html
英文原文：Why I Love Bootstrap, and Why You Should Too
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料，全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看科技资讯和科技八卦吗？想第一时间看独家爆料和深度报道吗？请关注TechWeb官方微信公众帐号：1.用手机扫左侧二维码；2.在添加朋友里，搜索关注TechWeb。
前不久华为在国内发布了Mate 9手机，不过和海外版本的不同，华为不仅推出了保时捷限量...
Galaxy Note 7折戟沉沙，而对于下代旗舰Galaxy S8，三星显得志在必得，很多新技术也会...
本周五要亮相的荣耀Magic看点相当的足，从之前曝光的消息看，这款手机会配备双曲面屏...
雅虎周三警告称，该公司又发现一起大规模黑客攻击事件，导致10亿用户帐号在2013年8月...
《福布斯》杂志评出了“2016年全球最具影响力人物”，共有28位主要公司的CEO跻身该榜...
北京时间12月14日晚间消息，Twitter今日宣布，已为Twitter应用(App)增加直播功能，用...
微软已经几乎放弃Lumia 520了。这款曾经最畅销的WP设备止步WP 8.1系统，微软也没有打...
根据外媒 Cult of Mac 的报道，谷歌正在给想要转投 Android 阵营的 iOS 用户提供另外...
12月15日，MIUI正式对外单发小米计算器应用。即日起，进入国内主流安卓应用商店搜索“...
王者荣耀老夫子要重做啦！旧版的老夫子已经拥有了这个角色最重要的一些特征：那一把耀......
火影忍者手游周年庆即将到来，之前大家一直不知道新版本什么时候推出，下面为大家介绍......
12月10日到12月11日，北京上演了一出盛大的玩家面基，一场大话西游2016玩家嘉年华，吸......
芒果互娱携手湖南卫视、芒果TV于5月26日在北京举行了一场以“1+N，一起玩”为主题的游......
Copyright (C)
All rights reserved.
请选择一张图片分享
要转发到新浪微博，请
要转发到QQ空间，请2013年10月 总版技术专家分月排行榜第三
2014年3月 Java大版内专家分月排行榜第一2014年1月 Java大版内专家分月排行榜第一2013年12月 Java大版内专家分月排行榜第一2013年11月 Java大版内专家分月排行榜第一2013年10月 Java大版内专家分月排行榜第一
本帖子已过去太久远了，不再提供回复功能。你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
IE8下Collapse 插件，外层Div高度不能随内容的自动伸缩，如下图所示
看你的这个截图应该是用的bootstrap3吧，BS3是移动优先的，并且已经申明过不支持IE9以下，如果你要兼容IE的话，最好用bootstrap2，风格什么的都可以自己去改的
要回复问题请先或
浏览: 1707
关注: 3 人IE8与Bootstrap 3&事件日期：日
使用bootstrap3把公司官网重新&装修&了一下。但是在IE8下，它竟然显示的是&sr-only&里的菜单。页面的内容也是跟手机上那样，并排两列的，变成了一列&&显然，我的电脑被识别为手机设备了。而IE的地位，始终无人能撼动。2013年3月的数据显示：
IE8、IE9单独出来也比排在第二、第三名的Firefox和Chrome的份额高。所以，IE的市场仍然不能忽视。
尽管bootstrap早有准备，如head内的代码如下
即只要是IE9以下，就调用两个专门的js。不过，这两个js也没有解决问题。
仔细阅读bootstrap的说明，可能可以解决问题的方法列举如下：
1、没有正确设置远程调用
调用html4shiv.js和respond.min.js时，如果要调用远程的，需要特别处理一下。即跨域名调用的时候有点额外的事情要做。具体做法如下链接：
不过，我不准备调用远程的，我使用本地的调用。所以，这个问题我不用考虑了。
2、调用的方法不正确
不要用file://或@import形式引用respond.min.js或respond.js
3、针对浏览器的内容标识
关于这一句的用途，有高人做了详细的介绍：
所以要再加一句：
4、IE8不支持container的几个属性
IE8不完全支持box-sizing:border-box与min-width, max-width, min-height或max-height的组合使用.所以，v3.0.1的bootstrap中对container的类，已经不再使用max-width了。
5、JS与CSS的引入顺序导致的问题
有个人的问题是把引用js与css时，顺序不对导致错误。他的结论是先css，再js。如下图：
6、DOCTYPE前后有空行
不过，说实话，，做为官方网站。使用IE6、7、8访问的时候，主菜单也是不见了，显示的结果跟移动设备上的一样。他们都解决不了或者不愿意，我们要么使用别的UI如Yahoo!的Pure UI，要么就得自己想办法搞定它。
上图：IE8中的bootstrap官网
7、修改bootstrap.css
有一位使用的是bootstrap2.1.1，是菜单不显示了。他修改了了navbar-inner{ filter:none}解决了问题，不过，我使3.0版的，那段代码已经没有了。
8、使用css3-mediaquerires.js
它起的作用跟respond.js或respond.min.js一样。不过，我试验不成功。
9、使用quirks mode（兼容模式）
定义网页时，向后兼容旧的浏览器的模式就叫quirks mode，与之对应的是&标准模式& standard mode。具体来说，是将&!DOCTYPE html&写成以前的那种
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01//EN& &http://www.w3.org/TR/html4/strict.dtd&&
有人说这样可以让bootstrap3的网页在IE8下正常显示。我试验，不成功！
本文收录在文集：《LAMP开发网站过程中遇到的小问题》中，其中收录了76篇文章
本文作者：王军
每天记录一点学习心得，每天反省一下当天的得失，每天努力多一点，相信每天都会有进步。不要迷恋哥，哥已经结婚了。
文中第6条说的那个空格，不是smarty添加的，是Windows操作系统添加的。是一个BOM。BOM是Byte Order Mark的缩写，直译为“字节顺序标记”，出现在文本文件头部，Unicode编码标准中用于标识文件是采用哪种格式的编码。Windows 就是使用 BOM 来标记文本文件的编码方式的。类似WINDOWS自带的记事本等软件，在保存一个以UTF-8编码的文件时，会在文件开始的地方插入三个不可见的字符（0xEF 0xBB 0xBF，即BOM）。它是一串隐藏的字符，用于让记事本等编辑器识别这个文件是否以UTF-8编码。使用一UltraEdit之类的软件就可以看到这些BOM，保存的时候也可以选择保存为不带BOM的格式。
38楼的，不能“感觉”啊，你用firefox浏览网页，工具--Web开发者--Web控制台，在网页上“查看元素”，就可以看到哪些css被使用，哪些被override掉了。不就清楚了吗？清楚了，你就会知道怎么做了。
谢谢楼主分享，感觉这几点比较关键但是我的问题还是没解决 我下载了最新的respond
确认了顺序 加了modernizr.js可在ie8下感觉container
和 图片的轮播效果没有了 然后img图片的class属性也没有了如果楼主发现的话能不能给我个建议
jQuery 2.x开始抛弃IE6、7、8了，也不知道这玩意在中国还有多大份额。估计以后不用考虑这三个版本的用户了。这样一群守旧的人看互联网，肯定看到的是满眼疮痍，他们得反省反省，找找自己的原因了。
虽然没解决，还是谢谢作者！
据说这个可以解决IE7的问题，没试过。真得不觉得要兼容IE7了。
下载网址：
/coliff/bootstrap-ie7
发现新套路：可能不是。。。但必须分享： render.js和html5那个js，必须放到bootstrap.css后面，IE8导航正常！
第6条中所说的空行就是BOM，为Windows文件格式而添加的。使用UltraEdit就可以看到它，并可以删除它。好像Dreamweaver是看不到的。
使用IETESTER测试IE8不兼容
我本地文件 html5shiv-printshiv.js 和respond.js这两个文件已引用。IE8下没有图表显示。大哥您qq或邮箱多少啊
我把文件发给您看下！
请问您qq或邮箱多少啊
我把文件发给您您看下！
回复第28楼：把你的页面下载下来，及查看源文件也没有看到html5shiv-printshiv.js 和respond.js这两个文件，也没有看到你如何引用过它们。因为页中直接使用，所以看起来很慢。IE9下也半天没有图表。
//b9f18c8bdba38083/index.html我用了和的确是好了 但是在ie8下
曲线图、柱状图和地图还是不显示的！求帮助
回复第26楼：实际嵌套的是这个页面：
//b9f18c8bdba38083/index.html
而这个页面中并没有使用上文第6条中所说的html5shiv-printshiv.js 和respond.js。
另外，页面中有注释-->多了一个，就在前面
求助求助: /resource/view/1036
在ie8下页面全乱了 其他浏览器都是好的 帮我看下是怎么回事
求助/preview/WB0573SK0
在ie8下页面全乱了
其他浏览器都是好的
帮我看下是怎么回事
回复第22楼：你的这个顺序仍然是有问题的，请参照/index.html 查看这个页面的源文件，看看这个页面的引用顺序和写法。
回复第21楼：你就下载本站的respond.js吧，版本比较新。
/bootstrap/js/respond.min.js
不知你是从哪里下载的。
bootstrap.css">
bootstrap-theme.css">
html5shiv-printshiv.js
jquery.js
bootstrap.js
respond.src.js
这样导进去就ie 7 8出错了，为什么呢
SCRIPT5: 拒绝访问。
respond.src.js, 行49 字符5
这个雅朋网的bootstrap已经是3.2版的，挺前卫的哈
回复第18楼：看看你那两个文件是不是最新版本的，如果不是，从我们这个网站直接访问那两个文件就好了。html5shiv.min.js和respond.min.js
楼主你做的这个网站为什么在ie8 运行正常呢 我看了我写的和你这个没有区别啊 导航的那个地方还是和移动端显示一样 请问你是怎解决的呢 可以告诉我下吗 qq
16楼 王军 于
01:08:24
回复第15楼：
看看这个雅朋网呢？没有功夫打理。
我以为雅朋网是你写博客的平台了。。。 这个IE8下是正常的。博主方便加下QQ吗？ 碰上和你一样的问题了，求指点
回复第15楼：看看这个雅朋网呢？没有功夫打理。
楼主也还没搞定吗？
/ 这个在IE8下还是和手机上一样的
刚好碰到这个问题，先按楼主分享的试验一下，再来反馈
解决了。不好意思，楼主，是我自己出了一个小小的失误。
&ltBR />你的方法确实是可行的。
&ltBR />非常感谢你和各位的帮助。
我没有IE8，所以安装了IE Tester，测试是正确的。
&ltBR />不过有些在线的测试结果好像是不正确的。如。
&ltBR />
我找你说的更新了最新的respond.js，还是不行呢。
&ltBR />用IE8打开那个测试页面根本显示不出来啊。
&ltBR />还有你的这个页面在IE8下也是乱的啊。
回复第9楼：下载最新的Respond.js，可以修复IE6-8的问题。
/scottjehl/Respond
演示网页在：
http://scottjehl.github.io/Respond/test/test.html
刚刚用IE8查看你这个页面，也出现了问题哦！
我放在最下面也没有成功，还有什么需要注意么？
回复第2楼：看看页面的源代码就知道了，注意各文件的引入顺序，就成了。
看来bootstrap想用的人很多啊
重新测试了下 那个导入其他两个js文件的方法确实可行 不过那句代码要放在 其他css的下面才有用
好吧 又正常了
请回答下 我2楼的问题噻
提交评论的时候有错误 我去。。。我发这个评论是为了给你复制那个错误 谷歌浏览器 35
请问一下 你是怎么解决的？这个问题 我看贵站的导航条已经基本正常了
是啊，官方网站上还煞有介事地介绍如何为IE8配置呢，结果还是这个样子。不支持IE8不是找死吗？
本文集目录bootstrap很喜欢，很想把他拿来前端不过发现不兼容IE8，能解决吗？ - 开源中国社区
当前访客身份：游客 [
当前位置：
bootstrap很喜欢，很想把他拿来前端不过发现不兼容IE8，像上面一样用IE8会变窄，显示的页面是手机的差不多，能解决吗？
共有10个答案
<span class="a_vote_num" id="a_vote_num_
bootstrap2.x版本不是兼容吗？
<span class="a_vote_num" id="a_vote_num_
3.0兼容IE8是需要做一些处理的，比如限定edge访问，先添加HTML5.js，再添加response.js等等，bootstrap官网有具体的教程
<span class="a_vote_num" id="a_vote_num_
--- 共有 1 条评论 ---
好的回去搜一下
(2年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
自己些hack嘛
--- 共有 1 条评论 ---
我还是新手，还不了解这一块
(2年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
以前两句代码请收藏：
&meta http-equiv="X-UA-Compatible" content="IE=edge"& &meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!--[if lt IE 9]& & &script src="/html5shiv/3.7.0/html5shiv.min.js"&&/script& & &script src="/respond.js/1.3.0/respond.min.js"&&/script& &![endif]--&
--- 共有 1 条评论 ---
这个好像不最新版，不过我也不打算用最新版了
(2年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
可以试试bui 兼容bootstrap以及浏览器 淘宝开发的
--- 共有 1 条评论 ---
好的，不过还是想用原生的
(2年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
放弃IE吧，除非是银行机构不得不用
--- 共有 2 条评论 ---
(2年前)&nbsp&
这个得客户放弃才行
(2年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
有专门兼容ie 8的插件，下一个
<span class="a_vote_num" id="a_vote_num_
谢谢各位的热情回答
<span class="a_vote_num" id="a_vote_num_
本人是用ie8& hack解决的。。
--- 共有 1 条评论 ---
(1年前)&nbsp&
更多开发者职位上
有什么技术问题吗？
陈为迪的其它问题
类似的话题