首页 > 代码库 > 前端各种插件

前端各种插件

2024-09-12 11:11:13   214人阅读

<style>h3 { background-color: palegreen }</style>

一各种插件汇总

插件
---Bootstrap
http://v3.bootcss.com/getting-started/
http://v3.bootcss.com/

---Font Awesome
   http://fontawesome.io/

----bxslider
http://bxslider.com/
-----jquery EasyUI
   http://www.jeasyui.com/download/index.php
-----jquery UI
   http://jqueryui.com/
----parslcyjs
   http://parsleyjs.org/
-----jQuery Validate
   http://jqueryvalidation.org/

插件一、bootstrap是一个用于构建 响应式 网站的前端框架

 具体说明请点击我

 

响应式：根据页面像素的不同就以不同的样式去显示，通过@media 来展示
要用link的方式导入bootstrap的源码

下面代码：

技术分享 
.col-sm- * 屏幕大于750px的时候才能生效
.col-lg- *  屏幕大于1170px的时候才能生效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href=http://www.mamicode.com/"bootstrap-3.3.5-dist/dist/css/bootstrap.css"/>
</head>
<body>
<div class="col-lg-2">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-8">3</div>
</body>
</html>
View Code
技术分享 
container   响应式内容定义为980px，居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href=http://www.mamicode.com/"bootstrap-3.3.5-dist/dist/css/bootstrap.css"/>
    下面是响应式的，如果不想用，那么就自己定义
    <style>
        .container{
            width: 980px;!important;
        }
    </style>
</head>
<body>
<div class="container" style="background-color: red;">happy</div>
</body>
</html>
View Code

注意点：如果想用里面的javascript插件，必须要使用jquery1.9版本以上才可以

bootstrap 用法：

1、	css样式和组件，都是直接贴上然后修改就可以用
2、	如果要用javascript插件，需要导入jquery1.9和以上和bootstrap就可以
下面就是导入的例子，导入顺序不能错，先导入jquery，之后导入bootstrap

　

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href=http://www.mamicode.com/"bootstrap-3.3.5-dist/dist/css/bootstrap.css"/>
    <!--&lt;!&ndash;下面是响应式的，如果不想用，那么就自己定义&ndash;&gt;-->
    <!--<style>-->
        <!--.container{-->
            <!--width: 980px;!important;-->
        <!--&lt;!&ndash;}&ndash;&gt;-->
    <!--</style>-->
</head>
<body>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
    <script src=http://www.mamicode.com/"jquery.js"></script>
    <script src=http://www.mamicode.com/"bootstrap-3.3.5-dist/dist/js/bootstrap.js"></script>
</body>
</html>
View Code

插件二、

---Font Awesome

主要做图标用的

插件三、

----bxslider

制作轮播图的

 

由于插件比较多，所以要在pycharm中创建一个软件包

这里创建了Plugins这个软件包专门存放插件的,

 

注意点：
这里的样式等创建的不是太全，可以自己修改，先在浏览器中查看，之后修改源码
1、在head中导入bxslider的css样式
2、在body中导入图片
3、在body中首先导入jquery文件包，之后再倒入bxslider文件包
4、用jquery方法
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href=http://www.mamicode.com/"bxslider-4-master/src/css/jquery.bxslider.css"/>
</head>
<body>
<ul class="bxslider">
  <li><img src=http://www.mamicode.com/"图片/1.jpg" /></li>
  <li><img src=http://www.mamicode.com/"图片/2.jpg" /></li>
  <li><img src=http://www.mamicode.com/"图片/3.jpg" /></li>
  <li><img src=http://www.mamicode.com/"图片/4.jpg" /></li>
</ul>

<script src=http://www.mamicode.com/"jquery.js"></script>
<script src=http://www.mamicode.com/"bxslider-4-master/src/js/jquery.bxslider.js"></script>
<script>
//    这里是用了js的扩展方法
    $(document).ready(function(){
  $(‘.bxslider‘).bxSlider();
});
</script>
</body>
</html>
View Code

下面插件不太重要

 

技术分享 
插件四、jquery EasyUI
适用于后台管理

插件五、jquery UI
做后台管理，在包里面的demo里面插件直接用就好了


下面插件建议参考
插件六、parslcyjs
做表单验证

插件七、jQuery Validate
做表单验证
View Code

 

前端各种插件


联系
我们