2、第十 - WEB开发进阶 - 前端工具应用介绍

　前端工具应用介绍：常用EasyUI、jQueryUI、BootStrap。便于后续快速开发，提供了各种样式的模板。

EasyUI 介绍

前端介绍，EasyUI 的官网：http://www.jeasyui.net/demo/380.html   可根据demo，选择想要的CSS、JS。（先把版本下载）

 

jQueryUI 介绍

前端介绍，jQueryUI 的官网：https://jqueryui.com/download/   可根据demo，选择想要的版本。

 jQueryUI的应用，可参考：http://www.runoob.com/jqueryui/ref-selectors.html

 

BootStrap 介绍

前端介绍，BootStrap的官网：http://www.bootcss.com/  

学习BootStrap 规则
（1）、响应式布局.
　　      @media 根据页面大小不一样，进行调整.利用display进行页面更换，可以参考：http://www.bootcss.com/ 的页面收缩操作
（2）、图标、字体
　　　　@font-face 可参考：https://v3.bootcss.com/components/
（3）、基本使用
　　　　轮播图
　　　　如何使用bxSlider 参考官网：http://bxslider.com/options    bxslider下载：https://github.com/stevenwanderski/bxslider-4/releases
　　　  首先是加载jQuery库，以及bxSlider插件文件和相关CSS文件，如下：

 

代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bxslider-4-4.2.15/src/css/jquery.bxslider.css">
    <style>
        .c1{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>

    <ul class="bxslider c1" style="border: 1px solid rebeccapurple">
        <li><img src="1.jpg" class="c1"></li>
        <li><img src="2.jpg" class="c1" ></li>
        <li><img src="3.jpg" class="c1"></li>
        <li><img src="4.jpg" class="c1" ></li>
    </ul>

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

 效果：

 

posted on 2018-10-24 09:53  C.Q&CHEN  阅读(146)  评论(0)    收藏  举报

导航