使用标签<em>或<i>来实现斜体

使用<b>和<strong>标签让文本直接加粗

让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

 bootstrap：

      简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

      基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。

      自定义JQuery插件，完整的类库，基于Less等。

bootstrap是简单、灵活的用于搭建web页面的html、css、javascript的工具集

面板--彩色面板

在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

    panel-primary：重点蓝

    panel-success：成功绿

   panel-info:信息蓝

   panel-warning：警告黄

   panel-danger：危险红

使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名：

<div class="panel panel-default">     <div class="panel-heading">图解CSS3</div>     <div class="panel-body">…</div>     <div class="panel-footer">作者：大漠</div> </div> <div class="panel panel-primary">…</div> <div class="panel panel-success">…</div> <div class="panel panel-info">…</div> <div class="panel panel-warning">…</div> <div class="panel panel-danger">…</div>

面板--带有头和尾的面板

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

     panel-heading：用来设置面板头部样式

    panel-footer：用来设置面板尾部样式

<div class="panel panel-default">     <div class="panel-heading">图解CSS3</div>     <div class="panel-body">…</div>     <div class="panel-footer">作者：大漠</div> </div>

列表组--多彩列表组

列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。

    list-group-item-success：成功，背景色绿色

    list-group-item-info：信息，背景色蓝色

    list-group-item-warning：警告，背景色为黄色

    list-group-item-danger：错误，背景色为红色

如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名：

列表组--列表项的状态设置

Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名：

    active：表示当前状态

    disabled：表示禁用状态

列表组--自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式：

    list-group-item-heading：用来定义列表项头部样式

    list-group-item-text：用来定义列表项主要内容

这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容，如下面的示例：

列表组--基础列表组

基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

    list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

    list-group-item：列表项，常用的是li元素，当然也可以是div元素

针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”，示例代码如下：

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

media

媒体对象--默认媒体对象

媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

     媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

    媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

    媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

    媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

如下图所示：

除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。