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 树控件 比较好用
Jun 11 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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扩展ZF――Validate扩展
2008/01/10 PHP
php curl_init函数用法
2014/01/31 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python定义具名元组实例操作
2021/02/28 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
幼儿教师工作感言
2014/02/14 职场文书
人事专员的职责
2014/02/26 职场文书
《颐和园》教学反思
2014/02/26 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
会议欢迎词
2015/01/23 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA