分享人:王浩冉
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
[1] 它由Twitter的设计师MarkOtto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。 Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
1、bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距, 最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
2、 小屏幕(平板,大于等于 768px) @media (min-width: @screen-sm-min) { ... } 中等屏幕(桌面显示器,大于等于 992px) @media (min-width: @screen-md-min) { ... } 大屏幕(大桌面显示器,大于等于 1200px) @media (min-width: @screen-lg-min) { ... }
1.行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。 2.在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如: 3.具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row) 的直接子元素 4.类似 .row 和 .col-sm-4 这种预定义的类,可以用来快速创建栅格布局。 5.通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值 的外距(margin)来抵消内距(padding)的影响
1、12列如何划分的?
1、16列如何划分的?
1、24列如何划分的?
1、每个栅格栏左右间隙10px; 每个栅格60px; 列与列之间间隔20px; 可用部分940px;
每个栅格间隙10; 每个栅格40px;
左右各占5px; 每个栅格30px; 可用部分950px;
div class="row">
div class="col-md-2 col-md-offset-1 col-xs-12 col-sm-12 col-lg-2 col-lg-offset-1 logo-alibaba"
div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"
div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"
div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"
div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"
css 阶段能做组件化吗?
1 不能,组件化是HTML、css、JavaScript三方共同作用
2 目前只能叫做样式库,自己的整理和总结
1.bootstrap有哪些常用组件?
2.bootstrap的栅格系统为什么最多12列,采用12列有什么好处吗?
感谢大家观看
BY : 王浩冉