一、网格系统
1.基本使用方式
网格系统是bootstrap用来分配页面空间的一种方法，把每一行看成12份，分的越多空间越大，基本使用方式如下
代码
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!--使用网格系统的引用-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="height:800px;background-color:#333333 "></div>
<div class="col-md-4" style="height:800px;background-color:#444444"></div>
<div class="col-md-4" style="height:800px;background-color:#222222"></div>
</div>
</body>
</html>
结果
2.container与container-fluid的区别
后者这个容器可以随着浏览器大小的变化自动填充，不使用自动填充如下图所示
3.分配大小的属性区别
（xs-sm-md-lg）
col-xs-4:小于768px的小设备
col-sm-4:>=768px的设备
col-md-4:>=998px的设备
col-lg-4:1200px的设备
4.行布局与列布局
网格系统只要进行行布局，列布局可以通过设置容器的高度实现，如下
貌似边边上的白边去不掉？
代码：
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!--下面的引用决定了这个panel能否使用-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--使用网格系统的引用-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="height:800px">
<div style="height:200px; background-color:#111111">
</div>
<div style="height:200px; background-color:#555555">
</div>
<div style="height:200px; background-color:#666666">
</div>
<div style="height:200px; background-color:#777777">
</div>
</div>
<div class="col-md-4" style="height:800px;background-color:#444444"></div>
<div class="col-md-4" style="height:800px;background-color:#222222"></div>
</div>
</body>
</html>
二、面板组件
1.基本使用方法
代码：
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!--下面的引用决定了这个panel能否使用-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--使用网格系统的引用-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">我是猪</h3>
</div>
<div class="panel-body">我是主体</div>
<div class="panel-footer">我在底下</div>
</div>
</body>
</html>
演示
2.panel颜色主体
panel-default
panel-primary
panel-success
panel-info
panel-warning
panel-danger
三、今日小结
1.class属性可以有多个属性值，用空格隔开
2.toggle-开关
3.a href="#" target="_blank" rel="external nofollow" 还是留在当前页
<a href = "#" > 与 <a href = "javascript:void(0)" > 待解决
4.collapse下拉框
5.panel-title 不用这个属性的话，panel的标题会有点飘
6.网格系统的列布局是否有更好的实现方法?边上的白边如何去除？