Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。
优点:
优先面对移动设备进行适配和开发;
所有的主流浏览器对支持它;
简单易上手;
响应式设计风格,符合现代web网页开发趋势;
响应式图像:
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下面的代码中,可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。
浏览器的支持情况:
Chrome | Firefox | IE | Opera | Safari | |
---|---|---|---|---|---|
Android | YES | YES | 不适用 | 不适用 | 不适用 |
iOS | YES | 不适用 | 不适用 | 不适用 | YES |
Mac OS X | YES | YES | 不适用 | YES | YES |
Windows | YES | YES | YES* | YES | 不适用 |
网格系统:
- “行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个
.col-xs-4
来创建。 - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
.col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何.col-lg-*
不存在, 也影响大屏幕设备。
网格参数:
超小屏幕 手机 (<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) | 是 | |||
列排序 | 是 |
响应式表格:
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
创建表单的基本步骤:
- 向父 <form> 元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
Bootstrap按钮:
类 | 描述 | |
---|---|---|
.btn | 为按钮添加基本样式 | |
.btn-default | 默认/标准按钮 | |
.btn-primary | 原始按钮样式(未被操作) | |
.btn-success | 表示成功的动作 | |
.btn-info | 该样式可用于要弹出信息的按钮 | |
.btn-warning | 表示需要谨慎操作的按钮 | |
.btn-danger | 表示一个危险动作的按钮操作 | |
.btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) | |
.btn-lg | 制作一个大按钮 | |
.btn-sm | 制作一个小按钮 | |
.btn-xs | 制作一个超小按钮 | |
.btn-block | 块级按钮(拉伸至父元素100%的宽度) | |
.active | 按钮被点击 | |
.disabled | 禁用按钮 |