如何从Bootstrap2升级到Bootstrap3 bootstrap 兼容哪些浏览器
如何从Bootstrap2升级到Bootstrap3
Bootstrap3是完全重构了整个Bootstrap代码框架，所以理论上而言它并不支持Bootstrap2。
不过你可以通过对被修改的class，新增的class，以及被删除的class来对自己已经成型的Bootstrap2项目进行升级。
但是记得最重要的一点：Bootstrap3对于IE8以及低于IE8以下的浏览器支持相当不好。
bootstrap 兼容哪些浏览器
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
bootstrap3支持的浏览器：
Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，只是官方并不提供支持。
Internet Explorer 8 和 9的很多CSS3属性和HTML5元素，例如圆角矩形和投影，不支持。
Internet Explorer 6 几乎不支持，nav, pagination 等在ie6上表现都特别差。
使用bootstrap2的bsie插件 http://www.bootcss.com/p/bsie/ ，提取插件里的 bootstrap-ie6.css 和ie.css，在页面的head里bootstrap.css之下加入如下代码：
禁用响应式布局：
html里的css代码：
打开 bootstrap-ie6.css文件，将文件里的pager替换为pagination，用于支持bootstrap3的分页组件。并在底部加入如下代码，代码作用请看注释：
/* 栅栏系统，溢出的问题 */
.col-xs-1 {
width: 5.7%
}
.col-xs-2 {
width: 13.96%
}
.col-xs-3 {
width: 22.2%
}
.col-xs-4 {
width: 30.5%
}
.col-xs-5 {
width: 38.8%
}
.col-xs-6 {
width: 47%
}
.col-xs-7 {
width: 55.2%
}
.col-xs-8 {
width: 63.5%
}
.col-xs-9 {
width: 72%
}
.col-xs-10 {
width: 80%
}
.col-xs-11 {
width: 88.3%
}
.col-xs-12 {
width: 100%
}
/* 修复ie6下分页组件css解析失败的问题 */
.pagination .active a,
.pagination .active span {
z-index: 2
color: #ffffff
cursor: default
background-color: #428bca
border-color: #428bca
}
/* 修复ie6下input样式被重写的问题*/
.form-control{
display: block
width: 100%
height: 34px
padding: 6px 12px
font-size: 14px
line-height: 1.428571429
color: #555555
vertical-align: middle
background-color: #ffffff
border: 1px solid #cccccc
border-radius: 4px
}
在html页body之上添加如下代码：
html整个头部文件如下：
bootstrap3和2的区别
1. 整体效果上，2属于常规的效果，3偏向ios的扁平化效果
2. 第三版以 手机响应式responsive为重点，第二版关注电脑浏览器多些
3. 多了些类，删了些类 （这个可以到官网看增删）
4. 感觉第三版的图片属于矢量，但是我还没去验证。
5. ------ 第三版 我觉得最不错的是Grid options，按照不同屏幕宽度，排版很灵活。
（怎么灵活法？百度col-md相关的东东）
col-xs-*
col-sm-*
col-md-*
col-lg-*
bootstrap 栅格系统怎么用
2、栅格选项
bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
3、列偏移
使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
4、嵌套列
为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。
5、列排序
通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
案例
复制代码
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath()
%>