BootStrap 簡介
概念:
課程目標：
- 響應式佈局技術
- 瞭解BootStrap前端框架
一.響應式佈局
1.1 歷史問題
回顧之前HTML+CSS的佈局方式，都是使用像素（px）來佈局網頁的，可是現在隨着用戶使用終端設備的多樣化，平板手機已經很常見，所以如何製作適合手機使用的網頁？
還是使用以前的固定單位去佈局，會引發兩個問題：
（1）分辨率太大，網頁兩邊留白太多
（2）分辨率太小，頁面顯示不完全
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iMUZfhQt-1589378488273)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513093705933.png)]
概念：設備無關性佈局方式；在css的發展過程中，逐漸出現了許多的響應式佈局方式，今天將介紹的flex佈局，就是其中一種。 flex佈局，能夠將容器，按照特定的比例進行劃分，從一維的角度，去更好的對容器進行佈局。
歷史：
1.固定佈局：使用的是div aside article標籤，width：xxx px;像素；
2.浮動 百分比的方式；width:100%; widht:90%,發現比剛纔要好多了；還是有問題，適應手機的時候；
摘要，沒有東西了，還繼續留空白在右邊；
3.Flex佈局，怎麼回事？彈性佈局
非常easy:最外面的div,設置它的display:flex,設置成彈性佈局即可。裏面的width:30%;
width:67%;,可以保持不變。如果都去掉了，注意看它的變化。
1.2 Flex容器
任何元素都能作爲flex容器，只要使用display:flex，進行描述，該容器就成爲了一個flex容器。
伸縮佈局決定的特性是讓伸縮項目可伸縮，也就是讓伸縮項目的寬度或高度自動填充伸縮容器額外的空間，這可以用flex屬性來完成。
| 屬性 | 說明 |
|---|---|
| flex | 伸縮性 |
| flex-direction | 伸縮流方向 row row-reverse column column-reverse |
| flex-wrap | 伸縮換行 nowrap wrap wrap-reverse |
| justify-content | 主軸對齊 |
| align-items | 側軸對齊 |
參考代碼：
.box {display: flex; border: 1px solid #000000; padding: 10px; }
aside { flex:1;background: red; padding: 10px; }
article { flex:1; margin-left: 10px; background: yellow; }
1.3 響應式佈局
- 彈性佈局
- 彈性圖片
- 媒體和媒體查詢
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-A7ZTQb0M-1589378488282)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513112622424.png)]
優點
1.面對不同分辨率設備靈活性強，能夠快捷解決多設備顯示使用問題
2.更少維護，開發一個網站，多終端使用
缺點
1.兼容各種設備工作量大,網上重複性的代碼，你看適合瀏覽器即可。
2.代碼累贅，會出現隱藏無用的元素，加載時間長
1.3.1 媒體類型
方式1：
@media 媒體類型 {
選擇器{ /樣式代碼寫在這裏…/}
}
方式2：
<link rel=“stylesheet” href=“style.css” meida=“媒體類型”/>
| 屬 性 | 值 | Min/Max | 描 述 |
|---|---|---|---|
| device-width | Length | Yes | 設置屏幕的輸出寬度 |
| device-height | Length | Yes | 設置屏幕的輸出高度 |
| width | Length | Yes | 渲染界面的寬度 |
| height | Length | Yes | 渲染界面的高度 |
| Orientation | Portrait/landscape | No | 橫屏或豎屏 |
| Resolution | 分辨率（dpi/dpcm） | Yes | 分辨率 |
| Color | 整數 | Yes | 每種色彩的字節數 |
| color-index | 整數 | Yes | 色彩表中的色彩數 |
1.3.2 ViewPort
概念：
視窗指的是用戶在網頁上的可見性，根據設備的不同而不同。網頁在手機上的比平板上要小，比pc上要小，之前都是針對的是pc設計，現在要考慮到平板，手機，手錶，固定的網頁無法適應不同的硬件設備。這時候就要對網頁進行等比例的縮放，以適應屏幕。
設置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width控制 layout viewport的寬度, "device-width"爲當前設備的寬度。
initial-scale: 頁面初始縮放的比例。
user-scalable: 是否允許用戶縮放。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
1.3.3 網格視圖
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-5CP4uqPt-1589378488295)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513120308393.png)]
在設計網頁時，使用網格視圖非常有用。它可以更輕鬆地在頁面上放置元素。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UiHQ3K9C-1589378488300)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513120334686.png)]
響應式網格視圖通常有12列，總寬度爲100％，並在調整瀏覽器窗口大小時縮小和展開。
讓我們開始構建響應式網格視圖。 首先確保所有HTML元素都將box-sizing屬性設置爲border-box。這可確保填充和邊框包含在元素的總寬度和高度中。
* {
box-sizing: border-box;
}
小和展開。
讓我們開始構建響應式網格視圖。 首先確保所有HTML元素都將box-sizing屬性設置爲border-box。這可確保填充和邊框包含在元素的總寬度和高度中。
* {
box-sizing: border-box;
}
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2hWZxIcK-1589378488308)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513160850207.png)]