BootStrap
BootStrap
- css
- js
学习 BootStrap 规则
一、响应式
@media
.c5{background-color:red;
height:100px;
}@media (min-width:700px){.c6{background-color:blue;
}}// width < 700px 执行red
<div class="c5 c6"></div>
二、图标、字体（bootstrap-css中的font-face应用fonts目录中的图片。）
@font-face //content: "\002a"; 用|002a 代号指存储在fonts目录中所对应的图片
三、基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c{background-color:blue !important;}</style><!--当然你也可以导入bootstrap-theme.css,添加bootstrap自带的样式--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css"/><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/></head>
<body><!-- 下面的span直接在官网找到组件，然后审查元素复制即可--><span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
<!-- Single button ,下面的直接可以复制代码--><div class="btn-group"><button type="button" class="c btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div>
<script src="jquery-1.12.4.js"></script>
<!--//导入bootstrap的js-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script></body>
</html>
EasyUI
========》 后台管理
jQueryUI 还未下载做测试
- css
- js
学习 jQueryUI 规则
EasyUI
- css
- js
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic DateBox - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="EasyUi//themes//default//easyui.css"><link rel="stylesheet" type="text/css" href="EasyUi//themes//icon.css"><link rel="stylesheet" type="text/css" href="EasyUi//demo//demo.css"><script type="text/javascript" src="EasyUi//jquery.min.js"></script><script type="text/javascript" src="EasyUi//jquery.easyui.min.js"></script>
</head>
<body><h2>Basic DateBox</h2><p>Click the calendar image on the right side.</p><div style="margin:20px 0;"></div><div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"><div style="margin-bottom:20px"><input class="easyui-datebox" label="Start Date:" labelPosition="top" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-datebox" label="End Date:" labelPosition="top" style="width:100%;"></div></div>
</body>
</html>
轮播图，bxlider
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{width}</style><link rel="stylesheet" href="bxslider-4-4.2.12/dist/jquery.bxslider.css"/>
</head>
<body><div class="slider"><div >I am a slide.</div><div>I am another slide.</div></div><div class="slider" ><div><img style="width:400px;height:300px;margin:0 auto" src="image/ka.jpg"></img></div><div><img style="width:350px;height:300px;margin:0 auto" src="image/2.jpg"></img></div><div><img style="width:200px;height:300px;margin:0 auto" src="image/3.jpg"></img></div></div><!--先导入自己的jquery--><script src="jquery-1.12.4.js"></script><script src="bxslider-4-4.2.12/dist/jquery.bxslider.js"></script><script>
// 下面写法当页面框架加载完成规后自动执行$(document).ready(function(){$('.slider').bxSlider();});</script></body>
</html>
效果 ，以我彦结束暂时的前端。开撸数据库和框架。路漫漫其修远兮，吾将上下而求索
