JavaEE 之 Bootstrap 技术美化页面

资料 青牛 ⋅ 于 2019-06-28 15:43:46 ⋅ 498 阅读

5.1 Bootstrap概述

5.1.1 什么是bootstrap?

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

bootstrap 主要用于 CSS的页面效果美化
file

这个表格就是在bootstrap的基础上构建的一个表格;所以使用bootstrap来构建我们以后用到的简单页面效果还是不 错的

5.1.2 为什么使用bootstrap?

移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持:所有的主流浏览器都支持 Bootstrap。
file

容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详 见 Bootstrap 响应式设计
file

它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件,易于定制。
它还提供了基于 Web 的定制。
它是开源的。
说白了就是人家已经写好了一套CSS样式,而我们只需要掌握一点点的CSS技巧就能应用bootstrap构建一套非常漂亮的页面效果

5.1.3 Bootstrap 包的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先 进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包 含这些插件。

5.2 Bootstrap使用

5.2.1 下载Bootstrap

使用bootstrap跟使用jquery一样十分简单,去官网下载人家写好的项目引入到我们的项目中,美滋滋

bootstrap官网:
file

官网已经更新到bootstrap4这种新版了,我们的系统中只是简单使用bootstrap,所以我们不需要用这么新的版本,我们 选用的是bootstrap3.3.7这个稳定版

下载地址: Getting started · Bootstrap

为啥不用新版?

1) 可能存在兼容性问题

2) 可以还含有未知BUG没有解决

3) 稳定比新颖更重要

选择好bootstrap之后就可以导入到我们的项目中,bootstrap是一个压缩包,解压好之后是这样的
file

其中css 是其样式文件 fonts 是字体文件 js是JavaScript脚本,我们可以分别引入项目中
file

5.2.2 Bootstrap入门

使用bootstrap也非常简单,一共就分两步操作即可

5.2.2.1 : 引入相关文件
file

bootstrap有些功能是依赖于jquery实现的,所以要引入文件的话 CSS文件 和 JS文件都需要引入,并且包括jQuery文件

5.2.2.2 修改样式

样式的修改可以借助菜鸟教程,上面有很多bootstrap的现成案例我们拿过来用就可以了

菜鸟教程bootstrap地址

Bootstrap 教程 | 菜鸟教程

举个例子,比如我们现在有两个按钮
file

不是很好看,我们来美化一下这两个按钮

效果:
file

根据上面的案例启示不难发现,我们原来的代码什么也不用改,只需要添加我们向添加的class样式就可以了,下面就给大 家提供一个bootstrap按钮的样式表:

Bootstrap 按钮

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选 项来定义按钮的样式,具体如下表所示:

以下样式可用于a, button, 或 input元素上:

file
常用按钮代码:
file

效果
file

5.2.3 Bootstrap字体图标

字体图标是在 Web 项目中使用的图标字体

在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。 字体支持来自于https://www.glyphicons.com/

虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。

5.2.3.1 如何使用字体图标

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

代码:
file

我们刚才写的按钮加上字体图表的样子

代码:
file

效果:
file

当然有按钮的地方都可以这么优化,而且还有很多图表可以供大家设置,我们一会再设置,先继续往下优化

5.2.4 表格类
file
下表样式可用于表格中:
file
tr, th 和 td 类

下表的类可用于表格的行或者单元格:

根据上面的样式我们可以给我们的表格加上一个class,给我们的表头也加一个css 代码

file
效果

file
一个基础表格就优化好了,但是不太好看,没关系稍微调试就好看了 第一步 : 表头价格淡蓝色背景

代码
file

效果:
file

怎么样这个表格是不是好看多了呢,但是里面有两个按钮不好看,我们也来美化一下吧

代码 :
file

效果 :
file

5.2.5 form表单的优化

这回 就好看多了吧,美滋滋,那么我们再继续优化,比如再优化我们的form表单

我们对表单的优化可能就要麻烦一些了,bootstrap并没有成型的太好看的表单,所以我们要借助table来优化我们的添 加个修改页面

第一步 : table加css
file

第二步 : 每个添加项都以一行两列展开,完成数据的接收
file

大家此处要注意优化输入框的CSS是 form-control

第三步 优化最下面的两个按钮
file

三步优化好之后我们的添加界面现在是这样的

代码 :
file
file

效果 :
file

怎么样是不是有点效果了呢,好吧,那我们继续完成最后的优化吧,把更新的form表单也变成添加这样的

代码 :
file
file
file

修改完后的更新:
file

到此页面美化工作结束

版权声明:原创作品,允许转载,转载时务必以超链接的形式表明出处和作者信息。否则将追究法律责任。来自海牛部落-青牛,http://hainiubl.com/topics/36801
点赞
成为第一个点赞的人吧 :bowtie:
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,可用Emoji的自动补全, 在输入的时候只需要 ":" 就可以自动提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif,教程
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter