git.roojs.org Git - bootswatch/blob - amelia/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Bootswatch: Amelia</title>
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta name="description" content="Sweet and cheery.">
   8     <meta name="author" content="Thomas Park">
   9
  10     <!--[if lt IE 9]>
  11       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  12     <![endif]-->
  13
  14     <link href="bootstrap.min.css" rel="stylesheet">
  15     <link href="../default/bootstrap-responsive.min.css" rel="stylesheet">
  16     <link href="../css/font-awesome.min.css" rel="stylesheet">
  17     <link href="../css/bootswatch.css" rel="stylesheet">
  18
  19          <script type="text/javascript">
  20
  21            var _gaq = _gaq || [];
  22                   _gaq.push(['_setAccount', 'UA-23019901-1']);
  23                   _gaq.push(['_setDomainName', "bootswatch.com"]);
  24                   _gaq.push(['_setAllowLinker', true]);
  25                   _gaq.push(['_trackPageview']);
  26
  27            (function() {
  28              var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  29              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  30              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  31            })();
  32
  33          </script>
  34
  35   </head>
  36
  37   <body class="preview" id="top" data-spy="scroll" data-target=".subnav" data-offset="80">
  38     <!-- <script src="../js/bsa.js"></script> -->
  39
  40
  41   <!-- Navbar
  42     ================================================== -->
  43  <div class="navbar navbar-fixed-top">
  44    <div class="navbar-inner">
  45      <div class="container">
  46        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  47          <span class="icon-bar"></span>
  48          <span class="icon-bar"></span>
  49          <span class="icon-bar"></span>
  50        </a>
  51        <a class="brand" href="../">Bootswatch</a>
  52        <div class="nav-collapse collapse" id="main-menu">
  53         <ul class="nav" id="main-menu-left">
  54           <li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com">News</a></li>
  55           <li><a id="swatch-link" href="../#gallery">Gallery</a></li>
  56           <li class="dropdown">
  57             <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
  58             <ul class="dropdown-menu" id="swatch-menu">
  59               <li><a href="../default">Default</a></li>
  60               <li class="divider"></li>
  61               <li><a href="../amelia">Amelia</a></li>
  62               <li><a href="../cerulean">Cerulean</a></li>
  63               <li><a href="../cosmo">Cosmo</a></li>
  64               <li><a href="../cyborg">Cyborg</a></li>
  65               <li><a href="../journal">Journal</a></li>
  66               <li><a href="../readable">Readable</a></li>
  67               <li><a href="../simplex">Simplex</a></li>
  68               <li><a href="../slate">Slate</a></li>
  69               <li><a href="../spacelab">Spacelab</a></li>
  70               <li><a href="../spruce">Spruce</a></li>
  71               <li><a href="../superhero">Superhero</a></li>
  72               <li><a href="../united">United</a></li>
  73             </ul>
  74           </li>
  75           <li class="dropdown" id="preview-menu">
  76             <a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a>
  77             <ul class="dropdown-menu">
  78               <li><a target="_blank" href="bootstrap.min.css">bootstrap.min.css</a></li>
  79               <li><a target="_blank" href="bootstrap.css">bootstrap.css</a></li>
  80               <li class="divider"></li>
  81               <li><a target="_blank" href="variables.less">variables.less</a></li>
  82               <li><a target="_blank" href="bootswatch.less">bootswatch.less</a></li>
  83             </ul>
  84           </li>
  85         </ul>
  86         <ul class="nav pull-right" id="main-menu-right">
  87           <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="Showcase of Bootstrap sites &amp; apps" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'builtwithbootstrap']);">Built With Bootstrap <i class="icon-share-alt"></i></a></li>
  88           <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap']);">WrapBootstrap <i class="icon-share-alt"></i></a></li>
  89         </ul>
  90        </div>
  91      </div>
  92    </div>
  93  </div>
  94
  95     <div class="container">
  96
  97
  98 <!-- Masthead
  99 ================================================== -->
 100 <header class="jumbotron subhead" id="overview">
 101   <div class="row">
 102     <div class="span6">
 103       <h1>Amelia</h1>
 104       <p class="lead">Sweet and cheery.</p>
 105     </div>
 106     <div class="span4 offset2">
 107 <!--       <div class="bsa well">
 108           <div id="bsap_1277971" class="bsarocks bsap_c466df00a3cd5ee8568b5c4983b6bb19"></div>
 109       </div> -->
 110       <div class="well" style="padding: 15px 15px 0 15px;">
 111         <a href="http://carboncostume.com" target="_blank">
 112           <span style="float: left; margin: 0 15px 15px 0;">
 113             <img src="../img/carboncostume.png" width="175" height="135" style="border-radius: 5px;">
 114           </span>
 115         </a>
 116         <a href="http://carboncostume.com" target="_blank">
 117           <h4 style="margin-bottom: 0.4em; color: #fff;">Carbon Costume</h4>
 118           <span style="display: block; margin-bottom: 1em; color: #fff;">DIY costumes using everyday gear.</span>
 119         </a>
 120         <div style="clear:both"></div>
 121       </div>
 122     </div>
 123   </div>
 124   <div class="subnav">
 125     <ul class="nav nav-pills">
 126       <li><a href="#typography">Typography</a></li>
 127       <li><a href="#navbar">Navbar</a></li>
 128       <li><a href="#buttons">Buttons</a></li>
 129       <li><a href="#forms">Forms</a></li>
 130       <li><a href="#tables">Tables</a></li>
 131       <li><a href="#miscellaneous">Miscellaneous</a></li>
 132     </ul>
 133   </div>
 134 </header>
 135
 136
 137
 138
 139 <!-- Typography
 140 ================================================== -->
 141 <section id="typography">
 142   <div class="page-header">
 143     <h1>Typography</h1>
 144   </div>
 145
 146   <!-- Headings & Paragraph Copy -->
 147   <div class="row">
 148
 149     <div class="span4">
 150       <div class="well">
 151         <h1>h1. Heading 1</h1>
 152         <h2>h2. Heading 2</h2>
 153         <h3>h3. Heading 3</h3>
 154         <h4>h4. Heading 4</h4>
 155         <h5>h5. Heading 5</h5>
 156         <h6>h6. Heading 6</h6>
 157       </div>
 158     </div>
 159
 160     <div class="span4">
 161       <h3>Example body text</h3>
 162       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 163       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
 164     </div>
 165
 166     <div class="span4">
 167       <h3>Example addresses</h3>
 168       <address>
 169         <strong>Twitter, Inc.</strong><br>
 170         795 Folsom Ave, Suite 600<br>
 171         San Francisco, CA 94107<br>
 172         <abbr title="Phone">P:</abbr> (123) 456-7890
 173       </address>
 174       <address>
 175         <strong>Full Name</strong><br>
 176         <a href="mailto:#">first.last@gmail.com</a>
 177       </address>
 178     </div>
 179
 180   </div>
 181
 182   <div class="row">
 183     <div class="span6">
 184       <blockquote>
 185         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 186         <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 187       </blockquote>
 188     </div>
 189     <div class="span6">
 190       <blockquote class="pull-right">
 191         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 192         <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 193       </blockquote>
 194     </div>
 195   </div>
 196
 197 </section>
 198
 199
 200 <!-- Navbar
 201 ================================================== -->
 202 <section id="navbar">
 203   <div class="page-header">
 204     <h1>Navbars</h1>
 205   </div>
 206   <div class="navbar">
 207     <div class="navbar-inner">
 208       <div class="container" style="width: auto;">
 209         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 210           <span class="icon-bar"></span>
 211           <span class="icon-bar"></span>
 212           <span class="icon-bar"></span>
 213         </a>
 214         <a class="brand" href="#">Project name</a>
 215         <div class="nav-collapse">
 216           <ul class="nav">
 217             <li class="active"><a href="#">Home</a></li>
 218             <li><a href="#">Link</a></li>
 219             <li><a href="#">Link</a></li>
 220             <li><a href="#">Link</a></li>
 221             <li class="dropdown">
 222               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 223               <ul class="dropdown-menu">
 224                 <li><a href="#">Action</a></li>
 225                 <li><a href="#">Another action</a></li>
 226                 <li><a href="#">Something else here</a></li>
 227                 <li class="divider"></li>
 228                 <li><a href="#">Separated link</a></li>
 229               </ul>
 230             </li>
 231           </ul>
 232           <form class="navbar-search pull-left" action="">
 233             <input type="text" class="search-query span2" placeholder="Search">
 234           </form>
 235           <ul class="nav pull-right">
 236             <li><a href="#">Link</a></li>
 237             <li class="divider-vertical"></li>
 238             <li class="dropdown">
 239               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 240               <ul class="dropdown-menu">
 241                 <li><a href="#">Action</a></li>
 242                 <li><a href="#">Another action</a></li>
 243                 <li><a href="#">Something else here</a></li>
 244                 <li class="divider"></li>
 245                 <li><a href="#">Separated link</a></li>
 246               </ul>
 247             </li>
 248           </ul>
 249         </div><!-- /.nav-collapse -->
 250       </div>
 251     </div><!-- /navbar-inner -->
 252   </div><!-- /navbar -->
 253
 254   <div class="navbar navbar-inverse">
 255     <div class="navbar-inner">
 256       <div class="container" style="width: auto;">
 257         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 258           <span class="icon-bar"></span>
 259           <span class="icon-bar"></span>
 260           <span class="icon-bar"></span>
 261         </a>
 262         <a class="brand" href="#">Project name</a>
 263         <div class="nav-collapse">
 264           <ul class="nav">
 265             <li class="active"><a href="#">Home</a></li>
 266             <li><a href="#">Link</a></li>
 267             <li><a href="#">Link</a></li>
 268             <li><a href="#">Link</a></li>
 269             <li class="dropdown">
 270               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 271               <ul class="dropdown-menu">
 272                 <li><a href="#">Action</a></li>
 273                 <li><a href="#">Another action</a></li>
 274                 <li><a href="#">Something else here</a></li>
 275                 <li class="divider"></li>
 276                 <li><a href="#">Separated link</a></li>
 277               </ul>
 278             </li>
 279           </ul>
 280           <form class="navbar-search pull-left" action="">
 281             <input type="text" class="search-query span2" placeholder="Search">
 282           </form>
 283           <ul class="nav pull-right">
 284             <li><a href="#">Link</a></li>
 285             <li class="divider-vertical"></li>
 286             <li class="dropdown">
 287               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 288               <ul class="dropdown-menu">
 289                 <li><a href="#">Action</a></li>
 290                 <li><a href="#">Another action</a></li>
 291                 <li><a href="#">Something else here</a></li>
 292                 <li class="divider"></li>
 293                 <li><a href="#">Separated link</a></li>
 294               </ul>
 295             </li>
 296           </ul>
 297         </div><!-- /.nav-collapse -->
 298       </div>
 299     </div><!-- /navbar-inner -->
 300   </div><!-- /navbar -->
 301
 302 </section>
 303
 304
 305
 306 <!-- Buttons
 307 ================================================== -->
 308 <section id="buttons">
 309   <div class="page-header">
 310     <h1>Buttons</h1>
 311   </div>
 312   <table class="table table-bordered table-striped">
 313     <thead>
 314       <tr>
 315         <th>Button</th>
 316         <th>Large Button</th>
 317         <th>Small Button</th>
 318         <th>Disabled Button</th>
 319                 <th>Button with Icon</th>
 320                 <th>Split Button</th>
 321       </tr>
 322     </thead>
 323     <tbody>
 324       <tr>
 325         <td><a class="btn" href="#">Default</a></td>
 326         <td><a class="btn btn-large" href="#">Default</a></td>
 327         <td><a class="btn btn-small" href="#">Default</a></td>
 328         <td><a class="btn disabled" href="#">Default</a></td>
 329         <td><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
 330                 <td>
 331                 <div class="btn-group">
 332                   <a class="btn" href="#">Default</a>
 333                   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 334                   <ul class="dropdown-menu">
 335                     <li><a href="#">Action</a></li>
 336                     <li><a href="#">Another action</a></li>
 337                     <li><a href="#">Something else here</a></li>
 338                     <li class="divider"></li>
 339                     <li><a href="#">Separated link</a></li>
 340                   </ul>
 341                 </div><!-- /btn-group -->
 342                 </td>
 343       </tr>
 344       <tr>
 345         <td><a class="btn btn-primary" href="#">Primary</a></td>
 346         <td><a class="btn btn-primary btn-large" href="#">Primary</a></td>
 347         <td><a class="btn btn-primary btn-small" href="#">Primary</a></td>
 348         <td><a class="btn btn-primary disabled" href="#">Primary</a></td>
 349         <td><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
 350                 <td>
 351                 <div class="btn-group">
 352                   <a class="btn btn-primary" href="#">Primary</a>
 353                   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 354                   <ul class="dropdown-menu">
 355                     <li><a href="#">Action</a></li>
 356                     <li><a href="#">Another action</a></li>
 357                     <li><a href="#">Something else here</a></li>
 358                     <li class="divider"></li>
 359                     <li><a href="#">Separated link</a></li>
 360                   </ul>
 361                 </div><!-- /btn-group -->
 362                 </td>
 363       </tr>
 364       <tr>
 365         <td><a class="btn btn-info" href="#">Info</a></td>
 366         <td><a class="btn btn-info btn-large" href="#">Info</a></td>
 367         <td><a class="btn btn-info btn-small" href="#">Info</a></td>
 368         <td><a class="btn btn-info disabled" href="#">Info</a></td>
 369         <td><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
 370                 <td>
 371                 <div class="btn-group">
 372                   <a class="btn btn-info" href="#">Info</a>
 373                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 374                   <ul class="dropdown-menu">
 375                     <li><a href="#">Action</a></li>
 376                     <li><a href="#">Another action</a></li>
 377                     <li><a href="#">Something else here</a></li>
 378                     <li class="divider"></li>
 379                     <li><a href="#">Separated link</a></li>
 380                   </ul>
 381                 </div><!-- /btn-group -->
 382                 </td>
 383       </tr>
 384       <tr>
 385         <td><a class="btn btn-success" href="#">Success</a></td>
 386         <td><a class="btn btn-success btn-large" href="#">Success</a></td>
 387         <td><a class="btn btn-success btn-small" href="#">Success</a></td>
 388         <td><a class="btn btn-success disabled" href="#">Success</a></td>
 389         <td><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
 390                 <td>
 391                 <div class="btn-group">
 392                   <a class="btn btn-success" href="#">Success</a>
 393                   <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 394                   <ul class="dropdown-menu">
 395                     <li><a href="#">Action</a></li>
 396                     <li><a href="#">Another action</a></li>
 397                     <li><a href="#">Something else here</a></li>
 398                     <li class="divider"></li>
 399                     <li><a href="#">Separated link</a></li>
 400                   </ul>
 401                 </div><!-- /btn-group -->
 402                 </td>
 403       </tr>
 404       <tr>
 405         <td><a class="btn btn-warning" href="#">Warning</a></td>
 406         <td><a class="btn btn-warning btn-large" href="#">Warning</a></td>
 407         <td><a class="btn btn-warning btn-small" href="#">Warning</a></td>
 408         <td><a class="btn btn-warning disabled" href="#">Warning</a></td>
 409         <td><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
 410                 <td>
 411                 <div class="btn-group">
 412                   <a class="btn btn-warning" href="#">Warning</a>
 413                   <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 414                   <ul class="dropdown-menu">
 415                     <li><a href="#">Action</a></li>
 416                     <li><a href="#">Another action</a></li>
 417                     <li><a href="#">Something else here</a></li>
 418                     <li class="divider"></li>
 419                     <li><a href="#">Separated link</a></li>
 420                   </ul>
 421                 </div><!-- /btn-group -->
 422                 </td>
 423       </tr>
 424       <tr>
 425         <td><a class="btn btn-danger" href="#">Danger</a></td>
 426         <td><a class="btn btn-danger btn-large" href="#">Danger</a></td>
 427         <td><a class="btn btn-danger btn-small" href="#">Danger</a></td>
 428         <td><a class="btn btn-danger disabled" href="#">Danger</a></td>
 429         <td><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
 430                 <td>
 431                 <div class="btn-group">
 432                   <a class="btn btn-danger" href="#">Danger</a>
 433                   <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 434                   <ul class="dropdown-menu">
 435                     <li><a href="#">Action</a></li>
 436                     <li><a href="#">Another action</a></li>
 437                     <li><a href="#">Something else here</a></li>
 438                     <li class="divider"></li>
 439                     <li><a href="#">Separated link</a></li>
 440                   </ul>
 441                 </div><!-- /btn-group -->
 442                 </td>
 443       </tr>
 444       <tr>
 445         <td><a class="btn btn-inverse" href="#">Inverse</a></td>
 446         <td><a class="btn btn-inverse btn-large" href="#">Inverse</a></td>
 447         <td><a class="btn btn-inverse btn-small" href="#">Inverse</a></td>
 448         <td><a class="btn btn-inverse disabled" href="#">Inverse</a></td>
 449         <td><a class="btn btn-inverse" href="#"><i class="icon-random icon-white"></i> Inverse</a></td>
 450                 <td>
 451                 <div class="btn-group">
 452                   <a class="btn btn-inverse" href="#">Inverse</a>
 453                   <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 454                   <ul class="dropdown-menu">
 455                     <li><a href="#">Action</a></li>
 456                     <li><a href="#">Another action</a></li>
 457                     <li><a href="#">Something else here</a></li>
 458                     <li class="divider"></li>
 459                     <li><a href="#">Separated link</a></li>
 460                   </ul>
 461                 </div><!-- /btn-group -->
 462                 </td>
 463       </tr>
 464     </tbody>
 465   </table>
 466
 467 </section>
 468
 469
 470 <!-- Forms
 471 ================================================== -->
 472 <section id="forms">
 473   <div class="page-header">
 474     <h1>Forms</h1>
 475   </div>
 476
 477   <div class="row">
 478     <div class="span10 offset1">
 479
 480             <form class="well form-search">
 481               <input type="text" class="input-medium search-query">
 482               <button type="submit" class="btn">Search</button>
 483             </form>
 484
 485         <form class="well form-search">
 486           <input type="text" class="input-small" placeholder="Email">
 487           <input type="password" class="input-small" placeholder="Password">
 488           <button type="submit" class="btn">Go</button>
 489         </form>
 490
 491
 492       <form class="form-horizontal well">
 493         <fieldset>
 494           <legend>Controls Bootstrap supports</legend>
 495           <div class="control-group">
 496             <label class="control-label" for="input01">Text input</label>
 497             <div class="controls">
 498               <input type="text" class="input-xlarge" id="input01">
 499               <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
 500             </div>
 501           </div>
 502           <div class="control-group">
 503             <label class="control-label" for="optionsCheckbox">Checkbox</label>
 504             <div class="controls">
 505               <label class="checkbox">
 506                 <input type="checkbox" id="optionsCheckbox" value="option1">
 507                 Option one is this and that&mdash;be sure to include why it's great
 508               </label>
 509             </div>
 510           </div>
 511           <div class="control-group">
 512             <label class="control-label" for="select01">Select list</label>
 513             <div class="controls">
 514               <select id="select01">
 515                 <option>something</option>
 516                 <option>2</option>
 517                 <option>3</option>
 518                 <option>4</option>
 519                 <option>5</option>
 520               </select>
 521             </div>
 522           </div>
 523           <div class="control-group">
 524             <label class="control-label" for="multiSelect">Multicon-select</label>
 525             <div class="controls">
 526               <select multiple="multiple" id="multiSelect">
 527                 <option>1</option>
 528                 <option>2</option>
 529                 <option>3</option>
 530                 <option>4</option>
 531                 <option>5</option>
 532               </select>
 533             </div>
 534           </div>
 535           <div class="control-group">
 536             <label class="control-label" for="fileInput">File input</label>
 537             <div class="controls">
 538               <input class="input-file" id="fileInput" type="file">
 539             </div>
 540           </div>
 541           <div class="control-group">
 542             <label class="control-label" for="textarea">Textarea</label>
 543             <div class="controls">
 544               <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
 545             </div>
 546           </div>
 547           <div class="control-group">
 548             <label class="control-label" for="focusedInput">Focused input</label>
 549             <div class="controls">
 550               <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
 551             </div>
 552           </div>
 553           <div class="control-group">
 554             <label class="control-label">Uneditable input</label>
 555             <div class="controls">
 556               <span class="input-xlarge uneditable-input">Some value here</span>
 557             </div>
 558           </div>
 559           <div class="control-group">
 560             <label class="control-label" for="disabledInput">Disabled input</label>
 561             <div class="controls">
 562               <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
 563             </div>
 564           </div>
 565           <div class="control-group">
 566             <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
 567             <div class="controls">
 568               <label class="checkbox">
 569                 <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
 570                 This is a disabled checkbox
 571               </label>
 572             </div>
 573           </div>
 574           <div class="control-group warning">
 575             <label class="control-label" for="inputWarning">Input with warning</label>
 576             <div class="controls">
 577               <input type="text" id="inputWarning">
 578               <span class="help-inline">Something may have gone wrong</span>
 579             </div>
 580           </div>
 581           <div class="control-group error">
 582             <label class="control-label" for="inputError">Input with error</label>
 583             <div class="controls">
 584               <input type="text" id="inputError">
 585               <span class="help-inline">Please correct the error</span>
 586             </div>
 587           </div>
 588           <div class="control-group success">
 589             <label class="control-label" for="inputSuccess">Input with success</label>
 590             <div class="controls">
 591               <input type="text" id="inputSuccess">
 592               <span class="help-inline">Woohoo!</span>
 593             </div>
 594           </div>
 595           <div class="control-group info">
 596             <label class="control-label" for="selectError">Select with info</label>
 597             <div class="controls">
 598               <select id="selectError">
 599                 <option>1</option>
 600                 <option>2</option>
 601                 <option>3</option>
 602                 <option>4</option>
 603                 <option>5</option>
 604               </select>
 605               <span class="help-inline">Woohoo!</span>
 606             </div>
 607           </div>
 608           <div class="form-actions">
 609             <button type="submit" class="btn btn-primary">Save changes</button>
 610             <button type="reset" class="btn">Cancel</button>
 611           </div>
 612         </fieldset>
 613       </form>
 614     </div>
 615   </div>
 616
 617 </section>
 618
 619 <!-- Tables
 620 ================================================== -->
 621 <section id="tables">
 622   <div class="page-header">
 623     <h1>Tables</h1>
 624   </div>
 625
 626   <table class="table table-bordered table-striped table-hover">
 627     <thead>
 628       <tr>
 629         <th>#</th>
 630         <th>First Name</th>
 631         <th>Last Name</th>
 632         <th>Username</th>
 633       </tr>
 634     </thead>
 635     <tbody>
 636       <tr>
 637         <td>1</td>
 638         <td>Mark</td>
 639         <td>Otto</td>
 640         <td>@mdo</td>
 641       </tr>
 642       <tr>
 643         <td>2</td>
 644         <td>Jacob</td>
 645         <td>Thornton</td>
 646         <td>@fat</td>
 647       </tr>
 648       <tr>
 649         <td>3</td>
 650         <td>Larry</td>
 651         <td>the Bird</td>
 652         <td>@twitter</td>
 653       </tr>
 654     </tbody>
 655   </table>
 656 </section>
 657
 658
 659 <!-- Miscellaneous
 660 ================================================== -->
 661 <section id="miscellaneous">
 662   <div class="page-header">
 663     <h1>Miscellaneous</h1>
 664   </div>
 665
 666   <div class="row">
 667     <div class="span4">
 668
 669       <h3 id="breadcrumbs">Breadcrumbs</h3>
 670       <ul class="breadcrumb">
 671         <li class="active">Home</li>
 672       </ul>
 673       <ul class="breadcrumb">
 674         <li><a href="#">Home</a> <span class="divider">/</span></li>
 675         <li><a href="#">Library</a> <span class="divider">/</span></li>
 676         <li class="active">Data</li>
 677       </ul>
 678     </div>
 679     <div class="span4">
 680       <h3 id="pagination">Pagination</h3>
 681       <div class="pagination">
 682         <ul>
 683           <li><a href="#">&larr;</a></li>
 684           <li class="active"><a href="#">10</a></li>
 685           <li class="disabled"><a href="#">...</a></li>
 686           <li><a href="#">20</a></li>
 687           <li><a href="#">&rarr;</a></li>
 688         </ul>
 689       </div>
 690       <div class="pagination pagination-centered">
 691         <ul>
 692           <li class="active"><a href="#">1</a></li>
 693           <li><a href="#">2</a></li>
 694           <li><a href="#">3</a></li>
 695           <li><a href="#">4</a></li>
 696           <li><a href="#">5</a></li>
 697         </ul>
 698       </div>
 699     </div>
 700
 701     <div class="span4">
 702       <h3 id="pager">Pagers</h3>
 703
 704         <ul class="pager">
 705           <li><a href="#">Previous</a></li>
 706           <li><a href="#">Next</a></li>
 707         </ul>
 708
 709         <ul class="pager">
 710           <li class="previous disabled"><a href="#">&larr; Older</a></li>
 711           <li class="next"><a href="#">Newer &rarr;</a></li>
 712         </ul>
 713     </div>
 714   </div>
 715
 716
 717   <!-- Navs
 718   ================================================== -->
 719
 720   <div class="row">
 721     <div class="span4">
 722
 723       <h3 id="tabs">Tabs</h3>
 724       <ul class="nav nav-tabs">
 725         <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
 726         <li><a href="#B" data-toggle="tab">Section 2</a></li>
 727         <li><a href="#C" data-toggle="tab">Section 3</a></li>
 728       </ul>
 729       <div class="tabbable">
 730         <div class="tab-content">
 731           <div class="tab-pane active" id="A">
 732             <p>I'm in Section A.</p>
 733           </div>
 734           <div class="tab-pane" id="B">
 735             <p>Howdy, I'm in Section B.</p>
 736           </div>
 737           <div class="tab-pane" id="C">
 738             <p>What up girl, this is Section C.</p>
 739           </div>
 740         </div>
 741       </div> <!-- /tabbable -->
 742
 743     </div>
 744     <div class="span4">
 745       <h3 id="pills">Pills</h3>
 746       <ul class="nav nav-pills">
 747         <li class="active"><a href="#">Home</a></li>
 748         <li><a href="#">Profile</a></li>
 749         <li class="dropdown">
 750           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
 751           <ul class="dropdown-menu">
 752             <li><a href="#">Action</a></li>
 753             <li><a href="#">Another action</a></li>
 754             <li><a href="#">Something else here</a></li>
 755             <li class="divider"></li>
 756             <li><a href="#">Separated link</a></li>
 757           </ul>
 758         </li>
 759         <li class="disabled"><a href="#">Disabled link</a></li>
 760       </ul>
 761     </div>
 762
 763     <div class="span4">
 764
 765       <h3 id="list">Lists</h3>
 766
 767       <div class="well" style="padding: 8px 0;">
 768         <ul class="nav nav-list">
 769           <li class="nav-header">List header</li>
 770           <li class="active"><a href="#">Home</a></li>
 771           <li><a href="#">Library</a></li>
 772           <li><a href="#">Applications</a></li>
 773           <li class="nav-header">Another list header</li>
 774           <li><a href="#">Profile</a></li>
 775           <li><a href="#">Settings</a></li>
 776           <li class="divider"></li>
 777           <li><a href="#">Help</a></li>
 778         </ul>
 779       </div>
 780     </div>
 781   </div>
 782
 783
 784 <!-- Labels
 785 ================================================== -->
 786
 787   <div class="row">
 788     <div class="span6">
 789       <h3 id="labels">Labels</h3>
 790       <span class="label">Default</span>
 791       <span class="label label-success">Success</span>
 792       <span class="label label-warning">Warning</span>
 793       <span class="label label-important">Important</span>
 794       <span class="label label-info">Info</span>
 795       <span class="label label-inverse">Inverse</span>
 796     </div>
 797     <div class="span6">
 798       <h3 id="badges">Badges</h3>
 799       <span class="badge">Default</span>
 800       <span class="badge badge-success">Success</span>
 801       <span class="badge badge-warning">Warning</span>
 802       <span class="badge badge-important">Important</span>
 803       <span class="badge badge-info">Info</span>
 804       <span class="badge badge-inverse">Inverse</span>
 805     </div>
 806   </div>
 807         <br />
 808
 809 <!-- Progress bars
 810 ================================================== -->
 811
 812
 813   <h3 id="progressbars">Progress bars</h3>
 814
 815   <div class="row">
 816     <div class="span4">
 817       <div class="progress">
 818         <div class="bar" style="width: 60%;"></div>
 819       </div>
 820     </div>
 821     <div class="span4">
 822       <div class="progress progress-info progress-striped">
 823         <div class="bar" style="width: 20%;"></div>
 824       </div>
 825     </div>
 826     <div class="span4">
 827       <div class="progress progress-danger progress-striped active">
 828         <div class="bar" style="width: 45%"></div>
 829       </div>
 830     </div>
 831   </div>
 832         <br />
 833
 834
 835 <!-- Alerts & Messages
 836 ================================================== -->
 837
 838
 839   <h3 id="alerts">Alerts</h3>
 840
 841   <div class="row">
 842           <div class="span12">
 843               <div class="alert alert-block">
 844                 <a class="close">&times;</a>
 845                 <h4 class="alert-heading">Alert block</h4>
 846                 <p>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.</p>
 847               </div>
 848           </div>
 849   </div>
 850   <div class="row">
 851     <div class="span4">
 852       <div class="alert alert-error">
 853         <a class="close">&times;</a>
 854         <strong>Error</strong> Change a few things up and try submitting again.
 855       </div>
 856     </div>
 857     <div class="span4">
 858       <div class="alert alert-success">
 859         <a class="close">&times;</a>
 860         <strong>Success</strong> You successfully read this important alert message.
 861       </div>
 862     </div>
 863     <div class="span4">
 864       <div class="alert alert-info">
 865         <a class="close">&times;</a>
 866         <strong>Information</strong> This alert needs your attention, but it's not super important.
 867       </div>
 868     </div>
 869   </div>
 870
 871
 872 </section>
 873
 874 <br><br><br><br>
 875
 876      <!-- Footer
 877       ================================================== -->
 878       <hr>
 879
 880       <footer id="footer">
 881         <p class="pull-right"><a href="#top">Back to top</a></p>
 882         <div class="links">
 883           <a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Blog</a>
 884           <a href="http://feeds.feedburner.com/bootswatch">RSS</a>
 885           <a href="https://twitter.com/thomashpark">Twitter</a>
 886           <a href="https://github.com/thomaspark/bootswatch/">GitHub</a>
 887           <a rel="tooltip" href="javascript:(function(e,a,g,h,f,c,b,d)%7Bif(!(f%3De.jQuery)%7C%7Cg%3Ef.fn.jquery%7C%7Ch(f))%7Bc%3Da.createElement(%22script%22)%3Bc.type%3D%22text/javascript%22%3Bc.src%3D%22http://ajax.googleapis.com/ajax/libs/jquery/%22%2Bg%2B%22/jquery.min.js%22%3Bc.onload%3Dc.onreadystatechange%3Dfunction()%7Bif(!b%26%26(!(d%3Dthis.readyState)%7C%7Cd%3D%3D%22loaded%22%7C%7Cd%3D%3D%22complete%22))%7Bh((f%3De.jQuery).noConflict(1),b%3D1)%3Bf(c).remove()%7D%7D%3Ba.documentElement.childNodes%5B0%5D.appendChild(c)%7D%7D)(window,document,%221.3.2%22,function(%24,L)%7Bif(%24(%22.bootswatcher%22)%5B0%5D)%7B%24(%22.bootswatcher%22).remove()%7Delse%7Bvar%20%24e%3D%24(%27%3Cselect%20class%3D%22bootswatcher%22%3E%3Coption%3EAmelia%3C/option%3E%3Coption%3ECerulean%3C/option%3E%3Coption%3ECosmo%3C/option%3E%3Coption%3ECyborg%3C/option%3E%3Coption%3EJournal%3C/option%3E%3Coption%3EReadable%3C/option%3E%3Coption%3ESimplex%3C/option%3E%3Coption%3ESlate%3C/option%3E%3Coption%3ESpacelab%3C/option%3E%3Coption%3ESpruce%3C/option%3E%3Coption%3ESuperhero%3C/option%3E%3Coption%3EUnited%3C/option%3E%3C/select%3E%27)%3Bvar%20l%3D1%2BMath.floor(Math.random()*%24e.children().length)%3B%24e.css(%7B%22z-index%22:%2299999%22,position:%22fixed%22,top:%225px%22,right:%225px%22,opacity:%220.5%22%7D).hover(function()%7B%24(this).css(%22opacity%22,%221%22)%7D,function()%7B%24(this).css(%22opacity%22,%220.5%22)%7D).change(function()%7Bif(!%24(%22link.bootswatcher%22)%5B0%5D)%7B%24(%22head%22).append(%27%3Clink%20rel%3D%22stylesheet%22%20class%3D%22bootswatcher%22%3E%27)%7D%24(%22link.bootswatcher%22).attr(%22href%22,%22http://bootswatch.com/%22%2B%24(this).find(%22:selected%22).text().toLowerCase()%2B%22/bootstrap.min.css%22)%7D).find(%22option:nth-child(%22%2Bl%2B%22)%22).attr(%22selected%22,%22selected%22).end().trigger(%22change%22)%3B%24(%22body%22).append(%24e)%7D%3B%7D)%3B" title="Drag to your bookmarks bar">Bookmarklet</a>
 888           <a href="https://github.com/thomaspark/bootswatch/tree/gh-pages/swatchmaker">Swatchmaker</a>
 889           <a href="http://news.bootswatch.com/post/22193315172/bootswatch-api">API</a>
 890           <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=F22JEM3Q78JC2">Donate</a>
 891         </div>
 892         Made by <a href="http://thomaspark.me">Thomas Park</a>. Contact him <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.<br/>
 893         Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.<br/>
 894         Based on <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Hosted on <a href="http://pages.github.com/">GitHub</a>. Icons from <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts">Google</a>. Favicon by <a href="https://twitter.com/geraldhiller">Gerald Hiller</a>.</p>
 895       </footer>
 896
 897     </div><!-- /container -->
 898
 899
 900
 901     <!-- Le javascript
 902     ================================================== -->
 903     <!-- Placed at the end of the document so the pages load faster -->
 904     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 905     <script src="../js/jquery.smooth-scroll.min.js"></script>
 906     <script src="../js/bootstrap.min.js"></script>
 907     <script src="../js/bootswatch.js"></script>
 908
 909
 910   </body>
 911 </html>