Bootstrap中的Panel和Table全面解析


Posted in Javascript onJune 13, 2016

在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每列进行宏观的布局后,就是在每一个大块里建立小块,而小块可以使用Panel来实现,下面看个例子

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

这是最简单的格式了,它运行后的效果

Bootstrap中的Panel和Table全面解析

其实在我们设计自己的系统时,如果panel运行得当,也可以快速的建立一个页面,如下

Bootstrap中的Panel和Table全面解析

它其实于一个栅格(1x2)和两个panel组件,缩减代码如下

<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" />  部门:<input type="text" name="DeptName" id="DeptName" />
</p>
<p>时间:<input type="text" name="StartTime" id="StartTime" />    到    <input type="text" name="EndTime" id="EndTime" />  </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>
<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>

下面再来看一下表格table,bootstrap基本就是为它添加的css样式,没有什么特别的

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

Bootstrap中的Panel和Table全面解析

下面也有带边框的表格

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

Bootstrap中的Panel和Table全面解析

同时也集成了JS的悬浮效果

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

OK,对于布局中的Panel和Table就介绍到这里,最后让大家看一下我的bootstrap的demo,感觉真的很简单,很方便!

Bootstrap中的Panel和Table全面解析

以上所述是小编给大家介绍的Bootstrap中的Panel和Table的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
jquery实现网页定位导航
Aug 23 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 #Javascript
Bootstrap表单Form全面解析
Jun 13 #Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 #Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 #Javascript
多种jQuery绑定事件的实现方式
Jun 13 #Javascript
JS Ajax请求如何防止重复提交
Jun 13 #Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
You might like
常用的php对象类型判断
2008/08/27 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
jQuery的学习步骤
2011/02/23 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
就业自我评价
2014/02/04 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
个人职业及收入证明
2014/10/13 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL