Bootstrap（pink老師）
一、Bootstrap前端開發框架
2.1 Bootstrap簡介
Bootstrap自Twitter (推特) , 是目前最受歡迎的前端框架。Bootstrap 是基於HTML、CSS 和JAVASCRIPT
的，它簡潔靈活,使得Web開發更加快捷。
框架:顧名思義就是一架構,它有一套比較完整的網頁功能解決方案 ,且控制權在框架本身,有預製樣式庫、組
件和外掛。使用者要按照框架所規定的某種規範進行開發。
1.優點
- 標準化的html+css編碼規範
- 提供了一套簡潔、直觀、強悍的元件
- 有自己的生態圈,不斷的更新迭代
- 讓開發更簡單,提高了開發的效率
2.版本
- 2.x.x :停止維護,相容性好,程式碼不夠簡潔,功能不夠完善。
- 3.x.x: 目前使用最多,穩定,，但是放棄了IE6-IE7。對lE8支援但是介面效果不好偏向用於開發響應式佈局、移動裝置優法的WEB專案。
- 4.x.x :最新版，目前還不是很流行
2.2 Bootstrap使用
在現階段我們還沒有接觸JS相關課程,所以我們只考慮使用它的樣式庫。
控制權在框架本身,使用者要按照框架所規定的某種規範進行開發。
Bootstrap使用四步曲:
1.建立資料夾結構
2.建立html骨架結構
拷貝並貼上下面給出的 HTML 程式碼，這就是一個最簡單的 Bootstrap 頁面了。
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 要求當前網頁使用IE瀏覽器的最高版本的核心來渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 視口的設定：視口寬度和裝置一致，預設的縮放比例和pc端一致，使用者不能自行縮放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <![endif]--> <!-- 一定不要忘記引入bootstrap --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </body> </html>
3.引入相關樣式檔案
<!-- 一定不要忘記引入bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
4.書寫內容
- 直接拿Bootstrap預先定義好的樣式來使用
- 修改Bootstrap原來的樣式,注意權重問題
- 學好Bootstrap的關鍵在於知道它定義了哪些樣式,以及這些樣式能實現什麼樣的效果
2.3佈局容器
Bootstrap需要為頁面內容和柵格系統包裹一個.container容器, Bootstarp預先定義好了這個類,叫.container它提供了兩個作此用處的類。
1.container類
- 響應式佈局的容器固定寬度
- 大屏(>=1200px)寬度定為1170px
- 中屏(>=992px)寬度定為970px
- 小屏( >=768px)寬度定為750px
- 超小屏(100%)
2.container-fluid類
- 流式佈局佈局容器 百分百寬度
- 佔據全部視口（viewport）的容器
- 適合於單獨做移動端開發
二、Bootstrap柵格系統
3.1柵格系統簡介
柵格系統英文為"grid systems" ，,也有人翻譯為“網格系統”, 它是指將頁面佈局劃分為等寬的列,然後通
過列數的定義來模組化頁面佈局。
Bootstrap提供了一套響應式、 移動裝置優先的流式柵格系統,隨著螢幕或視口( viewport)尺時的增加,
系統會自動分為最多12列。
Bootstrap裡面container寬度是固定的,但是不同螢幕下, container的寬度不同,我們再把container劃分為12
等份
3.2柵格選項引數
柵格系統用於通過一系列的行( row )與列( column )的組合來建立頁面佈局,你的內容就可以放入這些建立好的佈局中。
-
行( row )必須放到container佈局容器裡面
-
我們實現列的平均劃分需要給列新增類字首
-
xs-extra small :超小; sm-small :小; ma-medium:中等; lg-large :大;
-
列( column )大於12,多餘的“列( column)”所在的元素將被作為一個整體另起一行排列
-
每-列預設有左右15畫素的padding
-
可以同時為一列指定多個裝置的類名，以便劃分不同份數，例如class="col-md-4 col-sm-6"
<div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div> </div>
舉例子：
每個盒子佔四分之一
<div class="container">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<!-- 如果孩子的份數相加等於12，則孩子能佔滿整個的 container的寬度 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<!-- 如果孩子的份數相加小於12則會佔不滿整個container的寬度 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
<!-- 如果孩子的份數相加大於12則會佔不滿整個container的寬度 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
加上邊框的樣式程式碼：
[class^="col"] {
border: 1px solid #ccc;
}
3.3列巢狀
柵格系統內建的柵格系統將內容再次巢狀。簡單理解就是一個列內再分成若 幹份小列。我們可以通過新增一個新的.row元素和一系列.col-sm-*元素到已經存在的.col-sm-*元素內。
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 我們列巢狀最好加1個row，這樣可以取消父元素的padding值 -->
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
3.4列偏移
使用.col-md-offset-\*類可以將列向右側偏移。這些類實際是通過使用*選擇器為當前元素增加了左側的邊距( margin )。
<div class="container">
<div class="row">
<div class="col-md-4">左側</div>
<!-- 偏移的份數就是12-兩個盒子的份數 = 6 -->
<div class="col-md-4 col-md-offset-4">右側</div>
</div>
<!-- 中間盒子 -->
<div class="row">
<!-- 如果只有一個盒子，那麼就偏移=（12-8）/2 -->
<div class="col-md-8 col-md-offse-t-2">中間盒子</div>
</div>
</div>
3.5列排序
通過使用.col-md-push-*和.col-md pull*類就可以很容易的改變列( column )的順序。
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左側</div>
<div class="col-md-8 col-md-pull-4">右側</div>
</div>
</div>
3.6響應式佈局
為了加快對移動裝置友好的頁面開發工作,利用媒體查詢功能,並使用這些工具類可以方便的針對不同裝置
展示或隱藏頁面內容。
與之相反的,是visible xs visible -sm visible -md visible-lg是顯示某個頁面內容
Bootstrap其他(按鈕、表單、表格)請參考Bootstrap文件。
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我會顯示</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md hidden-xs">magic</div>
<div class="col-xs-3">4</div>
</div>
</div>