layui-image
/
alone.html



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui 独立组件</title>
  <meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件">
  <meta name="description" content="layui 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <link rel="stylesheet" href="../res/layui/dist/css/layui.css"  media="all">
  <link rel="stylesheet" href="../res/static/css/global.css"  media="all">
</head>
<body class="site-home" id="LAY_home">


<div class="layui-header header header-alone" autumn>
  <div class="layui-container">
    <a class="logo" href="index.htm">
      <img src="../res/static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
    <div class="layui-hide-xs site-notice"></div>

    <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item ">
        <a href="doc/index.htm">文档</a>
      </li>
      <li class="layui-nav-item ">
        <a href="demo/index.htm">示例</a>
      </li>

      <li class="layui-nav-item">
        <a href="javascript:;">
          周边
        </a>
        <dl class="layui-nav-child layui-nav-child-c">

          <dd lay-unselect><a href="alone.html" target="_blank" lay-unselect>独立组件</a></dd>
        </dl>
      </li>

    </ul>
  </div>
</div>

<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="../other/html5shiv/r29/html5.min.js" ></script>
  <script src="../other/respond.js/1.4.2/respond.min.js" ></script>
<![endif]-->

<div class="layui-container" style="min-height: 800px;">
  <blockquote class="layui-elem-quote layui-text" style="margin: 30px 0;">
    尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
  </blockquote>

  <fieldset class="layui-elem-field layui-field-title">
    <legend style="margin-bottom: 20px; text-align: center;">layui 独立组件</legend>
    <div class="layui-field-box">
      <ul class="layui-row layui-col-space1">
        <li class="layui-col-sm6">
          <div class="alone"><a href="layer/index.htm" target="_blank">layer<cite>通用型弹出层组件</cite></a></div>
        </li>
        <li class="layui-col-sm6">
          <div class="alone"><a href="laydate/index.htm" target="_blank">layDate<cite>日期与时间组件</cite></a></div>
        </li>
      </ul>
      <p style="padding: 50px 15px 30px; text-align: center; color: #999;">请注意：如果你不想使用 layui，而只是要单独使用上述组件</p>
    </div>
  </fieldset>
</div>
<script>
window.global = {
  pageType: 'alone'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>

<script src="../res/layui/dist/layui.js" charset="utf-8"></script>
<script>
layui.config({
  base: '../res/static/lay/modules/layui/'
  ,version: '1632428048260'
}).use('global');
</script>


</body>
</html>