前端BootStrap与LayUI框架
·
七、BootStrap
7.1、BootStrap模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置Web页面的初始缩放比例
initial-scale=1则将显示未经缩放的Web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- 载入Bootstrap 的css -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
7.2、布局容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局容器</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
布局容器
1、.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"></div>
2、.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"></div>
-->
<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
<!-- <div class="container" style="background-color: thistle;height: 500px;">
.container 类用于固定宽度并支持响应式布局的容器。
</div> -->
<!-- .container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。 -->
<div class="container-fluid" style="background-color: thistle;height: 500px;" >
.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。
</div>
</body>
</html>
7.3、栅格网格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格网格系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div style="background-color: mediumaquamarine;">4</div>
<div style="background-color: navajowhite;">8</div>
<hr />
<!--
栅格网格系统
1. 列组合
列总和数不能超12，大于12，则自动换到下一行
2. 列偏移
只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加"col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。
3. 列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull，往后push。
4. 列嵌套
Bootstrap框架的网格系统还支持列的嵌套。
你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
-->
<!-- 布局容器 -->
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
<div class="col-md-4 col-lg-4" style="background-color: deepskyblue;">4</div>
<div class="col-md-8 col-lg-8" style="background-color: bisque;">8</div>
</div>
<hr>
<!-- 列组合 -->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
<div class="col-md-1" style="background-color: burlywood;">1</div>
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1" style="background-color: darkturquoise;">1</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: lightblue;">6</div>
<div class="col-md-6" style="background-color: lightgoldenrodyellow;">6</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color: green;">4</div>
<div class="col-md-4" style="background-color: fuchsia;">4</div>
<div class="col-md-4" style="background-color: azure;">4</div>
</div>
<!-- 列的总数不能超过12 -->
<div class="row">
<div class="col-md-4" style="background-color: burlywood;">4</div>
<div class="col-md-4" style="background-color: darkcyan;">4</div>
<div class="col-md-5" style="background-color: goldenrod;">5</div>
</div>
<hr />
<!-- 列偏移 -->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: burlywood;">1</div>
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1 col-md-offset-4" style="background-color: darkturquoise;">1</div>
</div>
<hr />
<!-- 列排序 -->
<div class="row">
<div class="col-md-1" style="background-color: black;">1</div>
<div class="col-md-1 col-md-push-3" style="background-color: blue;">1</div>
<div class="col-md-1" style="background-color: gold;">1</div>
<div class="col-md-1 col-md-pull-2" style="background-color: green;">1</div>
</div>
<hr />
<!-- 列嵌套 -->
<div class="row">
<div class="col-md-6" style="background-color: navajowhite;">
<div class="row">
<div class="col-md-1" style="background-color: #31708F;">1</div>
<div class="col-md-9" style="background-color: khaki;">9</div>
<div class="col-md-1" style="background-color: rosybrown;">1</div>
<div class="col-md-1" style="background-color: palegreen;">1</div>
</div>
</div>
<div class="col-md-6" style="background-color: teal;">
6
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-3 col-sm-6" style="background-color: darkblue">3</div>
<div class="col-md-3 col-sm-6" style="background-color: brown">3</div>
<div class="col-md-3 col-sm-6" style="background-color: rosybrown">3</div>
<div class="col-md-3 col-sm-6" style="background-color: blueviolet">3</div>
</div>
</div>
</body>
</html>
7.4、常用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用样式</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
常用样式
1. 标题
bootstrap对h1~h6的标题效果进行覆盖
提供了对应的类名，为非标题元素设置样式 .h1~.h6
副标题 small标签 或 .small类名
2. 段落
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
3. 强调
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
4. 对齐效果
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐。
-->
<!-- 标题 -->
<h1>标题1<small>副标题</small></h1>
<h2>标题2<span class="small">副标题2</span></h2>
<h3>标题3</h3>
<div class="h1">你好</div>
<hr>
<!-- 段落-->
<p>通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。</p>
<p class="lead">通过.lead 来突出<small>强调</small><b>内容</b>(其作用就是<strong>增大</strong>文本<i>字号</i>，加粗<em>文本</em>，而且对行高和margin也做相应的处理。</p>
<hr>
<!-- 强调 -->
<div class="text-muted">.text-muted：提示，使用浅灰色（#999）</div>
<div class="text-primary">.text-primary：主要，使用蓝色（#428bca） </div>
<div class="text-success">.text-success：成功，使用浅绿色(#3c763d) </div>
<div class="text-info">.text-info：通知信息，使用浅蓝色（#31708f）</div>
<div class="text-warning">.text-warning：警告，使用黄色（#8a6d3b） </div>
<div class="text-danger">.text-danger：危险，使用褐色（#a94442）</div>
<hr>
<!-- 对齐效果 -->
<p style="text-align: right;">Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-left">左对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-right">右对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-center">居中对齐- Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-justify">
Hello 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
Hi 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用样式</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
1. 列表
无序列表(<ul><li>…</li></ul>)
有序列表(<ol><li>…</li></ol>)
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)
2. 代码
（1）使用<code></code>来显示单行内联代码
（2）使用<pre></pre>来显示多行块代码
样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)
（3）使用<kbd></kbd>来显示用户输入代码,如快捷键
-->
<!-- 无序 列表-->
<ul>
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ol>
<!-- 定义列表-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
<hr />
<!-- 去点列表-->
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!-- 内联列表 -->
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>
<!-- 自定义列表 内联列表 -->
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言</dt>
<dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度,否则2个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>
<hr><br>
<!-- 使用<code></code>来显示单行内联代码 -->
this is a simple code
<code>this is a simple code</code> <br>
<code>
this is a simple code<br>
this is a simple code
</code>
<!-- 快捷键 -->
<p>使用<kbd>ctrl</kbd> + <kbd>s</kbd>保存内容</p>
<!-- 多行代码 -->
<!-- 代码会保留原本的格式，包括空格和回车 -->
<pre>
public class HelloWorld {
public static void main(String[] args){
System.out.println("hello world...");
}
}
</pre>
<!-- 显示html代码需要使用字符实体 -->
<pre>
<h2>你好</h2>
</pre>
<!-- 当长度超过指定值，可以添加滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
</ol>
</pre>
<hr />
<!-- 表格 -->
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="success">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="warning">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr class="active">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="danger">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr >
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
</body>
</html>
7.5、表单控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
表单
1. 文本框
.form-control 表单元素的样式
表单控件的大小 .input-lg .input-sm
2. 下拉框
.form-control 表单元素的样式
multiple="multiple" 设置下拉框多选
3. 文本域
.form-control 表单元素的样式
4. 复选框
垂直显示 .checkbox
水平显示 .checbox-inline
5. 单选框
垂直显示 .radio
水平显示 .radio-inline
6. 按钮
1. 使用按钮
基础样式： .btn
附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
2. 多标签使用
其他标签可以通过添加按钮样式设置成按钮效果（a标签、span标签等）
3. 按钮大小
大按钮 .btn-lg
正常按钮 .btn-sm
小按钮 .btn-xs
4. 按钮禁用
1.通过disabled属性（真正的禁用元素）
2.通过disabled样式（样式上禁用）
-->
<input type="text" /> <br>
<select>
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select> <br>
<textarea></textarea><br>
<input type="checkbox" name="hobby" /> 唱歌
<input type="checkbox" name="hobby" /> 跳舞 <br>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女<br>
<button>按钮</button> <input type="button" value="按钮" />
<hr><br>
<!-- 文本框-->
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control" /> <br>
<input type="text" class="form-control input-lg" /> <br>
<input type="text" class="form-control input-sm" /> <br>
</div>
</div>
<!-- 下拉框 -->
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select> <br>
<select class="form-control" multiple="multiple">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select> <br>
</div>
</div>
<!-- 文本域-->
<div class="row">
<div class="col-md-3">
<textarea class="form-control">
</textarea>
</div>
</div>
<!-- 复选框 -->
<!-- 垂直显示-->
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox" name="hobby" /> 唱歌</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby" /> 跳舞</label>
</div>
</div>
</div>
<!-- 水平显示-->
<div class="row">
<div class="col-md-3">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" /> 唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" /> 跳舞
</label>
</div>
</div>
<!-- 单选框-->
<!-- 垂直显示-->
<div class="row">
<div class="col-md-3">
<div class="radio">
<label><input type="radio" name="sex" /> 男</label>
</div>
<div class="radio">
<label><input type="radio" name="sex" /> 女</label>
</div>
</div>
</div>
<!-- 水平显示-->
<div class="row">
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="sex" value="" /> 男
</label>
<label class="radio-inline">
<input type="radio" name="sex" /> 女
</label>
</div>
</div>
<!-- 按钮 -->
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button><br>
<!-- 通过按钮样式设置其他元素为按钮效果 -->
<a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<div class="btn btn-info">div标签</div>
<!-- 设置按钮的大小 -->
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success btn-lg">按钮</button>
<button class="btn btn-warning btn-sm">按钮</button>
<button class="btn btn-warning btn-xs">按钮</button>
<!-- 按钮禁用 -->
<!-- 在标签中添加disabled属性 -->
<button class="btn btn-info" onclick="alert('Hello');" disabled="disabled">按钮</button>
<!-- 在元素标签中添加类名"disabled"-->
<button class="btn btn-primary disabled" onclick="alert('Hello');">按钮</button>
</body>
</html>
7.6、表单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单布局</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
表单布局
水平表单
设置样式： .form-horizontal
内联表单
设置样式： .form-inline
-->
<form action="#" class="form-horizontal" role="form">
<h2 align="center">用户信息表</h2>
<!-- 表单中的表单元素组-->
<div class="form-group">
<label for="uname" class="control-label col-md-2">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-md-2">密码</label>
<div class="col-md-8">
<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">爱好</label>
<div class="col-md-8 col-md-offset-1">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" /> 唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" /> 跳舞
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">城市</label>
<div class="col-md-8">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<div class="form-group">
<label for="remark" class="control-label col-md-2">简介</label>
<div class="col-md-8">
<textarea id="remark" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-5">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
<hr />
<form class="form-inline">
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" id="userName" class="form-control" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label for="userPwd">密码</label>
<input type="text" id="userPwd" class="form-control" placeholder="请输入密码" />
</div>
<div class="form-group">
<button class="btn btn-default">提交</button>
</div>
</form>
</body>
</html>
7.7、缩略图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缩略图</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jay.jpeg" style="width: 240px;height: 360px;">
<h3>周杰伦</h3>
<p>出生于台湾省，歌手。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jj.png" style="width: 240px;height: 360px;">
<h3>林俊杰</h3>
<p>出生于新加坡，歌手。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/hx.jpg" style="width: 240px;height: 360px;">
<h3>韩雪</h3>
<p>出生于江苏省，演员。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/qw.jpg" style="width: 240px;height: 360px;">
<h3>戚薇</h3>
<p>出生于四川省，演员。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
</div>
</div>
</body>
</html>
7.8、面板与导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面板</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="panel panel-warning">
<div class="panel-heading">
<h2 align="center">明星合集</h2>
</div>
<div class="panel-body">
<div class="row">
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jay.jpeg" style="width: 240px;height: 360px;">
<h3>周杰伦</h3>
<p>出生于台湾省，歌手。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jj.png" style="width: 240px;height: 360px;">
<h3>林俊杰</h3>
<p>出生于新加坡，歌手。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/hx.jpg" style="width: 240px;height: 360px;">
<h3>韩雪</h3>
<p>出生于江苏省，演员。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/qw.jpg" style="width: 240px;height: 360px;">
<h3>戚薇</h3>
<p>出生于四川省，演员。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>面包屑式导航菜单</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
<hr>
<p>分页导航</p>
<ul class="pagination">
<li><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="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<p>翻页导航</p>
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
7.9、下拉菜单与模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<!-- 引入BootStrap的核心css文件 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入BootStrap的核心js文件 -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
下拉菜单
1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
<div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中 使用font 制作下拉箭头
<span class="caret"></span>
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
9、激活状态（.active）和禁用状态（.disabled）
-->
<!-- 使用一个类名为dropdown 或 btn-group的div 包裹整个下拉框；默认向下dropdown，向上弹起加入 . dropup 即可 -->
<div class="dropdown">
<!-- 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性 -->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<!-- 设置下拉箭头 -->
<span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个ul列表，并且定义一个类名为 dropdown-menu -->
<ul class="dropdown-menu">
<!-- 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能 -->
<li class="dropdown-header"> -- 科普 --</li>
<li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">人与自然</a></li>
<!-- 分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能 -->
<li class="divider"></li>
<li class="dropdown-header"> -- 搞笑 --</li>
<li class="active"><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">快乐大本营</a></li>
<li class="disabled"><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">欢乐喜剧人</a></li>
<li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">生活大爆炸</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模态框</title>
<!-- 引入BootStrap的核心css文件 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入BootStrap的核心js文件 -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
操作模态框
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框
打开模态框：$('#identifier').modal('show')
关闭模态框：$('#identifier').modal('hide')
-->
<!-- 通过 data 属性 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
<!-- 通过 JavaScript -->
<button class="btn btn-primary" id="btn">打开模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="uname" class="col-md-2 control-label">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
</div>
</div>
<div class="form-group">
<label for="upwd" class="col-md-2 control-label">密码</label>
<div class="col-md-8">
<input type="text" id="upwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
// 绑定按钮的点击事件
$("#btn").click(function(){
// 手动打开模态框
$("#myModal").modal("show");
});
// 关闭模态框
$("#submit_btn").click(function(){
// 手动关闭模态框
$("#myModal").modal("hide");
});
</script>
</body>
</html>
八、LayUI
8.1、layUI使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui的使用</title>
<!-- LayUI的核心CSS文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<!-- LayUI的核心JS文件（采用模块化引入） -->
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
8.2、布局容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局容器</title>
<!-- 引入LayUI的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
</head>
<body>
<!--
布局容器
1. 固定宽度（两侧有留白效果）
2. 完整宽度（占据屏幕宽度的100%）
-->
<!-- 固定宽度（两侧有留白效果） -->
<!-- <div class="layui-container" style="background-color: navajowhite;height: 300px;">
固定宽度
</div> -->
<!-- 完整宽度（占据屏幕宽度的100%） -->
<div class="layui-fluid" style="background-color: cyan;height: 300px;">
完整宽度
</div>
</body>
</html>
8.3、栅格网格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格系统</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
</head>
<body>
<!--
栅格系统
列组合
1. 定义行 .layui-row
2. 定义列 .layui-col-md*
md 表示不同屏幕的标识（xs、sm、md、lg）
* 表示列的数量
3. 每一行被均分为12列，列的总数不能超过12，否则会自动换行
4. 响应式规则
栅格会自动根据屏幕的分辨率选择对应的样式效果。
列边距
.layui-col-space*
* 代表的是px值（1~30）
列偏移
将列向右移动指定列数
.*layui-col-md-offset*
* 代表的是列数
列嵌套
列之间可以无限嵌套列
-->
<!-- 布局容器 -->
<div class="layui-container">
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md5" style="background-color: deepskyblue;">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: bisque;">
内容7/12
</div>
</div>
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md4" style="background-color: powderblue;">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine;">
内容4/12
</div>
<div class="layui-col-md6" style="background-color: grey;">
内容6/12
</div>
</div>
<!-- 响应式规则 -->
<hr>
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4"
style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm4 layui-col-md6"
style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm12 layui-col-md8"
style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>
<hr>
<h3>列边距</h3>
<div class="layui-row layui-col-space20">
<div class="layui-col-md4" >
<div style="background-color: hotpink">4</div>
</div>
<div class="layui-col-md4" >
<div style="background-color: indianred">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: powderblue">4</div>
</div>
</div>
<hr />
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" >
<div style="background-color: cyan">4</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4" >
<div style="background-color: fuchsia">
向右移动4列
</div>
</div>
</div>
<hr />
<h3>列嵌套</h3>
<div class="layui-row">
<div class="layui-col-md6" >
<div style="background-color: mediumaquamarine">
<div class="layui-row">
<div class="layui-col-md3" style="background-color: burlywood;" >
内部列
</div>
<div class="layui-col-md5" style="background-color: indianred;">
内部列
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine;">
内部列
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
8.4、按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
</head>
<body>
<!--
按钮
向任意HTML元素设定*class="layui-btn"*，建立一个基础按钮。
通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。
-->
<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
<hr>
<!-- 不同主题的按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
<hr>
<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button>
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>
<hr>
<!-- layui-btn-radius 圆角按钮 -->
<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
<hr>
<!-- 图标按钮 -->
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i> 刷新
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
<i class="layui-icon layui-icon-heart"></i> 关注
</button>
</body>
</html>
8.5、导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
导航
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
垂直导航 layui-nav layui-nav-tree
侧边导航 layui-nav layui-nav-tree layui-nav-side
导航的主题颜色
layui-bg-颜色
墨绿 molv
藏青 cyan
艳蓝 blue
面包屑式导航
layui-breadcrumb
通过lay-separator="符号"设置面包屑导航的分割符
-->
<!-- 水平导航 layui-nav -->
<!-- <ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul> -->
<!-- 垂直导航 layui-nav layui-nav-tree -->
<!-- <ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul> -->
<!-- 侧边导航 layui-nav layui-nav-tree layui-nav-side -->
<!-- <ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul> -->
<!-- 设置导航的主题颜色 -->
<!-- <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-molv">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品 <span class="layui-badge">6</span></a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul> -->
<!-- 面包屑式导航 -->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br>
<!-- 设置属性 lay-separator="" 来自定义分隔符 -->
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element',function(){
var element = layui.element;
});
</script>
</body>
</html>
8.6、选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
选项卡
默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card
可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
-->
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 简洁风格 -->
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 卡片风格 -->
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除 -->
<div class="layui-tab layui-tab-card" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<script type="text/javascript">
// 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
8.7、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
</head>
<body>
<!--
表格
class="layui-table"
常用属性
lay-even 如果设置了该属性，则可以显示隔行换色的效果
lay-skin 设置表格边框风格
line （行边框风格）
row （列边框风格）
nob （无边框风格）
lay-size 设置表格的尺寸
sm （小尺寸）
lg （大尺寸）
-->
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
<hr>
<table class="layui-table" lay-even lay-skin="row" lay-size="lg">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
</body>
</html>
8.8、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
表单
常用属性：
required 浏览器固定的必填字段
lay-verify 需要验证的类型 （required表示必填项）
class="layui-input" 提供的通用的样式
class="layui-input-block" 占据全部宽度
class="layui-input-inline" 占据部分宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充 （当浏览器中缓存中存在相同name属性的值时，会填充）
通过追加 layui-form-pane 的class，来设定表单的方框风格
-->
<!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
<form action="" class="layui-form layui-form-pane">
<!-- 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 -->
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<!-- 文本框 -->
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<select name="city" lay-verify="required" >
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021" selected>上海</option>
<option value="0571" disabled>杭州</option>
</select>
<!-- 分组 -->
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
<!-- 开启搜索匹配 -->
<select name="city" lay-verify="" lay-search>
<option value ="">请选择</option>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571">layim</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!--
复选框
1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
2. 通过checked属性设置被选中的项
3. 通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始效果）
4. 通过disabled属性禁用元素
-->
<!-- 默认效果 -->
<input type="checkbox" name="hobby" title="唱歌" checked value="sing" />
<input type="checkbox" name="hobby" title="跳舞" value="dance"/>
<input type="checkbox" name="hobby" title="Rap" disabled />
<br>
<!-- 原始效果 -->
<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />
<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance"/>
<input type="checkbox" name="hobby" title="Rap" lay-skin="primary" disabled/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<!--
开关
将复选框，设置lay-skin="switch"形成开关风格
1. 通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分隔
2. 通过checked设置默认打开状态
3. 通过disabled属性禁用开关
4. 通过value属性设置选中的值
-->
<input type="checkbox" name="aa" lay-skin="switch" />
<input type="checkbox" name="bb" lay-skin="switch" checked />
<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!--
单选框
1.通过checked设置默认选中项
2. 通过disabled属性禁用单选框
3. 通过value属性设置选中的值
-->
<input type="radio" name="sex" value="nan" title="男" >
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-inline">
<!--
文本域
class="layui-textarea"：layui.css提供的通用CSS类
-->
<textarea name="remark" required lay-verify="required" placeholder="请输入个人简介"
class="layui-textarea">
</textarea>
</div>
</div>
<!--
组装行内表单
class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内
-->
<div class="layui-form-item">
<!-- 定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">原始效果</label>
<div class="layui-input-inline">
<!-- 可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。 -->
<input type="radio" name="sex" value="nan" title="男" lay-ignore>
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<hr/><br>
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则 会看起来比较别扭），如：
-->
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>
<!-- 加载模块 -->
<script type="text/javascript">
// 加载form模块
layui.use("form",function(){
var form = layui.form;
});
</script>
</body>
</html>
8.9、弹出层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出层</title>
<!-- 作为独立组件使用 -->
<!-- <link rel="stylesheet" type="text/css" href="layer/layer.css"/>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script> -->
<!-- layui模块化使用 -->
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
两种使用方式：
1. 作为独立组件使用
在layer独立版本官网下载组件包，在需要使用layer的页面加载1.8版本以上的jquery的js文件和layer.js文件
2. layui模块化使用
只需要引入layui的css与js文件，在script中使用layui.use()加载模块
-->
<span>内容1</span>
<span>内容2</span>
<span>内容3</span>
<span id="sp">内容4</span>
<script type="text/javascript">
// 使用layer
// layer.msg("Hello");
// 加载模块
layui.use("layer",function(){
var layer = layui.layer;
// 使用layer
// layer.msg("Hi");
/* 信息框 */
/* layer.open({
type:0,
// title:"系统消息",
title:false, // 不显示标题
title:['标题','color:red;'],
// content可以传入任意的文本或html
content:"Hello"
}); */
/* 页面层 */
/* layer.open({
type:1,
title:"系统消息",
// content可以传入任意的文本或html
content:"<div style='height:200px;width:400px'>Hello</div>"
}); */
/* iframe */
/* layer.open({
type:2,
title:"系统消息",
// content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no']
content:"http://www.baidu.com"
// content:["http://www.baidu.com",'no']
// ,area: '500px' // 设置宽度，高度自适应
,area:['800px', '400px'] // 设置宽高
}); */
/* tips层 */
/* layer.open({
type: 4,
content: ['内容', '#sp'] //数组第二项即吸附元素选择器或者DOM
}); */
// eg1
//layer.alert('酷毙了', {icon: 2});
// eg2
// layer.msg('不开心。。', {icon: 5});
// eg3
// layer.load(2); // 风格1的加载
// eg1
//layer.alert('很高兴见到你😊', {icon: 6});
// eg2
/* layer.msg('你愿意和我做朋友么？', {
time: 0, //不自动关闭
btn: ['当然愿意', '狠心拒绝'], // 按钮
yes: function(index){
layer.close(index); // 关闭当前弹出框
layer.msg('新朋友，你好！', {
icon: 6, // 图标
btn: ['开心','快乐']
});
}
}); */
// eg3
//layer.msg('这是常用的弹出层');
// eg4
// layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});
// eg5
layer.msg('玩命加载中...=￣ω￣=', function(){
// 关闭后的操作
layer.msg('(⊙o⊙)？');
});
});
</script>
</body>
</html>
8.10、日期、时间、选择、分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期与时间选择</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date2" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date3" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date4" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date5" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date6" />
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date7" />
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date8" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date9" />
</div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laydate',function(){
var laydate = layui.laydate;
// 加载laydate示例
laydate.render({
elem:"#date1" // 绑定id为date1的元素
});
laydate.render({
elem:"#date2" ,// 绑定id为date1的元素
type:"year" // 年选择器
});
laydate.render({
elem:"#date3" ,// 绑定id为date1的元素
type:"month" // 年月选择器
});
laydate.render({
elem:"#date4" ,// 绑定id为date1的元素
type:"date" // 年月日选择器
});
laydate.render({
elem:"#date5" ,// 绑定id为date1的元素
type:"time" // 时间（时分秒）选择器
});
laydate.render({
elem:"#date6" ,// 绑定id为date1的元素
type:"datetime" // 年月日时分秒选择器
});
//自定义日期格式
laydate.render({
elem: '#date7'
//,format: 'yyyy年MM月dd日' //可任意组合
,format: 'yyyy/MM月dd日'
});
// 传入符合format格式的字符给初始值
laydate.render({
elem: '#date8'
,value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传入Date对象给初始值
laydate.render({
elem: '#date9'
,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laypage模块
layui.use("laypage",function(){
var laypage = layui.laypage;
// 加载laypage实例
/* laypage.render({
elem:"page", // elem属性绑定的是容器的ID属性值，不需要加#
count:100, // 总数量，一般是从服务器获取
limit:5, // 每页显示的数量
limits:[5,10,20,30], // 每页条数的选择项
layout:['prev', 'page', 'next','limit','count'], // 自定义排版
groups:10, // 连续显示的页码数
}); */
/* 切换分页的回调 */
laypage.render({
elem: 'page'
,count: 100 //数据总数，从服务端得到
,groups:10 // 连续出现的页码个数
,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
,jump: function(obj, first){
// obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
}
}
});
});
</script>
</body>
</html>
8.11、数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table id="demo"></table>
<hr>
<!-- 方法渲染 -->
<!-- 准备容器（标签），设置id属性值 -->
<table id="demo2"></table>
<!--
自动渲染
1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
-->
<!-- <table class="layui-table" lay-data="{url:'js/user.json',page:true}">
<thead>
<tr>
<th lay-data="{field:'id',width:100}">ID</th>
<th lay-data="{field:'username'}">用户名</th>
<th lay-data="{field:'sex', sort: true}">性别</th>
</tr>
</thead>
<!-- 转换静态表格-->
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 加载table模块
layui.use("table",function(){
var table = layui.table;
// 加载table实例
/* table.render({
elem:"#demo", // elem属性用来绑定容器的id属性值
url:"js/user.json", // 数据接口
cols:[[
{field:'id',title:'用户编号',sort:true,width:120},
{field:'username',title:'用户姓名',width:100},
{field:'sex',title:'性别',width:100,sort:true},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名'}
]],
}); */
/* 方法渲染 */
// 执行渲染
/* table.render({
elem: '#demo2' // 指定原始表格元素选择器（推荐id选择器）
,url: 'js/user.json' // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
]]
}); */
/* 转换静态table */
// 转换静态表格
table.init('demo', {
height: 315 // 设置高度
// 支持所有基础参数
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<!-- 准备容器（标签），设置id属性值 -->
<table id="demo" lay-filter="test"></table>
<!-- 表格工具栏 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- lay-event 给元素绑定事件名 -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
<!-- 表头工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
// 加载table模块
layui.use("table",function(){
var table = layui.table;
var $ = layui.jquery; // 获取jquery对象
// 加载table实例
table.render({
elem:"#demo", // elem属性用来绑定容器的id属性值
url:"js/user.json", // 数据接口
cols:[[
// 设置序列号列
{field:'aa',type:"numbers"},
// 设置复选框列
{field:'aa',type:"checkbox"},
{field:'id',title:'用户编号',sort:true,width:120,hide:true},
{field:'username',title:'用户姓名',width:100,edit:'text'},
{field:'sex',title:'性别',width:100,sort:true},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名',edit:'text'},
// 设置表头工具栏
{field:"操作",toolbar:"#barDemo"}
]],
// 开启分页
page:true,
// 设置表格工具栏
toolbar:"#toolbarDemo"
});
/**
* 头监听事件
* 语法：
* table.on('toolbar(demo)',function(obj){
});
注：demo表示的是容器上设置的lay-filter属性值
*/
table.on('toolbar(test)',function(obj){
// console.log(obj);
// obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo
// 获取当前表格被选中记录对象，返回数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
// 获取事件名
var eventName = obj.event;
// 判断事件名，执行对应的代码
switch (eventName){
case "getCheckData":
// 获取被选中的记录的数组
var arr = checkStatus.data;
// 将数组解析成字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
// 获取被选中的记录的数组
var arr = checkStatus.data;
layer.msg("选中了" + arr.length +"条记录！")
break;
case "isAll":
// 通过isAll属性判断是否全选
var flag = checkStatus.isAll;
var str = flag ? '全选' : '未全选';
layer.msg(str);
break;
case "LAYTABLE_TIPS":
layer.alert("这是一个自定义的图标按钮");
break;
}
});
/**
* 监听行工具栏事件
*/
table.on('tool(test)',function(obj){
// 得到当前操作行的相关信息
var tr = obj.data;
console.log(tr);
// 得到事件名
var eventName = obj.event;
// 判断事件名，执行对应的方法
if (eventName == 'del') { // 删除
// 确认框
layer.confirm("您确认要删除吗？",function(index){
// 删除指定tr del()
obj.del();
// 关闭弹出层（index是当前弹出层的下标）
layer.close(index);
});
} else if (eventName == 'edit') { // 编辑
// 输出框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType:0,
value:tr.username // 设置输入框的值
},function(value,index){
// 修改指定单元格的值
// value表示输入的值
obj.update({
username:value
});
// 关闭弹出层
layer.close(index);
});
}
});
/**
* 监听单元格编辑事件
* 表头设置edit属性， 单元格编辑类型（默认不开启）目前只支持：text（输入框）
*/
table.on('edit(test)',function(obj){
console.log(obj);
// 获取修改后的值
var value = obj.value;
// 得到当前修改的tr对象
var data = obj.data;
// 得到修改的字段名
var field = obj.field;
layer.msg("【ID:"+data.id+"】的"+field+"字段的值修改为：" + value);
});
/**
* 给指定元素绑定事件
*/
$(document).on('click','#searchBtn',function(data){
// 获取搜索文本框对象
var sreach = $("#demoReload");
// 调用数据表格的重载方法 table.reload(ID, options)
table.reload('demo',{
where:{ // 设置需要传递的参数
id:sreach.val(),
name:"zhangsan"
},
page:{
// 表示让条件查询从第一页开始；如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
curr:1 // 从第一页开始
}
});
});
});
</script>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)