真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

bootstrap中panel指的是什么

這篇文章主要介紹了bootstrap中panel指的是什么的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇bootstrap中panel指的是什么文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)是專業(yè)的東明網(wǎng)站建設(shè)公司，東明接單;提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行東明網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

在bootstrap中，panel指的是“面板”組件，用于把DOM組件插入到一個盒子中；創(chuàng)建該組件，只需向div元素添加“panel”和“panel-xxx”樣式即可，會產(chǎn)生具有邊框的文本顯示塊，“panel-xxx”樣式用于設(shè)置主題顏色。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

1、面板

面板（Panels）是Bootstrap框架新增的一個組件，其主要作用就是用來處理一些其他組件無法完成的功能。同樣在不同的版本中具有不同的源碼：

? Less版本：對應(yīng)的源碼文件是 panels.less

? Sass版本：對應(yīng)的源碼文件是 _panels.scss

? 編譯后的Bootstrap：對應(yīng)bootstrap.css文件第4995行～第5302行

2、面板–基礎(chǔ)面板

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


    我是一個基礎(chǔ)面板，帶有默認(rèn)主題樣式風(fēng)格

運(yùn)行效果如下：
bootstrap中panel指的是什么

原理分析：

“panel“主要對邊框，間距和圓角做了一定的設(shè)置：

/bootstrap.css文件第4995行～第5005行/

.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;
}

3、面板–帶有頭和尾的面板

基礎(chǔ)面板看上去太簡單了，Bootstrap為了豐富面板的功能，特意為面板增加“面板頭部”和“頁面尾部”的效果：

? panel-heading：用來設(shè)置面板頭部樣式

? panel-footer：用來設(shè)置面板尾部樣式


    圖解CSS3

… 作者：大漠

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

bootstrap中panel指的是什么
原理分析：

panel-heading和panel-footer也僅僅間距和圓角等樣式進(jìn)行了設(shè)置：

/bootstrap.css文件第5006行～第5030行/

.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;
}

4、面板–彩色面板

在基礎(chǔ)面板一節(jié)中了解到，panel樣式并沒有對主題進(jìn)行樣式設(shè)置，而主題樣式是通過panel-default來設(shè)置。在Bootstrap框架中面板組件除了默認(rèn)的主題樣式之外，還包括以下幾種主題樣式，構(gòu)成了一個彩色面板：

? panel-primary：重點(diǎn)藍(lán)

? panel-success：成功綠

? panel-info:信息藍(lán)

? panel-warning：警告黃

? panel-danger：危險紅

使用方法就很簡單了，只需要在panel的類名基礎(chǔ)上增加自己需要的類名：


    圖解CSS3
    …
    作者：大漠

…
…
…
…
…

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

bootstrap中panel指的是什么
從效果中不難發(fā)現(xiàn)，這幾個樣式只是改變了面板的背景色、文本和邊框顏色：具體源碼可以查看bootstrap.css文件第5195行～第5302行。

5、面板–面板中嵌套列表組

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


    圖解CSS3
    
        詳細(xì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應(yīng)Web設(shè)計、Web字體等主題下涵蓋的所有CSS3新特性
        
        
            我是列表項(xiàng)
            我是列表項(xiàng)
            我是列表項(xiàng)
        
    
    作者：大漠

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

bootstrap中panel指的是什么
優(yōu)化代碼：

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


    圖解CSS3
    …
    
        我是列表項(xiàng)
        我是列表項(xiàng)
        我是列表項(xiàng)
    
    作者：大漠

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

bootstrap中panel指的是什么
同樣的道理，Bootstrap將嵌套在面板中的列表組做了一定的樣式優(yōu)化。

關(guān)于“bootstrap中panel指的是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“bootstrap中panel指的是什么”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：bootstrap中panel指的是什么
網(wǎng)頁鏈接：http://weahome.cn/article/jepjps.html