目錄
基础面板
带有头和尾的面板
彩色面板
面板中嵌套表格
面板中嵌套列表组
首頁 web前端 Bootstrap教程 深入淺析Bootstrap中的面板組件

深入淺析Bootstrap中的面板組件

Feb 19, 2021 pm 05:33 PM
bootstrap 面板組件

本篇文章帶大家詳細了解Bootstrap中的面板元件。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

深入淺析Bootstrap中的面板組件

相關推薦:《bootstrap教學

面板元件主要作用是用來處理一些其他元件無法完成的功能,在不同的版本中具有不同的原始碼:

  • LESS:panels.less

  • SASS:_panels.scss

#基礎面板非常簡單,就是一個p容器中運用了類.panel的樣式,產生一個具有邊框的文本顯示塊,由於panel不控制主題顏色,所以在.panel基礎上增加一個控制顏色的主題的類別.panel-default,在裡面增加一個p.panel-body來放置面板主體內容

.panel主要對邊框、間距、圓角、左右一定的設定:

.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;
}
登入後複製

基礎面板的運用:

<h1 id="基础面板">基础面板</h1>
    <div>
        <div>这是一个基础面板,带默认主题样式风格</div>
    </div>
登入後複製

深入淺析Bootstrap中的面板組件

#有頭和尾的面板

bootstrap為了豐富面板的功能,刻意為面板增加面板頭部和麵板尾部的效果,

  • .panel-heading:設定面板頭部樣式

  • #.panel-footer:設定面板尾部樣式

  • .panel-headingh和.panel-footer僅是對間距和圓角等樣式進行了設定

#
.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;
}
登入後複製

範例:

<h1 id="带有头和尾的面板">带有头和尾的面板</h1>
    <div class="panel panel-default">
        <div class="panel-heading">这里是面板头部标题</div>
        <div class="panel-body">这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分</div>
        <div class="panel-footer">这里是面板尾部部分</div>
    </div>
登入後複製

深入淺析Bootstrap中的面板組件

#彩色面板

由於.panel樣式並沒有對主題顏色進行樣式設置,bootstrap框架中的面板組件處理預設的主題(.panel-default)樣式之外,還包括以下幾種主題樣式:

  • .panel -primary:重點      藍色

  • .panel-success:成功      綠色

  • .panel-info:    

  • ##.panel-warning:警告       黃色

  • .panel-danger:危險        紅色

這     幾個樣式只是改變了面板的背景色、文字、和邊框色

使用方法很簡單,只需在.panel的類別名稱基礎上追加需要的主題類別名稱

例子:

<h1 id="彩色面板">彩色面板</h1>
    <div class="panel panel-default">
        <div class="panel-heading">白头吟</div>
        <div class="panel-body">皑如山上雪,皎若云间月。
            闻君有两意,故来相决绝。
            今日斗酒会,明旦沟水头。
            躞蹀御沟上,沟水东西流。
            凄凄复凄凄,嫁娶不须啼。
            愿得一人心,白首不相离。
            竹竿何袅袅,鱼尾何簁簁!
            男儿重意气,何用钱刀为!</div>
        <div class="panel-footer">作者:卓文君</div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">无题</div>
        <div class="panel-body">昨夜星辰昨夜风,画楼西畔桂堂东。
            身无彩凤双飞翼,心有灵犀一点通。
            隔座送钩春酒暖,分曹射覆蜡灯红。
            嗟余听鼓应官去,走马兰台类转蓬。</div>
        <div class="panel-footer">作者:李商隐</div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">青玉案·元夕</div>
        <div class="panel-body">东风夜放花千树,更吹落,星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。
              蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</div>
        <div class="panel-footer">作者: 辛弃疾</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">离思</div>
        <div class="panel-body">曾经沧海难为水,除却巫山不是云。
            取次花丛懒回顾,半缘修道半缘君。</div>
        <div class="panel-footer">作者: 元稹</div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">画梅</div>
        <div class="panel-body">微雪初消月半池,篱边遥见两三枝。
            清香传得天心在,未话寻常草木知。</div>
        <div class="panel-footer">作者: 方孝孺</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">菊花</div>
        <div class="panel-body">秋丛绕舍似陶家,遍绕篱边日渐斜。
            不是花中偏爱菊,此花开尽更无花。</div>
        <div class="panel-footer">作者: 元稹</div>
    </div>
登入後複製

效果如下:

深入淺析Bootstrap中的面板組件深入淺析Bootstrap中的面板組件

深入淺析Bootstrap中的面板組件

面板中巢狀表格

一般情況下可以把麵板理解為一個區域,在使用面板的時候,都會在.panel-body的容器中放置需要的內容,裡面的內容可能是圖片、表格、列表等;來看看面板中嵌套表格和列表組的效果,以下是一個嵌套表格的例子:

<h1 id="面板中嵌套表格">面板中嵌套表格</h1>
    <div class="panel panel-default">
        <div class="panel-heading">描写花的诗句</div>
        <div class="panel-body">
            <p>诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。</p>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>不是花中偏爱菊,此花开尽更无花《菊花》</th>
                        <th>愿得一人心,白首不相离《白头吟》</th>
                        <th>床前明月光,疑是地上霜《静夜思》</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>先天下之忧而忧,后天下之乐而乐《岳阳楼记》</td>
                        <td>我欲与君相知,长命无绝衰《上邪》</td>
                        <td>人面不知何处去,桃花依旧笑春风《题都城南庄》</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel-footer">这首诗取陶诗的意境,且也以淡雅朴素的语言吟咏,便不似陶公全用意象,蕴藉之至;而是在描绘具象之后,以自述的方式道出爱菊之由而又不一语说尽,留下了想象空间让人们去回味咀嚼,这就增强了它的艺术感染力。因而历来被人们所喜爱</div>
    </div>
登入後複製

深入淺析Bootstrap中的面板組件

在實際運用中,或許表格和麵板邊緣不需要有任何的間距,但.panel-body設定了一個padding:15px的值,為了實現這樣的效果,可以在實際使用的時候把table提取到panel-body外面:

例如:

<div class="panel panel-default">
        <div class="panel-heading">描写花的诗句</div>
        <div class="panel-body">
            <p>诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。</p>

        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>《岳阳楼记》</th>
                <th>《上邪》</th>
                <th>《题都城南庄》</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>先天下之忧而忧,后天下之乐而乐</td>
                <td>我欲与君相知,长命无绝衰</td>
                <td>人面不知何处去,桃花依旧笑春风</td>
            </tr>
            </tbody>
        </table>
        <div class="panel-footer">这首诗取陶诗的意境,且也以淡雅朴素的语言吟咏,便不似陶公全用意象,蕴藉之至;而是在描绘具象之后,以自述的方式道出爱菊之由而又不一语说尽,留下了想象空间让人们去回味咀嚼,这就增强了它的艺术感染力。因而历来被人们所喜爱</div>
    </div>
登入後複製

深入淺析Bootstrap中的面板組件

面板中嵌套列表组

例子:

<h1 id="面板中嵌套列表组">面板中嵌套列表组</h1>
    <div class="panel panel-default">
        <div class="panel-heading">描写花的诗句</div>
        <div class="panel-body">
            <p>面板嵌套列表组</p>
            <ul class="list-group">
                <li class="list-group-item">列表项1</li>
                <li class="list-group-item">列表项2</li>
                <li class="list-group-item">列表项3</li>
                <li class="list-group-item">列表项4</li>
                <li class="list-group-item">列表项5</li>
            </ul>
        </div>
        <div class="panel-footer">作者:李商隐</div>
    </div>
登入後複製

深入淺析Bootstrap中的面板組件

面板嵌套列表组合嵌套表格一样,如果不需要这样的间距,完全可以把列表组从.panel-body中提取出来

例子:

<h1 id="面板中嵌套列表组">面板中嵌套列表组</h1>
    <div class="panel panel-default">
        <div class="panel-heading">描写花的诗句</div>
        <div class="panel-body">
            <p>面板嵌套列表组</p>

        </div>
        <ul class="list-group">
            <li class="list-group-item">列表项1</li>
            <li class="list-group-item">列表项2</li>
            <li class="list-group-item">列表项3</li>
            <li class="list-group-item">列表项4</li>
            <li class="list-group-item">列表项5</li>
        </ul>
        <div class="panel-footer">作者:李商隐</div>
    </div>
登入後複製

效果如下:

深入淺析Bootstrap中的面板組件

更多编程相关知识,请访问:编程视频!!

以上是深入淺析Bootstrap中的面板組件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
bootstrap搜索欄怎麼獲取 bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值:確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

bootstrap垂直居中怎麼弄 bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中:flexbox 法:使用 d-flex、justify-content-center 和 align-items-center 類,將元素置於 flexbox 容器內。 align-items-center 類法:對於不支持 flexbox 的瀏覽器,使用 align-items-center 類,前提是父元素具有已定義的高度。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

See all articles