Bootstrap中的Panel和Table全面解析
更新時(shí)間：2016年06月13日 10:57:14 作者：張占嶺
這篇文章主要介紹了Bootstrap中的Panel和Table全面解析的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
在我們對(duì)一個(gè)頁(yè)面進(jìn)行設(shè)計(jì)時(shí)，分塊是必須的，沒(méi)有一個(gè)網(wǎng)站是一欄而下的，除非你是在看小說(shuō)，否則你的頁(yè)面設(shè)計(jì)一定是分塊的，即它由于多個(gè)panel組件，在bootstrap里叫到柵格系統(tǒng)，而在每行每列進(jìn)行宏觀的布局后，就是在每一個(gè)大塊里建立小塊，而小塊可以使用Panel來(lái)實(shí)現(xiàn)，下面看個(gè)例子
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div>
這是最簡(jiǎn)單的格式了，它運(yùn)行后的效果
其實(shí)在我們?cè)O(shè)計(jì)自己的系統(tǒng)時(shí)，如果panel運(yùn)行得當(dāng)，也可以快速的建立一個(gè)頁(yè)面，如下
它其實(shí)于一個(gè)柵格（1x2）和兩個(gè)panel組件，縮減代碼如下
<div class="row"> <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-heading">快速導(dǎo)航</div> <div class="panel-body"> <ul><li style='padding-left:5px;' class='level0'><a href=''>根</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level1'><a href=''>系統(tǒng)管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level2'><a href=''>角色管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Role/Create'>新建角色</a></li><li style='padding-left:5px;' class='level3'><a href='/Role/Index'>管理角色</a></li></ul></li><li style='padding-left:5px;' class='level2'><a href=''>部門(mén)管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Department/Index'>管理部門(mén)</a></li></ul></li><li style='padding-left:5px;' class='level2'><a href=''>菜單管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Menu/Index'>管理菜單管理</a></li></ul></li><li style='padding-left:5px;' class='level2'><a href=''>員工管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/WebUser/Create'>新建員工</a></li><li style='padding-left:5px;' class='level3'><a href='/WebUser/Index'>管理員工</a></li></ul></li><li style='padding-left:5px;' class='level2'><a href=''>導(dǎo)航管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Banner/Create'>新建導(dǎo)航</a></li><li style='padding-left:5px;' class='level3'><a href='/Banner/Index'>管理導(dǎo)航</a></li></ul></li></ul></li></ul></li></ul> </div> </div> </div> <div class="col-md-10"> <div class="panel panel-default"> <div class="panel-heading">
用戶(hù)列表
</div>
<div class="panel-body">
<p>
用戶(hù)：<input type="text" name="UserName" id="UserName" /> 部門(mén)：<input type="text" name="DeptName" id="DeptName" />
</p>
<p>時(shí)間：<input type="text" name="StartTime" id="StartTime" /> 到 <input type="text" name="EndTime" id="EndTime" /> </p>
<p>
<input type="button" id="search" value="查詢(xún)" />
<a class="button" href="/WebUser/Create">建立一個(gè)用戶(hù)</a>
</p>
<div id="list">
<table class="listTbl">
<tr>
<th></th>
<th>編號(hào)
</th>
<th>用戶(hù)名稱(chēng)
</th>
<th>真實(shí)姓名
</th>
<th>Email
</th>
<th>所屬部門(mén)
</th>
<th>更新日期
</th>
<th>狀態(tài)
</th>
<th>所在系統(tǒng)
</th>
</tr>
<tbody>
<tr>
<td>
<div>
<span>
<a href="/WebUser/Details/1">查看</a>
</span>
<span>
<a href="/WebUser/Create">新建</a>
</span>
<span>
<a href="/WebUser/Edit/1">編輯</a>
</span>
<span>
<a href="/WebUser/Delete/1">刪除</a>
</span>
<span>
<a href="/WebUser/Approve/1">審核</a>
</span>
</div>
</td>
<td>
1
</td>
<td>
zzl
</td>
<td>
<span>zzl</span>
</td>
<td>
<span>No Info</span>
</td>
<td>
公司
</td>
<td>
2015/6/22 21:51
</td>
<td>
正常
</td>
<td>
1
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9">
<style type='text/css'>
.page_Standard {
padding: 5px;
margin: 0px;
text-align: center;
font-family: 0px;
font-family: Arial;
font-size: 12px;
}
.page_Standard a.cur{
background: none repeat scroll 0 0 #036cb4;
border: 1px solid #036cb4;
color: #fff;
font-weight: bold;
margin: 2px;
padding: 2px 5px;
}
.page_Standard a {
border: #eee 1px solid;
padding: 2px 5px;
margin: 2px;
color: #036cb4;
text-decoration: none;
}
.page_Standard A:hover {
border: #999 1px solid;
color: #666;
}
.page_Standard A:active {
border: #999 1px solid;
COLOR: #666;
}
.page_Standard span {
border: #036cb4 1px solid;
padding: 2px 5px;
font-weight: bold;
margin: 2px;
color: #fff;
background: #036cb4;
}
.page_Standard .disabled {
border: #eee 1px solid;
padding: 2px 5px;
margin: 2px;
color: #ddd;
}
</style>
<div style='clear:both'></div><div class="page_Standard"><b> 1/1 共1條</b></div>
</td>
</tr>
</tfoot>
</table>
</div>
下面再來(lái)看一下表格table，bootstrap基本就是為它添加的css樣式，沒(méi)有什么特別的
<table class="table table-striped"> ... </table>
下面也有帶邊框的表格
<table class="table table-bordered"> ... </table>
同時(shí)也集成了ＪＳ的懸浮效果
<table class="table table-hover"> ... </table>
ＯＫ，對(duì)于布局中的Panel和Table就介紹到這里，最后讓大家看一下我的bootstrap的demo，感覺(jué)真的很簡(jiǎn)單，很方便！
以上所述是小編給大家介紹的Bootstrap中的Panel和Table的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- JS組件Bootstrap Table使用方法詳解
- 解決JS組件bootstrap table分頁(yè)實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題
- Bootstrap嵌入jqGrid，使你的table牛逼起來(lái)
- JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
- BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)應(yīng)用小結(jié)
- JS組件Bootstrap Table布局詳解
- Bootstrap table分頁(yè)問(wèn)題匯總
- JS組件Bootstrap Table使用實(shí)例分享
- 值得分享的輕量級(jí)Bootstrap Table表格插件
相關(guān)文章
三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情
這篇文章主要介紹了三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
JS使用jsBarcode生成條形碼(一維碼)簡(jiǎn)單實(shí)例
JsBarcode是一個(gè)用JavaScript編寫(xiě)的條形碼生成器,它支持多種條形碼格式,可在瀏覽器和Node.js中使用,下面這篇文章主要給大家介紹了關(guān)于JS使用jsBarcode生成條形碼(一維碼)的相關(guān)資料,需要的朋友可以參考下2023-03-03
微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)選擇器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
關(guān)于javascript隨機(jī)數(shù)的，很早以前的文章了，不過(guò)內(nèi)容還是不錯(cuò)的，如果想要更多的效果，可以去腳本之家搜下。2009-12-12
本文主要介紹了uni-app組件的基本使用,包括組件的引入、使用和常見(jiàn)問(wèn)題解決方法,通過(guò)本文的學(xué)習(xí),讀者可以掌握uni-app組件的基本操作,為開(kāi)發(fā)uni-app應(yīng)用提供幫助,需要的朋友可以參考下2023-03-03
ECMAScript 創(chuàng)建自己的js類(lèi)庫(kù)
ECMAScript中最有意思，最強(qiáng)大的地方在于函數(shù)。最進(jìn)在完善自己的js類(lèi)庫(kù)的時(shí)候發(fā)現(xiàn)我們經(jīng)常在用函數(shù)，但真的很少有人懂得ECMAScript函數(shù)功能2012-11-11
這篇文章主要介紹了TypeScript 泛型，對(duì)泛型感興趣的同學(xué)，可以參考下2021-05-05
JS實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
最近用js寫(xiě)了一個(gè)計(jì)算器的頁(yè)面?；旧鲜褂玫搅?，ul li的幾點(diǎn)用法。用來(lái)布局，并且創(chuàng)造出了很不錯(cuò)的鼠標(biāo)懸停效果。2010-04-04
JS 組件系列之 bootstrap treegrid 組件封裝過(guò)程
最近產(chǎn)品需要設(shè)計(jì)一套相對(duì)完整的組織架構(gòu)的解決方案，由于組織架構(gòu)涉及到層級(jí)關(guān)系，在表格里面展示層級(jí)關(guān)系，自然就要用到所謂的treegrid。下面小編通過(guò)本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過(guò)程,需要的朋友可以參考下2017-04-04