BootStrap&LayUI

最新推荐文章于 2024-06-24 23:23:11 发布

java快到碗里来

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量570

点赞数

文章标签： java bootstrap

本文链接：https://blog.csdn.net/ffgyfgj/article/details/105980300

版权

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="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="js/bootstrap.min.js"></script>
</body>
</html>

注意：
⽬前暂时不使⽤ jquery 的插件可以不⽤引⼊ js ⽂件,这⾥是为了保证模板的完整性。
说明：
viewport 标记⽤于指定⽤户是否可以缩放Web⻚⾯
width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要
么是⼀个特殊的标记符号。
width 指令使⽤ device-width 标记可以指示视区宽度应为设备的屏幕宽度。
height 指令使⽤ device-height 标记指示视区⾼度为设备的屏幕⾼度。
initial-scale 指令⽤于设置Web⻚⾯的初始缩放⽐例。默认的初始缩放⽐例值因智能⼿机浏览器的
不同⽽有所差异。通常情况下设备会在浏览器中呈现出整个Web⻚⾯，设为1.0则将显示未经缩放
的Web⽂档。

布局容器和栅格⽹格系统

布局容器
1、.container 类⽤于固定宽度并⽀持响应式布局的容器。

<div class="container">
 ...
</div>

2、.container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器。

<div class="container-fluid">
 ...
</div>

栅格⽹格系统
Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的
增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建
⻚⾯布局，你的内容就可以放⼊这些创建好的布局中。
⽹格系统的实现原理⾮常简单，仅仅是通过定义容器⼤⼩，平分12份(也有平分成24份或32份，但12
份是最常⻅的)，再调整内外边距，最后结合媒体查询，就制作出了强⼤的响应式⽹格系统。Bootstrap
框架中的⽹格系统就是将容器平分成12份。
在这里插入图片描述
注意: ⽹格系统必须使⽤到css
container、row 、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger
desktops) 即: 超⼩屏(⾃动)，⼩屏(750px)，中屏(970px)和⼤屏(1170px)
数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。
在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列
数之和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏。
具体内容应当放置在列容器（column）之内

<div class="container"> 
<div class="row"> 
<div class="col-md-4">4列</div> 
<div class="col-md-8">8列</div>
</div>
</div>

在这里插入图片描述
列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，⼤于12,则⾃动换到下⼀
⾏。），有点类似于表格的colspan属性。

<div class="container"> 
<div class="row"> 
<div class="col-md-4">4列</div> 
<div class="col-md-8">8列</div>
</div> 
<div class="row"> 
<div class="col-md-2">2列</div> 
<div class="col-md-10">10列</div>
</div>
</div>

列偏移
如果我们不希望相邻的两个列紧靠在⼀起，但⼜不想使⽤margin或者其他的技术⼿段来。这个时候就
可以使⽤列偏移（offset）功能来实现。使⽤列偏移也⾮常简单，只需要在列元素上添加类名"col-mdoffset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素
上添加"col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会
致列断⾏|换⾏显示)。

<div class="container"> 
<div class="row"> 
<div class="col-md-1">1列</div> 
<div class="col-md-1">2列</div> 
<div class="col-md-1 col-md-offset-8">11列</div> 
<div class="col-md-1">12列</div>
</div>
</div>

列排序
列排序其实就是改变列的⽅向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的⽹格
系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull，
往后push。

<div class="container"> 
<div class="row"> 
<div class="col-md-1 col-md-push-10">1列</div> 
<div class="col-md-1 col-md-pull-1">2列</div>
</div>
</div>

列嵌套
Bootstrap框架的⽹格系统还⽀持列的嵌套。你可以在⼀个列中添加⼀个或者多个⾏（row）容器，
然后在这个⾏容器中插⼊列.

<div class="container"> <div class="row"> <div class="col-md-2">
我的⾥⾯嵌套了⼀个⽹格
<div class="row"> <div class="col-md-9">9</div> <div class="col-md-3">3</div>
</div>
</div> <div class="col-md-10">我的⾥⾯嵌套了⼀个⽹格
<div class="row"> <div class="col-md-10">10</div> <div class="col-md-2">2</div>
</div>
</div>
</div>
</div>

常⽤样式

标题
Bootstrap和普通的HTML⻚⾯⼀样，定义标题都是使⽤标签
段落
段落是排版中另⼀个重要元素之⼀。通过.lead 来突出强调内容(其作⽤就是增⼤⽂本字号，加粗⽂
本，⽽且对⾏⾼和margin也做相应的处理。可以使⽤以下标签给⽂本做突出样式处理：
:⼩号字
:加粗
:斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努⼒</em>的<strong>你</strong>
</p>

强调
定义了⼀套类名，这⾥称其为强调类名，这些强调类都是通过颜⾊来表示强调，具本说明如下：
.text-muted：提示，使⽤浅灰⾊（#999）
.text-primary：主要，使⽤蓝⾊（#428bca）
.text-success：成功，使⽤浅绿⾊(#3c763d)
.text-info：通知信息，使⽤浅蓝⾊（#31708f）
.text-warning：警告，使⽤⻩⾊（#8a6d3b）
.text-danger：危险，使⽤褐⾊（#a94442）
对⻬效果
在CSS中常常使⽤text-align来实现⽂本的对⻬⻛格的设置。
其中主要有四种⻛格：
左对⻬，取值left ;
居中对⻬，取值center;
右对⻬，取值right ;
两端对⻬，取值justify。
为了简化操作，⽅便使⽤，Bootstrap通过定义四个类名来控制⽂本的对⻬⻛格：.text-left：左对⻬ .text-center：居中
对⻬ .text-right：右对⻬ .text-justify：两端对⻬。
表格
表格样式
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个⽀持响应式的表格。在使⽤Bootstrap的表格过程中，只需
要添加对应的类名就可以得到不同的表格⻛格：
基础样式
1）.table：基础表格
附加样式

.table-striped：斑⻢线表格
.table-bordered：带边框的表格
.table-hover：⿏标悬停⾼亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距⼩
tr、th、td样式
提供了五种不同的类名，每种类名控制了⾏的不同背景颜⾊

表单
表单主要功能是⽤来与⽤户做交流的⼀个⽹⻚控件，良好的表单设计能够让⽹⻚与⽤户更好的沟通。表单中常⻅的元素
主要包括：⽂本输⼊框、下拉选择框、单选按钮、复选按钮、⽂本域和按钮等。
表单布局
基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯列出了创建基本表单的步骤：
向⽗
元素添加 role=“form”。
把标签和控件放在⼀个带有 class .form-group 的
中。这是获取最佳间距所必需的。
向所有的⽂本元素、
和
添加 class ="

缩略图
缩略图在电商类的⽹站很常⻅，最常⽤的地⽅就是产品列表⻚⾯。缩略图的实现是配合⽹格系统⼀起使⽤。同时还可以让缩略图配合
标题、描述内容，按钮等。
⾯板
默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
.panel-default：默认样式
.panel-heading：⾯板头
.panel-body：⾯板主体内容

LayUI

⻚⾯元素

布局

固定宽度
将栅格放⼊⼀个带有 class=“layui-container” 的特定的容器中，以便在⼩屏幕以上的设备中固定宽度，
让列可控。

<div class="layui-container"> <div class="layui-row">
 ……
</div>
</div>

完整宽度
可以不固定容器宽度。将栅格或其它元素放⼊⼀个带有 class=“layui-fluid” 的容器中，那么宽度将不会固
定，⽽是 100% 适应

<div class="layui-fluid">
 ……
</div>

栅格系统
为了丰富⽹⻚布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能⼒，layui 引进了⼀套具备
响应式能⼒的栅格系统。将容器进⾏了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平
板、桌⾯中/⼤尺⼨四种不同的屏幕下发挥着各⾃的作⽤。

栅格布局规则

采⽤ layui-row 来定义⾏，如：
<div class="layui-row"></div>
采⽤类似 layui-col-md* 这样的预设类来定义⼀组列（column），且放在⾏（row）内。其中：
变量 md 代表的是不同屏幕下的标记
变量 * 代表的是该列所占⽤的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满⾏排列。如果⼤于12，多余的列将⾃动另起
⼀⾏。
列可以同时出现最多四种不同的组合，分别是：xs（超⼩屏幕，如⼿机）、sm（⼩屏幕，如平
板）、md（桌⾯中等屏幕）、lg（桌⾯⼤型屏幕）。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放⼊你⾃⼰的任意元素填充内容
响应式规则
栅格的响应式能⼒，得益于CSS3媒体查询（Media Queries）的强⼒⽀持，从⽽针对四类不同尺⼨的
屏幕，进⾏相应的适配处理

列边距
通过“列间距”的预设类，来设定列之间的间距。且⼀⾏中最左的列不会出现左边距，最右的列不会出
现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合⽹⻚常⽤
的边距，预设了 12 种不同尺⼨的边距，分别是：

/* ⽀持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 */
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30

列偏移
对列追加类似 layui-col-md-offset* 的预设类，从⽽让列向右偏移。其中 * 号代表的是偏移占据的列
数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌⾯屏幕”下，让该列向右偏移 3 个列宽度
列嵌套
可以对栅格进⾏⽆穷层次的嵌套。在列元素（layui-col-md*）中插⼊⾏元素（layui-row），即可完成
嵌套。

基本元素

按钮
向任意HTML元素设定class=“layui-btn”，建⽴⼀个基础按钮。通过追加格式为layui-btn-{type}的class
来定义其它按钮⻛格。
主题
在这里插入图片描述
尺⼨

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

图标

<button type="button" class="layui-btn"> 
<i class="layui-icon">&#xe608;</i> 添加
</button> 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> 
<i class="layui-icon">&#x1002;</i> 刷新
</button>

导航
导航⼀般指⻚⾯引导性频道集合，多以菜单的形式呈现，可应⽤于头部和侧边。⾯包屑结构简单，⽀
持⾃定义分隔符
实现步骤：

引⼊的资源

<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>

依赖加载模块

<script type="text/javascript">
// 注意：导航 依赖 element 模块，否则⽆法进⾏功能性操作
layui.use('element', function(){
var element = layui.element;
 });
</script>

显示指定类型的导航
选项卡
导航菜单可应⽤于头部和侧边，⽀持响应式，⽀持删除选项卡等功能。
实现步骤
引⼊的资源

<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>

依赖加载模块

<script type="text/javascript">
// 注意：选项卡 依赖 element 模块，否则⽆法进⾏功能性操作
layui.use('element', function(){
var element = layui.element;
 });
</script>

加载HTML

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

选项卡⻛格

默认⻛格：layui-tab
简洁⻛格需要追加class：layui-tab-brief
卡⽚⻛格需要追加class：layui-tab-card

带删除的选项卡
可以对⽗层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
表格
基础属性
在这里插入图片描述
表单

在⼀个容器中设定 class=“layui-form” 来标识⼀个表单元素块

<form class="layui-form" action="">
</form>

基本的⾏区块结构，它提供了响应式的⽀持。可以换成其他结构，但必须要在外层容器中定
义class=“layui-form”，form模块才能正常⼯作。

<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block">
原始表单元素区域
</div>
</div>

组件示例

弹出层
模块加载名称：layer，独⽴版本：layer.layui.com
使⽤场景
由于layer可以独⽴使⽤，也可以通过Layui模块化使⽤。所以请按照你的实际需求来选择。
在这里插入图片描述

作为独⽴组件使⽤ layer

<!-- 引⼊好layer.js后，直接⽤即可 -->
<script src="layer.js"></script> <script>
layer.msg('hello');
</script>

在 layui 中使⽤ layer

layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});

基础参数

type - 基本层类型

类型：Number，默认：0
可传⼊的值有： 0（信息框，默认）
1（⻚⾯层）
2（iframe层）
3（加载层）
4（tips层）

title - 标题

类型：String/Array/Boolean，默认：‘信息’ title⽀持三种类型的值：若传⼊的是普通的字符串，如 title :‘我是标题’，那么只会改变标题⽂本；若需要⾃定义样式，可以title: [‘⽂本’,‘font-size:18px;’]，数组第⼆项可以写任意 css样式；若你不想显示标题栏，可以 title: false；

content - 内容

类型：String/DOM/Array，默认：’’ content可传⼊的值是灵活多变的，不仅可以传⼊普通的html内容，还可以指定DOM。
/* 信息框 / layer.open({ type:0, title:“系统消息”, // content可以传⼊任意的⽂本或html
content:“Hello” }); / ⻚⾯层 / layer.open({ type:1, title:“系统消息”,
// content可以传⼊任意的⽂本或html
content:“

Hello
”
});
/ iframe /
layer.open({
type:2,
title:“系统消息”,
// content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: [‘url’,
‘no’]
content:“http://www.baidu.com”
// content:[“http://www.baidu.com”,‘no’]
});
/ tips层 */
layer.open({
type: 4,
content: [‘内容’, ‘#id’] //数组第⼆项即吸附元素选择器或者DOM
});

area - 宽⾼

类型：String/Array，默认：‘auto’ 在默认状态下，layer是宽⾼都⾃适应的。当定义宽度时，你可以area:
‘500px’，⾼度仍然是⾃适应的。当宽⾼都要定义时，你可以area: [‘500px’, ‘300px’]。

icon - 图标

注：信息框和加载层的私有参数。类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认层可以传⼊0-6。如果是加载层，可以传⼊0-2。 // eg1
layer.alert(‘酷毙了’, {icon: 1}); // eg2 layer.msg(‘不开⼼。。’, {icon: 5});
// eg3 layer.load(1); // ⻛格1的加载

分⻚
快速使⽤
laypage 的使⽤⾮常简单，指向⼀个⽤于存放分⻚的容器，通过服务端得到⼀些初始值，即可完成分
⻚渲染。
基础参数
通过核⼼⽅法：laypage.render(options) 来设置基础参数。
在这里插入图片描述

jump - 切换分⻚的回调
当分⻚被切换时触发，函数返回两个参数：obj（当前分⻚的所有选项值）、first（是否⾸次，⼀般⽤于
初始加载的判断）
数据表格
模块加载名称：table
快速使⽤
创建⼀个table实例最简单的⽅式是，在⻚⾯放置⼀个元素，然后通过 table.render() ⽅法指定该容器。
三种初始化渲染⽅式
在这里插入图片描述
⽅法渲染

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要⼀个选择器

<table id="demo"></table>

渲染表格

layui.use('table', function(){
var table = layui.table;
// 执⾏渲染
table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ]]
 });
});