BootStrap的使用
1.在前端頁面中引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--使用X-UA-Compatible來設定IE浏覽器相容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示使用者是否可以縮放頁面；
width指定視區的邏輯寬度；
device-width訓示視區寬度應為裝置的螢幕寬度；
initial-scale指令用于設定web頁面的初始縮放比例；
initial-scale=1則将顯示未經縮放的web文檔
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BootStrap的引入</title>
<!--載入BootStrap的css-->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h1>Hello World!!!</h1>
<!--引入BootStrap的JS必須先引入JQuery,因為bootStrap的元件是基于JQUERY的-->
<script src="js/jquery-3.6.0.js"></script>
<!---->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2. BootStrap線上引入模闆（使用之前必須要有網絡）
<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
3.BootStrap的布局容器和栅格網格系統
3.1布局容器
(1) .container類用于固定寬度并支援響應式布局的容器（網頁不是百分百呈現，而是兩側有空白）
<div class="container">
...
</div>
(2) .container-fluid類用于100%寬度，占據全部視口（viewport）的容器
<div class="container-fluid">
...
</div>
3.2栅格網絡系統
3.2.1 列組合
栅格網絡系統會自動分為最多12列
注意：網格系統必須使用到css
container,row,xs(xsmall phones),sm(small tables),md(middle desktops),lg(larger desktops)就是超小屏（自動），小屏（750px）,中屏（970px）和大屏（1170px）
注意：1行隻能最多占12列，如果超過12列就會自動換行。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格網絡系統</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<!--如果沒有栅格網絡系統連續使用兩個div就會自動換行，而使用栅格網絡系統就不會-->
<div style="background-color: #1b6d85">4</div>
<div style="background-color: #2b542c">8</div>
<hr/>
<!--布局容器栅格系統-->
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素 col-xs-數值 col-md-數值 col-sm-數值 col-lg-數值-->
<div class="col-md-4" style="background-color: #1b6d85">4</div>
<div class="col-md-8" style="background-color: darkred">8</div>
</div>
</div>
</body>
</html>
運作結果：
注意如果不知道使用什麼裝置就可以在<div class="col-md-4"中的col-md-4後直接加上col-lg-4（大屏占比）這樣操作。到時候系統會自動就算到底要占多少。
占幾行用幾行，如果隻能均等份分割，最多12個，隻能均等份分割。也可以不均等份分割但是相加和隻能是12。
<!--占幾行用幾行-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
運作結果：
<!--均等份分割-->
<div class="row">
<div class="col-md-6" style="background-color: #2b542c">1</div>
<div class="col-md-6" style="background-color: #eea236">1</div>
</div>
運作結果：
注意列的總數不能超過12.如果超過12系統就會自動換行。（最後一項超過12的部分）
3.2.2列偏移
列偏移就是兩個div之間如果想要有間距就可以添加列偏移（col-md-offset-數值）
注意：列偏移數值和列組合數值相加不能超過12
例子（四個中第二個與第一個相鄰間距一列）：
<!--列偏移-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
運作結果：
這個是不加列偏移的效果：
3.2.3列排序
列排序就是改變列的方向，就是改變左右浮動，并且設定浮動距離，在bootStrap中使用col-md-push-數值（這裡的數值就是浮動距離）（注意如果浮動後的位置本身就有東西，那麼本身就有的東西就會覆寫掉浮動後的東西）push就是向右，pull就是向左。
例子：
<!--列排序-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1 col-md-push-1" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
運作結果：
浮動之前：
浮動之後：
浮動之後橙色向右偏移，右邊原來有東西就會被粉色的覆寫
浮動5個就是
<!--列排序-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1 col-md-push-5" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
運作結果：
橙色向右浮動5個列寬，本身是第0個下一個是第一個，直到第五個
3.2.4列嵌套
列嵌套就是将12個列分為兩個列，也就是1列占6個列寬，列嵌套就可以将6個列寬的寬度重新變成12份。
例子：
<!--列嵌套-->
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-1" style="background-color: navajowhite">1</div>
<div class="col-md-9" style="background-color: #2e6da4">9</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
<div class="col-md-1" style="background-color: gold">1</div>
</div>
</div>
<div class="col-md-6" style="background-color: #eea236">6</div>
</div>
運作結果：