一、網格系統
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.網格系統的列布局是否有更好的實作方法?邊上的白邊如何去除？