前端框架Bootstrap入门
前端框架Bootstrap入门
一、Bootstrap概述
1、基本信息
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
2、特点
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
3、版本
目前使用较广的是版本2和3，其中2的最新版本的是2.3.2，3的最新版本是3.3.5。在2015年8月下旬，Bootstrap四周岁之际，Bootstrap团队发布了Bootstrap 4 alpha版，4的最主要变化包括以下方面：从 Less 迁移到 Sass、改进网格系统、缺省弹性框支持、Dropped wells, thumbnails, and panels for cards、合并所有 HTML resets 到一个新的模块中——Reboot、全新自定义选项、不再支持 IE8、重写所有的 JavaScript 插件、改进工具提示和 popovers 的自动定位、改进文档、其他大量改进。
4、组件
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
5、插件
Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。
6、框架代码
可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码。
二、案例演示
1、新建一个静态Web项目bootstrap_demo
2、导入bootstrap包
3、创建scripts目录
4、创建CSS目录和images目录
5、创建Bootstrap基本模板.html
demo
6、创建Bootstrap基本模板2.html
demo
7、创建栅格演示.html
栅格演示
消息
12
回复
34
运行效果：
.container 容器
.row. 行
.col-md-*（*: 1~12）[.col-xs-*, .col-lg-*] 列
.col-md-offset-* 偏移
8、创建面板演示.html
面板演示
学生信息
学号：1
姓名：吴文燕
性别：女
年龄：18
电话：15890905678
9、创建标签与按钮.html
标签与按钮演示
Bootstrap标签：
默认标签
成功提示
警告提示
重要提示
危险提示
信息提示
Bootstrap按钮：
10、创建布局演示.html
布局演示
11、创建年终数据报表.html
年终数据报表
2017年终数据报表
1月
2月
3月
小计(RMB)
上海
20
30
10
60
北京
40
30
30
100
深圳
40
30
20
90
总计
100
90
60
250
12、创建图像样式演示.html
图像样式演示
原样图片：
圆角图片：
圆形图片：
缩略图片：
13、创建选项卡演示.html
选项卡演示
14、创建用户登录.html
用户登录
西蒙购物网
说明：利用jQuery让登录表单在窗口居中。
15、创建用户注册.html
用户注册
用户注册
16、创建模态框演示.html
模态框演示
说明：模态框有悬浮效果，视觉上更好一点。
17、创建贵美注册页面.html
贵美注册页面
贵美网用户注册
18、创建贵美电子产品页.html
贵美电子产品页
收藏
19、创建显示用户表.html
采用Bootstrap Table组件，需要导入。
显示用户表
查看用户
编号
用户名
密码
电话
注册时间
权限
说明：表格需要填充数据，需要设置data-url属性，可以是本地的json文件，data-url="user.json"，也可以是服务器端返回的数据，比如data-url="user/listAll"。此时需要控制器里定义listAll方法来返回数据。
@Controller
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;
@RequestMapping("/listAll")
public
@ResponseBody
List listAll() {
List users = userService.findAllUsers();
return users;
}
} 本案例采用本地的user.json文件：
[
{
"id": 1,
"username": "admin",
"password": "12345",
"telephone": "15890905678",
"registerTime": 242423423234,
"popedom": 0
},
{
"id": 2,
"username": "郑晓红",
"password": "11111",
"telephone": "13978785645",
"registerTime": 432423423423,
"popedom": 1
},
{
"id": 3,
"username": "温志军",
"password": "22222",
"telephone": "15878785634",
"registerTime": 482423423423,
"popedom": 1
},
{
"id": 4,
"username": "吴文燕",
"password": "33333",
"telephone": "13978782334",
"registerTime": 782423423423,
"popedom": 1
},
{
"id": 5,
"username": "张文雅",
"password": "44444",
"telephone": "13978785632",
"registerTime": 982423423423,
"popedom": 1
},
{
"id": 6,
"username": "郑小刚",
"password": "55555",
"telephone": "15978785680",
"registerTime": 582423423423,
"popedom": 1
}
]文件内容是一个保存用户信息的json数组。
此时在浏览器查看显示用户表.html：
说明：关于Bootstrap Table填充来自服务器端返回的数据，参看simonshop_boot（3）版本。
20、创建弹出框演示.html
弹出框演示
21、创建下拉菜单演示.html
下拉菜单演示
泸州职业技术学院
22、创建多级下拉菜单演示.html
多级下拉菜单演示
23、创建悬停下拉菜单演示.html
悬停下拉菜单演示
鼠标移到【搜索引擎】上，自动弹出其下拉菜单：
鼠标移到【英语学习】上，自动弹出其下拉菜单：
鼠标移到【大学数学】上，自动弹出其下拉菜单：
三、小结
利用Bootstrap框架可以快速布局，设计简洁、美观、优雅的界面，Web开发者有必要好好掌握这一优秀前端框架。当然本次讲课笔记仅仅是通过案例简单地演示了一下，大家要深入学习，可访问Bootstrap官网：http://getbootstrap.com
