Difference between revisions of "Team:NPU-China/test"

Line 11: Line 11:
 
<body>
 
<body>
  
−
<div class="container">
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
−
<div class="row clearfix">
+
  <div class="navbar-header">
−
<div class="col-md-12 column">
+
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
−
<img alt="140x1400" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
    <a class="navbar-brand" href="#">Brand</a>
−
<ul class="nav nav-pills">
+
  </div>
−
<li class="active">
+
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
−
<a href="#">首页</a>
+
    <ul class="nav navbar-nav">
−
</li>
+
      <li class="active"> <a href="#">Link</a> </li>
−
<li>
+
      <li> <a href="#">Link</a> </li>
−
<a href="#">简介</a>
+
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
−
</li>
+
        <ul class="dropdown-menu">
−
<li class="disabled">
+
          <li> <a href="#">Action</a> </li>
−
<a href="#">信息</a>
+
          <li> <a href="#">Another action</a> </li>
−
</li>
+
          <li> <a href="#">Something else here</a> </li>
−
+
          <li class="divider"> </li>
−
</ul>
+
          <li> <a href="#">Separated link</a> </li>
−
</div>
+
          <li class="divider"> </li>
−
</div>
+
          <li> <a href="#">One more separated link</a> </li>
−
<div class="row clearfix">
+
        </ul>
−
<div class="col-md-12 column">
+
      </li>
−
<h2>
+
    </ul>
−
Heading
+
    <form class="navbar-form navbar-left" role="search">
−
</h2>
+
      <div class="form-group">
−
<p>
+
        <input type="text" class="form-control" />
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
      </div>
−
</p>
+
      <button type="submit" class="btn btn-default">Submit</button>
−
<p>
+
    </form>
−
<a class="btn" href="#">View details »</a>
+
    <ul class="nav navbar-nav navbar-right">
−
</p>
+
      <li> <a href="#">Link</a> </li>
−
</div>
+
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
−
</div>
+
        <ul class="dropdown-menu">
−
<div class="row clearfix">
+
          <li> <a href="#">Action</a> </li>
−
<div class="col-md-6 column">
+
          <li> <a href="#">Another action</a> </li>
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
          <li> <a href="#">Something else here</a> </li>
−
</div>
+
          <li class="divider"> </li>
−
<div class="col-md-6 column">
+
          <li> <a href="#">Separated link</a> </li>
−
<h2>
+
        </ul>
−
Heading
+
      </li>
−
</h2>
+
    </ul>
−
<p>
+
  </div>
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
</nav>
−
</p>
+
<div id="myCarousel" class="carousel slide">
−
<p>
+
  <!-- 轮播（Carousel）指标 -->
−
<a class="btn" href="#">View details »</a>
+
  <ol class="carousel-indicators">
−
</p>
+
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
−
</div>
+
    <li data-target="#myCarousel" data-slide-to="1"></li>
−
</div>
+
    <li data-target="#myCarousel" data-slide-to="2"></li>
−
<div class="row clearfix">
+
  </ol>
−
<div class="col-md-6 column">
+
  <!-- 轮播（Carousel）项目 -->
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
  <div class="carousel-inner">
−
</div>
+
    <div class="item active">
−
<div class="col-md-6 column">
+
      <img class="img-responsive" src="http://image.tianjimedia.com/uploadImages/2012/012/50HJ0RDE8IM2.jpg" alt="First slide">
−
<h2>
+
    </div>
−
Heading
+
    <div class="item">
−
</h2>
+
      <img class="img-responsive" src="http://image.tianjimedia.com/uploadImages/2012/012/50HJ0RDE8IM2.jpg" alt="Second slide">
−
<p>
+
    </div>
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
    <div class="item">
−
</p>
+
      <img class="img-responsive" src="http://image.tianjimedia.com/uploadImages/2012/012/50HJ0RDE8IM2.jpg" alt="Third slide">
−
<p>
+
    </div>
−
<a class="btn" href="#">View details »</a>
+
  </div>
−
</p>
+
  <!-- 轮播（Carousel）导航 -->
−
</div>
+
  <a class="carousel-control left" href="#myCarousel"
−
</div>
+
  data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel"
−
<div class="row clearfix">
+
  data-slide="next">&rsaquo;</a>
−
<div class="col-md-12 column">
+
−
<h2>
+
−
Heading
+
−
</h2>
+
−
<p>
+
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
−
</p>
+
−
<p>
+
−
<a class="btn" href="#">View details »</a>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
<div class="row clearfix">
+
−
<div class="col-md-4 column">
+
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
−
<h2>
+
−
Heading
+
−
</h2>
+
−
<p>
+
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
−
</p>
+
−
<p>
+
−
<a class="btn" href="#">View details »</a>
+
−
</p>
+
−
</div>
+
−
<div class="col-md-4 column">
+
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
−
<h2>
+
−
Heading
+
−
</h2>
+
−
<p>
+
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
−
</p>
+
−
<p>
+
−
<a class="btn" href="#">View details »</a>
+
−
</p>
+
−
</div>
+
−
<div class="col-md-4 column">
+
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
−
<h2>
+
−
Heading
+
−
</h2>
+
−
<p>
+
−
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
−
</p>
+
−
<p>
+
−
<a class="btn" href="#">View details »</a>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
<div class="row clearfix">
+
−
<div class="col-md-4 column">
+
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
−
</div>
+
−
<div class="col-md-4 column">
+
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
−
</div>
+
−
<div class="col-md-4 column">
+
−
<img alt="140x140" src="http://www.runoob.com/try/bootstrap/layoutit/v3/default3.jpg" />
+
−
</div>
+
−
</div>
+
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 09:55, 2 August 2017

Bootstrap 实例 - 响应式的列重置