BootStrap（持续更新中。。。。）

BootStrap

一、全局css样式

1.排版

(1) 标题
	<h1></h6>
    .h1 .h6
(2) 副标题(小号文本)
    <small></small>
    .small
(3) 让段落突出显示
	.lead
(4) 在BootStrap中 全局的font-size = '14px' line-height = '1.428'
(5) 高亮显示	<mark></mark>
(6)	删除线		 
    <del></del>	
	<s></s>
(7) 插入文本(带下划线)
	<ins></ins>
	<u></u>
(8) 文本对齐类
	text-left		左对齐
	text-center		居中
	text-right		右对齐
	text-justify	两端对齐，段落中查出屏幕部分文字自动换行
	text-nowrap		超出屏幕不换行
(9) 改变文字大小写
    text-lowercase	全部小写
	text-uppercase	全部大写
	text-capitalize	首字母大写
(10)缩略语
    ·基本缩略语
    <abbr title="attrbute">attr</abbr>
	·首字母缩略语    
	<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
(11)地址
    <address></address>
eg:
 <address>
 	<strong>tencent, Inc.</strong><br>	//腾讯公司
    1355 Market Street, Suite 900<br>	//市场街1355号900套房
    San Francisco, CA 94103<br>			//CA旧金山94103
    <abbr title="Phone">P:</abbr> (123) 456-7890	//电话: (123)456-789
</address>

<address>
	<strong>王德发</strong><br>			//王德发
	<a href="mailto:#">wdf@163.com</a>	  //邮箱:wdf@163.com
</address>
(12)引用
    ·默认样式的引用
    	将任何 HTML 元素包裹在 <blockquote> 中即表现为引用样式。对于直接引用，建议用 <p> 标签。
		eg:
        	<blockquote>
                <p>have hands is okey</p>
            </blockquote>
    ·多种引用样式
    	添加来源 : 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
   	 	eg:
          	<blockquote>
  				<p>起风了让我们迎风而生</p>
  				<footer>法国瓦莱里<cite title="Source Title">《海边的墓地》</cite></footer>
			</blockquote> 
	·通过添加 .blockquote-reverse 可以实现右对齐
			<blockquote class="blockquote-reverse">
  				<p>起风了让我们迎风而生</p>
  				<footer>法国瓦莱里<cite title="Source Title">《海边的墓地》</cite></footer>
			</blockquote> 
(13)列表
    ·无样式列表 .list-unstyled
    ·内联列表 .list-inline	让所有元素放置于同一行
	·水平排列的描述 .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。
    	eg:
            <dl class="dl-horizontal">
          		<dt>牛</dt>
          		<dd>大角牛</dd>
          		<dt>猪</dt>
          		<dd>荷兰猪</dd>
        	</dl>
(14)自动截断
	通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

2.代码

(1)
	·内联代码	通过 <code></code> 标签包裹内联样式的代码片段。
		eg: 这是一个代码块 <code>&lt;div&gt;</code> 这是一个代码块
	·用户输入 通过 <kbd></kbd> 标签标记用户通过键盘输入的内容。 
        eg: 用户输入 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
	·代码块	多行代码可以使用 <pre></prep> 标签。为了正确的展示代码，注意将尖括号做转义处理。
		eg:	<pre>
              &lt;p&gt; 我是p标签 &lt;/p&gt;
  			  &lt;div&gt; 我是div标签 &lt;/div&gt;
			</pre>
(2)变量	通过 <var></var> 标签标记变量
		eg: <var>y</var> += <var>y;</var>	// y += y;
(3)程序输出  通过 <samp></samp> 标签来标记程序输出的内容。
        eg: <samp> error: ./index.html is not found (404)</samp>

表格

(1) 基本表格 .table
(2) 条纹状表格	通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
    	注意:	跨浏览器兼容性 条纹状表格是依赖 :nth-child CSS 选择器实现的， IE 8 不支持。
(3) 带边框的表格	添加 .table-bordered 类为表格和其中的每个单元格增加边框。
(4) 鼠标悬停	通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。	
(5) 紧缩表格	通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
(6) 状态类	
    	.active		<!-- 灰 -->
    	.success	<!-- 绿 -->
    	.warning	<!-- 黄 -->
    	.danger		<!-- 红 -->
    	.info		<!-- 蓝 -->
(7)响应式表格	将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
	·垂直方向的内容截断
				响应式表格使用 overflow-y: hidden 属性，就能将超出表格底部和顶部的内容截断。也可以截断下拉菜单和其他第三方组件。
    ·Firefox 和 fieldset 元素
				Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中:
    @-moz-document url-prefix() {
  		fieldset { display: table-cell; }
	}