任務(wù)1：柵格系統(tǒng)的工作原理和基本用法項(xiàng)目二柵格系統(tǒng)主講人：CONTENTS010203實(shí)現(xiàn)原理使用規(guī)則實(shí)例展示課程導(dǎo)入Bootstrap框架提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的柵格系統(tǒng)，用于頁(yè)面布局設(shè)計(jì)。使用柵格系統(tǒng)提供的容器、行、列等元素，可以很容易的實(shí)現(xiàn)響應(yīng)式頁(yè)面布局，降低前端開(kāi)發(fā)的復(fù)雜度。實(shí)現(xiàn)原理/01實(shí)現(xiàn)原理

通過(guò)定義容器大小，將屏幕或視口尺寸平分為12份，再調(diào)整內(nèi)外邊距，最后再結(jié)合媒體查詢(xún)，制作出響應(yīng)式的柵格系統(tǒng)。1234567891012實(shí)現(xiàn)原理柵格系統(tǒng)使用的總寬度可以不固定，Bootstrap是按百分比進(jìn)行平分。12柵格系統(tǒng)是整個(gè)Bootstrap的核心功能，也是響應(yīng)式設(shè)計(jì)核心理念的一個(gè)實(shí)現(xiàn)形式。1234567891012實(shí)現(xiàn)原理flexbox（彈性盒子）實(shí)現(xiàn)原理容器類(lèi).container.container-fluid.container-{sm|md|lg|xl|xxl}左右內(nèi)邊距0.75rem行類(lèi).row左右外邊距-0.75rem列類(lèi).col.col-*.col-auto.col-{sm|md|lg|xl|xxl}-*左右內(nèi)邊距0.75rem柵格系統(tǒng)布局的類(lèi)使用規(guī)則/02使用規(guī)則行（row）必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（alignment）和內(nèi)邊距(padding)。01“行（row）”包含列（col），在水平方向創(chuàng)建一組“列（column）”。02內(nèi)容應(yīng)當(dāng)放置于“列（col）”內(nèi)，并且，只有“列（col）”可以作為行（row）”的直接子元素。03使用規(guī)則柵格系統(tǒng)中的列是通過(guò)指定1～12的值來(lái)表示其跨越的范圍。例如，3個(gè)等寬的列，可以使用3個(gè).col-4。04對(duì)于flexbox（彈性盒子），沒(méi)有指定寬度的網(wǎng)格列將自動(dòng)作為等寬列進(jìn)行布局。例如，一行中如果放4個(gè).col-sm列，則每一列自動(dòng)獲取百分比為25%。05通過(guò)為column設(shè)置padding屬性，從而創(chuàng)建列與列之間的間隔。06使用規(guī)則柵格系統(tǒng)的水平和垂直間距是響應(yīng)和可定制的。通過(guò).gx-*來(lái)改變柵格的水平間距，.gy-*來(lái)改變柵格的垂直間距，g-*同時(shí)改變水平垂直間距，g-0去掉間距。07如果一“行（row）”中包含的“列（column）”大于12，則多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。08為了使柵格具有響應(yīng)性，屏幕寬度有6個(gè)柵格斷點(diǎn)：extra-small、small、medium、large、extra-large、extraextra-large。09實(shí)例展示/03實(shí)例展示實(shí)例展示斷點(diǎn)斷點(diǎn)和容器屏幕大小寬度范圍手機(jī)超小設(shè)備extra-small<576px平板設(shè)備smallsm576px~768px桌面顯示器mediummd768px~992px大桌面顯示器largelg992px~1200px特大桌面顯示器extra-largexl1200px~1400px超大桌面顯示器extraextra-largexxl>=1400px實(shí)例展示容器類(lèi)類(lèi)超小設(shè)備<576px平板設(shè)備>=576px桌面顯示器>=768px大桌面顯示器>=992px特大桌面顯示器>=1200px超大桌面顯示器extraextra-large.container100%540px720px960px1140px1320px.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.container-fluid100%100%100%100%100%100%左右padding為：0.75rem（12px）實(shí)例展示行、列類(lèi)行類(lèi)列類(lèi)

.col等列寬，對(duì)所有設(shè)備都是一樣的，進(jìn)行等分。col-**代表數(shù)字，表示占了*格。例如，col-3，表示對(duì)所有設(shè)備都是一樣的，這一列占3格。col-X-*：X表示的是設(shè)備寬度，其取值為：sm（平板設(shè)備）、md（桌面顯示器）、lg（大桌面顯示器）、xl（超大桌面顯示器）。*表示占了*格。col-auto，列寬根據(jù)內(nèi)容自適應(yīng)。.row，將容器的display屬性設(shè)置為flex。左右marging為-0.75rem實(shí)例展示行、列類(lèi)

超小設(shè)備<576px平板設(shè)備>=576px桌面顯示器>=768px大桌面顯示器>=992px特大桌面顯示器>=1200px超大桌面顯示器>=1400px最大容器寬度None(auto)540px720px960px1140px1320pxClass前綴.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-列數(shù)量和121212121212間隙寬度1.5rem(左、右0.75rem)可嵌套Yes列排序Yes任務(wù)2：匹配多種設(shè)備、自動(dòng)列寬、列嵌套、列排序項(xiàng)目二柵格系統(tǒng)主講人：CONTENTS010203匹配多種類(lèi)型設(shè)備自動(dòng)布局列列嵌套04列排序匹配多種類(lèi)型設(shè)備/01匹配多種類(lèi)型設(shè)備xs或smmdlg及其以上設(shè)備自動(dòng)布局列/02自動(dòng)布局列自動(dòng)布局列主要是指列的寬度根據(jù)行的寬度或列包含內(nèi)容的寬度自動(dòng)分配。包括等列寬和自動(dòng)列寬兩者情況。自動(dòng)布局列等列寬自動(dòng)布局列等列寬自動(dòng)布局列自動(dòng)列寬lg設(shè)備顯示效果md設(shè)備顯示效果列嵌套/03列嵌套列排序/04列排序

列排序其實(shí)就是改變列的前后排列順序在柵格系統(tǒng)中，可以通過(guò).order-*、.order-X-*，來(lái)實(shí)現(xiàn)這一目的。其中，*是first、last或者0-5的數(shù)字，排序是按數(shù)字大小排序，first最前面，last最后面，X代表xs、sm、md、lg、xl、xxl，對(duì)應(yīng)不同的屏幕大小。任務(wù)3：列偏移、行列類(lèi)、間距類(lèi)項(xiàng)目二柵格系統(tǒng)主講人：CONTENTS010203列偏移行列類(lèi)間距類(lèi)列偏移/01列偏移offset-*：*為數(shù)字1-11，表示向右偏移的列數(shù)。offset-X-*：X為設(shè)備寬度前綴sm、md、lg、xl、xxl。*為數(shù)字0~11。offset-X-0，表示該寬度下不偏移。列偏移md設(shè)備列偏移.ms-auto設(shè)置margin-left：auto，使元素居右排列。.me-auto設(shè)置margin-right：auto，使元素居左排列。

在Bootstrap框架中，提供了外邊距工具ms-auto、me-auto。在彈性盒子中可以使用邊距自動(dòng)來(lái)改變子項(xiàng)目的布局。列偏移行列類(lèi)/02行列類(lèi)使用行列類(lèi).row-cols-*、.row-cols-X-*類(lèi)可以快速設(shè)置布局中一行的列數(shù)。其中，*是1～6的數(shù)字，X代表sm、md、lg、xl、xxl，對(duì)應(yīng)不同的屏幕大小。普通的.col-*類(lèi)應(yīng)用于各個(gè)列，但行列類(lèi)應(yīng)用在父級(jí).row上，可是快捷指定列數(shù)。行列類(lèi)使用.row-col-*時(shí)，也可以指定列的寬度，其他未指定列寬的列依舊為平分的寬度。行列類(lèi)使用.row-col-auto類(lèi)時(shí)，每列的寬度自適應(yīng)內(nèi)容寬度。也可以設(shè)置響應(yīng)式行列類(lèi)，例如.row-col-md-auto.行列類(lèi)間距類(lèi)/03間距類(lèi).gx-*改變.row中.col元素內(nèi)容的水平間距。.gy-*改變.row中.col元素內(nèi)容的垂直間距。g-*同時(shí)改變.row中.col元素內(nèi)容的水平、垂直間距。使用.g-*、gx-*、gy-*（*的取值為0~5）可以修改.row元素的內(nèi)外邊距和.row下的.col列元素的內(nèi)外邊距，從而達(dá)到改變一行中.col列元素內(nèi)容的水平、垂直間距。對(duì)應(yīng)響應(yīng)式類(lèi)：.g-X-*、.gx-X-*、.gy-X-*，其中X的取值為sm、md、lg、xl、xxl。間距類(lèi)g-0：0remg-1：0.25remg-2：0.5remg-3：1remg-4：1.5remg-5：3rem間距類(lèi)有2種方式解決溢出問(wèn)題：給.container添加更大的內(nèi)邊距，添加.px-4，會(huì)將.container的內(nèi)邊距設(shè)置為24px；在.container容器上添加類(lèi)..overflow-hidden，讓溢出部分隱藏。案例：W3school項(xiàng)目二柵格系統(tǒng)主講人：CONTENTS0102W3School首頁(yè)框架分析具體實(shí)現(xiàn)課程導(dǎo)入如何靈活運(yùn)用柵格系統(tǒng)進(jìn)行頁(yè)面布局課程導(dǎo)入柵格系統(tǒng)通過(guò)將頁(yè)面劃分為等寬的列來(lái)創(chuàng)建一個(gè)清晰的布局結(jié)構(gòu)。這種方法不僅有助于設(shè)計(jì)師快速構(gòu)建響應(yīng)式和自適應(yīng)的網(wǎng)頁(yè)，還能夠確保內(nèi)容的一致性和可讀性。課程導(dǎo)入W3School首頁(yè)框架分析/01W3School首頁(yè)框架分析W3School首頁(yè)框架分析<divclass="container"><!--第1行Logo部分-->

<divclass="row"><divclass="col"></div></div><!--第2行

導(dǎo)航部分-->

<divclass="row"><divclass="col"></div></div><!--第3行

主體-->

<divclass="row"><divclass="col-3"></div><divclass="col-6"></div><divclass="col-3"></div></div><!--第4行

頁(yè)腳-->

<divclass="row"><divclass="col"></div></div></div>具體實(shí)現(xiàn)/02具體實(shí)現(xiàn)Logo行<divclass="row"><divclass="col">

<divclass="bg-logo"><imgsrc="img/logo.png"></div></div></div>.bg-logo{

/*設(shè)置背景顏色為圖片的背景色*/background-color:#fdfcf8;width:100%;}具體實(shí)現(xiàn)導(dǎo)航欄<divclass="row"><divclass="col">

<divid="main-nav"><ul><li><ahref="#">HTML/CSS</a></li><li><ahref="#">JavaScript</a></li><li><ahref="#">ServerSide</a></li><li><ahref="#">ASP.NET</a></li><li><ahref="#">XML</a></li><li><ahref="#">WebServices</a></li><li><ahref="#">WebBuilding</a></li></ul></div></div></div>#main-nav{background-color:#eee;}#main-navul{list-style-type:none;font-size:18px;padding:15px0;margin:0px;}#main-navli{display:inline;}#main-nava{padding:15px20px;color:#999;text-decoration:none;}#main-nava:hover{background-color:#444;color:#fff;}具體實(shí)現(xiàn)導(dǎo)航欄具體實(shí)現(xiàn)主體行具體實(shí)現(xiàn)主體部分左側(cè)側(cè)邊欄#leftside{ font-size:12px; border-left:1pxsolid#ccc; border-right:1pxsolid#ccc; padding-top:10px;

}#leftsideh3{ margin:10px05px8px;}#leftsideul{ list-style-type:none;}#leftsidea{ text-decoration:none; color:#333; display:block; padding:5px05px15px;}#leftsidea:hover{ background-color:#999; color:#fff;}具體實(shí)現(xiàn)主體部分右側(cè)側(cè)邊欄與左側(cè)側(cè)邊欄的實(shí)現(xiàn)方式類(lèi)似。#rightside{ font-size:12px;

border-left:1pxsolid#ccc; border-right:1pxsolid#ccc; padding-top:10px;

}#rightsideh3{ margin:10px05px8px;}#rightsideul{ list-style-type:none; }#rightsidea{ text-decoration:none; color:#930; display:block; padding:5px05px15px;}#rightsidea:hover{ background-color:#C30; color:#fff;}具體實(shí)現(xiàn)主體部分#maincontent{font-size:16px;padding:020px;}#maincontenth2{margin-top:20px;margin-bottom:10px;}#maincontentp{margin:10px0;}具體實(shí)現(xiàn)頁(yè)腳部分<divclass="row"><divclass="col-sm-12"><footer><p>W3school提供的內(nèi)容僅用于培訓(xùn)，但我們不保證內(nèi)容的正確性...</p><p>W3school簡(jiǎn)體中文版的所有內(nèi)容僅供測(cè)試...</p></footer></div></div>footer{background-color:#eee;font-size:12px;text-align:center;