开始使用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;
}
}