zoukankan      html  css  js  c++  java
  • 响应式设计,bootstrap框架的IE兼容问题

    学习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

  • 相关阅读:
    localstorage和sessionstorage的区别
    vue监听数组变化
    博客项目之设计访客统计
    记录从前端到后端--博客项目
    把w3schools英文版的所有属性扒下来了,免费分享。
    记一次博客园改版,如果你想做的漂亮点的话。
    我有话说
    彻底理解nth-child和nth-of-type的区别。
    前端这条路,我们该何去何从,续集
    一篇通俗易懂的CSS层叠顺序与层叠上下文研究
  • 原文地址:https://www.cnblogs.com/w2xh/p/3652408.html
Copyright © 2011-2022 走看看