Bootstrap02

Bootstrap02_内容概述

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

1.段落突出 *=lead

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

2.标题显示+副标题

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

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

 <strong>加粗</strong>
 <del>删除线</del>
 <u>下划线</u>
 <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表示将说明列表放置一行

 <h1>列表 内联列表 水平列表</h1>
             <ul class="list-unstyled list-inline">
                 <li>姓名</li>
                 <li>性别</li>
                 <li>年龄</li>
             </ul>
             <dl class="dl-horizontal">
                 <dt>表头1</dt>
                 <dd>内容1</dd>
             </dl>

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

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

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

 <p class="text-uppercase">i love you</p>
 <p class="text-lowercase">I love you</p>
 <p class="text-capitalize">i love you</p>

8.地址 address

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

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

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

二.代码

1.内联代码

2.用户输入代码

3.程序输出代码

4.基本代码块

             <h1>内联代码</h1>
             <code>你好!</code>
             <h1>程序输出代码</h1>
             <samp>你好!</samp>
             <h1>用户输入代码</h1>
             <kbd>你好!</kbd>
             <h1>基本代码块</h1>
             <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 成功绿