Bootstarp十二栅格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
以上称之为栅格系统,通俗来讲就是把一个页面平分为十二等份所以又叫十二栅格系统。
1.十二栅格系统的布局
它的布局容器分为两种:
- container为固定宽度布局两边会留有固定的间距
- container-fluid为自适应布局会铺满整个屏幕随着屏幕的宽度来改变
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./4.14z/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
div{background: cyan;height: 100px;margin-bottom: 10px;}
</style>
</head>
<body>
<div class="container"></div>
<div class="container-fluid"></div>
<script src="./4.14z/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
<script src="./4.14z/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
结果: