BootStrap 簡介

概念:

課程目標(biāo)：

• 響應(yīng)式布局技術(shù)
• 了解BootStrap前端框架

一.響應(yīng)式布局

1.1 歷史問題

回顧之前HTML+CSS的布局方式，都是使用像素（px）來布局網(wǎng)頁的，可是現(xiàn)在隨著用戶使用終端設(shè)備的多樣化，平板手機(jī)已經(jīng)很常見，所以如何制作適合手機(jī)使用的網(wǎng)頁？
還是使用以前的固定單位去布局，會(huì)引發(fā)兩個(gè)問題：
（1）分辨率太大，網(wǎng)頁兩邊留白太多
（2）分辨率太小，頁面顯示不完全

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-iMUZfhQt-1589378488273)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513093705933.png)]

概念：設(shè)備無關(guān)性布局方式；在css的發(fā)展過程中，逐漸出現(xiàn)了許多的響應(yīng)式布局方式，今天將介紹的flex布局，就是其中一種。 flex布局，能夠?qū)⑷萜?#xff0c;按照特定的比例進(jìn)行劃分，從一維的角度，去更好的對容器進(jìn)行布局。

歷史：

1.固定布局：使用的是div aside article標(biāo)簽，width：xxx px;像素；

2.浮動(dòng) 百分比的方式；width:100%; widht:90%,發(fā)現(xiàn)比剛才要好多了；還是有問題，適應(yīng)手機(jī)的時(shí)候；

摘要，沒有東西了，還繼續(xù)留空白在右邊；

3.Flex布局，怎么回事？彈性布局

非常easy:最外面的div,設(shè)置它的display:flex,設(shè)置成彈性布局即可。里面的width:30%;

width:67%;,可以保持不變。如果都去掉了，注意看它的變化。

1.2 Flex容器

任何元素都能作為flex容器，只要使用display:flex，進(jìn)行描述，該容器就成為了一個(gè)flex容器。

伸縮布局決定的特性是讓伸縮項(xiàng)目可伸縮，也就是讓伸縮項(xiàng)目的寬度或高度自動(dòng)填充伸縮容器額外的空間，這可以用flex屬性來完成。

屬性說明

flex	伸縮性
flex-direction	伸縮流方向 row row-reverse column column-reverse
flex-wrap	伸縮換行 nowrap wrap wrap-reverse
justify-content	主軸對齊
align-items	側(cè)軸對齊

參考代碼：

.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 響應(yīng)式布局

• 彈性布局
• 彈性圖片
• 媒體和媒體查詢

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-A7ZTQb0M-1589378488282)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513112622424.png)]

優(yōu)點(diǎn)
1.面對不同分辨率設(shè)備靈活性強(qiáng)，能夠快捷解決多設(shè)備顯示使用問題
2.更少維護(hù)，開發(fā)一個(gè)網(wǎng)站，多終端使用
缺點(diǎn)
1.兼容各種設(shè)備工作量大,網(wǎng)上重復(fù)性的代碼，你看適合瀏覽器即可。
2.代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間長

1.3.1 媒體類型

方式1：

? @media 媒體類型 {
? 選擇器{ /樣式代碼寫在這里…/}
? }

方式2：

? <link rel=“stylesheet” href=“style.css” meida=“媒體類型”/>

屬 性值Min/Max描 述

device-width	Length	Yes	設(shè)置屏幕的輸出寬度
device-height	Length	Yes	設(shè)置屏幕的輸出高度
width	Length	Yes	渲染界面的寬度
height	Length	Yes	渲染界面的高度
Orientation	Portrait/landscape	No	橫屏或豎屏
Resolution	分辨率（dpi/dpcm）	Yes	分辨率
Color	整數(shù)	Yes	每種色彩的字節(jié)數(shù)
color-index	整數(shù)	Yes	色彩表中的色彩數(shù)

1.3.2 ViewPort

概念：

視窗指的是用戶在網(wǎng)頁上的可見性，根據(jù)設(shè)備的不同而不同。網(wǎng)頁在手機(jī)上的比平板上要小，比pc上要小，之前都是針對的是pc設(shè)計(jì)，現(xiàn)在要考慮到平板，手機(jī)，手表，固定的網(wǎng)頁無法適應(yīng)不同的硬件設(shè)備。這時(shí)候就要對網(wǎng)頁進(jìn)行等比例的縮放，以適應(yīng)屏幕。

設(shè)置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width控制 layout viewport的寬度, "device-width"為當(dāng)前設(shè)備的寬度。

initial-scale: 頁面初始縮放的比例。

user-scalable: 是否允許用戶縮放。

maximum-scale：允許用戶縮放到的最大比例。

minimum-scale：允許用戶縮放到的最小比例。

1.3.3 網(wǎng)格視圖

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-5CP4uqPt-1589378488295)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513120308393.png)]

在設(shè)計(jì)網(wǎng)頁時(shí)，使用網(wǎng)格視圖非常有用。它可以更輕松地在頁面上放置元素。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-UiHQ3K9C-1589378488300)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513120334686.png)]

響應(yīng)式網(wǎng)格視圖通常有12列，總寬度為100％，并在調(diào)整瀏覽器窗口大小時(shí)縮小和展開。

讓我們開始構(gòu)建響應(yīng)式網(wǎng)格視圖。 首先確保所有HTML元素都將box-sizing屬性設(shè)置為border-box。這可確保填充和邊框包含在元素的總寬度和高度中。

* {box-sizing: border-box; }

小和展開。

讓我們開始構(gòu)建響應(yīng)式網(wǎng)格視圖。 首先確保所有HTML元素都將box-sizing屬性設(shè)置為border-box。這可確保填充和邊框包含在元素的總寬度和高度中。

* {box-sizing: border-box; }

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-2hWZxIcK-1589378488308)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200513160850207.png)]

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。