第5章-Bootstrap的工具類

第5章Bootstrap的工具類5.1

文本類5.2顏色類5.3邊框類5.4邊距類5.5display屬性5.6浮動(dòng)類5.7陰影類5.8尺寸類5.9溢出類5.10定位類5.11內(nèi)嵌類5.12實(shí)戰(zhàn):商品信息詳情頁面掌握Bootstrap工具類中文本類與顏色類的應(yīng)用掌握Bootstrap工具類中邊框類及邊距類的應(yīng)用掌握Bootstrap工具類中Display與浮動(dòng)的應(yīng)用掌握Bootstrap工具類中陰影與尺寸的應(yīng)用理解Bootstrap工具類中溢出、定位與內(nèi)嵌的特點(diǎn)引言Bootstrap是一款快速構(gòu)建響應(yīng)式網(wǎng)站的UI框架，使用Bootstrap框架可設(shè)計(jì)出精美的Web界面。Bootstrap框架的核心是一個(gè)CSS框架，Bootstrap的基礎(chǔ)CSS(BaseCSS)定義豐富的通用樣式類，主要包括文本、顏色、邊框、邊距、浮動(dòng)、尺寸等，應(yīng)用簡(jiǎn)單，易于上手，可滿足前端工程師的基本設(shè)計(jì)需求。開發(fā)者可應(yīng)用Bootstrap的工具類快速開發(fā)出優(yōu)美的Web界面，減少CSS樣式的代碼量，提高開發(fā)者的工作效率。5.1文本類文本對(duì)齊方式文本大小寫轉(zhuǎn)換文本折行與溢出文本字體其他文本樣式類5.1文本類5.1.1文本對(duì)齊方式Bootstrap4定義了一些關(guān)于文本的樣式類，用于實(shí)現(xiàn)控制文本的對(duì)齊方式、折行、溢出、大小寫轉(zhuǎn)換、字體樣式等。文本工具類可用于快速設(shè)置文本的風(fēng)格、表現(xiàn)，非常適用于設(shè)計(jì)精美的文本效果。5.1文本類5.1.1文本對(duì)齊方式設(shè)置文本的對(duì)齊方式可將元素的類名設(shè)為“text-left”、“text-right”、“text-center”和“text-justify”。文本對(duì)齊類具體介紹如下。類名說明.text-left設(shè)置文本左對(duì)齊.text-right設(shè)置文本右對(duì)齊.text-center設(shè)置文本居中對(duì)齊.text-justify設(shè)置文本兩端對(duì)齊.text-{sm|md|lg|xl}-{left|right|center}表示在sm|md|lg|xl型設(shè)備上實(shí)現(xiàn)文本{左對(duì)齊|右對(duì)齊|居中對(duì)齊}。文本對(duì)齊類可與網(wǎng)格系統(tǒng)結(jié)合，根據(jù)響應(yīng)斷點(diǎn)定義的不同而采用不同的文本對(duì)齊方式1.文本對(duì)齊類的語法格式<pclass="text-left">文本內(nèi)容</p><pclass="text-sm-left">文本內(nèi)容</p>5.1文本類5.1.1文本對(duì)齊方式2.文本對(duì)齊方式的代碼實(shí)現(xiàn)案例介紹：在頁面中分別應(yīng)用.text-left類和.text-md-center類實(shí)現(xiàn)文本對(duì)齊演示，表示保持文本左對(duì)齊，在md型設(shè)備上保持文本居中對(duì)齊。<bodyclass="containermt-5"><pclass="text-sm-lefttext-md-center">富強(qiáng)、民主、文明、和諧</p></body>主體代碼

例5.15.1文本類5.1.1文本對(duì)齊方式文本對(duì)齊類的實(shí)現(xiàn)效果如右圖所示。sm型設(shè)備上的顯示效果md型設(shè)備上的顯示效果5.1文本類5.1.2文本大小寫轉(zhuǎn)換當(dāng)Web頁面中的文本由中英文共同構(gòu)成時(shí)，可按照文本顯示規(guī)則對(duì)字母進(jìn)行大小寫轉(zhuǎn)換，進(jìn)一步提高文本的可閱讀性。5.1文本類在Bootstrap4中對(duì)字母進(jìn)行大小寫轉(zhuǎn)換操作，可通過以下3種類實(shí)現(xiàn)。類名說明.text-lowercase表示將元素內(nèi)的字母轉(zhuǎn)換為小寫.text-uppercase表示將元素內(nèi)的字母轉(zhuǎn)換為大寫.text-capitalize表示將元素內(nèi)每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換為大寫，不影響其他字母5.1.2文本大小寫轉(zhuǎn)換1.文本轉(zhuǎn)換類的語法格式<pclass="text-lowercase">轉(zhuǎn)為小寫的文本。</p>5.1文本類5.1.2文本大小寫轉(zhuǎn)換2.文本轉(zhuǎn)換類的代碼實(shí)現(xiàn)案例介紹：在頁面中依次應(yīng)用文本轉(zhuǎn)換類顯示英文版社會(huì)主義核心價(jià)值觀。<h2class="text-center">字母大小寫轉(zhuǎn)換</h2><pclass="text-lowercase">prosperity、democracy、civility、harmony</p><pclass="text-uppercase">FREEDOM、EQUALITY、JUSTICE、RULEOFLAW</p><pclass="text-capitalize">patriotism、dedication、integrity、friendship</p>主體代碼

例5.25.1文本類5.1.2文本大小寫轉(zhuǎn)換文本轉(zhuǎn)換類的實(shí)現(xiàn)5.1文本類5.1.3文本折行與溢出當(dāng)頁面中的文本超出元素本身的寬度時(shí)，文本內(nèi)容默認(rèn)會(huì)自動(dòng)換行。在Bootstrap4中如需對(duì)文本進(jìn)行折行處理，阻止文本折行，隱藏溢出文本等操作時(shí)，可使用文本折行與溢出類進(jìn)行處理。5.1文本類文本折行與溢出類的介紹及說明如下。類名說明.text-wrap表示文本長度超出元素寬度時(shí)，允許元素內(nèi)的文本換行.text-nowrap表示文本長度超出元素寬度時(shí)，阻止元素內(nèi)的文本換行.text-truncate表示文本長度超出元素寬度時(shí)，以省略號(hào)的形式表示超出的文本內(nèi)容5.1.3文本折行與溢出1.文本折行與溢出類的語法格式<divclass="text-wrap"style="width:6rem;">此文本允許換行.</div>5.1文本類5.1.3文本折行與溢出2.文本折行與溢出類的代碼實(shí)現(xiàn)案例介紹：在頁面中定義3個(gè)寬度為10rem的div塊元素，第一個(gè)塊元素的類名設(shè)為“text-wrap”，即允許文本換行；第二個(gè)塊元素的類名設(shè)為“text-nowrap”，即阻止文本換行；第三個(gè)塊元素的類名設(shè)為“text-truncate”，即實(shí)現(xiàn)文本溢出隱藏。<h2>文本折行與溢出</h2><divclass="text-wrapborderborder-info"style="width:10rem">共產(chǎn)主義者的理想、共產(chǎn)主義者的目的、階級(jí)斗爭(zhēng)的最近狀態(tài)</div><br><divclass="text-nowrapborderborder-info"style="width:10rem">共產(chǎn)主義者的理想、共產(chǎn)主義者的目的、階級(jí)斗爭(zhēng)的最近狀態(tài)</div><br><divclass="text-truncateborderborder-info"style="width:10rem">共產(chǎn)主義者的理想、共產(chǎn)主義者的目的、階級(jí)斗爭(zhēng)的最近狀態(tài)</div><br>主體代碼

例5.35.1文本類5.1.3文本折行與溢出3.文本折行與溢出的實(shí)現(xiàn)效果5.1.3文本折行與溢出5.1文本類5.1文本類5.1.4文本字體Bootstrap4為滿足文本字體的設(shè)計(jì)需求，定義了豐富的樣式類，文本字體類可快速更改文本的字體粗細(xì)以及傾斜樣式。5.1文本類文本字體類的介紹及說明如下。5.1.4文本字體類名說明.font-weight-bold表示設(shè)置較粗的字體.font-weight-bolder表示相對(duì)于父元素，為當(dāng)前元素設(shè)置較粗的字體.font-weight-normal表示設(shè)置正常粗細(xì)的字體.font-weight-light表示設(shè)置細(xì)的字體.font-weight-lighter表示相對(duì)于父元素，為當(dāng)前元素設(shè)置較細(xì)的字體.font-italic表示設(shè)置斜體的字體1.文本字體類的語法格式<pclass="font-weight-bold">粗體文字</p>2.文本字體類的應(yīng)用演示案例介紹：在頁面中依次應(yīng)用上述6種文本字體類，以便更好地對(duì)比文本字體類的不同效果。5.1文本類5.1.4文本字體3.文本字體類的代碼實(shí)現(xiàn)<h2>文本字體樣式</h2><pclass="font-weight-bold">工人革命的第一步就是使無產(chǎn)階級(jí)上升為統(tǒng)治階級(jí)，爭(zhēng)得民主----(bold)</p><pclass="font-weight-bolder">無產(chǎn)階級(jí)將利用自己的政治統(tǒng)治，一步一步地奪取資產(chǎn)階級(jí)的全部資本----(bolder)</p><pclass="font-weight-normal">把一切生產(chǎn)工具集中在國家即組織成為統(tǒng)治階級(jí)的無產(chǎn)階級(jí)手里，并且盡可能快地增加生產(chǎn)力的總量。----(normal)</p><pclass="font-weight-light">無產(chǎn)者組織成為階級(jí),從而組織成為政黨這件事----(light)</p><pclass="font-weight-lighter">不斷地由于工人的自相競(jìng)爭(zhēng)而受到破壞----(lighter)</p><pclass="font-italic">但是，這種組織總是重新產(chǎn)生，并且一次比一次更強(qiáng)大，更堅(jiān)固，更有力。----(italic)</p>主體代碼

例5.45.1文本類5.1.4文本字體4.文本字體類的實(shí)現(xiàn)效果5.1文本類5.1.4文本字體5.1文本類5.1.5其他文本樣式類Bootstrap4還提供了一些其他常用的文本字體類，在使用Bootstrap4進(jìn)行開發(fā)時(shí)可能會(huì)用到以下文本樣式類。1.其他文本字體類介紹類名說明.text-reset重置顏色，表示重置文本顏色或鏈接顏色，以便從父元素繼承顏色屬性.text-monospace等寬字體，表示將所選內(nèi)容設(shè)為等寬字體.text-decoration-underline文字裝飾，表示為文本添加修飾線（Bootstrap5新增）.text-decoration-none文字裝飾，表示為文本刪除修飾線text-decoration-line-through文字裝飾，表示為文本添加中劃線（Bootstrap5新增）2.其他文本樣式類語法格式

其他文本字體類的語法格式如下所示。

<pclass="text-monospace">等寬字體</p>3.其他文本樣式類代碼實(shí)現(xiàn)主體代碼

例5.5<h2>其他文本樣式類<small>——職業(yè)道德精神</small></h2>

<!--設(shè)置父元素的字體顏色為紅色--><divclass="text-red"><!--重置本元素字體顏色，繼承父元素字體顏色--><pclass="text-reset">忠于職守</p></div><!--等寬字體--><pclass="text-monospace">樂于奉獻(xiàn)</p><!--<s></s>標(biāo)簽為文本添加中劃線--><!--刪除<s>標(biāo)簽的中劃線效果-->

<sclass="text-decoration-none">尊職敬業(yè)</s>5.1文本類5.1.5其他文本樣式類3.其他文本樣式類實(shí)現(xiàn)效果5.1文本類5.1.5其他文本樣式類5.2顏色類文本顏色類鏈接顏色類背景顏色類案例練習(xí)--學(xué)習(xí)菜單網(wǎng)頁制作中一般運(yùn)用色彩將元素與主題相結(jié)合，營造出獨(dú)特的網(wǎng)頁風(fēng)格。開發(fā)者還可以利用色彩劃分頁面布局，方便用戶迅速鎖定信息區(qū)域，利用突出的顏色發(fā)揮其視覺引導(dǎo)作用。在Bootstrap4中支持使用少量顏色類傳達(dá)其顏色含義，并支持對(duì)具有懸停狀態(tài)的鏈接進(jìn)行顏色設(shè)計(jì)。Bootstrap中的顏色類主要包括文本顏色、鏈接顏色、背景顏色等。5.2文本顏色類Bootstrap提供了一系列具有代表意義的文本顏色類，通過顏色賦予文本特殊意義。詳細(xì)介紹如右表所示。1.文本顏色類5.2.1文本顏色類5.2文本顏色類類名說明.text-primary字體顏色為藍(lán)色，表示重要意義.text-secondary字體顏色為灰色，表示次要意義.text-success字體顏色為淺綠色，表示成功意義.text-danger字體顏色為淺紅色，表示危險(xiǎn)意義.text-warning字體顏色為淺黃色，表示警告意義.text-info字體顏色為淺藍(lán)色，表示信息意義.text-light字體顏色為淺灰色，表示高亮意義（此顏色文本在白色背景上看不清）.text-dark字體顏色為深灰色，表示暗色意義.text-muted字體顏色為灰色，表示減弱意義.text-white字體顏色為白色（此顏色文本在白色背景上看不清）.text-body字體顏色與body保持一致，繼承body的文本顏色.text-{顏色}-*設(shè)置字體顏色的透明度（*代表透明程度，范圍0~100）

<pclass="text-primary">文本內(nèi)容</p>

<pclass="text-success">文本內(nèi)容</p>1.文本顏色類-語法格式文本顏色類的語法格式如下所示。5.2.1文本顏色類5.2文本顏色類在頁面中依次運(yùn)用Bootstrap4定義的文本顏色類，具體實(shí)現(xiàn)代碼如下。<h2>文本顏色類演示<small>---長征精神</small></h2><pclass="text-primary">感恩，堅(jiān)定，不畏艱險(xiǎn)，自強(qiáng)不息<small>————.text-primary</small></p><pclass="text-secondary">堅(jiān)定的理想信念是長征精神的核心，是戰(zhàn)勝一切艱難險(xiǎn)阻的制勝法寶<small>————.textsecondary</small></p><pclass="text-success">人無精神不立，國無精神不強(qiáng)<small>————.text-success</small></p><pclass="text-danger">精神是一個(gè)民族賴以長久生存的靈魂，<small>.text-danger</small></p><pclass="text-warning">唯有精神上達(dá)到一定的高度<small>————.text-warning</small></p><pclass="text-info">這個(gè)民族才能在歷史的洪流中屹立不倒、奮勇向前<small>————.text-info</small></p><!--text-light在白色背景中看不清，設(shè)置本元素背景顏色為黑色--><pclass="text-lightbg-dark">偉大長征精神，作為中國共產(chǎn)黨人紅色基因和精神族譜的重要組成部分<small>————.textlight</small></p><pclass="text-dark">已經(jīng)深深融入中華民族的血脈和靈魂，<small>————.text-dark</small></p><!--文本顏色繼承來自body的文本顏色--><pclass="text-body">成為社會(huì)主義核心價(jià)值觀的豐富滋養(yǎng)，<small>————.text-body</small></p><pclass="text-muted">成為鼓舞和激勵(lì)中國人民不斷攻堅(jiān)克難<small>————.text-muted</small></p><!--text-white在白色背景中看不清，設(shè)置本元素背景顏色為黑色--><pclass="text-whitebg-dark">從勝利走向勝利的強(qiáng)大精神動(dòng)力。<small>————.text-white</small></p><!--文本透明度演示--><pclass="text-white-50bg-dark">從勝利走向勝利的強(qiáng)大精神動(dòng)力。<small>————.text-white-50</small></p>主體代碼

例5.62.文本顏色類-代碼實(shí)現(xiàn)5.2.1文本顏色類5.2文本顏色類3.文本顏色類實(shí)現(xiàn)效果5.2.1文本顏色類5.2文本顏色類對(duì)于5.2.1節(jié)所介紹的文本顏色類，Bootstrap允許其在超鏈接上正常應(yīng)用。Bootstrap通過焦點(diǎn)樣式和懸浮樣式使鏈接文本在鼠標(biāo)懸浮時(shí)文本顏色變暗，從而保持鏈接文本與網(wǎng)頁整體顏色的和諧統(tǒng)一。與設(shè)置文本顏色類一樣，Bootstrap并不建議為文本使用.text-white和.text-light類，它們需要與背景色搭配使用。1.鏈接顏色類的語法格式：<aclass="text-primary">文本內(nèi)容</a>5.2.2鏈接顏色類5.2文本顏色類在頁面中依次運(yùn)用Bootstrap4定義的文本（鏈接）顏色類，具體實(shí)現(xiàn)代碼如下。<h2>鏈接顏色類<small>—————以社會(huì)主義榮辱觀為例</small></h2><p><aclass="text-primary">以熱愛祖國為榮、以危害祖國為恥<small>——————Primarylink</small></a></p><p><aclass="text-secondary">以服務(wù)人民為榮、以背離人民為恥<small>——————Secondarylink</small></a></p><p><aclass="text-success">以崇尚科學(xué)為榮、以愚昧無知為恥<small>——————Successlink</small></a></p><p><aclass="text-danger">以辛勤勞動(dòng)為榮、以好逸惡勞為恥<small>——————Dangerlink</small></a></p><p><aclass="text-warning">以團(tuán)結(jié)互助為榮、以損人利己為恥<small>——————Warninglink</small></a></p><p><aclass="text-info">以誠實(shí)守信為榮、以見利忘義為恥<small>——————Infolink</small></a></p><p><aclass="text-lightbg-dark">以遵紀(jì)守法為榮、以違法亂紀(jì)為恥<small>——————Lightlink</small></a></p><p><aclass="text-dark">以艱苦奮斗為榮、以驕奢淫逸為恥<small>——————Darklink</small></a></p><p><aclass="text-muted">在實(shí)踐中領(lǐng)悟“八榮八恥”<small>——————Mutedlink</small></a></p><p><aclass="text-whitebg-dark">自省自警、自珍自愛<small>——————Whitelink</small></a></p>主體代碼

例5.72.鏈接顏色類-代碼實(shí)現(xiàn)5.2文本顏色類5.2.2鏈接顏色類3.鏈接顏色類實(shí)現(xiàn)效果5.2文本顏色類5.2.2鏈接顏色類為元素添加背景色可使用Bootstrap提供的背景顏色類實(shí)現(xiàn)，背景顏色類與文本顏色類類似，文本顏色類用于設(shè)計(jì)文字顏色，背景顏色類則用于設(shè)計(jì)元素的背景顏色。背景顏色不會(huì)影響文字顏色，開發(fā)過程中需將背景顏色類與文本顏色類結(jié)合應(yīng)用，使二者搭配出協(xié)調(diào)、美觀的樣式。1.背景顏色類的語法格式：<pclass="bg-primary">文本內(nèi)容</p>5.2.3背景顏色類5.2文本顏色類5.2.3背景顏色類5.2文本顏色類類名說明.bg-primary背景顏色為藍(lán)色，表示重要意義.bg-secondary背景顏色為灰色，表示次要意義.bg-success背景顏色為淺綠色，表示成功意義.bg-danger顏色為淺紅色，表示危險(xiǎn)意義.bg-warning顏色為淺黃色，表示警告意義.bg-info顏色為淺藍(lán)色，表示信息意義.bg-light顏色為淺灰色，表示高亮意義（此背景顏色在文本為白色時(shí)會(huì)模糊文字）.bg-dark顏色為深灰色，表示暗色意義.bg-white背景顏色為白色（此背景顏色在文本為白色時(shí)會(huì)模糊文字）.bg-transparent背景顏色為透明色（此背景顏色在文本為白色時(shí)會(huì)模糊文字）2.背景顏色類的具體說明在頁面中依次運(yùn)用Bootstrap4定義的背景顏色類，具體實(shí)現(xiàn)代碼如下。<h2>背景顏色類</h2><divclass="p-2mb-2bg-primarytext-white">“五位一體”總體布局<small>——————.bg-primary</small></div><divclass="p-2mb-2bg-successtext-white">經(jīng)濟(jì)建設(shè)<small>——————.bg-success</small></div><divclass="p-2mb-2bg-dangertext-white">政治建設(shè)<small>——————.bg-danger</small></div><divclass="p-2mb-2bg-warningtext-dark">文化建設(shè)<small>——————.bg-warning</small></div><divclass="p-2mb-2bg-infotext-white">社會(huì)建設(shè)<small>——————.bg-info</small></div><divclass="p-2mb-2bg-lighttext-dark">生態(tài)文明建設(shè)<small>——————.bg-light</small></div><divclass="p-2mb-2bg-darktext-white">經(jīng)濟(jì)建設(shè)是根本，政治建設(shè)是保障<small>——————.bg-dark</small></div><divclass="p-2mb-2bg-whitetext-dark">文化建設(shè)是靈魂，社會(huì)建設(shè)是條件<small>——————.bg-white</small></div><divclass="p-2mb-2bg-transparenttext-dark">生態(tài)文明建設(shè)是基礎(chǔ)<small>——————.bg-transparent</small></div>主體代碼

例5.83.背景顏色類-代碼實(shí)現(xiàn)5.2文本顏色類5.2.3背景顏色類4.背景顏色類實(shí)現(xiàn)效果5.2文本顏色類5.2.3背景顏色類本節(jié)主要通過案例練習(xí)將所學(xué)顏色類應(yīng)用于實(shí)踐，案例實(shí)現(xiàn)主要利用顏色類中的文本顏色類、背景顏色類、鏈接顏色類等。1.頁面結(jié)構(gòu)分析簡(jiǎn)圖本案例是一個(gè)關(guān)于紅色故事的學(xué)習(xí)菜單，該頁面將網(wǎng)格布局與顏色類相結(jié)合，使頁面分為1個(gè)行容器、6個(gè)列元素以及一個(gè)頁面標(biāo)題。5.2.4案例練習(xí)——學(xué)習(xí)菜單5.2文本顏色類在頁面中依次運(yùn)用Bootstrap4定義的文本類，具體實(shí)現(xiàn)代碼如下。<h2>紅色故事學(xué)習(xí)菜單</h2><divclass="row"><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">首頁</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">動(dòng)態(tài)</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">精神介紹</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">紅色故事</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">真人事跡</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">學(xué)習(xí)心得</a></div></div>主體代碼

例5.82.代碼實(shí)現(xiàn)5.2文本顏色類5.2.4案例練習(xí)——學(xué)習(xí)菜單5.2文本顏色類3.案例講解5.2.4案例練習(xí)——學(xué)習(xí)菜單在上述代碼中，首先添加頁面標(biāo)題，明確頁面主題。接下來主要是菜單內(nèi)容，菜單內(nèi)包含一個(gè)寬度自適應(yīng)的行元素，行元素內(nèi)設(shè)置6個(gè)寬度相等的列元素，等分化的網(wǎng)格布局使菜單排版顯得更加美觀。隨后在列元素中嵌入<a>標(biāo)簽，達(dá)到菜單懸浮變色的頁面效果。最后再為列元素應(yīng)用.bg-danger類實(shí)現(xiàn)紅色背景，應(yīng)用.font-weight-bold類實(shí)現(xiàn)文字加粗，并為超鏈接應(yīng)用.text-warning類實(shí)現(xiàn)其文字懸浮變色的效果。5.3邊框類邊框設(shè)置邊框顏色圓角邊框5.3邊框類

Bootstrap4定義了一系列關(guān)于邊框的樣式類，用于實(shí)現(xiàn)快速添加、刪除邊框或指定添加、刪除元素單側(cè)邊框。邊框工具類可實(shí)現(xiàn)快速設(shè)置元素的邊框、邊框顏色樣式、邊框形狀等，非常適用于圖像、按鈕或任何其他元素。

為元素添加邊框可設(shè)置元素的類名為“border”，即通過基礎(chǔ)類.border為元素添加默認(rèn)的4條邊框，該默認(rèn)邊框表現(xiàn)為淺灰色的細(xì)邊框。當(dāng)需要指定添加元素的某一側(cè)邊框時(shí)，可通過以下4種類進(jìn)行實(shí)現(xiàn)。5.3邊框類5.3.1邊框設(shè)置類名說明.border-top為元素添加上邊框.border-right為元素添加右邊框.border-left為元素添加左邊框.border-bottom為元素添加下邊框1.邊框添加在元素具有邊框的前提下，當(dāng)需要指定刪除元素的全部或某一側(cè)邊框時(shí)，可通過以下5種邊框樣式類實(shí)現(xiàn)。5.3邊框類5.3.1邊框設(shè)置類名說明.border-0刪除元素的所有邊框，前提是需要?jiǎng)h除的邊框已經(jīng)存在.border-top-0刪除元素的上邊框，前提是需要?jiǎng)h除的邊框已經(jīng)存在.border-right-0刪除元素的右邊框，前提是需要?jiǎng)h除的邊框已經(jīng)存在.border-left-0刪除元素的左邊框，前提是需要?jiǎng)h除的邊框已經(jīng)存在.border-bottom-0刪除元素的下邊框，前提是需要?jiǎng)h除的邊框已經(jīng)存在2.邊框刪除

邊框樣式類的語法格式如下所示。

<spanclass="border"></span>5.3邊框類5.3.1邊框設(shè)置3.邊框樣式類的語法格式4.邊框樣式類的應(yīng)用演示案例介紹：在頁面中設(shè)置4個(gè)塊元素A、B、C和D，依次為它們應(yīng)用邊框樣式類。為A元素添加4側(cè)邊框，為B元素添加左側(cè)、右側(cè)及下方的邊框，為C元素添加4側(cè)邊框并刪除上方邊框，為D元素添加4側(cè)邊框并刪除4側(cè)邊框。5.邊框樣式類的代碼實(shí)現(xiàn)<divid="A"class="border"></div><divid="B"class="border-rightborder-bottomborder-left"></div><divid="C"class="borderborder-top-0"></div><divid="D"class="border-0"></div>主體代碼

例5.10<style>div{width:100px;height:100px;float:left;margin-right:20px;background-color:whitesmoke;}</style>CSS代碼

例5.105.3邊框類5.3.1邊框設(shè)置5.3邊框類5.3.1邊框設(shè)置6.邊框樣式類的實(shí)現(xiàn)效果設(shè)置元素的邊框顏色，前提是要為元素應(yīng)用邊框基礎(chǔ)類.border或單邊基礎(chǔ)類，確保元素已存在邊框。1.邊框顏色類介紹設(shè)置邊框顏色可使用邊框主題顏色類來實(shí)現(xiàn)，邊框主題顏色類具體說明如表。5.3邊框類5.3.2邊框顏色類名說明.border-primary用于設(shè)計(jì)藍(lán)色邊框，表強(qiáng)調(diào)意義.border-secondary用于設(shè)計(jì)灰色邊框，表次要意義.border-success用于設(shè)計(jì)綠色邊框，表成功意義.border-danger用于設(shè)計(jì)紅色邊框，表危險(xiǎn)意義.border-warning用于設(shè)計(jì)橘黃色邊框，表警告意義.border-info用于設(shè)計(jì)淺藍(lán)色邊框，表信息意義.border-light用于設(shè)計(jì)白色邊框，表高亮意義.border-dark用于設(shè)計(jì)黑色邊框.border-white用于設(shè)計(jì)白色邊框邊框顏色類的語法格式如下所示。<spanclass="borderborder-primary"></span>5.3邊框類5.3.2邊框顏色2.邊框顏色類的語法格式3.邊框顏色類的應(yīng)用演示案例介紹：在頁面中設(shè)置9個(gè)塊元素，依次為它們應(yīng)用邊框基礎(chǔ)類.border以及上述9種邊框顏色類。4.邊框顏色類的代碼實(shí)現(xiàn)<divclass="borderborder-primary">primary</div><divclass="borderborder-secondary">secondary</div><divclass="borderborder-success">success</div><divclass="borderborder-danger">danger</div><divclass="borderborder-warning">warning</div><divclass="borderborder-info">info</div><divclass="borderborder-light">light</div><divclass="borderborder-dark">dark</div><divclass="borderborder-white">white</div>主體代碼

例5.11<style>div{width:100px;height:100px;float:left;margin-right:20px;margin-bottom:20px;/*設(shè)置背景顏色，突出邊框顏色*/background-color:whitesmoke;text-align:center;line-height:100px;}</style>CSS代碼

例5.115.3邊框類5.3.2邊框顏色5.3邊框類5.邊框顏色類的實(shí)現(xiàn)效果5.3.2邊框顏色在Bootstrap4中為元素設(shè)置圓角邊框，同樣需要為元素應(yīng)用邊框基礎(chǔ)類.border或單邊基礎(chǔ)類，確保元素已存在邊框。設(shè)置元素的4個(gè)角均為圓角邊框可使用.rounded類實(shí)現(xiàn)。當(dāng)需要指定元素某一側(cè)邊框樣式為圓角，設(shè)置元素邊框形狀為正圓形或膠囊形，取消元素的圓角邊框，設(shè)置元素的圓角大小時(shí)，可通過以下幾種邊框類實(shí)現(xiàn)，具體說明如下表所示。5.3邊框類5.3.3圓角邊框5.3邊框類類名說明.rounded設(shè)置元素四角為圓角，前提是需要設(shè)置的邊框已經(jīng)存在.rounded-top設(shè)置元素左上角和右上角為圓角邊框，前提同上.rounded-right設(shè)置元素右上角和右下角為圓角邊框，前提同上.rounded-left設(shè)置元素左上角和左下角為圓角邊框，前提同上.rounded-bottom設(shè)置元素左下角和右下角為圓角邊框，前提同上.rounded-circle設(shè)置元素邊框?yàn)檎龍A形，前提同上.rounded-pill設(shè)置元素邊框?yàn)槟z囊形，前提同上.rounded-0取消元素的所有圓角邊框，即設(shè)置元素四角為直角，前提同上.rounded-sm設(shè)置元素四角邊框?yàn)樾A角，前提同上.rounded-lg設(shè)置元素四角邊框?yàn)榇髨A角，前提同上1.圓角邊框類的具體說明。5.3.3圓角邊框

圓角邊框類的語法格式如下所示。

<spanclass="borderrounded"></span>5.3邊框類2.圓角邊框類的語法格式3.圓角邊框類的應(yīng)用演示案例介紹：在頁面中設(shè)置10個(gè)塊元素，依次為它們應(yīng)用邊框基礎(chǔ)類.border，以及上述10種圓角邊框類。5.3.3圓角邊框4.圓角邊框類的代碼實(shí)現(xiàn)<divclass="borderborder-darkrounded"></div><divclass="borderborder-darkrounded-top"></div><divclass="borderborder-darkrounded-left"></div><divclass="borderborder-darkrounded-right"></div><divclass="borderborder-darkrounded-bottom"></div><divclass="borderborder-darkrounded-0"></div><divclass="borderborder-darkrounded-circle"></div><divclass="borderborder-darkrounded-pill"style="width:200px;height:100px"></div><divclass="borderborder-darkrounded-lg"></div><divclass="borderborder-darkrounded-sm"></div>主體代碼

例5.12<style>div{width:75px;height:75px;float:left;margin-right:20px;margin-bottom:10px;/*設(shè)置背景顏色，突出邊框形狀*/background-color:rgb(108,117,125);}</style>CSS代碼

例5.125.3邊框類5.3.3圓角邊框5.圓角邊框類的實(shí)現(xiàn)效果5.3邊框類5.3.3圓角邊框5.4邊距類邊距方向類邊距距離類負(fù)邊距類1.邊距介紹5.4邊距類元素之間的間距可通過margin或padding屬性來實(shí)現(xiàn)，margin影響本元素與外界相鄰元素之間的距離，即外邊距；padding元素邊框與元素內(nèi)容之間的空間，即內(nèi)邊距。Bootstrap4中定義了許多關(guān)于邊距的類，應(yīng)用邊距類可快速、便捷地設(shè)計(jì)網(wǎng)頁外觀，呈現(xiàn)出協(xié)調(diào)、美觀的頁面布局。2.Bootstrap中的邊距基礎(chǔ)類介紹5.4邊距類前端開發(fā)人員通常使用CSS的margin屬性和padding屬性調(diào)節(jié)元素邊距。在Bootstrap4中提供了簡(jiǎn)寫的基礎(chǔ)類名，基礎(chǔ)類分別是“m”表示margin、“p”表示padding。3.邊距方向類類名說明.{m|p}t用于設(shè)置元素的margin-top（上方外邊距）或padding-top（上方內(nèi)邊距）.{m|p}b用于設(shè)置元素的margin-bottom（下方外邊距）或padding-bottom（下方內(nèi)邊距）.{m|p}l用于設(shè)置元素的margin-left（左側(cè)外邊距）或padding-left（左側(cè)內(nèi)邊距）.{m|p}r用于設(shè)置元素的margin-right（右側(cè)外邊距）或padding-right（右側(cè)內(nèi)邊距）.{m|p}x用于設(shè)置元素左右兩側(cè)的外邊距或左右兩側(cè)的內(nèi)邊距（x代表水平方向）.{m|p}y用于設(shè)置元素上下兩側(cè)的外邊距或上下兩側(cè)的內(nèi)邊距（y代表垂直方向）.{m|p}用于設(shè)置元素上下左右四側(cè)的外邊距或內(nèi)邊距邊距基礎(chǔ)類不可單獨(dú)使用，必須與邊距的距離值結(jié)合應(yīng)用；邊距方向類也不可單獨(dú)使用，必須與邊距基礎(chǔ)類以及距離值結(jié)合應(yīng)用。下面介紹邊距距離類。5.4邊距類4.邊距距離類類名說明.*-0用于設(shè)置元素的margin或padding距離為0rem，（*代表{m|p}或{m|p}方向）.*-1用于設(shè)置元素的margin或padding距離為0.25rem.*-2用于設(shè)置元素的margin或padding距離為0.5rem.*-3用于設(shè)置元素的margin或padding距離為1rem.*-4用于設(shè)置元素的margin或padding距離為1.5rem.*-5用于設(shè)置元素的margin或padding距離為3rem*-auto用于為固定寬度的塊級(jí)元素實(shí)現(xiàn)水平居中邊距基礎(chǔ)類主要用于控制元素的邊距偏移距離，下面介紹負(fù)邊距類。5.4邊距類5.負(fù)邊距類類名說明.m{方向|空白}-n1用于設(shè)置元素的margin為-0.25rem.m{方向|空白}-n2用于設(shè)置元素的margin為-0.5rem.m{方向|空白}-n3用于設(shè)置元素的margin為-1rem.m{方向|空白}-n3用于設(shè)置元素的margin為-1.5rem.m{方向|空白}-n5用于設(shè)置元素的margin為-3remCSS中的負(fù)邊距(NegativeMargin)是布局中一個(gè)常用技巧，Bootstrap也定義了5個(gè)負(fù)邊距類用于實(shí)現(xiàn)負(fù)的margin樣式。5.4邊距類需要注意，在CSS中padding屬性值是不允許為負(fù)值的，因此Bootstrap并未對(duì)padding的負(fù)邊距類進(jìn)行設(shè)置。邊距類的語法格式如下所示。<divclass="m-4">文本內(nèi)容</div><divclass="mx-auto">元素水平居中</div>6.邊距類的語法格式7.邊距類的應(yīng)用演示案例介紹：在頁面中設(shè)置6個(gè)塊元素，其中前兩個(gè)塊元素是未應(yīng)用邊距類的正常塊元素，主要發(fā)揮其對(duì)照組的作用，而余下4個(gè)塊元素依次應(yīng)用上述的基礎(chǔ)邊距類。5.4邊距類8.邊距類的代碼實(shí)現(xiàn)<h2>邊距類</h2><divclass="borderborder-primary">職業(yè)道德精神---(正常盒子)</div><divclass="borderborder-primary">忠于職守---(正常盒子)</div><!--設(shè)置本元素的上方外邊距為2級(jí)，即0.5rem--><divclass="borderborder-dangermt-2">樂于奉獻(xiàn)---(mt-2)</div><!--設(shè)置本元素的上方內(nèi)邊距為4級(jí)，即1.5rem--><divid="pt"class="borderborder-dangermt-2pt-4">尊職敬業(yè)---(mt-2、pt-2)</div><!--設(shè)置本元素水平居中--><divclass="borderborder-dangermt-2mx-auto">求真務(wù)實(shí)---(mx-auto)</div><!--設(shè)置本元素的左側(cè)負(fù)內(nèi)外距為3級(jí)，即-1rem--><divclass="borderborder-dangerml-n3mt-2">優(yōu)質(zhì)服務(wù)---(ml-n1、mt-2)</div>主體代碼

例5.13<style>/*為塊元素設(shè)置固定寬高*/div{width:300px;height:60px;}/*設(shè)置本元素，在寬度和高度之外繪制元素的內(nèi)邊距和邊框*/#pt{box-sizing:content-box;}</style>CSS代碼

例5.135.4邊距類9.基礎(chǔ)邊距類的實(shí)現(xiàn)效果5.4邊距類邊距類與文本類相似，同樣可與Bootstrap中的網(wǎng)格系統(tǒng)結(jié)合，根據(jù)響應(yīng)斷點(diǎn)定義的不同顯示不同的邊距值。響應(yīng)式邊距類的語法格式如下所示。<divclass="{m|p}{t|r|b|l|x|y}-{0|1|2|3|4|5}">文本內(nèi)容</div><divclass="py-lg-3py-sm-2py-1">文本內(nèi)容</div>9.響應(yīng)式邊距類5.4邊距類5.5display屬性顯示或隱藏元素響應(yīng)式地顯示或隱藏元素1.顯示或隱藏元素的display工具類5.5display屬性顯示或隱藏元素的本質(zhì)是讓一個(gè)元素在頁面中隱藏或顯示出來，在CSS中主要通過display屬性、visibility可見性、overflow溢出等方法來實(shí)現(xiàn)。本節(jié)內(nèi)容主要介紹Bootstrap4中的display工具類是如何控制元素的顯示與隱藏的。Bootstrap4根據(jù)display屬性的所有可能取值設(shè)置一個(gè)取值子集，最終實(shí)現(xiàn)了display工具類。5.5.1顯示或隱藏元素2.display工具類的代碼格式5.5display屬性.d-{value}下面將介紹Bootstrap4中display工具類的value取值表。5.5.1顯示或隱藏元素3.display工具類的value取值5.5display屬性名稱說明none隱藏元素inline顯示為內(nèi)聯(lián)元素，元素前后沒有換行inline-block顯示為行內(nèi)塊元素block顯示為塊元素，元素前后帶有換行符table將元素顯示為塊級(jí)表格，元素前后帶有換行符table-cell元素將作為表格的一個(gè)單元格顯示（類似于<td>和<th>）table-row元素將作為表格的一個(gè)行元素顯示（類似于<tr>）flex將元素作為彈性伸縮盒子顯示inline-flex將元素作為內(nèi)聯(lián)塊級(jí)彈性收縮盒子顯示5.5.1顯示或隱藏元素<divclass="d-inline">d-inline</div>5.display類的應(yīng)用演示案例介紹：在頁面中為元素display工具類實(shí)現(xiàn)內(nèi)聯(lián)元素和塊級(jí)元素的轉(zhuǎn)換。4.display類的語法格式5.5display屬性5.5.1顯示或隱藏元素<h2>內(nèi)聯(lián)元素和塊級(jí)元素的轉(zhuǎn)換</h2><p>將div塊元素顯示為內(nèi)聯(lián)元素（使兩個(gè)塊元素在一行排列）</p><divclass="d-inlinebg-infotext-white">div元素應(yīng)用d-inline類</div><divclass="d-inlineml-5bg-infotext-white">div元素應(yīng)用d-inline類</div><p>將span內(nèi)聯(lián)元素顯示為塊級(jí)元素（使一個(gè)span元素獨(dú)占一行）</p><spanclass="d-blockbg-dangertext-white">span元素應(yīng)用d-block類</span><spanclass="d-blockbg-primarytext-white">span元素應(yīng)用d-block類</span>主體代碼

例5.145.5display屬性6.display工具類的代碼實(shí)現(xiàn)5.5.1顯示或隱藏元素5.5.1顯示或隱藏元素5.5display屬性7.display工具類的實(shí)現(xiàn)效果1.響應(yīng)式地顯示或隱藏元素5.5display屬性display工具類支持頁面的響應(yīng)式設(shè)計(jì)，可根據(jù)不同設(shè)備類型響應(yīng)式地顯示或隱藏元素，針對(duì)設(shè)備類型顯示與隱藏不同的元素，即為同一個(gè)頁面設(shè)計(jì)不同顯示版本。2.在Bootstrap4中display工具類的響應(yīng)式代碼格式如下所示。.d-{sm|md|lg|xl}-{value}注意：當(dāng)display工具類名稱中間未設(shè)置設(shè)備類型（即sm、md、lg、xl等）時(shí)，當(dāng)前元素的display設(shè)置可影響所有斷點(diǎn)（即xs到xl）。5.5.2響應(yīng)式地顯示或隱藏元素3.響應(yīng)式顯示或隱藏類的應(yīng)用技巧5.5display屬性（1）當(dāng)需要隱藏某個(gè)頁面元素，只需使用.d-none類或.d-{sm,md,lg,xl}-none類即可。（2）當(dāng)需要在給定的屏幕尺寸范圍內(nèi)顯示某個(gè)頁面元素時(shí)，可通過組合使用.d-*-none類和.d-*-*類實(shí)現(xiàn)。例如：.d-none、.d-md-block以及.d-xl-none類的組合效果，在中型設(shè)備（md）和大型設(shè)備（g）的屏幕上顯示指定的頁面元素，其余設(shè)備上全部隱藏該頁面元素。5.5.2響應(yīng)式地顯示或隱藏元素4.顯示類的組合應(yīng)用5.5display屬性在實(shí)際開發(fā)中，開發(fā)者可根據(jù)需要自由組合顯示或隱藏類，開發(fā)者常用的組合類如下表所示。5.5.2響應(yīng)式地顯示或隱藏元素類名說明.d-none在所有尺寸的屏幕上隱藏該元素.d-none和.d-sm-block只在超小型（xs）尺寸的屏幕上隱藏該元素.d-sm-none和.d-md-block只在小型（sm）尺寸的屏幕上隱藏該元素.d-md-none和.d-lg-block只在中型（md）尺寸的屏幕上隱藏該元素.d-lg-none和.d-xl-block只在大型（lg）尺寸的屏幕上隱藏該元素.d-xl-none只在超大型（xl）尺寸的屏幕上隱藏該元素5.隱藏類的組合應(yīng)用5.5display屬性5.5.2響應(yīng)式地顯示或隱藏元素類名說明.d-block在所有尺寸的屏幕上顯示該元素.d-block和.d-sm-none只在超小型（xs）尺寸的屏幕上顯示該元素.d-none、.d-sm-block和.d-md-none只在小型（sm）尺寸的屏幕上顯示該元素.d-none、.d-md-block和.d-lg-none只在中型（md）尺寸的屏幕上顯示該元素.d-none、.d-lg-block和.d-xl-none只在大型（lg）尺寸的屏幕上顯示該元素.d-none和.d-xl-block只在超大型（xl）尺寸的屏幕上顯示該元素6.響應(yīng)式display類的語法格式5.5display屬性響應(yīng)式display類的語法格式如下所示。<divclass="d-noned-lg-block">在小于lg尺寸的屏幕上隱藏</div>7.響應(yīng)式display類的應(yīng)用演示案例描述：在頁面中為元素應(yīng)用響應(yīng)式display工具類，實(shí)現(xiàn)元素的響應(yīng)式顯示或隱藏效果。5.5.2響應(yīng)式地顯示或隱藏元素8.響應(yīng)式display類的代碼實(shí)現(xiàn)<h2>響應(yīng)式地顯示或隱藏</h2><divclass="d-md-noned-lg-blockbg-successtext-white">僅在md設(shè)備上隱藏本元素（綠色背景）</div><divclass="d-noned-md-blockd-lg-blockbg-dangertext-white">在md、lg、xl設(shè)備上顯示本元素（淺紅色背景）</div>主體代碼

例5.155.5display屬性5.5.2響應(yīng)式地顯示或隱藏元素9.響應(yīng)式display類的案例講解在上述代碼中，將第1個(gè)div塊元素的類名設(shè)為“d-md-none”、“d-lg-block”，從而實(shí)現(xiàn)第1個(gè)塊元素在sm型設(shè)備上顯示，在md型設(shè)備上隱藏，在lg及xl型設(shè)備上顯示。將第2個(gè)div塊元素的類名設(shè)為“d-none”、“d-md-block”、“d-lg-block”，從而實(shí)現(xiàn)第2個(gè)塊元素在sm型設(shè)備上隱藏，在md型及以上的設(shè)備中隱藏。5.5display屬性5.5.2響應(yīng)式地顯示或隱藏元素5.5display屬性5.5.2響應(yīng)式地顯示或隱藏元素sm型設(shè)備上的顯示效果md型設(shè)備上的顯示效果10.響應(yīng)式display類的實(shí)現(xiàn)效果5.5display屬性5.5.2響應(yīng)式地顯示或隱藏元素lg型設(shè)備上的顯示效果10.響應(yīng)式display類的實(shí)現(xiàn)效果5.6浮動(dòng)類浮動(dòng)類介紹浮動(dòng)類語法5.6浮動(dòng)類使用Bootstrap4中提供的Float工具類可實(shí)現(xiàn)元素的快速浮動(dòng)，F(xiàn)loat工具類支持根據(jù)網(wǎng)格斷點(diǎn)的不同實(shí)現(xiàn)響應(yīng)式浮動(dòng)，即根據(jù)當(dāng)前設(shè)備型號(hào)將元素浮動(dòng)到左側(cè)、右側(cè)或禁用浮動(dòng)。在Bootstrap4中實(shí)現(xiàn)元素的左右浮動(dòng)主要通過應(yīng)用.float-left類以及.float-right類來實(shí)現(xiàn)，禁用元素浮動(dòng)則通過.float-none類實(shí)現(xiàn)。5.6浮動(dòng)類

1.Float浮動(dòng)類介紹類名說明.float-left在所有設(shè)備類型上，元素均向左浮動(dòng).float-right在所有設(shè)備類型上，元素均向右浮動(dòng).float-none在所有設(shè)備類型上，元素均不浮動(dòng).float-{sm|md|lg|xl}-{left|right}在{sm|md|lg|xl}設(shè)備類型上，元素{左|右}浮動(dòng)。浮動(dòng)樣式支持響應(yīng)式設(shè)計(jì)，可根據(jù)不同的網(wǎng)格斷點(diǎn)來設(shè)置不同的浮動(dòng)樣式5.6浮動(dòng)類2.Float浮動(dòng)類語法格式（1）基本浮動(dòng)類的語法格式如下所示。<divclass="float-left">在所有設(shè)備類型上，元素均向左浮動(dòng)</div>（2）響應(yīng)式浮動(dòng)類的應(yīng)用語法格式如下所示。<divclass="float-sm-right">本元素在小型設(shè)備（sm）上向右浮動(dòng)</div>5.6浮動(dòng)類3.Float浮動(dòng)類應(yīng)用演示案例描述：在頁面中為元素應(yīng)用基本浮動(dòng)類，實(shí)現(xiàn)一個(gè)網(wǎng)頁導(dǎo)航菜單的設(shè)計(jì)。4.Float浮動(dòng)類代碼實(shí)現(xiàn)主體代碼

例5.16<divclass="headers"><ulclass="text-centerclrearfix"><!--以下五個(gè)列表項(xiàng)向左浮動(dòng)--><liclass="float-leftpl-1pl-md-2pl-lg-3">首頁</li><liclass="float-leftpl-1pl-md-2pl-lg-3">示例</li><liclass="float-leftpl-1pl-md-2pl-lg-3">圖標(biāo)庫</li><liclass="float-leftpl-1pl-md-2pl-lg-3">優(yōu)站精選</li><liclass="float-leftpl-1pl-md-2pl-lg-3">免費(fèi)模板</li><!--以下兩個(gè)列表項(xiàng)，向右浮動(dòng)--><liclass="float-rightpr-1pr-md-2pr-lg-3">官方精選</li><liclass="float-rightpr-1pr-md-2pr-lg-3">下載Bootstrap</li></ul></div>5.6浮動(dòng)類5.Float浮動(dòng)類實(shí)現(xiàn)效果需要注意，為子元素設(shè)置浮動(dòng)后，出于對(duì)網(wǎng)頁整體布局的考慮，需要清除浮動(dòng)影響。在CSS中主要通過clear:both實(shí)現(xiàn)浮動(dòng)清除，在Bootstrap4中將清除浮動(dòng)的設(shè)置包裝成一個(gè)具體的類，即.clearfix類。僅需在父元素中應(yīng)用.clearfix類，即可快速清除浮動(dòng)。5.7陰影類陰影類介紹陰影類語法5.7陰影類Bootstrap4中主要通過四個(gè)陰影類來設(shè)置元素的陰影樣式，Bootstrap4的陰影類可用于添加陰影或去除陰影。Bootstrap4陰影類的具體說明如下表所示。類名說明.shadow-none用于去除本元素的陰影.shadow-sm用于設(shè)置小陰影.shadow用于設(shè)置常規(guī)陰影.shadow-lg用于設(shè)置大陰影1.陰影類語法格式陰影類的語法格式如下所示。<divclass="shadow-none">無陰影</div>2.陰影類的應(yīng)用演示案例描述：在頁面中為元素應(yīng)用陰影類，依次實(shí)現(xiàn)上述4種陰影類。5.7陰影類3.陰影類的代碼實(shí)現(xiàn)5.7陰影類主體代碼

例5.17<h2>陰影類</h2><divclass="shadow-nonep-3mb-5bg-lightrounded">無陰影</div><divclass="shadow-smp-3mb-5bg-whiterounded">小陰影</div><divclass="shadowp-3mb-5bg-whiterounded">常規(guī)陰影</div><divclass="shadow-lgp-3mb-5bg-whiterounded">大陰影</div>4.陰影類的實(shí)現(xiàn)效果5.7陰影類5.8尺寸類相對(duì)于父元素的尺寸類相對(duì)于視口的尺寸類5.8尺寸類應(yīng)用Bootstrap4中的尺寸類，即寬度（Width）和高度（Height）的相關(guān)工具類，可輕松實(shí)現(xiàn)對(duì)頁面元素的高度和寬度的設(shè)定。在Bootstrap4中尺寸類分為兩種，一種是相對(duì)于父元素的寬度和高度進(jìn)行設(shè)置的尺寸類，主要使用百分比表示；另一種是相對(duì)于視口的寬度和高度進(jìn)行設(shè)置的尺寸類，主要使用vw（ViewportWidth，視口寬度）和vh（ViewportHeight，視口高度）來表示。Bootstrap4中相對(duì)于父元素的尺寸類的具體說明如下表所示。5.8尺寸類5.8.1相對(duì)于父元素的尺寸類類名說明.w-25設(shè)置本元素的寬度為父元素寬度的25%.w-50設(shè)置本元素的寬度為父元素寬度的50%.w-75設(shè)置本元素的寬度為父元素寬度的75%.w-100設(shè)置本元素的寬度為父元素寬度的100%.w-auto設(shè)置本元素寬度自適應(yīng).h-25設(shè)置本元素的高度為父元素高度的25%.h-50設(shè)置本元素的高度為父元素高度的50%.h-75設(shè)置本元素的高度為父元素高度的75%.h-100設(shè)置本元素的高度為父元素高度的100%.h-auto設(shè)置本元素高度自適應(yīng)1.相對(duì)于父元素的尺寸類語法格式相對(duì)于父元素的尺寸類的語法格式如下所示。<divclass="w-25p-3"style="background-color:#eee;">25%的寬度</div>2.相對(duì)于父元素的尺寸類的應(yīng)用演示案例描述：在頁面中為元素應(yīng)用相對(duì)于父元素的尺寸類，依次實(shí)現(xiàn)上述10種尺寸類。5.8尺寸類5.8.1相對(duì)于父元素的尺寸類3.相對(duì)于父元素的尺寸類的代碼實(shí)現(xiàn)主體代碼

例5.18<h2>相對(duì)于父元素的尺寸類-寬度</h2><divclass="bg-secondarybordertext-whitemb-4font-weight-bold"><divclass="w-25p-3bg-infoborder">w-25</div><divclass="w-50p-3bg-infoborder">w-50</div><divclass="w-75p-3bg-infoborder">w-75</div><divclass="w-100p-3bg-infoborder">w-100</div><divclass="w-autop-3bg-infoboborderder-top">w-auto</div></div><h2>相對(duì)于父元素的尺寸類-高度</h2><divclass="sizes_heightbg-secondarybordertext-whitefont-weight-bold"><divclass="h-25d-inline-blockbg-infoborder">h-25</div><divclass="h-50d-inline-blockbg-infoborder">h-50</div><divclass="h-75d-inline-blockbg-infoborder">h-75</div><divclass="h-100d-inline-blockbg-infoborder">h-100</div><divclass="h-autod-inline-blockbg-infoboborderder-top">h-auto</div></div>5.8尺寸類5.8.1相對(duì)于父元素的尺寸類4.相對(duì)于父元素的尺寸類的實(shí)現(xiàn)效果5.8尺寸類5.8.1相對(duì)于父元素的尺寸類5.8尺寸類5.8.1相對(duì)于父元素的尺寸類除上述10種類以外，還可使用.mw-100和.mh-100這兩個(gè)類。.mw-100類主要用于設(shè)置元素的的最大寬度，.mh-100類主要用于設(shè)置元素的的最大高度。使用上述兩種類可避免出現(xiàn)因子元素尺寸過大撐破父元素的情況，從而設(shè)計(jì)出美觀、合理的頁面。vw、vh是基于視圖窗口的單位，是CSS3新增的一部分。不論視圖窗口如何改變，視口的寬度始終保持100vw，高度始終保持100vh。也就是將視口平均分為100份，1vw為一份，1vw始終等于視口寬度的1%，1vh始終等于視口高度的1%。5.8尺寸類5.8.2相對(duì)于視口的尺寸類類名說明.min-vw-100設(shè)置本元素的最小寬度等于視口寬度.min-vh-100設(shè)置本元素的最小高度等于視口高度.vw-100設(shè)置本元素的寬度等于視口寬度.vw-100設(shè)置本元素的高度等于視口高度需要注意，設(shè)置元素類名為“min-vw-100”，當(dāng)元素的寬度大于視口寬度時(shí)，此元素將按照其自身的寬度大小來顯示，且頁面會(huì)出現(xiàn)橫向的滾動(dòng)條；當(dāng)元素的寬度小于視口寬度時(shí)，此元素將按照視口的寬度大小來顯示，并始終與視口寬度保持一致。設(shè)置元素類名為“min-vh-100”，當(dāng)元素的高度大于視口高度時(shí)，此元素將按照其自身的高度大小來顯示，且頁面會(huì)出現(xiàn)縱向的滾動(dòng)條；當(dāng)元素的高度小于視口高度時(shí)，此元素將按照視口的高度大小來顯示，并始終與視口高度保持一致。5.8尺寸類5.8.2相對(duì)于視口的尺寸類1.相對(duì)于視口的尺寸類語法格式相對(duì)于視口的尺寸類的語法格式如下所示。<divclass="min-vw-100">Min-width100vw</div>2.相對(duì)于視口的尺寸類的應(yīng)用演示案例描述：在頁面中為元素應(yīng)用相對(duì)于視口的尺寸類，設(shè)置第1個(gè)div元素的寬度為2000px，類名為“min-vw-100”；設(shè)置第2個(gè)div元素的寬度為500px，類名為“min-vw-100”；設(shè)置第3個(gè)div元素的寬度為2000px，類名為“vw-100”。5.8尺寸類5.8.2相對(duì)于視口的尺寸類3.相對(duì)于視口的尺寸類的代碼實(shí)現(xiàn)主體代碼

例5.19<h3class="text-dark">相對(duì)于視口的尺寸類-寬度對(duì)比</h3><divclass="min-vw-100mt-2bg-info"style="width:1000px;">元素本身寬度為1000px----(min-vw-100)</div><divclass="min-vw-100mt-2bg-info"style="width:200px;">元素本身寬度為200px----(min-vw-100)</div><divclass="vw-100mt-2bg-info"style="width:200px;">元素本身寬度為200px----(vw-100)-與視口保持一致</div>5.8尺寸類5.8.2相對(duì)于視口的尺寸類4.相對(duì)于視口的尺寸類的實(shí)現(xiàn)效果5.8尺寸類5.8.2相對(duì)于視口的尺寸類5.9溢出類溢出類介紹溢出類語法格式5.9溢出類當(dāng)一個(gè)盒子的內(nèi)容（子元素）超過盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出現(xiàn)象。在CSS中通常使用overflow屬性解決元素的內(nèi)容溢出，而在Bootstrap4中則定義了兩個(gè)溢出類來處理內(nèi)容溢出。溢出類具體說明如下表所示。類名說明.overflow-auto在固定寬高的元素上，如果內(nèi)容超出元素大小，將出現(xiàn)一個(gè)垂直滾動(dòng)條，移動(dòng)滾動(dòng)條可查看被隱藏的全部?jī)?nèi)容.overflow-hidden在固定寬高的元素上，如果內(nèi)容超出元素大小，溢出的部分將會(huì)被隱藏5.9溢出類1.溢出類語法格式溢出類的語法格式如下所示。<divclass="overflow-auto">文本內(nèi)容</div>2.溢出類應(yīng)用演示案例描述：在頁面中為元素應(yīng)用上述2種溢出類，對(duì)比兩種溢出類的運(yùn)行效果。3.溢出類代碼實(shí)現(xiàn)主體代碼

例5.20<h2class="text-center