查看“BootStrap Horizontal Info Boxes”的源代码

__NOTOC__
      <div class="col-md-4"> 
<div class="panel panel-lighter-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">lighter box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div> 
<div class="col-md-4"> 
<div class="panel panel-light-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">light Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div> 
</div>
 <div class="col-md-4"> 
<div class="panel panel-dark-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">dark Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>  
</div>  
<div class="col-md-4"> 
<div class="panel panel-darker-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">darker Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div>
<div class="col-md-4"> 
<div class="panel panel-neutral-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">neutral Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div>
<div class="col-md-4"> 
<div class="panel panel-info-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">info Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div>
<div class="col-md-4"> 
<div class="panel panel-warning-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">warning Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div>
<div class="col-md-4"> 
<div class="panel panel-danger-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">danger Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div>
<div class="col-md-4"> 
<div class="panel panel-success-white-border"> 
<div class="panel-heading"> <h3 class="panel-title">success Box</h3> </div> 
<div class="panel-body"> <p class="bs">Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p> 
<div class="btn btn-party"><i class="fa fa-info"></i> Read More</div> 
</div> 
</div>
</div>
<div class="tab-pane" id="application">
      <div class="bs-example">
      <p>Changing the colour of the box involves nothing more than replacing  the panel class. In the example below "panel-info-white-border" represents a blue info box, to change this to a colour of your choice, e.g. red use "panel-danger-white-border".</p>
      <p>Note that all 23 colours are available for panels/info boxes - see colour classes for more info.</p>
      <pre>
      <div class="col-md-4">
        <div class="panel panel-info-white-border">
          <div class="panel-heading">
            <h3 class="panel-title">info Box</h3>
          </div>
          <div class="panel-body">
            <p>Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui
            vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p>
            <div class="btn btn-party">[[Read More]]</div>
          </div>
        </div>
      </div>
</pre>
        </div>
        </div>