layui-学习03-页面元素
布局:
相关样式:
包裹层 : layui-container ( 响应式 宽度 ) layui-fluid ( 100% 宽度 )
行 : layui-row
列 : layui-col-md9* (* = 1 ~ 12) (响应式)
列间距 : layui-col-space* ( 列间距 *px )
列偏移 : layui-col-md-offset* ( 列偏移 * 代表列数 )
例子:
<div class="layui-container"> // class="layui-fluid " 常规布局(以中型屏幕桌面为例): <div class="layui-row layui-col-space10"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div>
不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应
理论上,你可以对栅格进行无穷层次的嵌套
颜色:
- 赤色:class="layui-bg-red"
- 橙色:class="layui-bg-orange"
- 墨绿:class="layui-bg-green"
- 藏青:class="layui-bg-cyan"
- 蓝色:class="layui-bg-blue"
- 雅黑:class="layui-bg-black"
- 银灰:class="layui-bg-gray"
按钮:
名称 | 组合 |
---|---|
原始 | class="layui-btn layui-btn-primary" |
默认 | class="layui-btn" |
百搭 | class="layui-btn layui-btn-normal" |
暖色 | class="layui-btn layui-btn-warm" |
警告 | class="layui-btn layui-btn-danger" |
禁用 | class="layui-btn layui-btn-disabled" |
尺寸
尺寸 | 组合 |
---|---|
大型 | class="layui-btn layui-btn-lg" |
默认 | class="layui-btn" |
小型 | class="layui-btn layui-btn-sm" |
迷你 | class="layui-btn layui-btn-xs" |
圆角
主题 | 组合 |
---|---|
原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
默认 | class="layui-btn layui-btn-radius" |
百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |
暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |
警告 | class="layui-btn layui-btn-radius layui-btn-danger" |
禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |
例子:
按钮组:
<div class="layui-btn-group"> <button class="layui-btn">增加</button> <button class="layui-btn">编辑</button> <button class="layui-btn">删除</button> </div> <div class="layui-btn-group"> <button class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> </div> <div class="layui-btn-group"> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> </div>
表单:
设定 class="layui-form" 来标识一个表单元素块
依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能)
相关样式:
layui-form
layui-form-item
layui-form-label
layui-input-block
layui-input-inline
layui-input
layui-textarea
layui-form-text
输入框:
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
required:注册浏览器所规定的必填字段
lay-verify:注册form模块需要验证的类型
class="layui-input":layui.css提供的通用CSS类
下拉选择框
代码:
<select name="city" lay-verify="" lay-search> //搜索匹配功能 <option value="">请选择一个城市</option> <option value="010" selected>北京</option> //selected 来设定默认选中项 <option value="021" disabled>上海</option> //禁用效果 <option value="0571">杭州</option> </select>
分组:
<select name="quiz"> <option value="">请选择</option> <optgroup label="城市记忆"> <option value="你工作的第一个城市">你工作的第一个城市?</option> </optgroup> <optgroup label="学生时代"> <option value="你的工号">你的工号?</option> <option value="你最喜欢的老师">你最喜欢的老师?</option> </optgroup> </select>
复选框:
原始风格:
原始风格: <input type="checkbox" name="" title="写作" lay-skin="primary" checked> <input type="checkbox" name="" title="发呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值,否则选中时返回的就是默认的on
开关:
其实就是checkbox复选框的“变种”,通过设定 lay-skin="switch" 形成了开关风格
<input type="checkbox" name="xxx" lay-skin="switch"> <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值,否则选中时返回的就是默认的on
单选框:
<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>
属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值,否则选中时返回的就是默认的on
文本域:
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
组装行内表单:
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">范围</label> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline" style="width: 100px;"> <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" style="width: 100px;"> <input type="password" name="" autocomplete="off" class="layui-input"> </div> </div> </div>
面包屑:
依赖加载模块:element
<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span>
你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如: 首页- 国际新闻- 亚太地区- 正文
<span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span>
<span class="layui-breadcrumb" lay-separator="|"> <a href="">娱乐</a> <a href="">八卦</a> <a href="">体育</a> <a href="">搞笑</a> <a href="">视频</a> <a href="">游戏</a> <a href="">综艺</a> </span>
layui-学习03-页面元素的更多相关文章
- Selenium2学习-028-WebUI自动化实战实例-026-获取页面元素值或者元素属性值
在自动化脚本编写过程中,经常需要获取页面元素的文本进行判断,以便对于不同的文本进行不同的处理.比如:很多的购物网站,加入购物车的按钮是有多个状态的(加入购物车.到货通知.暂不销售等),那么在实际的操作 ...
- JavaWeb学习总结第三篇--走进JSP页面元素
JavaWeb学习(三)—走进JSP页面元素 JSP:Java Server Pages,译为Java服务器页面.其脚本采用Java语言,继承了Java所有优点.JSP元素可以分为指令元素.脚本元素和 ...
- selenium webdriver学习(四)------------定位页面元素(转)
selenium webdriver学习(四)------------定位页面元素 博客分类: Selenium-webdriver seleniumwebdriver定位页面元素findElemen ...
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- Selenium2学习-026-WebUI自动化实战实例-024-获取页面元素
非常简单的方法封装,就不啰嗦了,直接上码咯 ^_^ /** * Get element. It will be return null when there is not such element. ...
- Vue学习之路第十一篇:为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- selenium学习-拖拽页面元素
一.ActionChains包 模拟鼠标的操作要首先引入ActionChains的包 from selenium.webdriver.common.action_chains import Actio ...
- M3: 将页面元素制作为图片
本小节将介绍如何将页面元素保存为图片,在前一小节中,我们加入了名称为gridMsg的Grid Control,现在我们将使用RenderTargetBitmap把gridMsg这个页面元素保存为一张图 ...
- UWP开发入门(十八)——使用ContentControl减少页面元素数量
我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少 ...
随机推荐
- css3 -webkit-filter
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支持的效果有: grayscale 灰度 ...
- 某个js插件没有执行
今天遇到一个奇怪的问题,bootstrap-table插件根本没有执行.后来发现用于执行bootstrap启动的js文件出错.导致这个不能顺利执行错误js中的程序.一般导致插件不能顺利执行有两个原因. ...
- maven项目报错
[root@kube-master iff]# kubectl logs iff-dm-3029278244-9qrp6 -n iffjava.lang.IllegalArgumentExceptio ...
- win10安装ubuntu子系统配置
# 更改apt源 cat > /etc/apt/sources.list <<'END' #阿里云 deb http://mirrors.aliyun.com/ubuntu/ tru ...
- js从后台取值并绑定到元素上
用ajax从后台取值不是什么有技术含量的活计,把后台取来的值绑定到Vue对象上也不算难,但每一次向后台拿数据的时候都得写上这么一段代码就十分痛苦了. 于是我写了这么一小段js代码,能够自己根据url去 ...
- 云计算、大数据和 AI
我今天要讲这三个话题,一个是云计算,一个大数据,一个人工智能,我为什么要讲这三个东西呢?因为这三个东西现在非常非常的火,它们之间好像互相有关系,一般谈云计算的时候也会提到大数据,谈人工智能的时候也会提 ...
- 浏览器在初始化JS 环境时都发生了些什么
原文:https://segmentfault.com/a/1190000005754797 1.用 C/C++ 构造内部数据结构创建一个 OP 即(Object.prototype)以及初始化其内部 ...
- XML 十六进制值 是无效的字符错误 解决方法之一 转
/// <summary> /// 过滤非打印字符 /// </summary> /// <param name="tmp">待过滤</p ...
- (转)centos7.0安装配置DRBD
原文:http://gushiren.blog.51cto.com/3392832/1685207 首先确保两台机器时间同步,配置ssh. 方法一通过yum源安装:yum安装默认路径是/etc/drb ...
- MySQL 的更新操作update
1 更新操作(单表更新) 1)单表更新 update [low_priority] [ignore] table_reference set col_name1={expr1|default},col ...