菜单

Bootstrap~Panel和Table

2018年11月15日 - Bootstrap

以咱们本着一个页面进行设计时,分块是必须的,没有一个网站是如出一辙栏而生之,除非您是当拘留小说,否则你的页面设计得是分块的,即她由大多单panel组件,在bootstrap里为至栅格系统,而当各国行每列进行宏观之布局后,就是在各个一个大块里建立小片,而有些片好应用Panel来兑现,下面看个例证

a markdown table as below

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>
Tables Are Cool Temp Temp1 Cool Temp Temp1
col 3 is right-aligned $16000000000000000 $1600 $1600 $1111111111600 $1600 $160066666666666666666
col 2 is centered $12 $1600 $1600 $11111111111600 $1600 $1600
zebra stripes are neat $1 $1600 $1600 $1600 $1600 $1600

旋即是最最简易的格式了,它运行后底效益

图片 1

骨子里当咱们规划好之网不时,如果panel运行适当,也足以快的成立一个页面,如下

图片 2

标签: 数学 英语
Tags: 数学 英语

它们事实上被一个栅格(1×2)和有限单panel组件,缩减代码如下

这是一条删除线

图片 3图片 4

<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>用户名称
        </th>
        <th>真实姓名
        </th>
        <th>Email
        </th>
        <th>所属部门
        </th>
        <th>更新日期
        </th>
        <th>状态
        </th>
        <th>所在系统
        </th>
    </tr>
    <tbody>
            <tr>
                <td>
                    <div>

<a href="/WebUser/Details/1">查看</a>



<a href="/WebUser/Create">新建</a>



<a href="/WebUser/Edit/1">编辑</a>



<a href="/WebUser/Delete/1">删除</a>



<a href="/WebUser/Approve/1">审核</a>

</div>

                </td>
                <td>
                    1
                </td>
                <td>
                    zzl
                </td>
                <td>
                        zzl

                </td>
                <td>
                        No Info 

                </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基本就是也它助长的css样式,没有啊特别之

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

图片 5

脚为发出带动边框的表

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

图片 6

而也集成了JS的漂流效果

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

图片 7

Bootstrap

来源:http://www.cnblogs.com/lori/p/4637661.html

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图