深入淺析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為了豐富面板的功能,刻意為面板增加面板頭部和麵板尾部的效果,
.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>
#彩色面板
由於.panel樣式並沒有對主題顏色進行樣式設置,bootstrap框架中的面板組件處理預設的主題(.panel-default)樣式之外,還包括以下幾種主題樣式:
.panel -primary:重點 藍色
.panel-success:成功 綠色
.panel-info:
- ##.panel-warning:警告 黃色
- .panel-danger:危險 紅色
<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>
面板中巢狀表格
一般情況下可以把麵板理解為一個區域,在使用面板的時候,都會在.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>
<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>
面板中嵌套列表组
例子:
<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>
面板嵌套列表组合嵌套表格一样,如果不需要这样的间距,完全可以把列表组从.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中的面板組件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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