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)]

總結

以上是生活随笔為你收集整理的BootStrap之前奏响应式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。