学习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. python中多进程（multiprocessing）

    一.multiprocessing中使用子进程概念 from multiprocessing import Process 可以通过Process来构造一个子进程 p = Process(target ...

  2. 基于swoole的网页一对一实时聊天

    需求分析 网站上实现一对一即时沟通,能查看聊天记录以及离线留言,新消息提醒. 核心技术 html5的websocket,php的swoole扩展http://wiki.swoole.com/ 数据表 ...

  3. Objective-C objc_class 介绍

        目录(?)[-] Objective-C objc_class 介绍 NSObject objc_class isa super_class name version info instanc ...

  4. [LeetCode]题解（python）：119 Pascal's Triangle II

    题目来源 https://leetcode.com/problems/pascals-triangle-ii/ Given an index k, return the kth row of the ...

  5. 当html标签不被识别时（不解析）不妨试试htmlspecialchars_decode();试试

  6. RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.8 版本发布

    (新年巨献) RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.8 版本发布 历时数月,RDIFramework.NET V2.8版本发布了,感谢大家的支持. RDIFram ...

  7. （转）MVC设计模式学习总结

    原文  : chenchun的博客 http://www.cnblogs.com/jobscn/archive/2011/11/08/2240725.html -------------------- ...

  8. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  9. 自定义view

    这两篇文章不可错过,是最靠谱的基础文献.总的来说,如果想完全定制,就继承与于View类:如果只是在原有控件基础上拓展,那就继承TextView.Button或者LinearLayout等.接下来,就以 ...

  10. Dynamics AX 2012 R2 报表部署权限错误

    今天,Reinhard在 Deploy AX Reporting时,发生权限错误. 配置 ID: HOSTMSSQLSERVER 描述: HOST@MSSQLSERVER 默认值: True 报表服务 ...