git.roojs.org Git - bootswatch/blob - swatchmaker/test/test.html

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