Bootstrap學習總結
@
Bootstrap介紹
什么是bootstrap？
- Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。
- 特點就是靈活簡潔，代碼優雅，美觀大方；
- 其目的是為了讓Web開發更敏捷；
- 是Twitter公司的兩名前端工程師Mark Otto和Jacob Thornton在2011年發起的，並利用業余時間完成第一個版本的開發；
為什么要用bootstrap?
- 生態圈火，不斷地更新迭代；
- 提供一套美觀大方地界面組件；
- 提供一套優雅的HTML+CSS編碼規范；
- 讓我們的 Web 開發更簡單，更快捷；
bootstrap能幫我們解決什么問題？
- 響應式布局
- 提供了一套風格統一的界面組件
- 減輕維護成本（統一了代碼風格）
目錄結構
|——css // 自己定義的css文件
|——js // 自己寫的js文件
|——font // 自己制作的字體文件
|——img // 項目中用到的圖片目錄
|——lib // 引入的第三方代碼
index.html // 入口文件
編碼約定
- html
在head中引入必要的CSS文件，優先引用第三方的CSS，方便我們自己的樣式覆蓋。
在body末尾引入必要的JS文件，優先引用第三方的JS，注意JS文件之間的依賴關系，比如bootstrap.js依賴jQuery，那就應該先引用jquery.js 然后引用bootstrap.js。 - css
除了公共級別樣式，其余樣式全部加上作用域。避免出現樣式沖突的問題。
盡量使用 直接子代選擇器， 少用間接子代 避免錯殺。
我們約定所有的分割線使用下邊框的方式實現。
如何使用bootstrap
<!DOCTYPE html>
<!-- 指定了我們的頁面語言 -->
<html lang="zh-CN">
<head>
<!-- 界面的字符編碼 -->
<meta charset="utf-8">
<!-- 指定了IE的編譯版本，edge用最新的ie解釋器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在移動端開發中，當界面寬度大於設備容器，會生成一個虛擬的容器，這個容器就是視口 -->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>demo</title>
<!--圖標-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!-- 條件注釋 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="lib/jquery/jquery.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>
視口
視口的介紹
- 在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這么大，然后展示
- 解決了：移動端適配pc的問題。
視口的參數
- 視口的寬度可以通過meta標簽設置，此屬性為移動端頁面視口設置，當前值表示在移動端頁面的寬度為設備的寬度，並且不縮放（縮放級別為1）
- width:視口的寬度
- initial-scale：初始化縮放
- user-scalable:是否允許用戶自行縮放（值：yes/no; 1/0）
- minimum-scale:最小縮放，一般設置了用戶不允許縮放，就沒必要設置最小和最大縮放
- maximum-scale:最大縮放
如何配置視口
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
柵格系統
柵格系統是什么？
- Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
柵格系統解決什么問題？
- 柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。
柵格系統怎么用？
- 柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。注意row需要放在一個版心中。
柵格系統怎么實現？
- 通過浮動實現的。row會進行浮動的清除。
怎么去修改bootstrap的樣式？
- 擴展bootstrap的樣式
- 復制bootstrap的按鈕樣式，修改成我們自己的主題名稱
- 優點：
復用性高 - 缺點：
實現復雜
- 優點：
- 覆蓋bootstrap的樣式
- 使用我們自定義的樣式覆蓋bootstrap的樣式，注意加作用域防止污染
- 優點：
實現方便 - 缺點：
缺乏復用性
- 優點：
- 使用我們自定義的樣式覆蓋bootstrap的樣式，注意加作用域防止污染
- 復制bootstrap的按鈕樣式，修改成我們自己的主題名稱
輪播圖的響應式
- 大屏幕下怎么展示？
- 將容器的高度固定（410px），將輪播圖改為背景顯示，由於可能圖片的高度不一定是410px，所以需要設置css3中的background-size。
- 為什么這么展示？
- 美工為了在不同屏幕下更好地展示將圖片兩邊做的非常寬，但是我們大多數情況的頁面寬度都無法滿足這樣的圖片寬度，而且Bootstrap的樣式中默認將圖片的max-width設置為100%，造成界面圖片縮放。
- 有幾種實現方案？
想在一個較小屏幕下展示一個超寬的圖片，並讓圖片居中顯示- 換用背景圖的方式，background-position: center center;
使img元素絕對定位，left:50%，margin-left:
-width/2 - 小屏幕下怎么展示？
圖片寬度100%，高度自適應 - 為什么這個展示？
手機端屏幕比較小，如果使用背景圖的方式可能會導致可視區域展示不全。
- 換用背景圖的方式，background-position: center center;
選擇器
- nth-child和nth-of-type的區別
- -nth-child:他會選擇父級元素下面按照所有的元素進行排序，選擇第n個，如果第n個沒有匹配到就會選擇失敗
- nth-of-type: 他會選擇父級元素下指定類型的元素，選擇第n個
+號選擇器（相鄰兄弟選擇器）
- 作用
如果選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。
+號前面的內容就是我們的選擇條件
我們選擇的是滿足+號前面那寫條件的后一個元素，這個元素的類型就是我們+號后面定義的
^=選擇器和*=選擇器
^=選擇器
[attribute^=value] 選擇器匹配屬性值以指定值開頭的每個元素。
例子：- [class^="icon-"]選擇 class 屬性值以 "icon-" 的元素
*=選擇器 - [attribute*=value] 選擇器匹配屬性值包含指定值的每個元素。
例子： - [class*=" icon-"]選擇 class 屬性值包含 " icon-" 的元素
data-
- [class^="icon-"]選擇 class 屬性值以 "icon-" 的元素
data-的作用？
- 使用 data-* 屬性來嵌入自定義數據：
data-如何取值？
字體圖標
定義
字體圖標簡單的說，就是一種特殊的字體，通過這種字體，顯示給用戶的就像一個個圖片一樣。
優勢
- 字體圖標最大的好處，在於它不會變形和加載速度快。
字體圖標可以像文字一樣，隨意通過CSS來控制它的大小和顏色，對於建網站來說，非常方便。 - 不足
自已創作圖標字體費時費力，后期維護成本偏高。
圖表字體只能被渲染為單色的，或者CSS3的漸變色。
雪碧圖
定義
-
官方定義： CSS雪碧圖即CSS Sprite（精靈），在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。（對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題）
-
簡單理解：所謂的雪碧圖是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分;簡單說就是在一整張圖片中分割出自己想要的部分，也可理解為圖片截取顯示（坐標的移動)
-
優勢
減少對服務器的請求次數（比如頁面有五個圖標，把他們放到一張背景圖上，只需要加載一次。然后用css定位從這張圖片來取就可以了）
提高頁面的加載速度（減少了頁面的請求次數，自然會提高了頁面的加載度） -
不足
維護麻煩，如果修改其中的一張圖，你需要修改整張圖。
高清失真，為了適應不同的分辨率，可能要准備多個規格的圖片。
滾動條
子元素寬度/高度超過父元素寬度/高度，並且父元素設置overflow:scroll的時候出現滾動條。 -
注意檢查我們的條件。
單側固定另一側自適應（自適應布局）
單側浮動並設置寬度，另一側設置margin大小為浮動元素寬度。注意浮動元素需要放在自適應元素的右邊。
- 使用flex布局實現。
可以都設置為浮動通過calc()函數進行計算。 - 使用bootstrap的思想設計樣式
封裝通用樣式。對特殊的面板增加特殊樣式，通過樣式選擇器，進行內部樣式的修改。 - 為什么這么設計？
對通用的樣式進行封裝，同時對不同的主題增加一些拓展的樣式。可以讓我們的樣式設計更加靈活，減少我們的維護成本。設計的時候注意降低耦合度，保證我們樣式的獨立性
陰影
- box-shadow: h-shadow v-shadow blur spread color inset;
- css計算寬度的方法
使用calc()函數，注意兩個參數與符號之間存在空格
移動端的觸摸事件
touchstart
觸摸開始事件
touchmove
觸摸移動事件
touchend
觸摸結束事件
css3新的單位
- vw、vh、vmin、vmax 的含義
vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
具體描述如下：
- vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
- vh：視窗高度的百分比
- vmin：當前 vw 和 vh 中較小的一個值
- vmax：當前 vw 和 vh 中較大的一個值
- vw、vh 與 % 百分比的區別
% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
vw、vh 優勢在於能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。
vmin、vmax 用處
- 做移動頁面開發時，如果使用 vw、wh 設置字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。
由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
瀏覽器兼容性
- 桌面 PC
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到現在還只是部分支持（不支持 vmax，同時 vm 代替 vmin） - 移動設備
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月*）