HTML模版组件
阅读原文时间:2023年07月10日阅读:2

1、介绍

  • BootStrap (最好看的)

    • css
    • js
    • [x] 学习 BootStrap 规则
  • jQueryUI (美观一般,偏后台。*)

    • css
    • js
    • [x] 学习 jQueryUI 规则
  • EasyUI (html框架和生成的效果不一样,有时需要修改css、js,代价大一点)

    • css
    • js
    • [x] 学习jQueryUI 规则

**总结:**jQueryUI和EasyUI 用在后台管理偏多,Bootstrap 后台主页显示都可以用。

可以直接用模板,不用重复造轮子。

2、BootStrap

  • 响应式布局(响应式页面)

面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题。比如网页随着窗口大小的变化而显示不同的样式。

BootStrap css里面存在大量的响应式布局。


BootStrap 里面有图标,但是没有图片,里面的图标是基于字体做的。

在 dist/fonts/ 目录里面。每个图标都有绑定的位置。比如 ”content: “\2212”“

使用的时候直接写上图标样式就可以了。

  • 基本使用

修改BootStrap里面的样式时,注意样式有优先级的,下面的生效。更方便的,设置为最优先,最重要的。

.no-radius{
border-radius: 0 !important; /*优先级最高,最重要的*/
}



Title

<script src="jquery-1.12.4.js"></script>  
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>  


3、插件实现轮播图(bxSlider)

bxslider.com 下载插件,网站上有使用教程。



Title

<script src="jquery-1.12.4.js"></script>  
<script src="jquery.bxslider/jquery.bxslider.js"></script>  
<script>  
    $(document).ready(function(){  
        $('.bxslider').bxSlider();  
    });  
</script>