UsingBootstrap.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>具体使用Bootstrap</title>
    <link href="bootstrapStyle.css" type="text/css" rel="stylesheet">
    <!--注意要先添加jquery.js的再添加bootstrap.js的 因为bootstrap依赖于jquery-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--<script src="bootstrap.min.css"></script>-->
    <!--<script src="bootstrap.min.js"></script>-->
    <!--<script src="jquery-3.1.1.min.js"></script>-->
 </head>
<body data-spy="scroll" data-target=".navbar" data-offset="70">

    <!--栅格系统 排版 代码 表格 表单 按钮 图片 辅助类-->
    <div class="railings">
        <div class="row">
            <div class="col-md-1 col-md-offset-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-9">.col-md-9</div>
            <div class="col-md-3">.col-md-3</div>
            <div class="col-md-9 col-md-push-3">.col-md-9</div>
            <div class="col-md-3 col-md-pull-9">.col-md-3</div>
        </div>
    </div>
    <p class="text-muted bg-primary">情景文本颜色+背景颜色</p>
    <p class="text-primary bg-success">情景文本颜色+背景颜色</p>
    <p class="text-success bg-info">情景文本颜色+背景颜色</p>
    <p class="text-info bg-warning">情景文本颜色+背景颜色</p>
    <p class="text-warning bg-danger">情景文本颜色+背景颜色</p>
    <p class="text-danger">情景文本颜色</p>

    <h1>这里是河海大学调频78兆赫<small>副标题在此谁敢撒野</small></h1>
    <p>这里是河海大学调频78兆赫</p>
    <p class="lead">这里是<mark>河海<del>野鸡</del>大学</mark>调频78兆赫</p>
    <blockquote>
        <p>Long long ago , there is a man called <kbd>Vodka</kbd>.</p>
    </blockquote>
    <pre><p>Sample text here...</p></pre>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr class="active">
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr class="success">
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr class="info">
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr class="warning">
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr class="danger">
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        </tbody>
    </table>
    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only">username</label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="email" class="form-control" placeholder="email">
                <div class="input-group-addon">@163.com</div>
            </div>
        </div>
        <div class="form-group">
            <label class="sr-only">password</label>
            <input type="password" class="form-control" placeholder="password">
        </div>
    </form>
    <span id="helpBlock" class="help-block">这是一个输入密码的框,要注意:密码不区分大小写</span>
    <hr>
    <form class="form-horizontal">
        <fieldset disabled>
            <div class="form-group" style="background-color: #5e5e5e">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <p class="form-control-static">598646152@qq.com</p>
                </div>
                <input class="form-control">
                <input class="form-control">
                <input class="form-control">
            </div>
            <!--<button type="reset" class="btn btn-primary">重置</button>-->
        </fieldset>
    </form>
    <form class="form-horizontal">
        <div class="form-group has-success has-feedback">
            <label class="control-label">Hello</label>
            <input type="text" class="form-control" placeholder="Hello" aria-describedby="inputsuccesstatus">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </form>


    <!--按钮组-->
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default btn-sm" disabled="disabled" type="submit" value="Ban">
    <button type="button" class="btn btn-default">(默认样式)Default</button>
    <button type="button" class="btn btn-primary">(首选项)Primary</button>
    <button type="button" class="btn btn-success">(成功)Success</button>
    <button type="button" class="btn btn-info">(一般信息)Info</button>
    <button type="button" class="btn btn-warning">(警告)Warning</button>
    <button type="button" class="btn btn-danger">(危险)Danger</button>
    <button type="button" class="btn btn-link">(链接)Link</button>
    <button type="button" class="btn btn-default btn-lg active">活跃按钮</button>
    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">按钮被禁用</button>
    <br><button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
    <span class="caret"></span>
    <div class="center-block">
        <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
        <button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
        <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
        <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button><br>
        <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
        <button type="button" class="btn btn-default">(默认尺寸)Default button</button>
        <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
        <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
    </div>
    <img src="hhu.jpg" class="img-responsive " alt="aj图片" style="float:left;">
    <img src="aj.jpg" class="img-responsive img-thumbnail" alt="aj图片" style="float: left">
    <!--!
         important 被用来明确 CSS 样式的优先级 形如float: right !important;
         clearfix 类可以很容易地清除浮动(float)
    -->
    <img src="aj-2.jpg" class="img-responsive img-circle"  alt="aj图片" style="float: left" >
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="visible-md-* hidden-print"></div>


   <!--字体图标-->
    <div>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-magnet" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
        </button>
    </div>

    <!--下拉菜单-->
    <div>
        <div class="dropup" style="float: left">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropup
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <div class="dropdown" style="float:left;">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
                <li><a href="#">Regular link</a></li>
                <li class="disabled"><a href="#">Disabled link</a></li>
                <li><a href="#">Another link</a></li>
            </ul>
        </div>
        <div class="btn-group" role="group" aria-label="..." style="float: left">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
        <div class="btn-toolbar" role="toolbar" aria-label="..." style="float: left">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>
        <!-- 分裂按钮 -->
        <div class="btn-group" style="float: left">
            <button type="button" class="btn btn-danger">Action</button>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Left</button>
        </div>
        <div class="btn-group" role="group">
             <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>


    <!--输入框组-->
    <div>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
                    <input type="text" class="form-control" placeholder="Search for...">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control" aria-label="...">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </div>


    <!--能切换内容的导航栏-->
    <div class="container">
        <h2>动态标签</h2>
        <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
            <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
            <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
            <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
            <li class="dropdown">
                <a href="#" id="tabdrop1" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
                    <li><a href="#menu1" tabindex="-1" data-toggle="tab">one</a></li>
                    <li><a href="#menu2" tabindex="-1" data-toggle="tab">two</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav nav-pills">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation" class="disabled"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
            <li role="presentation"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                下拉菜单
                <span class="caret"></span>
            </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">-</a></li>
                    <li><a href="#">-</a></li>
                    <li><a href="#">-</a></li>
                    <li><a href="#">-</a></li>
                </ul>
            </li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>首页</h3>
                <p>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>菜单 1</h3>
                <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>菜单 2</h3>
                <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>菜单 3</h3>
                <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
            </div>
        </div>
    </div>


    <!--导航条-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="hhu.jpg" style="width:75px;height: 50px;margin-top: -15px">
                </a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>


    <!--分页-->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
    <nav aria-label="...">
        <ul class="pager">
            <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
            <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
        </ul>
    </nav>


    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

    <a href="#">微信<span class="badge">99</span></a>

    <button class="btn btn-primary" type="button">
        Messages <span class="badge">66</span>
    </button>

    <div class="jumbotron">
        <h1>页面巨幕</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

    <div class="page-header">
        <h1>页头<small>Subtext for header</small></h1>
    </div>


    <!--缩略图-->
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src=".." alt="待添加图片">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>缩略图详细内容...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src=".." alt="待添加图片">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>缩略图详细内容...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src=".." alt="待添加图片">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>缩略图详细内容...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>


    <!--警告框-->
    <div class="container">
        <div class="alert alert-success" role="alert">
            <strong>Success!</strong>恭喜你成功了.
            <a href="#" class="alert-link">...a标签</a>
        </div>
        <div class="alert alert-info" role="alert">
            <strong>Success!</strong>恭喜你成功了.
            <a href="#" class="alert-link">...a标签</a>
        </div>
        <div class="alert alert-warning" role="alert">
            <strong>Success!</strong>恭喜你成功了.
            <a href="#" class="alert-link">...a标签</a>
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>Success!</strong>恭喜你成功了.
            <a href="#" class="alert-link">...a标签</a>
        </div>
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <strong>警告框 Warning!</strong> Better check yourself, you're not looking too good.
        </div>
    </div>


    <!--进度条-->
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            60%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
            0%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
            2%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
            <span class="sr-only">20% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
            <span class="sr-only">45% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
            <span class="sr-only">60% Complete (warning)</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 35%">
            35%
            <!--<span class="sr-only">35% Complete (success)</span>-->
        </div>
        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
            20%
            <!--<span class="sr-only">20% Complete (warning)</span>-->
        </div>
        <div class="progress-bar progress-bar-danger" style="width: 10%">
            10%
            <!--<span class="sr-only">10% Complete (danger)</span>-->
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
            <span class="sr-only">80% Complete (danger)</span>
        </div>
    </div>


    <!--媒体对象-->
    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="hhu.jpg" style="width: 50px;height: 50px" alt="...">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Middle aligned media</h4>
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
            ...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分...这是媒体对象部分
        </div>
    </div>


    <!--列表组-->
    <div class="list-group">
        <a href="#" class="list-group-item">Cras justo odio</a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>


    <!--嵌入内容-->
    <!-- 16:9 aspect ratio -->
    <div class="container">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="index.html"></iframe>
        </div>
    </div>

    <!--过渡-->
    <div id="mydiv"></div>
    <script>
        document.getElementById("mydiv").addEventListener("transitionend",function(e){
            this.innerHTML = "过渡事件触发已完成";
        })
    </script>

    <!--模态框-->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
        大模态框
    </button>
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel1">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label class="control-label">username</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">password</label>
                            <input type="password" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
        中模态框
    </button>
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel2">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label class="control-label">username</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">password</label>
                            <input type="password" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3">
        小模态框
    </button>
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel3">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label class="control-label">username</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">password</label>
                            <input type="password" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@模态框初始化为按钮上的文字">
        模态框初始化为按钮上的文字
    </button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Recipient:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send message</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('标题转换为新标题' + recipient)
            modal.find('.modal-body input').val(recipient)
        })
//      使用参数和方法来修改js 详见文档
//        $('#exampleModal').modal({
//            backdrop:false
//        })
//        $('#exampleModal').modal('hide');
        $('#exampleModal').on("hidden.bs.modal",function(e){
            alert("关闭了")
        })
    </script>

    <!--Bootstrap下拉菜单的滚动监听-->
    <!--body 要设置属性-->
        <div class="container">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
                        <ul class="nav navbar-nav">
                            <li><a href="#iwen">@iwen</a></li>
                            <li><a href="#ime">@ime</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#one" tabindex="-1">one</a></li>
                                    <li><a href="#two" tabindex="-1">two</a></li>
                                    <li><a href="#three" tabindex="-1">three</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <h2 id="iwen">@iwen</h2>
            <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><hr>
            <h2 id="ime">@ime</h2>
            <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><hr>
            <h2 id="one">@one</h2>
            <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><hr>
            <h2 id="two">@two</h2>
            <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><hr>
            <h2 id="three">@three</h2>
            <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><hr>
        </div>


    <!--Bootstrap标签-->
    <div class="container">
        <h2>动态标签</h2>
        <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
        <ul id="mytab" class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home1">首页</a></li>
            <li><a data-toggle="tab" href="#menu11">菜单 1</a></li>
            <li><a data-toggle="tab" href="#menu12">菜单 2</a></li>
            <li><a data-toggle="tab" href="#menu13">菜单 3</a></li>
            <li class="dropdown">
                <a href="#" id="tabdrop2" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu4" role="menu">
                    <li><a href="#menu11" tabindex="-1" data-toggle="tab">one</a></li>
                    <li><a href="#menu12" tabindex="-1" data-toggle="tab">two</a></li>
                </ul>
            </li>
        </ul>
        <div class="tab-content">
            <div id="home1" class="tab-pane fade in active">
                <h3>首页</h3>
                <p>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</p>
            </div>
            <div id="menu11" class="tab-pane fade">
                <h3>菜单 1</h3>
                <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
            </div>
            <div id="menu12" class="tab-pane fade">
                <h3>菜单 2</h3>
                <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
            </div>
            <div id="menu13" class="tab-pane fade">
                <h3>菜单 3</h3>
                <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
            </div>
        </div>
    </div>
    <script>
//        <!--标签一开始展示在非首页界面-->
//        $("#mytab a:last").tab("show");
        $('#mytab a[href="#menu1"]').tab('show') // Select tab by name
        $('#mytab a:first').tab('show') // Select first tab
        $('#mytab a:last').tab('show') // Select last tab
        $('#mytab li:eq(2) a').tab('show') // Select third tab (0-indexed)
    </script>


    <!--工具提示-->
    <div class="container">
        <p class="muted" style="margin-bottom: 0">
            欢迎来到<a id="mytooltip1" href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-original-title="www.baidu.com">向左提示</a>
            <a id="mytooltip2" href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right" data-original-title="www.baidu.com">向右提示</a>
            <a id="mytooltip3" href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-original-title="www.baidu.com">向上提示</a>
            <a id="mytooltip4" href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-original-title="www.baidu.com">向下提示</a>
        </p>
    </div>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
//       或者写成 $('[data-toggle="tooltip"]').tooltip();
//        $("#mytooltip1").tooltip();
//        $("#mytooltip2").tooltip();
//        $("#mytooltip3").tooltip();
//        $("#mytooltip4").tooltip();
//        show hide toggle destroy 具体其他方法见文档
        $('#mytooltip1').on('hidden.bs.tooltip', function () {
            // do something…
        })
    </script>


    <!--弹出框-->
    <div class="container">
        <button type="button" class="btn btn-default js-popover" data-placement="left" data-toggle="popover" data-trigger="focus" title="标题" data-content="弹出框具体内容">向左弹出框</button>
        <button type="button" class="btn btn-default js-popover" data-placement="right" data-toggle="popover" data-trigger="focus" title="标题" data-content="弹出框具体内容">向右弹出框</button>
        <button type="button" class="btn btn-default js-popover" data-placement="top" data-toggle="popover" data-trigger="focus" title="标题" data-content="弹出框具体内容">向上弹出框</button>
        <button type="button" class="btn btn-default js-popover" data-placement="bottom" data-toggle="popover" data-trigger="focus" title="标题" data-content="弹出框具体内容">向下弹出框</button>
    </div>
    <script>
        $(".js-popover").popover();
//        绑定事件
//        $("id名").on("事件名",function(e){
////            要发生的动作
//        })
    </script>


    <!--Bootstrap选择按钮-->
    <div class="container">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> 选项1
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" autocomplete="off"> 选项2
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option3" autocomplete="off"> 选项3
            </label>
        </div>
        <button type="button" data-complete-text="finish" class="btn btn-default mybtn" autocomplete="off">Hello</button>
        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Link with href
        </a>
        <div class="collapse" id="collapseExample">
            <div class="well">
                ...
            </div>
        </div>
    </div>
    <script>
        $(".mybtn").on("click", function (e) {
            $(this).button("complete" );// button text will be "finished!"
        })
    </script>


    <!--Collapse-->
    <div class="container">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!--轮播 图片轮滑-->
    <div class="container" id="mycarousel">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="轮播1.png" alt="...">
                    <div class="carousel-caption">
                        <h3>描述标题</h3>
                        <p>描述文字</p>
                    </div>
                </div>
                <div class="item">
                    <img src="轮播2.png" alt="...">
                    <div class="carousel-caption">
                        <h3>描述标题</h3>
                        <p>描述文字</p>
                    </div>
                </div>
                <div class="item">
                    <img src="轮播3.png" alt="...">
                    <div class="carousel-caption">
                        <h3>描述标题</h3>
                        <p>描述文字</p>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>


    <!--Affix-->
    <div class="container">
        <div class="col-md-3">
            <ul class="list-group affixed-element-top js-affixed-element-top">
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
            </ul>
        </div>
        <div class="col-md-6 js-content">
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
            <p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br>
        </div>
        <div class="col-md-3">
            <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
                <li class="list-group-item">hello</li>
            </ul>
        </div>
    </div>
    <!--<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">-->
        <!--...-->
    <!--</div>-->
    <script >
        $(".js-affixed-element-top").affix({
            offset:{

            }
        })
        $(".js-affixed-element-bottom").affix({
            offset:{
                bottom:200
            }
        })
    </script>

</body>
</html>


bootstrapStyle.css:

*{
    margin: 0px;
    padding: 0px;
}
[class*="col-md"]{
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2) ;
}

#mydiv{
    width: 100px;
    height: 100px;
    background:red;
    -webkit-transition: width 2s;
    transition: width 2s;
}
#mydiv:hover{
    width: 400px;
}


.affixed-element-top.affix{
    top:10px;
}
.affixed-element-top.affix-bottom{
    position: relative;
}
.affixed-element-bottom.affix{
    bottom: 10px;
}
.affixed-element-bottom.affix-bottom{
    position: relative;
}

index,html:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width = device-width,initial-scale=1">
    <title>Bootstrap响应式布局</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="only screen">
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="heading"></div>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
    <div class="footing"></div>


</body>
</html>

style.css:
*{
    padding: 0;
    margin: 0;
}

.heading,
.container,
.footing{
    margin: 10px auto;
}
.heading{
    height: 100px;
    background-color: #99e0ff;
}
.left,
.right,
.main{
    background-color: yellow;
}
.footing{
    height: 100px;
    background-color: springgreen;
}
@media screen and (min-width: 960px){
    .heading,
    .container,
    .footing{
        width: 960px;
    }
    .left,
    .main,
    .right{
        float: left;
        height: 500px;
    }
    .right,
    .left{
        width: 200px;
    }
    .main{
        margin-left: 5px;
        margin-right: 5px;
        width: 550px;
    }
    .container{
        height: 500px;
    }
}

@media screen and (min-width: 600px) and (max-width: 960px){
    .heading,
    .container,
    .footing{
        width: 600px;
    }
    .left,
    .main{
        float: left;
        height: 400px;
    }
    .right{
        display: none;
    }
    .left{
        width: 160px;
    }
    .main{
        width: 435px;
        margin-left: 5px;
    }
    .container{
        height: 400px;
    }
}

@media screen and (max-width: 600px) {
    .heading,
    .container,
    .footing{
        width: 400px;
    }
    .left,
    .right{
        width: 400px;
        height: 100px;
    }
    .main{
        margin-top: 10px;
        width: 400px;
        height: 200px;
    }
    .right{
        margin-top: 10px;
    }
    .container{
        height: 420px;
    }
}