Katniss v1.0

Today is Tuesday, Dec 25, 2012 5:30pm
Using 16.8 GB of your 51.7 GB
38% full
Hi, ThemePixels!
  •  

Bootstrap Components

This is a sample description for dashboard page...

Dropdown Menu View Source

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Action</a></li>
       ...
       <li class="divider"></li>
       ...
</ul>

Single Button Group View Source

<div class="btn-group">
       <button class="btn">1</button>
       <button class="btn">2</button>
       <button class="btn">3</button>
    </div>
<div class="btn-toolbar">
       <div class="btn-group"> ... </div>
       <div class="btn-group"> ... </div>
    </div>
<div class="btn-group btn-group-vertical"> ... </div>

Basic Tabs View Source

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">...</a></li>
   ...
</ul>

Basic Pills View Source

<ul class="nav nav-pills">
   ...
</ul>

Stacked Tabs View Source

<ul class="nav nav-tabs nav-stacked">
   ...
</ul>

Stacked Pills View Source

<ul class="nav nav-pills nav-stacked">
   ...
</ul>

Tabbable In Any Direction View Source

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-below"><!--remove tabs-below for top-->
  <div class="tab-content">
    <div id="A" class="tab-pane"> ... </div>
    ...
  </div>
  <ul class="nav nav-tabs">
    <li class=""><a data-toggle="tab" href="#A">Section 1</a></li>
    ...
  </ul>
</div>
<div class="tabbable tabs-right"><!-- change tabs-left for left-->
  <ul class="nav nav-tabs">
    <li class=""><a data-toggle="tab" href="#A">Section 1</a></li>
    ...
  </ul>
  <div class="tab-content">
    <div id="A" class="tab-pane"> ... </div>
    ...
  </div>
</div>

Pagination View Source

<div class="pagination">
  <ul>
    <li class="disabled"><a>Previous</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    ...
  </ul>
</div>
<div class="pagination pagination-large">
  <ul> ... </ul>
</div>
<div class="pagination pagination-mini">
  <ul> ... </ul>
</div>
<div class="pagination pagination-centered">
  <ul> ... </ul>
</div>
<div class="pagination pagination-right">
  <ul> ... </ul>
</div>

Pager View Source

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
<ul class="pager">
  <li class="previous"><a href="#"><span>&larr;</span> Older</a></li>
  <li class="next"><a href="#">Newer <span>&rarr;</span></a></li>
</ul>
<ul class="pager">
  <li class="previous disabled"><a href="#"><span>&larr;</span> Older</a></li>
  <li class="next"><a href="#">Newer <span>&rarr;</span></a></li>
</ul>

Progress Bars View Source

<div class="progress">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped">
<div class="progress progress-striped active">
<div class="progress progress-info">
<div class="progress progress-success">
<div class="progress progress-warning progress-striped">
<div class="progress progress-danger progress-striped active">

Button Dropdowns

 
class="btn"
 
class="btn btn-primary"
 
class="btn btn-danger"
 
class="btn btn-warning"
 
class="btn btn-success"
 
class="btn btn-info"
 
class="btn btn-inverse"
 
class="btn"

Nav List View Source

<ul class="nav nav-list">
   <li class="nav-header">List Header</li>
   <li class="active"><a href="#">Home</a></li>
   ...
</ul>

Basic Navbar View Source

Title 
<div class="navbar">
  <div class="navbar-inner">
    <a href="#" class="brand">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown"> ... </li>
    </ul>
  </div>
</div>
<div class="navbar">
  <div class="navbar-inner">
    <form class="navbar-search pull-left">
      <input type="text" class="search-query">
    </form>
  </div>
</div>
<form class="navbar-form pull-right">
  <input type="text" class="span2">
  <button class="btn" type="submit">Submit</button>
</form>

Inversed Navbar View Source

Title 
<div class="navbar navbar-inverse">
  ...
</div>

Breadcrumbs View Source

  • Home
<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li class="active">Library</li>
</ul>

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Modal Window View Source

Launch demo modal 
<a href="#myModal" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal">
   <div class="modal-header">
      <button aria-hidden="true" data-dismiss="modal" class="close">×</button>
      <h3>Modal header</h3>
   </div>
   <div class="modal-body">
      ...
   </div>
   <div class="modal-footer">
      <a class="btn" href="#">Close</a>
      <a class="btn btn-primary" href="#">Save changes</a>
   </div>
</div>

Tooltip

Popover

Katniss Premium Admin Template v1.0
© ThemePixels - Follow me on Twitter - Follow me on Dribbble