在bs4里面，除了ul要使用list-inline之外，li全部还要用list-inline-item这个类来实现水平”！

   左对齐，取值left

   居中对齐，取值center

   右对齐，取值right

   两端对齐，取值justify

  .text-left：左对齐

    .text-center：居中对齐

    .text-right：右对齐

    .text-justify：两端对齐

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，

<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->

兼容IE最新版本 <meta http-equiv="X-UA-Compatible" content="IE=edge">

特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态，需要在<table>标签上加入table-hover类。

<table class="table-hover">

模态弹出框--实现原理解析（一）

实现原理解析：

bootstrap中的“模态弹出框”有以下几个特点：

1、模态弹出窗是固定在浏览器中的。

2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。

3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

当浏览器视窗大于768px时，模态弹出窗的宽度为600px

模态弹出框--结构分析

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，

而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

   弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

   弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

但是对于一个模态弹出窗而言，modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：

   动画过渡（Transitions）:对应的插件文件“transition.js”

   模态弹窗（Modal）:对应的插件文件“modal.js”

   下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

   滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

   选项卡（Tab）：对应的插件文件“tab.js”

   提示框（Tooltips）：对应的插件文件“tooltop.js”

   弹出框（Popover）：对应的插件文件“popover.js”

   警告框（Alert）：对应的插件文件“alert.js”

   按钮（Buttons）：对应的插件文件“button.js”

   折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

   图片轮播Carousel：对应的插件文件“carousel.js”

   自动定位浮标Affix：对应的插件文件“affix.js”

面板--面板中嵌套列表组

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>        </ul>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
也可以和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来：

面板--面板中嵌套表格

般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。首先来看嵌套表格的效果：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
    <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </p>    <table class="table table-bordered">
        <thead>//为表格标题
            <tr>
                <th>＃</th>
                <th>我的书</th>
                <th>发布时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
        </tbody>    </table>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
优化代码：
我们在实际使用的时候需要把table提取到panel-body外面：
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>    <table class="table table-bordered">…</table>
    <div class="panel-footer">作者：大漠</div>
</div>

面板--彩色面板

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

    panel-primary：重点蓝

    panel-success：成功绿

   panel-info:信息蓝

   panel-warning：警告黄

   panel-danger：危险红

<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>

面板--基础面板

基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容：

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

列表组--多彩列表组

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

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

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

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

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

 <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>