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

Line 11: Line 11:
  
 
<div class="container">
 
<div class="container">
  <div class="row" >
+
<div class="row clearfix">
      <div class="col-xs-6 col-sm-3"  
+
<div class="col-md-12 column">
        style="background-color: #dedef8;
+
<img alt="140x140" src="v3/default3.jpg" />
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
+
<ul class="nav nav-pills">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
<li class="active">
      </div>
+
<a href="#">首页</a>
      <div class="col-xs-6 col-sm-3"  
+
</li>
        style="background-color: #dedef8;box-shadow:
+
<li>
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
+
<a href="#">简介</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+
</li>
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+
<li class="disabled">
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
+
<a href="#">信息</a>
            nisi ut aliquip ex ea commodo consequat.
+
</li>
        </p>
+
<li class="dropdown pull-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
            eiusmod tempor incididunt ut.
+
<ul class="dropdown-menu">
        </p>
+
<li>
      </div>
+
<a href="#">操作</a>
 
+
</li>
      <div class="clearfix visible-xs"></div>
+
<li>
 
+
<a href="#">设置栏目</a>
      <div class="col-xs-6 col-sm-3"  
+
</li>
        style="background-color: #dedef8;
+
<li>
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
+
<a href="#">更多设置</a>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
+
</li>
            laboris nisi ut aliquip ex ea commodo consequat.  
+
<li class="divider">
        </p>
+
</li>
      </div>
+
<li>
      <div class="col-xs-6 col-sm-3"  
+
<a href="#">分割线</a>
        style="background-color: #dedef8;box-shadow:
+
</li>
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
+
</ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+
</li>
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+
</ul>
            enim ad minim
+
</div>
        </p>
+
</div>
      </div>
+
<div class="row clearfix">
  </div>
+
<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-6 column">
 +
<img alt="140x140" src="v3/default3.jpg" />
 +
</div>
 +
<div class="col-md-6 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-6 column">
 +
<img alt="140x140" src="v3/default3.jpg" />
 +
</div>
 +
<div class="col-md-6 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-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="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="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="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="v3/default3.jpg" />
 +
</div>
 +
<div class="col-md-4 column">
 +
<img alt="140x140" src="v3/default3.jpg" />
 +
</div>
 +
<div class="col-md-4 column">
 +
<img alt="140x140" src="v3/default3.jpg" />
 +
</div>
 +
</div>
 
</div>
 
</div>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 08:03, 31 July 2017

NPU-China

Bootstrap 实例 - 响应式的列重置

Heading

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.

View details »

140x140

Heading

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.

View details »

140x140

Heading

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.

View details »

Heading

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.

View details »

140x140

Heading

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.

View details »

140x140

Heading

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.

View details »

140x140

Heading

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.

View details »

140x140
140x140
140x140