bootstrap使用入門（bootstrap4.2.1版本）
一、什麼是bootstrap?
bootstrap是一個前端開發時使用的框架。前端開發主要寫HTML5、css3、JavaScript。而bootstrap框架主要為我們提供兩個最重要的檔案：bootstrap.min.css和bootstrap.min.js。為什麼沒有.min.html呢？不知道，或許有一天會有吧~
在bootstrap4.x版本中，bootstrap.min.js需要依賴兩個檔案：jquery-3.3.1.slim.min.js和popper.min.js。jquery不用多說了，但是popper.min.js這個框架沒怎麼聽說過，對製作和美化下拉框、文字提示、彈出框等非常有用。
二、怎麼使用bootstrap框架？
上面說了，bootstrap重要的是兩個檔案，bootstrap.min.css和bootstrap.min.js。使用bootstrap框架有兩個方法，一是在官網下載bootstrap，解壓縮後找到bootstrap.min.css和bootstrap.min.js複製貼上到您正在開發的專案下，具體放在工程裡面的哪一級哪個目錄下自己決定，然後在需要用到該框架的.html檔案裡用<link>標籤引入bootstrap.min.css，用<script>標籤引入bootstrap.min.js。在引入bootstrap.min.js檔案之前必須引入jquery-3.3.1.slim.min.js和popper.min.js（這兩個檔案需要自行去各自官網下載然後複製貼上到正在開發的專案的任意位置）。下面貼出一份模板供大家參考：
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css"rel="stylesheet"> <!--你自己寫的樣式檔案，儘量不要放在bootstrap.min.css之前--> <link href="css/your-style.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <!--官方建議這三個<script>標籤寫在body結束標籤之前，三個標籤順序不能搞亂--> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
二是不需要下載任何檔案，使用BootstrapCDN快速地將 Bootstrap 應用到你的專案中。模板如下：
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>
所有檔案會通過http請求自動下載並引入到自己的專案中。
三、一些重要的設定
1. HTML5 doctype
Bootstrap 要求設定 HTML5 doctype，也就是.html檔案需要使用HTML5的宣告。如果沒有這個設定，你會看到一些奇怪的、不完整的樣式，但是隻要添加了這個設定就不會出現任何錯誤了。
<!doctype html> <html lang="en"> ... </html>
lang屬性可以不用新增。
2. 響應式meta標籤
Bootstrap 本著移動裝置優先的策略開發的，按照這一策略，我們優先為移動裝置優化程式碼，然後根據每個元件的情況並利用 CSS 媒體查詢（CSS media queries）技術為元件設定合適的樣式。為了確保在所有裝置上能夠正確渲染並支援觸控縮放，務必將設定 viewport 屬性的 meta 標籤新增到<head>中。如下所示。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3. 盒模型
bootstrap框架內部已經將全域性的box-sizing值從預設的content-box修改為border-box。這就確保了padding不會影響元素最終的寬度計算，但是這可能會導致第三方元件出現問題，例如 Google 地圖和 Google 定製搜尋。
所以有的時候需要手動設定回預設值去。怎麼設定呢？看下面程式碼：
.selector-for-some-widget {
box-sizing: content-box;
}
關於box-sizing屬性的值，我們可以參考文章：css的兩種盒模型
4. Reboot
為了改善跨瀏覽器的渲染，我們使用Reboot修正跨瀏覽器和裝置之間的不一致性，同時對常用的 HTML 元素設定統一的效果。
bootstrap4.2.1官方文件：https://getbootstrap.com/docs/4.2/getting-started/introduction/
bootstrap4.x通用的中文文件：https://v4.bootcss.com/docs/4.0/getting-started/introduction/