第一章 介绍
1.1 简介
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
为什么使用 Bootstrap?
- 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持:所有的主流浏览器都支持 Bootstrap。
Internet Explorer、 Firefox 、Opera 、Google Chrome、 Safari - 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见
Bootstrap 响应式设计。
1.2 HelloWorld(响应式布局)
1.2.1 下载和导入bootstrap框架
1.2.2 显示案例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron"><!--超大屏幕-->
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
</div>
</div>
</body>
</html>
第二章 bootstrap基本使用
2.1 表格
https://v3.bootcss.com/css/#tables
2.2 表单
https://v3.bootcss.com/css/?#forms
2.3 按钮
https://v3.bootcss.com/css/?#buttons
2.4 图标
https://v3.bootcss.com/components/#glyphicons-examples
2.5 栅(shan)格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
https://v3.bootcss.com/css/
<!-- 原生页面写好,导入框架,只需要给相应的元素加上相应的class值就会有相应的效果 -->
<!-- 所有东西都放在这个容器中,容器就是大网格 -->
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
<button id="btn01" class="btn btn-primary">哈哈</button>
</div>
<!-- 里面的东西放在一行 -->
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-6">
<h3>第一列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-6">
<h3>第二列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-6">
<h3>第三列</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
</div>
</div>
2.6 导航
https://v3.bootcss.com/components/#navbar-default
2.7 分页
https://v3.bootcss.com/components/#pagination
第三章 Layer弹层插件
3.1 介绍
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
3.2 下载
http://layer.layui.com/hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始使用layer</title>
</head>
<body>
<script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="layer.js的路径"></script>
<script>
//弹出一个提示层
$('#test1').on('click', function(){
layer.msg('hello');
});
//弹出一个页面层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;">自定义内容\<\/div>'
});
});
//弹出一个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
});
//弹出一个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
</script>
</body>
</html>
3.3 不同的浏览器显示的提示框样子不同,不统一.
3.4 常用的弹层: layer-v3.0.1.zip
3.4.1 提示
layer.msg(提示信息, {time:1000, icon:5, shift:6}, 回调方法); //弹出时间,图标,特效
layer.alert(提示信息, function(index){
// 回调方法
layer.close(index);
});
3.4.2 询问
layer.confirm("询问信息", {icon: 3, title:'提示'}, function(cindex){
layer.close(cindex);
}, function(cindex){
layer.close(cindex);
});
3.4.3 加载
var loadingIndex = layer.msg('处理中', {icon: 16});
...
layer.close(loadingIndex);
var index = layer.load(2, {time: 10*1000});
layer.close(index);
3.5 小图标
time:1000 显示时间
icon:5 图标
shift:6 抖动效果
icon.png
3.6 使用layer弹层完成提示消息
3.6.1 拷贝组件到项目中
3.6.2 在页面中引用组件/WEB-INF/jsp/login.jsp
3.6.3 代码参考
if(loginacct.val() == ""){
//alert("登录账号不能为空,请重新输入!");//alert,confirm方法会暂停UI线程
layer.msg("登录账号不能为空,请重新输入!", {time:2000, icon:5, shift:6}, function(){
loginacct.focus();
//return ; 只是返回当前回调函数,单击事件函数并没有返回,代码继续往下执行
}); //弹出时间,图标,特效
return ;//单击事件函数返回
}