layui框架卡片面板的使用

写在前面

在之前的博客中我有写过关于layui的form的布局，具体详情请点击此处，其实这一篇博客讲得不是很全，因为绝大部分时候，form表单通常都会配合面板使用，这样的布局更加美观，而且排序也十分简单。因此博主强烈推荐面板配合form来使用。

卡片面板

在大多数时候，卡面面板就能满足我们的需求，本篇只谈卡片面板，更多用法请移步到layui面板文档

第一步，引用layui.css和layui.js

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

第二步，声明element模块

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

第三步，布局

面板使用的是栅格布局，我们用 layui-row 来定义行之后，只需使用layui-col-（标记+列数）就可以进行进行排序。

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">标签</div>
                <div class="layui-card-body">
                    左边内容
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">标签</div>
                <div class="layui-card-body">
                    右边内容
                </div>
            </div>
        </div>
       
    </div>
</div> 

值得一提的是，layui-col-space 这个类定义列间距，使每个列的之间有间距，但是最左边和最右边的列不会出现边距，后面定义的数字决定间距的大小，下面是一个示例

<div class="layui-row layui-col-space15">
                                    <div class="layui-col-xs6">
                                        <div class="grid-demo grid-demo-bg1">
                                            <label class="layui-form-label">客户名称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="CustomerName" lay-verify="required" autocomplete="off" placeholder="请输入客户名称" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <div class="grid-demo grid-demo-bg1">
                                            <label class="layui-form-label">联系人</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="LinkMan" lay-verify="required" autocomplete="off" placeholder="请输入联系人" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>

效果

可以通过修改col来实现更多的排列，但同一行最大只能支持12列，多余的列会自动归为下一行