一.javaweb的总结

① javaweb01-javaweb07

1.完成了JSP基本使用

2.完成JSP页面的CURD[模型1的第一代]

3.session与Cookie的使用依赖"新闻发布系统"

② javaweb08-javaweb17

1.javabean模式开发[模型1的第二代]

2.富文本编辑器以及文件上传SmartUpload

3.三层架构

4.购物车项目 JSP动作标签 JSP四大域对象的使用 EL表达式的使用 JSTL标准标签库的使用

③ javaweb18-javaweb21

1.javaweb的三大组件：Servlet、Filter、Listener

2.MVC架构模式

3.购物车项目商品显示加入购物车生成订单生成订单项（订单详情）

④ javaweb22-javaweb-23

1.ajax的使用 2.JSON的使用如果使用原生态js的方式去实现AJAX。

1.考虑兼容性处理

2.步骤比较多（4个）

a.得到底层ajax的核心对象XMLHttpRequest

b.open()打开激活

c.发送

d.通过回调函数处理servlet那边响应的结果。

jQuery的ajax 方法 demo({}) ajax() get() post();

二.Bootstrap

① Bootstrap是什么?

(1).诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
(2).是一个用于快速开发Web应用程序和网站的前端框架
(3).Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷
概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

② 为什么使用Bootstrap?

(1).响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）
(2).移动设备优先
(3).浏览器支持
(4).容易上手

③ Bootstrap在哪里使用?

(1).企业网站、博客、网站后台之类的网站
(2).电商（电商网站分类太多）

④ 环境安装

(1).下载Bootstrap库
https://v4.bootcss.com/

(2).页面中引入库
bootstrap.css：Bootstrap核心样式【添加到head标签中】
jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.js：Bootstrap核心库
【添加到</body>之前】

三.案例

------案例1：查询按钮原生态实现对比Bootstrap方式实现-------<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Demo1</title><style>#btn1{/* 宽度*/width: 75px;/* 高度*/height: 35px;/* 背景颜色*/background-color: cadetblue;/* 去掉边框*/border: 0px;/* 设置边角的圆弧度*/border-radius: 6px;/* 手势*/cursor: pointer;}</style><!-- link引入Bootstrap.css --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><!-- 导入jQuery类 --><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><!-- 导入Bootstrap.js --><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>        </head><body><h1>原生态js实现查询按钮与Bootstrap实现查询按钮对比</h1><hr /><h2>原生态</h2><button id="btn1">按钮</button><hr /><h2>Bootstrap</h2><button class="btn btn-primary">查询</button><button class="btn btn-success">查询</button><button class="btn btn-danger">查询</button><button class="btn btn-info">查询</button><button class="btn btn-warning">查询</button><button class="btn btn-warning btn-lg">查询</button></body>
</html>

原生态按钮和Bootstrap按钮对比图

------案例2：演示Bootstrap页面在手机浏览器中展示效果----在head中添加：<meta name="viewport" content="width=device-width,initial-scale=1.0">width=device-width：呈现在不同设备上initial-scale=1.0：以1:1比例呈现，不会有任何缩放user-scalable=no：禁用网页缩放功能maximum-scale=1.0：页面放大程序，1.0将禁止用户放大实际尺寸<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 优先移动设置显示 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>Demo2</title><!-- link引入Bootstrap.css --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><!-- 导入jQuery类 --><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><!-- 导入Bootstrap.js --><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>      </head><body><div><h1>移动端优先显示</h1><h2>hhhhhhhhh</h2><h3>hhhhhhhhh</h3><h4>hhhhhhhhh</h4></div></body>
</html>

移动端优先显示示例图

------案例3：首页导航&搜索区域原生态实现（div+css）------
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Demo3</title><style>/* 将页面上使用标签中的内填充以及外间距设置归0 */*{/* 内填充 */padding: 0px;/* 外间距 */margin: 0px;}#container{/* 宽度*/  width: 100%;/* 高度*/height: 600px;/* 背景颜色*/background-color: gray;}#nav{/* 宽度*/width: 100%;/* 高度*/height: 35px;/* 背景颜色*/background-color: gainsboro;}.logo{/* 左浮动*/float: left;/* 左内填充*/padding-left: 25px;/* 利用行高垂直居中*/line-height: 35px;/* 手势*/cursor: pointer;}.nav_ul{/* 右浮动*/float: right;/* 右内填充*/padding-right: 25px;}.nav_ul a{/* 去掉下划线*/text-decoration: none;/* a标签属于行内标签 设置宽高无效 所以将其转为行内块状标签*/display: inline-block;/* 高度*/height: 35px;/* 垂直居中*/line-height: 35px;/* 设置每个a标签外间距*/margin-left: 5px;/* 字体颜色*/color: black;}/* a标签的伪类选择器*/.nav_ul a:hover{/* 背景颜色*/background-color: #F5C6CB;}/* 搜索栏目样式*/#search{/* 背景颜色*/background-color: wheat;/* 高度*/height: 200px;/* 宽度*/width: 92%;/* 利用外间距居中*/margin: 0 auto;/* 上外间距*/margin-top: 0 auto;/* 水平对齐方式*/text-align: center;/* 垂直 行高*/line-height: 200px;}#search input{/* 宽度*/width: 300px;/* 高度*/height: 32px;/* 边框*/border: 0px;/* 圆弧*/border-radius: 5px;/* 字体*/font-size: 18px;/* 字体的风格*/font-family: "agency fb";}#search button{/* 宽度*/width: 60px;/* 高度*/height: 32px;/* 边框*/border: 0px;/* 圆弧*/border-radius: 5px;/* 手势*/cursor: pointer;/* 颜色*/color: white;}</style><!-- link引入Bootstrap.css --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><!-- 导入jQuery类 --><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><!-- 导入Bootstrap.js --><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>        </head><body><!-- DIV+CSS原生态实现导航条以及搜索栏目的设计 --><div id="container"><!-- 导航 start --><div id="nav"><div class="logo">您好!欢迎来到德莱联盟</div><div class="nav_ul"><a href="#">首页</a><a href="#">登录</a><a href="#">注册</a><a href="#">我的购物车</a></div></div><!-- 导航 ned --><!-- 搜索栏目 --><div id="search"><input type="text"/><button>搜索</button></div></div></body>
</html>

------案例4：首页导航&搜索区域Bootstrap实现&搭首页框架------①.导航条组件的使用-Navbar②.布局容器固定容器【class="container"】大屏幕（大桌面显示器，大于等于 1200px）lg（ large）中等屏幕（桌面显示器，大于等于 992px）md（middle）小屏幕（平板，大于等于 768px）sm（small）超小屏幕（手机，小于 768px）xs（extra small）③.表单-Forms+输入框组组件-Input group④.栅格系统-Grid system概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统特点:会随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列网格系统策略图实现首页整体大致布局<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Demo4</title><!-- link引入Bootstrap.css --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><!-- 导入jQuery类 --><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><!-- 导入Bootstrap.js --><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>    <style>.navbar-collapse{/* 布局*/flex-grow: 0;}</style></head><body><!-- 实现网站首页的导航条 --><!-- Bootstrap 导航条 通过nav标签添加navbar导航条样式 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><!-- 导航条的标题 --><a class="navbar-brand" href="#">您好!欢迎来到德莱联盟</a><!-- 按钮 --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><!-- collapse 折叠组件--><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a><a class="nav-link" href="#">登录</a><a class="nav-link" href="#">注册</a><!-- disabled 禁用--><a class="nav-link disabled">我的购物车</a></div></div></div></nav></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Demo5</title><!-- link引入Bootstrap.css --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><!-- 导入jQuery类 --><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><!-- 导入Bootstrap.js --><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>        <style>.form-group{/* 宽度*/width: 320px;/* 居中*/margin: 0 auto;}</style></head><body><!-- 巨幕来实现搜索栏目 --><div class="container"><div class="jumbotron"><!-- 表单模块--><form><div class="form-group"><!-- 输入框组件--><div class="input-group mb-3"><input type="text" class="form-control" placeholder="名称" aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button></div></div></div></form></div></div></body>
</html>

演示图

四.Bootstrap-01 总结

Bootstrap-01 (前台开发框架)相关推荐

AngularJs+bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...
AngularJs+bootstrap搭载前台框架——基础页面
1.用AngularJS app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstra ...
Bootstrap EasyUI WEB开发框架
导言:最近接触一些web开发框架,记录下学习的两个web开发框架-Bootstrap 和 EasyUI Bootstrap介绍: 官方中文网:http://www.bootcss.com/ Boot ...
Bootstrap-02 (前台开发框架)
一.案例 ① 轮播图 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
Bootstrap-03 (前台开发框架)
一.案例1:实现搜索书籍页面组件:媒体对象-Media object <!DOCTYPE html> <html> <head> < ...
【JavaWeb】前端框架之Bootstrap
文章目录 1 概念 2 快速入门 3 响应式布局 4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML.CSS.JavaScript. 优点: 定义了很多CSS样式和JS ...
bootstrap框架过时了吗_浅议bootstrap 框架优缺点
韦建波韦龙勇 [摘要]Bootstrap是近年来比较流行的前端开发框架,本文介绍了Bootstrap框架的发展历史和重要特性,分析了Bootstrap框架设计的优缺点,能对web前端开发人员带来一 ...
2016/09/16面试资料汇总
Rood 内连接全连接高并发多线程怎么识别不同用户的session spring和springMVC有什么区别 session和cookie的区别 ibatis的几个文件 springMVC有 ...
Vue之Hello World！
目录 1.简介 1.1.Vue介绍 1.2.什么是MVVM模型 1.3.Vue相关 1.4.帮助文档 1.5.VUE GitHub 2.安装 2.1.管理员启动cmd,执行npm install vu ...

Bootstrap-01 (前台开发框架)