h3 { background-color: palegreen }
一各种插件汇总
插件 ---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 做表单验证
时间： 2024-10-12 22:14:14