HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計（慕課版）（第2版） 課件 第06章 響應(yīng)式設(shè)計與Bootstrap

第6章響應(yīng)式設(shè)計與BootstrapWeb前端技術(shù)學習目標/Target了解Bootstrap的概念掌握Bootstrap的下載和環(huán)境安裝掌握使用媒體查詢進行響應(yīng)式設(shè)計的方法學習目標/Target掌握Bootstrap表單、按鈕和其它組件的使用熟悉Bootstrap輔助樣式的使用掌握Bootstrap布局容器的使用章節(jié)概述/Summary在本章將會使用一個工具來讓響應(yīng)式變得容易實現(xiàn)，它就是Bootstrap。Bootstrap為大多數(shù)標準的UI設(shè)計場景提供了用戶友好、跨瀏覽器的解決方案，提高了前端開發(fā)的工作效率。本章將針對如何使用Bootstrap進行響應(yīng)式Web設(shè)計進行詳細講解。目錄/Contents030402Bootstrap框架概述Bootstrap的下載和環(huán)境安裝媒體查詢01響應(yīng)式設(shè)計概述目錄/Contents0607Bootstrap樣式Bootstrap常用組件08【項目】輪播圖/PC端登錄05Bootstrap布局容器響應(yīng)式設(shè)計概述6.1開發(fā)者在搭建網(wǎng)站時，需要兼顧電腦端和移動端用戶。臺式機或筆記本電腦的顯示器寬度大于或等于1024px。處理方案：制作一個寬度固定為960px的頁面。弊端：移動設(shè)備得到的是按比例縮小的屏幕，通過放大、縮小和左右滾動才能完全瀏覽頁面。常用的響應(yīng)式布局框架：Bootstrap，foundation,MaterialDesignforBootstrap(MDB)…15個優(yōu)秀的響應(yīng)式CSS框架-騰訊云開發(fā)者社區(qū)-騰訊云()必要性響應(yīng)式網(wǎng)站設(shè)計是一種網(wǎng)絡(luò)頁面設(shè)計布局，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進行相對應(yīng)的布局。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSSmediaquery的使用等。定義視口，即viewport，是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄、標簽欄等區(qū)域，也就是網(wǎng)頁實際顯示的區(qū)域。問題：設(shè)備不同，如臺式機、平板電腦、手機方案：1024px對應(yīng)桌面768px對應(yīng)pad480px對應(yīng)手機問題：屏幕尺寸多種多樣方案：需要確定一個區(qū)間值，設(shè)計師需要尋找一個臨界點—即當視覺效果開始不符合人們的審美或影響了內(nèi)容獲取時對應(yīng)的值，這個臨界點才是響應(yīng)式設(shè)計中的斷點。定義視口可以通過一個名稱為viewport的元（meta）標簽來進行控制，其基本規(guī)則如下：其中，視口設(shè)置中幾個常用關(guān)鍵詞的含義如下：width:控制viewport的大小，可以指定一個值或字符串“device-width”。device-width為設(shè)備的實際寬度。height:和width相對應(yīng)，指定高度。initial-scale:初始縮放比例。<metaname="viewport"content="width=device-width,initial-scale=1">視口響應(yīng)式網(wǎng)站要針對各種不同屏幕尺寸的設(shè)備進行測試，大多數(shù)測試可以通過改變?yōu)g覽器窗口的大小來完成。也可以通過第三方插件和瀏覽器擴展功能將瀏覽器窗口或視口設(shè)定為指定像素來測試。下圖所示網(wǎng)頁為例，當瀏覽器寬度大于768像素時，網(wǎng)頁中菜單項完整顯示，圖片呈四列并排顯示。設(shè)計案例演示示例：設(shè)計案例當瀏覽器寬度小于768像素時，菜單項被隱藏，顯示菜單圖標。左圖所示，網(wǎng)頁布局中圖片呈兩列并排顯示。右圖為模擬手機端測試結(jié)果。設(shè)計案例媒體查詢6.2CSS3引入了媒體查詢。媒體查詢打破了獨立樣式表，通過一些條件查詢語句來確定目標樣式，從而控制同一個頁面在不同尺寸的設(shè)備瀏覽器中呈現(xiàn)出與之適配的樣式，使瀏覽者在不同的設(shè)備下都能得到理想的體驗。目前媒體查詢已經(jīng)被瀏覽器廣泛支持。媒體查詢1.媒介查詢的一般結(jié)構(gòu)：媒體查詢以@media開頭，利用and|not|only這些邏輯關(guān)鍵字把媒介類型和條件表達式串聯(lián)起來形成布爾表達式，判斷是否滿足當前瀏覽器的運行環(huán)境。如果滿足，則上面的styles部分的樣式就會起作用，進而改變頁面元素的樣式，否則，頁面效果不產(chǎn)生任何變化。@mediamediatypeand|not|only(mediafeature){ CSS-Code;}媒體查詢2.環(huán)境參數(shù)媒體類型只能識別顯示設(shè)備的類型，還需要針對運行設(shè)備監(jiān)測環(huán)境參數(shù)，比如長寬或分辨率等，下面列舉了一些常用的參數(shù)：max-width:定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾萴in-width:定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾萶rientation:設(shè)備的方向，portrait和landscape分別表示豎直和水平resolution:設(shè)備的分辨率，以dpi(DotsPerInch)或者dpcm(DotsPerCentimeter)表示媒體查詢3.條件表達式條件表達式用來判斷設(shè)備環(huán)境參數(shù)，從而確定相應(yīng)的顯示方法，例如：表示當屏幕設(shè)備寬度小于960px時，屏幕設(shè)備的背景色將被設(shè)為紅色，其中and關(guān)鍵字用來指定當某種設(shè)備類型的某種特性的值滿足某個條件時所使用的樣式。@mediascreenand(max-width:960px){ body{background-color:red;}}媒體查詢將下面示例的這段代碼插入到css文件的后面，會使頁面背景色在改變?yōu)g覽器窗口大小時發(fā)生改變。

@mediascreenand(max-width:960px){ body{background-color:red;} } @mediascreenand(max-width:768px){ body{background-color:orange;} } @mediascreenand(max-width:550px){ body{background-color:yellow;} } @mediascreenand(max-width:320px){ body{background-color:green;} }媒體查詢舉例（media-background-color.html）瀏覽該示例時，調(diào)整瀏覽器窗口寬度，頁面背景顏色就會根據(jù)當前視口尺寸變化而變化。瀏覽器最大化時，如果寬度超過960px，背景為瀏覽器默認色，一般為白色；嘗試更改視口寬度為768px到960px之間，背景變?yōu)榧t色；縮小視口寬度范圍550px到768px之間，背景為桔色；縮小視口寬度范圍550px到320px之間，背景為黃色，繼續(xù)縮小視口寬度范圍320px以內(nèi)，背景為綠色，如下圖所示：視口小于550px時背景黃色視口小于320px時背景綠色舉例（media-background-color.html）媒體查詢4.邏輯關(guān)鍵字（1）andand將多個媒體屬性連接成一條媒體查詢，只有當每個屬性都為真時，結(jié)果才為真，等同邏輯運算符中的“且”條件。（2）notnot用來對一條媒體查詢的結(jié)果進行取反，等同邏輯運算符中的“非”條件。上面代碼針對非手持且彩色設(shè)備應(yīng)用系列樣式。@medianothandheldand(color){…}媒體查詢（3）onlyonly僅在媒體查詢匹配成功的情況下被用于應(yīng)用一個樣式

當視口寬在320px~350px范圍時，應(yīng)用系列樣式。

（4）逗號分隔列表邏輯媒體查詢中使用逗號分隔效果等同于or邏輯操作符。當任何一個媒體查詢返回真，樣式就是有效的。逗號分隔的列表中每個查詢都是獨立的，一個查詢中的操作符并不影響其它的媒體查詢。這意味著逗號媒體查詢列表能夠作用于不同的媒體屬性、類型和狀態(tài)。@mediaonlyscreenand(min-width:320px)and(max-width:350px){…}媒體查詢例如，如果想在最小寬度為320px或是橫屏的手持設(shè)備上應(yīng)用樣式，代碼如下：其中，handheldand(orientation:landscape)橫屏手持設(shè)備，min-width:320px表示最小寬度值。如果是一個800像素寬的屏幕設(shè)備，媒體語句將會返回真，如果是500像素寬的橫屏手持設(shè)備，媒體查詢返回也會為真。@media(min-width:320px),handheldand(orientation:landscape){…}在媒體查詢中如果沒有明確指定MediaType，那么其默認為all媒體查詢5.常用引用方式作為CSS的media屬性，其引用方式分為內(nèi)嵌方式和外聯(lián)方式。（1）內(nèi)嵌方式內(nèi)嵌方式是將媒介查詢的樣式和通用樣式寫在一起，比如我們要在寬度超過320px的情況下為鏈接加上下劃線，如下面代碼所示。注意：媒介查詢需要聲明在普通樣式后面，否則聲明將不會起作用。a{text-decoration:none;}@mediascreenand(min-width:320px){a{text-decoration:underline;}}媒體查詢（2）外聯(lián)方式CSS屬性外聯(lián)方式使用link標記，帶有媒介查詢的外聯(lián)方式也不例外，如下面代碼所示。如果使用這種方式，那么在media-handheld.css中，我們就可以直接聲明CSS樣式了：外聯(lián)引入方式是源碼和屬性值分開寫，與內(nèi)嵌方式相比，代碼更加簡潔清晰。<linkhref="media-handheld.css"media="onlyscreenand(min-width:320px)"/>a{text-decoration:underline;}媒體查詢嘗試利用媒體查詢，結(jié)合本次動手實驗的素材，搭配合適的樣式屬性，設(shè)計出如下組圖片所示的簡易響應(yīng)式網(wǎng)頁。難點分析：正確使用媒體查詢參數(shù)與表達式。靈活運用浮動進行網(wǎng)頁布局設(shè)計。隨堂練習（1）唐詩八首屏幕寬度在640px以內(nèi)的頁面效果屏幕寬度在960px以上的頁面效果屏幕寬度在640px~960之間的頁面效果演示示例：唐詩八首Bootstrap框架概述6.3Bootstrap來歷：它是由Twitter公司的設(shè)計師開發(fā)的一個前端開源框架，它于2011年8月在GitHub上發(fā)布。Bootstrap框架：它是基于HTML、CSS和JavaScript等前端技術(shù)實現(xiàn)的，它預定義了一套CSS樣式。Bootstrap框架應(yīng)用：我們只需提供固定的HTML結(jié)構(gòu)，并添加Bootstrap中提供的class名稱，即可達到指定的效果。課件中示例使用的是Bootstrap的4.6.x版本，目前最新版是5.3.0。6.3.1什么是BootstrapBootstrap框架中提供的內(nèi)容如下?；窘Y(jié)構(gòu)：Bootstrap提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。CSS：Bootstrap自帶全局的CSS設(shè)置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的柵格系統(tǒng)。布局組件：創(chuàng)建圖像、下拉菜單、導航、警告框、彈出框的組件等等。圖標庫：開源的圖標庫，格式為SVG，能夠輕松快捷地進行縮放，并可以通過CSS設(shè)置樣式。JavaScript插件：例如，模態(tài)框（Model）插件、下拉菜單插件、滾動監(jiān)聽插件等。定制：開發(fā)人員可以自由定制Bootstrap的組件、Sass變量和jQuery插件來得到一套自定義的版本，提高了開發(fā)的靈活性。6.3.1什么是BootstrapBootstrap的優(yōu)勢6.3.2Bootstrap的優(yōu)勢移動設(shè)備優(yōu)先：移動設(shè)備優(yōu)先的樣式貫穿于整個庫。瀏覽器支持：主流瀏覽器都支持Bootstrap。學習成本低，容易上手：具備HTML和CSS和JavaScript的基礎(chǔ)知識。響應(yīng)式設(shè)計：Bootstrap框架的柵格系統(tǒng)，能夠自適應(yīng)于臺式機、平板電腦和手機的屏幕大小。良好的代碼規(guī)范：Bootstrap為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案，減少了測試的工作量，使開發(fā)人員站在巨人的肩膀上，不重復造輪子。組件：Bootstrap包含了功能強大的內(nèi)置組件。Bootstrap的下載和環(huán)境安裝6.46.4.1Bootstrap的下載方式訪問Bootstrap的官方網(wǎng)站或者中文網(wǎng)站，單擊“Download”按鈕，進入下載頁面。Bootstrap官網(wǎng)首頁進入官網(wǎng)Bootstrap中文網(wǎng)V4版本首頁6.4.2下載Bootstrap預編譯文件Bootstrap中文網(wǎng)方式一：下載預編譯文件單擊下載6.4.2下載Bootstrap預編譯文件軟件包中的內(nèi)容解壓后6.4.2下載Bootstrap預編譯文件在HTML中引入預編譯的Bootstrap的核心CSS和JavaScript文件。<!--引入Bootstrap核心CSS文件--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--JavaScript文件是可選的。從以下兩種建議中選擇一個即可！--><!--選項1：jQuery和Bootstrap集成包（集成了Popper）--><scriptsrc="js/jquery.slim.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><!--選項2：Popper和Bootstrap的JS插件各自獨立--><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/popper.min.js"></script><scriptsrc="js/bootstrap.min.js"></script>因為Bootstrap的一些插件需要用到JQuery的支持，因此我們也需要包含JQuery的相關(guān)內(nèi)容。CDN的全稱是ContentDeliveryNetwork，即內(nèi)容分發(fā)網(wǎng)絡(luò)。CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)。Bootstrap中文網(wǎng)聯(lián)合國內(nèi)CDN服務(wù)商共同為Bootstrap專門構(gòu)建了免費的CDN加速服務(wù)，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。BootstrapCDN還為大量的前端開源工具庫提供了CDN加速服務(wù)。直接在網(wǎng)頁中加入對CDN的引用即可。6.4.3使用CDN加載Bootstrap方式二：使用CDN6.4.3使用CDN加載Bootstrap方式二：使用CDN<!--Bootstrap4核心CSS文件--><linkrel="stylesheet"href="/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"crossorigin="anonymous"><!--Bootstrap4核心JavaScript文件--><scriptsrc="/npm/jquery@3.5.1/dist/jquery.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04"crossorigin="anonymous"></script>在使用CDN加載引用文件時，通常選擇帶有min的文件，這是因為帶有min的JavaScript和CSS文件是經(jīng)過壓縮之后的文件，體積比較小。6.4.3使用CDN加載Bootstrap小提示6.4.4建立第一個Bootstrap頁面1.添加HTML5DOCTYPEBootstrap要求使用HTML5文件類型，所以需要添加HTML5DOCTYPE聲明。如果在Bootstrap創(chuàng)建的網(wǎng)頁開頭不使用HTML5的文檔類型（DOCTYPE），可能會面臨一些瀏覽器顯示不一致的問題，或者一些特定情境下的不一致，導致代碼不能通過W3C標準的驗證。<!DOCTYPEhtml><html>……</html>6.4.4建立第一個Bootstrap頁面2.移動設(shè)備優(yōu)先為了讓Bootstrap開發(fā)的網(wǎng)站對移動設(shè)備友好，確保適當?shù)睦L制和觸屏縮放，需要在網(wǎng)頁的head之間添加viewportmeta標簽，如下所示。其中，width屬性控制設(shè)備的寬度。當網(wǎng)站被帶有不同屏幕分辨率的設(shè)備瀏覽，那么把它設(shè)置為device-width可以確保它能正確呈現(xiàn)在不同設(shè)備上。initial-scale=1.0確保網(wǎng)頁加載時，以1:1的比例呈現(xiàn)，不會有任何的縮放。<metaname="viewport"content="width=device-width,initial-scale=1">3.在頁面中引入編譯好的CSS和JavaScript文件<head><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于彈窗、提示、下拉菜單--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已編譯的插件--></head><body></body><scriptsrc="js/bootstrap.bundle.min.js"></script>6.4.4建立第一個Bootstrap頁面6.4.4建立第一個Bootstrap頁面4.容器類Bootstrap需要一個容器元素來包裹網(wǎng)站的內(nèi)容。我們可以使用以下兩個容器類：.container類用于固定寬度并支持響應(yīng)式布局的容器。.container-fluid類用于100%寬度，占據(jù)全部視口（viewport）的容器。例如：<divclass="container">...</div>演示示例：第一個Bootstrap頁面改變?yōu)g覽器窗口大小，我們會發(fā)現(xiàn)頁面顯示內(nèi)容隨窗口縮放發(fā)生了變化，以適應(yīng)不同瀏覽器視口尺寸。6.4.4建立第一個Bootstrap頁面

<!DOCTYPEhtml><html><head><title>第一個Bootstrap頁面</title><metacharset="utf-8">

<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于彈窗、提示、下拉菜單--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已編譯的插件--></head><body>演示示例：第一個Bootstrap頁面6.4.4建立第一個Bootstrap頁面<divclass="jumbotrontext-center"><h1>我的第一個Bootstrap頁面</h1><p>改變?yōu)g覽器大小查看效果!</p></div><divclass="container"><divclass="row"><divclass="col-sm-4"><h3>第一列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第二列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第三列</h3><p>bootstrap</p></div></div></div></body></html>演示示例：第一個Bootstrap頁面如何提高頁面的加載速度：在HTML代碼的末尾處引入JavaScript文件。Bootstrap的JavaScript插件依賴于jQuery，因此在加載這些插件前需要先行去加載jQuery。JavaScript文件的加載順序依次為jquery-3.5.1.slim.min.js、bootstrap.bundle.min.js。其中，jquery-3.5.1.slim.min.js是Bootstrap4官網(wǎng)使用的簡化版的jQuery文件，相比普通版本缺少了Ajax和特效模塊。6.4.4在HTML中引入Bootstrap小提示Bootstrap布局容器6.56.5.1初識布局容器布局容器：是Bootstrap中最基本的布局元素，在使用默認網(wǎng)格系統(tǒng)時，布局容器是必需的。作用：它用于容納、填充一些內(nèi)容，以及有時需要使內(nèi)容居中。布局容器包含：.container類和.container-?uid類。在前面講解的內(nèi)容中，媒體查詢需要使用@media關(guān)鍵字檢測設(shè)備的寬度變化。在Bootstrap中，我們不需要編寫媒體查詢的代碼，而是使用一些內(nèi)置的類名，用來檢測不同的設(shè)備的寬度。6.5.1初識布局容器.container類和.container-?uid類布局容器區(qū)別：這兩種容器類最大的不同之處在于寬度的設(shè)定。.container類可以根據(jù)屏幕寬度的不同，利用媒體查詢設(shè)定固定的寬度，當瀏覽器窗口大小改變時，頁面效果也會隨之發(fā)生改變。.container-?uid類在不同設(shè)備下始終保持寬度為100%，如果一個元素需要占據(jù)全部視口時可以使用.container-?uid類。1它在每個響應(yīng)斷點處設(shè)置了一個max-width最大寬度.container容器2它在每個響應(yīng)斷點處設(shè)置布局容器的寬度為100%.container-fluid容器STEP016.5.1初識布局容器.container類和.container-fluid類在不同設(shè)備寬度下頁面元素的顯示效果新建demo01.html文件，編寫HTML代碼。<!DOCTYPE

html><html><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0,shrink-to-fit=no">

<link

rel="stylesheet“

href="css/bootstrap.min.css">

<title>布局容器</title></head><body>

<div

class="container-fluid

bg-dark

text-light

mb-1">.container-fluid設(shè)置布局容器</div>

<div

class="container

bg-dark

text-light">.container設(shè)置布局容器</div></body></html>布局容器STEP02運行程序在瀏覽器中查看demo01.html文件運行效果。6.5.1初識布局容器演示示例：布局容器

先定一個小目標！了解柵格系統(tǒng)，能夠說出柵格系統(tǒng)的作用，能夠列舉柵格系統(tǒng)的類前綴6.5.2柵格系統(tǒng)6.5.2柵格系統(tǒng)柵格系統(tǒng)：是一個基于12列的布局，它具有的5種響應(yīng)尺寸分別對應(yīng)不同的屏幕大小。柵格系統(tǒng)作用：通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局。建議：開發(fā)者可以將內(nèi)容放入這些創(chuàng)建好的布局中，并且會根據(jù)父元素盒子（布局容器）尺寸的大小進行適當?shù)卣{(diào)節(jié)，從而達到響應(yīng)式頁面布局的效果。響應(yīng)式柵格系統(tǒng)例如，在小屏幕設(shè)備上有某些模塊將按照不同的方式排列或者被隱藏。柵格系統(tǒng)基本使用步驟柵格系統(tǒng)基本使用步驟：Bootstrap柵格系統(tǒng)為不同屏幕寬度定義了不同的類，使用非常方便，直接為元素添加類名即可。行使用樣式

.row，列使用樣式

.col-*-*，可用于快速創(chuàng)建網(wǎng)格布局。每一行（row）必須包含在布局容器.container類或.container-?uid類中，這樣方便為其自動設(shè)置外邊距（margin）和內(nèi)邊距（padding）。通過行可以創(chuàng)建水平方向的列組，并且只有列（column）可以作為行（row）的直接子元素。例如，可以使用3個.col-xs-4來創(chuàng)建3個等寬的列。內(nèi)容只能放置于列內(nèi)，列大于12時，將會另起一行排列。6.5.3柵格基本使用網(wǎng)格系統(tǒng)通過指定橫跨的12個可用的列來創(chuàng)建，例如：要創(chuàng)建三個相等的列，則可使用三個.col-*-4。我們也可以根據(jù)自己的需要，定義列數(shù)，如下所示：1111111111114444866126.5.3柵格基本使用6.5.2柵格系統(tǒng)超小屏幕(<576px)小屏幕(≥576px)中等屏幕(≥768px)大屏幕(≥992px)超大屏幕(≥1200px).container最大容器寬度自動（100%）540px720px960px1140px類前綴.col-.col-sm-.col-md-.col-lg-.col-xl-柵格系統(tǒng)的類前綴柵格系統(tǒng)提供了基本的前綴，用于在不同寬度的屏幕中實現(xiàn)不同的排列方式，列的類名可以寫多個，也就是可以同時設(shè)置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*類名。當同時使用這些類的時候，它會根據(jù)當前屏幕的大小來使相應(yīng)的類生效，實現(xiàn)在不同屏幕下展示不同的頁面結(jié)構(gòu)。通過類前綴設(shè)置每列的寬度6.5.3柵格基本使用col-柵格的數(shù)量(設(shè)置超小設(shè)備);col-sm-柵格的數(shù)量(設(shè)置平板);col-md-柵格的數(shù)量(設(shè)置桌面顯示器);col-lg-柵格的數(shù)量(設(shè)置大桌面顯示器);col-xl-柵格的數(shù)量(設(shè)置超大桌面顯示器);由于柵格系統(tǒng)就是默認將父元素分成12等份，所以可根據(jù)占據(jù)的份數(shù)來設(shè)置子元素的寬度，在設(shè)置列的寬度時，只需要在不同的類前綴后面加上柵格數(shù)量即可。如何利用上面的類來控制列的寬度以及在不同設(shè)備上的顯示呢？我們來看先創(chuàng)建一行（<divclass="row">），然后在這一行內(nèi)添加需要的列（col-*-*類中設(shè)置）。第一個星號（*）表示響應(yīng)的設(shè)備：sm,md,lg或xl，第二個星號（*）是一個數(shù)字，表示占據(jù)的列數(shù)，同一行的數(shù)字相加最大12。 <divclass="row"> <divclass="col-*-*"></div> </div> <divclass="row"> <divclass="col-*-*"></div> <divclass="col-*-*"></div> <divclass="col-*-*"></div> </div>6.5.3使用類前綴設(shè)置列的寬度案例：不同的屏幕下設(shè)置不同的列的寬度<head>

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<link

rel="stylesheet"

href="css/bootstrap.min.css"><style></style></head><body>

<div

class="container">

<div

class="row">

<div

class="col-sm-6

col-md-3">第一列</div>

<!--省略其他兩列-->

</div>

</div></body>6.5.3使用類前綴設(shè)置列的寬度編寫HTML結(jié)構(gòu)<style>

.row

{background-color:

#eee;}

.col-sm-6

{

background-color:

#eee;

border:

1px

solid

#fff;

text-align:

center;

font-size:30px;

}</style>6.5.3使用類前綴設(shè)置列的寬度編寫CSS樣式代碼平板設(shè)備平板設(shè)備下頁面效果。桌面顯示器使用鼠標拖動，放大瀏覽器窗口至桌面顯示器，頁面網(wǎng)格會變成四列。6.5.3使用類前綴設(shè)置列的寬度演示示例：布局（1）等寬列

下面示例演示了如何在不同設(shè)備上顯示等寬度的響應(yīng)式列<divclass="container"style="border:1pxsolidblack"><divclass="row"><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div></div></div>6.5.3使用類前綴設(shè)置列的寬度舉例（column-equal.html）當設(shè)備屏幕寬度大于576px時，四個等寬列會顯示在一行內(nèi)，如下所示。在移動設(shè)備上，即屏幕寬度小于576px時，四個列將會上下堆疊排版。如下所示。舉例（column-equal.html）6.5.3使用類前綴設(shè)置列的寬度（2）非等寬列<divclass="container"style="border:1pxsolidblack"><divclass="row"><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-3"style="border:1pxsolidblack">col-sm-3</div><divclass="col-sm-6"style="border:1pxsolidblack">col-sm-6</div></div></div>6.5.3使用類前綴設(shè)置列的寬度舉例（column-not-equal.html）當設(shè)備屏幕寬度大于576px時，三個不等寬列會顯示在一行內(nèi)。如下所示。在移動設(shè)備上，即屏幕寬度小于576px時，三個列會上下堆疊排版。如下所示。舉例（column-not-equal.html）6.5.3使用類前綴設(shè)置列的寬度（3）組合列在頁面布局時，很多時候等寬列和非等寬列會同時存在，多個類也會一起組合使用，以滿足在多種不同設(shè)備上顯示的需要，從而創(chuàng)建更靈活的頁面布局。下面兩個示例就演示了這兩種情況。<!--等寬和非等寬列--><divclass="container"style="border:1pxsolidblack"><divclass="row"><divclass="col-sm-8"style="border:1pxsolidblack">col-sm-8</div><divclass="col-sm-4"style="border:1pxsolidblack">col-sm-4</div></div><divclass="row"><divclass="col-sm-6"style="border:1pxsolidblack">col-sm-6</div><divclass="col-sm-6"style="border:1pxsolidblack">col-sm-6</div></div></div>6.5.3使用類前綴設(shè)置列的寬度當設(shè)備屏幕寬度大于576px時，效果如下所示。當設(shè)備屏幕寬度小于576px時，如下所示。舉例（column-combination.html）6.5.3使用類前綴設(shè)置列的寬度多個類組合使用<!--多個類組合使用--><divclass="container"style="border:1pxsolid"><divclass="row"><divclass="col-xs-12col-sm-8col-md-6col-lg-3"style="border:1pxsolid">此處顯示內(nèi)容1</div><divclass="col-xs-12col-sm-4col-md-6col-lg-3"style="border:1pxsolid">此處顯示內(nèi)容2</div><divclass="col-xs-12col-sm-8col-md-6col-lg-3"style="border:1pxsolid">此處顯示內(nèi)容3</div><divclass="col-xs-12col-sm-4col-md-6col-lg-3"style="border:1pxsolid">此處顯示內(nèi)容4</div></div></div>舉例（column-mix-combination.html）做練習6.5.3使用類前綴設(shè)置列的寬度當屏幕尺寸小于576px的時候，用col-xs-12類對應(yīng)的樣式，四個div顯示為四行，如下所示。屏幕尺寸在576到768之間的時候，第一個第三個div用col-sm-8類對應(yīng)的樣式；第二個第四個div用col-sm-4類對應(yīng)的樣式。如圖所示。舉例（column-mix-combination.html）6.5.3使用類前綴設(shè)置列的寬度屏幕尺寸在768px到992px之間的時候，用col-md-6類對應(yīng)的樣式，四個div分別顯示在兩行上。如下所示。大于992px的時候，用col-lg-3類對應(yīng)的樣式，四個div顯示在一行上。如下所示。注意：所有“列（column）”必須放在“.row”內(nèi)。（4）嵌套列如果想在一列中嵌套另外的列，那么可以在原來的列中添加新的元素和一組.col-*-*列。6.5.3使用類前綴設(shè)置列的寬度在下面的示例中，布局有兩個列，第二列被分為兩行四個盒子。舉例（column-box.html）<divclass="container"><h4>嵌套列</h4><divclass="row"><divclass="col-md-3"style="border:1pxsolidblack"><h4>第一列</h4><p>我是第一列</p></div><divclass="col-md-9"style="border:1pxsolidblack"><h4>第二列-分為四個盒子</h4><divclass="row"><divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">

我是第二列</div>做練習6.5.3使用類前綴設(shè)置列的寬度<divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">我是第二列</div></div><divclass="row"><divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">我是第二列</div><divclass="col-md-6"style="background-color:#dedef8;border:1pxsolidblack">我是第二列</div></div></div></div></div>6.5.3使用類前綴設(shè)置列的寬度舉例（column-box.html）屏幕尺寸大于768px時，第一列用.col-md-3對應(yīng)的樣式，第二列用.col-md-9對應(yīng)的樣式，第二列內(nèi)嵌套的四個盒子分別采用.col-md-6樣式。總之，我們可以使用Bootstrap提供的這些類定義在不同設(shè)備上的界面排版。6.5.3使用類前綴設(shè)置列的寬度舉例（column-box.html）

先定一個小目標！熟悉利用柵格系統(tǒng)實現(xiàn)導航欄效果【案例】利用柵格系統(tǒng)實現(xiàn)導航欄效果【案例】利用柵格系統(tǒng)實現(xiàn)導航欄效果導航欄的實現(xiàn)思路：首先定義導航欄頁面結(jié)構(gòu)，通過Bootstrap柵格系統(tǒng)中的.container設(shè)置導航欄的布局容器。在導航欄布局容器的每一行中設(shè)置不同的列數(shù)。在中等屏幕設(shè)備下，占3份，即每列寬度為25%；在小屏幕設(shè)備下，占12份，即每列寬度為100%。然后再去定義導航欄的頁面樣式。導航欄效果演示示例：導航欄案例：實現(xiàn)導航欄效果<head>

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<link

rel="stylesheet"

href="css/bootstrap.min.css"></head><body>

<div

class="container">

<ul

class="row">

<li

class="col-md-3

col-sm-12">首頁</li>

<!--省略其他3個<li>標簽-->

</ul>

</div></body>編寫HTML結(jié)構(gòu)【案例】利用柵格系統(tǒng)實現(xiàn)導航欄效果<style>

*

{margin:

0;padding:

0;}

li

{list-style:

none;}

.row

{margin-bottom:

0;}

.container

{background-color:

#eee;}

.col-sm-12

{text-align:

center;padding:10px;font-size:30px;}

li:hover

{

background-color:

#fff;}</style>編寫CSS樣式代碼【案例】利用柵格系統(tǒng)實現(xiàn)導航欄效果平板設(shè)備平板設(shè)備下頁面效果。【案例】利用柵格系統(tǒng)實現(xiàn)導航欄效果演示示例：導航欄iPhone12pro模式切換到手機模式（在這里選擇使用iPhone12Pro），頁面效果?！景咐坷脰鸥裣到y(tǒng)實現(xiàn)導航欄效果常用樣式6.66.6.1文字排版在HTML中，可以使用不同的標簽來定義不同的文本樣式，例如文字的大小、粗體、刪除線等。Bootstrap通過覆寫元素的默認樣式，實現(xiàn)對頁面布局的優(yōu)化，讓頁面在用戶面前呈現(xiàn)得更加美觀。舉例（text.html）<h1>h1.Bootstrapheading<small>Secondarytext</small></h1><spanclass="h1">行內(nèi)元素具有h1的class，就是不一樣</span><p>我被設(shè)置了1rem(16px)的底部外邊距</p><pclass="lead">加了lead的class樣式，我會突出顯示</p><p>在文本<abbrtitle="WorldHealthOrganization">WHO</abbr>底部顯示虛線邊框</p><p>Bootstrap<mark>教程</mark></p><del>對于被刪除的文本使用</del><br/><u>為文本添加下劃線</u><!--通過文本對齊類，可以簡單方便地將文字重新對齊--><pclass="text-left">Leftalignedtext.</p><pclass="text-center">Centeralignedtext.</p><pclass="text-right">Rightalignedtext.</p><pclass="text-justify">Justifiedtext.</p><pclass="text-nowrap">Nowraptext.</p>6.6.1文字排版舉例（text.html）<!--通過這幾個類可以改變文本的大小寫，即大小寫轉(zhuǎn)換--><pclass="text-lowercase">Lowercasedtext.</p><pclass="text-uppercase">Uppercasedtext.</p><pclass="text-capitalize">Capitalizedtext.</p> <!--移除了默認的list-style樣式和左側(cè)外邊距的一組元素（只針對直接子元素）。--><ulclass="list-unstyled"> <li>列表類</li> <li>列表類</li> <li>列表類</li></ul><!--通過設(shè)置display:inline-block;將所有元素放置于同一行--><ul> <liclass="list-inline-item">同一行的列表</li> <liclass="list-inline-item">同一行的列表</li> <liclass="list-inline-item">同一行的列表</li></ul>6.6.1文字排版

先定一個小目標！熟悉Bootstrap文本顏色和背景色的設(shè)置，能夠說出Bootstrap有哪些常用的文本顏色和背景色，能夠設(shè)置相應(yīng)顏色6.6.2顏色類名描述類名描述.text-primary首選文本顏色，重要的文本.text-warning警告信息文本顏色.text-secondary副標題顏色.text-dark深灰色文本.text-success成功文本顏色.text-bodybody文本顏色.text-muted柔和顏色.text-light淺灰色文本.text-danger危險提示文本顏色.text-white白色文本.text-info一般提示信息文本顏色.text-black黑色文本常用的文本顏色6.6.2顏色舉例（color.html）類名描述類名描述.bg-primary重要的背景顏色.bg-dark深灰色背景.bg-secondary副標題背景顏色.bg-light淺灰色背景.bg-success成功背景顏色.bg-white白色背景.bg-danger危險提示背景顏色.bg-transparent透明背景色.bg-info一般提示信息背景顏色.bg-warning警告信息背景顏色背景色6.6.2顏色舉例（bgcolor.html）

先定一個小目標！熟悉Bootstrap表格的設(shè)置，能夠設(shè)置表格的樣式6.6.3表格Bootstrap提供了一系列類來設(shè)置表格的樣式，如下所示下表中的類可用于表格的行或者單元格。類描述.table為任意<table>添加基本樣式(只有橫向分隔線).table-striped在<tbody>內(nèi)添加斑馬線形式的條紋(IE8不支持).table-bordered為所有表格的單元格添加邊框.table-hover在<tbody>內(nèi)的任一行啟用鼠標懸停狀態(tài).table-condensed讓表格更加緊湊類描述.active將懸停的顏色應(yīng)用在行或者單元格上.success表示成功的操作.info表示信息變化的操作.warning表示一個警告的操作.danger表示一個危險的操作6.6.3表格使用.table類來改變表格基本樣式。<divclass="container"><h3>使用.table類創(chuàng)建基本表格布局</h3><tableclass="table"> <thead><tr><th>姓名</th><th>年齡</th></tr></thead><tbody><tr><td>小明</td><td>16</td></tr><tr><td>小芳</td><td>14</td></tr></tbody></table></div>舉例（table.html）6.6.3表格在上面示例中添加“.table-striped”類，就會在<tbody>內(nèi)的行上看到條紋，如下所示舉例（table-striped.html）<tableclass="tabletable-striped">……//表格內(nèi)容同table1.html，此處代碼省略</table>6.6.3表格.table-bordered類可以為表格添加邊框。<tableclass="tabletable-bordered">

……//表格內(nèi)容同table1.html，此處代碼省略</table>舉例（table-bordered.html）6.6.3表格.table-hover類可以為表格的每一行添加鼠標懸停效果（灰色背景）。當鼠標在表格不同行懸停的時候，當前行會顯示為灰色背景，離開后恢復原背景色。效果如下所示。<tableclass="tabletable-hover">

……//表格內(nèi)容同table1.html，此處代碼省略</table>舉例（table-hover.html）6.6.3表格我們還可以聯(lián)合使用多個類來創(chuàng)建組合效果。引入maxcdn的樣式，使用.table-dark和.table-striped類可以創(chuàng)建黑色的條紋表格。舉例（table-dark&table-striped.html）6.6.3表格.thead-dark類用于給表頭添加黑色背景，.thead-light類用于給表頭添加灰色背景。.thead-inverse類用于給表頭添加黑色背景，.thead-default類用于給表頭添加灰色背景。舉例（thead-inverse&thead-default.html）6.6.3表格為任意<table>標簽添加.table類可以為其賦予基本的樣式，如果想創(chuàng)建響應(yīng)式的表格，將.table元素包裹在.table-responsive元素內(nèi)，即可創(chuàng)建響應(yīng)式表格。在屏幕寬度小于992px時會創(chuàng)建水平滾動條，如果可視區(qū)域?qū)挾却笥?92px則顯示不同效果（沒有滾動條）。舉例（table-responsive.html）6.6.3表格類名描述.img-fluid設(shè)置響應(yīng)式圖片，主要應(yīng)用于響應(yīng)式設(shè)計中.img-thumbnail縮略圖片，給圖片設(shè)置一個空心邊框.rounded給元素添加圓角邊框.rounded-circle設(shè)置元素形狀（圓形或者橢圓形）Bootstrap框架中提供了幾種圖像的樣式風格，只需要在<img>標簽上添加對應(yīng)的類名，即可實現(xiàn)不同的風格。常見的圖像樣式如下表所示。需要注意的是，因為.rounded樣式和.rounded-circle樣式需要用到border-radius屬性，而border-radius屬性是基于CSS3的圓角樣式來實現(xiàn)的，所以在低版本的瀏覽器下是沒有效果的。6.6.4圖片.img-fluid是Bootstrap預定義好的，用來實現(xiàn)圖片響應(yīng)式的類，它給圖片設(shè)置了max-width:100%,height:auto;的效果，在開發(fā)中可以直接拿來使用。6.6.4圖片在網(wǎng)頁制作中，通常會使用浮動來設(shè)置元素在頁面中的顯示位置。當然，Bootstrap中也提供了一系列的樣式來設(shè)置圖片或文字的顯示位置，具體內(nèi)容如下表所示。類名描述.float-left設(shè)置元素左浮動.float-right設(shè)置元素右浮動.clearfix清除浮動下面示例展示了應(yīng)用不同類后圖片呈現(xiàn)的不同樣式。<divclass="container"><p>.rounded類可以讓圖片顯示圓角效果</p><imgsrc="images/flower.jpg"class="rounded"alt="漂亮的花"><p>.rounded-circle類可以設(shè)置橢圓形圖片</p><imgsrc="images/flower.jpg"class="rounded-circle"alt="漂亮的花"><p>.img-thumbnail類用于設(shè)置圖片縮略圖(圖片有邊框)</p><imgsrc="images/flower.jpg"class="img-thumbnail"alt="漂亮的花"><p>.img-fluid類可以設(shè)置響應(yīng)式圖片，重置瀏覽器大小查看效果</p><imgsrc="images/fluid.jpg"class="img-fluid"><p>使用.float-right類來設(shè)置圖片右對齊，使用.float-left類設(shè)置圖片左對齊</p><imgsrc="images/left.jpg"class="float-left"width="200px"height="200px"><imgsrc="images/right.jpg"class="float-right"width="200px"height="200px"></div>舉例（image.html）6.6.4圖片

先定一個小目標！熟悉圖文樣式-使用HTML5提供的<picture>標簽【案例】響應(yīng)式圖片<picture>標簽是HTML5新增的標簽元素，可以實現(xiàn)圖片的響應(yīng)式效果。常適用于在固定的區(qū)域下使用固定的圖片尺寸，例如在大屏幕下使用大尺寸圖片，在小屏幕下使用小尺寸圖片，這樣可以減少流量的使用。使用HTML5提供的<picture>標簽【案例】響應(yīng)式圖片<link

rel="stylesheet"

href="css/bootstrap.min.css"><body>

<picture>

<sourcesrcset="images/banner1.jpg"media="(max-width:500px)">

<imgsrc="images/banner.jpg"class="img-fluid"alt="響應(yīng)式大圖">

</picture></body><picture>標簽的使用上述代碼中，實現(xiàn)了屏幕寬度不超過500px時(見左圖)，使用banner1.jpg圖片；當屏幕超過該數(shù)值時(見右圖)，使用banner.jpg圖片。編寫頁面結(jié)構(gòu)演示示例：響應(yīng)式圖片【案例】響應(yīng)式圖片多學一招：實現(xiàn)圖片居中對齊在Bootstrap中可以給圖片添加兩個公用的類.mx-auto和.d-block來實現(xiàn)圖片的居中顯示。除此之外，考慮到圖片本身是內(nèi)聯(lián)元素，因此可以給圖片包裹一層容器，并給該容器設(shè)置.text-center樣式來實現(xiàn)居中效果。6.6.4圖片編寫如下代碼來實現(xiàn)圖片在頁面中的居中效果。<divclass="text-center">

<imgsrc="images/load-pic3.jpg"class="rounded-circle"></div>頁面效果如下圖所示。6.6.4圖片演示示例：圖片顯示位置在制作網(wǎng)頁時，常常會遇到圖片和文字組合顯示的效果，Bootstrap中提供了<figure>和<figcaption>標簽來實現(xiàn)圖文組合效果。圖文組合6.6.4圖片<link

rel="stylesheet"

href="bootstrap/css/bootstrap.min.css"><body>

<divclass="text-center">

<figureclass="figure">

<imgsrc="images/load-pic4.jpg"class="img-fluidfigure-img">

<figcaptionclass="figure-captiontext-center">

我是一張笑臉

</figcaption>

</figure>

</div></body>圖文在頁面中的展示效果編寫頁面結(jié)構(gòu)6.6.4圖片在瀏覽器中打開案例，頁面效果如下圖所示。6.6.4圖片演示示例：圖文組合在前端頁面開發(fā)的過程中，表單也是頁面結(jié)構(gòu)中重要的組成部分。表單主要包括form、button和input等元素，通過在form元素中定義input和button等元素來實現(xiàn)表單頁面結(jié)構(gòu)。6.6.5表單和表單控件<body>

<formaction="#">

<div

class="form-group">

<label

for="User">用戶名</label>

<input

type="text"

class="form-control"

id="User">

<label

for="Password">密碼</label>

<input

type="password"

class="form-control"

id="Password">

<label

for="Email1">郵箱地址</label>

<input

type="email"

class="form-control"

id="Email1">

</div>

<button

type="submit"

class="btn

btn-primary">提交</button>

</form></body>編寫頁面結(jié)構(gòu)把標簽和控件放在一個帶有.form-group類的中，這是獲取最佳間距所必需的。向所有的文本元素<input><textarea>和<select>添加class="form-control"

舉例（form-normal.html）（form-control.html）6.6.5表單和表單控件

先定一個小目標！掌握Bootstrap按鈕的使用，能夠設(shè)置按鈕樣式、按鈕大小，能夠創(chuàng)建按鈕組6.6.6按鈕Bootstrap提供了大量的圖標按鈕和多種按鈕風格，可以快速實現(xiàn)優(yōu)雅的界面設(shè)計。例如，導航條中的下拉式按鈕組，表單中的提交按鈕、登錄和注冊按鈕等。6.6.6按鈕類描述.btn基類，也就是按鈕的基本樣式.btn-primary主要的按鈕樣式，藍色.btn-success表示成功的按鈕，綠色.btn-secondary次要的按鈕樣式，灰色.btn-info一般提示信息的按鈕，青色.btn-warning警告信息按鈕，黃色.btn-danger危險提示按鈕操作，紅色.btn-link讓按鈕看起來像個鏈接(仍然保留按鈕行為).btn-light淺灰色按鈕.btn-dark暗黑色按鈕按鈕樣式6.6.6按鈕舉例（button-control.html）取值描述.btn-lg大按鈕.btn-sm小按鈕.btn-block創(chuàng)建塊級的按鈕，會橫跨父元素的全部寬度按鈕大小6.6.6按鈕舉例（button-control.html）STEP046.6.6按鈕按鈕組按鈕組：是將多個按鈕集合成一個組件，在Bootstrap中只需要在類名為.btn-group的父元素中添加多個按鈕即可創(chuàng)建按鈕組。使用建議：在按鈕組中不要混合使用<a>、<input>和<button>標簽，而是盡量使用同一個標簽。HTML代碼<body>

<div

class="btn-group"

role="group">

<button

type="button"

class="btn

btn-primary">按鈕1</button>

<button

type="button"

class="btn

btn-secondary">按鈕2</button>

<button

type="button"

class="btn

btn-success">按鈕3</button>

</div></body>6.6.6按鈕組編寫頁面結(jié)構(gòu)舉例（button-group.html）頁面效果如下圖所示。按鈕組舉例（button-group.html）6.6.6按鈕組組件6.7<navclass="navbarnavbar-expand-mdnavbar-darkbg-dark"><aclass="navbar-brand"href="#">詩人畫像</a> <ulclass="navbar-nav"id="navbarSupportedContent"> <liclass="nav-item"><aclass="n