学习bootstrap框架，主要是为了集成好的响应式框架，及其兼容性。

但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后，怎么测试都不成功，在ie8下一直看不到媒体查询的效果，纠结了一整天的respond.js的失效问题，最后一气之下，把他的整个案例在ie8下复制了源代码，在本地一个个删掉测试，最后郁闷的发现，原来他连接到bootstrap网站的css是根本原因，改成本地的bootstrap.css就成功了。（坑爹呢！）

下面是中文站提供的基本模版：

<!DOCTYPE html>

<html>

  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- 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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Hello, world!</h1>

　　

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

  </body>

</html>

然后我加入了测试的栅格布局

<!DOCTYPE html>

<html>

  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- 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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <div class="container">

        <div class="row">

          <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

        </div>

        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

        <div class="row">

          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

        </div>

        <!-- Columns are always 50% wide, on mobile and desktop -->

        <div class="row">

          <div class="col-xs-6">.col-xs-6</div>

          <div class="col-xs-6">.col-xs-6</div>

        </div>

    </div>

　　

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

  </body>

</html>

最后改掉bootstrap.css，在本地引用后正常显示。

虽然不怎么相信是中文站出错，但是事实就是这样，也许是我未能学习到的一些问题吧？

模版世界:http://www.templatesy.com

响应式设计，bootstrap框架的IE兼容问题的更多相关文章

  1. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  2. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  3. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  4. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  5. paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54

    paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...

  6. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  7. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  8. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

  9. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  10. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

随机推荐

  1. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  2. Flex HTTPService json

    import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; i ...

  3. vba 工作案例-sheet间拷贝内容

    核心代码就是Copy Destination. Sub copy_data() ' ' copy_data 宏 ' ' Dim fzjgs() As Variant Dim cities As Var ...

  4. Redis主从在线互相切换

    由于某些原因,我们可能需要将redis master更换机器,我们可以停机进行更换,但是那样可能影响到用户体验.本文简要操作进行不停机迁移. 系统环境 CentOS 6.3 x64redis-serv ...

  5. iOS摄像头和相册-UIImagePickerController常用操作

    在一些应用中,我们需要用到iOS设备的摄像头进行拍照,视频.并且从相册中选取我们需要的图片或者视频. 关于iOS摄像头和相册的应用,可以使用UIImagePickerController类来完成控制. ...

  6. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  7. Android （二维码）关于java.lang.UnsatisfiedLinkError的小案例

    在许多项目中我们都会用到第三方动态库.so文件,但是往往会引来很多烦恼,比如:Java.lang.UnsatisfiedLinkError - ::-/com.ishow.scan E/Android ...

  8. Elasticsearch + logstash中文指南

    http://kibana.logstash.es/content/logstash/examples/nginx-access.html http://es.xiaoleilu.com/030_Da ...

  9. Nginx下配置SSL安全协议

    生成证书: # cd /usr/local/nginx/conf # openssl genrsa -des3 -out server.key 1024 # openssl req -new -key ...

  10. 用命令实现SQLServerr的备份与还原

    一.备份数据库,命令如下: USE master; GO BACKUP DATABASE mytest TO DISK='E:\disk\mytest.bak' /* mytest为数据库名称,'E: ...