欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap中的Panel和Table全面解析

 更新時間：2016年06月13日 10:57:14   作者：張占嶺  
這篇文章主要介紹了Bootstrap中的Panel和Table全面解析的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

在我們對一個頁面進(jìn)行設(shè)計時，分塊是必須的，沒有一個網(wǎng)站是一欄而下的，除非你是在看小說，否則你的頁面設(shè)計一定是分塊的，即它由于多個panel組件，在bootstrap里叫到柵格系統(tǒng)，而在每行每列進(jìn)行宏觀的布局后，就是在每一個大塊里建立小塊，而小塊可以使用Panel來實(shí)現(xiàn)，下面看個例子

<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

這是最簡單的格式了，它運(yùn)行后的效果

其實(shí)在我們設(shè)計自己的系統(tǒng)時，如果panel運(yùn)行得當(dāng)，也可以快速的建立一個頁面，如下

它其實(shí)于一個柵格（1x2）和兩個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=''>部門管理</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Department/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='/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">

用戶列表

</div>
<div class="panel-body">
<p>
用戶：<input type="text" name="UserName" id="UserName" />&nbsp;&nbsp;部門：<input type="text" name="DeptName" id="DeptName" />
</p>
<p>時間：<input type="text" name="StartTime" id="StartTime" />&nbsp;&nbsp;&nbsp;&nbsp;到&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="EndTime" id="EndTime" />&nbsp;&nbsp;</p>
<p>
<input type="button" id="search" value="查詢" />
<a class="button" href="/WebUser/Create">建立一個用戶</a>
</p>
<div id="list">
<table class="listTbl">
<tr>
<th></th>
<th>編號
</th>
<th>用戶名稱
</th>
<th>真實(shí)姓名
</th>
<th>Email
</th>
<th>所屬部門
</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>&nbsp;&nbsp;1/1&nbsp;&nbsp;共1條</b></div>
</td>
</tr>
</tfoot>
</table>
</div>

下面再來看一下表格table，bootstrap基本就是為它添加的css樣式，沒有什么特別的

<table class="table table-striped">
...
</table>

下面也有帶邊框的表格

<table class="table table-bordered">
...
</table>

同時也集成了ＪＳ的懸浮效果

<table class="table table-hover">
...
</table>

ＯＫ，對于布局中的Panel和Table就介紹到這里，最后讓大家看一下我的bootstrap的demo，感覺真的很簡單，很方便！

以上所述是小編給大家介紹的Bootstrap中的Panel和Table的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • JavaScript數(shù)組去重算法實(shí)例小結(jié)

    JavaScript數(shù)組去重算法實(shí)例小結(jié)

    這篇文章主要介紹了JavaScript數(shù)組去重算法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組去重相關(guān)的讀寫、遍歷、比較、排序等操作及算法改進(jìn)相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-05-05
  • 教你一步步實(shí)現(xiàn)一個簡易promise

    教你一步步實(shí)現(xiàn)一個簡易promise

    Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理且更強(qiáng)大,這篇文章主要給大家介紹了關(guān)于如何一步步實(shí)現(xiàn)一個簡易promise的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • Bootstrap CSS布局之表格

    Bootstrap CSS布局之表格

    這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS布局之表格的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • javascript使用for循環(huán)批量注冊的事件不能正確獲取索引值的解決方法

    javascript使用for循環(huán)批量注冊的事件不能正確獲取索引值的解決方法

    這篇文章主要介紹了javascript使用for循環(huán)批量注冊的事件不能正確獲取索引值的解決方法,對比分析了出現(xiàn)問題的代碼與修改后的代碼,并給出了采用閉包實(shí)現(xiàn)的方法,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • javascript 用函數(shù)語句和表達(dá)式定義函數(shù)的區(qū)別詳解

    javascript 用函數(shù)語句和表達(dá)式定義函數(shù)的區(qū)別詳解

    本篇文章主要介紹了javascript 用函數(shù)語句和表達(dá)式定義函數(shù)的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01
  • js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼

    js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼

    js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當(dāng)原理也比較簡單。
    2010-04-04
  • js實(shí)現(xiàn)磚頭在頁面拖拉效果

    js實(shí)現(xiàn)磚頭在頁面拖拉效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)磚頭在頁面拖拉效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • JavaScript編程學(xué)習(xí)技巧匯總

    JavaScript編程學(xué)習(xí)技巧匯總

    這篇文章主要介紹了JavaScript編程學(xué)習(xí)技巧匯總，整理了編程技巧、實(shí)用函數(shù)、簡潔方法、編程細(xì)節(jié)等相關(guān)資料，感興趣的小伙伴們可以參考一下
    2016-02-02
  • Java 生成隨機(jī)字符的示例代碼

    Java 生成隨機(jī)字符的示例代碼

    這篇文章主要介紹了Java 生成隨機(jī)字符的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-01
  • 詳解JavaScript事件循環(huán)

    詳解JavaScript事件循環(huán)

    JavaScript事件循環(huán)是一種機(jī)制，用于處理異步事件和回調(diào)函數(shù)。它是JavaScript運(yùn)行時環(huán)境的一部分，負(fù)責(zé)管理事件隊(duì)列和調(diào)用棧。文章中有詳細(xì)的代碼示例，需要的朋友可以參考一下
    2023-04-04

最新評論