中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

Bootstrap~Panel和Table

回到目錄

在(zai)我們對(dui)一個(ge)頁(ye)面(mian)進行設(she)計時(shi)，分塊(kuai)(kuai)是(shi)(shi)必須的，沒有一個(ge)網站是(shi)(shi)一欄而下(xia)(xia)的，除非(fei)你(ni)是(shi)(shi)在(zai)看小說，否則(ze)你(ni)的頁(ye)面(mian)設(she)計一定是(shi)(shi)分塊(kuai)(kuai)的，即(ji)它由于多個(ge)panel組件(jian)，在(zai)bootstrap里叫到(dao)柵(zha)格系統，而在(zai)每(mei)(mei)行每(mei)(mei)列進行宏觀的布局后，就是(shi)(shi)在(zai)每(mei)(mei)一個(ge)大塊(kuai)(kuai)里建立小塊(kuai)(kuai)，而小塊(kuai)(kuai)可以使(shi)用Panel來實現，下(xia)(xia)面(mian)看個(ge)例子

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

這是最簡單(dan)的(de)格(ge)式了，它運(yun)行后的(de)效果(guo)

其實(shi)在我們設(she)計(ji)自己的系統時，如果panel運(yun)行得當，也可(ke)以快速的建立一個頁面，如下

它(ta)其實于一個柵格（1x2）和兩個panel組件(jian)，縮減代碼如(ru)下(xia)

<div class="row">
        <div class="col-md-2">
            <div class="panel panel-default">
                <div class="panel-heading">快速導航</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=''>系統管理</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=''>導航管理</a><ul  style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Banner/Create'>新建導航</a></li><li style='padding-left:5px;' class='level3'><a href='/Banner/Index'>管理導航</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>用戶(hu)名(ming)稱
        </th>
        <th>真實(shi)姓名(ming)
        </th>
        <th>Email
        </th>
        <th>所(suo)屬部門
        </th>
        <th>更新日期
        </th>
        <th>狀態(tai)
        </th>
        <th>所在系統
        </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>
View Code

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

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

下(xia)面(mian)也有帶(dai)邊框的表格

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

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

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

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

回到目錄

posted @ 2015-07-10 23:00  張占嶺  閱讀(8625)  評論(2)    收藏  舉報