说明
- 本书是以<<深入理解Bootstrap>>为指导基础。
- 结合最新版本的bootstrap，对新增知识做大致的理解和总结。
- 准备做整个系列，时间跨度估计不会短，旨在不追求快，追求吸收程度和实践整理。
- 实例demo可以看中文教程和w3cschool。
简介
bootstrap是由Twitter的两位前员工于2010年8月创建，现在已经成为最流行的前端框架之一，不管是不是专业前端都可以很方便的使用它。
官方网站huan
简介、直观、强悍的前端开发框架，让web开发更迅速、简单。
且现在是开源的，完全免费。详见bootstrap的github项目
bootstrap的重要特性：
- 一套完整的基础css插件
- 有很丰富的预定义样式表
- 一组基于jQuery的Js插件集
- 有一个非常灵活的响应式栅格系统，并且是移动先行的思想
文件结构
在官网，下载最新的版本的sourceCode，解压后，由于知识分析它的css和js文件，所以只取其中的dist文本夹来说明。
打开dist文件后，得到基本文件结构。
1 | bootstrap/ |
其中，bootstrap.css.map是提供css的源码映射表
bootstrap源码较之前有几个改变。详见中文教程起步
- 使用grunt来编译css个js文件。
- 内容很丰富：包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。
- 所有文档的源码文件。
- examples/ 目录是 Bootstrap 官方提供的实例工程。
- 还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本。
整体架构
12格栅格系统
将网页的总宽度平均分成12格，然后通过所占的比例在确定响应式的宽度。很简单的道理，如果想设置宽度50%，则可以定义宽度占用12格的6格。
实现原理
- 行（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。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
设计思想
区分了四种屏幕：
超小屏幕(xs)手机，小于768px，移动优先，所以不会用@media，因为就是默认的呀。
- 小屏幕(sm)平板，大于768px，小于992px。
- 中等屏幕(md)电脑，大于992px，小于1200px。
- 大屏幕(lg)大显示器，大于1200px。
类.container的样式源码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
基本用法
均是以md为例子的，xs、sm和lg是类似的。
1.列组合
实例demo
实现方法：左浮动加百分比。
1 | .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { |
2.列偏移
实例demo
使用类.col-md-offset-n来实现偏移1
2
3
4
5
6
7
8
9
10.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
......
.col-md-offset-0 {
margin-left: 0;
}
3.列嵌套
方法就是在一个列里面，添加.row，实例demo
4.列排序
列排序就是改变列的方向，改变列的左右浮动，并且试着浮动的距离。用类.col-md-push-和.col-md-pull-来实现。
由于默认的都是做浮动，所在都是在这个基础上重新设定的。1
2
3
4
5
6
7
8
9
10
11
12
13.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
......
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
Less mixin和变量
关于这个，见bootstrap中文文档。
这个只是也是要总结的，但是这里重点是源码，所以先忽略！
注意事项点
既然栅格系统是基于百分比和浮动来实现的，所以就要注意清浮动的问题，特别是不同的列字符不一样导致占行不一样的时候，这个时候只要一个div，设置类clearfix和类visible。1
2
3.clearfix:before{display:table; content:""}
.clearfix:after{clear:both}
.invisible {visibility: hidden;}
css布局
这是深入理解bootstrap底层结构的关键部分。
基础排版
对应 type.less,包括head标题，地址。列表，文本块。
1.标题(1175-1289),demo
| 标题 | 字体大小 | margin-top(.h[1-6]是0) | margin-bottom(.h[1-6]是0) | (.)h[1-6] small(color:#777) |
|---|---|---|---|---|
| h1/.h1 | 36px | 20px | 10px | 65% |
| h2/.h2 | 30px | 20px | 10px | 65% |
| h3/.h3 | 24px | 20px | 10px | 65% |
| h4/.h4 | 18px | 10px | 10px | 75% |
| h5/.h5 | 14px | 10px | 10px | 75% |
| h6/.h6 | 12px | 10px | 10px | 75% |
2.页面主体
body1
2
3
4
5
6
7body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
p,如果想增大字体，可以使用类.lead,demo1
2
3
4
5
6
7
8
9
10
11
12
13
14p {
margin: 0 0 10px;
}
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
@media (min-width: 768px) {
.lead {
font-size: 21px;
}
}
3.文本
有mark高亮,del删除线,s无用文本,ins额外插入,u下划线,small小号，strong着重，em斜体。1
2
3
4mark {
color: #000;
background: #ff0;
}
文本的对其方式：text-left/center/right/justify。
改变大小写：text-lowercase/uppercase/capitalize1
2
3
4
5
6
7
8
9.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
4.缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容。
- 基本缩略：abbr标签
- 首字母缩略语：类
.initialism1
2
3
4
5
6
7
8
9abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #777;
}
.initialism {
font-size: 90%;
text-transform: uppercase;
}
5.地址
address，主要是设定行间距和底部的margin1
2
3
4
5address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}
6.引用
blockquote1
2
3
4
5
6blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
用footer用于标明引用来源，来源名称呢个可以包裹进cite标签中。
另一种风格就是用’.blockquote-reverse’或者是pull-right来实现靠右显示。详见源码（1478-1527）。1
2
3
4
5
6
7
8.blockquote-reverse,
blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;
}
7.列表
无序列表ul和有序列表ol，bs对间距做了微调。
1
2
3
4
5ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}去点的列表,用类
.list-unstyled。1
2
3
4.list-unstyled {
padding-left: 0;
list-style: none;
}内敛列表，用类
.list-inline,使用inline-block布局，在加上padding。1
2
3
4
5
6
7
8
9
10.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}自定义列表
在默认的基础上增加样式1
2
3
4dl {margin-top: 0;margin-bottom: 20px;}
dt,dd {line-height: 1.42857143;}
dt {font-weight: bold;}
dd {margin-left: 0;}水平定义列表
提供dl-horizontal样式。只适合平板电脑及以上上的屏幕中使用。1
2
3
4
5@media (min-width: 768px) {
.dl-horizontal dt {float: left;width: 160px;overflow: hidden;clear: left;
text-align: right;text-overflow: ellipsis; white-space: nowrap;}
.dl-horizontal dd {margin-left: 180px;}
}
代码
对应源码：code.less
<code>显示单行内敛代码。1
2
3
4
5
6
7code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}<kbd>显示用户输入代码。主要是用来标记用户输入的内容。<pre>新生多行代码块。不同地方的markdowm渲染不同。就是样式设定的不一样。1
2
3
4
5pre {display: block;padding: 9.5px;margin: 0 0 10px;font-size: 13px;line-height: 1.42857143;
color: #333;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;
border: 1px solid #ccc;border-radius: 4px;}
pre code {padding: 0;font-size: inherit;color: inherit;white-space: pre-wrap;background-color: transparent;border-radius: 0;}
.pre-scrollable {max-height: 340px; overflow-y: scroll;}
表格
对应源码:table.less
bootstrap提供一个基本样式.table和四个附加样式.table-striped,.table-bordered,.table-hover和.table-condensed以及一个支持响应式布局的.table-responsive。
table的基本样式
1 | table {background-color: transparent;} |
带背景条纹
在.table的基础上才配合使用.table-striped。
隔行换色1
2
3.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
带边框表格
在.table的基础上才配合使用.table-bordered。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.table-bordered {
border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
鼠标悬停变换
在.table的基础上才配合使用.table-hover。1
2
3.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
紧缩表格
通过添加 .table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。1
2
3
4
5
6
7
8.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
表格的tr有哦对应的几种状态类。
| 类名 | 描述 |
|---|---|
| .active | 鼠标悬停在行或单元格上时所设置的颜色 |
| .success | 标识成功或积极的动作 |
| .info | 标识普通的提示信息或动作 |
| .warning | 标识警告或需要用户注意 |
| .danger | 标识危险或潜在的带来负面影响的动作 |
不同的类对应的不同的背景颜色。
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.table-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;/*避免和容器的下一元素重合*/
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;/*无浏览器支持这一属性*/
border: 1px solid #ddd;
}
.table-responsive > .table {
margin-bottom: 0; /*将原来的20px改成0.*/
}
}
主要是处理容器边框和滚动条。
响应式表格本身设置了表格的border是1px，如果响应式表格和table-bordered组合的话，就要处理边借的问题，详见源码(2460-2492)
表单
重量级嘉宾呀。。。源码form.less
bootstrap对基础表单未作太多的定制化效果设计，对表单内的fieldset,legend和label标签进行设定。
首当其冲的是.form-control.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/*表单元素得到焦点后的样式。*/
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
/*不同浏览器下的设定*/
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
.form-control::-ms-expand {
background-color: transparent;
border: 0;
}
所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。1
2
3
4<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
1 | .form-group { |
内敛表单
添加.form-inline可使其内容左对齐并且表现为 inline-block 级别的控件。此时这些组件的宽度是auto的，所以需要自行设定。只适应屏幕宽度大于768px。
1 | @media (min-width: 768px) { |
可见，对于内敛表格时，input，textarea等的宽度是100%的，所以要自行设定它们的宽度的话可以在外面加一个div块。非要加label的话，也应该是在一个带类.form-group的div内。
横向表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
- 可以使用栅格系统，label和组件组成一个row，所以就无需再用
.row。 - label和组件被包含在一个
.form-group的div内。label添加一个.control-label。 - form设定一个类
.form-horizontal。 - demo
1 | .form-horizontal .radio, |
表单控件
- 输入input，指定type类型，支持html5的各种。
1
2
3
4
5
6input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
- textarea,可以用rows属性来设置行数。
- radio/checkbox
使用的时候是包含在有.radio或者.checkbox的div内，每个组件radio/checkbox都需要用一个label标签包含住。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;/*配合完成按钮上下居中*/
margin-top: 4px \9;/*特定浏览器识别*/
margin-left: -20px;
}
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0; /*让按钮和字体等高*/
margin-top: 1px \9;
line-height: normal;
}
/*关于按钮是采用的父辈相对，元素绝对的定位方式*/
.radio label,
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
当然，如果把.radio或者.checkbox换成.radio-inline或者.checkbox-line，则实现的是内敛。
1
2
3
4
5
6
7
8
9
10.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
- 控件状态
主要是三种状态。
- 焦点
1 | /*表单元素得到焦点后的样式。*/ |
- 禁用
1 | .form-control[disabled], |
关于fieldset的禁用
标签的链接功能不受影响
默认情况下，浏览器会将<fieldset disabled>内所有的原生的表单控件（<input>、<select>和<button>元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果如果表单中还包含 元素，这些元素将只被赋予 pointer-events: none 属性。正如在关于 禁用状态的按钮 章节中（尤其是关于锚点元素的子章节中）所描述的那样，该 CSS 属性尚不规范，并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总没有得到全面支持，并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。
- 验证提示
三种.has-warning，.has-error和.has-success。
主要是颜色，边框等的变化，见源码[2821-2910]。
添加图标，使用方法见中文文档。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 42.5px;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
然后不同的状态写颜色再进行设定。
控件大小
两个类.input-lg和.input-sm。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
对于宽度，可以使用栅格系统或者自己定义均可。
水平排列的表单组的尺寸，用.form-group-lg和.form-group-sm。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.form-group-lg .form-control {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.form-group-lg select.form-control {
height: 46px;
line-height: 46px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
height: auto;
}
其他
.help-block1
2
3
4
5
6.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
按钮
源码buttons.less
按钮样式
7中默认的样式：btn-default,btn-primary,btn-success,btn-info,btn-warning,btn-danger和btn-link。
基础样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}对focus，active，hover和disabled四种状态做相应的变化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
这其中按钮都是在基本样式的基础上进行修改，比如背景颜色，边框颜色，outline等。源码中写的比较多，是因为考虑了很多情况。[3068-3442]
按钮大小
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
1 | .btn-lg, |
现在的按钮都无法实现百分百宽度，所以.btn-block来解决。1
2
3
4
5
6
7
8
9.btn-block {
display: block;
width: 100%;
padding-right:0;
padding-left:0;
}
.btn-block + .btn-block {
margin-top: 5px;/*两个之间有5px的间距*/
}
多标签支持
btn不仅可以使用于button，还可以使用于input和a标签。
活动状态
1 | .btn:active, /*用于button标签*/ |
图像
三种风格
.img-rounded.img-circlr.img-thumbnail1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31img {
vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
辅助样式
辅助的文本样式和背景样式
1
2
3
4
5
6
7
8
9
10
11
12
13辅助的文本样式：
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
辅助的背景色：
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>关闭按钮
1
2
3
4
5
6
7
8
9
10
11
12/*向下的三角*/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}内容浮动
1
2
3
4
5
6.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}内容块居中
1
2
3
4
5.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}清楚浮动
1
2
3
4
5
6
7
8.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}隐藏和显示
1
2
3
4
5
6
7
8
9.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}图片替换
想文字不显示，之显示背景效果。1
2
3
4
5
6
7.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
响应式样式
见文档。
源码responsive-utilities.less或者[6560-6766]
用法如下图：
ok,关于这个就完了，接下来就要看css组件。
