bootstrap复习：全局样式

一、概览

1.Bootstrap 是移动设备优先的。

2.在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为

user-scalable=no

可以禁用其缩放（zooming）功能。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

二、布局容器

1.Bootstrap 需要为页面内容和栅格系统包裹一个

.container

容器。我们提供了两个作此用处的类：

　　（1）

.container

类用于固定宽度并支持响应式布局的容器。

<div class="container">
...
</div>

　　（2）

.container-fluid

类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
...
</div>

三、栅格系统

1.栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

2.原理：

“行（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-*

不存在， 也影响大屏幕设备。

3.实例：

　　（1）流式布局容器：将最外面的布局元素

.container

修改为

.container-fluid

，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid">
<div class="row">
...
</div>
</div>

　　（2）移动设备和桌面屏幕：(.col-xs-*)与(.col-md-*)是针对超小屏幕和中等屏幕设备所定义的类。

　　（3）手机、平板、桌面：(.col-lg-*)与(.col-sm-*)是针对大屏幕和小屏幕设备定义的类。

4.响应式列重置：

　　（1）在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用

.clearfix

和响应式工具类。

<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

　　（2）除了列在分界点清除响应， 您可能需要重置偏移, 后推或前拉某个列。

　　　　使用

.col-md-offset-*

类可以将列向右侧偏移。这些类实际是通过使用

*

选择器为当前元素增加了左侧的边距（margin）。例如，

.col-md-offset-4

类将

.col-md-4

元素向右侧偏移了4个列（column）的宽度。

　　（3）嵌套列：为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的

.row

元素和一系列

.col-sm-*

元素到已经存在的

.col-sm-*

元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12。

　　（4）列排序：通过使用

.col-md-push-*

和

.col-md-pull-*

类就可以很容易的改变列（column）的顺序。

<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

四、排版

1.通过添加

.lead

类可以让段落突出显示。

<p class="lead">...</p>

2.在标题内还可以包含

<small>

标签或赋予

.small

类的元素，可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

3.对于被删除的文本使用

<del>

标签。

<del>This line of text is meant to be treated as deleted text.</del>

4.对于没用的文本使用

<s>

标签。

<s>This line of text is meant to be treated as no longer accurate.</s>

5.额外插入的文本使用

<ins>

标签。

<ins>This line of text is meant to be treated as an addition to the document.</ins>

6.为文本添加下划线，使用

<u>

标签。

<u>This line of text will render as underlined</u>

7.通过增加 font-weight 值强调一段文本。

<strong>rendered as bold text</strong>

8.用斜体强调一段文本。

<em>rendered as italicized text</em>

9.通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">左对齐.</p>
<p class="text-center">水平居中对齐.</p>
<p class="text-right">右对齐.</p>
<p class="text-justify">两端对齐.</p>

10.通过这几个类可以改变文本的大小写。

<p class="text-lowercase">小写.</p>
<p class="text-uppercase">大写.</p>

五、列表

1.无样式列表：通过添加.list-unstyled 可以添加无样式列表。

<ul class="list-unstyled">
<li>...</li>
</ul>

2.内联列表：通过添加list-inline类可以设置内联列表。

<ul class="list-inline">
<li>...</li>
</ul>

六、表格

1.为任意

<table>

标签添加

.table

类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

<table class="table">
...
</table>

2.通过

.table-striped

类可以给

<tbody>

之内的每一行增加斑马条纹样式。

<table class="table table-striped">
...
</table>

3.添加

.table-bordered

类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
...
</table>

4.通过添加

.table-hover

类可以让

<tbody>

中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
...
</table>

5.通过添加

.table-condensed

类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
...
</table>

七、表单

1.基本实例：单独的表单控件会被自动赋予一些全局样式。所有设置了

.form-control

类的

<input>

、

<textarea>

和

<select>

元素都将被默认设置宽度属性为

width: 100%;

。 将

label

元素和前面提到的控件包裹在

.form-group

中可以获得最好的排列。

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>

2.内联表单：为

<form>

元素添加

.form-inline

类可使其内容左对齐并且表现为

inline-block

级别的控件。

<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>

3.水平排列表单：通过为表单添加

.form-horizontal

类，并联合使用 Bootstrap 预置的栅格类，可以将

label

标签和控件组水平并排布局。这样做将改变

.form-group

的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加

.row

了。

<form class="form-horizontal">
<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" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>

4.内联单选和多选框

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>