简洁、直观、强悍、移动设备优先的前端开发框架
一、
主要用宽960px的栅格式布局法
分为12列（常用） 一行12个单元格 每格60px 间距20px 3 6 3版 三格式布局
16列
24列
32列
Bootstrap必有的一些格式
1、<html lang="zh-CN"> 支持html5文档
2、在head 中添加：<meta name="viewport" content="width=device-width, initial-scale=1.0">
3、引入css <link rel="stylesheet" href="./css/bootstrap.min.css">
4、在</body>之前引入jq及js
<script src="./js/jquery-1.11.2-min.js"></script>
<script src="./js/bootstrap.min.js"></script>
由于bootstrap大多为开源性的信息，很多的样式都有现成的样式可照搬，这就简化了大量的代码量
二、
1、自适应页面：能使页面自适应显示在不同大小终端设备上的页面。
2、响应式布局：一个网站能够兼容多个终端，而不是为每个终端都做一个特定的版本，实现响应式布局的方法：bootstrap和CSS原生代码两种方法。
3、CSS原生代码是通过@Media媒体查询，改变屏幕宽度使其自适应。
4、响应式布局中：单位1em=16px,相对于body，会继承；1rem=16px，相对于根元素，不会继承。
5、PC端@media screen and (min-width:1000px){}
手机端@media screen and (max-width:767px){}
平板端@media screen and (min-width:768px)and (max-width:999px){}
一般建议宽度设置100%自适应，网页头部，尾部高度格局不变，其余自适应，根据屏幕大小的不同，这是的阈值的不同，显示不同的网页布局内容。
6、需引入viewport元数据标签（head）,为了可以使屏幕缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7、px特点：
IE无法调整那些使用px作为单位的字体大小，国外大部分网站能够调整的原因在于其使用了em和rem作为字体单位。
8、em是相对长度单位。相对于当前对象内文本的字体尺寸。
9、布局法：
一般来说，PC端采用三栏式布局，平板端采用两栏式布局，手机端采用一栏式布局。
浙公网安备 33010602011771号