Twitter Bootstrap Framework

Posted: Aug 12th, 2013 | Author: Haeck Design Comments Off

Avedon is a Bootstrap WordPress Theme, meaning it’s based on the Twitter Bootstrap structure. While this code base gives you an overwhelming amount of possibilities, we’ll try to cover a few simple one’s here.

Getting started with Bootstrap…

Typography

H1-H6 heading obviously have their own style, but here are a few other useful typographic options…

This is a lead class

<span class="lead">This is a lead class</span>

This is small

<small>This is small</small>

This is a blockquote

<blockquote>This is a blockquote</blockquote>

Buttons

Buttons are as easy as adding the “btn” class along with whatever color style you want.

            

<button class="btn btn-default" type="button">Default</button><button class="btn btn-primary" type="button">Primary</button><button class="btn btn-success" type="button">Success</button><button class="btn btn-info" type="button">Info</button><button class="btn btn-warning" type="button">Warning</button><button class="btn btn-danger" type="button">Danger</button><button class="btn btn-link" type="button">Link</button>

Button Sizes

Button dropdowns work at any size: .btn-lg, .btn, .btn-sm or .btn-xs.

      

Alert Messages

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block"><button type="button" class="close" data-dismiss="alert">×</button><h4>Warning!</h4>Best check yo self, you're not...</div>

Information

Heads up! This alert needs your attention, but it’s not super important. 
<div class="alert alert-info">...</div>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I’m in a well! 
<div class="well">...</div>

Javascripts

Modals

Accordions

Collapsible Group Item #1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Collapsible Group Item #2

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Collapsible Group Item #3

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
Plus so much more…

Just checkout all the Bootstrap details at http://getbootstrap.com

TwitterGooglePlusFacebookPinterestFoursquareWordPress