学习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. Yii源码阅读笔记（二十六）

    Application 类中设置路径的方法和调用ServiceLocator(服务定位器)加载运行时的组件的方法注释: /** * Handles the specified request. * 处 ...

  2. TypedValue.applyDimension 中dp和sp之间转化的真相

    转载自http://www.cnblogs.com/xilinch/p/4444833.html 最近在看了许多关于dp-px,px-dp,sp-px,px-sp之间转化的博文,过去我比较常用的方式是 ...

  3. iOS:最详细的创建CocoaPods私有库教程

    一.感慨 说实话,创建这个CocoaPods私有库,我愣是搞了两个星期,创建的过程中,自己的感情波动是这样的:激情四射---->有点困惑----->极度困惑----->有点失望--- ...

  4. eNSP的使用

    1- 进入华为路由器界面配置ipThe device is running!####################################Nov  1 2016 23:39:24-08:00 ...

  5. github 或者gitlab 设置添加SSH, 避免每次提交重复输入用户名

    克隆项目二种方式: 1. 使用https url克隆,   复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...

  6. MVC+EF OA观看视频记录

    搭建基本框架 创建基接口: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  7. 打开VS调试不进入开发的网站直接跳转到主页

    重启了熟悉有卸载IE11的,搞了好几个小时 最后把电脑管家里的锁定主页打开就好了! 很久之后  我再锁上  也没有这问题了

  8. JQuery data API实现代码分析

    JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the v ...

  9. 循环生成sql文件。

    package com; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java ...

  10. Chart 绘制，自带动画效果

    package com.example.canvasdemo; import android.annotation.SuppressLint; import android.content.Conte ...