Bootstrap3全局CSS样式

目录

1. 概览

2. 栅栏系统

3. 文本

4. 列表

5. 代码

6. 表格

7. 表单

　　7.1 基本实例

　　7.2 内联表单

　　7.3 水平排列的表单

8. 按钮

9. 图片

10. 辅助类

　　10.1 情境文本颜色

　　10.2 情境背景色

　　10.3 关闭按钮

　　10.4 三角符号

 

1. 概览

Bootstrap使用的某些html元素和css属性需要将页面设置为html5文档类型。

1 <doctype html>
2 <html lang="zh-cn">
3 ......
4 ......
5 </html>

为了确保适当的绘制和屏幕缩放，需要在head之中添加viewport元数据标签.

1 <meta name='viewport' content='width=device-width, initial-scale=1'>
 

布局容器

.container

固定宽度并支持响应式布局的容器

 

栅栏系统必须包含在一个容器中。这两种容器不能嵌套

.container-fluid

 

100%宽度，占据全部viewport的容器
 
2. 栅栏系统
  1. Row必须包含在.container（固定宽度）或.container-fluid（100%宽度）中
  2. 内容应放置在column中，并且只有column可以直接作为row的子元素
  3. 通过为column设置padding属性可以创建列与列之间的间隔。通过为row元素设置负值margin从而抵消掉为.container设置的padding，也就间接抵消掉了row所包含的column的padding
  4. 栅栏系统的列通过指定1到12的值来表示其跨越的范围。若一个row中column大于12，则多余的column作为一个整体另起一行

 

 

超小屏幕(<768px)

小屏幕(>768px)

中等屏幕(>992px)

大屏幕(>1200px)

栅格系统行为

总是水平排列

开始时堆叠在一起，当大于这些阈值时将变为水平排列C

.container最大宽度

None(自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列数

12

最大列宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px(每列左右均有15px)

可嵌套

是

偏移

是。使用.col-md-offset-*类可以将列向右侧偏移，这是通过使用*选择器为当前元素增加了左侧的margin。

列排序

是。通过使用.col-md-push-*和.col-md-pull-*类可以改变column的顺序。

 

3. 文本

Bootstrap将全局font-size设置为14px，line-height设置为1.428。<p>元素被设置等于1/2行高（即10px）的底部外边距（margin）。

通过添加.lead类可以让段落突出显示。

文本样式

<mark>

高亮显示文本

<del>

给文本添加删除线

<s>

同上

<u>

给文本添加下划线

<ins>

同上

<small>或.small

将文本设为父容器文本大小的85%

<strong>

用加粗强调文本

<em>

用斜体强调文本

.text-left（right,center,justify,nowrap）

文本对齐

.text-lowercase（uppercase, capitalize）

改变大小写

<abbr>

缩略语

 

 

 

4. 列表

列表（ul，ol，dl）

.list-unstyled

移除了默认的list-style样式和左侧外边距，这只针对直接子元素。

.list-inline

通过设置display: inline-block并添加少量的内补将所有元素放在同一行

.dl-horizontal

让<dl>内的短语及其描述排在一行

 

5. 代码

代码

<code>

内联代码

<kbd>

标记用户通过键盘输入的内容

<pre>

代码块

<var>

标记变量

<samp>

标记程序输出的内容

 

6. 表格

表格

.table

给表格添加少量的内补和水平方向的分隔线

.table .table-striped

给<tbody>内的每一行增加斑马条纹样式

.table .table-bordered

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

.table .table-hover

让<tbody>中的每一行对鼠标悬停做出响应

.table .table-condensed

单元格内补减半，表格更加紧凑

.active（success, info, warning, danger）

可设置于tr或td

 

7. 表单

7.1 基本实例

所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度为width: 100%。将label元素和前面提到的元素包裹在.form-group中可以获得好的排列。

 1 <form>
 2   <div class="form-group">
 3     <label for="exampleInputEmail1">Email address</label>
 4     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
 5   </div>
 6   <div class="form-group">
 7     <label for="exampleInputPassword1">Password</label>
 8     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 9   </div>
10   <div class="form-group">
11     <label for="exampleInputFile">File input</label>
12     <input type="file" id="exampleInputFile">
13     <p class="help-block">Example block-level help text here.</p>
14   </div>
15   <div class="checkbox">
16     <label>
17       <input type="checkbox"> Check me out
18     </label>
19   </div>
20   <button type="submit" class="btn btn-default">Submit</button>
21 </form>

7.2 内联表单

为<form>元素添加.form-inline类可使其内容左对齐并表现为inline-block级别的控件。此时，必须为每个输入空间设置label标签，也可以为label标签设置.sr-only类将其隐藏。

 1 <form class="form-inline">
 2   <div class="form-group">
 3     <label class="sr-only" for="exampleInputEmail3">Email address</label>
 4     <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
 5   </div>
 6   <div class="form-group">
 7     <label class="sr-only" for="exampleInputPassword3">Password</label>
 8     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
 9   </div>
10   <div class="checkbox">
11     <label>
12       <input type="checkbox"> Remember me
13     </label>
14   </div>
15   <button type="submit" class="btn btn-default">Sign in</button>
16 </form>

7.3 水平排列的表单

 1 <form class="form-horizontal">
 2   <div class="form-group">
 3     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 4     <div class="col-sm-10">
 5       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 6     </div>
 7   </div>
 8   <div class="form-group">
 9     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
10     <div class="col-sm-10">
11       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
12     </div>
13   </div>
14   <div class="form-group">
15     <div class="col-sm-offset-2 col-sm-10">
16       <div class="checkbox">
17         <label>
18           <input type="checkbox"> Remember me
19         </label>
20       </div>
21     </div>
22   </div>
23   <div class="form-group">
24     <div class="col-sm-offset-2 col-sm-10">
25       <button type="submit" class="btn btn-default">Sign in</button>
26     </div>
27   </div>
28 </form>

 

8. 按钮

为<a>、<button>、<input>元素添加按钮类即可以使用bootstrap提供的样式。如果<a>元素被作为按钮使用并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role=”button”属性。导航和导航条组件只支持<button>元素。

1 <a class="btn btn-default" href="#" role="button">Link</a>
2 <button class="btn btn-default" type="submit">Button</button>
3 <input class="btn btn-default" type="button" value="Input">
4 <input class="btn btn-default" type="submit" value="Submit">

 1 <!-- Standard button -->
 2 <button type="button" class="btn btn-default">（默认样式）Default</button>
 3 
 4 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
 5 <button type="button" class="btn btn-primary">（首选项）Primary</button>
 6 
 7 <!-- Indicates a successful or positive action -->
 8 <button type="button" class="btn btn-success">（成功）Success</button>
 9 
10 <!-- Contextual button for informational alert messages -->
11 <button type="button" class="btn btn-info">（一般信息）Info</button>
12 
13 <!-- Indicates caution should be taken with this action -->
14 <button type="button" class="btn btn-warning">（警告）Warning</button>
15 
16 <!-- Indicates a dangerous or potentially negative action -->
17 <button type="button" class="btn btn-danger">（危险）Danger</button>
18 
19 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
20 <button type="button" class="btn btn-link">（链接）Link</button>

 1 <p>
 2   <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
 3   <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
 4 </p>
 5 <p>
 6   <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
 7   <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
 8 </p>
 9 <p>
10   <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
11   <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
12 </p>
13 <p>
14   <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
15   <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
16 </p>

通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级元素。

1 <button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
2 <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

 

9. 图片

1 <img src="..." alt="..." class="img-rounded">
2 <img src="..." alt="..." class="img-circle">
3 <img src="..." alt="..." class="img-thumbnail">

 

10. 辅助类

10.1 情境文本颜色

1 <p class="text-muted">...</p>
2 <p class="text-primary">...</p>
3 <p class="text-success">...</p>
4 <p class="text-info">...</p>
5 <p class="text-warning">...</p>
6 <p class="text-danger">...</p>

10.2 情境背景色

1 <p class="bg-primary">...</p>
2 <p class="bg-success">...</p>
3 <p class="bg-info">...</p>
4 <p class="bg-warning">...</p>
5 <p class="bg-danger">...</p>

10.3 关闭按钮

1 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

10.4 三角符号

1 <span class="caret"></span>

 

posted @ 2015-08-15 11:26  juedi  阅读(343)  评论(0)  编辑  收藏  举报