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</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     <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  11     <!--[if lt IE 9]>
  12       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  13     <![endif]-->
  14
  15     <!-- Le styles -->
  16     <link href="../swatch/bootstrap.min.css" rel="stylesheet">
  17     <link href="../bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
  18     <link href="../bootstrap/docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
  19     <link href="docs.css" rel="stylesheet">
  20   </head>
  21
  22   <body data-spy="scroll" data-target=".subnav" data-offset="50">
  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="./test.html">Bootswatch</a>
  36        <div class="nav-collapse">
  37          <ul class="nav">
  38            <li class="">
  39              <a href="test-full.html">News</a>
  40            </li>
  41            <li class="">
  42              <a href="test-full.html">Gallery</a>
  43            </li>
  44                <li class="dropdown active">
  45                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
  46                  <ul class="dropdown-menu">
  47                    <li><a href="../default">Default</a></li>
  48                    <li class="divider"></li>
  49                    <li><a href="../cerulean">Cerulean</a></li>
  50                    <li><a href="../cyborg">Cyborg</a></li>
  51                    <li><a href="../journal">Journal</a></li>
  52                    <li><a href="../simplex">Simplex</a></li>
  53                    <li><a href="../spacelab">Spacelab</a></li>
  54                    <li><a href="../united">United</a></li>
  55                  </ul>
  56                </li>
  57          <li class="dropdown">
  58            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a>
  59            <ul class="dropdown-menu">
  60              <li><a href="../default">Default</a></li>
  61            </ul>
  62          </li>
  63          </ul>
  64
  65          <ul class="nav pull-right" id="main-menu-right">
  66           <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" data-original-title="Showcase of Bootstrap sites &amp; apps">Built With Bootstrap <i class="icon-share-alt icon-white"></i></a></li>
  67           <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" data-original-title="Marketplace for premium Bootstrap templates">WrapBootstrap <i class="icon-share-alt icon-white"></i></a></li>
  68          </ul>
  69        </div>
  70      </div>
  71    </div>
  72  </div>
  73
  74     <div class="container">
  75
  76
  77 <!-- Masthead
  78 ================================================== -->
  79 <header class="jumbotron subhead" id="overview">
  80   <h1>Swatch</h1>
  81   <p class="lead">A preview of changes in this swatch.</p>
  82   <div class="subnav">
  83     <ul class="nav nav-pills">
  84       <li><a href="#typography">Typography</a></li>
  85       <li><a href="#navbar">Navbar</a></li>
  86       <li><a href="#buttons">Buttons</a></li>
  87       <li><a href="#forms">Forms</a></li>
  88       <li><a href="#miscellaneous">Miscellaneous</a></li>
  89     </ul>
  90   </div>
  91 </header>
  92
  93
  94
  95
  96 <!-- Typography
  97 ================================================== -->
  98 <section id="typography">
  99   <div class="page-header">
 100     <h1>Typography</h1>
 101   </div>
 102
 103   <!-- Headings & Paragraph Copy -->
 104   <div class="row">
 105
 106     <div class="span4">
 107       <div class="well">
 108         <h1>h1. Heading 1</h1>
 109         <h2>h2. Heading 2</h2>
 110         <h3>h3. Heading 3</h3>
 111         <h4>h4. Heading 4</h4>
 112         <h5>h5. Heading 5</h5>
 113         <h6>h6. Heading 6</h6>
 114       </div>
 115     </div>
 116
 117     <div class="span4">
 118       <h3>Example body text</h3>
 119       <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>
 120       <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>
 121     </div>
 122
 123     <div class="span4">
 124       <h3>Example addresses</h3>
 125       <address>
 126         <strong>Twitter, Inc.</strong><br>
 127         795 Folsom Ave, Suite 600<br>
 128         San Francisco, CA 94107<br>
 129         <abbr title="Phone">P:</abbr> (123) 456-7890
 130       </address>
 131       <address>
 132         <strong>Full Name</strong><br>
 133         <a href="mailto:#">first.last@gmail.com</a>
 134       </address>
 135     </div>
 136
 137   </div>
 138
 139 </section>
 140
 141
 142 <!-- Navbar
 143 ================================================== -->
 144 <section id="navbar">
 145   <div class="page-header">
 146     <h1>Navbars</h1>
 147   </div>
 148   <div class="navbar">
 149     <div class="navbar-inner">
 150       <div class="container" style="width: auto;">
 151         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 152           <span class="icon-bar"></span>
 153           <span class="icon-bar"></span>
 154           <span class="icon-bar"></span>
 155         </a>
 156         <a class="brand" href="#">Project name</a>
 157         <div class="nav-collapse">
 158           <ul class="nav">
 159             <li class="active"><a href="#">Home</a></li>
 160             <li><a href="#">Link</a></li>
 161             <li><a href="#">Link</a></li>
 162             <li><a href="#">Link</a></li>
 163             <li class="dropdown">
 164               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 165               <ul class="dropdown-menu">
 166                 <li><a href="#">Action</a></li>
 167                 <li><a href="#">Another action</a></li>
 168                 <li><a href="#">Something else here</a></li>
 169                 <li class="divider"></li>
 170                 <li><a href="#">Separated link</a></li>
 171               </ul>
 172             </li>
 173           </ul>
 174           <form class="navbar-search pull-left" action="">
 175             <input type="text" class="search-query span2" placeholder="Search">
 176           </form>
 177           <ul class="nav pull-right">
 178             <li><a href="#">Link</a></li>
 179             <li class="divider-vertical"></li>
 180             <li class="dropdown">
 181               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 182               <ul class="dropdown-menu">
 183                 <li><a href="#">Action</a></li>
 184                 <li><a href="#">Another action</a></li>
 185                 <li><a href="#">Something else here</a></li>
 186                 <li class="divider"></li>
 187                 <li><a href="#">Separated link</a></li>
 188               </ul>
 189             </li>
 190           </ul>
 191         </div><!-- /.nav-collapse -->
 192       </div>
 193     </div><!-- /navbar-inner -->
 194   </div><!-- /navbar -->
 195
 196   <div class="navbar navbar-inverse">
 197     <div class="navbar-inner">
 198       <div class="container" style="width: auto;">
 199         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 200           <span class="icon-bar"></span>
 201           <span class="icon-bar"></span>
 202           <span class="icon-bar"></span>
 203         </a>
 204         <a class="brand" href="#">Project name</a>
 205         <div class="nav-collapse">
 206           <ul class="nav">
 207             <li class="active"><a href="#">Home</a></li>
 208             <li><a href="#">Link</a></li>
 209             <li><a href="#">Link</a></li>
 210             <li><a href="#">Link</a></li>
 211             <li class="dropdown">
 212               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 213               <ul class="dropdown-menu">
 214                 <li><a href="#">Action</a></li>
 215                 <li><a href="#">Another action</a></li>
 216                 <li><a href="#">Something else here</a></li>
 217                 <li class="divider"></li>
 218                 <li><a href="#">Separated link</a></li>
 219               </ul>
 220             </li>
 221           </ul>
 222           <form class="navbar-search pull-left" action="">
 223             <input type="text" class="search-query span2" placeholder="Search">
 224           </form>
 225           <ul class="nav pull-right">
 226             <li><a href="#">Link</a></li>
 227             <li class="divider-vertical"></li>
 228             <li class="dropdown">
 229               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 230               <ul class="dropdown-menu">
 231                 <li><a href="#">Action</a></li>
 232                 <li><a href="#">Another action</a></li>
 233                 <li><a href="#">Something else here</a></li>
 234                 <li class="divider"></li>
 235                 <li><a href="#">Separated link</a></li>
 236               </ul>
 237             </li>
 238           </ul>
 239         </div><!-- /.nav-collapse -->
 240       </div>
 241     </div><!-- /navbar-inner -->
 242   </div><!-- /navbar -->
 243
 244 </section>
 245
 246
 247
 248 <!-- Buttons
 249 ================================================== -->
 250 <section id="buttons">
 251   <div class="page-header">
 252     <h1>Buttons</h1>
 253   </div>
 254   <table class="table table-bordered table-striped">
 255     <thead>
 256       <tr>
 257         <th>Button</th>
 258         <th>Large Button</th>
 259         <th>Small Button</th>
 260         <th>Disabled Button</th>
 261                 <th>Button with Icon</th>
 262                 <th>Split Button</th>
 263       </tr>
 264     </thead>
 265     <tbody>
 266       <tr>
 267         <td><a class="btn" href="#">Default</a></td>
 268         <td><a class="btn btn-large" href="#">Default</a></td>
 269         <td><a class="btn btn-small" href="#">Default</a></td>
 270         <td><a class="btn disabled" href="#">Default</a></td>
 271         <td><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
 272                 <td>
 273                 <div class="btn-group">
 274                   <a class="btn" href="#">Default</a>
 275                   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 276                   <ul class="dropdown-menu">
 277                     <li><a href="#">Action</a></li>
 278                     <li><a href="#">Another action</a></li>
 279                     <li><a href="#">Something else here</a></li>
 280                     <li class="divider"></li>
 281                     <li><a href="#">Separated link</a></li>
 282                   </ul>
 283                 </div><!-- /btn-group -->
 284                 </td>
 285       </tr>
 286       <tr>
 287         <td><a class="btn btn-primary" href="#">Primary</a></td>
 288         <td><a class="btn btn-primary btn-large" href="#">Primary</a></td>
 289         <td><a class="btn btn-primary btn-small" href="#">Primary</a></td>
 290         <td><a class="btn btn-primary disabled" href="#">Primary</a></td>
 291         <td><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
 292                 <td>
 293                 <div class="btn-group">
 294                   <a class="btn btn-primary" href="#">Primary</a>
 295                   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 296                   <ul class="dropdown-menu">
 297                     <li><a href="#">Action</a></li>
 298                     <li><a href="#">Another action</a></li>
 299                     <li><a href="#">Something else here</a></li>
 300                     <li class="divider"></li>
 301                     <li><a href="#">Separated link</a></li>
 302                   </ul>
 303                 </div><!-- /btn-group -->
 304                 </td>
 305       </tr>
 306       <tr>
 307         <td><a class="btn btn-info" href="#">Info</a></td>
 308         <td><a class="btn btn-info btn-large" href="#">Info</a></td>
 309         <td><a class="btn btn-info btn-mini" href="#">Info</a></td>
 310         <td><a class="btn btn-info disabled" href="#">Info</a></td>
 311         <td><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
 312                 <td>
 313                 <div class="btn-group">
 314                   <a class="btn btn-info" href="#">Info</a>
 315                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 316                   <ul class="dropdown-menu">
 317                     <li><a href="#">Action</a></li>
 318                     <li><a href="#">Another action</a></li>
 319                     <li><a href="#">Something else here</a></li>
 320                     <li class="divider"></li>
 321                     <li><a href="#">Separated link</a></li>
 322                   </ul>
 323                 </div><!-- /btn-group -->
 324                 </td>
 325       </tr>
 326       <tr>
 327         <td><a class="btn btn-success" href="#">Success</a></td>
 328         <td><a class="btn btn-success btn-large" href="#">Success</a></td>
 329         <td><a class="btn btn-success btn-mini" href="#">Micro</a></td>
 330         <td><a class="btn btn-success disabled" href="#">Success</a></td>
 331         <td><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
 332                 <td>
 333                 <div class="btn-group">
 334                   <a class="btn btn-success" href="#">Success</a>
 335                   <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 336                   <ul class="dropdown-menu">
 337                     <li><a href="#">Action</a></li>
 338                     <li><a href="#">Another action</a></li>
 339                     <li><a href="#">Something else here</a></li>
 340                     <li class="divider"></li>
 341                     <li><a href="#">Separated link</a></li>
 342                   </ul>
 343                 </div><!-- /btn-group -->
 344                 </td>
 345       </tr>
 346       <tr>
 347         <td><a class="btn btn-warning" href="#">Warning</a></td>
 348         <td><a class="btn btn-warning btn-large" href="#">Warning</a></td>
 349         <td><a class="btn btn-warning btn-mini" href="#">Micro</a></td>
 350         <td><a class="btn btn-warning disabled" href="#">Warning</a></td>
 351         <td><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
 352                 <td>
 353                 <div class="btn-group">
 354                   <a class="btn btn-warning" href="#">Warning</a>
 355                   <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 356                   <ul class="dropdown-menu">
 357                     <li><a href="#">Action</a></li>
 358                     <li><a href="#">Another action</a></li>
 359                     <li><a href="#">Something else here</a></li>
 360                     <li class="divider"></li>
 361                     <li><a href="#">Separated link</a></li>
 362                   </ul>
 363                 </div><!-- /btn-group -->
 364                 </td>
 365       </tr>
 366       <tr>
 367         <td><a class="btn btn-danger" href="#">Danger</a></td>
 368         <td><a class="btn btn-danger btn-large" href="#">Danger</a></td>
 369         <td><a class="btn btn-danger btn-mini" href="#">Micro</a></td>
 370         <td><a class="btn btn-danger disabled" href="#">Danger</a></td>
 371         <td><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
 372                 <td>
 373                 <div class="btn-group">
 374                   <a class="btn btn-danger" href="#">Danger</a>
 375                   <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 376                   <ul class="dropdown-menu">
 377                     <li><a href="#">Action</a></li>
 378                     <li><a href="#">Another action</a></li>
 379                     <li><a href="#">Something else here</a></li>
 380                     <li class="divider"></li>
 381                     <li><a href="#">Separated link</a></li>
 382                   </ul>
 383                 </div><!-- /btn-group -->
 384                 </td>
 385       </tr>
 386       <tr>
 387         <td><a class="btn btn-inverse" href="#">Inverse</a></td>
 388         <td><a class="btn btn-inverse btn-large" href="#">Inverse</a></td>
 389         <td><a class="btn btn-inverse btn-small" href="#">Inverse</a></td>
 390         <td><a class="btn btn-inverse disabled" href="#">Inverse</a></td>
 391         <td><a class="btn btn-inverse" href="#"><i class="icon-remove icon-white"></i> Inverse</a></td>
 392     <td>
 393           <div class="btn-group">
 394             <a class="btn btn-inverse" href="#">Inverse</a>
 395             <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 396             <ul class="dropdown-menu">
 397               <li><a href="#">Action</a></li>
 398               <li><a href="#">Another action</a></li>
 399               <li><a href="#">Something else here</a></li>
 400               <li class="divider"></li>
 401               <li><a href="#">Separated link</a></li>
 402             </ul>
 403           </div><!-- /btn-group -->
 404     </td>
 405       </tr>
 406     </tbody>
 407   </table>
 408
 409 </section>
 410
 411
 412 <!-- Forms
 413 ================================================== -->
 414 <section id="forms">
 415   <div class="page-header">
 416     <h1>Forms</h1>
 417   </div>
 418
 419   <div class="row">
 420     <div class="span7 offset1">
 421
 422             <form class="well form-search">
 423               <input type="text" class="input-medium search-query">
 424               <button type="submit" class="btn">Search</button>
 425             </form>
 426
 427         <form class="well form-search">
 428           <input type="text" class="input-small" placeholder="Email">
 429           <input type="password" class="input-small" placeholder="Password">
 430           <button type="submit" class="btn">Go</button>
 431         </form>
 432
 433
 434       <form class="form-horizontal well">
 435         <fieldset>
 436           <legend>Controls Bootstrap supports</legend>
 437           <div class="control-group">
 438             <label class="control-label" for="input01">Text input</label>
 439             <div class="controls">
 440               <input type="text" class="input-xlarge" id="input01">
 441               <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
 442             </div>
 443           </div>
 444           <div class="control-group">
 445             <label class="control-label" for="optionsCheckbox">Checkbox</label>
 446             <div class="controls">
 447               <label class="checkbox">
 448                 <input type="checkbox" id="optionsCheckbox" value="option1">
 449                 Option one is this and that&mdash;be sure to include why it's great
 450               </label>
 451             </div>
 452           </div>
 453           <div class="control-group">
 454             <label class="control-label" for="select01">Select list</label>
 455             <div class="controls">
 456               <select id="select01">
 457                 <option>something</option>
 458                 <option>2</option>
 459                 <option>3</option>
 460                 <option>4</option>
 461                 <option>5</option>
 462               </select>
 463             </div>
 464           </div>
 465           <div class="control-group">
 466             <label class="control-label" for="multiSelect">Multicon-select</label>
 467             <div class="controls">
 468               <select multiple="multiple" id="multiSelect">
 469                 <option>1</option>
 470                 <option>2</option>
 471                 <option>3</option>
 472                 <option>4</option>
 473                 <option>5</option>
 474               </select>
 475             </div>
 476           </div>
 477           <div class="control-group">
 478             <label class="control-label" for="fileInput">File input</label>
 479             <div class="controls">
 480               <input class="input-file" id="fileInput" type="file">
 481             </div>
 482           </div>
 483           <div class="control-group">
 484             <label class="control-label" for="textarea">Textarea</label>
 485             <div class="controls">
 486               <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
 487             </div>
 488           </div>
 489           <div class="control-group">
 490             <label class="control-label" for="focusedInput">Focused input</label>
 491             <div class="controls">
 492               <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
 493             </div>
 494           </div>
 495           <div class="control-group">
 496             <label class="control-label">Uneditable input</label>
 497             <div class="controls">
 498               <span class="input-xlarge uneditable-input">Some value here</span>
 499             </div>
 500           </div>
 501           <div class="control-group">
 502             <label class="control-label" for="disabledInput">Disabled input</label>
 503             <div class="controls">
 504               <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
 505             </div>
 506           </div>
 507           <div class="control-group">
 508             <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
 509             <div class="controls">
 510               <label class="checkbox">
 511                 <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
 512                 This is a disabled checkbox
 513               </label>
 514             </div>
 515           </div>
 516           <div class="control-group warning">
 517             <label class="control-label" for="inputWarning">Input with warning</label>
 518             <div class="controls">
 519               <input type="text" id="inputWarning">
 520               <span class="help-inline">Something may have gone wrong</span>
 521             </div>
 522           </div>
 523           <div class="control-group error">
 524             <label class="control-label" for="inputError">Input with error</label>
 525             <div class="controls">
 526               <input type="text" id="inputError">
 527               <span class="help-inline">Please correct the error</span>
 528             </div>
 529           </div>
 530           <div class="control-group success">
 531             <label class="control-label" for="inputSuccess">Input with success</label>
 532             <div class="controls">
 533               <input type="text" id="inputSuccess">
 534               <span class="help-inline">Woohoo!</span>
 535             </div>
 536           </div>
 537           <div class="control-group success">
 538             <label class="control-label" for="selectError">Select with success</label>
 539             <div class="controls">
 540               <select id="selectError">
 541                 <option>1</option>
 542                 <option>2</option>
 543                 <option>3</option>
 544                 <option>4</option>
 545                 <option>5</option>
 546               </select>
 547               <span class="help-inline">Woohoo!</span>
 548             </div>
 549           </div>
 550           <div class="form-actions">
 551             <button type="submit" class="btn btn-primary">Save changes</button>
 552             <button type="reset" class="btn">Cancel</button>
 553           </div>
 554         </fieldset>
 555       </form>
 556     </div>
 557   </div>
 558
 559 </section>
 560
 561
 562 <!-- Miscellaneous
 563 ================================================== -->
 564 <section id="miscellaneous">
 565   <div class="page-header">
 566     <h1>Miscellaneous</h1>
 567   </div>
 568
 569   <div class="row">
 570     <div class="span5">
 571
 572       <h3 id="breadcrumbs">Breadcrumbs</h3>
 573       <ul class="breadcrumb">
 574         <li class="active">Home</li>
 575       </ul>
 576       <ul class="breadcrumb">
 577         <li><a href="#">Home</a> <span class="divider">/</span></li>
 578         <li class="active">Library</li>
 579       </ul>
 580       <ul class="breadcrumb">
 581         <li><a href="#">Home</a> <span class="divider">/</span></li>
 582         <li><a href="#">Library</a> <span class="divider">/</span></li>
 583         <li class="active">Data</li>
 584       </ul>
 585     </div>
 586     <div class="span6 offset1">
 587       <h3 id="pagination">Pagination</h3>
 588       <div class="pagination">
 589         <ul>
 590           <li class="disabled"><a href="#">&laquo;</a></li>
 591           <li class="active"><a href="#">1</a></li>
 592           <li><a href="#">2</a></li>
 593           <li><a href="#">3</a></li>
 594           <li><a href="#">4</a></li>
 595           <li><a href="#">&raquo;</a></li>
 596         </ul>
 597       </div>
 598       <div class="pagination">
 599         <ul>
 600           <li><a href="#">&larr;</a></li>
 601           <li class="active"><a href="#">10</a></li>
 602           <li class="disabled"><a href="#">...</a></li>
 603           <li><a href="#">20</a></li>
 604           <li><a href="#">&rarr;</a></li>
 605         </ul>
 606       </div>
 607       <div class="pagination pagination-centered">
 608         <ul>
 609           <li class="active"><a href="#">1</a></li>
 610           <li><a href="#">2</a></li>
 611           <li><a href="#">3</a></li>
 612           <li><a href="#">4</a></li>
 613           <li><a href="#">5</a></li>
 614         </ul>
 615       </div>
 616     </div>
 617   </div>
 618
 619
 620
 621 <!-- Labels
 622 ================================================== -->
 623
 624   <div class="row">
 625     <div class="span12">
 626
 627       <h3 id="labels">Labels</h3>
 628
 629
 630       <span class="label">Default</span>
 631       <span class="label label-success">Success</span>
 632           <span class="label label-warning">Warning</span>
 633           <span class="label label-important">Important</span>
 634           <span class="label label-info">Info</span>
 635
 636         </div>
 637   </div>
 638         <br />
 639
 640 <!-- Progress bars
 641 ================================================== -->
 642
 643
 644   <h3 id="progressbars">Progress bars</h3>
 645
 646   <div class="row">
 647     <div class="span4">
 648       <div class="progress">
 649         <div class="bar" style="width: 60%;"></div>
 650       </div>
 651     </div>
 652     <div class="span4">
 653       <div class="progress progress-info progress-striped">
 654         <div class="bar" style="width: 20%;"></div>
 655       </div>
 656     </div>
 657     <div class="span4">
 658       <div class="progress progress-danger progress-striped active">
 659         <div class="bar" style="width: 45%"></div>
 660       </div>
 661     </div>
 662   </div>
 663         <br />
 664
 665
 666 <!-- Alerts & Messages
 667 ================================================== -->
 668
 669
 670   <h3 id="alerts">Alerts</h3>
 671
 672   <div class="row">
 673           <div class="span12">
 674               <div class="alert alert-block">
 675                 <a class="close">&times;</a>
 676                 <h4 class="alert-heading">Alert block</h4>
 677                 <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>
 678               </div>
 679           </div>
 680   </div>
 681   <div class="row">
 682     <div class="span4">
 683       <div class="alert alert-error">
 684         <a class="close">&times;</a>
 685         <strong>Error</strong> Change a few things up and try submitting again.
 686       </div>
 687     </div>
 688     <div class="span4">
 689       <div class="alert alert-success">
 690         <a class="close">&times;</a>
 691         <strong>Success</strong> You successfully read this important alert message.
 692       </div>
 693     </div>
 694     <div class="span4">
 695       <div class="alert alert-info">
 696         <a class="close">&times;</a>
 697         <strong>Information</strong> This alert needs your attention, but it's not super important.
 698       </div>
 699     </div>
 700   </div>
 701
 702
 703 </section>
 704
 705 <br><br><br><br>
 706
 707      <!-- Footer
 708       ================================================== -->
 709       <footer class="footer">
 710         <p class="pull-right"><a href="#">Back to top</a></p>
 711       </footer>
 712
 713     </div><!-- /container -->
 714
 715
 716
 717     <!-- Le javascript
 718     ================================================== -->
 719     <!-- Placed at the end of the document so the pages load faster -->
 720     <script src="../bootstrap/docs/assets/js/jquery.js"></script>
 721     <script src="../bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
 722     <script src="../bootstrap/docs/assets/js/bootstrap-transition.js"></script>
 723     <script src="../bootstrap/docs/assets/js/bootstrap-alert.js"></script>
 724     <script src="../bootstrap/docs/assets/js/bootstrap-modal.js"></script>
 725     <script src="../bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
 726     <script src="../bootstrap/docs/assets/js/bootstrap-scrollspy.js"></script>
 727     <script src="../bootstrap/docs/assets/js/bootstrap-tab.js"></script>
 728     <script src="../bootstrap/docs/assets/js/bootstrap-tooltip.js"></script>
 729     <script src="../bootstrap/docs/assets/js/bootstrap-popover.js"></script>
 730     <script src="../bootstrap/docs/assets/js/bootstrap-button.js"></script>
 731     <script src="../bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
 732     <script src="../bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
 733     <script src="../bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
 734     <script src="../bootstrap/docs/assets/js/bootstrap-affix.js"></script>
 735     <script src="application.js"></script>
 736
 737
 738   </body>
 739 </html>