Bootstrap02

bootstrap02_内容概述

一.排版样式  (下面示例*代表class)

1.段落突出 *=lead

 

1 <p>山外有山,<span class="lead">人外有人</span></p>

2.标题显示+副标题

 

1 <h1>标题1和<small>副标题</small></h1>
2             <h2>标题2</h2>
3             <h3>标题3</h3>
4             <h4>标题4</h4>
5             <h5>标题5</h5>
6             <h6>标题6</h6>

 

 

 

3.内联文本元素=删除线+加粗字体+下划线+斜体

 

1 <strong>加粗</strong>
2 <del>删除线</del>
3 <u>下划线</u>
4 <em>倾斜</em>           

 

 

 

4.对齐方式

 

<p class="text-center">居中</p>
<p class="text-right">右对齐</p>
<p class="text-left">左对齐</p>

 

 

 

5.列表 *=list-unstyled表示无样式   *=list-inline表示将列表项放置一行  *=dl-horizontal表示将说明列表放置一行

 

 

 1 <h1>列表 内联列表 水平列表</h1> 
 2             <ul class="list-unstyled list-inline">
 3                 <li>姓名</li>
 4                 <li>性别</li>
 5                 <li>年龄</li>
 6             </ul>
 7             <dl class="dl-horizontal">
 8                 <dt>表头1</dt>
 9                 <dd>内容1</dd>
10             </dl>

 

 

 

6.引用  blockquote是引用标签   *=blockquote-reverse表示将引用右对齐   标签footer著名引用的出处  标签cite包裹出处的名称

 

1 <blockquote>天外有人<footer class="blockquote-reverse"><cite>梅子大大</cite></footer></blockquote>

 

 

 

7.改变大小写 *=text-uppercase 表示转大写  *=text-lowercase表示转小写  *=text-capitalize表示将首字母转为大写

 

1 <p class="text-uppercase">i love you</p>
2 <p class="text-lowercase">i love you</p>
3 <p class="text-capitalize">i love you</p>

 

 

 

8.地址 address

 

1 address>家乡地址:湖南省 衡阳市 常宁市</address>
2 <address>居住地址:湖南省 长沙市 岳麓区</address>

 

 

 

9.缩略语 abbr表示缩略标签  属性title内写上要显示的全部内容  *=initialism表示首字母缩略内容

 

1 <abbr title="超文本语言 hyper text mark language">html是一种超文本标记语言</abbr><br>
2 <abbr title="xml 是html的一个补充,用于存储数据的" class="initialism">xml语言</abbr>

 

 

 

二.代码

1.内联代码

 

2.用户输入代码

 

3.程序输出代码

 

4.基本代码块

 

 

1             <h1>内联代码</h1>
2             <code>你好!</code>
3             <h1>程序输出代码</h1>
4             <samp>你好!</samp>
5             <h1>用户输入代码</h1>
6             <kbd>你好!</kbd>
7             <h1>基本代码块</h1>
8             <pre class="pre-scrollable">你好鸭!</pre>            

三.表格

1.基本表格 *=table

2.条纹表格 *=table table-stripped

3.鼠标悬停表格 *=table table-hover

4.响应表格  *=table table-responsive

5.改变表格颜色 

　　*=active 默认白

　　*=danger 危险红

　　*=info 浅蓝

　　*=warning 警告黄

　　*=succes 成功绿