Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)（電子活頁(yè)式）課件 模塊1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第1頁(yè)
Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)（電子活頁(yè)式）課件 模塊1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第2頁(yè)
Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)（電子活頁(yè)式）課件 模塊1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第3頁(yè)
Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)（電子活頁(yè)式）課件 模塊1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第4頁(yè)
Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)（電子活頁(yè)式）課件 模塊1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩27頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

模塊1

Bootstrap5響應(yīng)式網(wǎng)頁(yè)

設(shè)計(jì)基礎(chǔ)1.1Bootstrap概述Bootstrap起源Bootstrap起源于2011年，由工程師馬克·奧托（MarkOtto）和雅各布·索頓（JacobThornton）合作開(kāi)發(fā)。他們發(fā)現(xiàn)當(dāng)時(shí)的網(wǎng)頁(yè)設(shè)計(jì)工具集不夠完善，缺乏一些基本的樣式和組件，而這會(huì)使得開(kāi)發(fā)人員的工作更加困難。為了解決這個(gè)問(wèn)題，他們決定創(chuàng)建一個(gè)基于HTML、CSS和JavaScript的開(kāi)源框架，提供一些基本的樣式和組件，使得開(kāi)發(fā)人員可以更快地構(gòu)建響應(yīng)式網(wǎng)站。最初，Bootstrap主要被用于Twitter的網(wǎng)頁(yè)設(shè)計(jì)。在經(jīng)過(guò)一段時(shí)間的迭代和改進(jìn)后，Bootstrap逐漸受到開(kāi)發(fā)人員的歡迎，并成為目前受歡迎的前端開(kāi)發(fā)框架之一。1.1Bootstrap概述

Bootstrap的特點(diǎn)易于使用使用方便響應(yīng)式移動(dòng)優(yōu)先瀏覽器兼容性開(kāi)源社區(qū)1.1Bootstrap概述Bootstrap5的主要優(yōu)勢(shì)（1）移除jQuery依賴Bootstrap5最大的改進(jìn)之一是移除了對(duì)jQuery的依賴，轉(zhuǎn)而完全采用原生JavaScript編寫插件。這一變化不僅使得項(xiàng)目的加載速度更快，還降低了項(xiàng)目的依賴性，使得Bootstrap5的性能得到了顯著提升。此外，Bootstrap5還通過(guò)優(yōu)化CSS和JavaScript代碼，減少了項(xiàng)目的加載時(shí)間，提高了頁(yè)面的響應(yīng)速度。（2）強(qiáng)大的自定義能力Bootstrap5提供了更豐富的CSS和Sass變量，允許開(kāi)發(fā)人員輕松定制主題，滿足個(gè)性化需求。無(wú)論是顏色、字體還是間距，都可以根據(jù)項(xiàng)目的具體需求進(jìn)行調(diào)整，從而創(chuàng)造出獨(dú)一無(wú)二的網(wǎng)站風(fēng)格。（3）更好的無(wú)障礙支持Bootstrap5增強(qiáng)了對(duì)無(wú)障礙特性的支持，使得網(wǎng)站更易于所有用戶訪問(wèn)。這對(duì)于提升網(wǎng)站的可訪問(wèn)性和用戶體驗(yàn)至關(guān)重要，尤其是在面向多樣化用戶群體的項(xiàng)目中。（4）新的組件和改進(jìn)Bootstrap5引入了許多新的組件和改進(jìn)，包括更豐富的間距類、新的排版工具、改進(jìn)的圖庫(kù)布局，以及全新的徽章、徽標(biāo)和按鈕樣式。這些新特性使得開(kāi)發(fā)人員能夠更加靈活地構(gòu)建各種復(fù)雜的網(wǎng)頁(yè)布局和交互效果。1.1Bootstrap概述Bootstrap5的主要優(yōu)勢(shì)（5）響應(yīng)式網(wǎng)格系統(tǒng)Bootstrap5提供了一套基于移動(dòng)優(yōu)先的響應(yīng)式網(wǎng)格系統(tǒng)，基于Flexbox構(gòu)建，適用于不同屏幕尺寸的設(shè)備。該系統(tǒng)允許開(kāi)發(fā)人員創(chuàng)建等寬或不等寬的列，并支持嵌套和偏移。通過(guò)簡(jiǎn)單的類名組合，開(kāi)發(fā)人員可以輕松地實(shí)現(xiàn)響應(yīng)式布局，確保網(wǎng)站在不同尺寸和分辨率的設(shè)備上都能呈現(xiàn)出良好的視覺(jué)效果。這種響應(yīng)式設(shè)計(jì)特性使得網(wǎng)站能夠適應(yīng)現(xiàn)代多設(shè)備瀏覽的環(huán)境。（6）簡(jiǎn)單易學(xué)和靈活性Bootstrap5簡(jiǎn)潔的類名、直觀的布局結(jié)構(gòu)和豐富的文檔使得開(kāi)發(fā)人員能夠輕松地掌握其使用方法和技巧，即使是初學(xué)者也能快速上手。同時(shí)，它提供了大量預(yù)設(shè)的組件和布局選項(xiàng)，使開(kāi)發(fā)人員可以根據(jù)項(xiàng)目需求進(jìn)行組合和調(diào)整。這種靈活性使得Bootstrap5成為構(gòu)建各種類型網(wǎng)站的理想選擇。（7）廣泛的社區(qū)支持Bootstrap擁有龐大的開(kāi)發(fā)者社區(qū)，這意味著有海量的資源和插件可以選擇。當(dāng)開(kāi)發(fā)人員遇到問(wèn)題時(shí)，可以很容易地在社區(qū)中找到解決方案或?qū)で髱椭?。此外，Bootstrap的更新也非常頻繁，保證了開(kāi)發(fā)者能夠始終使用到最新的技術(shù)和工具。（8）較好的兼容性Bootstrap5支持眾多現(xiàn)代瀏覽器，這確保了使用其開(kāi)發(fā)的網(wǎng)站能夠廣泛地被各種用戶訪問(wèn)和瀏覽。1.2Bootstrap5主要內(nèi)容（1）組件和工具：基于HTML、CSS和JavaScript的組件和工具。（2）網(wǎng)格系統(tǒng)：用于根據(jù)不同設(shè)備的屏幕大小調(diào)整網(wǎng)站布局的響應(yīng)式設(shè)計(jì)系統(tǒng)。（3）排版：包括標(biāo)題、段落、列表、表格等基本的文本排版元素。（4）圖像：用于處理圖像的各種樣式和工具，如縮放、裁剪、圓角等。（5）按鈕：各種類型的按鈕，包括基礎(chǔ)按鈕、下拉按鈕、工具欄按鈕等。（6）導(dǎo)航：包括導(dǎo)航欄、標(biāo)簽頁(yè)、面包屑、下拉菜單等與導(dǎo)航相關(guān)的組件。（7）表單：包括各種表單元素、表單控件、表單驗(yàn)證等。（8）模態(tài)：用于創(chuàng)建模態(tài)窗口和對(duì)話框的組件。（9）輪播圖：用于展示圖片或內(nèi)容的輪播組件。（10）工具提示：用于展示提示信息的工具提示組件。（11）其他組件：包括對(duì)話框、卡片、圖標(biāo)、徽章（Badge）等其他類型的組件。1.3.1固定寬度容器.container類用于創(chuàng)建固定寬度的響應(yīng)式頁(yè)面，不同屏幕寬度及對(duì)應(yīng)的max-width值如表1-1所示。超大型屏幕（≥1400px）是Bootstrap5新增加的，Bootstrap4最大可支持特大型屏幕（≥1200px）。不同屏幕寬度超級(jí)小型

屏幕（寬度＜576px）小型屏幕（寬度≥

576px）中型屏幕（寬度≥

768px）大型屏幕（寬度≥

992px）特大型屏幕（寬度≥

1200px）超大型屏幕（寬度≥

1400px）max-width100%540px720px960px1140px1320px表1-1

不同屏幕寬度及對(duì)應(yīng)的max-width值1.3.1固定寬度容器【示例代碼】<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>響應(yīng)式網(wǎng)頁(yè)示例</title> <linkhref="../bootstrap-5.3.3-dist/css/bootstrap.min.css"rel="stylesheet"type="text/css"><scriptsrc="../bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="container"><h1>Bootstrap頁(yè)面</h1><p>.container類提供了固定寬度的容器。</p></div></body></html>【驗(yàn)證示例1-1】基于固定寬度容器.container創(chuàng)建響應(yīng)式網(wǎng)頁(yè)創(chuàng)建響應(yīng)式網(wǎng)頁(yè)test01_01.html，嘗試調(diào)整瀏覽器窗口的大小來(lái)查看容器寬度在不同屏幕中的變化。1.3.2100%寬度的容器.container-fluid類用于創(chuàng)建100%寬度（全屏幕尺寸），即占據(jù)全部視口的容器，這類容器總是跨越整個(gè)屏幕寬度（width總是100%）。當(dāng)屏幕寬度小于768px時(shí)，.container容器和.container-fluid容器的寬度與屏幕寬度相同，二者的效果相同。當(dāng)屏幕寬度大于等于768px且小于992px時(shí)，.container容器的寬度被設(shè)定為750px。當(dāng)屏幕寬度大于等于992px且小于1200px時(shí)，.container容器的寬度被設(shè)定為970px。當(dāng)屏幕寬度大于等于1200px時(shí)，.container容器的寬度被設(shè)定為1170px。.container類有一個(gè)特點(diǎn)，就是在不同屏幕大小下，其容器的左右margin會(huì)自動(dòng)調(diào)整為auto，以使容器始終保持居中?？偟膩?lái)說(shuō)，選擇使用哪個(gè)類取決于具體需求。如果頁(yè)面需要適應(yīng)不同大小的屏幕，并且頁(yè)面內(nèi)容較多，那么.container類可能更合適。如果頁(yè)面需要全屏顯示，并且頁(yè)面內(nèi)容較少，那么.container-fluid類可能更合適。1.3.2100%寬度的容器【驗(yàn)證示例1-2】創(chuàng)建容器寬度為100%的響應(yīng)式網(wǎng)頁(yè)創(chuàng)建響應(yīng)式網(wǎng)頁(yè)test01_02.html，該網(wǎng)頁(yè)中容器寬度始終為100%?！臼纠a】<divclass="container-fluid"><h1>Bootstrap頁(yè)面</h1><p>使用了.container-fluid類，創(chuàng)建了寬度占據(jù)全部視口的容器。</p></div>【代碼解讀】在本示例代碼中，使用了.container-fluid類創(chuàng)建一個(gè)寬度始終為100%的容器。與固定寬度的容器不同，寬度始終為100%的容器會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)調(diào)整大小。可能更合適。1.3.3容器邊距1．內(nèi)邊距類（1）.p-*：設(shè)置元素所有方向的內(nèi)邊距（padding），其中*表示大小級(jí)別（0到5）。（2）.pt-*、.pb-*、.pl-*、.pr-*：分別設(shè)置元素頂部、底部、左側(cè)和右側(cè)的內(nèi)邊距。2．外邊距類（1）.m-*：設(shè)置元素所有方向的外邊距（margin），其中*表示大小級(jí)別（0到5）。（2）.mt-*、.mb-*、.ml-*、.mr-*：分別設(shè)置元素頂部、底部、左側(cè)和右側(cè)的外邊距。3．額外的邊距類Bootstrap5還提供了一些額外的邊距類，用于更精細(xì)地控制間距。（1）.px-*和.py-*：分別設(shè)置元素水平方向和垂直方向的內(nèi)邊距或外邊距。（2）.mx-*和.my-*：分別設(shè)置元素水平方向和垂直方向的外邊距大小級(jí)別。以上每個(gè)類別的后面都跟著一個(gè)數(shù)字，這個(gè)數(shù)字表示邊距的大小。例如，pt-3表示元素的頂部?jī)?nèi)邊距為3px。4．自定義邊距大小除了預(yù)設(shè)的邊距大小級(jí)別外，Bootstrap5還允許使用Sass變量（如$spacer）來(lái)自定義邊距大小。例如，可以將內(nèi)邊距或外邊距的大小設(shè)定為$spacer的某個(gè)倍數(shù)，如.mt-3表示將頂部外邊距大小設(shè)定為$spacer的3倍。1.3.3容器邊距【驗(yàn)證示例1-3】設(shè)置容器邊距創(chuàng)建響應(yīng)式網(wǎng)頁(yè)test01_03.html，并設(shè)置容器邊距。【示例代碼】<divclass="container"><divclass="row"><divclass="col-6pt-3"><p>這是一個(gè)帶有頂部?jī)?nèi)邊距的列。</p></div></div><divclass="row"><divclass="col-4pb-5"><p>這是一個(gè)帶有底部?jī)?nèi)邊距的列。</p></div><divclass="col-4pl-5"><p>這是一個(gè)帶有左側(cè)內(nèi)邊距的列。</p></div><divclass="col-4pr-5"><p>這是一個(gè)帶有右側(cè)內(nèi)邊距的列。</p></div></div></div>1.3.4容器的邊框和顏色Bootstrap5也提供了一些邊框（.border）和顏色（.bg-dark、.bg-primary等）類來(lái)設(shè)置容器的樣式。1．邊框樣式類（1）.border：給元素添加淺灰色的邊框。（2）.border-*：設(shè)置元素的邊框顏色，如.border-success、.border-danger等。（3）.border-0：刪除元素的邊框。（4）.rounded-0：刪除元素的圓角。（5）.rounded-*：設(shè)置元素的圓角大小，如.rounded-circle、.rounded-pill等。2．顏色樣式類（1）設(shè)置元素背景色的類。設(shè)置元素背景色的類有：.bg-primary、.bg-secondary、.bg-dark、.bg-light、.bg-white、.bg-body。（2）設(shè)置元素文本顏色的類。設(shè)置元素文本顏色的類有：.text-primary、.text-secondary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark、.text-body、.text-white、.text-muted。1.3.4容器的邊框和顏色【驗(yàn)證示例1-4】邊框樣式類和顏色樣式類的使用創(chuàng)建響應(yīng)式網(wǎng)頁(yè)test01_04.html，并設(shè)置容器的邊框和顏色樣式?！臼纠a】<divclass="containerp-5my-5border"><p>這個(gè)容器有一個(gè)邊框和一些邊距。</p></div><divclass="containerp-5my-5bg-darktext-white"><p>這個(gè)容器具有深色背景色和白色文本，以及一些額外的邊距。</p></div><divclass="containerp-5my-5bg-primarytext-white"><p>這個(gè)容器具有藍(lán)色背景色和白色文本，以及一些額外的邊距。</p></div>1.3.5響應(yīng)式容器可以使用.container-sm、.container-md、.container-lg、.container-xl類來(lái)創(chuàng)建響應(yīng)式容器，該容器的max-width屬性值會(huì)根據(jù)屏幕的大小改變。響應(yīng)式容器及對(duì)應(yīng)的max-width屬性值如表1-2所示。類名超級(jí)小型屏幕（寬度＜576px）小型屏幕（寬度≥576px）中型屏幕（寬度≥768px）大型屏幕（寬度≥992px）特大型屏幕（寬度≥1200px）超大型屏幕（寬度≥1400px）.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320px表1-2響應(yīng)式容器及對(duì)應(yīng)的max-width屬性值1.3.5響應(yīng)式容器【驗(yàn)證示例1-5】響應(yīng)式容器的使用創(chuàng)建響應(yīng)式網(wǎng)頁(yè)test01_05.html?！臼纠a】<divclass="containerpt-3"><h1>響應(yīng)式容器</h1><p>重置瀏覽器大小以查看效果。</p></div><divclass="container-smborder">.container-sm</div><divclass="container-mdmt-3border">.container-md</div><divclass="container-lgmt-3border">.container-lg</div><divclass="container-xlmt-3border">.container-xl</div><divclass="container-xxlmt-3border">.container-xxl</div>1.4.1網(wǎng)格類Bootstrap5的網(wǎng)格系統(tǒng)是基于斷點(diǎn)的，這意味著在不同的屏幕尺寸和設(shè)備上，元素會(huì)根據(jù)指定的斷點(diǎn)調(diào)整大小。Bootstrap5網(wǎng)格系統(tǒng)有6個(gè)類，具體信息如表1-3所示。類名針對(duì)的設(shè)備類型屏幕寬度.col-*針對(duì)所有設(shè)備—.col-sm-*平板計(jì)算機(jī)等于或大于576px.col-md-*桌面顯示器等于或大于768px.col-lg-*大型桌面顯示器等于或大于992px.col-xl-*特大型桌面顯示器等于或大于1200px.col-xxl-*超大型桌面顯示器等于或大于1400px表1-3

Bootstrap5網(wǎng)格系統(tǒng)的6個(gè)類的具體信息1.4.2網(wǎng)格系統(tǒng)規(guī)則設(shè)備類型及

尺寸超小型桌面

顯示器（寬度

＜576px）小型桌面

顯示器（寬度

≥576px）中型桌面

顯示器（寬度

≥768px）大型桌面

顯示器（寬度

≥992px）特大桌面

顯示器（寬度

≥1200px）超大型桌面

顯示器（寬度

≥1400px）類前綴.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-網(wǎng)格行為始終水平折疊開(kāi)始，在斷點(diǎn)之上水平容器最大寬度None(auto)540px720px960px1140px1320px適用于手機(jī)豎屏手機(jī)橫屏平板計(jì)算機(jī)筆記本計(jì)算機(jī)筆記本計(jì)算機(jī)和臺(tái)式計(jì)算機(jī)筆記本計(jì)算機(jī)和

臺(tái)式計(jì)算機(jī)列數(shù)量和12間隙寬度1.5rem（一個(gè)列的每側(cè)分別為0.75rem）可嵌套Yes偏移Yes列排序Yes表1-4

Bootstrap網(wǎng)格系統(tǒng)的網(wǎng)格選項(xiàng)（尺寸單位：px）1.4.3Bootstrap5網(wǎng)格的基本結(jié)構(gòu)【驗(yàn)證示例1-6】網(wǎng)格的基本結(jié)構(gòu)實(shí)例創(chuàng)建網(wǎng)頁(yè)test01_06.html，該網(wǎng)頁(yè)中的HTML代碼表示了Bootstrap5網(wǎng)格的基本結(jié)構(gòu)，HTML代碼如下所示，讀者可調(diào)整瀏覽器窗口大小以查看其效果。【示例代碼】<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>響應(yīng)式網(wǎng)頁(yè)示例</title> <linkhref="../bootstrap-5.3.3-dist/css/bootstrap.min.css"rel="stylesheet"type="text/css"><scriptsrc="../bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script><style>.text-center{text-align:center;}</style></head><body><divclass="container-fluidmt-3"><!--讓Bootstrap自動(dòng)處理布局--><divclass="row"><divclass="col-smbg-primarytext-whitetext-center">25%</div><divclass="col-smbg-darktext-whitetext-center">25%</div><divclass="col-smbg-primarytext-whitetext-center">25%</div><divclass="col-smbg-darktext-whitetext-center">25%</div></div><br><!--控制列寬，以及它們?cè)诓煌O(shè)備上的顯示效果--><divclass="row"><divclass="col-sm-4bg-primarytext-whitetext-center">33.33%</div><divclass="col-sm-4bg-darktext-whitetext-center">33.33%</div><divclass="col-sm-4bg-primarytext-whitetext-center">33.33%</div></div><br><!--控制列寬，以及它們?cè)诓煌O(shè)備上的顯示效果--><divclass="row"><divclass="col-sm-6bg-primarytext-whitetext-center">50%</div><divclass="col-sm-6bg-darktext-whitetext-center">50%</div></div><br><!--讓Bootstrap自動(dòng)處理布局--><divclass="row"><divclass="col-mdbg-primarytext-whitetext-center">100%</div></div></div></body></html>1.4.3Bootstrap5網(wǎng)格的基本結(jié)構(gòu)【驗(yàn)證示例1-6】網(wǎng)格的基本結(jié)構(gòu)實(shí)例【代碼解讀】使用.col-sm類來(lái)定義列，當(dāng)屏幕寬度小于576px時(shí)，Bootstrap會(huì)自動(dòng)處理布局，將列堆疊在一起。使用.col-sm-4類來(lái)定義列，每列占據(jù)4個(gè)單位（即1/3的行寬），無(wú)論屏幕大小如何，都保持這樣的布局。使用.col-sm-6類來(lái)定義列，每列占據(jù)6個(gè)單位（即1/2的行寬），當(dāng)屏幕寬度小于576px時(shí)，Bootstrap會(huì)自動(dòng)處理布局，將列堆疊在一起。使用.col-md類來(lái)定義列，當(dāng)屏幕寬度大于或等于768px時(shí)，該列會(huì)占據(jù)整行的寬度。【顯示效果】圖1-3【驗(yàn)證示例1-6】的顯示效果1.4.4創(chuàng)建寬度相等的列【驗(yàn)證示例1-7】創(chuàng)建讓Bootstrap自動(dòng)布局、寬度相等的列創(chuàng)建網(wǎng)頁(yè)test01_07.html，在該網(wǎng)頁(yè)中創(chuàng)建3個(gè)寬度相等的列，嘗試在class="row"中添加新的class="col"，以顯示3個(gè)等寬的列。【模板代碼】<divclass="row"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div></div>【示例代碼】<divclass="container-fluidmt-3"><divclass="row"><divclass="colp-3bg-primarytext-white">.col</div><divclass="colp-3bg-darktext-white">.col</div><divclass="colp-3bg-primarytext-white">.col</div></div></div>圖1-4【驗(yàn)證示例1-7】的顯示效果1.4.4創(chuàng)建寬度相等的列【驗(yàn)證示例1-8】在平板計(jì)算機(jī)及更大的屏幕上創(chuàng)建4個(gè)等寬的響應(yīng)式列創(chuàng)建網(wǎng)頁(yè)test01_08.html，在該網(wǎng)頁(yè)中創(chuàng)建4個(gè)等寬的響應(yīng)式列，在屏幕寬度小于576px的移動(dòng)設(shè)備上，4個(gè)列將會(huì)上下堆疊顯示?！灸０宕a】<divclass="col-sm-3">.col</div><divclass="col-sm-3">.col</div><divclass="col-sm-3">.col</div><divclass="col-sm-3">.col</div>【示例代碼】<divclass="container-fluidmt-3"><divclass="row"><divclass="col-sm-3p-3bg-primarytext-white">.col</div><divclass="col-sm-3p-3bg-darktext-white">.col</div><divclass="col-sm-3p-3bg-primarytext-white">.col</div><divclass="col-sm-3p-3bg-darktext-white">.col</div></div></div>圖1-5【驗(yàn)證示例1-8】的顯示效果1.4.5創(chuàng)建不等寬的響應(yīng)式列【驗(yàn)證示例1-9】在平板計(jì)算機(jī)及更大的屏幕上創(chuàng)建不等寬的響應(yīng)式列創(chuàng)建網(wǎng)頁(yè)test01_09.html，在該網(wǎng)頁(yè)中創(chuàng)建不等寬的響應(yīng)式列并擴(kuò)展到超大型桌面。在移動(dòng)設(shè)備上，即屏幕寬度小于576px時(shí)，兩個(gè)列將會(huì)上下堆疊顯示?！灸０宕a】<divclass="row"><divclass="col-sm-4">.col</div><divclass="col-sm-8">.col</div></div>【示例代碼】<divclass="container-fluidmt-3"><divclass="row"><divclass="col-sm-4p-3bg-primarytext-white">.col</div><divclass="col-sm-8p-3bg-darktext-white">.col</div></div></div>圖1-6【驗(yàn)證示例1-9】的顯示效果1.4.6設(shè)置某一列的寬度【驗(yàn)證示例1-10】設(shè)置某一列的寬度創(chuàng)建網(wǎng)頁(yè)test01_10.html，在該網(wǎng)頁(yè)中設(shè)置某一列的寬度，如果只設(shè)置一列的寬度，其他列會(huì)自動(dòng)均分剩下的寬度。本實(shí)例將列寬度設(shè)置為25%、50%、25%。【模板代碼】<divclass="row"><divclass="col">.col</div><divclass="col-6">.col-6</div><divclass="col">.col</div></div>【示例代碼】<divclass="container-fluidmt-3"><divclass="row"><divclass="colbg-success">.col</div><divclass="col-6bg-warning">.col-6</div><divclass="colbg-success">.col</div></div></div>圖1-7【驗(yàn)證示例1-10】的顯示效果1.4.7創(chuàng)建平板計(jì)算機(jī)和桌面端的網(wǎng)格布局【驗(yàn)證示例1-11】創(chuàng)建平板計(jì)算機(jī)和桌面端的網(wǎng)格布局1創(chuàng)建網(wǎng)頁(yè)test01_11.html，在該網(wǎng)頁(yè)中創(chuàng)建平板計(jì)算機(jī)和桌面端的網(wǎng)格布局。在桌面端兩個(gè)列的寬度各占50%；在平板計(jì)算機(jī)上左邊的寬度為25%，右邊的寬度為75%?！灸０宕a】<divclass="row"><divclass="col-sm-3col-md-6">.ool</div><divclass="col-sm-9col-md-6">.col</div></div>【示例代碼】<divclass="container-fluidmt-3"><divclass="row"><divclass="col-sm-3col-md-6col-lg-4col-xl-2p-3bg-primarytext-white">.col</div><divclass="col-sm-9col-md-6col-lg-8col-xl-10p-3bg-darktext-white">.col</div></div></div>圖1-8【驗(yàn)證示例1-11】的顯示效果1.4.8創(chuàng)建平板計(jì)算機(jī)、桌面顯示器、大型桌面顯示器、超大型桌面顯示器的網(wǎng)格布局【驗(yàn)證示例1-12】創(chuàng)建平板計(jì)算機(jī)和桌面端的網(wǎng)格布局2創(chuàng)建網(wǎng)頁(yè)test01_12.html，在該網(wǎng)頁(yè)中創(chuàng)建平板計(jì)算機(jī)、桌面、大型桌面顯示器、超大型桌面顯示器的網(wǎng)格布局，在平板計(jì)算機(jī)、桌面顯示器、大型桌面顯示器、超大型桌面顯示器的寬度比例分別為：25%/75%、50%/50%、33.33%/66.67%、16.67%/83.33%。【模板代碼】<divclass="row"><divclass="col-sm-3col-md-6col-lg-4col-xl-2">.col</div><divclass="col-sm-9col-md-6col-lg-8col-xl-10">.col</div></div>【示例代碼】<divclass="container-fluidmt-3"><divclass="row"><divclass="col-sm-3col-md-6col-lg-4col-xl-2p-3bg-primarytext-white">.col</div><divclass="col-sm-9col-md-6col-lg-8col-xl-10p-3bg-darktext-white">.col</div></div></div>圖1-9【驗(yàn)證示例1-12】的顯示效果1.4.9嵌套列【驗(yàn)證示例1-13】創(chuàng)建兩列布局創(chuàng)建網(wǎng)頁(yè)test01_13.html，在該網(wǎng)頁(yè)中創(chuàng)建兩列布局，其中一列內(nèi)嵌套著另外兩列?！灸０宕a】<divclass="row"><divclass="col-8">.col-8<divclass="row"><divclass="col-6">.col-6</div><divclass="col-6">.col-6</div></div></div><divclass="col-4">.col-4</div></div>【示例代碼】<divclass="container-fluid"><divclass="row"><divclass="col-8bg-warningp-4">.col-8<divclass="row"><divclass="col-6bg-lightp-2">.col-6</div><divclass="col-6bg-secondaryp-2">.col-6</div></div></div><divclass="col-4bg-successp-4">.col-4</div></div></div>圖1-10【驗(yàn)證示例1-13】的顯示效果1.4.10偏移列【驗(yàn)證示例1-14】使用.offset-md-4把.col-md-4右移4列創(chuàng)建網(wǎng)頁(yè)test01_14.html，在該網(wǎng)頁(yè)中創(chuàng)建偏移列，使用.offset-md-4把.col-md-4往右移4列?！灸０宕a】<divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4offset-md-4">.col-md-4.offset-md-4</div></div><divclass="

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論