正文:
可能是一直觉得时间紧凑,看 bootstrap 文档的时候,总觉得太繁冗了。个人心目中比较理想的文档,不只是条理清楚,还需要简繁得当,最好把大多数繁文缛节放到注释里,让读者作为选读内容。下边是我看 bootstrap 3 抽取出来的部分内容:落了个俗,越往后越不想记了。
响应式布局可以通过几个修改禁用,参见这里 。
转载请注明出处 http://blog.hickwu.com/posts/302 by Hick
官方并不说明支持 IE7 ,但是实际上表现还可以;理解起来,IE6 就基本不在支持范围了。
对于中文网页,建议 html 标签增加 lang 属性:
<html lang="zh-CN">
...
</html>
通过添.img-responsive
class属性可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;
和height: auto;
属性,可以让图片按比例缩放,不超过其父元的尺寸。
<img src="..." class="img-responsive" alt="Responsive image">
用.container
包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了max-width
,用以匹配系统。
<div class="container">
...
</div>
默认竟然没有这个,害我一开始没看文档试了老半天也不知道怎么居中。
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,分为 12 个列单元,随着屏幕设备或视口(viewport)尺寸的变化,系统会自动调整这 12 个单元的版式。下面是栅格系统的一些特点:
- “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)
- 行有列组成,而且内容不能直接放在行标签内,必须在列内
- 这个貌似是消除列的重叠?通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响
- 栅格系统中的列是通过
.col-xs-4
这样的定义,4 表示 4 列,一行 12 列
在标题标签 h1-h6 内还可以包含<small>
签或.small
元,可以用来记副题。
通过添.lead
可以让段落突出显示。
<p class="lead">...</p>
通过文本对齐class,可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
下面这些class通过颜色来表示强调
<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>
使用.pull-right
可以让引用展现出向右侧移动、对齐的效果。
<blockquote class="pull-right">
...
</blockquote>
自动截断: 通过text-overflow,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。
条纹状表格可以这样:
<table class="table table-striped">
...
</table>
另外 table-striped 还可以是:
- table-bordered 带边框
- table-hover 鼠标悬停突出
- table-condensed 紧缩表格
将任何.table
包裹在.table-responsive
中即可创建响应式表,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
表单
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的 <input>
、<textarea>
和<select>
元素都将被默认设置为 width: 100%;
。将label和前面提到的这些控件包裹在.form-group
中可以获得最好的排列。
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
内联(单行)的表单需要 form 标签有 样式,注意虽然不显示,还是要 label 标签。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" placeholder="email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
俩列表格状的表单要为表单添加 form-horizontal , 如下:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>