彩色面板

由于.panel樣式并沒有對主題顏色進(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è)樣式只是改變了面板的背景色、文本、和邊框色

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

例子：

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

效果如下：

面板中嵌套表格

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

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

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

例如：

        描寫花的詩句
        
            
詩人對菊花由衷喜愛：開得正旺的菊花一簇簇、一叢叢，遍布屋舍四周，他沿著竹籬，忘情地欣賞這些親手栽種的秋菊，不覺日已西斜。

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

面板中嵌套列表組

例子：

面板中嵌套列表組
    
        描寫花的詩句
        
            
面板嵌套列表組
            
                列表項(xiàng)1
                列表項(xiàng)2
                列表項(xiàng)3
                列表項(xiàng)4
                列表項(xiàng)5
            
        
        作者：李商隱
    

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

例子：

面板中嵌套列表組
    
        描寫花的詩句
        
            
面板嵌套列表組

        
        
            列表項(xiàng)1
            列表項(xiàng)2
            列表項(xiàng)3
            列表項(xiàng)4
            列表項(xiàng)5
        
        作者：李商隱
    

效果如下：

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