bootstrap栅格系统

小课堂

分享人:火建强

目录

1.什么是bootstrap

2.栅格布局

3.使用方法

4.缺点、优点

5.编码实战

6.更多讨论

1.什么是bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 [1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2.栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

3.使用方法

1.文件引用

CDN

bootstrap中文网

如何引用

1.container

2.row

3.col-xs- col-sm- col-md- col-lg-

如何使用

4.优点、缺点

优点

BT的优势之一就是可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。实现这个功能依赖两个东西，一个是view，另一个是max-width，min-width。

不足

不能兼容IE

5.编码实战

6.更多讨论

7.参考文献

bootstrap中文网

菜鸟教程-栅格布局

前辈

鸣谢

感谢大家观看

武汉-web-12-火建强