bootstrap

一网格

1.网格选项

col-xs-超小型（未定义）

col-sm-小型（750px）

col-mg-中型（970px）

col-lg-大型（1170px）

2.创建基本网格

固定宽度容器（两边有空白）：container

非固定宽度容器（两边没有空白）：container-fluid

class=row

    class=col-md-2

3.切换内容的响应式类

visible-xs-block      visible-sm-inline-block         hidden-xs       

4.清除浮动

.clearfix

5.列的偏移、排序

.col-md-offset-3（在左侧补充3列）

.col-md-push-8（从左侧往右侧推8列）

.col-md-pull-2（往左侧拉2列）

二、组件

1.标签

标签类+标签变种类：label label-default

2.徽章

.badge          可用来邮件数量计算等

3.Well

类+可选类：well well-lg/sm

使元素产生凹陷效果

4.面板

容器：类+变种：panel panel-default

组成:

<div class="panel panel-danger">
	    <div class="panel-heading">
		 <h3 class="panel-title"></h3>
	   </div>
	   <div class="panel-body">
		 <p>adsf</p>
	   </div>
	   <div class="panel-footer">
		  <a>link</a>
	   </div>

</div>

5.超大屏幕

.jumbotron

如果放在container容器中，将带有圆角，占据12列。否则失去圆角，占据整个屏幕宽度

三、排版

bootstrap负责基本排版（如字体族等）

标题

1.内联标题    <span class="h1"></span>

2.内联子标题    <small></small>

3.内联标题添加辅助文本     <span class="small"></span>

4.用图像替代标题

<h1 class="text-hide">    然后设置背景图片

5.页眉

.page-header

正文

1.bootstrap为段落添加了底部外边距，数值为计算所得行高的一半；正文默认字体为14px，行高大约为1.4

2.突出显示文本        .lead

3.文本对齐

text-left        text-right        text-center        text-justify（两端对齐）        text-nowrap（不换行，全部内容显示为一行）

4.块元素对齐（类似浮动）

pull-left        pull-right        center-block

5.文本修饰

text-capitalize        text-lowercase        text-uppercase

6.标准助手类

text-muted        text/bg-primary        text/bg-success        text/bg-info        text/bg-danger        bg-danger

可用于任何元素，改变文本和背景颜色

7.特殊文本块        

bootstrap会提供相应样式

@代码        

@引用语

<blockquote>

   <p>内容</p>

   <footer>来源</footer>

</blockquote>

@列表

.list-unstyled        删除默认样式和左外边距

.list-inline         将所有列表项放在一行中，项之间有较小内边距

.dl-horizontal        将定义列表项和描述并排显示

@缩略语

.initialism        以稍小一些的字体显示缩略语

@地址

四、表格

1.bootstrap自动对表格应用3种样式

background-color：transparent;       背景颜色为透明

border-spacing:0;

border-collapse:collapse;

2.基本表格

<table class="table">

</table>

3.表格类

.table-striped    <tbody>标记的行内添加斑马纹样式（ie8无法正常使用）

.table-bordered    表格四周和行列之间添加边框

.table-hover    <tbody>内各行启用悬停状态

.table-condensed    将内边距减半，使表格更紧凑

4.上下文类

.active    悬停颜色

.danger    红色

.info    蓝色表示信息或中性行为

.success     绿色

.warning    黄色

5.把表格放在面板中可以很好地契合

<panel panel-default>

    <panel-body></>

    <table></table>

</>

6.相应式表格

.table-responsive

五、表单

1.基本表单

<div class="form-group">

<label></>

<input type="text" class="form-control">

</div>

2.水平表单

<form class="form-horizontal">

     <div class="form-group">

        <label class="control-label"></>

        <input type="text" class="form-control">

    </div>

</form>

3.内联表单

.form-inline

4.复选框和单选按钮

1.将复选框和单选按钮分别包含在.checkbox和.radio类容器中

2.添加disabled属性，鼠标悬停时会有一个不允许的光标

3.内联复选框和单选按钮（显示在一行）

.checkbox-inline        .radio-inline

5.下拉菜单

<select class="form-control">

</>

6.设置表单控件的大小

.input-lg        .input-sm        .form-group-lg        .form-group-sm（设置表单组中所有元素的大小）

7.帮助块

定义描述表单字段和告知用户相关信息的文本块

<span class="help-block" id="x">内容</>

<input aria-describedby="x">

8.输入组

在表单控件前后添加字段

<div class="input-group   input-group-lg">

    <div    class="input-group-addon">$</div>    前

    <div><input class="form-control"></>

    <div class="input-group-addon">.00</>    后

</div>

也可以把其他控件作为input-group-addon中的内容

9.表单交互

属性

focus焦点        disabled禁用（无法得到焦点，不随表单提交）        readonly 只读       

类

has-success验证状态        has-warning        has-error

六、图像和媒体对象

1、响应式图像

.img-responsive

2.图像形状

.img-rounded（提供圆角）        .img-circle（被裁减为一个圆）        .img-thumbnail（周围有个方框）

3.媒体对象

同时显示文本、图像和左右对齐的其他媒体

<div class="media"

    <div class="media-left">

            <img>

     </>

      <div class="media-body">

        <p></>

        <div class="media-right">

        <img>

        </>

</div>

3.媒体列表

用.media-list容器包围上面的媒体对象

4.缩略图

<div class="container">必须

        <div class="row">必须

                <div class="col-xs-6"     thumbnail">

                    <img>

                    <div class="caption">缩略图标题内容</div>

                </div>

        </div>

</div>

5.Glyphicon

包含260个图标的字体族

<span class="glyphicon glyphicon-heart-empty"></span>心形图

七、按钮

1.按钮标记

<button>            <a type="button">            <input type="submit">

2.类

类+辅助类

.btn  btn-default        .btn btn-danger

大小

.btn-lg        .btn-sm        .btn-xs

状态属性

disabled

3.按钮组

将按钮联系在一起

<div class="btn-group"   role="group"    aria-label="x"（提高可访问性）>

        <button></>

        <button></>

</div>

4.垂直按钮组

.btn-group-vertical

5.按钮工具栏

<div  class="btn-toolbar">

    <div class="btn-group">

     </div>

     <div  class="btn-group">

     </div>
</div>