zoukankan      html  css  js  c++  java
  • bootstrap

    1.bootstrap3放弃了对IE7和FireFox3.x的支持,在IE8中虽然支持,但支持有限,呈现的效果大打折扣。

    2. <meta http-equiv="X-UA-Compatible" content="IE=edge">   bootstrap不支持IE的兼容模式,上面代码是为了在IE上运行最新的渲染模式。

    3.<meta name="viewport" content="width=device-width, initial-scale=1"> 让视口的宽度等于物理设备上真实的分辨率,初始的缩放比例为1,也就是不做任何的缩放。一般在适配移动浏览器时都加上这句代码

    4. 

       <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    当浏览器低于IE9时(对于bootstrap3来说由于bootstrap3不支持IE7,所以也就是IE8时),上面的代码起作用。

    bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可。

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

    同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码:

    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

    5.SASS and LESS
    不管是SASS,还是LESS,都可以视为一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大,这两者我的感觉是对于程序员来说,SASS的功能要远比LESS强大,基本可以说是一种真正的编程语言了,而对于设计师,LESS则相对清晰明了,这里是Chris Coyier写的一篇关于SASS和LESS的背靠背对比,可以说是相当中肯的(评论也相当有料喔)。当然,如果使用Rails之类的框架,基于SASS是会来的更方便一些。 

    6.

    表格--响应式表格

    随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。
    Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果。
    Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

    <div class="table-responsive">
    <table class="table table-bordered">
       …
    </table>
    </div>
    7.

    不管是“input-sm”还是“input-lg”仅对控件高度做了处理。但往往很多时候,我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。所以你要控制表单宽度,可以像下面这样使用:

    <form role="form" class="form-horizontal">
      <div class="form-group">
      <div class="col-xs-4">
        <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
      </div>
      <div class="col-xs-4">
        <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
      </div>
      <div class="col-xs-4">
        <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
      </div>
      </div>
        …
    </form>
  • 相关阅读:
    P3501 [POI2010]ANT-Antisymmetry
    P3498 [POI2010]KOR-Beads(hash表)
    UVA10298 Power Strings
    UVA1714 Keyboarding(bfs)
    P4289 [HAOI2008]移动玩具(bfs)
    Ubuntu分辨率太小的解决方案
    Ubuntu分辨率太小的解决方案
    主板亮红灯,显示器没信号
    主板亮红灯,显示器没信号
    VS注释与取消注释快捷键
  • 原文地址:https://www.cnblogs.com/angis/p/6249153.html
Copyright © 2011-2022 走看看