学习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. php mysql_num_rows() 与 mysql_affected_rows()

    mysql_num_rows(data) 函数返回结果集中行的数目. data 结果集.该结果集从 mysql_query() 的调用中得到. 此命令仅对 SELECT 语句有效.要取得被 INSER ...

  2. ios开发xcode中设置代码块

    在开发中有很多重复的代码,很多开发者把常用的代码做成代码块提高开发效率. 在xcode里选中代码块的时候总是很不容易,点击选中的代码(文字),不要移动和松开鼠标左键,当竖线变成像拉长了的x(我也不知道 ...

  3. LeetCode Range Sum Query 2D - Mutable

    原题链接在这里:https://leetcode.com/problems/range-sum-query-2d-mutable/ 题目: Given a 2D matrix matrix, find ...

  4. JAVA - ATM机程序

    ATM机程序 UnionPayTest.java package oo.day06.work; public class UnionPayTest { } interface UnionPay{ // ...

  5. join用法

    join命令可以将多个文件结合在一起,每个文件里的每条记录,都共享一个键值(key),键值指的是记录中的主字段,通常会是用户名称.个人姓氏.员工编号之类的数据. join - join lines o ...

  6. 模板 BFS

    [模板]BFS #include <stdio.h> #include <string.h> #include <queue> using namespace st ...

  7. c#委托、事件、Observer

    委托和事件在.NET Framework[1] 中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易. 中文名 委托 外文名 Delegate 编程语言 C# 作     ...

  8. Redis的简介与安装

    1.简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...

  9. 使用匿名函数在回调函数中正确访问JS循环变量

    有时候, 需要以不同的参数调用某个URL,并且在回调函数中仍然可以访问正在使用的参数, 这时候, 需要使用闭包保存当前参数, 否则, 当回调函数执行时, 之前的参数很可能早已被修改为最后一个参数了. ...

  10. TBB 学习笔记

    #include <tbb/task_scheduler_init.h> #include <tbb/blocked_range.h> #include <tbb/par ...