文章目录
- 一、Validate插件
- 二、Bootstrap
- 2.1 概述
- 2.2 使用步骤
- 2.3 [栅格系统](https://v3.bootcss.com/css/#grid)
- 2.4 [排版](https://v3.bootcss.com/css/#type)
- 2.5 [表格](https://v3.bootcss.com/css/#tables)
- 2.6 [表单](https://v3.bootcss.com/css/#forms)
- 2.7 [按钮](https://v3.bootcss.com/css/#buttons)
- 2.8 [图片](https://v3.bootcss.com/css/#images)
- 2.9 [导航栏](https://v3.bootcss.com/components/#nav)
- 2.10 [分页](https://v3.bootcss.com/components/#pagination)
- 2.11 [缩略图](https://v3.bootcss.com/components/#thumbnails)
- 2.12 [轮播图](https://v3.bootcss.com/javascript/#carousel)
一、Validate插件
1.1 概述
- jQuery的一个插件,依赖jquery使用
- 标准的验证方法库
1.2 作用
- 内置验证规则
拥有必填、数字、Email、URL和信用卡号等19类内置验证规则
- 自定义验证规则
- 验证信息提示
- 实时验证
通过keyup或blur事件触发验证
1.3 使用步骤
- 导入jQuery文件
- 导入validate.js
- 页面加载成功后,对表单进行验证,$(“选择器”).validate();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="validate.min.js"></script>
<script src="messages_zh.js"></script>
</head>
<body>
<form id="registerForm">
用户名:<input type="text" name="username"><br/>
密码:<input type="password" name="password" id="pwd"><br/>
确认密码:<input type="password" name="repwd"><br/>
邮箱:<input type="text" name="email"><br/>
年龄:<input type="text" name="age"><br/>
<input type="submit" value="注册"><br/>
</form>
<script>
$(function () {
$("#registerForm").validate({
rules:{
username:{required:true,rangelength:[6,12]},
password:{required:true,rangelength:[6,12]},
repwd:{required:true,rangelength:[6,12],equalTo:"#pwd"},
email:{required:true,email:true},
age:{required:true,digits:true,min:18}
},
// 有了上面的message.js文件,可以不写下面
messages:{
username:{required:"必填",rangelength:"长度应该在{0}-{1}之间"},
password:{required:"必填",rangelength:"长度应该在{0}-{1}之间"},
repwd:{required:"必填",rangelength:"长度应该在{0}-{1}之间",equalTo:"两次输入不相同"},
email:{required:"必填",email:"格式错误"},
age:{required:"必填",digits:"输入整数",min:"未成年禁止注册"}
}
})
})
</script>
</body>
</html>
1.4 校验规则
属性 | 描述 |
---|---|
required:true | 必输字段 |
email:true | 必须输入正确格式的电子邮件 |
number:true | 必须是合法数字(负数、小数) |
digits:true | 必须整数 |
equalTo:"#field" | 输入值必须和#field相同 |
maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
rangelength:[5,10] | 长度介于5和10之间的字符串(汉字算一个字符) |
range[5,10] | 输入值介于5和10之间 |
max:5 | 输入值不能大于5 |
min:10 | 输入值不能小于10 |
二、Bootstrap
2.1 概述
- 用于快速开发web应用程序和网站的前端框架
- 基于HTML、CSS、JavaScript
2.2 使用步骤
- 下载:http://www.bootcss.com/
- 导入bootstrap.css文件
- 导入jQuery.js文件
- 导入bootstrap.js文件
- 将所有内容放到布局容器中
2.3 栅格系统
2.3.1 概念
- 一套响应式、移动设备有限的流式网格系统
- 随着屏幕或视口尺寸增加,系统会自动分为最多12列
- 通过一系列的行(row)和列(column)的组合创建页面布局
2.3.2 栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container | 最大宽度 | None (自动) | 750px | 970px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px | (每列左右均有 15px) | ||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
2.3.3 实例:从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
2.4 排版
2.4.1 标题
HTML 中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
2.4.2 对齐
通过文本对齐类,可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
2.5 表格
2.5.1 基本实例
为任意、
标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。class类名 | 描述 |
---|---|
table-striped | 条纹状表格 |
table-bordered | 带边框表格 |
table-hover | 鼠标悬停变色 |
table-condensed | 紧缩表格 |
2.5.2 行状态
通过这些状态类可以为行或单元格设置颜色
class类名 | 描述 |
---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`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>
2.6 表单
2.6.1 基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
2.6.2 内联表单
- 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
- 只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
2.6.3 水平表单
- 通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类
- 可以将 label 标签和控件组水平并排布局。
- 这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
2.6.4 静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<!--图中框中部分-->
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
2.6.5 校验状态
- Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。
- 使用时,添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
- 任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
2.7 按钮
2.7.1 可作为按钮使用的标签或元素
为<a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
2.7.2 尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
2.8 图片
2.8.1 响应式图片
- 随着窗体大小改变大小
- 通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
<img src="..." class="img-responsive" alt="Responsive image">
2.8.2 图片形状
通过为 元素添加以下相应的类,可以让图片呈现不同的形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
2.9 导航栏
- 使用data-toggle="tab"属性
<div class="container">
<li role="presentation" class="active"><a href="#" data-toggle="tab">首页</a></li>
<li role="presentation" class="active"><a href="#" data-toggle="tab">分类</a></li>
<li role="presentation" class="active"><a href="#" data-toggle="tab">排行</a></li>
</div>
2.9.1 标签导航
注意 .nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
2.9.2 胶囊式标签页
HTML 标记相同,但使用 .nav-pills 类
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<!--胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类-->
<ul class="nav nav-pills nav-stacked">
...
</ul>
2.9.3 路径导航
- 在一个带有层次的导航结构中标明当前页面的位置
- 各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
2.10 分页
2.10.1 默认
组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
2.10.2 禁用和激活状态
将 active 或 disabled 状态的链接(即 标签)替换为 标签,或者在向前/向后的箭头处省略 标签,这样就可以让其保持需要的样式而不能被点击
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
2.11 缩略图
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
2.12 轮播图
<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" aria-hidden="true"></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" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>