一、全局CSS样式
1、布局容器.container
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器,能够根据页面的宽度的调整进行相对应的变化。
实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,user_scalable=no">
<title>微金所</title>
<!-- 引入Bootstrap核心样式表 -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/responsd/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/main.css">
<!--css-->
<style>
.container{height: 100px;background-color: aqua;}
</style>
</head>
<body>
<!--布局容器.container-->
<div class="container">
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
而.container-fluid类似于100%的宽度,占据全部视口的容器 ,当页面需要100%的宽度的时候可以使用这个容器