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使用分析

简述 jqgrid 是一款非常容易上手的jquery数据网格插件,基于jquery ui主题样式,通过ajax和后端服务器接口实现通信,以xml、json等数据格式在浏览器端和服务器端通信。jqg...
  • yangbo2921946188
  • yangbo2921946188
  • 2016年07月25日 01:57
  • 2319

jqGrid 学习笔记整理——基础篇

jqGrid 学习笔记整理——基础篇 本人在官网的示例中学习的非常困难,现通过慢慢摸索学习已实现基本功能,特总结下来留给初学者们。 jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jq...
  • dfs4df5
  • dfs4df5
  • 2016年01月28日 13:27
  • 4069

替换jqgrid 分页小箭头样式

替换jqgrid 分页小箭头样式
  • Alex81320
  • Alex81320
  • 2016年12月20日 20:11
  • 1631

jqgrid--自定义按钮

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});   新的API   jQ...
  • whatlookingfor
  • whatlookingfor
  • 2014年08月05日 10:50
  • 6704

jqGrid 各种参数详解

转载地址:http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html jqGrid 各种参数 详解 JQGrid JQGr...
  • u014235952
  • u014235952
  • 2016年06月07日 10:53
  • 1407

jqGrid 各种参数详解

转载地址:http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html jqGrid 各种参数 详解 JQGrid JQGr...
  • u014235952
  • u014235952
  • 2016年06月07日 10:53
  • 1407

Bootstrap嵌入jqGrid,使你的table牛逼起来

Bootstrap嵌入jqGrid,使你的table牛逼起来
  • qing_gee
  • qing_gee
  • 2016年05月04日 11:28
  • 23723

Java之GUI编程(二)——布局管理器

在上篇博客Java之GUI编程(一)中我已经对GUI编程的组件和事件做了简单介绍了,现在来看看另外一部分关于组件在各个平台是如何做到仍能保持自己合理的位置大小以及外观的。 已经说了Ja...
  • dandanzmc
  • dandanzmc
  • 2014年05月03日 15:10
  • 15423

Android5.0以上通知栏图标设计

众所周知,Android5.0以上系统通知栏做了很大改进,小图标只能用alpha图层进行绘制,不能用rgb图层,就这个问题,我们用一个例子说话。 1. 废话少说,直接上代码NotificationMa...
  • u013706904
  • u013706904
  • 2016年07月14日 20:33
  • 2760

浅谈Android系统的图标设计规范

目前移动平台的竞争日益激烈,友好的用户界面可以帮助提高用户体验满意度,图标Icon是用户界面中一个重要的组成部分,今天我们来研究和学习一下Android系统的图标设计规范。在探讨Android的ico...
  • dreamer0924
  • dreamer0924
  • 2012年09月26日 14:56
  • 617
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqGrid之布局与图标设计
举报原因:
原因补充:

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