javaWeb核心技术第六篇之BootStrap

作者: 小小一技术驿站 | 来源:发表于2019-08-17 11:39 被阅读0次

javaWeb核心技术第六篇之BootStrap
Java Web 从入门到"改行"（2）--
JavaWeb小项目之综合搜索工具（二）：爬虫篇
JavaWeb小项目之综合搜索工具（一）：前端篇
JavaWeb小项目之综合搜索工具（三）：创建RESTful服务
12-撩课JavaEE-Response
05-码蚁JavaWeb之Tomcat插件安装
06-码蚁JavaWeb之Servlet
03-码蚁JavaWeb之Tomcat服务器
04-码蚁JavaWeb之Tomcat体统结构

概述:

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

作用:

开发响应式的页面

响应式:就是一个网站能够兼容多个终端

节约开发成本,提高开发效率

入门:

下载BootStrap

www.bootcss.com 官网地址

模版

1.导入BootStrap的css

2.导入jquery的js(1.8+)

3.导入BootStrap的js

4.设置视口(支持移动设备)

5.添加一个布局容器

通过div设置一个 class

方式1:class="container"

方式2:class="container-fluid"

核心:

全局CSS

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

媒体查询(了解)

默认有一些分辨率临界点的阀值

分辨率屏幕大小

分辨率>=1200px 超大屏幕

992<=分辨率<1200 中等屏幕

768<=分辨率<992 小屏幕

分辨率<768 超小屏幕

栅格系统★

在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分成一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用

行:

通过class = "row"来设置一行

列(最多将视口分为12列)

通过class属性来设置在不同屏幕是所占的列 n表示每格占的份数

col-lg-n 大屏分辨率>=1200

col-md-n 中屏 992<=分辨率<1200

col-sm-n 小屏 768<=分辨率<992px

col-xs-n 超小屏分辨率<768px

案例:

</div>

响应式工具:

显示:

.visible-xs 超小屏可见

.visible-sm 小屏可见

.visible-md 中等屏幕可见

.visible-lg 大屏可见

隐藏:

.hidden-xs 超小屏时隐藏

.hidden-sm 小屏幕时隐藏

.hidden-md 中等屏幕时隐藏

.hidden-lg 大屏幕时隐藏

标题:

.h1 -- .h6

对齐方式:(文本)

.text-left 左对齐

.text-center居中

.text-right 右对齐

列表:

.list-unstyled 移除默认的列表样式

.list-inline 将所有列表项放置同一行

表格:bootstrap给表格添加了默认样式

.table 普通表格

.table-striped 条纹表格(IE8不支持)

.table-bordered 边框表格

.table-hover 带有鼠标悬停的表格

.table-condensed 紧缩表格

表单:

垂直表单:

内联表单:(将所有内容放在同一行)

水平表单:

按钮:★

.btn 为按钮添加基本样式

.btn-default 默认/标准按钮

.btn-primary 原始按钮样式（未被操作）

.btn-success 表示成功的动作

.btn-info 该样式可用于要弹出信息的按钮

图片:

.img-rounded 为图片添加圆角 (IE8 不支持)

.img-circle 将图片变为圆形 (IE8 不支持)

.img-responsive 图片响应式

组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

下拉选:

导航条:

javaScript插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

图片轮播

综合案例:

<!DOCTYPE html>

<html>

<head>

$(function() {

$('.carousel').carousel({

interval: 1000

})

});

</script>

</head>

<body>

<!--img1:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份

img2:中等屏幕时占4份,在小屏时隐藏,在超小屏时占12份

超链接:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份-->

</div>

</div>

</div>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<a href="#">手机数码 <span class="sr-only">(current)</span></a>

</li>

<li>

</li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li>

<a href="#">Action</a>

</li>

<li>

<a href="#">Another action</a>

</li>

<li>

<a href="#">Something else here</a>

</li>

<li>

<a href="#">Separated link</a>

</li>

<li>

<a href="#">One more separated link</a>

</li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</div>

</nav>

</div>

</ol>

欢迎你...

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

<div>

</div>

<!--下div:

左div:中等屏幕时占2份,小屏和超小屏隐藏

图片

右div:中等屏幕时占10份,小屏和超小屏占12份

middle div:中等屏幕时占6份,小屏和超小屏隐藏

图片

商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份

图片 2个p标签-->

<!--左div:中等屏幕时占2份,小屏和超小屏隐藏

图片-->

</div>

<!--右div:中等屏幕时占10份,小屏和超小屏占12份

-->

<!--middle div:中等屏幕时占6份,小屏和超小屏隐藏

图片-->

</div>

<!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份

图片 2个p标签-->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

</div>

<!--下div:

左div:中等屏幕时占2份,小屏和超小屏隐藏

图片

右div:中等屏幕时占10份,小屏和超小屏占12份

middle div:中等屏幕时占6份,小屏和超小屏隐藏

图片

商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份

图片 2个p标签-->

<!--左div:中等屏幕时占2份,小屏和超小屏隐藏

图片-->

</div>

<!--右div:中等屏幕时占10份,小屏和超小屏占12份

-->

<!--middle div:中等屏幕时占6份,小屏和超小屏隐藏

图片-->

</div>

<!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份

图片 2个p标签-->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

</ol>

</p>

</div>

</body>

</html>

案例-将我们的项目发布出去

需求分析:

将我们编写好的(web项目)项目放到服务器上,这样以来用户就可以通过网络访问到我们的(web项目)项目了

技术分析:

web服务器

web项目

Http协议

//////////////////////////

http://localhost/webDemo/html/hello.html get

///////////////////

day33HTTP&Tomcat

- Web服务器

- 概念:

- web资源:

"英文直译"网"的意思

资源:一切数据文件

web资源:通过网络可以访问到的资源,通常指的是一切放在服务器上的文件"

- web资源的分类:

- 静态的web资源:

" 内容是一成不变的"

- 动态的web资源:

" 内容有可能在不同的时间或者不同的人访问的时候会发生改变的"

- web技术分类

- 静态的web技术

" 例如: html css js ....."

- 动态的web技术

" 例如:servlet jsp"

- 软件的架构

- c/s架构(Client/Server 客户端/服务器)

" 例如:qq 迅雷 lol"

- b/s架构(Browser/Server 浏览器/服务器)

" 例如:京东淘宝 "

- 区别

- c/s:需要客户下载客户端,页面比较炫,和服务器交互少,可以在客户端处理部分业务逻辑,可降低服务器的压力.需要维护客户端和服务器端

- b/s:只需要客户有一个浏览器,一切页面从服务器加载,和服务器交互频繁,由服务器处理业务逻辑,服务器压力较大.只需要维护服务器端.

- 通讯机制

- 基于http协议

- 浏览器发送给服务器的内容:请求(request)

- 服务器返回给浏览器的内容:响应(response)

- 注意:先有请求,后有响应,一次请求对应一次响应

- web服务器

- 作用:将我们编写好的网页发布出去,别人就可以通过网络访问

- 常见的web服务器

"名称厂商特点

Weblogic oracle 大型的收费的支持javaEE所有规范的web服务器(servlet和jsp)

websphere ibm 大型的收费的支持javaEE所有规范的web服务器(servlet和jsp)

tomcat apache 小型的免费的支持servlet和jsp规范的"web服务器""

- Tomcat服务器★

Tomcat如何优化?

1: 优化连接配置.修改连接数,关闭客户端的dns查询(DNS查询需要占用网络，再获取对方ip的时候会消耗一定的时间)

2: 优化jdk,扩大tomcat使用的内存,默认为128M

- 下载

- http://tomcat.apache.org/download-70.cgi

- core:

- zip:可以在window上运行的(我们今天使用)

- tar.gz:运行在linux上的

- 安装

- 解压缩即可

- 目录结构

- bin:存放可执行的文件

- ★conf:存放配置文件

- lib:存放的是tomcat运行时和项目运行时必须的jar包

- logs:存放的是日志文件(catalina.out)

- temp:存放临时文件(不用管)

- ★★webapps:存放要发布的web项目

- ★work:存放项目运行时产生的java文件和class文件

- 启动

" 双击 tomcat目录下/bin/startup.bat"

- 关闭

" 方式1:点 x

方式2:ctrl + c

(记住)方式3:双击 tomcat目录下/bin/shutdown.bat"

- 配置

- 常见问题

- 一闪而过

"查看JAVA_HOME是否配置正确"

- 端口占用: 可以修改Tomcat的端口号

"修改 tomcat目录下/conf/server.xml 大约70行

<Connector port="8080" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" />

需要将 8080 修改成其他的端口号

端口号:0~65535

0~1024:系统预留的端口号一般不要使用但是可以使用80端口

80端口是http协议的默认端口号,访问的时候可以不写端口号"

- 访问格式

- tomcat的访问路径(8080是tomcat的默认的端口号)

" http://localhost:8080"

- 格式:http://ip地址:端口号/项目名/资源?参数名称=值&参数名称=值

- web项目

- 目录结构:★

"myweb(目录名:项目名)

|

|---资源文件 html img css js

|---WEB-INF(目录:特点,通过浏览器直接访问不到)

| |

| |---lib(目录:项目运行的jar包)

| |---classes(目录:存放的class文件)

| |---web.xml(核心配置文件,在servlet2.5版本中必须有,serlvet3.0版本不是必须的)"

- 项目访问路径:

"http://localhost:80/myweb/1.html

协议://ip地址:端口/项目名称/资源"

- Tomcat和Eclipse整合

- Http协议:

- 协议:规定内容的传输的格式

- http协议:

"用来制定互联网上数据的传输格式"

- 包含:

- 浏览器发送给服务器的内容请求

"规定请求数据的格式"

- 服务器返回给浏览器的内容响应

"规定响应数据的格式"

- 请求的格式:

"请求行请求头请求体"

- 请求行:请求的第一行

- 格式:请求方式请求资源协议/版本

"例如: GET /day33/1.html HTTP/1.1"

- 请求方式:

"常见的两种 get和post

get请求:请求参数会在地址栏上显示,参数大小有限制,不安全

http://ip地址:端口号/项目名/资源?参数名称=值&参数名称=值

post请求:请求参数不在地址栏上显示,参数大小不受限制.较为安全

格式:

参数名称=值&参数名称=值"

- 请求头

- 格式: key/value的格式 (value可以为多个值的)

- 常见的请求头

- Accept: text/html,image/* --支持数据类型

- Accept-Charset: ISO-8859-1 --字符集

- Accept-Encoding: gzip --支持压缩

- Accept-Language:zh-cn --语言环境

- Host: www.baidu.cn:80 --访问主机

- If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT --缓存文件的最后修改时间

- Referer: http://www.baidu.com/index.jsp --来自哪个页面、防盗链

- User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)

"扩展知识:

Trident内核代表产品Internet Explorer，又称其为IE内核

Gecko内核代表作品Mozilla FirefoxGecko,火狐

Chrome内核代表作品Chrome,谷歌"

- Cookie

- Connection: close/Keep-Alive --链接状态

- 重要的头:

- Referer User-Agent Cookie If-Modified-Since

- 请求体

"和请求头之间有一个空行

post请求的参数:只有表单提交的时候明确了method="post"这时候是post请求,其他的都是get请求

参数名称=值&参数名称=值

username=jack&password=1234"

- 响应的格式:

"响应行响应头响应体"

- 响应行:响应信息的第一行

- 格式:

- 协议/版本响应的状态码状态码说明

- 例如:

- HTTP/1.1 200 OK

- 状态码:

- 1xx :请求已发送

- 2xx :响应已完成

- 200:响应成功(请求成功)

- 3xx :需要浏览器进一步操作才可以完成

- 302:重定向(配合location头使用)

- 304:读缓存(Not Modified表示没有改变)

- 4xx :用户访问错误(Not Found 表示:路径写错了,你访问的路径不存在)

- 404:用户访问的资源不存在

- 5xx :服务器内部错误(其实就是代码有问题,改代码)

- 500:服务器内部异常

- 响应头

- 格式: key/value的格式 (value可以为多个值的)

- 常见的响应头

- Location: http://www.it315.org/index.jsp --跳转方向

- Server:apache tomcat --服务器型号

- Content-Encoding: gzip --数据压缩

- Content-Length: 80 --数据长度

- Content-Language: zh-cn --语言环境

- Content-Type: text/html; charset=GB2312 --数据类型(MIME类型) 大类型/小类型 text/css text/javascript image/jpeg image/bmp

- Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT --最后修改时间

- Refresh: 1;url=http://www.it315.org --定时刷新

- Content-Disposition: attachment; filename=aaa.zip --下载

- Set-Cookie:SS=Q0=5Lb_nQ; path=/search

- Expires: -1 --缓存

- Cache-Control: no-cache --缓存

- Pragma: no-cache --缓存

- Connection:Keep-Alive --连接

- 重点的头:

- Set-Cookie Location Content-Type Refresh Content-Disposition Last-Modified

- 响应体

"和响应头之间有一个空行,

浏览器解析的内容"

- servlet入门:

"本质上就是一个运行在服务器上的类"

- 作用:1.接受请求 2.调用Service 处理业务逻辑 3.生成响应结果

- 入门步骤:

- 1.编写一个类

- 必须实现Servlet接口

- 重写里面的方法

- 2.编写配置文件(项目下 web-inf/web.xml)

"注册servlet 绑定路径

<!-- 注册servlet

servlet-name:给servlet起个名称名称自定义,保证唯一

servlet-class:serlvet的全限定名(包名+类名)

-->

<servlet-name>helloservlet</servlet-name>

<servlet-class>cn.baidu.demo.HelloServlet</servlet-class>

</servlet>

<!-- 绑定路径

servlet-name:在servlet标签中给servlet起好的名称

url-pattern:路径暂时都以"/"开头

-->

<servlet-mapping>

<servlet-name>helloservlet</servlet-name>

<url-pattern>/hello</url-pattern>

</servlet-mapping>"

- 3.测试

" localhost/项目名/绑定的路径

localhost/day33/hello"

在服务器中,为什么需要项目部署? 为了让网络通过服务器访问到项目

回顾:

tomcat服务器和Http协议:

web服务器:

概念:

web资源:

web资源分类:

静态的web资源:内容一层不变

动态的web资源:根据不同的人和不同的时间,可能会发生变化

web技术:

静态的web技术:html css js...

动态的web技术:Servlet jsp

结构:

B/S(浏览器/服务器):

C/S(客户端/服务器):

通讯机制:

基于HTTP协议

一次请求一次响应,先有请求后有响应

web服务器:

Tomcat:

下载:

安装:

目录结构:

bin:

conf:

webapps:

work:

启动:

bin/startup.bat

关闭:

X

ctrl + c

★ bin/shutdown.bat

访问:

协议://地址:端口/资源

web项目:

项目名称:

|-------html

|-------css

|-------js

|-------img

|-------WEB-INF

|-----------lib

|-----------classes

|-----------web.xml

http:

请求:浏览器发送给服务器的内容(request)

请求行

请求信息的第一行

请求方式请求的资源协议/版本 http/1.0 http/1.1

请求头

格式:

key/value (value可以为多个值)

请求体

当请求是post的时候,存放post请求所携带的参数

响应:服务器返回给浏览器的内容(response)

响应行

响应信息的第一行

协议/版本状态码说明

响应头

格式:

key/value (value可以为多个值)

响应体

浏览器解析的内容

////////////////////////////////////////////

servlet:

案例-使用servlet完成用户登录功能

需求分析:

用户在表单中填写完用户名和密码后,点击登录的时候,向服务器发送登录的请求,

在服务器上处理请求,处理完毕后将处理信息响应到页面

处理结果:

登录成功:欢迎...登录...

登录失败:用户名或密码错误

异常:当前功能正在维护....

技术分析:

html:表单

form

action:提交路径

method:提交方式

get

post

servlet:

request

response

////////////////

项目:

com.baidu.web

com.baidu.service

com.baidu.dao

com.baidu.domain

com.baidu.utils

导入jar包

导入工具类

网友评论

本文标题：javaWeb核心技术第六篇之BootStrap

本文链接：https://www.haomeiwen.com/subject/kdvhsctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

javaWeb核心技术第六篇之BootStrap

相关文章