正心全栈编程-文档站

Appearance

基础使用（样式篇） ​

关于 layui 提供了封装的样式以及大量的组件，对于基础样式，官方文档的介绍也十分详细，想要学习的可以看一下官方文档，接下来就介绍一下我认为比较重要的基础样式以及注意点。

布局 ​

布局容器 ​

1、固定宽度

  • 将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
  • 固定宽度的两侧有留白效果
html
<div class="layui-container" style="background-color: pink;height: 300px;">
  固定宽度（两侧有留白效果）
</div>
html
<div class="layui-fluid" style="background-color: cyan;height: 300px;">
  完整宽度(占据屏幕宽度的100%)
</div>

2、完整宽度

  • 可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应
  • 完整宽度占据屏幕宽度的 100%

栅格布局 ​

https://layui.dev/docs/2.8/layout/grid.html

栅格布局 是用来做页面布局的，也可以做响应式，如果想要用这个同时适配电脑端与手机端也可以，但是不推荐。因为双端写起来比较麻烦，还不如直接做两个客户端页面，在前端检测之后进行跳转。

栅格容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

提示

layui 的栅格布局的原理没有使用 flex 布局，而是自己编写的一套规则。虽然可以与 flex 布局一起使用，但是不推荐，因为会导致页面容易出现问题。比较建议的是采用 layui 的栅格加浮动定位进行布局。

栅格布局规则 ​

  • 采用 class="layui-row" 来定义行，如：
    html
    <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）元素中放入你自己的任意元素填充内容，完成布局！
html
<!-- 布局容器 -->
<div class="layui-container">
  <!-- 定义行 -->
  <div class="layui-row">
    <!-- 定义列  -->
    <div class="layui-col-md5" style="background-color: deepskyblue;">
      内容5/12
    </div>
    <div class="layui-col-md7" style="background-color: bisque;">内容7/12</div>
  </div>
</div>

也可以尝试一下其他组合

响应式规则 ​

简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理。

html
<body>
  <h3>平板、桌面端的不同表现：</h3>
  <div class="layui-row">
    <!-- 小屏幕占6列，中屏幕占4列 -->
    <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
      平板≥768px：6/12 | 桌面端≥992px：4/12
    </div>
  </div>

  <div class="layui-row">
    <!-- 小屏幕占4列，中屏幕占6列 -->
    <div
      class="layui-col-sm4 layui-col-md6"
      style="background-color: mediumaquamarine;"
    >
      平板≥768px：4/12 | 桌面端≥992px：6/12
    </div>
  </div>

  <div class="layui-row">
    <!-- 小屏幕占12列，中屏幕占8列 -->
    <div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
      平板≥768px：12/12 | 桌面端≥992px：8/12
    </div>
  </div>
</body>

列间距 ​

  • 设定列之间的间距
  • 且一行中最左的列不会出现左边距，最右的列不会出现右边距
  • 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。
  • 给容器添加 class="layui-col-space*"
    • 支持 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
html
<!-- 列边距 .layui-col-space*  -->
<h3>列边距</h3>
<div class="layui-row layui-col-space20">
  <div class="layui-col-md4">
    <!-- 给具体的内容设置背景颜色 -->
    <div style="background-color: hotpink">4</div>
  </div>
  <div class="layui-col-md4">
    <div style="background-color: indianred">4</div>
  </div>
  <div class="layui-col-md4">
    <div style="background-color: powderblue">4</div>
  </div>
</div>

注意：

  • layui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的
  • 如果需要的间距高于 30px（一般不常见），我们需要采用列偏移

列偏移 ​

  • 对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移
    • 其中 * 号代表的是偏移占据的列数，可选中为 1 - 12
    • 如 layui-col-md-offset3 ，即代表在 中型桌面屏幕下，让该列向右偏移 3 个列宽度。
html
<body>
  <h3>列偏移</h3>
  <div class="layui-row">
    <div class="layui-col-md4">
      <div style="background-color: red">4</div>
    </div>

    <!--向右移动4列-->
    <div class="layui-col-md4 layui-col-md-offset4">
      <div style="background-color: skyblue">向右移动4列</div>
    </div>
  </div>
</body>

列嵌套 ​

列之间可以无限嵌套列

html
<div class="layui-row">
  <!-- 大的盒子占6列 -->
  <div class="layui-col-md6">
    <div style="background-color: red">
      <div class="layui-row">
        <!-- 嵌套列 -->
        <div class="layui-col-md3" style="background-color: burlywood;">
          内部列
        </div>
        <div class="layui-col-md5" style="background-color: indianred;">
          内部列
        </div>
        <div class="layui-col-md2" style="background-color: mediumaquamarine;">
          内部列
        </div>
      </div>
    </div>
  </div>
</div>

颜色 ​

https://layui.dev/docs/2.8/color/

layui 中提供了一些内置的基础颜色，相比其他前端的框架丰富多彩的内置样式非常稀少，但是对于后端开发人员来说还是够用的，最好能将其类名给记下来，在后续开发中有很大帮助。

按钮 ​

https://layui.dev/docs/2.8/button/

案例组件在做项目时是最常用的组件了，没有之一。 layui 提供的按钮也非常丰富，按钮的主题、尺寸、图标、圆角的交叉组合，可以形成丰富多样的按钮种类。其中颜色也可以根据使用场景自主更改。 可以先看一下官方，记一下形状，等到需要用的时候再来复制粘贴即可。

按钮风格 ​

  • 向任意 HTML 元素设定 class="layui-btn" ，建立一个基础按钮。
  • 通过追加样式为 class="layui-btn-{type}" 来定义其他按钮风格
名称组合
原始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"
html
<div class="layui-container">
  <!-- 基础按钮 -->
  <button type="button" class="layui-btn">一个标准的按钮</button>
  <a href="https://layui.dev/" class="layui-btn">一个可跳转的按钮</a>
  <div class="layui-btn">一个按钮</div>
  <hr />
  <!-- 不同主题的按钮 -->
  <button class="layui-btn">默认按钮</button>
  <button class="layui-btn layui-btn-primary">原始按钮</button>
  <button class="layui-btn layui-btn-normal">百搭按钮</button>
  <button class="layui-btn layui-btn-warm">暖色按钮</button>
  <button class="layui-btn layui-btn-danger">警告按钮</button>
  <button class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>

按钮尺寸 ​

尺寸组合
大型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-fluid"
html
<div class="layui-container">
  <!-- 不同尺寸的按钮 -->
  <button class="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button>
  <button class="layui-btn">默认按钮</button>
  <button class="layui-btn layui-btn-sm layui-btn-danger">小型警告按钮</button>
  <button class="layui-btn layui-btn-xs">迷你按钮</button>
  <button type="button" class="layui-btn layui-btn-fluid">
    流体按钮（最大化适应）
  </button>
</div>

圆角按钮 ​

主题组合
原始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"
html
<div class="layui-container" style="margin-top: 20px;">
  <!-- 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>
</div>

图标按钮 ​

图标 ​

html
<i class="layui-icon layui-icon-face-smile"></i>

图标按钮 ​

html
<div class="layui-container" style="margin-top: 20px;">
  <!-- 图标按钮 -->
  <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>
  <button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
    <i class="layui-icon layui-icon-heart"></i> 关注
  </button>
</div>

图标 ​

https://layui.dev/docs/2.8/icon/

Layui 图标采用字体形式，取材于阿里巴巴矢量图标库 iconfont，因此可以把一个 icon 看作是一个普通的文本，直接通过 css 即可设定其样式。 图标支持 font-class 或 unicode 两种格式。

内置的图标用起来很方便，但有时候会缺少需要的图标，那就需要拓展其他的图标库了。

徽章 ​

https://layui.dev/docs/2.8/badge/

徽章 badge 通常作为修饰用途而存在，一般是掺杂在其它元素中显示突出效果，稍微了解一下就可以。

公共类（熟记） ​

https://layui.dev/docs/2.8/class/

公共类是 layui.css 中并不以组件形式存在的公共 class 选择器，而又能用于任何地方。提供了 背景颜色、文字大小、文字颜色 等样式