架構
- 設計理念：響應式布局
- 架構基礎：jQuery
- 核心功能：12柵格系統（或者稱為網格系統）
- 基礎布局組件：任意頁面元素可以使用
- CSS組件：20種常見組件
- JavaScript插件：12種插件。依賴於jQuery實現
柵格系統的使用
實驗效果：
代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--IE瀏覽器設置：以當前IE瀏覽器所支持的最高版本模式來渲染頁面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>12柵格系統</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 20px;
}
.container {
background-color: #ccc;
}
.row div {
border: 1px white solid;
background-color: #1f4dff;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!--列組合-->
<div class="row">
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
</div>
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-8">col-lg-8</div>
</div>
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
<!--列偏移-->
<div class="row">
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-4 col-lg-offset-4">col-lg-4 col-lg-offset-4</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">col-lg-4 col-lg-offset-4</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-6">col-lg-6 col-lg-offset-6</div>
</div>
<!--列嵌套-->
<div class="row">
<div class="col-lg-8">
L1:col-lg-8
<div class="row">
<div class="col-lg-3">L2:col-lg-3</div>
<div class="col-lg-3">L2:col-lg-3</div>
<div class="col-lg-3">L2:col-lg-3</div>
<div class="col-lg-3">L2:col-lg-3</div>
</div>
</div>
<div class="col-lg-4">col-lg-4</div>
</div>
<!--列排序-->
<div class="row">
<div class="col-lg-7">col-lg-7</div>
<div class="col-lg-5">col-lg-5</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-push-5">col-lg-7 col-lg-push-5</div>
<div class="col-lg-5 col-lg-pull-7">col-lg-5 col-lg-pull-7</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="script/jquery-1.12.4.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
響應式柵格系統
柵格參數表（官網）：
樣式源碼：
//小於768px默認為移動設備
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
響應式柵格系統的應用案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--IE瀏覽器設置：以當前IE瀏覽器所支持的最高版本模式來渲染頁面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>網頁支持多種屏幕顯示</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.mydispace{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 mydispace"><img src="images/1.png"></div>
<div class="col-lg-3 col-md-6 col-xs-12 mydispace"><img src="images/1.png"></div>
<div class="col-lg-3 col-md-6 col-xs-12 mydispace"><img src="images/1.png"></div>
<div class="col-lg-3 col-md-6 col-xs-12 mydispace"><img src="images/1.png"></div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="script/jquery-1.12.4.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>