前端页面设计
我的前端页面是使用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 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
说明：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属性值可为：
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=edge">等。
其中Edge 模式告诉IE浏览器使用其所支持的最高级渲染模式。
如果要兼容IE6~8浏览器，还需导入两个脚本：
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/respond.js"></script>
<![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>×</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="#">«</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="#">»</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>