Additional Bootstrap Features

Pricing table example

[row]

Silver

POPULAR

  • 10 users
  • Unlimited access
  • 3TB of space
  • E-mail support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$15.99 / month


Select plan

Bronze

POPULAR

  • 20 users
  • Unlimited access with no limits
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$10.99 / month


Select plan

Economy

BUDGET

  • 10 users
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$8.99 / month


Select plan

[/row]

[collapse title=”Get HTML Code” collapseid=”bootstrap01″]

<div class="span3">
	<div class="well">
		<h2 class="muted">Silver</h2>
		<p><span class="label">POPULAR</span></p>
		<ul>
			<li>10 users</li>
			<li>Unlimited access</li>
			<li>3TB of space</li>
			<li>E-mail support</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$15.99 / month</h3>
		<hr>
		<p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>
<div class="span3">
	<div class="well">
		<h2 class="text-warning">Bronze</h2>
		<p><span class="label label-success">POPULAR</span></p>
		<ul>
			<li>20 users</li>
			<li>Unlimited access with no limits</li>
			<li>5TB of space</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$10.99 / month</h3>
		<hr>
		<p><a class="btn btn-success btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>
<div class="span3">
	<div class="well">
		<h2 class="text-info">Economy</h2>
		<p><span class="label label-info">BUDGET</span></p>
		<ul>
			<li>10 users</li>
			<li>5TB of space</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$8.99 / month</h3>
		<hr>
      <p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>

[/collapse]


[margin_50t]

Tables

Default styles
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

[collapse title=”Get HTML Code” collapseid=”bootstrap02″]

<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

[/collapse]

With zebra-striping
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

[collapse title=”Get HTML Code” collapseid=”bootstrap03″]

<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

[/collapse]

With borders and rounded corners
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter

[collapse title=”Get HTML Code” collapseid=”bootstrap04″]

<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

[/collapse]

Enable a hover state on table rows
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

[collapse title=”Get HTML Code” collapseid=”bootstrap05″]

<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

[/collapse]

Color table rows
#ProductPayment TakenStatus
1TB – Monthly01/04/2012Approved
2TB – Monthly02/04/2012Declined
3TB – Monthly03/04/2012Pending
4TB – Monthly04/04/2012Call in to confirm

[collapse title=”Get HTML Code” collapseid=”bootstrap06″]

<table class="table">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>

[/collapse]

Condensed table example
UsernameDate registeredRoleStatus
Donna R. Folse2012/05/06Editor Active
Emily F. Burns2011/12/01Staff Banned
Andrew A. Stout2010/08/21User Inactive
Mary M. Bryan2009/04/11Editor Pending
Mary A. Lewis2007/02/01Staff Active

[collapse title=”Get HTML Code” collapseid=”bootstrap07″]

<div class="span5">
<table class="table table-striped table-condensed">
	  <thead>
      <tr>
          <th>Username</th>
          <th>Date registered</th>
          <th>Role</th>
          <th>Status</th>                                          
      </tr>
  </thead>   
  <tbody>
    <tr>
        <td>Donna R. Folse</td>
        <td class="center">2012/05/06</td>
        <td class="center">Editor</td>
        <td class="center">
            <span class="label label-success">Active</span>
        </td>                                       
    </tr>
    <tr>
        <td>Emily F. Burns</td>
        <td class="center">2011/12/01</td>
        <td class="center">Staff</td>
        <td class="center">
            <span class="label label-important">Banned</span>
        </td>                                       
    </tr>
    <tr>
        <td>Andrew A. Stout</td>
        <td class="center">2010/08/21</td>
        <td class="center">User</td>
        <td class="center">
            <span class="label">Inactive</span>
        </td>                                        
    </tr>
    <tr>
        <td>Mary M. Bryan</td>
        <td class="center">2009/04/11</td>
        <td class="center">Editor</td>
        <td class="center">
            <span class="label label-warning">Pending</span>
        </td>                                       
    </tr>
    <tr>
        <td>Mary A. Lewis</td>
        <td class="center">2007/02/01</td>
        <td class="center">Staff</td>
        <td class="center">
            <span class="label label-success">Active</span>
        </td>                                        
    </tr>                                   
  </tbody>
</table>
</div>

[/collapse]

[margin_50t]

Stats example

[row]

Vital Stats 1268
  • 36% Clicks 167

  • 52% Uniquie Clicks 77

  • 93% Impressions 157

  • 5% Online Users 8

[/row]

[collapse title=”Get HTML Code” collapseid=”bootstrap08″]

<div class="span4">
	<h4>Vital Stats  <span class="label label-success pull-right">1268</span></h4>
	<ul class="unstyled">
	    <li>
	        36% Clicks <span class="pull-right strong">167</span>
	        <div class="progress progress-striped ">
	            <div class="bar" style="width: 36%;"></div>
	        </div>
	    </li>
	    <li>52% Uniquie Clicks <span class="pull-right strong">77</span>
	        <div class="progress progress-success progress-striped ">
	            <div class="bar" style="width: 52%;"></div>
	        </div>
	    </li>
	    <li>93% Impressions <span class="pull-right strong">157</span>
	        <div class="progress progress-warning progress-striped ">
	            <div class="bar" style="width: 93%;"></div>
	        </div>
	    </li>
	    <li>5% Online Users <span class="pull-right strong">8</span>
	        <div class="progress progress-danger progress-striped ">
	            <div class="bar" style="width: 5%;"></div>
	        </div>
	    </li>
	</ul>
</div>

[/collapse]

[margin_50t]

Togglable tabs

[row]

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

[/row]

[collapse title=”Get HTML Code” collapseid=”bootstrap09″]

<div class="tabbable">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab1" data-toggle="tab">Section</a></li>
              <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
              <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <p class="last">Donec venenatis blandit consequat. Vivamus placerat condimentum ligula, adipiscing luctus dolor adipiscing non. Suspendisse dictum porta lorem, ac iaculis nisl porttitor at.</p>
              </div><!-- tab-pane -->
              <div class="tab-pane" id="tab2">
                <ul class="nav nav-list">
          		  <li class="nav-header">List header</li>
          		  <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
          		  <li><a href="#"><i class="icon-book"></i> Library</a></li>
          		  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
          		  <li class="nav-header">Another list header</li>
          		  <li><a href="#"><i class="icon-user"></i> Profile</a></li>
          		  <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
          		  <li class="divider"></li>
          		  <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        		</ul>
              </div><!-- tab-pane -->
              <div class="tab-pane" id="tab3">
                <ul class="tags clearfix">
      	    	  <li><a href="#">quote</a></li>
	        	  <li><a href="#">copyright</a></li>
	        	  <li><a href="#">brand</a></li>
	        	  <li><a href="#">tag</a></li>
	        	  <li><a href="#">design</a></li>
	        	  <li><a href="#">graphics</a></li>
	        	  <li><a href="#">battle</a></li>
	        	  <li><a href="#">envato</a></li>
		  		</ul>
              </div><!-- tab-pane -->
            </div><!-- tab-content -->
          </div><!-- tabbable -->

[/collapse]

Lascia un commento