Bootstrap笔记

回顾：

事实：移动端的用户已经超过pc端

设计原则：移动端优先原则

设计：

1. Header

    Header(“location:http://m.jd.com”)

2. Media query 媒体查询

@media only screen and (min-width:300px) and (max-width:500){

.media{

}

#id{

}

}

<link type=”text/css”rel=”stylesheet”href=”./m.css”media=”screen and ()”/>

Viewport

<metaname="viewport"content="width=device-width, initial-scale=1.0">

参数：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width    为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

单位： 要使用rem 而不是px

1rem 相当于当前网页根节点html的字体大小

1em 相当当前元素的父级元素的字体大小

Bootstrap 初始化

1. Bootstrap 的css
2. Jquery
3. Bootstrap 的js
4. H5规范

字体  小标签

注意： 要把字体文件复制过来

重点：Bootstrap 栅格布局

设备宽度：

<768px

超小设备 xs

768-992px

 小设备 手机平板 sm

992-1200px

中等设备  电脑屏幕  md

>1200px

超大设备  lg

1. 栅格布局 把屏幕12等分
2. 栅格布局的两种布局模式

1---container 相当于我们的固定宽度布局

2--container-fluid 相当于宽度100%的布局

3. 划分宽度

4. 如何实现根据屏幕大小响应式布局

5. 超出12等分的超出部分另起一行

6 . 偏移

7. 栅格嵌套

8. 列排序      关键词  push  pull  col-md-push-8