BootStrap学习笔记(LayUI)

安装和使用

　　getbootstrap.com 英文

　　www.bootcss.com 中文

　　介绍 　　现成的css样式集合，twitter两员工干出来的，适合没有设计师或没有前端的团队

　　特点　　1.简介、直观、强悍的前端开发框架，html、css、javascript工具集，使web开发

　　　　　　...

　　下载与使用

　　　　要下载对应jquery

　　　　X-UA-Compatible设置IE浏览器兼容模式

　　　　meta viewport表示用户是否可以缩放页面

　　　　width指定视区逻辑宽度

　　　　device-width指示视区宽度应为设备的屏幕宽度

　　　　initial-scale指令用于设置web页面的初始缩放比例

　　　　initial-scale=1则将显示未经缩放的web文档

 

布局容器和栅格网格

　　布局容器

　　　　1.container 固定宽度并支持响应式布局的容器 class = 'container'

　　　　2.container-fluid 类似于100%宽度，占据全部视口(viewport)的容器

　　栅格系统

　　　　　　需要引入bootstrapCss

　　　　列组合

　　　　　　xs(超小屏 自动) xm(750px) md(970px) lg(1170px)

　　　　　　数据行必须包含在container中，以便赋予合适的对齐方式和内距(padding)

　　　　　　在行row中可以添加列column，只有列才可以作为行容器的直接子元素，但列数之和不能超总数(如12)

　　　　　　-大于12则自动换行

　　　　　　具体内容应放在列容器之内

　　　　　　md用的比较多(电脑屏幕) 　　class = ''

 

<div class = "container">

    <div class = "row">

        <div class = "col-md-4 col-lg-4">

 

        </div>

    </div>

</div>        

 

　　　　列偏移

　　　　　　class = "col-md-offset-8"

　　　　列排序

　　　　　　class = "col-md-push-1"

　　　　　　class = "col-md-pull-2"

　　　　列嵌套

　　　　　　任意一列都可再细分12/24列下去

常用样式

　　排版

　　　　标题

　　　　　　也提供了h1-h6的类名给非标题使用

　　　　副标题

　　　　　　<small></small>

　　　　　　class = "small"

　　　　段落

　　　　　　class = "lead" 变大突出 倾斜 加粗标签/类名

　　　　强调

　　　　　　text-muted:提示，浅灰色 #999

　　　　　　text-primary:主要，蓝色 #428bca

　　　　　　text-success：成功，浅绿色 #3c763d

　　　　　　text-info：通知，浅蓝色#31708f

　　　　　　text-warning:警告，黄色 #8a6d3b

　　　　　　text-danger：危险，褐色 #a94442

　　　　文本对齐

　　　　　　text-left

　　　　　　text-right

　　　　　　text-center

　　　　　　text-justify(两端对齐，看起来舒服点)

　　　　列表

　　　　　　去点列表

　　　　　　　　list-unstyled

　　　　　　内联列表

　　　　　　　　list-inline（垂直变成水平，去掉编号）

　　　　　　定义列表

　　　　　　　　<dl class = "dl-horizontal">

　　　　　　　　　　<dt>定义标题 过长会...</dt>

　　　　　　　　　　<dd>定义内容 过长会...</dd>

　　　　　　　　</dl>

　　　　　　代码

　　　　　　　　<code>单行代码</code>

　　　　　　　　<pre>多行块代码</pre>  　　大于号小于号尖括号仍需用< &rt代替

　　　　　　　　<kbd></kbd>显示用户输入的代码，如快捷键

　　　　　　表格

　　　　　　　　class = "table" 对齐

　　　　　　　　table-bordered  带线

　　　　　　　　table-striped 灰白相间

　　　　　　　　table-hover 鼠标放上去有波浪效果

　　　　　　　　table-condensed 表格变小(突出内容)

　　　　　　　　info

　　　　　　　　warning

　　　　　　　　...

　　　　表单

　　　　　　表单控件

　　　　　　　　输入框text

　　　　　　　　　　form-control 　　样式

　　　　　　　　　　input-lg *-sm 　　大小

　　　　　　　　下拉框select

　　　　　　　　　　form-control 样式

　　　　　　　　　　multiple = "multiple" 多选

　　　　　　　　文本域textarea

　　　　　　　　　　form-control 样式

　　　　　　　　复选框checkbox

　　　　　　　　　　checkbox-inline class 　　水平显示

　　　　　　　　　　checkbox 　　　　　　　垂直显示

  　　　　　　　  单选框radio

　　　　　　　　　　radio-inline class 　　　　　水平显示

　　　　　　　　　　radio　　　　　　　　　　 垂直显示

　　　　　　　　按钮<button>

　　　　　　　　　　　　class = "btn btn-danger"

　　　　　　　　　　　　primary 　　　　info　　　　 success

　　　　　　　　　　　　default 　　　　warning 　　　　link

　　　　　　　　　  <其他标签如a div>

　　　　　　　　　　　　class = "btn btn-danger"

　　　　　　　　　　大小

　　　　　　　　　　　　btn-lg  btn-sm  btn-xs

　　　　　　　　　　禁用

　　　　　　　　　　　　disabled属性禁用 　　真正禁用

　　　　　　　　　　　　btn-disabled 　　　　假装禁用

 

　　　　表单布局

　　　　　　水平表单

<form class = "form-horizontal" role = "form">
    <div class = "form-group">
        <lable for = "uname" class = "contgrol-label col-md-2">姓名                
        </label>
        <div class = "col-md-8">
            <input type = "text" id = "uname" class = "form-control"
            placeholder = "please..."/> //for 自动对焦
        </div>
<div class = "form-group">...</..>      

 

　　　　　　内联表单

　　　　　　　　form-inline 　　表单元素都在一行显示

　　　　缩略图

　　　　　　一般放在col列里 否则会占一整行

　　　

<div class = "thumbnail">
    <img src = "" style = "width:240px;height:360px;">
    <h3>zzl</h3>
    <p>出生于台湾，歌手</p>
    <button class = "btn btn-default">
        <span class = "glyphicon glyphicon-heart"></span>喜欢
    </button>
    <button class = "btn btn-default">
        <span class = "glyphicon glyphicon-pencil"></span>评论
    </button>
</div>

　　　　面板

<div class = "panel panel-warning">
    <div class = "panel-heading">
        <h2>title</h2>
    </div>
    <div class = "panel-body">
        ...anything as you like...
    </div>
</div> 

插件

　　导航

　　　　标签式 胶囊式 面包屑 ..

　　分页导航

　　　　页码导航

　　　　翻页导航(上一页 下一页)

　　下拉菜单

　　模态框

　　　　modal里面可以加表单控件，开启一个子框处理一些事

LayUI

　　轻量级框架，简单美观，适用于后端人员

　　页面元素

　　　　布局

　　　　　　布局容器

　　　　　　　　1.固定宽度(两侧留白)

　　　　　　　　　　class = layui-contaioner

　　　　　　　　2.完整宽度

　　　　　　　　　　layui-fluid

　　　　　　栅格系统

　　　　　　　　行

　　　　　　　　　　layui-row

　　　　　　　　列

　　　　　　　　　　layui-col-md* *代表想占几列

　　　　　　　　　　列可追加-space5 -offset-8之类的操作

　　　　　　　　响应式规则

　　　　　　　　　　根据屏幕尺寸，如果有对应行为则做出堆叠或按比例缩放的行为

　　　　　　　　列边距

　　　　　　　　　　layui-col-space3 　　因为设置的是padding，所以内容会向内缩，有需要可以改变嵌套关系

　　　　　　　　列组合

　　　　　　　　　　照旧

　　　　　　　　列嵌套

　　　　　　　　　　照旧

　　　　基本元素

　　　　　　按钮

　　　　　　　　基础按钮

　　　　　　　　　　layui-btn

　　　　　　　　主体按钮

　　　　　　　　　　layui-btn-warning

　　　　　　　　大小

　　　　　　　　　　layui-btn-sm

　　　　　　　　圆角

　　　　　　　　　　layui-btn-radius

　　　　　　　　图标

　　　　　　　　　　layui-icon-xxx

　　　　　　导航

　　　　　　　　引入

　　　　　　　　　　css和layui.js

　　　　　　　　加载指定模块

<script type = "text/javascript">
    layui.use('element',function(){
        var element = layui.element;
    });
</script>

　　　　　　　　使用

　　　　　　　　　　ul class = "layui-nav"

　　　　　　　　　　　　li class = "layui-nav-item"

　　　　　　　　　　　　二级菜单

　　　　　　　　　　　　<a href = "">xxx</a>

　　　　　　　　　　　　<dl class = "layui-child">

　　　　　　　　　　　　　　<dd></dd>

　　　　　　　　　　　　</dl>

　　　　　　　　垂直导航

　　　　　　　　　　　　layui-nav-tree 矮子

　　　　　　　　侧边导航

　　　　　　　　　　　　layui-nav-side

　　　　　　　　颜色

　　　　　　　　　　　　layui-bg-xxx molv cyan藏青 blue

　　　　　　　　徽章

　　　　　　　　　　　　layui-badge

　　　　　　　　面包屑导航 分隔符

　　　　　　　　　　　　layui-breadcrumb

　　　　　　　　　　　　lay-separator="-" | ... 这个不是class

　　　　　　选项卡

　　　　　　　　layui-tab

　　　　　　　　　　ul layui-tab-title

　　　　　　　　　　　　li layui-this

　　　　　　　　　　　　li

　　　　　　　　　　　　li

　　　　　　　　　　div layui-tab-content

　　　　　　　　　　　　div layui-tab-item layui-show

　　　　　　　　　　　　div layui-tab-item

　　　　　　　　　　　　div layui-tab-item

　　　　　　　　风格

　　　　　　　　　　简洁 layui-tab-brief

　　　　　　　　　　卡片 layui-tab-card

　　　　　　　　可删除属性

　　　　　　　　　　对父层元素设置lay-allowClose="true" 可允许选项卡被删除

　　　　　　表格

　　　　　　　　　　layui-table

　　　　　　　　隔行换色

　　　　　　　　　　lay-even

　　　　　　　　边框

　　　　　　　　　　lay-skin="属性值" line行边框 row列边框 nob无边框

　　　　　　　　尺寸

　　　　　　　　　　lay-size="sm"

　　　　　　表单

　　　　　　　　文本框

　　　　　　　　　　依赖form，需加载

　　　　　　　　　　　　script ..

　　　　　　　　　　　　　　layui.use("form",function(){

　　　　　　　　　　　　　　});

　　　　　　　　　　　　/

　　　　　　　　　　基本行区块结构，响应式的支持

　　　　　　　　　　　　form class="layui-form"

　　　　　　　　　　　　　　div class = "layui-form-item"

　　　　　　　　　　　　　　　　lable class = "layui-form-lable"

　　　　　　　　　　　　　　　　div class = "layui-input-block" 整行

　　　　　　　　　　　　　　　　div class = "layui-input-inline" 一段

　　　　　　　　　　　　　　　　　　required 必填

　　　　　　　　　　　　　　　　　　lay-verify = "required" 需要验证的类型

　　　　　　　　　　　　　　　　　　autocomplete 检查缓存，有则自动填充

　　　　　　　　下拉框

　　　　　　　　　　select

　　　　　　　　　　　　校验

　　　　　　　　　　　　　　非空 　　select lay-verrify = 'required'

　　　　　　　　　　　　　　禁用　　 disabled = "true"

　　　　　　　　　　　　　　分组　　 <optgroup lable = ""> 分类效果

　　　　　　　　　　　　　　搜索　　 加上 lay-search

　　　　　　　　复选框

　　　　　　　　　　默认复选框 　　layui-input-block/inline 　　select

　　　　　　　　　　原始皮肤 　　　layui-skin = "primary"　　 option

　　　　　　　　　　通过title设置自定义文本(如果不需要显示文本，则不设置title属性)

　　　　　　　　　　disabled

　　　　　　　　开关

　　　　　　　　　　开关效果  复选框 的 input *skin = "switch"

　　　　　　　　　　自定义状态位描述 lay-text = ""

　　　　　　　　　　disabled

　　　　　　　　　　checked 确认默认值

　　　　　　　　　　lay-text 会被作为默认value随表单提交 除非设置了value

　　　　　　　　单选框

　　　　　　　　　　title

　　　　　　　　　　disabled

　　　　　　　　　　value = ""

　　　　　　　　文本域

　　　　　　　　　　class = "layui-textarea" layui样式

　　　　　　　　组装行内表单

　　　　　　　　　　要给表单元素制作成行内，要在外层套一层 div的inline，然后内层给予inline

　　　　　　　　　　class = "layui-inline"

　　　　　　　　　　　　class = "layui-input-inline"

　　　　　　　　忽略美化渲染

　　　　　　　　　　layui-ignore 单独属性 忽视layui美术渲染

　　　　　　　　表单方框风格

　　　　　　　　　　form class 多加 layui-form-pane

　　　　另外复选框、开关、单选框需要额外添加pane属性，否则看起来别扭

　　组件示例

　　　　弹出层

　　　　　　layer可以单独使用 独立版本官网 依赖1.8+的jq和layer.css

　　　　　　也可以在layui中模块化使用

　　　　　　　　layui.use("layer",function(){var layer = layui.layer;});

　　　　　　可展示文本、代码、页面、提示、图标等，使用较复杂，需要时现搜

　　　　日期与时间选择

　　　　　　layDate

　　　　分页

　　　　　　laypage 一般是从服务器获取

　　　　数据表格

　　　　　　sort:true 就有排序了 方法激发方式已经贴近ts ngzorro了

　　　　　　开启单元格编辑 表头属性 edit 不必弹窗

　　　　　　数据表格重载 .reload(ID,Options);

LayUIMini

　　　　专门的后台管理模板

　　LayUIMini-iframe

　　　　已经很贴近ngzorro的效果了

　　　　主要讲搭建前端项目结构