作者:
WangMin
格言:努力做好自己喜欢的每一件事
1.HTML5 文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。如图:
2.Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在<head>
之中添加 meta标签,其中的name属性值必须是viewport。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
</head>
<body>
</body>
</html>
width = device-width :表示宽度是设备屏幕的宽度
initial-scale = 1.0:表示初始的缩放比例
minimum-scale = 0.5:表示最小的缩放比例
maximum-scale = 2.0:表示最大的缩放比例
user-scalable = yes/no:表示用户是否可以双指或双击放大
这里的属性值设置根据你的项目情况来定
3.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container
容器。bootstrap提供了两个相同作用的类,注意由于padding的原因,这两种容器类不能相互嵌套。.container
类用于固定宽度并支持响应式布局的容器,也就是用媒体查询获得的动态尺寸。.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
利用简单的例子来说明.container
与.container-fluid
之间的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>container与container-fluid区别</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:red;"><div>container</div></div>
<div class="container-fluid" style="background:blue"><div>container-fluid</div></div>
</body>
</html>
1、.container
类和container-fluid
类的div左右两边有一个15px的padding(内边距)
2..container
类在屏幕宽度小于等于767px的时候,宽度等于屏幕宽度的,也就是100%,.container-fluid
类不管屏幕宽度大小,一直是100%屏幕宽767px:
3、.container
类在屏幕宽度小于等于768px的时候div左右出现了外边距margin=9px(左右padding依然是15px),.container-fluid
类宽度不管屏幕宽度大小,一直是100%。
4、.container
类在屏幕宽度小于1000px的时候div左右外边距margin一直增大,padding值和子div的宽度不变,屏幕拉大的部分都作用于margin上了。.container-fluid
类宽度不管屏幕宽度大小,一直是100%。
5、.container
类在屏幕拉大到1000px的时候,.container
类的div左右外边距margin=15px,左右padding=15px。.container-fluid
类宽度不管屏幕宽度大小,一直是100%。
6、屏幕又继续拉大的时候,.container
类的div左右外边距margin会随着拉大。.container-fluid
类宽度不管屏幕宽度大小,一直是100%。
根据以上的六个点进行的总结:
(1).container类出现内边距和外边距,.container-fluid类出现内边距。
(2).container类左右内边距一直是15px,屏幕小于等于767px的时候没有margin值,屏幕大于767px开始有左右margin值,屏幕宽度为768px和1000px的时候,margin值相对最小,分别是9px和15px,其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小,一直是100%。
就先分享到这里!! 😄 后续继续更新!!