Bootstrap學習總結

時間 2019-11-17

標籤 bootstrap 學習總結欄目 Bootstarp 简体版

原文原文鏈接

目錄css

Bootstrap學習總結
- Bootstrap介紹
  - 什麼是bootstrap？
  - 爲何要用bootstrap?
- 如何使用bootstrap
  - 視口
  - 柵格系統

Bootstrap學習總結

@(目錄)html

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 // 入口文件html5

編碼約定
html
在head中引入必要的CSS文件，優先引用第三方的CSS，方便咱們本身的樣式覆蓋。
在body末尾引入必要的JS文件，優先引用第三方的JS，注意JS文件之間的依賴關係，好比bootstrap.js依賴jQuery，那就應該先引用jquery.js 而後引用bootstrap.js。
css
除了公共級別樣式，其他樣式所有加上做用域。避免出現樣式衝突的問題。
儘可能使用直接子代選擇器，少用間接子代避免錯殺。
咱們約定全部的分割線使用下邊框的方式實現。jquery

如何使用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列。css3

柵格系統解決什麼問題？
柵格系統的使用，不只可讓網頁的信息呈現更加美觀易讀，更具可用性。並且，對於前端開發來講，網頁將更加的靈活與規範。npm

柵格系統怎麼用？
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。注意row須要放在一個版心中。bootstrap

柵格系統怎麼實現？
經過浮動實現的。row會進行浮動的清除。瀏覽器

怎麼去修改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%，高度自適應
- 爲何這個展現？
  手機端屏幕比較小，若是使用背景圖的方式可能會致使可視區域展現不全。

選擇器

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-
  
  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月*）