1、廣告大塊屏幕(jumbotron)任務(wù)6.4應(yīng)用Bootstrap版式2、列表組(list-group)3、卡片(card)在許多網(wǎng)站的頂部常用大屏幕高亮顯示內(nèi)容的一部分，使用Bootstrap的Jumbotron類很容易做到。也以選擇Jumbotron-fluid類創(chuàng)建一個大屏幕，這是一個稍微不同的版本，占用父空間的全部空間，如果想要讓廣告大屏幕占滿當前顯示瀏覽器全屏、不帶有圓角、無背景色就使用這個Jumbotron-fluid類，是大屏幕的流動模式，并在里面添加一個.container或.container-fluid即可。兩個類的示例代碼如下，效果如圖6-24所示。6.4.1廣告大塊屏幕(jumbotron)<divclass="container"> <divclass="jumbotron"> <h1>JavaScript</h1> <pclass="lead">JavaScript是一種腳本語言,廣泛用于Web應(yīng)用開發(fā),為網(wǎng)頁添加各種動態(tài)功能。</p> <hr> <p>通常JavaScript腳本是通過嵌入在HTML中來實現(xiàn)自身的功能的。</p> <pclass="lead"> <ahref=""class="btnbtn-primarybtn-lg">了解更多</a> </p>

6.4.1廣告大塊屏幕(jumbotron)<divclass="container"> <divclass="Jumbotron-fluid"> …… </div></div>圖6-42Jumbotron和Jumbotron-fluidJumbotron有一個圓形的邊緣，而且文本還會縮進一點。如果你想讓屏幕上方空開一點距離，可以根據(jù)需要添加上外邊距，比如mt-4等。如果想要這個東西全寬，需要把它放在容器container外面，效果如圖6-43所示。圖6-43放在容器container外面6.4.1廣告大塊屏幕(jumbotron)jumbotron里邊的內(nèi)容放可以放在容器container（也可以使用container-fluid），其中的內(nèi)容就會對準網(wǎng)格，如圖6-44所示。圖6-44jumbotron的內(nèi)容放入container6.4.1廣告大塊屏幕(jumbotron)列表組可以很好的來設(shè)計列表和其他元素，如按鈕和鏈接。列表組父類容器通常是div或ul標記，用.list-group修飾父類。在父類容器中創(chuàng)建一個序列，可以使用列表項創(chuàng)建列表組項，也可以使用按鈕或錨標記。在樣式方面,列表組項使用.list-group-item類修飾項目,同時可以使用活動樣式.active或禁用樣式.disabled。注意，要使鏈接完全禁用,需要使用額外的JavaScript，禁用樣式對按鈕不起作用。使用<button>，也可以使用disabled屬性而不是.disabledclass，<a>不支持disabled屬性。使用<a>或<button>來創(chuàng)建具有hover、禁用、懸停和活動狀態(tài)的列表組，需要使用列表組項操作類.list-group-item-action。6.4.2列表組(list-group)<h2>ul列表項</h2> <ulclass="list-group"> <liclass="list-group-itemactive">Firstitem</li> <liclass="list-group-itemdisabled">Seconditem</li> <liclass="list-group-item">Thirditem</li> </ul> <h2>鏈接列表項</h2> <divclass="list-group"> <ahref="#"class="list-group-itemlist-group-item-action">Firstitem</a>下面看一個示例，效果如圖6-45所示 <ahref="#"class="list-group-itemlist-group-item-action">Seconditem</a> <ahref="#"class="list-group-itemlist-group-item-action">Thirditem</a> </div>圖6-45列表組可以使用情景式樣式來設(shè)計具有狀態(tài)背景和顏色的列表組，列表項目的顏色可以通過以下列來設(shè)置：.list-group-item-success,list-group-item-secondary,list-group-item-info,list-group-item-warning,.list-group-item-danger,list-group-item-dark和list-group-item-light。情景式class也可以使用.list-group-item-action樣式，注意，在上述示例中，不存在hover樣式指示器，事實上它是支持的，而且還支持e.active狀態(tài)指示--我們可以應(yīng)用它們在上下文情景列表組的項目上進行活動狀態(tài)選擇指示。6.4.2列表組(list-group)<h2>多種顏色列表項(使用超鏈接)</h2><divclass="list-group"> <ahref="#"class="list-group-itemlist-group-item-primarylist-group-item-action">主要列表項</a> <ahref="#"class="list-group-itemlist-group-item-secondary">次要列表項</a>……</div>下面看一個示例，效果如圖6-46所示

圖6-46使用列表組的情景式樣式計背景顏色<ulclass="list-group"> <liclass="list-group-itemd-flexjustify-content-between">

列表第1項

<spanclass="badgebadge-primarybadge-pill">14</span> </li> <liclass="list-group-itemd-flexjustify-content-between">

列表第2項

<spanclass="badgebadge-primarybadge-pill">2</span>在通用樣式定義的幫助下，可向任何列表項目添加引入badge微章.badge以顯示未讀計數(shù)、活動狀態(tài)等，效果如圖6-47所示。 </li> <liclass="list-group-itemd-flexjustify-content-between">

列表第3項

<spanclass="badgebadge-primarybadge-pill">1</span> </li></ul>圖6-47列表項目引入badge微章<divclass="list-group"> <ahref=""class="list-group-itemlist-group-item-action"> <divclass="d-flexw-100justify-content-between"> <h5class="mb-1">標題</h5> <small>一天前</small> </div> <pclass="mb-1">一些文字描述</p> <small>子內(nèi)容子內(nèi)容子內(nèi)容</small> </a></div>在flexbox通用樣式定義的支持下，列表組中幾乎可以添加任意的HTML內(nèi)容，包括標簽、內(nèi)容、鏈接，如圖6-48所示圖6-47列表項目引入badge微章<h4>使用.list-group-flush實現(xiàn)移除部分邊框以及圓角</h4><ulclass="list-grouplist-group-flush"> <liclass="list-group-item">Firstitem</li> <liclass="list-group-item">Seconditem</li> <liclass="list-group-item">Thirditem</li></ul>加入.list-group-flush選擇器，可以實現(xiàn)·移除部分邊框以及圓角，從而產(chǎn)生邊緣貼齊的列表組，這在諸如Card卡片等容器中很實用，示例如下，效果如圖6-49所示圖6-49使用.list-group-flush實現(xiàn)移除部分邊框以及圓角使用列表組的JavaScript插件,單獨或編譯bootstrap.js文件來擴展列表組，以提供可選擇的內(nèi)容列表，如下例，單擊不同列表項顯示不同的內(nèi)容，效果如圖6-50所示。在代碼中加入jquery.js和bootstrap.js。6.4.2列表組(list-group)<divclass="row"> <divclass="col-3"> <divclass="list-group"> <ahref="#home"class="list-group-itemlist-group-item-actionactive"data-toggle="list">Home</a> <ahref="#profile"class="list-group-itemlist-group-item-action"data-toggle="list">Profile</a> <ahref="#messages"class="list-group-itemlist-group-item-action"data-toggle="list">Messages</a> </div> </div> <divclass="col-9"> <divclass="tab-content"> <divid="home"class="tab-paneactive"> <h3>首頁</h3> <p>home首頁對應(yīng)的內(nèi)容</p> </div> <divid="profile"class="tab-panefade"> <h3>概述簡介</h3> <p>Profile對應(yīng)的內(nèi)容</p> </div> <divid="message"class="tab-pane"> <h3>消息</h3> <p>Message對應(yīng)的內(nèi)容</p></div> </div> </div></div>圖6-50列表組交互效果卡片是Bootstrap4中的一個新設(shè)計元素，它可以幫助布置你的內(nèi)容裝進看起來很棒的卡片狀容器里，并且有一個小輪廓圍繞著這些內(nèi)容。可以通過Bootstrap4的.card與.card-body類來創(chuàng)建一個簡單的卡片，.card-body可以建立卡片的內(nèi)容主體?；蛘吒鶕?jù)需要添加.card-header類創(chuàng)建卡片的頭部樣式、.card-footer類創(chuàng)建卡片的底部樣式，示例如下，效果如所示。6.4.3卡片(card)<divclass="card"> <divclass="card-header">頭部</div> <divclass="card-body">內(nèi)容</div> <divclass="card-footer">底部</div></div>圖6-51擁有頭部主體底部的卡片在卡片的內(nèi)部可以使用一系列的類來設(shè)置表示標題、副標題、文本、圖像等的樣式。通過card-text設(shè)置文本的樣式，比如text-right、text-center、text-left等。圖片需要和card-body同一個級別，在img標簽可以通過card-img設(shè)置圖片樣式，card-img修飾的圖片4個角都是圓角。圖片的位置放在card上面就使用card-img-top，設(shè)置圖片的上面兩個角是圓角，放在card下面就使用card-img-bottom，設(shè)置圖片的下面兩個角是圓角。所以.card-img-top設(shè)置圖片上面圓角，.card-img-bottom設(shè)置圖片下面是圓角。圖片覆蓋，就是文字在圖片的上面，使用類名card-img-overlay，這個類放在img下面的兄弟div上。通過.card-title和<h*>組合，可以添加卡片標題，通過.card-subtitle和<h*>結(jié)合，可以添加副標題，同親將.card-link與<a>結(jié)合使用，可以方便添加平行的鏈接。如果.card-title和.card-subtitle組合放在.card-body中,則可對齊主、副標題，效果如所示：6.4.3卡片(card)<divclass="card"> <divclass="card-body"> <h5class="card-title">標題</h5> <h6class="card-subtitlemb-2text-muted">子標題</h6> <pclass="card-text">描述描述描述描述描述。</p> <ahref=""class="card-link">立即下載</a> <ahref=""class="card-link">了解更多</a> </div></div>6.4.3卡片(card)圖6-52帶有主副標題和超鏈接的卡片<divclass="card"style="width:322px;"> <imgclass="card-img-top"src="../img/lanhuasmall01.jpg"> <divclass="card-body"> <h5class="card-title">蘭花</h5> <h6class="card-subtitlemb-2text-muted">紫靈</h6> <pclass="card-text">為蘭花中的傳統(tǒng)名品，葉子幽綠，花瓣清雅，獨有的花色，給人一種不一樣的視覺享受。</p> <ahref=""class="card-link">立即下載</a> <ahref=""class="card-link">了解更多</a> </div></div>我們可以給<img>添加card-img、.card-img-top或.card-img-bottom來設(shè)置圖片卡片。下面圖6-53是使用card-img-top類的效果，代碼如下。圖6-53使用card-img-top類<divclass="card"style="width:322px;"> <imgclass="card-img-top"src="../img/lanhuasmall01.jpg"> <divclass="card-img-overlay"> <h5class="card-titletext-light">蘭花</h5> <h6class="card-subtitlemb-2text-light">紫靈</h6> <pclass="card-texttext-light">為蘭花中的傳統(tǒng)名品，葉子幽綠，花瓣清雅，獨有的花色，給人一種不一樣的視覺享受。</p> <!--<ahref=""class="card-link">立即下載</a>--> <!--<ahref=""class="card-link">了解更多</a>-->如果圖片要設(shè)置為背景，可以使用.card-img-overlay類，如<divclass="list-grouplist-group-flush"> <aclass="list-group-item"href="#">立即下載</a> <aclass="list-group-item"href="#">了解更多</a> </div> </div></div>圖6-54使用card-img-overlay類同時可以設(shè)置卡片.card的背景顏色，利用.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark，.bg-light等類。因為這些卡片設(shè)計成有輪廓的，還可以使用邊框類比如border-primary、border-secondary等改變卡片邊框的顏色。也可以使用text-COLOR類比如.text-primary等改變文本的顏色，如圖6-55所示。改變卡片的背景色、文本顏色、邊框顏色，還有其他的一些效果，代碼大家可以參考下面的示例自行完成。6.4.3卡片(card)<divclass="cardborder-successmb-3"style="max-width:18rem;"><divclass="card-headerbg-transparentborder-success">Header</div><divclass="card-bodytext-success"><h5class="card-title">Successcardtitle</h5><pclass="card-text">Somequickexampletexttobuildonthecardtitleandmakeupthebulkofthecard'scontent.</p>圖6-55改變卡片邊框、字體、背景顏色6.4.3卡片(card)</div><divclass="card-footerbg-transparentborder-success">Footer</div></div><divclass="list-grouplist-group-flush"><aclass="list-group-item"href="#">立即下載</a><aclass="list-group-item"href="#">了解更多</a></div>可以建立一個包含內(nèi)容的列表組的卡片，使用列表組中的.list-group-flush選擇器。我們將上邊示例中的超鏈接改為如下形式，效果如圖6-56所示。圖6-56列表組卡片<divclass="card"style="width:18rem;"> <ulclass="list-grouplist-group-flush"> <liclass="list-group-item">Anitem</li> <liclass="list-group-item">Aseconditem</li> <liclass="list-group-item">Athirditem</li> </ul></div>下面是卡片結(jié)合去掉外框線的列表組一起使用的示例，效果如下<divclass="card"style="width:18rem;"> <divclass="card-header"> Featured </div> <ulclass="list-grouplist-group-flush"> <liclass="list-group-item">Anitem</li> <liclass="list-group-item">Aseconditem</li>6.4.3卡片(card) <liclass="list-group-item">Athirditem</li> </ul></div><divclass="card"style="width:18rem;"> <ulclass="list-grouplist-group-flush"> <liclass="list-group-item">Anitem</li> <liclass="list-group-item">Aseconditem</li> <liclass="list-group-item">Athirditem</li>6.4.3卡片(card) </ul> <divclass="card-footer"> Cardfooter </div></div><divclass="card"style="width:18rem;"> <imgsrc="../img/lanhuasmall01.jpg"class="card-img-top"> <divclass="card-body"> <h5class="card-title">蘭花</h5> <h6class="card-subtitlemb-2">紫靈</h6> <pclass="card-text">為蘭花中的傳統(tǒng)名品，葉子幽綠，花瓣清雅，獨有的花色，給人一種不一樣的視覺享受。</p> </div> <ulclass="list-grouplist-group-flush"> <liclass="list-group-item">項目1</li>6.4.3卡片(card) <liclass="list-group-item">項目2</li>

<liclass="list-group-item">項目3</li> </ul> <divclass="card-body"> <ahref="#"class="card-link">了解更多</a> <ahref="#"class="card-link">立即下載</a> </div></div><divclass="">用卡片和導航組件實現(xiàn)導覽</div><divclass="cardtext-center"> <divclass="card-header"> <ulclass="navnav-tabscard-header-tabs"> <liclass="nav-item"> <aclass="nav-linkactive"data-toggle="tab"href="#ziling">紫靈</a> </li> <liclass="nav-item">卡片沒有特定的width，除非是另有聲明，否則它們的寬度將是100％?？梢愿鶕?jù)需求自定義CSS、網(wǎng)格系統(tǒng)或工具來進行調(diào)整。使用Bootstrap導航元件向卡片的標題（或塊）添加一些導覽。 <aclass="nav-link"data-toggle="tab"href="#yumeiren">虞美人</a> </li><liclass="nav-item"> <aclass="nav-link"data-toggle="tab"href="#jymt">金玉滿堂</a> </li> </ul> </div> <divclass="tab-content"> <divclass="card-bodytab-paneactive"id="ziling"> <h5class="card-title">紫靈</h5> <pclass="card-text">為蘭花中的傳統(tǒng)名品，葉子幽綠，花瓣清雅，獨有的花色，給人一種不一樣的視覺享受。</p> <ahref="#"class="btnbtn-primary">了解更多</a> </div> <divclass="card-bodytab-pane"id="yumeiren"> <h5class="card-title">虞美人</h5> <pclass="card-text">虞美人......</p> <ahref="#"class="btnbtn-primary">了解更多</a> </div> <divclass="card-bodytab-panefade"id="jymt"> <h5class="card-title">金玉滿堂</h5> <pclass="card-text">金玉滿堂......</p> <ahref="#"class="btnbtn-primary">了解更多</a> </div> </div></div>效果圖如下：整個卡片占四個柵格，卡片寬度是百分之百，就是占據(jù)四個柵格的100%。默認卡片是有邊框的，設(shè)置背景顏色為bg-light。但是效果圖中是無邊框并且加了陰影，所以我們設(shè)置的類如下<divclass="cardw-100border-0shadowbg-light"style="height:350px;">。整個卡片分兩部分，一部分是卡片的頭。另外一部分是卡片主體。6.4.3卡片(card)圖6-57新聞動態(tài)效果圖頁面效果圖6-57我們使用卡片列表組和徽章來完成?？ㄆ^分為了三部分，標題部分，副標題部分和更多的鏈接部分,上邊有一個帶有顏色的邊框。標題使用h5標簽副標題使用small標簽，加上文本的較淡的顏色text-muted。因為h5標簽是一個塊級標簽，所以標題和副標題不在一行上，我們可以設(shè)置h5標簽為d-inline-block?？梢詫⒏睒祟}small放在h5標簽內(nèi)，設(shè)置副標題ml-2，使它和主標題分開一點距離。更多這一部分超鏈接也設(shè)置為行級塊d-inline-block,使之與其他內(nèi)容在一行，字體變小一些，設(shè)置成14像素，顏色設(shè)置為text-dark-5,并且右對齊，需要將卡片頭部分設(shè)置為彈性盒子，然后設(shè)置更多的ml-auto。將卡片投的背景顏色設(shè)置為bg-write,并且設(shè)置頭部有上邊框border-top，顏色為警告色border-warning。代碼如下：6.4.3卡片(card)<ulclass="list-group"style="line-height:28px;font-size:15px;"> <liclass="list-group-itempy-1border-0text-truncate"> <aclass="text-darkcard-link"href="#"> <spanclass="badgebadge-warning">1</span>華為大數(shù)據(jù)報告

</a> </li>完整代碼如下。<divclass="containermt-4"> <divclass="row"> <divclass="col-12col-lg-4mb-2"> <divclass="cardw-100border-0shadowbg-light"style="height:300px;"> <divclass="card-headerd-flexbg-whiteborder-topborder-warningborder-bottom-0"> <h5class="