<<乱子伦>>乱子精品,999久久久无码国产精品

面板--面板中嵌套列表組

在上一節(jié)，我們介紹了如何在面板中放置表格，現(xiàn)在我們來學(xué)習(xí)如何在面板中放置列表組，我們簡(jiǎn)單的來看一個(gè)示例：

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">
        <p>詳細(xì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動(dòng)畫、媒體、響應(yīng)Web設(shè)計(jì)、Web字體等主題下涵蓋的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表項(xiàng)</li>
            <li class="list-group-item">我是列表項(xiàng)</li>
            <li class="list-group-item">我是列表項(xiàng)</li>
        </ul>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>

運(yùn)行效果如下：

優(yōu)化代碼：

和嵌套表格一樣，如果你覺得這樣有間距不好看，你完全可以把列表組提取出來：

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">…</div>
    <ul class="list-group">
        <li class="list-group-item">我是列表項(xiàng)</li>
        <li class="list-group-item">我是列表項(xiàng)</li>
        <li class="list-group-item">我是列表項(xiàng)</li>
    </ul>
    <div class="panel-footer">作者：大漠</div>
</div>

運(yùn)行效果如下：

同樣的道理，Bootstrap將嵌套在面板中的列表組做了一定的樣式優(yōu)化。具體源碼可以查看bootstrap.css文件第5031行～第5053行。

任務(wù)

?不會(huì)了怎么辦

index.html
style.css

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>面板--面板中嵌套表格、列表組（二）</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <h3>面板中嵌套列表組（一）</h3> <div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body"> <p>詳細(xì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動(dòng)畫、媒體、響應(yīng)Web設(shè)計(jì)、Web字體等主題下涵蓋的所有CSS3新特性 </p> <ul class="list-group"> <li class="list-group-item">我是列表項(xiàng)</li> <li class="list-group-item">我是列表項(xiàng)</li> <li class="list-group-item">我是列表項(xiàng)</li> </ul> </div> <div class="panel-footer">作者：大漠</div> </div> <h3>面板中嵌套列表組（二）</h3> <div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body"> <p>詳細(xì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動(dòng)畫、媒體、響應(yīng)Web設(shè)計(jì)、Web字體等主題下涵蓋的所有CSS3新特性 </p> </div> <ul class="list-group"> <li class="list-group-item">我是列表項(xiàng)</li> <li class="list-group-item">我是列表項(xiàng)</li> <li class="list-group-item">我是列表項(xiàng)</li> </ul> <div class="panel-footer">作者：大漠</div> </div> <script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

body{ padding: 30px; }

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

7-30 面板--面板中嵌套列表組

面板--面板中嵌套列表組

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

7-30 面板--面板中嵌套列表組

熱搜

最近搜索清空

面板--面板中嵌套列表組

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～