本文介绍了Bootstrap3的基础概念及其流行的表袼和栅格系统。详细解释了如何使用.table类美化表格样式，以及栅格系统的参数配置和使用方法，帮助开发者轻松实现响应式网页布局。
1.Bootstrap3简介：
一套写好了的开源css样式，依赖jquery。它的使用文档、组件、插件、网站实例非常丰富，加起来的总量超过了其他前端框架，简单易用，外观样式漂亮，可以说在github上一直广受欢迎是靠这些优势。官网这么介绍：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
2.Bootstrap布局核心就是表格和栅格系统。
（一）bootstrap表格
在标签加入table类，可以给表格设置bootstrap表格样式，带有少量内补（padding）和分隔线。
http://blog.sina.com.cn/s/blog_c2d1ee970102xcy1.html
例子：
...
源码介绍：
“.table”主要有三个作用：
☑ 给表格设置了margin-bottom:20px以及设置单元内距
☑ 在thead底部设置了一个2px的浅灰实线
☑ 每个单元格顶部设置了一个1px的浅灰实线
（二）bootstrap栅格系统
简介：响应式、移动设备优先的流式栅格系统。通过一系列的行和列的组合创建布局。
栅格参数：
|
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
使用：添加类.col-xs-x、col-sm-x、col-md-x在列（column）属性，即可达到自适应效果，x取值0-12.
实例：
将最外面的布局元素
.container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为
100% 宽度的布局。 class="container-fluid">
class="row">
转载请注明作者web_harry和网址，谢谢。新浪博客地址：http://blog.sina.com.cn/s/blog_c2d1ee970102xcy1.html
扫一扫
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
