Bootstrap

7 篇文章 0 订阅

第一章 介绍

1.1 简介

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
为什么使用 Bootstrap?

  1. 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
  2. 浏览器支持:所有的主流浏览器都支持 Bootstrap。
    Internet Explorer、 Firefox 、Opera 、Google Chrome、 Safari
  3. 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
  4. 响应式设计: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 ;//单击事件函数返回
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值