前端学习日志-7-BootStrap/EasyUI/jQueryUI组件

本文详细介绍了EasyUI、jQueryUI和BootStrap三种前端UI框架的使用方法、操作步骤以及各自特点。EasyUI适合后台管理界面，jQueryUI提供丰富的交互组件，而BootStrap则擅长响应式布局，广泛应用于前端全栈开发。文中还提到了bxslider插件的图片轮播功能及其应用。通过对各种框架和插件的实践操作，读者可以更好地理解和应用这些工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- EasyUI/jQueryUI适用于后台管理

- BootStrap适用于前端全栈开发

------------------------------------------EasyUI

插件源：JQuery EasyUI中文网

操作：

下载EasyUI压缩包>查看demo文件>目标样式>复制源码>拖拽文件至根目录>修改源文件中CSS、JS引用路径

EasyUI内容涉及CSS/JS，学习EasyUI规则、修改EasyUI内容经应熟练Ajax操作

------------------------------------------jQueryUI

插件源：JQuery EasyUI中文网

操作：

下载jQueryUI压缩包>查看index.html所有样式>目标样式>页面复制源码

------------------------------------------BootStrap

插件源：

操作：

下载BootStrap压缩包>查看主页所有样式/组件>目标样式/组件>页面复制样式/组件对应的源码>拖拽文件至根目录>通过路径自主引入CSS、JS

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">    //CSS主样式
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap-theme.css">  //主题颜色样式
</head>
<body>
    <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>    //从主页中获取的图标源代码

    <script src="jquery-3.6.0.js"></script>            //插件基于JS，需先引入JS
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>    //JS
</body>

--BootStrap响应式布局

响应式布局： - 根据页面大小CSS做出不同响应

@media

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:red;
            height:50px;
        }
        @media (min-width:1000px){        //#大于最低限度则执行，反之不执行
            .c2{
                background-color:black;
            }
        }
    </style>
</head>

--BootStrap修改、设置、覆盖属性

涉及CSS属性优先级：远近、次序

加“ !important ”声明样式最高级，使绝对生效、覆盖

    <style>
        .re-c1{
           background-color:red !important;
        }
    </style>

扩展：

-------------------------bxslider插件

bxslider插件用于做图片轮播，图片自动切换

插件源：

操作：

下载压缩包>主页获取目标组件>复制主页各部分代码>拖拽文件至根目录>根据路径自主引入CSS、JS>修改图片及路径

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bxslider-4-4.2.12/src/css/jquery.bxslider.css">
                        //根据路径引入组件CSS
</head>
<body>
    <div class="bxslider">            //从主页copy的组件源代码(HTML部分)
      <div><img src="5.jpg" title="Funky roots"></div>
      <div><img src="9.jpg" title="The long and winding road"></div>
      <div><img src="11.jpg" title="Happy trees"></div>    
    </div>                 //替换图片路径，设置图片大小等属性
                            
    <script src="jquery-3.6.0.js"></script>        //JS
    <script src="bxslider-4-4.2.12/src/js/jquery.bxslider.js"></script>  //引入组件JS

    <script>                    //从主页copy的组件源代码(JS部分)
        $(function(){
            $('.bxslider').bxSlider({
                mode: 'fade',
                captions: true,
                slideWidth: 600
            });
        });
    </script>
</body>