ÔõôÔÚThinkPHPÖзâ×°Layui
Ò»¡¢ÎªÊ²Ã´ÒªÔÚThinkPHPÖзâ×°Layui
ÔÚÏÖʵ¿ª·¢ÖУ¬ÎÒÃǾ³£»áʹÓõ½Layui¿ò¼ÜÀ´ÊµÏÖÇ°¶ËµÄЧ¹û£¬¿ÉÊÇÖ±½ÓÔÚÏîĿʹÓÃLayuiÒ²±£´æ×ÅÐí¶àÎÊÌ⣬ÈçÇ°¶Ë´úÂëÓëºǫ́´úÂë»ìÔÓÔÚÒ»Æð¡¢ÄÑÒÔά»¤ÒÔ¼°²»Ë³Ó¦ÍŶӿª·¢µÈÇéÐΡ£
Òò´Ë£¬ÔÚThinkPHP¿ò¼ÜÖзâ×°Layui¿ÉÒÔÓÐÓõؽâ¾öÒÔÉÏÎÊÌ⣬ÈôúÂëÔ½·¢ÇåÎú¡¢Ò×ÓÚά»¤£¬Ò²¸ü˳ӦÍŶӿª·¢¡£
¶þ¡¢ÔõÑùÔÚThinkPHPÖзâ×°Layui
ÔÚThinkPHPÖзâ×°Layui¿ÉÒÔ·ÖΪÒÔϼ¸¸ö°ì·¨£º
1.ÏÂÔØLayui
Á¬Ã¦Ñ§Ï°¡°PHPÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
ÔÚLayui¹ÙÍøhttp://www.layui.com/ÏÂÔØ×îаæµÄLayuiÎļþ¡£
2.ÒýÈëLayuiÎļþ
½«ÏÂÔغõÄLayuiÎļþ½âѹºó£¬½«ÐèÒªÓõ½µÄÎļþ£¨Èçlayui.js¡¢layui.css£©´æ·ÅÔÚÏîĿĿ¼µÄpublicÎļþ¼ÐÏ¡£È»ºóÔÚÏîÄ¿ÖÐÒýÈëÕâЩÎļþ¡£
<link rel="stylesheet" href="/public/layui/css/layui.css" media="all"> <script src="/public/layui/layui.js"></script>
µÇ¼ºó¸´ÖÆ
3.½ç˵ģ°å
ÔÚʹÓÃThinkPHPʱ£¬ÈËÃÇͨ³£Ê¹ÓÃsmartyµÈÄ£°åÒýÇæÀ´½¨ÉèÄ£°å¡£ÏÂÃæÒÔsmartyΪÀý£¬ÏÈÈÝÔõÑù½ç˵һ¸ö»ù´¡Ä£°å¡£
<html> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="/public/layui/css/layui.css" media="all"> <script src="/public/layui/layui.js"></script> </head> <body> {% block content %}{% endblock %} </body> </html>
µÇ¼ºó¸´ÖÆ
ÔÚÕâ¸öÄ£°åÖУ¬¿ÉÒÔ¿´µ½ÎÒÃǽç˵ÁËÒ»¸ö»ù±¾µÄHTML½á¹¹£¬ÒýÈëÁËLayuiµÄÑùʽÓë¾ç±¾Îļþ£¬²¢ÇÒÔÚcontent±êÇ©ÖУ¬ÎÒÃǽ«ÓÉÏêϸҳÃæäÖȾµÄÄÚÈÝ°²ÅÅ¡£
4.½ç˵»ù´¡Ò³Ãæ
ÔÚÏîÄ¿Öл᷺ÆðÐí¶àÀàËƵÄÒ³Ã棬ÈçµÇ¼ҳÃæ¡¢±íµ¥Ò³ÃæµÈ¡£ÕâÀïÎÒÃÇ¿ÉÒÔ½ç˵һ¸ö»ù´¡µÄÒ³ÃæÄ£°å£¬ÓÃÓÚÆäËûÒ³ÃæµÄ¼ÌÐø¡£
ÔÚThinkPHPÖУ¬ÎÒÃÇ¿ÉÒÔ½«¹«¹²µÄÊÓͼÎļþ°²ÅÅÔÚÏîĿĿ¼µÄapplication/common/viewÎļþ¼ÐÏ¡£ÏÖÔÚÎÒÃǽ«½ç˵»ù´¡Ò³ÃæµÄÊÓͼÎļþ´æ·ÅÔÚÕâÀï¡£
{extend name="base"} {% block content %} <div class="layui-container"> {% block super %}{% endblock %} </div> {% endblock %}
µÇ¼ºó¸´ÖÆ
ÔÚÕâ¸ö»ù´¡Ò³ÃæÖУ¬ÎÒÃǼÌÐøÁË֮ǰ½ç˵µÄÄ£°å£¬½ç˵ÁËÒ»¸ölayuiµÄÈÝÆ÷£¬²¢½«ÏêϸҳÃæäÖȾµÄÄÚÈÝ·ÅÔÚsuper±êÇ©ÖС£
5.½ç˵ÏêϸҳÃæ
½ç˵ÏêϸµÄÒ³ÃæÒ²ºÜ¼òÆÓ£¬Ö»ÐèÒª¼ÌÐø»ù´¡Ò³Ã棬²¢ÔÚsuper±êÇ©ÖбàдHTML´úÂë¼´¿É¡£
{extend name="base"} {% block super %} <div class="layui-row layui-col-space10"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">Óû§ÖÎÀí</div> <div class="layui-card-body"> <button class="layui-btn layui-btn-normal">Ìí¼ÓÓû§</button> <table class="layui-table"> <thead> <tr> <th>ID</th> <th>Óû§Ãû</th> <th>Æ·¼¶</th> <th>״̬</th> <th>²Ù×÷</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>admin</td> <td>³¬µÈÖÎÀíÔ±</td> <td><span class="layui-badge layui-badge-green">ÒÑÆôÓÃ</span></td> <td> <button class="layui-btn layui-btn-xs">±à¼</button> <button class="layui-btn layui-btn-xs layui-btn-danger">ɾ³ý</button> </td> </tr> </tbody> </table> </div> </div> </div> </div> {% endblock %}
µÇ¼ºó¸´ÖÆ
ÔÚÕâ¸öÒ³ÃæÖУ¬ÎÒÃǼÌÐøÁË֮ǰ½ç˵µÄ»ù´¡Ò³Ã棬²¢Ê¹ÓÃLayuiµÄ×é¼þʵÏÖÁËÒ»¸öÓû§ÖÎÀíÒ³Ãæ¡£
Èý¡¢·â×°ºóµÄLayuiµÄÓÅÊÆ
ÔÚʹÓ÷â×°ºóµÄLayuiʱ£¬ÎÒÃÇ¿ÉÒÔ¿´µ½´úÂë±äµÃÔ½·¢ÇåÎú£¬Ç°¶ËÓëºǫ́´úÂëÊèÉ¢£¬Ò×ÓÚά»¤ºÍ×éÖ¯¡£Í¬Ê±£¬ÊÜÒæÓÚÄ£°å¼ÌÐøµÄ»úÖÆ£¬ÎÒÃÇ¿ÉÒÔºÜÊÇÀû±ãµØʵÏÖ»ù´¡Ò³ÃæµÄ¸´Óã¬ÈÃÏîÄ¿¿ª·¢Ô½·¢¸ßЧ¡£
³ý´ËÖ®Í⣬·â×°ºóµÄLayui»¹¿ÉÒÔ˳ӦÍŶӿª·¢£¬¿ª·¢ÕßÖ»ÐèÒª¹Ø×¢×Ô¼ºÈÏÕæµÄÒ³Ã棬¶øÎÞÐèÉîÈëÏàʶµ×²ãʵÏÖ¡£ÕâÑù×ö¿ÉÒÔʹ¿ª·¢Ö°Ô±¸üרעÓÚÆäÁìÓò£¬´Ó¶øʹÏîÄ¿¿ª·¢Ô½·¢¸ßЧ¡£
ÒÔÉϾÍÊÇÔõôÔÚThinkPHPÖзâ×°LayuiµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡