LayUI MINI和BootStrop

最新推荐文章于 2024-05-11 09:51:29 发布
最新推荐文章于 2024-05-11 09:51:29 发布
阅读量856 收藏 1
点赞数 1
文章标签： html layui BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serendipity_xr/article/details/120043910
版权

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下载与使用

  1. 下载 https://v3.bootcss.com/getting-started/
    在这里插入图片描述

  2. 下载完成后
    拷贝dist/css中的bootstrap.min.css到项目的css中
    拷贝dist/js中的bootstrap.min.js到项目的js中

  3. 下载jquery
    https://jquery.com/
    在这里插入图片描述

  4. 在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 布局容器

布局容器

  1. .container类用于固定宽度并支持响应式布局的容器<div class="container"></div>

  2. .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主要提供了三种代码风格：
  1. 使用<code></code>来显示单行内联代码。
  2. 使用<pre></pre>来显示多行块代码。
    样式：pre-scrollable(height,max-height高度固定，为340px，超过存在滚动条)
  3. 使用<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-sm
			2.下拉框
				.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-inline
	2.单选框
		垂直显示  .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 按钮

  1. 使用按钮
    基础样式：.btn
    附加样式：.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link
  2. 多标签使用
    其他标签可以通过添加按钮样式设置成按钮效果(a标签，span标签等)
  3. 按钮大小
    大按钮：.btn-lg
    正常按钮: .btn-sm
    小按钮: .btn-xs
  4. 按钮禁用
    通过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 导航

  1. 基本样式：.nav与"nav-tabs","nav-pills"组合制作导航
  2. 分类：
    - 标签型(nav-tabs)导航
    - 胶囊型(nav-pills)导航
    - 堆栈(nav-stacked)导航
    - 自适应(nav-justified)导航
    - 面包屑式(breadcrumb)导航,不与nav一起使用，直接加入到ol,ul中即可，一般用于导航，主要是告诉用户现在所处页面的位置(当前位置)
  3. 状态
    - 选中状态active样式
    - 禁用状态：disable
  4. 二级菜单
<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>
  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. 对齐方式
    dropdown-menu-left 左对齐 默认样式
    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>添加类名"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

serendipity_xr
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LayUI中的布局
daimeijin的博客
08-12 4725
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 页面布局 容器布局 layui的页面布局可以使用布局容器进行布局。布局容器分为固定宽度和完整宽度。大部分时候我们使用的是固定宽度。 固定宽度 样式：layui-container <!DO
前端框架除了layui还有哪些
NeiHan2020的博客
06-25 4371
目前最热门的前端框架 1、bootstrap 目前最流行的 HTML, CSS 和 JavaScript 框架，用于开发响应式，移动端先行的 web 项目 gethub：https://github.com/twbs/bootstrap 官网：http://getbootstrap.com/ 2、vue 一个用以创建用户接口的直观、快速、简洁的 MVVM 框架 gethub：https://github.com/vuejs/vue 官网：https://vuejs.org/ 3、angular.js G..
关于layui框架的form表单布局（小白向）
我是一只蘑菇17的博客
10-12 3555
在使用form表单的时候，必须先声明form模块，否则select、checkbox、radio等将无法显示，并且无法使用form相关功能，这是很多小白一开始经常犯的错误，虽然这很简单但也很基础，所以有必要在这里提一下。但通常来讲，我们不需要这么长的input，我们可以把外面的div的类换成class="layui-input-inline"试试。一般来讲，添加不同元素名和默认的layui-inline的效果是不一样的，这个就需要大家多加试验来挑选合适自己的类。但是这样并不好看，我们通常是这样使用。
【永久开源】layuimini，最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。
qq_33644049的博客
06-17 1万+
layuimini后台模板 项目介绍 最简洁、清爽、易用的layui后台框架模板。 主要特性 界面足够简洁清爽。 一个接口几行代码而已直接初始化整个框架，无需复杂操作。 支持多tab，可以打开多窗口。 支持无限级菜单和对font-awesome图标库的完美支持。 url地址hash定位，可以清楚看到当前tab的地址信息。 刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。 移动端的友好...
layUI表头居中内容居左
weixin_44924565的博客
04-01 3880
,{field:'troubleDesc',title: '隐患描述',align:'center',templet:function(d){ return '<div style = "text-align:left">'+d.troubleDesc+'</div>' }} ...
layui 隐藏工具栏打印按钮_在标签打印软件中如何快速对齐标签内容
weixin_39702639的博客
12-24 334
在标签打印软件中制作标签的时候，有的时候标签内容比较多，文字长短不一，如果不好好排版的话，会感觉很乱，为了标签的美观，在标签打印软件中添加完需要的文字之后，可以选择我们想要排版的文字，点击软件中的对齐按钮，使标签内容迅速对齐。具体操作如下：1.打开标签打印软件，新建标签之后，点击软件左侧的”实心A”按钮，在画布上绘制一个普通文本对象，双击普通文本，在图形属性-数据源中，点击”修改”按钮，在下面的状...
Layui官网地址官网仓库
CrazyFlyingBee的博客
10-11 1462
Layui官网地址官网仓库
Bootstrap分页插件--Bootstrap Paginator
hfuuhgcc的博客
01-15 970
Bootstrap分页插件--Bootstrap Paginator
layui菜鸟教程--乐字节前端
热门推荐
dirft_din的博客
06-16 2万+
主要内容 LayUI 的介绍 ​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 ​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。 ​ 官网：https://ww.
layui二级权限和增删改查
阳某的博客
07-10 1200
文章目录效果entityTreeNodedaoBookDaoMenuDaoUserDaowebBookActionMenuActionUserActionUtilmvc.xmlweb.xmljspindex.jsplogin.jsp 这个功能是用的自定义MVC 效果 entity TreeNode package com.xy.entity; import java.util.ArrayLi...
layuimini-master.zip
12-25
—— 最简洁、清爽、易用的layui后台框架模板 界面足够简洁清爽。 一个接口几行代码而已直接初始化整个框架，无需复杂操作。 支持多tab，可以打开多窗口。 支持无限级菜单和对font-awesome图标库的完美支持。 url地址hash定位，可以清楚看到当前tab的地址信息。 刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。 移动端的友好支持。
layuimini前端框架
11-24
layuimini前端框架，一款基于layui设计的项目，这个版本是iframe版本的，界面足够清新好看，并且内置多套主题方案可供选择，另外还可以根据格式自定义主题。只需要提供一个初始化接口，根据需要选择初始化参数便可进行初始化，操作简单方便。
layuimini-2.zip
04-21
前端开源框架~02基于layui，好部署，好上手。 直接解压运行index.html即可 学习layui好例子，0基础都可以学会，一看就会
【学习笔记】layui实现分页（加模糊查询）
kevin_g的博客
01-03 1354
一、PageHelper类 在实现数据分页展示时，需要到一些初始值。比如页码、总页数、总记录数、每页记录数、当前页的数据。所以先创建PageHelper类，通过从jsp转发页码和当前页的记录数到servlet，然后进一步调用该类和dao的方法获取初始值，从而实现数据分页展示。 1、以下为PageHelper类的代码： package com.blog.pagehelper; import java.util.List; public class PageData<T> { //页码 priv
Layuimini
cnredzhang的博客
12-09 6819
LayuiminiLayuimini是什么如何获得LayuiminiLayuimini界面功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Layuimini是什么 Layuimini是Layui的升级版，它是专业做后台页面的框架，
layuit 框架_【永久开源】layuimini —— 最简洁、清爽、易用的layui后台框架模板...
weixin_39851008的博客
12-22 719
base: "js/" 填写layuimini.js对应的目录。layuimini.init(); 方法内的参数请填写动态api地址。(实际应用中建议后端api做缓存)api地址返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明layui.config({base: "js/"}).extend({"layuimini": "layuimini"});la...
探索高效后台管理：layuimini - 最简洁、清爽的layui后台框架模板
最新发布
gitblog_00076的博客
05-11 986
探索高效后台管理：layuimini - 最简洁、清爽的layui后台框架模板 layuiminizhongshaofa/layuimini: Layuimini 是基于 layui 和 Vue.js 的轻量级前端管理后台框架，提供了一套简洁美观的UI组件，方便快速搭建企业级中后台管理系统。项目地址:https://gitcode.com/gh_mirrors/la/layuimini 项目简介...
Layuimini一个适合懒人的开源代码-相关使用
m0_46290969的博客
01-06 1998
Layuimini的相关使用 让你快速适合懒人开发
layuiMini，开发者最容易上手的后端模板，
weixin_44824252的博客
04-25 809
layuiMini，开发者最容易上手的后端模板， 一个最适合java程序员，开发的前端模板，组件清晰，功能明确，后端程序员，完全只需要写接口就行。 添加链接描述
bootstrap和layui哪个好用
06-06
这个问题没有绝对的答案，因为bootstrap和layui都有各自的优点和适用场景。Bootstrap是一个成熟的前端框架，具有广泛的应用和社区支持，适用于各种类型的网站和应用程序。Layui则是一个轻量级的前端框架，具有简单易用的特点，适用于快速开发小型项目和后台管理系统。因此，选择哪个框架应该根据具体的需求和项目特点来决定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值