1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>home</title>
  6.     <!--[if lt IE 9]>
  7.     <meta http-equiv="refresh" content="0;ie.html" />
  8.     <![endif]-->
  9.     <!--Bootstrap 内核 css 开始-->
  10.     <link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
  11.     <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  12.     <!--Bootstrap 内核 css 结束-->
  13.     <!--Bootstrap 插件 css 开始-->
  14.     <link href="Bootstrap/css/plugins/bootstrap-jquery-confirm/jquery-confirm.css" rel="stylesheet" />
  15.     <!--Bootstrap 插件 css 结束-->
  16.  
  17. </head>
  18. <body>
  19.     <div class="container">
  20.         <h1>系统统计. <small>患者、医生...</small></h1>
  21.  
  22.         <div class="row">
  1.             <div class="col-xs-6">
  2.                 <h2>患者</h2>
  3.             </div>
  4.             <div class="col-xs-6">
  5.                 <h2>详情</h2>
  6.                 <p>目前接受治疗的人数 <a class="btn btn-default" href="#">【100】</a></p>
  7.                 <p>三个月内停治的人数 <a class="btn btn-default" href="#">【100】 </a></p>
  8.                 <p>超过一个月未参与治疗人数<a class="btn btn-default" href="#">【100】 </a></p>
  9.  
  10.             </div>
  11.  
  12.         </div>
  13.         <div class="row">
  14.             <div class="col-xs-6">
  15.                 <h2>医生</h2>
  16.             </div>
  17.             <div class="col-xs-6">
  18.                 <h2>详情</h2>
  19.                 <p>合作医生的人数 <a class="btn btn-default" href="#">【100】</a></p>
  20.                 <p>合作后又停止合作的医生人数 <a class="btn btn-default" href="#">【100】</a></p>
  21.                 <p>超过一个月未参与治疗人数<a class="btn btn-default" href="#">【100】</a></p>
  22.  
  23.             </div>
  24.  
  25.         </div>
  26.  
  27.     <!--Bootstrap 内核 js 开始-->
  28.     <script src="jQuery/jquery-2.1.1.js"></script>
  29.     <script src="Bootstrap/js/bootstrap.min.js"></script>
  30.     <!--Bootstrap 内核 js 结束-->
  31.     <!--Bootstrap 插件 js 开始-->
  32.     <script src="Bootstrap/js/plugins/bootstrap-jquery-confirm/jquery-confirm.js"></script>
  33.     <!--Bootstrap 插件 js 结束-->
  34. </body>
  35. </html>

2016 医疗项目 Bootstrap 自适应页面布局（1）的更多相关文章

  1. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

  2. 使用rem进行自适应页面布局

    设计师给到我们前端的设计稿一般是按照iphone6屏幕(iphone6 两倍屏 设备 分辨率(物理尺寸) 屏幕宽高 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 750×1334 px ...

  3. 32Flutter仿京东商城项目 用户中心页面布局

    import 'package:flutter/material.dart'; import 'package:flutter_jdshop/services/ScreenAdapter.dart'; ...

  4. Web前端代码规范与页面布局

    一.    规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化.   二.     ...

  5. 前后端不分离的springboot项目问题：页面框架问题

    前言:最近自己想搞一个以springboot开发的web项目,由于页面布局问题,在前期开发的时候没有太注意,每天写一点现在开发到一半出现了一个大问题. 1.先说说整个网站框架搭建问题:(整个项目前后端 ...

  6. 利用层的table-row、table-cell属性进行页面布局

    利用层的table-row.table-cell属性可以进行等高.宽度自适应页面布局,这是参看了<我所知道的几种display:table-cell的应用>及<基于display:t ...

  7. 自适应XAML布局经验总结 （一）原则和页面结构设计

    XAML布局回顾 Grid和StackPanel是核心布局,尤其以Grid最为重要. Grid是网格布局,XAML的设计者有可能参考了Html里的Table设计了Grid布局,但进行了改进.Html中 ...

  8. bootstrap+css进行页面布局

    效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...

  9. bootstrap页面布局

    首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页 ...

随机推荐

  1. codeforces 680A A. Bear and Five Cards(水题)

    题目链接: A. Bear and Five Cards //#include <bits/stdc++.h> #include <vector> #include <i ...

  2. Unity3d之按键

    if (Input.GetKeyDown(KeyCode.A)){ Debug.Log("您按下了A键"); } if (Input.GetKeyUp(KeyCode.A)) { ...

  3. css 雪碧图的制作

    很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"&g ...

  4. 设置input(radio,checkbox)和lable对齐的问题

    在做页面的时候几次遇到label和前面的小图标无法对齐的情况,后来发现解决方法不过是 label { display:inline-block; vertical-align:top; line-he ...

  5. DWZ LookUp Suggest 教程

    单个查找带回 jsp 代码 lookup.jsp <%@ page language="java" contentType="text/html; charset= ...

  6. Java之累加和

    所谓累加算法,就是数学中数列求的算法,这都是司空见惯了的.下面我们用java求: package com.cdp.leijiahe; import java.util.Scanner; public ...

  7. DynamicObject数据包操作

    DynamicObject的结构非常简单明了,就是一个字典,类似于一个Dictionary<string, object>,其中的object可能是一个简单值(普通字段),可能是一个复杂值 ...

  8. 关于Windows® API Code Pack for Microsoft® .NET Framework

    相比之前的操作系统,Window 7(or Vista)提供了很多新特性,我们在应用实现中可以利用这些特性来提升用户体验. 这些特性主要包括以下几个方面: Shell Enhancements Dir ...

  9. 【原创】如何找到Oracle中哪条记录被锁

    通常有这种情况,某个表或者准确的说是表的某条记录被锁(TX锁),在业务层面排查之余,一般都会想知道是哪条记录被锁,每次被锁的是否是同一条记录?还是每次都不同?通过记录可以找到这条记录可以在哪个模块.哪 ...

  10. C# 获取文件名及扩展名

    C# 获取文件名及扩展名 string aFirstName = aFile.Substring(aFile.LastIndexOf("\\") + 1, (aFile.LastI ...