bootstrap20180702-学习页面布局

效果：
[img]http://dl2.iteye.com/upload/attachment/0130/1832/e1d20544-a1e6-3065-8234-c9e769a2659e.png[/img]

结论:
1 div 设置span3 使用原有栅格化
2 左边导航栏 <ul class="nav nav-list">
3 右上边 hero-unit 快捷布局
4 右下边 <li class="span4"> 进一步拆分3块布局

核心代码

<div class="span3">
<div class="well" style="max-width: 340px; padding: 8px 0;">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div> <!-- /well -->
</div>

<div class="span9" >
<div class="hero-unit">
<h1>Heading</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>
<div class="row-fluid">
<ul>
<li class="span4">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<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>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</li>
<li class="span4">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<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>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</li>
<li class="span4">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<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>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</li>
</ul>
</div>

</div>