前端各种插件
Posted pyrene
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端各种插件相关的知识，希望对你有一定的参考价值。
一各种插件汇总
插件 ---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="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>
container 响应式内容定义为980px，居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="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>
注意点：如果想用里面的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="bootstrap-3.3.5-dist/dist/css/bootstrap.css"/> <!--<!–下面是响应式的，如果不想用，那么就自己定义–>--> <!--<style>--> <!--.container{--> <!--width: 980px;!important;--> <!--<!–}–>--> <!--</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="jquery.js"></script> <script src="bootstrap-3.3.5-dist/dist/js/bootstrap.js"></script> </body> </html>
插件二、
---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="bxslider-4-master/src/css/jquery.bxslider.css"/> </head> <body> <ul class="bxslider"> <li><img src="图片/1.jpg" /></li> <li><img src="图片/2.jpg" /></li> <li><img src="图片/3.jpg" /></li> <li><img src="图片/4.jpg" /></li> </ul> <script src="jquery.js"></script> <script src="bxslider-4-master/src/js/jquery.bxslider.js"></script> <script> // 这里是用了js的扩展方法 $(document).ready(function(){ $(‘.bxslider‘).bxSlider(); }); </script> </body> </html>
下面插件不太重要
插件四、jquery EasyUI
适用于后台管理
插件五、jquery UI
做后台管理，在包里面的demo里面插件直接用就好了
下面插件建议参考
插件六、parslcyjs
做表单验证
插件七、jQuery Validate
做表单验证
以上是关于前端各种插件的主要内容，如果未能解决你的问题，请参考以下文章