首頁 >web前端 >Bootstrap教程 >bootstrap panel是什麼

bootstrap panel是什麼

青灯夜游
青灯夜游原創
2022-04-12 13:18:285150瀏覽

在bootstrap中,panel指的是「面板」元件,用於將DOM元件插入到一個盒子中;建立該元件,只需在div元素上添加「panel」和「panel-xxx」樣式即可,會產生具有邊框的文字顯示區塊,「panel-xxx」樣式用於設定主題顏色。

bootstrap panel是什麼

本教學操作環境:Windows7系統、bootsrap3.3.7版、DELL G3電腦

1、面板

#面板(Panels)是Bootstrap框架新增的一個元件,其主要作用就是用來處理一些其他元件無法完成的功能。同樣在不同的版本中具有不同的源碼:

Less版本:對應的源碼檔案是panels.less

##☑

Sass版本:對應的原始碼檔案是_panels.scss

☑ 編譯後的

Bootstrap:對應bootstrap.css檔案第4995行~第5302行

2、面板–基礎面板

基礎面板非常簡單,就是一個

div容器運用了「panel」樣式,產生一個具有邊框的文字顯示區塊。由於“panel”不控制主題顏色,所以在“panel”的基礎上增加一個控制顏色的主題“panel-default”,另外在裡面新增了一個「dpanel-body」樣式的div來放置面板主體內容:

<div>
    <div>我是一个基础面板,带有默认主题样式风格</div>
</div>
運行效果如下:


## 原理分析:bootstrap panel是什麼

panel

「主要對邊框,間距和圓角做了一定的設定:

/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、面板–帶有頭和尾的面板

基礎面板看起來太簡單了,

Bootstrap

為了豐富面板的功能,刻意為面板增加「面板頭部」和「頁面尾部」的效果:

panel-heading

:用來設定面板頭部樣式

panel-footer

:用來設定面板尾部樣式<pre class="brush:html;toolbar:false;">&lt;div class=&quot;panel panel-default&quot;&gt; &lt;div class=&quot;panel-heading&quot;&gt;图解CSS3&lt;/div&gt; &lt;div class=&quot;panel-body&quot;&gt;…&lt;/div&gt; &lt;div class=&quot;panel-footer&quot;&gt;作者:大漠&lt;/div&gt; &lt;/div&gt;</pre>運行效果如下:

## 原理分析:

bootstrap panel是什麼## panel-heading

panel-footer

也只是間距和圓角等樣式進行了設定:/bootstrap.css檔案

第5006行~第5030行

/<pre class="brush:css;toolbar:false;">.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-heading &gt; .dropdown .dropdown-toggle { color: inherit; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-title &gt; 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; }</pre>4、面板–彩色面板在基礎面板一節中了解到,

panel

樣式並沒有對主題進行樣式設置,而主題樣式是透過

panel-default

來設定。在Bootstrap框架中面板元件除了預設的主題樣式之外,還包括以下幾種主題樣式,構成了一個彩色面板:#☑ panel-primary :重點藍色

panel-success:成功綠色

panel-info:訊息藍色

panel-warning:警告黃

panel-danger:危險紅

使用方法就很簡單了,只需要在panel的類別名稱基礎上增加自己需要的類別名稱:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者:大漠</div>
</div>

運行效果如下:

從效果中不難發現,這幾個樣式只是改變了面板的背景色、文字和邊框顏色:具體原始碼可以查看

bootstrap.css

檔案bootstrap panel是什麼第5195行~第5302行
5、面板–面板中嵌套列表組在上一節,我們介紹瞭如何在面板中放置表格,現在我們來學習如何在面板中放置列表組,我們簡單的來看一個範例:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
    </div>
    <div class="panel-footer">作者:大漠</div>
</div>

運行效果如下:

# 最佳化程式碼:

和巢狀表格一樣,如果你覺得這樣有間距不好看,你完全可以把列表組提取出來:bootstrap panel是什麼

<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">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者:大漠</div>
</div>

運行效果如下:

同樣的道理,

Bootstrap

將嵌套在面板中的列表組做了一定的樣式優化。具體原始碼可以查看bootstrap panel是什麼bootstrap.css
檔案第5031行~第5053行更多關於bootstrap的相關知識,可訪問:bootstrap基礎教程! !

以上是bootstrap panel是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn