bootstrap 兼容哪些浏览器

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。bootstrap3支持的浏览器：

Chrome (Mac、Windows、iOS和Android)Safari (只支持Mac和iOS版，Windows版已经基本死掉了)Firefox (Mac、Windows)Internet ExplorerOpera (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之下加入如下代码：<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1"><![endif]--><!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/css/ie.css"><![endif]-->禁用响应式布局：

<link href="/css/non-responsive.css" rel="stylesheet" media="screen">

html里的css代码：

<style type="text/css">body {    padding-top: 60px;    padding-bottom: 40px;}/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container {    width:1140px;}</style>

打开 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;

  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;

  border: 1px solid #cccccc;  border-radius: 4px;}在html页body之上添加如下代码：

<!--[if lte IE 6]><script type="text/javascript" src="/js/bootstrap-ie.js"></script><![endif]--><script type="text/javascript">(function ($) {  $(document).ready(function() {    if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6($(document));  });})(jQuery);</script>

html整个头部文件如下：

<!DOCTYPE HTML><html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="/css/bootstrap.min.css" rel="stylesheet" media="screen"><!-- Bootstrap theme --><link href="/css/bootstrap-theme.min.css" rel="stylesheet"><!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1"><![endif]--><!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/css/ie.css"><![endif]--><link href="/css/non-responsive.css" rel="stylesheet" media="screen"><link href="/css/showLoading.css" rel="stylesheet" media="screen"><script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script><script type="text/javascript" src="/js/bootstrap.min.js"></script><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>  <script src="/js/html5shiv.js"></script>  <script src="/js/respond.min.js"></script><![endif]--><style type="text/css">body {    padding-top: 60px;    padding-bottom: 40px;}/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container {    width:1140px;}</style>

转载于:https://www.cnblogs.com/huangf714/p/5809973.html

bootstrap 兼容哪些浏览器相关推荐

bootstrap 兼容ie8浏览器
bootstrap 兼容ie8 简单说明完整代码 Demo下载简单说明最近做项目碰到个问题,就是用bootstrap做后台框架的时候,发现IE9以下都不能完整的兼容. IE8表现为:界面兼容,b ...
bootstrap 兼容ie8 浏览器
今天晚上在玩弄bootstrap的时候,发现在ie8上不兼容(吐槽下,即使是官方的demo,在ie8上,效果也非常差,),原来是不支持媒体查询的缘故,但在项目开发中,ie8肯定得考虑的,找了好久,终于 ...
让Bootstrap 3兼容IE8浏览器
看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2 ...
【兼容】兼容IE8浏览器
bootstrap3 兼容IE8浏览器近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框 ...
让bootstrap兼容ie6 ie7 ie8 ie9 ie10 ie11的解决方法
前两天遇到要bootstrap兼容ie各个版本的问题,但是各种百度,各种博客,最后算是解决了,但是迷迷糊糊的,现在来总结一下,如有雷同纯属总结. 首先看看代码的模样: <html> < ...
Copy复制命令兼容各种浏览器（等同于触发Ctrl+C或者Command⌘+C）
/*复制命令兼容各种浏览器*/ function copy(copyContent, isAlert, maxLength) {if (window.clipboardData) {window.cl ...
分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag
为什么80%的码农都做不了架构师?>>> 日期:2012-6-26 来源:GBin1.com 今天我们介绍一个能够帮助你自定义标签的js类库:x-tag,使用这个类库可以快速 ...
关于文件导出(下载)功能不兼容IE浏览器的解决方案
关于文件导出(下载)功能不兼容IE浏览器的解决方案参考文章: (1)关于文件导出(下载)功能不兼容IE浏览器的解决方案 (2)https://www.cnblogs.com/padaleidelei ...
javascript 复制功能兼容所有浏览器的解决方案
代码如下: // 兼容所有浏览器function copyUrl(url) {if (navigator.userAgent.toLowerCase().indexOf('ie') > -1) ...

bootstrap 兼容哪些浏览器

bootstrap 兼容哪些浏览器相关推荐

最新文章

热门文章