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>
效果 ，以我彦结束暂时的前端。开撸数据库和框架。路漫漫其修远兮，吾将上下而求索
扫一扫
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
