JqGrid之布局与图标设计

原创 2016年08月31日 10:59:09

1.源代码

<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>护航专家</title>
<%@ include file="/common/bootstrap.jsp"%>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">              //无论手机,ipad,pc 大小都是全屏
         <ul class="media-list">                                   
             <li class="media">
                 <a class="pull-left" href="#">                         
                     <img class="img-responsive" src="ss.png" alt="...">     //图片
                 </a>
                 <div class="media-body">                         
                      <h4 class="media-heading">林秀敏</h4>
                     <h5 style="color: #C5C5C5">内分泌呼吸消化肾内科</h5>    //字体大小,颜色设置
                     <h6>郑州大学第一附属医院</h6>
                 </div>
             </li>
         </ul>
 </div>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
 <h5> <font color=#169ADA > <span class="glyphicon glyphicon-user" aria-hidden="true"></span></font>  //加入图标, font 加图表颜色 span class 图表内容
 医生介绍</h5>
 <p>郑大一附院教授主任医师,硕士研究生导师。1982年毕业于河南医学院医疗系,长期从事老年心血管疾病的临床、教学及科研工作。
 对老年高血压病、冠心病、心律失常、心力衰竭的诊断、治疗具有较深的造诣,对老年心血管病相关疾病如糖尿病、脑梗塞、高脂血症、
 周围血管病、代谢综合症、情感障碍的诊治积累了丰富的临床经验。
 </p>
 </div>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
 <h5> <font color=#F397B2 > <span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span></font>
 坐诊时间:</h5>
 <table class="table" border="1">
                                <tr style="background-color: #90C8F6">
                                    <th class="col-md-3">
                                    </th>
                                    <th class="col-md-3">
                                                                                                                                             一
                                    </th>
                                    <th class="col-md-1">
                                                                                                                     二
                                    </th>
                                    <th class="col-md-1">
                                       三
                                    </th>
                                      <th class="col-md-1">
                                        四
                                    </th>
                                    <th class="col-md-1">
                                        五
                                    </th>
                                      <th class="col-md-1">
                                        六
                                    </th>
                                    <th class="col-md-1">
                                        日
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="#">上午</a>
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    <font color=#169ADA > <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></font>
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                     <td>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="#">下午</a>
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                     <font color=#169ADA > <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></font>
                                    </td>
                                    <td>
                                    </td>
                                      <td>
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                     <td>
                                    </td>
                                </tr>
                        </table>
 </div>
</body>
</html>
2.效果展示

3.源代码

	<script type="text/javascript">
		try {
			ace.settings.check('sidebar', 'fixed')
		} catch (e) {
		}
	</script>

	<div class="sidebar-shortcuts" id="sidebar-shortcuts">
		<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
			<button class="btn btn-success">
				<i class="ace-icon fa fa-signal"></i>
			</button>

			<button class="btn btn-info">
				<i class="ace-icon fa fa-pencil"></i>
			</button>

			<button class="btn btn-warning">
				<i class="ace-icon fa fa-users"></i>
			</button>

			<button class="btn btn-danger">
				<i class="ace-icon fa fa-cogs"></i>
			</button>
		</div>

4.效果展示







版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jqGrid 各种参数详解

转载地址:http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html jqGrid 各种参数 详解 JQGrid JQGr...

替换jqgrid 分页小箭头样式

替换jqgrid 分页小箭头样式

jqgrid--自定义按钮

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});   新的API   jQ...

jqGrid增删改查显示——删除+nodejs后台

本篇文章只介绍jqGrid删除操作 本篇文章代码在以下一篇代码基础上修改: jqGrid显示:http://blog.csdn.net/tangjiarao/article/details/5045...

jqgrid+bootstrap样式实践

jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.mi...
  • allenwdj
  • allenwdj
  • 2015年10月16日 11:05
  • 28600

jqGrid构造下拉表格控件 dropDownGrid -ace Admin

使用ace Admin开发过程中使用modal(模态框)弹出表单,输入框需要从数据库其他表中取值填充,一般情况下select或更方便的chosen就可以;若需要在下拉中显示多列,chosen就满足不,...
  • zrk1000
  • zrk1000
  • 2015年06月19日 13:52
  • 4307

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jqgrid 增加自定义列。比如 按钮 图片 等等

这里 以按钮为例、gridComplete: function(){    var ids = $("#list").jqGrid('getDataIDs');   for(var i=0;i < i...

超时时间已到。在操作完成之前超时时间已过或服务器未响应。 (.Net SqlClient Data Provider)

在做一个小东西的时候出现了这个问题,就是使用VS调试几次项目后,使用SQL Server Management Studio管理数据库时,使用SA登录就会出现这个错误,当然,如果项目中的数据库连接字符...

UEFI BIOS模式下Windows系统启动过程以及引导文件修复方法

http://www.heu8.com/647.html        有关UEFI BIOS基础知识的简介,一年前在网易博客做过详细的概述。鉴于某些网友仍然对UEFI下Windows的启动过程...
  • xcntime
  • xcntime
  • 2015年12月06日 12:34
  • 3590
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqGrid之布局与图标设计
举报原因:
原因补充:

(最多只允许输入30个字)