Bootstrap之初始Bootstrap個人總結
阿新 • • 發佈：2018-11-29
1、什麼是Bootstrap?
- Bootstrap是由Twiter的Mark Otto和Jacob ThornTon 兩位設計師開發的。
- Bootstrap是2011年8月在GitHub上釋出的開源產品（開發原始碼）。
- Bootstrap是個用於快速開發Web應用程式和網站的前端框架 是基於Html、css JavaScript的。
- Bootstrap 可以構建出非常優雅的前端介面，並且佔用資源小。
2、為什麼要去使用BootStrap
- 移動裝置優先、框架包含了貫穿於整個庫的移動裝置優先的樣式、
- 瀏覽器支援。所有的主流瀏覽器都支援。
- 響應式設計！響應式指的是一個網站能夠相容和自適應於多種終端裝置(手機、平板、電腦)訪問。
3、Bootstrap部署！
3.1 Bootstrap 下載步驟：
開啟下載的中文地址：http://www.bootcss.com/
步驟一
步驟二：
步驟三
3.2 把Bootstrap部署到專案步驟：
步驟1：解壓下載好的Bootstrap 會看到如圖的資料夾
步驟二：把上圖檔案加到專案目錄中去：
注意點：在加bootstrap.min.js 檔案之前必須 引入 Jquery檔案 不然就會出現如下圖錯誤!
4、Bootstrap之佈局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種 容器類不能互相巢狀。
1、.container 類用於固定寬度並支援響應式佈局的容器。
例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap的初次使用</title>
<!--表示移動裝置優先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--加入Bootstarp 核心css 檔案-->
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<!--加入jquery檔案-->
<!-- <script src="js/jquery-1.12.4.js"></script> -->
<!--加入Bootstrap js 檔案-->
<script src="bs/js/bootstrap.min.js"></script>
</head>
<body>
<!--固定佈局例項-->
<div class="container" style="border: 1px solid red">
哈嘍！
</div>
</body>
</html>2、.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
例項：
<!--流式佈局例項-->
<div class="container-fluid" style="border: 1px solid red">
哈嘍！
</div>