前端框架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包

前端框架Bootstrap入门_第1张图片

3、创建scripts目录

前端框架Bootstrap入门_第2张图片

4、创建CSS目录和images目录

前端框架Bootstrap入门_第3张图片

5、创建Bootstrap基本模板.html

前端框架Bootstrap入门_第4张图片




    
    demo
    
    
    
    
    


6、创建Bootstrap基本模板2.html

前端框架Bootstrap入门_第5张图片




    
    demo
    
    
    
    
    
    
    
    
    
    
    


7、创建栅格演示.html

前端框架Bootstrap入门_第6张图片




    
    栅格演示
    
    
    
    
    


消息 12
回复 34

运行效果:前端框架Bootstrap入门_第7张图片

.container 容器

.row. 行

.col-md-*(*: 1~12)[.col-xs-*, .col-lg-*] 列

.col-md-offset-* 偏移

 

8、创建面板演示.html

前端框架Bootstrap入门_第8张图片

 




    
    面板演示
    
    
    
    
    


学生信息

学号:1
姓名:吴文燕
性别:女
年龄:18
电话:15890905678

前端框架Bootstrap入门_第9张图片

 

9、创建标签与按钮.html

前端框架Bootstrap入门_第10张图片




    
    标签与按钮演示
    
    
    
    
    


Bootstrap标签: 默认标签 成功提示 警告提示 重要提示 危险提示 信息提示
Bootstrap按钮:

前端框架Bootstrap入门_第11张图片

 

10、创建布局演示.html

前端框架Bootstrap入门_第12张图片

 




    
    布局演示
    
    
    
    
    


前端框架Bootstrap入门_第13张图片

 

11、创建年终数据报表.html

前端框架Bootstrap入门_第14张图片




    
    年终数据报表
    
    
    
    
    


2017年终数据报表

1月 2月 3月 小计(RMB)
上海 20 30 10 60
北京 40 30 30 100
深圳 40 30 20 90
总计 100 90 60 250

前端框架Bootstrap入门_第15张图片

 

12、创建图像样式演示.html

前端框架Bootstrap入门_第16张图片




    
    图像样式演示
    
    
    
    
    


原样图片:
圆角图片:
圆形图片:
缩略图片:

前端框架Bootstrap入门_第17张图片

 

13、创建选项卡演示.html

前端框架Bootstrap入门_第18张图片




    
    选项卡演示
    
    
    




前端框架Bootstrap入门_第19张图片前端框架Bootstrap入门_第20张图片

 

14、创建用户登录.html

前端框架Bootstrap入门_第21张图片




    用户登录
    
    
    
    
    
    
    


西蒙购物网

用户登录


前端框架Bootstrap入门_第22张图片

 

说明:利用jQuery让登录表单在窗口居中。

 

15、创建用户注册.html

前端框架Bootstrap入门_第23张图片




    
    用户注册
    
    
    
    
    
    
    
    
    


用户注册

      
    阅读 音乐 旅行 美食
   

前端框架Bootstrap入门_第24张图片

 

16、创建模态框演示.html

前端框架Bootstrap入门_第25张图片

 




    
    模态框演示
    
    
    
    
    
    




前端框架Bootstrap入门_第26张图片

 

说明:模态框有悬浮效果,视觉上更好一点。

 

17、创建贵美注册页面.html

前端框架Bootstrap入门_第27张图片




    
    贵美注册页面
    
    
    
    
    


贵美网用户注册

登录名: (可包含a-z,0-9和下划线) 阅读贵美网服务协议
密码: (至少包含6个字符)
确认密码: (至少包含6个字符)
电子邮箱: (至少包含@字符)
性别:   
图像:
爱好: 阅读 音乐 旅行 美食
喜欢的城市:
同意服务条款

前端框架Bootstrap入门_第28张图片

 

18、创建贵美电子产品页.html

前端框架Bootstrap入门_第29张图片




    
    贵美电子产品页
    
    
    
    


全选 商品图片 商品名称/卖家 价格

杜比降噪系统

卖家:李文玉

  收藏

一口价

283.30

英伟达芯片

卖家:张三丰

  收藏

一口价

496.30

联想笔记本

卖家:刘文达

  收藏

一口价

5000.30

宏碁笔记本

卖家:吴文燕

  收藏

一口价

3890.50

前端框架Bootstrap入门_第30张图片

 

19、创建显示用户表.html

前端框架Bootstrap入门_第31张图片

 

采用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文件:

前端框架Bootstrap入门_第32张图片

[
  {
    "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入门_第33张图片

 

说明:关于Bootstrap Table填充来自服务器端返回的数据,参看simonshop_boot(3)版本。

 

20、创建弹出框演示.html

前端框架Bootstrap入门_第34张图片




    
    弹出框演示
    
    
    
    
    


前端框架Bootstrap入门_第35张图片

 

21、创建下拉菜单演示.html

前端框架Bootstrap入门_第36张图片




    
    下拉菜单演示
    
    
    
    
    


泸州职业技术学院

前端框架Bootstrap入门_第37张图片前端框架Bootstrap入门_第38张图片前端框架Bootstrap入门_第39张图片

 

22、创建多级下拉菜单演示.html

前端框架Bootstrap入门_第40张图片




    
    多级下拉菜单演示
    
    
    
    
    
    




前端框架Bootstrap入门_第41张图片

 

23、创建悬停下拉菜单演示.html




    
    悬停下拉菜单演示
    
    
    
    
    
    




鼠标移到【搜索引擎】上,自动弹出其下拉菜单:

前端框架Bootstrap入门_第42张图片

 

鼠标移到【英语学习】上,自动弹出其下拉菜单:

前端框架Bootstrap入门_第43张图片

 

鼠标移到【大学数学】上,自动弹出其下拉菜单:

前端框架Bootstrap入门_第44张图片

 

三、小结

利用Bootstrap框架可以快速布局,设计简洁、美观、优雅的界面,Web开发者有必要好好掌握这一优秀前端框架。当然本次讲课笔记仅仅是通过案例简单地演示了一下,大家要深入学习,可访问Bootstrap官网:http://getbootstrap.com

前端框架Bootstrap入门_第45张图片

 

 

 

你可能感兴趣的:(Web框架)