LayUI MINI

layui mini官网：http://layuimini.99php.cn/

一.layui mini的基本介绍：

参考案例：

二.layui mini的下载：

下载到本地并解压

将解压后的layuimini直接拖到编写前端文件的网页中
将自己需要的东西复制到自己的前端网页中即可。

BootStrap

官网：https://getbootstrap.com/
中文网：https://www.bootcss.com/

一.定义

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的。

二.下载和使用

2.1下载与使用

下载 https://v3.bootcss.com/getting-started/
下载完成后
拷贝dist/css中的bootstrap.min.css到项目的css中
拷贝dist/js中的bootstrap.min.js到项目的js中
下载jquery
https://jquery.com/
在html中模板为：


<!DOCTYPE html>
<html lang="en">
<head><!--设置当前HTML文件的字符编码--><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,user-scalable=no"><!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ --><title>Bootstrap基本的HTML模板</title><!--引入Bootstrap的css--><link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body><div><h1>Hello，world！</h1></div>
</body><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery--><script src="jquery/jquery-3.2.1.js"></script><!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用--><script src="bootstrap/js/bootstrap.js"></script><!--自己写的js文件放在body最下面-->
</html>

三.布局容器和栅格网格系统

3.1 布局容器

布局容器

.container类用于固定宽度并支持响应式布局的容器<div class="container"></div>
.container-fluid类用于100%宽度，占据全部视图(viewport)的容器<div class="container-fluid"></div>

<!--.container类用于固定宽度并支持响应式布局的容器-->
<div class="container" style="background-color: #31B0D5; height: 500px;">.container类用于固定宽度并支持响应式布局的容器
</div><!--.container-fluid类用于100%宽度，占据全部视图(viewport)的容器-->
<div class="container-fluid" style="background-color: #31B0D5; height: 500px;>.container-fluid类用于100%宽度，占据全部视图(viewport)的容器
</div>

3.2 栅格网格系统

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>栅格网格系统</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" </head><body><!--布局容器--><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: #5BC0DE;">4</div><div class="col-md-8 col-lg-8" style="background-color: #5CB85C;">8</div></div><!--列组合--><div class="row"><div class="col-md-1" style="background-color:#B9DEF0 ;">1</div><div class="col-md-1" style="background-color:#8C8C8C ;">1</div><div class="col-md-1" style="background-color:#C7DDEF ;">1</div><div class="col-md-1" style="background-color:#23527C ;">1</div>                </div><hr><div class="row"><div class="col-md-6" style="background-color:#D58512 ;">6</div><div class="col-md-6" style="background-color:#C7DDEF ;">6</div></div><hr><div class="row"><div class="col-md-4" style="background-color:#D0E9C6 ;">4</div><div class="col-md-4" style="background-color:#EBCCD1 ;">4</div><div class="col-md-4" style="background-color:#F7E1B5 ;">4</div>              </div><hr><!--列的总数不能超过12--><div class="row"><div class="col-md-4" style="background-color:#D0E9C6 ;">4</div><div class="col-md-4" style="background-color:#EBCCD1 ;">4</div><div class="col-md-6" style="background-color:#F7E1B5 ;">4</div>               </div><hr/><!--列偏移--><div class="row"><div class="col-md-1" style="background-color:#B9DEF0 ;">1</div><div class="col-md-1 col-md-offset-4" style="background-color:#8C8C8C ;">1</div><div class="col-md-1" style="background-color:#C7DDEF ;">1</div><div class="col-md-1" style="background-color:#23527C ;">1</div>               </div></div></body>
</html>

结果展示：

3.3 列排序与列嵌套

3.3.1 列排序

<div class="row"><div class="col-md-1" style="background-color:#FAF2CC ;">1</div><div class="col-md-1 col-md-push-1" style="background-color:#C7DDEF;">1</div><div class="col-md-1" style="background-color:#D6E9C6 ;">1</div><div class="col-md-1 col-md-pull-1"  style="background-color:#F7E1B5 ;">1</div>
</div>

结果展示：

3.3.2 列嵌套

<!--列嵌套-->
<div class="row"><div class="col-md-6" style="background-color: #9ACFEA;"><div class="row"><div class="col-md-1" style="background-color:#D0E9C6 ;">1</div><div class="col-md-9" style="background-color:#EBCCD1 ;">9</div><div class="col-md-1" style="background-color:#F7E1B5 ;">1</div><div class="col-md-1" style="background-color:#ADADAD ;">1</div>               </div></div><div class="col-md-6" style="background-color: aquamarine;">6</div>
</div>

结果展示：

分辨率

<div class="row"><div class="col-md-3 col-sm-6" style="background-color:#D0E9C6 ;">3</div><div class="col-md-3 col-sm-6" style="background-color:#EBCCD1 ;">3</div><div class="col-md-3 col-sm-6" style="background-color:#F7E1B5 ;">3</div><div class="col-md-3 col-sm-6" style="background-color:#ADADAD ;">3</div>
</div>

结果展示：

四.常用样式

4.1 排版

4.1.1 标题

BootStrap和普通的html页面一样，定义标题都是使用标签<h1>和<h6>,只不过BootStrap覆盖了其默认的样式，使用其在所有浏览下显示的效果一样，为了让非标题元素和标题使用相同的样式，还特意定义了.h1-.h6六个类名，同时后面可以紧跟着一行小的副标题<small></small>或使用.small
bootstrap对h1~h6的标题效果进行覆盖
提供了对应的类名,为非标题元素设置样式 .h1~.h6
副标题small标签或.small类名

<!--标题--><h1>标题一<small>副标题</small></h1><h2>标题二<span class="small">副标题2</span></h2><h3>标题三</h3><div class="h1">hello,world!!!</div>

结果展示：

4.1.2 段落

通过.lead来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理)
<small>:小号字
<b><strong>:加粗
<i><em>:斜体

<p>通过.lead来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理)</p>
<p class="lead">通过.lead来突出<small>强调</small><b>内容</b>(其作用就是<strong>增大</strong>文本<em>字号</em>,加粗<i>文本</i>,而且对行高和margin也做相应的处理)</p>

结果展示：

4.1.3 强调

定义了一套类名，这里称其为强调类名，这些强调类都是1通过颜色来表示强调。

text-muted：提示，使用浅灰色
text-primary：主要，使用蓝色
text-success：成功，使用浅绿色
text-info：通知信息，使用浅蓝色
text-warning：警告，使用黄色
text-danger：危险，使用褐色

<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>

4.1.4 对齐效果

在CSS中常常使用text-align来实现文本的对齐风格的设置。

其中主要有四种风格：

左对齐：left
居中对齐：center
右对齐：right
两端对齐：justify

为了简化操作，方便使用，BootStrap通过定义四个类名来控制文本的对齐风格

左对齐：text-left
居中对齐：text-center
右对齐：text-right
两端对齐：text-justify

<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">9、一些事情渐渐变得淡灭，你知道它存在过，但却已经忘记怎样的存在过。陌路尽头,撒去一抨惨淡暗白的骨灰,有多少淡漠的人情能够留得住厚养薄葬的遗憾,在悲郁的挽歌的尾音上,给这尊尊沉默的青碑下孤孑的魂灵叩首,而在这朝生暮死之间,有多少尸骨未寒的魂灵遁入空寂,却在人世中再也捞不起一丝纪念</p>

结果展示：

4.1.5 列表

在html文档中，列表结构主要有三种：

无序列表<ul><li>...</li></ul>
有序列表<ol><li>...</li></ol>
定义列表<dl><dt>...</dt><dd>...</dd></dl>

4.1.5.1 去点列表

class=“list-unstyled”

<ul class="list-unstyled"><li>无序项目列表1</li><li>无序项目列表1</li>
</ul>

结果展示：

4.1.5.2 内联列表

class=“list-inline”,把垂直列表换成1水平列表，而且去掉项目符号，保持水平显示，也可以说内联列表就是为制作水平导航而生。

<ul class="list-inline"><li>首页</li><li>婚纱页</li><li>汉服页</li><li>反馈</li>
</ul>

结果展示：

4.1.5.3 定义列表

在原有的基础上加入了一些样式，使用样式class="dl-horizontal"制作水平定义列表，当标题宽度超过160px时，将显示三个省略号。

<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表是一种样式表语言</dd></dl><dl class="dl-horizontal"><dt>HTML</dt><dd>超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</dd><dt>折叠标记符
标记符说明该文件是用HTML来描述的。它是文件的开头，而则表示该文件的结尾，它们是HTML文件的始标记和尾标记。</dt><dd>层叠样式表是一种样式表语言</dd></dl>

结果展示：

4.1.6 代码

用于显示代码风格，在BootStrap主要提供了三种代码风格：

使用<code></code>来显示单行内联代码。
使用<pre></pre>来显示多行块代码。
样式：pre-scrollable(height,max-height高度固定，为340px，超过存在滚动条)
使用<kbd></kbd>来显示用户输入代码，如快捷键。

4.1.6.1 单行内联代码

 HTML:超文本标记语言<br/><code>HTML:超文本标记语言</code><br /><code>HTML:超文本标记语言<br/>HTML:超文本标记语言</code>

结果展示：

4.1.6.2 快捷键

 <!--快捷键--><p>使用<kbd>Ctrl</kbd>+<kbd>c</kbd>复制,<kbd>Ctrl</kbd>+<kbd>v</kbd>粘贴</p>

结果展示：

4.1.6.3 多行代码块

<!--多行代码:代码会保留原本的格式,包括空格和回车--><pre>public class SetSessionServlet extends HttpServlet {//全局统计int  count=0;private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 创建作用域对象，request直接使用HttpSession session = request.getSession();// 创建session对象if(session.isNew()) {count++;System.out.println("有新用户访问了，当前用户数量是:"+count);}               }</pre><!--显示html代码需要使用字符实体--><pre>&lt;h2&gt;你好&lt;/h2&gt;</pre><!--当长度超过指定值,可以添加滚动条--><pre class="pre-scrollable"><ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li><li>有序列表5</li><li>有序列表6</li><li>有序列表7</li><li>有序列表8</li><li>有序列表9</li><li>有序列表10</li></ol></pre>

结果展示：

4.1.7 表格

基础样式

.table:基础表格

附加样式

.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

状态类
通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

 <table class="table table-bordered table-striped"><tr class="info"><th>星期一</th><th>星期二</th><th>星期三</th></tr><tr class="success"><td>数据库</td><td>java</td><td>linux</td></tr><tr class="active"><td>高等数学</td><td>线性代数</td><td>c语言</td></tr><tr class="warning"><td>数据库</td><td>java</td><td>linux</td></tr><tr class="danger"><td>高等数学</td><td>线性代数</td><td>c语言</td></tr></table>

结果展示：

4.2 表单

4.2.1 输入框，下拉选择框，文本域

<body><!--表单1.文本框.form-control表单元素的样式表单控件的大小    .input-lg   .input-sm2.下拉框.form-control表单元素的样式multiple="multiple"设置下拉多选3.文本域.form-control表单元素的样式--><input type="text" /><br><select><option>请选择城市</option><option>上海</option><option>北京</option></select><br><textarea></textarea><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" 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>
</body>

结果展示：

4.2.2 单选框和复选框

<body>
<!--1.复选框垂直显示  .checkbox水平显示 .checkbox-inline2.单选框垂直显示  .redio水平显示 .redio-inline
-->
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女<hr /><!--复选框-->
<!--垂直显示-->
<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"/>男</label><label class="radio-inline"><input type="radio" name="sex"/>女</label></div>
</div>
</body>

结果展示：

4.2.3 按钮

使用按钮
基础样式：.btn
附加样式：.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link
多标签使用
其他标签可以通过添加按钮样式设置成按钮效果(a标签，span标签等)
按钮大小
大按钮：.btn-lg
正常按钮: .btn-sm
小按钮: .btn-xs
按钮禁用
通过disabled属性(真正的禁用元素)
通过disabled样式(样式上禁用)

<button>按钮</button>
<input type="button" value="按钮"/>
<hr />
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">首选项按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">链接按钮</button><hr>
<!--通过按钮样式设置其他元素为按钮效果-->
<a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<div class="btn btn-info">div标签</div><hr>
<!--设置按钮的大小-->
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary btn-lg">首选项按钮</button>
<button class="btn btn-success btn-sm">成功按钮</button>
<button class="btn btn-info btn-xs">信息按钮</button><hr>
<!--按钮禁用-->
<!--在标签中添加disabled属性-->
<button class="btn btn-warning" onclick="alert('hello')" disabled="disabled">警告按钮</button>
<!--在元素标签中添加类名"disabled"-->
<button class="btn btn-primary disabled" onclick="alert('hello')" >警告按钮</button>

结果展示：

4.2.4 表单布局

创建基本表单的步骤：

向父<form>元素添加role=“form”.
把标签和控件放在一个带有class.form-group的<div>中，这是获取最佳间距所必需的。
向所有的文本元素<input>,<textarea>和<select>添加class=“form-control”.

4.2.4.1 水平表单

同一行显示form-horizontal
配合BootStrap框架的网格系统

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单布局</title><link rel="stylesheet" href="bootstrap/css/bootstrap.css" /></head><body><!--表单布局水平表单设置样式：form-horizontal--><form action="#" method="" class="form-horizontal" role="form"><h2 align="center">用户信息表</h2><!--表单中的表单元素组--><div class="form-group"><!--label的form属性指向表单元素的id属性--><label for="uname" class="control-label col-md-2">姓名</label><div class="col-md-6"><input type="text" id="uname" class="form-control" placeholder="请输入姓名" /></div></div><div class="form-group"><!--label的form属性指向表单元素的id属性--><label for="upwd" class="control-label col-md-2">密码</label><div class="col-md-6"><input type="text" id="uname" class="form-control" placeholder="请输入密码" /></div></div><div class="form-group"><label class="control-label col-md-2">爱好</label><div class="col-md-6 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-6"><select class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select></div></div><div class="form-group"><label class="control-label col-md-2">简介</label><div class="col-md-6"><textarea id="remark" class="form-control"></textarea></div></div><div class="form-group"><div class="col-md-6 col-md-offset-4"><button class="btn btn-primary">提交</button></div></div></form></body>
</html>

结果展示：

4.2.2.2 内联表单

将表单的控件都在一行内显示form-inline
注意：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。

<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>

结果展示：

4.3 缩略图

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>缩略图</title><link rel="stylesheet" href="bootstrap/css/bootstrap.css" /></head><body><div class="container"><div class="row"><!--缩略图--><div class="col-md-3"><div class="thumbnail"><img src="img/1.jpg" style="width: 180px; height: 250px;"><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/2.jpg" style="width: 180px; height: 250px;"><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/3.jpg" style="width: 180px; height: 250px;"><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/4.jpg" style="width: 180px; height: 250px;"><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>

结果展示：

4.4 面板

<div class="panel panel-warning"><div class="panel-heading">明星合集</div><div class="panel-body">123</div></div>

结果展示：

五.BootStrap插件

5.1 导航

基本样式：.nav与"nav-tabs","nav-pills"组合制作导航
分类：
- 标签型(nav-tabs)导航
- 胶囊型(nav-pills)导航
- 堆栈(nav-stacked)导航
- 自适应(nav-justified)导航
- 面包屑式(breadcrumb)导航,不与nav一起使用，直接加入到ol,ul中即可，一般用于导航，主要是告诉用户现在所处页面的位置(当前位置)
状态
- 选中状态active样式
- 禁用状态：disable
二级菜单

<p>标签式的导航菜单</p><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">Git</a></li><li><a href="#">Java</a></li><li><a href="#">Linux</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="#">Git</a></li><li><a href="#">Java</a></li><li><a href="#">Linux</a></li></ul><p>面包屑式导航菜单</p><ul class="breadcrumb"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">Git</a></li><li><a href="#">Java</a></li><li><a href="#">Linux</a></li></ul>

结果展示：

5.2 分页导航

分页导航分为页码导航和翻页导航

页码导航：ul标签上加pagination[pagination-lg | pagination-sm]
翻页导航：ul标签上加pager

5.2.1 页码导航

<p>分页导航</p>
<ul class="pagination"><li><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="#">5</a></li><li><a href="#">&raquo;</a></li>
</ul>

结果展示：

5.2.2 翻页导航

<p>翻页导航</p>
<ul class="pager"><li><a href="#">上一页</a></li><li><a href="#">下一页</a></li>
</ul>

结果展示：

5.3 下拉菜单

在使用BootStrap框架的下拉菜单时，必须使用两个js

<!--如果要使用BootStrap的js插件，必须先调用jQuery-->
<script type="text/javascript" src="jquery/jquery-3.2.1.js" ></script>
<!--所有bootstrap的js插件或者根据需要使用的js插件调用-->
<script type="text/javascript" src="bootstrap/js/bootstrap.js" ></script>

使用一个类名为dropdown或btn-group的div包裹整个下拉框：<div class="dropdown"></div>
默认向下dropdown，向上弹起加入，dropup即可
使用button作为父菜单，使用类名：dropdown-toggle和自定义data-toggle属性<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
在button中，使用font制作下拉箭头<span class="caret"></span>
下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu"
分组分割线：li添加类名"divider"来实现添加下拉分割线的功能
分组标题：li 添加类名"dropdown-header"来实现分组功能
对齐方式
dropdown-menu-left 左对齐默认样式
dropdown-menu-right 右对齐
激活状态(.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>添加类名"divider"来实现添加下拉分割线的功能--><li class="divider"></li><li class="dropdown-header">搞笑</li><li class="active"><a  href="#" target="_blank">德云斗笑社</a></li><li class="disabled"><a  href="#" target="_blank">生活大爆炸</a></li><li><a  href="#" target="_blank">德云斗笑社2</a></li></ul>
</div>

结果展示：

5.4模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

5.4.1 用法

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：$('#identifier').modal(options)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>模态框</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.css" /><!--引入jquery核心js文件，需要在bootstrap的js之前引入--><script type="text/javascript" src="jquery/jquery-3.2.1.js" ></script><!--引入BootStrap的核心js文件--><script type="text/javascript" src="bootstrap/js/bootstrap.js" ></script></head><body><!--通过data属性--><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button><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">&times;</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></div></div><!--通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框打开模态框  $('#identifier').modal('show')关闭模态框  $('#identifier').modal('hide')--><script type="text/javascript">//绑定按钮的点击事件$("#btn").click(function(){//手动打开模态框$("#myModal").modal("show");});$("#submit_btn").click(function(){//手动关闭模态框$("#myModal").modal("hide");});</script></body></html>

结果展示：

模态框详情见官方文档：https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

LayUI MINI和BootStrop相关推荐

基于layui的开源项目LAYUI MINI后台模板
介绍: 界面足够简洁清爽,响应式且适配手机端. 一个接口几行代码而已直接初始化整个框架,无需复杂操作. 页面支持多配色方案,可自行选择喜欢的配色. 支持多tab,可以打开多窗口. 支持无限级菜单和对f ...
【高校宿舍管理系统】第三章 Layui整合Axios
第三章 Layui整合Axios 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第三章 Layui整合Axios 前言一.下 ...
【高校宿舍管理系统】第四章创建前端项目以及完成登录页面
第四章创建前端项目以及完成登录页面提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第四章创建前端项目以及完成登录页面前言 ...
springboot 全局时间转换器
目录结构前言前端操作 Network Headers Network preview 后台日志信息问题所在解决办法一解决办法二参考链接前言前端框架:layui mini 后台框架:sp ...
推荐一款可视化前端布局器H5-表单设计器（MagicalCoder）
今天给大家介绍一款高定制化的前端纯js的布局器特性: 自由定制组件和属性大量api,callback与布局器交互同时支持可视化拖拽和编码并存设计表格:合并拆分等功能自由定位:任意位置都可 ...
axure 后台模板_大气漂亮美观的三个网站后台数据管理模板大大提升你的开发效率...
今天整理了三个我做项目经常使用的三个网站后台模板,这三个模板都是开源的,可以下载商用,可基于它们开发任何网站,做为后台管理数据.这样能为你开发后台功能节约大量的时间. 一.ok-admin 一个很赞的 ...
SSM框架之酒店管理系统三（菜单数据库设计，菜单列表查询渲染）
SSM框架之酒店管理系统三(菜单数据库设计,菜单列表查询渲染) 参考LAYUI MINI官网给出的数据库设计规范 Java示例(spring) · layuimini开发手册 (99php.cn) 数 ...
ztree 点击重载 layui table
ztree 点击重载 layui table <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
jQuery ajax bootstrap layui
jQuery 概述: jQuery是一个快速.简洁的javaScript代码库. jQuery设计宗旨是"Write less,do more". 提供一种简便的javaScrip ...

LayUI MINI和BootStrop

LayUI MINI

一.layui mini的基本介绍：

二.layui mini的下载：

BootStrap

一.定义

二.下载和使用

2.1下载与使用

三.布局容器和栅格网格系统

3.1 布局容器

3.2 栅格网格系统

3.3 列排序与列嵌套

3.3.1 列排序

3.3.2 列嵌套

四.常用样式

4.1 排版

4.1.1 标题

4.1.2 段落

4.1.3 强调

4.1.4 对齐效果

4.1.5 列表

4.1.5.1 去点列表

4.1.5.2 内联列表

4.1.5.3 定义列表

4.1.6 代码

4.1.6.1 单行内联代码

4.1.6.2 快捷键

4.1.6.3 多行代码块

4.1.7 表格

4.2 表单

4.2.1 输入框，下拉选择框，文本域

4.2.2 单选框和复选框

4.2.3 按钮

4.2.4 表单布局

4.2.4.1 水平表单

4.2.2.2 内联表单

4.3 缩略图

4.4 面板

五.BootStrap插件

5.1 导航

5.2 分页导航

5.2.1 页码导航

5.2.2 翻页导航

5.3 下拉菜单

5.4模态框

5.4.1 用法

LayUI MINI和BootStrop相关推荐

最新文章

热门文章