目录
1、BootStrap概述
2、BootStrap的快速入门
3、BootStrap栅格系统
4、全局CSS样式、组件、插件
1、BootStrap概述
BootStrap是一个前端开发的框架,Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
所谓的框架,是一个半成品软件。利用Web开发的基础知识,我们也可以做出丰富的网站B/S架构程序,但是仅利用基础知识做的话,工作量会很大。所以,慢慢的就有人利用基础知识封装下,提供了jar包,我们借助其可以快速进行开发,这样的jar包就是框架。
使用BootStrap框架的好处:
- 定义了很多css样式和js插件,开发人员直接可以使用这些样式和插件得到丰富的页面效果;
- 响应式布局,同一套页面可以兼容不同分辨率的设备;
2、BootStrap的快速入门
快速入门的基本步骤:
- 1)下载Bootstrap:https://v3.bootcss.com/getting-started/#download
- 2)在项目中将这三个文件夹复制到工程;
- 3)创建html页面,引入必要的资源文件,一下为Bootstrap的基本模板页面:
Bootstrap hello world
你好,世界!
3、BootStrap栅格系统
响应式布局,是同一套页面可以兼容不同分辨率的设备,它的实现主要依赖于栅格系统,将一行平均分为12个格子,可以指定元素占几个格子,实现步骤:
- 1)定义容器,相当于之前的table;
容器分类:1、container:两边有留白
2、container-fluid:每一种设备都是100%宽度 - 2)定义行,相当于之前的tr,样式:row
- 3)定义元素,指定该元素在不同设备上,所占的格子数目。样式:col-设备代号-格子数目
设备代号:1、xs,超小屏幕,手机( 2、sm,小屏幕,平板(>768px)
3、md,中等屏幕,桌面显示器(>992px)
4、lg,大屏幕,大桌面显示器(>1200px)
注意事项:1、一行中格子数目超过12,则超出部分自动换行;
2、栅格类属性可以向上兼容,栅格类适用于屏幕宽度大于或等于分界点大小的设备;
3、如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一整行。
【举例】:栅格系统使用示例,在大屏幕上一行显示12个格子,在平板上一行显示6个格子
Bootstrap hello world
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
4、全局CSS样式、组件、插件
我们学习下比较常用的全局CSS样式、组件、插件,代码不需要自己写,若官方提供 的合适话,直接拿来用即可,要学会看官方文档说明。
1)全局CSS样式:
1、按钮:class=”btn btn-default”
2、图片:尺寸 class=”img-responsive”,表示图片在任意尺寸都占100%
形状 class=”img-rounded”、class=”img-circle”、”img-thumbnail”
Bootstrap hello world
Link
3、表格:样式有table、table-hover、table-bordered,需要的查看文档
4、表单:给表单项添加:class=”form-control”
Bootstrap hello world
编号
姓名
年龄
001
张三
20
002
李四
18
2)组件
主要说下 导航条和分页条,案例代码如下,编写网站界面时完全可以直接拿来用,需要什么功能查看文档即可,若不清某一块楚代码的功能,先注释掉,再查看变化即可确认功能。
组件-导航条
3)插件:轮播图
只要会换图片,设置轮播间隔属性等 就可以~使用很简单:
组件-导航条
5、旅游网官网案例实战
代码如下,需要资源的从我上传的资源文件中获取:
旅游网
搜索
旅游精选
国内游
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net