Bootstrap中的面板組件有什么用-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中的面板組件有什么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、甘肅網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、甘肅網(wǎng)絡(luò)營(yíng)銷(xiāo)、甘肅企業(yè)策劃、甘肅品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供甘肅建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

面板組件主要作用是用來(lái)處理一些其他組件無(wú)法完成的功能，在不同的版本中具有不同的源碼：

LESS：panels.less
SASS:_panels.scss

基礎(chǔ)面板非常簡(jiǎn)單，就是一個(gè)p容器中運(yùn)用了類(lèi).panel的樣式，產(chǎn)生一個(gè)具有邊框的文本顯示塊，由于panel不控制主題顏色，所以在.panel基礎(chǔ)上增加一個(gè)控制顏色的主題的類(lèi).panel-default,在里面添加一個(gè)p.panel-body來(lái)放置面板主體內(nèi)容

.panel主要對(duì)邊框、間距、圓角、左右一定的設(shè)置：

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}

基礎(chǔ)面板的運(yùn)用：

<h2>基礎(chǔ)面板</h2>
    <div class="panel panel-default">
        <div class="panel-body">這是一個(gè)基礎(chǔ)面板，帶默認(rèn)主題樣式風(fēng)格</div>
    </div>

Bootstrap中的面板組件有什么用

帶有頭和尾的面板

bootstrap為了豐富面板的功能，特意為面板增加面板頭部和面板尾部的效果，

.panel-heading:設(shè)置面板頭部樣式
.panel-footer:設(shè)置面板尾部樣式
.panel-headingh和.panel-footer僅是對(duì)間距和圓角等樣式進(jìn)行了設(shè)置

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

例子：

<h2>帶有頭和尾的面板</h2>
    <div class="panel panel-default">
        <div class="panel-heading">這里是面板頭部標(biāo)題</div>
        <div class="panel-body">這里是面板內(nèi)容部分這里是面板內(nèi)容部分這里是面板內(nèi)容部分這里是面板內(nèi)容部分這里是面板內(nèi)容部分這里是面板內(nèi)容部分這里是面板內(nèi)容部分</div>
        <div class="panel-footer">這里是面板尾部部分</div>
    </div>

Bootstrap中的面板組件有什么用

彩色面板

由于.panel樣式并沒(méi)有對(duì)主題顏色進(jìn)行樣式設(shè)置，bootstrap框架中的面板組件處理默認(rèn)的主題（.panel-default）樣式之外，還包括以下幾種主題樣式：

.panel-primary:重點(diǎn) 藍(lán)色
.panel-success:成功綠色
.panel-info:信息藍(lán)色（淺的）
.panel-warning:警告黃色
.panel-danger:危險(xiǎn) 紅色

這幾個(gè)樣式只是改變了面板的背景色、文本、和邊框色

使用方法很簡(jiǎn)單，只需在.panel的類(lèi)名基礎(chǔ)上追加需要的主題類(lèi)名

例子：

<h2>彩色面板</h2>
    <div class="panel panel-default">
        <div class="panel-heading">白頭吟</div>
        <div class="panel-body">皚如山上雪，皎若云間月。
            聞君有兩意，故來(lái)相決絕。
            今日斗酒會(huì)，明旦溝水頭。
            躞蹀御溝上，溝水東西流。
            凄凄復(fù)凄凄，嫁娶不須啼。
            愿得一人心，白首不相離。
            竹竿何裊裊，魚(yú)尾何簁簁！
            男兒重意氣，何用錢(qián)刀為！</div>
        <div class="panel-footer">作者：卓文君</div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">無(wú)題</div>
        <div class="panel-body">昨夜星辰昨夜風(fēng)，畫(huà)樓西畔桂堂東。
            身無(wú)彩鳳雙飛翼，心有靈犀一點(diǎn)通。
            隔座送鉤春酒暖，分曹射覆蠟燈紅。
            嗟余聽(tīng)鼓應(yīng)官去，走馬蘭臺(tái)類(lèi)轉(zhuǎn)蓬。</div>
        <div class="panel-footer">作者：李商隱</div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">青玉案·元夕</div>
        <div class="panel-body">東風(fēng)夜放花千樹(shù)，更吹落，星如雨。寶馬雕車(chē)香滿路。鳳簫聲動(dòng)，玉壺光轉(zhuǎn)，一夜魚(yú)龍舞。
            　　蛾兒雪柳黃金縷，笑語(yǔ)盈盈暗香去。眾里尋他千百度，驀然回首，那人卻在，燈火闌珊處。</div>
        <div class="panel-footer">作者： 辛棄疾</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">離思</div>
        <div class="panel-body">曾經(jīng)滄海難為水，除卻巫山不是云。
            取次花叢懶回顧，半緣修道半緣君。</div>
        <div class="panel-footer">作者： 元稹</div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">畫(huà)梅</div>
        <div class="panel-body">微雪初消月半池，籬邊遙見(jiàn)兩三枝。
            清香傳得天心在，未話尋常草木知。</div>
        <div class="panel-footer">作者： 方孝孺</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">菊花</div>
        <div class="panel-body">秋叢繞舍似陶家，遍繞籬邊日漸斜。
            不是花中偏愛(ài)菊，此花開(kāi)盡更無(wú)花。</div>
        <div class="panel-footer">作者： 元稹</div>
    </div>

效果如下：

Bootstrap中的面板組件有什么用

面板中嵌套表格

一般情況下可以把面板理解為一個(gè)區(qū)域，在使用面板的時(shí)候，都會(huì)在.panel-body的容器中放置需要的內(nèi)容，里面的內(nèi)容可能是圖片、表格、列表等；來(lái)看看面板中嵌套表格和列表組的效果，下面是一個(gè)嵌套表格的例子：

<h2>面板中嵌套表格</h2>
    <div class="panel panel-default">
        <div class="panel-heading">描寫(xiě)花的詩(shī)句</div>
        <div class="panel-body">
            <p>詩(shī)人對(duì)菊花由衷喜愛(ài)：開(kāi)得正旺的菊花一簇簇、一叢叢，遍布屋舍四周，他沿著竹籬，忘情地欣賞這些親手栽種的秋菊，不覺(jué)日已西斜。</p>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>不是花中偏愛(ài)菊，此花開(kāi)盡更無(wú)花《菊花》</th>
                        <th>愿得一人心，白首不相離《白頭吟》</th>
                        <th>床前明月光，疑是地上霜《靜夜思》</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>先天下之憂而憂，后天下之樂(lè)而樂(lè)《岳陽(yáng)樓記》</td>
                        <td>我欲與君相知，長(zhǎng)命無(wú)絕衰《上邪》</td>
                        <td>人面不知何處去，桃花依舊笑春風(fēng)《題都城南莊》</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel-footer">這首詩(shī)取陶詩(shī)的意境，且也以淡雅樸素的語(yǔ)言吟詠，便不似陶公全用意象，蘊(yùn)藉之至；而是在描繪具象之后，以自述的方式道出愛(ài)菊之由而又不一語(yǔ)說(shuō)盡，留下了想象空間讓人們?nèi)セ匚毒捉?，這就增強(qiáng)了它的藝術(shù)感染力。因而歷來(lái)被人們所喜愛(ài)</div>
    </div>

Bootstrap中的面板組件有什么用

在實(shí)際運(yùn)用中，或許表格和面板邊緣不需要有任何的間距，但.panel-body設(shè)置了一個(gè)padding：15px的值，為了實(shí)現(xiàn)這樣的效果，可以在實(shí)際使用的時(shí)候把table提取到panel-body外面：

例如：

<div class="panel panel-default">
        <div class="panel-heading">描寫(xiě)花的詩(shī)句</div>
        <div class="panel-body">
            <p>詩(shī)人對(duì)菊花由衷喜愛(ài)：開(kāi)得正旺的菊花一簇簇、一叢叢，遍布屋舍四周，他沿著竹籬，忘情地欣賞這些親手栽種的秋菊，不覺(jué)日已西斜。</p>

        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>《岳陽(yáng)樓記》</th>
                <th>《上邪》</th>
                <th>《題都城南莊》</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>先天下之憂而憂，后天下之樂(lè)而樂(lè)</td>
                <td>我欲與君相知，長(zhǎng)命無(wú)絕衰</td>
                <td>人面不知何處去，桃花依舊笑春風(fēng)</td>
            </tr>
            </tbody>
        </table>
        <div class="panel-footer">這首詩(shī)取陶詩(shī)的意境，且也以淡雅樸素的語(yǔ)言吟詠，便不似陶公全用意象，蘊(yùn)藉之至；而是在描繪具象之后，以自述的方式道出愛(ài)菊之由而又不一語(yǔ)說(shuō)盡，留下了想象空間讓人們?nèi)セ匚毒捉?，這就增強(qiáng)了它的藝術(shù)感染力。因而歷來(lái)被人們所喜愛(ài)</div>
    </div>

Bootstrap中的面板組件有什么用

面板中嵌套列表組

例子：

<h2>面板中嵌套列表組</h2>
    <div class="panel panel-default">
        <div class="panel-heading">描寫(xiě)花的詩(shī)句</div>
        <div class="panel-body">
            <p>面板嵌套列表組</p>
            <ul class="list-group">
                <li class="list-group-item">列表項(xiàng)1</li>
                <li class="list-group-item">列表項(xiàng)2</li>
                <li class="list-group-item">列表項(xiàng)3</li>
                <li class="list-group-item">列表項(xiàng)4</li>
                <li class="list-group-item">列表項(xiàng)5</li>
            </ul>
        </div>
        <div class="panel-footer">作者：李商隱</div>
    </div>

Bootstrap中的面板組件有什么用

面板嵌套列表組合嵌套表格一樣，如果不需要這樣的間距，完全可以把列表組從.panel-body中提取出來(lái)

例子：

<h2>面板中嵌套列表組</h2>
    <div class="panel panel-default">
        <div class="panel-heading">描寫(xiě)花的詩(shī)句</div>
        <div class="panel-body">
            <p>面板嵌套列表組</p>

        </div>
        <ul class="list-group">
            <li class="list-group-item">列表項(xiàng)1</li>
            <li class="list-group-item">列表項(xiàng)2</li>
            <li class="list-group-item">列表項(xiàng)3</li>
            <li class="list-group-item">列表項(xiàng)4</li>
            <li class="list-group-item">列表項(xiàng)5</li>
        </ul>
        <div class="panel-footer">作者：李商隱</div>
    </div>

效果如下：

Bootstrap中的面板組件有什么用

關(guān)于“Bootstrap中的面板組件有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前名稱(chēng)：Bootstrap中的面板組件有什么用-創(chuàng)新互聯(lián)
路徑分享：http://muchs.cn/article0/depdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站制作、云服務(wù)器、網(wǎng)站收錄、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容