Java疫情数据分析系统5

前端页面设计

我的前端页面是使用bootstrap设计的

内容目录(点击可跳转)：

一、Bootstrap 简介

一、Bootstrap 简介

Bootstrap由Twitter在2011年8月发布。

它是一个用于Web应用程序的前端框架，它提供了许多定义好的样式类和组件，方便开发者快速开发web页面。

Bootstrap中文网地址：https://v3.bootcss.com/ 当前版本：3.3.7

解压后目录结构如下：

其中：bootstrap.css和bootstrap.js是未压缩的CSS和JS文件，bootstrap.min.css和bootstrap.min.js是压缩之后的CSS和JS文件。fonts文件夹下是图标字体文件。

二、基本使用

1、Bootstrap基于html5、css3开发，因此，要使用Bootstrap，HTML页面需使用HTML5文档规范。

2、Bootstrap 是移动设备优先的，为了确保不同大小的手机屏幕都能正确显示页面，需要在<head> 之中添加viewport 元数据标签。

说明：viewport是针对手机浏览器提供的一个属性，用来设置视口(viewport)的大小。

移动设备上浏览器默认的视口宽度一般为800px，980px，1024px等，

而实际的手机屏幕宽度通常小于此值，如果没有设置viewport属性，将会导致出现横向滚动条。

viewport属性的各个参数值含义如下： width：指定视口的宽度，可以是一个具体的像素值，

如：600，或者是特殊值，如：device-width。height：指定视口的高度。initial-scale：页面初始缩放比例。

user-scalable：是否允许用户缩放，yes或no。

maximum-scale：允许用户缩放的最大比例，若要禁止放大页面，则设为1.0。

minimum-scale：允许用户缩放的最小比例，若要禁止缩小页面，则设为1.0。

【示例】

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

3、基本的页面模板：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>......</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="./bootstrap.css"> 
<link rel="stylesheet" href="./bootstrap-theme.css"> 
<script type="text/javascript" src="./jquery.js"></script> 
<script type="text/javascript" src="./bootstrap.js"></script>
</head>
<body>
<div class="container">
</div>
</body>
</html>

注：X-UA-Compatible用来设置IE浏览器的兼容模式，其content属性值可为：

其中Edge 模式告诉IE浏览器使用其所支持的最高级渲染模式。

如果要兼容IE6~8浏览器，还需导入两个脚本：
<!--[if lt IE 9]>

<![endif]-->

三、页面布局

响应式布局：页面能够根据不同的浏览器屏幕自行调整内容的位置和大小，在各种尺寸的屏幕上均良好展现。

Bootstrap提供了两个用于页面布局的css容器类：

.container 类用于固定宽度布局的容器。

.container-fluid 类用于流式布局(宽度充满父容器)的容器。两种类型的容器不要嵌套使用。

3.1 container类
Bootstrap将用户设备分为4个级别：屏幕宽度小于768px的为手机(xs)；

大于等于768px小于992px的为平板(sm)；

大于等于992px小于1200px的为中等显示器(md)；

大于等于1200px的为大显示器(lg)。在不同等级的设备上，

应用了.container类的div容器将依据当前窗口宽度具有相应的固定宽度值：

如果是手机，其宽度将是设备宽度；如果是平板，其宽度将是750px；

如果是中等显示器，其宽度将为970px；如果是大显示器，其宽度将为1170px。

3.2 网格系统
无论是固定宽度布局还是流式布局，都需要借助Bootstrap 提供的网格系统控制页面组件的大小和位置。

网格系统是用来划分容器区域，以便进行组件布局的一套规则。容器被分为12列，

开发者可根据需要通过一系列的行(row)与列(column)的组合来进行页面布局，

设置每个组件所跨越的列数，设置单元格的偏移等。

通过.row类定义容器中的一行；

在.row容器中可使用如下类来定义该行中的子容器水平跨越的列数：
col-xs-*、col-sm-*、col-md-*、col-lg-*。其中*是1~12之间的数值，代表该容器水平跨越n列。

col-xs-* 用于手机的布局； col-sm-* 用于平板的布局； col-md-* 用于小显示器的布局； col-lg-* 用于大显示器的布局；
一行中的所有子容器所跨越的列数之和最多为12。如果超过12，则超出的子容器将作为一个整体放在下一行显示。
针对低级别设备的设置向上兼容

比如：使用col-xs-*类布局，无论何种设备，列数值始终有效，子容器会按照指定的值水平排列；

使用col-sm-*类布局，只要屏幕宽度超过768px，列数值就有效，子容器会水平排列；如果屏幕宽度小于768px，

则子容器将垂直排列，列数值无效，每个子容器的宽度均为父容器宽度。使用col-md-*类布局，

只要屏幕宽度超过992px，列数值就有效，子容器会水平排列，否则垂直排列。使用col-lg-*类布局，

仅当屏幕宽度超过1200px，子容器才水平排列，否则垂直排列。

【示例】面向PC的界面布局

<div class="container"> 
<div class="row"> 
<div class="col-md-3">md3</div> 
<div class="col-md-3">md3</div> 
<div class="col-md-6">md6</div> 
</div> 
</div>

【示例】面向手机和PC的界面布局

<div class="container"> 
<div class="row"> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md

想让行内子容器水平向右偏移，可使用.col-*-offset-*类。

【示例】

<div class="row"> 
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-6 col-md-4 col-md-offset-4">.col-xs-6 .col-md-4</div>
</div>

嵌套布局
可在子容器内添加一个新的.row容器，内部使用.col-md-* 进行拆分。列数总和同样不能超过12。

【示例】

<div class="row"> 
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
<div class="col-xs-6 col-md-4 col-md-offset-4">.col-xs-6 .col-md-4 <div class="row"> 
<div class="col-md-8">inner 8</div> <div class="col-md-4">inner 4</div> 
</div> 
</div> 
</div>

流式布局：<div class="container-fluid">

充满父容器，每个子容器的宽度会自动计算，其左右各有15px的内边距。

【示例】

<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-12">跨越12 列</div> 
</div> 
</div>

四、css样式类

对于常用的html标签，Bootstrap已设置了特有的样式。此外，还提供的一些有用的css类

4.1 段落相关的css类
<p class="lead">...</p> 突出显示该段落(字体变大)；

<p class="text-right"> text.</p> 文本右对齐；

同理还有text-left,text-center

文字颜色相关类：

<p class="text-muted">颜色变淡</p>

<p class="text-warning">警告色</p>

<p class="text-danger">错误色</p>

<p class="text-info">信息色</p>

<p class="text-success">成功</p>

4.2表格相关的css类

<table class="table"> 增加水平分割线，单元格内有8px内边距

table-bordered 为表格和单元格增加边框

table-striped 隔行变化背景

table-hover 增加鼠标悬停效果

table-condensed 减少单元格内边距，使表格更紧凑

给行设置颜色：

<tr class="active">...</tr> 
<tr class="success">...</tr> 
<tr class="warning">...</tr> 
<tr class="danger">...</tr>
<tr class="info">...</tr>

单元格(`td` or `th`)

<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

4.3 表单相关的 css 类

● 表单组(form-group)
将一组 label 和控件包裹在 form-group 中，Bootstrap 会把label 置于控件上方，label 和控件左对齐。

A, <input type="text|password">、<textarea> 和 <select> 等元素可添加 form-control 类。使用了
form-control 类的控件其宽度为 100%，得到焦点后会带有蓝色阴影边框。

B, 单选按钮组，每个 <label><input type="radio"></label>包含一项。多个项目位于一个<div class="radio">
中。如下：

<div class="radio">
<label><input type="radio" name="sex" value="0">男</label>
<label><input type="radio" name="sex" value="1">女</label>
</div>

C, 复选框组,和radio组类似。如下：

<div class="checkbox">
<label><input type="checkbox" name="favo" value="1">体育</label>
<label><input type="checkbox" name="favo" value="2">音乐</label>
</div>

D, 按钮上可使用btn相关的类。如下：

<div class="form-group">
<button type="button" name="login" class="btn btn-default">Login</button>
</div>

<a>、<input type="button">以及<button type="button">等均可使用.btn btn-default
类，使其带灰色背景。另外，还提供了一些不同视觉效果的类：btn-primary 、btn-info 、btn-success 、btn-warning 、btn-danger、
btn-link，要改变按钮的大小，可使用.btn-lg、.btn-sm 或 .btn-xs 类。

若要表单内的label 和控件排列在同一行，首先要给form 元素添加 form-horizontal 类，同时还要使用栅格系统相关类 col-*-*设置 label 列宽和控件列宽，要控
制<input>控件的宽度，应将其放入<div>容器中。为<label>添加 control-label 类可使得标签右对齐。
【代码】

<form action="" class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-md-5">Name:</label>
<div class="col-md-7">
<input type="text" name="un" class="form-control" id="username">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5">Sex:</label>
<div class="radio col-md-7">
<label><input type="radio" name="sex" value="0">男</label>
<label><input type="radio" name="sex" value="1">女</label>
</div>
</div>
……

4.4 图标

Bootstrap 中提供了大约140 多个图标，图标全部位于 ../fonts/ 目录下的文件内。
使用时，每个图标都需要依附于一个<span>标签，为该元素赋予图标对应的类，如下：
<span class="glyphicon glyphicon-user"></span>

注意：
图标类只能应用在不包含任何文本内容或子元素的<span>元素上。同一个元素上图标类不能与其他类共存。

● 将图标用于按钮上
【示例】

<button type="button" class="btn btn-default">检索<span class="glyphicon glyphicon-search"></span> </button>

4.5 输入框组

使用输入框组(input-group) 可以给文本输入框<input>前面、后面或是两边加上文字或按钮。使用方法：在.input-group 内包含.input-group-addon
类和.form-control 类。
【示例】

<div class="input-group col-md-4">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" name="userName" placeholder="yourname" />
</div>
<div class="input-group col-md-4">
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
<input type="password" name="pwd" class="form-control" />
</div>

五、Bootstrap组件

5.1 提示框

可使用的类： alert alert-success alert alert-info alert alert-warning
alert alert-danger。
【示例】

<div class="col-md-3">
<div class="alert alert-warning">
<strong>Warning!</strong>
想好了再操作！
</div>
</div>
如果要提供关闭按钮，可使用alert-dismissible类，配合使用data-dismiss="alert"按钮。
<div class="col-md-3">
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
<strong>Warning!</strong>  想好了再操作！
</div>
</div>

5.2导航条

<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">企业名或Logo图片</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="home.html">主页</a></li>
<li><a href="#">菜单名</a></li>
<li><a href="#">菜单名</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">下拉菜单 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">菜单项</a></li>
<li><a href="#">菜单项</a></li>
</ul></li></ul>
<ul class="nav navbar-nav navbar-right">
<li></li></ul></div>
<form class="navbar-form">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">检索</button>
</form>
</div>

5.3 标签页

<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#products" data-toggle="tab">products</a></li>
<li><a href="#contacts" data-toggle="tab">contacts</a></li>
<li><a href="#others" data-toggle="tab">others</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="products">products</div>
<div class="tab-pane" id="contacts">contacts</div>
<div class="tab-pane" id="others">others</div>
</div>
</div>

5.4 页码

<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

不能点击的链接添加.disabled 类、当前页添加.active 类。
5.5 标签(Label)

使用不同颜色的背景显示。

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

5.6 徽章(Badges)
展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button"> Messages <span class="badge">4</span>
</button>

5.7 缩略图(thumbnail)

<div class="thumbnail">
<img src="img/xxx" alt="dog">
<div class="caption">
<h3>文字标题</h3>
<p>图片的说明</p>
</div>
</div>

六、插件

6.1 日期选择器
bootstrap-datepicker3.css bootstrap-datepicker.js
bootstrap-datepicker.zh-CN.min.js
导入顺序：

<link rel="stylesheet" href="/bs/css/bootstrap.css">
<link rel="stylesheet" href="/bs/css/bootstrap-theme.css">
<link rel="stylesheet" href="/bs/css/bootstrap-datepicker3.css">
<script type="text/javascript" src="/bs/js/html5shiv.js"></script>
<script type="text/javascript" src="/bs/js/respond.js"></script>
<script type="text/javascript" src="/bs/js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="/bs/js/bootstrap.js"></script>
<script type="text/javascript" src="/bs/js/bootstrap-datepicker.js"></script>
<script type="text/javascript"
src="/bs/js/bootstrap-datepicker.zh-CN.min.js"></script>

HTML代码：

<div class="form-group">
<label for="datepicker">出生日期：</label>
<div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-addon">
<span class="add-on glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>

日期选择器需要通过js代码进行初始化，Js代码如下：

<script type="text/javascript">
$(function() {
$('#datepicker').datepicker();



});
</script>

若要使用中文界面,在初始化时可传入language参数值：

$('#datepicker').datepicker({language:'zh-CN'});

6.2 手风琴面板

<div class="panel-group" id="menu">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu" href="#div1">
菜单组一 </a>
</h4></div>
<div id="div1" class="panel-collapse   in">
<div class="list-group">
<a href="#" class="list-group-item">菜单项11</a>
<a href="#" class="list-group-item">菜单项12</a>
<a href="#"class="list-group-item">菜单项13</a>
</div></div></div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu"
href="#div2">菜单组二</a>
</h4></div>
<div id="div2" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">菜单项21</a>
<a href="#" class="list-group-item">菜单项22</a>
<a href="#"class="list-group-item">菜单项23</a>
</div></div></div></div>

6.3 轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption"> ... </div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" ></span> <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" ></span> <span class="sr-only">Next</span>
</a>
</div>