bootstrap框架怎么在html页面加载使用bootstrap一般的可以直接在官方下载后上传到自己服务器使用官方下载地址http://v3.bootcss.com/getting-started/#download根据自己的上传路径，HTML直接引用相关css，js。。。还可以使用cnd引用bootstrap官方cdn引用<br><br><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><br><script src=//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js></p><h2>如何用bootstrap解决分辨率</h2><p>Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。<br>bootstrap3支持的浏览器：<br><br>Chrome (Mac、Windows、iOS和Android)<br>Safari (只支持Mac和iOS版，Windows版已经基本死掉了)<br>Firefox (Mac、Windows)<br>Internet Explorer<br>Opera (Mac、Windows)<br>Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，只是官方并不提供支持。<br>Internet Explorer 8 和 9的很多CSS3属性和HTML5元素，例如圆角矩形和投影，不支持。<br>Internet Explorer 6 几乎不支持，nav, pagination 等在ie6上表现都特别差。<br>使用bootstrap2的bsie插件 http://www.bootcss.com/p/bsie/ ，提取插件里的 bootstrap-ie6.css 和ie.css，在页面的head里bootstrap.css之下加入如下代码：<br><!--[if lte IE 6]><br><link rel=stylesheet type=text/css href=/css/bootstrap-ie6.css?1><br><![endif]--><br><!--[if lte IE 7]><br><link rel=stylesheet type=text/css href=/css/ie.css><br><![endif]--><br>禁用响应式布局：<br><br><link href=/css/non-responsive.css rel=stylesheet media=screen><br><br>html里的css代码：<br><br><style type=text/css><br>body {<br> padding-top: 60px<br> padding-bottom: 40px<br>}<br>/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */<br>.container,<br>.navbar-static-top .container,<br>.navbar-fixed-top .container,<br>.navbar-fixed-bottom .container {<br> width:1140px<br>}<br></style><br><br>打开 bootstrap-ie6.css文件，将文件里的pager替换为pagination，用于支持bootstrap3的分页组件。并在底部加入如下代码，代码作用请看注释：<br><br>/* 栅栏系统，溢出的问题 */<br>.col-xs-1 {<br> width: 5.7%<br>}<br>.col-xs-2 {<br> width: 13.96%<br>}<br>.col-xs-3 {<br> width: 22.2%<br>}<br>.col-xs-4 {<br> width: 30.5%<br>}<br>.col-xs-5 {<br> width: 38.8%<br>}<br>.col-xs-6 {<br> width: 47%<br>}<br>.col-xs-7 {<br> width: 55.2%<br>}<br>.col-xs-8 {<br> width: 63.5%<br>}<br>.col-xs-9 {<br> width: 72%<br>}<br>.col-xs-10 {<br> width: 80%<br>}<br>.col-xs-11 {<br> width: 88.3%<br>}<br>.col-xs-12 {<br> width: 100%<br>}<br><br>/* 修复ie6下分页组件css解析失败的问题 */<br>.pagination .active a,<br>.pagination .active span {<br> z-index: 2<br> color: #ffffff<br> cursor: default<br> background-color: #428bca<br> border-color: #428bca<br>}<br><br>/* 修复ie6下input样式被重写的问题*/<br>.form-control{<br> display: block<br> width: 100%<br> height: 34px<br> padding: 6px 12px<br> font-size: 14px<br> line-height: 1.428571429<br> color: #555555<br> vertical-align: middle<br> background-color: #ffffff<br> border: 1px solid #cccccc<br> border-radius: 4px<br>}<br>在html页body之上添加如下代码：<br><br><!--[if lte IE 6]><br><script type=text/javascript src=/js/bootstrap-ie.js><br><![endif]--><br><script type=text/javascript><br>(function ($) {<br> $(document).ready(function() {<br> if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6($(document))<br> })<br>})(jQuery)<br><br><br>html整个头部文件如下：<br><br><!DOCTYPE HTML><br><html><br><meta http-equiv=Content-Type content=text/html charset=UTF-8><br><meta http-equiv=X-UA-Compatible content=IE=edge><br><link href=/css/bootstrap.min.css rel=stylesheet media=screen><br><!-- Bootstrap theme --><br><link href=/css/bootstrap-theme.min.css rel=stylesheet><br><!--[if lte IE 6]><br><link rel=stylesheet type=text/css href=/css/bootstrap-ie6.css?1><br><![endif]--><br><!--[if lte IE 7]><br><link rel=stylesheet type=text/css href=/css/ie.css><br><![endif]--><br><link href=/css/non-responsive.css rel=stylesheet media=screen><br><link href=/css/showLoading.css rel=stylesheet media=screen><br><script type=text/javascript src=/js/jquery-1.10.2.min.js><br><script type=text/javascript src=/js/bootstrap.min.js><br><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><br><!-- WARNING: Respond.js doesnt work if you view the page via file:// --><br><!--[if lt IE 9]><br> <script src=/js/html5shiv.js><br> <script src=/js/respond.min.js><br><![endif]--><br><style type=text/css><br>body {<br> padding-top: 60px<br> padding-bottom: 40px<br>}<br>/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */<br>.container,<br>.navbar-static-top .container,<br>.navbar-fixed-top .container,<br>.navbar-fixed-bottom .container {<br> width:1140px<br>}<br></style></p><h2>Bootstrap 3 有哪些改进</h2><p>1 ，文档的改变 <br><br>但是因为现在Bootstrap 3下载链接变成了最近版本 (lastest version)，并且每天的改动非常多，而文档更新不是很及时，所以有些会对不上<br><br>2 ，一些全局CSS的改变<br><br>3.， 栅格系统 (Grid system)<br>说个我认为比较重要的，相对于RC 1中的3层，现在有4层了<br>We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops)<br>.col-xs 对应手机设备<br>.col-sm 对应平板设备<br>.col-md 对应普通桌面设备<br>.col-lg 对应宽屏设备<br><br>4， 组件的改进与删减，包括： 按钮、表格、导航栏等<br><br>5 ，还有就是RC 2修复了RC 1中的超多Bug</p>
