• 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>
  • 相关阅读:
    Java连载91-Map常用方法、Hashtable、SortedMap
    Python爬虫连载11-cookie、session、验证SSL证书、数据提取简介
    Java连载90-Sorted、Map讲解
    HTML连载71-翻转菜单练习
    Java连载89-SorteSet、Comparable接口
    Python爬虫连载10-Requests模块、Proxy代理
    Java连载88-HashSet集合与hashCode方法重写
    [设计模式] 设计模式课程(五)--装饰模式
    [设计模式] 设计模式课程(四)-- 观察者模式
    [设计模式] 设计模式课程(二)-- 模板模式
  • 原文地址:https://www.cnblogs.com/angis/p/6249153.html
Copyright © 2020-2023  润新知