基於”Layui"框架構建前端頁面


layui(諧音:類UI) 是一款比較好用的前端框架之一,我本身就是經常采用這一框架來構建我的前端頁面的代碼。采用框架編寫的前端頁面代碼要比自己寫的便捷許多而且從外觀上也比自己寫的效果要好的多。

 

示例:

 

此處截取的一部分僅僅是表單采用了layui框架,但是可以相較於用我自己編寫的要好上太多,那么我們就來看一看框架的一些簡單應用方法:

 

1、下載layui框架包,並放入自己的項目文件

    下載地址:https://www.layui.com/

    下載之后解壓,然后把解壓后的框架包放入自己的習慣保存的地方

    

 

 

 

    導入框架包,將框架包復制粘貼在自己的項目的WebContent:

        

 

 

 

2、在項目中導入jquery框架包

        

 

 

        由於layui框架是在jquery框架上二次開發的,所以如果不在項目中導入jquery框架包可能會導致layui框架的無法使用,導入的版本在1.8 以上就可以了,我是1.9的;

 

        我的在本電腦搜一下,找到所需要的文件,拖到新建好的jquery文件中即可:

        

 

 

          選取其中所需要的文件即可。

 

3、新建頁面文件

      將官網給出的頁面示例源碼復制下來粘貼在新建的頁面文件中,並在head 標簽中寫入如下的引用代碼:

1 <link rel="stylesheet" href="layui/css/layui.css" media="all">
2 <script src="layui/layui.js" type="text/javascript"></script>
3 <script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

 

 

       即可出現官網所給的源程序代碼的效果圖:

      

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM