前言
這兩天在試着做網頁前端，發現了 AdminLTE 2 這個不錯的框架模板。於是着手學習 Bootstrap 。在逐漸熟悉語法結構的過程中，發現有一些重複調用，在刪除多餘調用的時候卻發現對網站效果產生了較大影響。現記錄在此，待日後瞭解更深入後解決。
1 源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>道德經</title>
<!-- 移動端支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 引入 Bootstrap -->
<link href="../bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"> -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<!-- <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
<!-- HTML5 Shim 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 文件，則該文件無法起效果 -->
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
<style type="text/css">
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: : underline;
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
</style>
</head>
<body>
<!-- <div class="container-fluid"> -->
<div class="container">
<h1>道德經</h1>
<p ><a href="https://baike.baidu.com/item/%E8%80%81%E5%AD%90/5448?fr=aladdin" target="blank">老子</a></p>
<!-- 網格 -->
<div class="row">
<!-- 偏移 -->
<!-- <div class="col-xs-6 col-md-offset-3" style="background-color: #f0f0f0; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> -->
<div class="col-xs-6" style="background-color: #f0f0f0; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>道可道，非常道；名可名，非常名。</h4>
<p>無，名天地之始；有，名萬物之母。故常無，欲以觀其妙；常有，欲以觀其徼。此兩者同出而異名，同謂之玄，玄之又玄，衆妙之門。<br>
天下皆知美之爲美，斯惡已；皆知善之爲善，斯不善已。故有無相生，難易相成，長短相形，高下相傾，音聲相和，前後相隨。是以聖人處無爲之事，行不言之教，萬物作焉而不辭，生而不有，爲而不恃，功成而弗居。夫惟弗居，是以不去。
</p>
</div>
<div class="col-md-6" style="background-color: #f0f0f0; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444">
<h4>不尚賢，使民不爭；</h4>
<div class="row">
<div class="col-md-6" style="background-color: #ffffff; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444">
<p>
不貴難得之貨，使民不爲盜；不見可欲，使民心不亂。
</p>
</div>
<div class="col-md-6" style="background-color: #ffffff; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444">
<p>
是以聖人之治，虛其心，實其腹；弱其志，強其骨。常使民無知無慾，使夫知者不敢爲也。爲無爲，則無不治。
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #ffffff; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444">
<p>
道衝而用之或不盈，淵兮似萬物之宗。挫其銳，解其紛，和其光，同其塵。湛兮其若存，吾不知誰之子，象帝之先。
</p>
</div>
<div class="col-md-6" style="background-color: #ffffff; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444">
<p>
天地不仁，以萬物爲芻狗；聖人不仁，以百姓爲芻狗。天地之間，其猶橐龠乎？虛而不屈，動而愈出。多言數窮，不如守中。
</p>
</div>
</div>
</div>
</div>
</body>
</html>
代碼內容不變，只改變調用的 Boottrap 版本：
4.3.1 版本（以下簡稱版本 3）：
<link href="../bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
3.3.6 版本（以下簡稱版本 4）：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
2 調用效果
- 不調用 Bootsrrap ：
![在這裏插入圖片描述]()
- 只用版本 3：
![在這裏插入圖片描述]()
- 只用版本 4：
![在這裏插入圖片描述]()
- 版本 3， 4 共用：
![在這裏插入圖片描述]()
