Bootstrap笔记1

开始使用Bootstrap
下载安装：
在HTML中引入相应的CSS和JS文件
注意：Bootstrap的JS组件依赖于jQuery
Bootstrap文档：
http://v3.bootcss.com/ 中文网

视口的作用：
在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
视口的宽度可以通过meta标签设置；
此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并缩放（缩放级别为1）

width: 视口的宽度
initial-scale: 初始化缩放
user-scalable: 是否允许用户自行缩放（值：yes/no; 1/0）
minimun-scale: 最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
maximun-scale: 最大缩放

通常我们在移动Web开发时需要将Viewport设置为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

最终效果：网页中1px=真实的1px

条件注释的作用是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略

<!--html5shiv让浏览器可以识别HTML5的新标签-->
<!--respond让低版本浏览器可以使用CSS3的媒体查询-->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--自己写的文件默认放最下面-->
<link rel="stylesheet" href="css/main.css">

使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行，如果是max-width一定是从大到小

		.container{
			width: 100%;
		}
        /*版心的宽度*/
        @media(min-width:1280px){
            /*这里的代码只有当（min-width: 1280px）满足时才会执行*/
            .container{
                width: 1280px;
            }
        }