【前端】Bootstrap
本文共 7859 字，大约阅读时间需要 26 分钟。
概念
1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。2. 快速入门 1. 下载Bootstrap 2. 在项目中将这三个文件夹复制 3. 创建html页面，引入必要的资源文件
这是下载好的bootstrap开源库的文件结构
在html上使用bootstrap Bootstrap HelloWorld 你好，世界！
响应式布局
* 同一套页面可以兼容不同分辨率的设备。* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子* 步骤： 1. 定义容器。相当于之前的table、 * 容器分类： 1. container：两边留白 2. container-fluid：每一种设备都是100%宽度 2. 定义行。相当于之前的tr 样式：row 3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目 * 设备代号： 1. xs：超小屏幕 手机 (<768px)：col-xs-12 2. sm：小屏幕 平板 (≥768px) 3. md：中等屏幕 桌面显示器 (≥992px) 4. lg：大屏幕 大桌面显示器 (≥1200px) * 注意： 1. 一行中如果格子数目超过12，则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
Bootstrap HelloWorld 栅格栅格栅格
CSS样式和JS插件
1. 全局CSS样式： * 按钮：class="btn btn-default" * 图片： * class="img-responsive"：图片在任意尺寸都占100% * 图片形状 *：方形 *
CSS全局样式1
Bootstrap HelloWorld Link
CSS全局样式2
Bootstrap HelloWorld
| 编号 | 姓名 | 年龄 |
|---|---|---|
| 001 | 张三 | 23 |
| 002 | 张三 | 23 |
| 003 | 张三 | 23 |
Bootstrap组件之导航条
Bootstrap HelloWorld
Bootstrap组件之分页条
Bootstrap HelloWorld
Bootstrap组件之轮播图
Bootstrap HelloWorld
案例：黑马旅游网
Bootstrap HelloWorld 
黑马精选
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699国内游
上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
¥ 699
效果图
转载地址：http://bcvgi.baihongyu.com/
你可能感兴趣的文章
Http缓存机制（转）
查看>>
C# 本地时间格式，UTC时间格式，GMT时间格式处理
查看>>
Windows系统搭建GitServer--Bonobo Git Server
查看>>
Bootstrap3 datetimepicker控件之smalot的使用
查看>>
小程序Canvas隐藏问题处理
查看>>
基于Zookeeper的Curator分布式锁实现
查看>>
来谈谈 Java 反射机制，动态代理是基于什么原理？
查看>>
JVM 内存模型
查看>>
iOS之苹果自带的json解析NSJSONSerialization（序列化）
查看>>
iOS中坐标转换
查看>>
java 基础二
查看>>
java基础（三）方法／数组／堆栈／
查看>>
java基础（四）二维数组／
查看>>
java基础（五）面向对象／类／对象／形式参数／局部和成员变量
查看>>
java基础（六）关键字／private／this／static/构造方法／
查看>>
java基础（七）／面向对像
查看>>
java基础（八）Math／代码块／继承成员方法指南的关系／继承中成员变量之间的关系／方法的重写／继承中构造方法之间的关系／this和super的区别
查看>>
iOS之AFNetWorking基本用法(一)上传、下载
查看>>
java基础（九）关键字final／多态／抽象类／关键字abstract／接口
查看>>
java中的错误集合
查看>>