| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
- </head>
- <body>
- <div class="container">
- <div class="row clearfix">
- <div class="col-md-3 column">
- <img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
- </div>
- <div class="col-md-9 column">
- <h3>
- h3. 这是一套可视化布局系统.
- </h3>
- </div>
- </div>
- <div class="row clearfix">
- <div class="col-md-12 column">
- <ul class="nav nav-tabs">
- <li class="active">
- <a href="#">首页</a>
- </li>
- <li>
- <a href="#">简介</a>
- </li>
- <li class="disabled">
- <a href="#">信息</a>
- </li>
- <li class="dropdown pull-right">
- <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
- <ul class="dropdown-menu">
- <li>
- <a href="#">操作</a>
- </li>
- <li>
- <a href="#">设置栏目</a>
- </li>
- <li>
- <a href="#">更多设置</a>
- </li>
- <li class="divider">
- </li>
- <li>
- <a href="#">分割线</a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- <div class="row clearfix">
- <div class="col-md-12 column">
- <div class="carousel slide" id="carousel-812781">
- <ol class="carousel-indicators">
- <li class="active" data-slide-to="0" data-target="#carousel-812781">
- </li>
- <li data-slide-to="1" data-target="#carousel-812781">
- </li>
- <li data-slide-to="2" data-target="#carousel-812781">
- </li>
- </ol>
- <div class="carousel-inner">
- <div class="item active">
- <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
- <div class="carousel-caption">
- <h4>
- First Thumbnail label
- </h4>
- <p>
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
- metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
- </p>
- </div>
- </div>
- <div class="item">
- <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
- <div class="carousel-caption">
- <h4>
- Second Thumbnail label
- </h4>
- <p>
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
- metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
- </p>
- </div>
- </div>
- <div class="item">
- <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
- <div class="carousel-caption">
- <h4>
- Third Thumbnail label
- </h4>
- <p>
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
- metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
- </p>
- </div>
- </div>
- </div> <a class="left carousel-control" href="#carousel-812781" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
- <a class="right carousel-control" href="#carousel-812781" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
- </div>
- </div>
- </div>
- </div>
- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
- </body>
- </html>
|
