前端开发:Bootstrap开发框架
文章目录
一、Bootstrap是什么?
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。符合HTML和 CSS规范,且代码简洁、视觉优美。该框架设计时尚、直观、强大,可用于快速、简单地构建网页或网站。
二、Bootstrap 有什么“过人之处”?
Bootstrap 内置样式非常漂亮,而且够用。与其把网站搞得花里胡哨,不如一切从简。Bootstrap 在 reset 浏览器样式之余,又添加了类 Twitter 的页面元素,咱们要做的只是使用,肆无忌惮地、放心地用,不用琢磨这个行高、计算那个宽度、让不小心忘记定义的页面元素尴尬地显示在页面上。因为这些Twitter 已经为咱们考虑设计好了,
而且出自 Twitter 之手,毕竟经受了亿万用户的考验,外加 Twitter 强大的设计团队的支持,更让这套框架显得与众不同。
当然Bootstrap的好处不止如此,不然Bootstrap也不会一经发布,就迅速红遍大江南北。
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
容易上手:只要具备 HTML 和 CSS 的基础知识,就可以开始学习
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
最主要的一点原因,它不仅好,而且是开源的。
三、Bootstrap官网网站
官方网站:https://getbootstrap.com/
中文网站:http://www.bootcss.com/
四、Bootstrap简单使用
4.1 布局容器
4.1.1 .container响应式布局的容器固定宽度
- 响应式布局的容器 固定宽度
- 大屏 ( >=1200px) 宽度定为 1170px
- 中屏 ( >=992px) 宽度定为 970px
- 小屏 ( >=768px) 宽度定为 750px
- 超小屏 (100%)