bootstrap

Bootstrap3兼容性与特性

最新推荐文章于 2024-08-31 06:39:46 发布

转载最新推荐文章于 2024-08-31 06:39:46 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/angis/p/6249153.html

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，也就是不做任何的缩放。一般在适配移动浏览器时都加上这句代码

   <!--[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>

转载于:https://www.cnblogs.com/angis/p/6249153.html