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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Twitter Bootstrap</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 styles -->
  11     <link href="../swatch/bootstrap.min.css" rel="stylesheet">
  12     <link href="../bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
  13     <link href="../bootstrap/docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
  14     <link href="bootswatch.css" rel="stylesheet">
  15     <style>
  16
  17     @media (min-width: 980px) {
  18
  19       body {
  20         padding-top: 80px;
  21       }
  22     }
  23
  24     section {
  25       margin-top: 80px;
  26     }
  27
  28     </style>
  29
  30     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  31     <!--[if lt IE 9]>
  32       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  33     <![endif]-->
  34
  35     <!-- Le fav and touch icons -->
  36     <link rel="shortcut icon" href="../bootstrap/docs/assets/ico/favicon.ico">
  37     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../bootstrap/docs/assets/ico/apple-touch-icon-144-precomposed.png">
  38     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../bootstrap/docs/assets/ico/apple-touch-icon-114-precomposed.png">
  39     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../bootstrap/docs/assets/ico/apple-touch-icon-72-precomposed.png">
  40     <link rel="apple-touch-icon-precomposed" href="../bootstrap/docs/assets/ico/apple-touch-icon-57-precomposed.png">
  41
  42   </head>
  43
  44   <body id="top" data-spy="scroll" data-target=".bs-docs-sidebar">
  45
  46     <!-- Navbar
  47     ================================================== -->
  48      <div class="navbar navbar-fixed-top">
  49        <div class="navbar-inner">
  50          <div class="container">
  51            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  52              <span class="icon-bar"></span>
  53              <span class="icon-bar"></span>
  54              <span class="icon-bar"></span>
  55            </a>
  56            <a class="brand" href="./test-full.html">Brand</a>
  57            <div class="nav-collapse">
  58              <ul class="nav">
  59                <li class="">
  60                  <a href="test.html">Nav</a>
  61                </li>
  62                <li class="divider-vertical"></li>
  63                <li class="active">
  64                  <a href="test.html">Active</a>
  65                </li>
  66                <li class="dropdown">
  67                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dd-Tog Active <b class="caret"></b></a>
  68                  <ul class="dropdown-menu">
  69                    <li><a href="test.html">Default</a></li>
  70                    <li class="divider"></li>
  71                    <li><a href="test.html">Cerulean</a></li>
  72                    <li><a href="test.html">Cyborg</a></li>
  73                    <li><a href=".test.html">Journal</a></li>
  74                    <li><a href="test.html">Simplex</a></li>
  75                    <li><a href="test.html">Spacelab</a></li>
  76                    <li><a href="test.html">United</a></li>
  77                  </ul>
  78                </li>
  79                <li class="">
  80                  <a data-toggle="modal" href="#myModal" ><i class="icon-plus"></i> Launch Modal</a>
  81                </li>
  82                <li class="navbar-text">
  83                   Just Text
  84                </li>
  85              </ul>
  86              <form class="navbar-search pull-right" action="/search" method="get">
  87                <input type="text" class="search-query" placeholder="Search..." id="search" name="q" value="">
  88              </form>
  89              <a class="btn btn-primary">Button</a>
  90            </div>
  91          </div>
  92        </div>
  93      </div>
  94
  95
  96 <!-- Subhead
  97 ================================================== -->
  98 <div class="container" id="overview">
  99   <div class="hero-unit">
 100     <h1>Components</h1>
 101     <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
 102   </div>
 103 </div>
 104
 105
 106   <div class="container">
 107
 108     <!-- Docs nav
 109     ================================================== -->
 110     <div class="row">
 111 <!--       <div class="span3 bs-docs-sidebar">
 112         <ul class="nav nav-list bs-docs-sidenav">
 113           <li><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li>
 114           <li><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li>
 115           <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li>
 116           <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li>
 117           <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li>
 118           <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li>
 119           <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li>
 120           <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li>
 121           <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
 122           <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li>
 123           <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li>
 124           <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li>
 125           <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li>
 126         </ul>
 127       </div> -->
 128       <div class="span12">
 129
 130           <!-- Typography
 131           ================================================== -->
 132           <section id="typography">
 133             <div class="page-header">
 134               <h1>Typography</h1>
 135             </div>
 136
 137             <div class="bs-docs-example">
 138               <h1>h1. Heading 1</h1>
 139               <h2>h2. Heading 2</h2>
 140               <h3>h3. Heading 3</h3>
 141               <h4>h4. Heading 4</h4>
 142               <h5>h5. Heading 5</h5>
 143               <h6>h6. Heading 6</h6>
 144             </div>
 145
 146             <div class="bs-docs-example">
 147               <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
 148
 149               <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.</p>
 150               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
 151               <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 152             </div>
 153
 154             <div class="bs-docs-example">
 155               <p><small>This line of text is meant to be treated as fine print.</small></p>
 156             </div>
 157
 158             <div class="bs-docs-example">
 159               <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
 160             </div>
 161
 162             <div class="bs-docs-example">
 163               <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
 164             </div>
 165
 166             <div class="bs-docs-example">
 167               <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
 168             </div>
 169
 170             <div class="bs-docs-example">
 171               <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
 172             </div>
 173
 174             <div class="bs-docs-example">
 175               <address>
 176                 <strong>Twitter, Inc.</strong><br>
 177                 795 Folsom Ave, Suite 600<br>
 178                 San Francisco, CA 94107<br>
 179                 <abbr title="Phone">P:</abbr> (123) 456-7890
 180               </address>
 181               <address>
 182                 <strong>Full Name</strong><br>
 183                 <a href="mailto:#">first.last@gmail.com</a>
 184               </address>
 185             </div>
 186
 187             <div class="bs-docs-example">
 188               <blockquote>
 189                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 190                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 191               </blockquote>
 192             </div>
 193
 194             <div class="bs-docs-example" style="overflow: hidden;">
 195               <blockquote class="pull-right">
 196                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 197                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 198               </blockquote>
 199             </div>
 200
 201             <div class="bs-docs-example">
 202               <ul>
 203                 <li>Lorem ipsum dolor sit amet</li>
 204                 <li>Consectetur adipiscing elit</li>
 205                 <li>Integer molestie lorem at massa</li>
 206                 <li>Facilisis in pretium nisl aliquet</li>
 207                 <li>Nulla volutpat aliquam velit
 208                   <ul>
 209                     <li>Phasellus iaculis neque</li>
 210                     <li>Purus sodales ultricies</li>
 211                     <li>Vestibulum laoreet porttitor sem</li>
 212                     <li>Ac tristique libero volutpat at</li>
 213                   </ul>
 214                 </li>
 215                 <li>Faucibus porta lacus fringilla vel</li>
 216                 <li>Aenean sit amet erat nunc</li>
 217                 <li>Eget porttitor lorem</li>
 218               </ul>
 219             </div>
 220
 221             <div class="bs-docs-example">
 222               <ol>
 223                 <li>Lorem ipsum dolor sit amet</li>
 224                 <li>Consectetur adipiscing elit</li>
 225                 <li>Integer molestie lorem at massa</li>
 226                 <li>Facilisis in pretium nisl aliquet</li>
 227                 <li>Nulla volutpat aliquam velit</li>
 228                 <li>Faucibus porta lacus fringilla vel</li>
 229                 <li>Aenean sit amet erat nunc</li>
 230                 <li>Eget porttitor lorem</li>
 231               </ol>
 232             </div>
 233
 234           <div class="bs-docs-example">
 235             <ul class="unstyled">
 236               <li>Lorem ipsum dolor sit amet</li>
 237               <li>Consectetur adipiscing elit</li>
 238               <li>Integer molestie lorem at massa</li>
 239               <li>Facilisis in pretium nisl aliquet</li>
 240               <li>Nulla volutpat aliquam velit
 241                 <ul>
 242                   <li>Phasellus iaculis neque</li>
 243                   <li>Purus sodales ultricies</li>
 244                   <li>Vestibulum laoreet porttitor sem</li>
 245                   <li>Ac tristique libero volutpat at</li>
 246                 </ul>
 247               </li>
 248               <li>Faucibus porta lacus fringilla vel</li>
 249               <li>Aenean sit amet erat nunc</li>
 250               <li>Eget porttitor lorem</li>
 251             </ul>
 252           </div>
 253
 254           <div class="bs-docs-example">
 255             <dl>
 256               <dt>Description lists</dt>
 257               <dd>A description list is perfect for defining terms.</dd>
 258               <dt>Euismod</dt>
 259               <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
 260               <dd>Donec id elit non mi porta gravida at eget metus.</dd>
 261               <dt>Malesuada porta</dt>
 262               <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
 263             </dl>
 264           </div>
 265
 266           <div class="bs-docs-example">
 267             <dl class="dl-horizontal">
 268               <dt>Description lists</dt>
 269               <dd>A description list is perfect for defining terms.</dd>
 270               <dt>Euismod</dt>
 271               <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
 272               <dd>Donec id elit non mi porta gravida at eget metus.</dd>
 273               <dt>Malesuada porta</dt>
 274               <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
 275               <dt>Felis euismod semper eget lacinia</dt>
 276               <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 277             </dl>
 278           </div>
 279
 280         </section>
 281
 282
 283
 284           <!-- Code
 285           ================================================== -->
 286           <section id="code">
 287             <div class="page-header">
 288               <h1>Code</h1>
 289             </div>
 290
 291             <div class="bs-docs-example">
 292               For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 293             </div>
 294
 295             <div class="bs-docs-example">
 296               <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 297             </div>
 298
 299           </section>
 300
 301
 302
 303           <!-- Tables
 304           ================================================== -->
 305           <section id="tables">
 306             <div class="page-header">
 307               <h1>Tables</h1>
 308             </div>
 309
 310             <div class="bs-docs-example">
 311               <table class="table">
 312                 <thead>
 313                   <tr>
 314                     <th>#</th>
 315                     <th>First Name</th>
 316                     <th>Last Name</th>
 317                     <th>Username</th>
 318                   </tr>
 319                 </thead>
 320                 <tbody>
 321                   <tr>
 322                     <td>1</td>
 323                     <td>Mark</td>
 324                     <td>Otto</td>
 325                     <td>@mdo</td>
 326                   </tr>
 327                   <tr>
 328                     <td>2</td>
 329                     <td>Jacob</td>
 330                     <td>Thornton</td>
 331                     <td>@fat</td>
 332                   </tr>
 333                   <tr>
 334                     <td>3</td>
 335                     <td>Larry</td>
 336                     <td>the Bird</td>
 337                     <td>@twitter</td>
 338                   </tr>
 339                 </tbody>
 340               </table>
 341             </div>
 342
 343             <div class="bs-docs-example">
 344               <table class="table table-striped">
 345                 <thead>
 346                   <tr>
 347                     <th>#</th>
 348                     <th>First Name</th>
 349                     <th>Last Name</th>
 350                     <th>Username</th>
 351                   </tr>
 352                 </thead>
 353                 <tbody>
 354                   <tr>
 355                     <td>1</td>
 356                     <td>Mark</td>
 357                     <td>Otto</td>
 358                     <td>@mdo</td>
 359                   </tr>
 360                   <tr>
 361                     <td>2</td>
 362                     <td>Jacob</td>
 363                     <td>Thornton</td>
 364                     <td>@fat</td>
 365                   </tr>
 366                   <tr>
 367                     <td>3</td>
 368                     <td>Larry</td>
 369                     <td>the Bird</td>
 370                     <td>@twitter</td>
 371                   </tr>
 372                 </tbody>
 373               </table>
 374             </div>
 375
 376             <div class="bs-docs-example">
 377               <table class="table table-bordered">
 378                 <thead>
 379                   <tr>
 380                     <th>#</th>
 381                     <th>First Name</th>
 382                     <th>Last Name</th>
 383                     <th>Username</th>
 384                   </tr>
 385                 </thead>
 386                 <tbody>
 387                   <tr>
 388                     <td rowspan="2">1</td>
 389                     <td>Mark</td>
 390                     <td>Otto</td>
 391                     <td>@mdo</td>
 392                   </tr>
 393                   <tr>
 394                     <td>Mark</td>
 395                     <td>Otto</td>
 396                     <td>@TwBootstrap</td>
 397                   </tr>
 398                   <tr>
 399                     <td>2</td>
 400                     <td>Jacob</td>
 401                     <td>Thornton</td>
 402                     <td>@fat</td>
 403                   </tr>
 404                   <tr>
 405                     <td>3</td>
 406                     <td colspan="2">Larry the Bird</td>
 407                     <td>@twitter</td>
 408                   </tr>
 409                 </tbody>
 410               </table>
 411             </div>
 412
 413             <div class="bs-docs-example">
 414               <table class="table table-hover">
 415                 <thead>
 416                   <tr>
 417                     <th>#</th>
 418                     <th>First Name</th>
 419                     <th>Last Name</th>
 420                     <th>Username</th>
 421                   </tr>
 422                 </thead>
 423                 <tbody>
 424                   <tr>
 425                     <td>1</td>
 426                     <td>Mark</td>
 427                     <td>Otto</td>
 428                     <td>@mdo</td>
 429                   </tr>
 430                   <tr>
 431                     <td>2</td>
 432                     <td>Jacob</td>
 433                     <td>Thornton</td>
 434                     <td>@fat</td>
 435                   </tr>
 436                   <tr>
 437                     <td>3</td>
 438                     <td colspan="2">Larry the Bird</td>
 439                     <td>@twitter</td>
 440                   </tr>
 441                 </tbody>
 442               </table>
 443             </div>
 444
 445             <div class="bs-docs-example">
 446               <table class="table table-condensed">
 447                 <thead>
 448                   <tr>
 449                     <th>#</th>
 450                     <th>First Name</th>
 451                     <th>Last Name</th>
 452                     <th>Username</th>
 453                   </tr>
 454                 </thead>
 455                 <tbody>
 456                   <tr>
 457                     <td>1</td>
 458                     <td>Mark</td>
 459                     <td>Otto</td>
 460                     <td>@mdo</td>
 461                   </tr>
 462                   <tr>
 463                     <td>2</td>
 464                     <td>Jacob</td>
 465                     <td>Thornton</td>
 466                     <td>@fat</td>
 467                   </tr>
 468                   <tr>
 469                     <td>3</td>
 470                     <td colspan="2">Larry the Bird</td>
 471                     <td>@twitter</td>
 472                   </tr>
 473                 </tbody>
 474               </table>
 475             </div>
 476
 477             <div class="bs-docs-example">
 478               <table class="table">
 479                 <thead>
 480                   <tr>
 481                     <th>#</th>
 482                     <th>Product</th>
 483                     <th>Payment Taken</th>
 484                     <th>Status</th>
 485                   </tr>
 486                 </thead>
 487                 <tbody>
 488                   <tr class="success">
 489                     <td>1</td>
 490                     <td>TB - Monthly</td>
 491                     <td>01/04/2012</td>
 492                     <td>Approved</td>
 493                   </tr>
 494                   <tr class="error">
 495                     <td>2</td>
 496                     <td>TB - Monthly</td>
 497                     <td>02/04/2012</td>
 498                     <td>Declined</td>
 499                   </tr>
 500                   <tr class="info">
 501                     <td>3</td>
 502                     <td>TB - Monthly</td>
 503                     <td>03/04/2012</td>
 504                     <td>Pending</td>
 505                   </tr>
 506                 </tbody>
 507               </table>
 508             </div>
 509
 510           </section>
 511
 512
 513
 514           <!-- Forms
 515           ================================================== -->
 516           <section id="forms">
 517             <div class="page-header">
 518               <h1>Forms</h1>
 519             </div>
 520
 521             <form class="bs-docs-example">
 522               <legend>Legend</legend>
 523               <label>Label name</label>
 524               <input type="text" placeholder="Type something…">
 525               <span class="help-block">Example block-level help text here.</span>
 526               <label class="checkbox">
 527                 <input type="checkbox"> Check me out
 528               </label>
 529               <button type="submit" class="btn">Submit</button>
 530             </form>
 531
 532             <form class="bs-docs-example form-search">
 533               <input type="text" class="input-medium search-query">
 534               <button type="submit" class="btn">Search</button>
 535             </form>
 536
 537             <form class="bs-docs-example form-inline">
 538               <input type="text" class="input-small" placeholder="Email">
 539               <input type="password" class="input-small" placeholder="Password">
 540               <label class="checkbox">
 541                 <input type="checkbox"> Remember me
 542               </label>
 543               <button type="submit" class="btn">Sign in</button>
 544             </form>
 545
 546             <form class="bs-docs-example form-horizontal">
 547               <legend>Legend</legend>
 548               <div class="control-group">
 549                 <label class="control-label" for="inputEmail">Email</label>
 550                 <div class="controls">
 551                   <input type="text" id="inputEmail" placeholder="Email">
 552                 </div>
 553               </div>
 554               <div class="control-group">
 555                 <label class="control-label" for="inputPassword">Password</label>
 556                 <div class="controls">
 557                   <input type="password" id="inputPassword" placeholder="Password">
 558                 </div>
 559               </div>
 560               <div class="control-group">
 561                 <div class="controls">
 562                   <label class="checkbox">
 563                     <input type="checkbox"> Remember me
 564                   </label>
 565                   <button type="submit" class="btn">Sign in</button>
 566                 </div>
 567               </div>
 568             </form>
 569
 570             <form class="bs-docs-example form-inline">
 571               <input type="text" placeholder="Text input">
 572             </form>
 573
 574             <form class="bs-docs-example form-inline">
 575               <textarea rows="3"></textarea>
 576             </form>
 577
 578             <form class="bs-docs-example">
 579               <label class="checkbox">
 580                 <input type="checkbox" value="">
 581                 Option one is this and that&mdash;be sure to include why it's great
 582               </label>
 583               <br>
 584               <label class="radio">
 585                 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 586                 Option one is this and that&mdash;be sure to include why it's great
 587               </label>
 588               <label class="radio">
 589                 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 590                 Option two can be something else and selecting it will deselect option one
 591               </label>
 592             </form>
 593
 594             <form class="bs-docs-example">
 595               <label class="checkbox inline">
 596                 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
 597               </label>
 598               <label class="checkbox inline">
 599                 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
 600               </label>
 601               <label class="checkbox inline">
 602                 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
 603               </label>
 604             </form>
 605
 606             <form class="bs-docs-example">
 607               <select>
 608                 <option>1</option>
 609                 <option>2</option>
 610                 <option>3</option>
 611                 <option>4</option>
 612                 <option>5</option>
 613               </select>
 614               <br>
 615               <select multiple="multiple">
 616                 <option>1</option>
 617                 <option>2</option>
 618                 <option>3</option>
 619                 <option>4</option>
 620                 <option>5</option>
 621               </select>
 622             </form>
 623
 624             <form class="bs-docs-example">
 625               <div class="input-prepend">
 626                 <span class="add-on">@</span>
 627                 <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
 628               </div>
 629               <br>
 630               <div class="input-append">
 631                 <input class="span2" id="appendedInput" size="16" type="text">
 632                 <span class="add-on">.00</span>
 633               </div>
 634             </form>
 635
 636             <form class="bs-docs-example form-inline">
 637               <div class="input-prepend input-append">
 638                 <span class="add-on">$</span>
 639                 <input class="span2" id="appendedPrependedInput" size="16" type="text">
 640                 <span class="add-on">.00</span>
 641               </div>
 642             </form>
 643
 644             <form class="bs-docs-example">
 645               <div class="input-append">
 646                 <input class="span2" id="appendedInputButton" size="16" type="text">
 647                 <button class="btn" type="button">Go!</button>
 648               </div>
 649               <br>
 650               <div class="input-append">
 651                 <input class="span2" id="appendedInputButtons" size="16" type="text">
 652                 <button class="btn" type="button">Search</button>
 653                 <button class="btn" type="button">Options</button>
 654               </div>
 655             </form>
 656
 657             <form class="bs-docs-example form-search">
 658               <div class="input-append">
 659                 <input type="text" class="span2 search-query">
 660                 <button type="submit" class="btn">Search</button>
 661               </div>
 662               <div class="input-prepend">
 663                 <button type="submit" class="btn">Search</button>
 664                 <input type="text" class="span2 search-query">
 665               </div>
 666             </form>
 667
 668             <form class="bs-docs-example" style="padding-bottom: 15px;">
 669               <div class="controls docs-input-sizes">
 670                 <input class="input-mini" type="text" placeholder=".input-mini">
 671                 <input class="input-small" type="text" placeholder=".input-small">
 672                 <input class="input-medium" type="text" placeholder=".input-medium">
 673                 <input class="input-large" type="text" placeholder=".input-large">
 674                 <input class="input-xlarge" type="text" placeholder=".input-xlarge">
 675                 <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
 676               </div>
 677             </form>
 678
 679             <form class="bs-docs-example" style="padding-bottom: 15px;">
 680               <div class="controls docs-input-sizes">
 681                 <input class="span1" type="text" placeholder=".span1">
 682                 <input class="span2" type="text" placeholder=".span2">
 683                 <input class="span3" type="text" placeholder=".span3">
 684                 <select class="span1">
 685                   <option>1</option>
 686                   <option>2</option>
 687                   <option>3</option>
 688                   <option>4</option>
 689                   <option>5</option>
 690                 </select>
 691                 <select class="span2">
 692                   <option>1</option>
 693                   <option>2</option>
 694                   <option>3</option>
 695                   <option>4</option>
 696                   <option>5</option>
 697                 </select>
 698                 <select class="span3">
 699                   <option>1</option>
 700                   <option>2</option>
 701                   <option>3</option>
 702                   <option>4</option>
 703                   <option>5</option>
 704                 </select>
 705               </div>
 706             </form>
 707
 708             <form class="bs-docs-example" style="padding-bottom: 15px;">
 709               <div class="controls">
 710                 <input class="span5" type="text" placeholder=".span5">
 711               </div>
 712               <div class="controls controls-row">
 713                 <input class="span4" type="text" placeholder=".span4">
 714                 <input class="span1" type="text" placeholder=".span1">
 715               </div>
 716               <div class="controls controls-row">
 717                 <input class="span3" type="text" placeholder=".span3">
 718                 <input class="span2" type="text" placeholder=".span2">
 719               </div>
 720               <div class="controls controls-row">
 721                 <input class="span2" type="text" placeholder=".span2">
 722                 <input class="span3" type="text" placeholder=".span3">
 723               </div>
 724               <div class="controls controls-row">
 725                 <input class="span1" type="text" placeholder=".span1">
 726                 <input class="span4" type="text" placeholder=".span4">
 727               </div>
 728             </form>
 729
 730             <form class="bs-docs-example">
 731               <span class="input-xlarge uneditable-input">Some value here</span>
 732             </form>
 733
 734             <form class="bs-docs-example">
 735               <div class="form-actions">
 736                 <button type="submit" class="btn btn-primary">Save changes</button>
 737                 <button type="button" class="btn">Cancel</button>
 738               </div>
 739             </form>
 740
 741             <form class="bs-docs-example form-inline">
 742               <input type="text"> <span class="help-inline">Inline help text</span>
 743             </form>
 744
 745             <form class="bs-docs-example form-inline">
 746               <input type="text">
 747               <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
 748             </form>
 749
 750             <form class="bs-docs-example form-inline">
 751               <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
 752             </form>
 753
 754             <form class="bs-docs-example form-inline">
 755               <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
 756             </form>
 757
 758             <form class="bs-docs-example form-horizontal">
 759               <div class="control-group warning">
 760                 <label class="control-label" for="inputWarning">Input with warning</label>
 761                 <div class="controls">
 762                   <input type="text" id="inputWarning">
 763                   <span class="help-inline">Something may have gone wrong</span>
 764                 </div>
 765               </div>
 766               <div class="control-group error">
 767                 <label class="control-label" for="inputError">Input with error</label>
 768                 <div class="controls">
 769                   <input type="text" id="inputError">
 770                   <span class="help-inline">Please correct the error</span>
 771                 </div>
 772               </div>
 773               <div class="control-group success">
 774                 <label class="control-label" for="inputSuccess">Input with success</label>
 775                 <div class="controls">
 776                   <input type="text" id="inputSuccess">
 777                   <span class="help-inline">Woohoo!</span>
 778                 </div>
 779               </div>
 780             </form>
 781
 782           </section>
 783
 784
 785
 786           <!-- Buttons
 787           ================================================== -->
 788           <section id="buttons">
 789             <div class="page-header">
 790               <h1>Buttons</h1>
 791             </div>
 792
 793             <table class="table table-bordered table-striped">
 794               <thead>
 795                 <tr>
 796                   <th>Button</th>
 797                   <th>class=""</th>
 798                   <th>Description</th>
 799                 </tr>
 800               </thead>
 801               <tbody>
 802                 <tr>
 803                   <td><button type="button" class="btn">Default</button></td>
 804                   <td><code>btn</code></td>
 805                   <td>Standard gray button with gradient</td>
 806                 </tr>
 807                 <tr>
 808                   <td><button type="button" class="btn btn-primary">Primary</button></td>
 809                   <td><code>btn btn-primary</code></td>
 810                   <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
 811                 </tr>
 812                 <tr>
 813                   <td><button type="button" class="btn btn-info">Info</button></td>
 814                   <td><code>btn btn-info</code></td>
 815                   <td>Used as an alternative to the default styles</td>
 816                 </tr>
 817                 <tr>
 818                   <td><button type="button" class="btn btn-success">Success</button></td>
 819                   <td><code>btn btn-success</code></td>
 820                   <td>Indicates a successful or positive action</td>
 821                 </tr>
 822                 <tr>
 823                   <td><button type="button" class="btn btn-warning">Warning</button></td>
 824                   <td><code>btn btn-warning</code></td>
 825                   <td>Indicates caution should be taken with this action</td>
 826                 </tr>
 827                 <tr>
 828                   <td><button type="button" class="btn btn-danger">Danger</button></td>
 829                   <td><code>btn btn-danger</code></td>
 830                   <td>Indicates a dangerous or potentially negative action</td>
 831                 </tr>
 832                 <tr>
 833                   <td><button type="button" class="btn btn-inverse">Inverse</button></td>
 834                   <td><code>btn btn-inverse</code></td>
 835                   <td>Alternate dark gray button, not tied to a semantic action or use</td>
 836                 </tr>
 837                 <tr>
 838                   <td><button type="button" class="btn btn-link">Link</button></td>
 839                   <td><code>btn btn-link</code></td>
 840                   <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
 841                 </tr>
 842               </tbody>
 843             </table>
 844
 845             <div class="bs-docs-example">
 846               <p>
 847                 <button type="button" class="btn btn-large btn-primary">Large button</button>
 848                 <button type="button" class="btn btn-large">Large button</button>
 849               </p>
 850               <p>
 851                 <button type="button" class="btn btn-primary">Default button</button>
 852                 <button type="button" class="btn">Default button</button>
 853               </p>
 854               <p>
 855                 <button type="button" class="btn btn-small btn-primary">Small button</button>
 856                 <button type="button" class="btn btn-small">Small button</button>
 857               </p>
 858               <p>
 859                 <button type="button" class="btn btn-mini btn-primary">Mini button</button>
 860                 <button type="button" class="btn btn-mini">Mini button</button>
 861               </p>
 862             </div>
 863
 864             <div class="bs-docs-example">
 865               <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
 866                 <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
 867                 <button type="button" class="btn btn-large btn-block">Block level button</button>
 868               </div>
 869             </div>
 870
 871             <p class="bs-docs-example">
 872               <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
 873               <a href="#" class="btn btn-large disabled">Link</a>
 874             </p>
 875
 876             <p class="bs-docs-example">
 877               <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
 878               <button type="button" class="btn btn-large" disabled>Button</button>
 879             </p>
 880
 881             <form class="bs-docs-example">
 882               <a class="btn" href="">Link</a>
 883               <button class="btn" type="submit">Button</button>
 884               <input class="btn" type="button" value="Input">
 885               <input class="btn" type="submit" value="Submit">
 886             </form>
 887
 888           </section>
 889
 890
 891
 892           <!-- Images
 893           ================================================== -->
 894           <section id="images">
 895             <div class="page-header">
 896               <h1>Images</h1>
 897             </div>
 898
 899             <div class="bs-docs-example bs-docs-example-images">
 900               <img src="http://placehold.it/140x140" class="img-rounded">
 901               <img src="http://placehold.it/140x140" class="img-circle">
 902               <img src="http://placehold.it/140x140" class="img-polaroid">
 903             </div>
 904
 905
 906           </section>
 907
 908
 909
 910           <!-- Icons
 911           ================================================== -->
 912           <section id="icons">
 913             <div class="page-header">
 914               <h1>Icons <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
 915             </div>
 916
 917             <ul class="the-icons clearfix">
 918               <li><i class="icon-glass"></i> icon-glass</li>
 919               <li><i class="icon-music"></i> icon-music</li>
 920               <li><i class="icon-search"></i> icon-search</li>
 921               <li><i class="icon-envelope"></i> icon-envelope</li>
 922               <li><i class="icon-heart"></i> icon-heart</li>
 923               <li><i class="icon-star"></i> icon-star</li>
 924               <li><i class="icon-star-empty"></i> icon-star-empty</li>
 925               <li><i class="icon-user"></i> icon-user</li>
 926               <li><i class="icon-film"></i> icon-film</li>
 927               <li><i class="icon-th-large"></i> icon-th-large</li>
 928               <li><i class="icon-th"></i> icon-th</li>
 929               <li><i class="icon-th-list"></i> icon-th-list</li>
 930               <li><i class="icon-ok"></i> icon-ok</li>
 931               <li><i class="icon-remove"></i> icon-remove</li>
 932               <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
 933               <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
 934               <li><i class="icon-off"></i> icon-off</li>
 935               <li><i class="icon-signal"></i> icon-signal</li>
 936               <li><i class="icon-cog"></i> icon-cog</li>
 937               <li><i class="icon-trash"></i> icon-trash</li>
 938               <li><i class="icon-home"></i> icon-home</li>
 939               <li><i class="icon-file"></i> icon-file</li>
 940               <li><i class="icon-time"></i> icon-time</li>
 941               <li><i class="icon-road"></i> icon-road</li>
 942               <li><i class="icon-download-alt"></i> icon-download-alt</li>
 943               <li><i class="icon-download"></i> icon-download</li>
 944               <li><i class="icon-upload"></i> icon-upload</li>
 945               <li><i class="icon-inbox"></i> icon-inbox</li>
 946
 947               <li><i class="icon-play-circle"></i> icon-play-circle</li>
 948               <li><i class="icon-repeat"></i> icon-repeat</li>
 949               <li><i class="icon-refresh"></i> icon-refresh</li>
 950               <li><i class="icon-list-alt"></i> icon-list-alt</li>
 951               <li><i class="icon-lock"></i> icon-lock</li>
 952               <li><i class="icon-flag"></i> icon-flag</li>
 953               <li><i class="icon-headphones"></i> icon-headphones</li>
 954               <li><i class="icon-volume-off"></i> icon-volume-off</li>
 955               <li><i class="icon-volume-down"></i> icon-volume-down</li>
 956               <li><i class="icon-volume-up"></i> icon-volume-up</li>
 957               <li><i class="icon-qrcode"></i> icon-qrcode</li>
 958               <li><i class="icon-barcode"></i> icon-barcode</li>
 959               <li><i class="icon-tag"></i> icon-tag</li>
 960               <li><i class="icon-tags"></i> icon-tags</li>
 961               <li><i class="icon-book"></i> icon-book</li>
 962               <li><i class="icon-bookmark"></i> icon-bookmark</li>
 963               <li><i class="icon-print"></i> icon-print</li>
 964               <li><i class="icon-camera"></i> icon-camera</li>
 965               <li><i class="icon-font"></i> icon-font</li>
 966               <li><i class="icon-bold"></i> icon-bold</li>
 967               <li><i class="icon-italic"></i> icon-italic</li>
 968               <li><i class="icon-text-height"></i> icon-text-height</li>
 969               <li><i class="icon-text-width"></i> icon-text-width</li>
 970               <li><i class="icon-align-left"></i> icon-align-left</li>
 971               <li><i class="icon-align-center"></i> icon-align-center</li>
 972               <li><i class="icon-align-right"></i> icon-align-right</li>
 973               <li><i class="icon-align-justify"></i> icon-align-justify</li>
 974               <li><i class="icon-list"></i> icon-list</li>
 975
 976               <li><i class="icon-indent-left"></i> icon-indent-left</li>
 977               <li><i class="icon-indent-right"></i> icon-indent-right</li>
 978               <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
 979               <li><i class="icon-picture"></i> icon-picture</li>
 980               <li><i class="icon-pencil"></i> icon-pencil</li>
 981               <li><i class="icon-map-marker"></i> icon-map-marker</li>
 982               <li><i class="icon-adjust"></i> icon-adjust</li>
 983               <li><i class="icon-tint"></i> icon-tint</li>
 984               <li><i class="icon-edit"></i> icon-edit</li>
 985               <li><i class="icon-share"></i> icon-share</li>
 986               <li><i class="icon-check"></i> icon-check</li>
 987               <li><i class="icon-move"></i> icon-move</li>
 988               <li><i class="icon-step-backward"></i> icon-step-backward</li>
 989               <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
 990               <li><i class="icon-backward"></i> icon-backward</li>
 991               <li><i class="icon-play"></i> icon-play</li>
 992               <li><i class="icon-pause"></i> icon-pause</li>
 993               <li><i class="icon-stop"></i> icon-stop</li>
 994               <li><i class="icon-forward"></i> icon-forward</li>
 995               <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
 996               <li><i class="icon-step-forward"></i> icon-step-forward</li>
 997               <li><i class="icon-eject"></i> icon-eject</li>
 998               <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
 999               <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
1000               <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
1001               <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
1002               <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
1003               <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
1004
1005               <li><i class="icon-question-sign"></i> icon-question-sign</li>
1006               <li><i class="icon-info-sign"></i> icon-info-sign</li>
1007               <li><i class="icon-screenshot"></i> icon-screenshot</li>
1008               <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
1009               <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
1010               <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
1011               <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
1012               <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
1013               <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
1014               <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
1015               <li><i class="icon-share-alt"></i> icon-share-alt</li>
1016               <li><i class="icon-resize-full"></i> icon-resize-full</li>
1017               <li><i class="icon-resize-small"></i> icon-resize-small</li>
1018               <li><i class="icon-plus"></i> icon-plus</li>
1019               <li><i class="icon-minus"></i> icon-minus</li>
1020               <li><i class="icon-asterisk"></i> icon-asterisk</li>
1021               <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
1022               <li><i class="icon-gift"></i> icon-gift</li>
1023               <li><i class="icon-leaf"></i> icon-leaf</li>
1024               <li><i class="icon-fire"></i> icon-fire</li>
1025               <li><i class="icon-eye-open"></i> icon-eye-open</li>
1026               <li><i class="icon-eye-close"></i> icon-eye-close</li>
1027               <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
1028               <li><i class="icon-plane"></i> icon-plane</li>
1029               <li><i class="icon-calendar"></i> icon-calendar</li>
1030               <li><i class="icon-random"></i> icon-random</li>
1031               <li><i class="icon-comment"></i> icon-comment</li>
1032               <li><i class="icon-magnet"></i> icon-magnet</li>
1033
1034               <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
1035               <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
1036               <li><i class="icon-retweet"></i> icon-retweet</li>
1037               <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
1038               <li><i class="icon-folder-close"></i> icon-folder-close</li>
1039               <li><i class="icon-folder-open"></i> icon-folder-open</li>
1040               <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
1041               <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
1042               <li><i class="icon-hdd"></i> icon-hdd</li>
1043               <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
1044               <li><i class="icon-bell"></i> icon-bell</li>
1045               <li><i class="icon-certificate"></i> icon-certificate</li>
1046               <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
1047               <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
1048               <li><i class="icon-hand-right"></i> icon-hand-right</li>
1049               <li><i class="icon-hand-left"></i> icon-hand-left</li>
1050               <li><i class="icon-hand-up"></i> icon-hand-up</li>
1051               <li><i class="icon-hand-down"></i> icon-hand-down</li>
1052               <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
1053               <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
1054               <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
1055               <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
1056               <li><i class="icon-globe"></i> icon-globe</li>
1057               <li><i class="icon-wrench"></i> icon-wrench</li>
1058               <li><i class="icon-tasks"></i> icon-tasks</li>
1059               <li><i class="icon-filter"></i> icon-filter</li>
1060               <li><i class="icon-briefcase"></i> icon-briefcase</li>
1061               <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
1062             </ul>
1063
1064             <div class="bs-docs-example">
1065               <div class="btn-toolbar">
1066                 <div class="btn-group">
1067                   <a class="btn" href="#"><i class="icon-align-left"></i></a>
1068                   <a class="btn" href="#"><i class="icon-align-center"></i></a>
1069                   <a class="btn" href="#"><i class="icon-align-right"></i></a>
1070                   <a class="btn" href="#"><i class="icon-align-justify"></i></a>
1071                 </div>
1072               </div>
1073             </div>
1074
1075             <div class="bs-docs-example">
1076               <div class="btn-group">
1077                 <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
1078                 <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
1079                 <ul class="dropdown-menu">
1080                   <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
1081                   <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
1082                   <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
1083                   <li class="divider"></li>
1084                   <li><a href="#"><i class="i"></i> Make admin</a></li>
1085                 </ul>
1086               </div>
1087             </div>
1088
1089             <div class="bs-docs-example">
1090               <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
1091             </div>
1092
1093             <div class="bs-docs-example">
1094               <div class="well" style="padding: 8px 0; margin-bottom: 0;">
1095                 <ul class="nav nav-list">
1096                   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
1097                   <li><a href="#"><i class="icon-book"></i> Library</a></li>
1098                   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
1099                   <li><a href="#"><i class="i"></i> Misc</a></li>
1100                 </ul>
1101               </div>
1102             </div>
1103
1104             <form class="bs-docs-example form-horizontal">
1105               <div class="control-group">
1106                 <label class="control-label" for="inputIcon">Email address</label>
1107                 <div class="controls">
1108                   <div class="input-prepend">
1109                     <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
1110                   </div>
1111                 </div>
1112               </div>
1113             </form>
1114
1115           </section>
1116
1117         <!-- Dropdowns
1118         ================================================== -->
1119         <section id="dropdowns">
1120           <div class="page-header">
1121             <h1>Dropdown menus</h1>
1122           </div>
1123
1124           <div class="bs-docs-example">
1125             <div class="dropdown clearfix">
1126               <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
1127                 <li><a tabindex="-1" href="#">Action</a></li>
1128                 <li><a tabindex="-1" href="#">Another action</a></li>
1129                 <li><a tabindex="-1" href="#">Something else here</a></li>
1130                 <li class="divider"></li>
1131                 <li><a tabindex="-1" href="#">Separated link</a></li>
1132               </ul>
1133             </div>
1134
1135             <div class="dropdown clearfix">
1136               <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
1137                 <li><a tabindex="-1" href="#">Action</a></li>
1138                 <li><a tabindex="-1" href="#">Another action</a></li>
1139                 <li><a tabindex="-1" href="#">Something else here</a></li>
1140                 <li class="divider"></li>
1141                 <li class="dropdown-submenu">
1142                   <a tabindex="-1" href="#">More options</a>
1143                   <ul class="dropdown-menu">
1144                     <li><a tabindex="-1" href="#">Second level link</a></li>
1145                     <li><a tabindex="-1" href="#">Second level link</a></li>
1146                     <li><a tabindex="-1" href="#">Second level link</a></li>
1147                     <li><a tabindex="-1" href="#">Second level link</a></li>
1148                     <li><a tabindex="-1" href="#">Second level link</a></li>
1149                   </ul>
1150                 </li>
1151               </ul>
1152             </div>
1153           </div>
1154
1155         </section>
1156
1157
1158
1159
1160         <!-- Button Groups
1161         ================================================== -->
1162         <section id="buttonGroups">
1163           <div class="page-header">
1164             <h1>Button groups</h1>
1165           </div>
1166
1167           <div class="bs-docs-example">
1168             <div class="btn-group" style="margin: 9px 0 5px;">
1169               <button class="btn">Left</button>
1170               <button class="btn">Middle</button>
1171               <button class="btn">Right</button>
1172             </div>
1173
1174             <div class="btn-toolbar" style="margin: 0;">
1175               <div class="btn-group">
1176                 <button class="btn">1</button>
1177                 <button class="btn">2</button>
1178                 <button class="btn">3</button>
1179                 <button class="btn">4</button>
1180               </div>
1181               <div class="btn-group">
1182                 <button class="btn">5</button>
1183                 <button class="btn">6</button>
1184                 <button class="btn">7</button>
1185               </div>
1186               <div class="btn-group">
1187                 <button class="btn">8</button>
1188               </div>
1189             </div>
1190
1191             <div class="btn-group btn-group-vertical">
1192               <button type="button" class="btn"><i class="icon-align-left"></i></button>
1193               <button type="button" class="btn"><i class="icon-align-center"></i></button>
1194               <button type="button" class="btn"><i class="icon-align-right"></i></button>
1195               <button type="button" class="btn"><i class="icon-align-justify"></i></button>
1196             </div>
1197           </div>
1198
1199
1200           <hr class="bs-docs-separator">
1201
1202         </section>
1203
1204
1205
1206         <!-- Split button dropdowns
1207         ================================================== -->
1208         <section id="buttonDropdowns">
1209           <div class="page-header">
1210             <h1>Button dropdown menus</h1>
1211           </div>
1212
1213
1214           <div class="bs-docs-example">
1215             <div class="btn-toolbar" style="margin: 0;">
1216               <div class="btn-group">
1217                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
1218                 <ul class="dropdown-menu">
1219                   <li><a href="#">Action</a></li>
1220                   <li><a href="#">Another action</a></li>
1221                   <li><a href="#">Something else here</a></li>
1222                   <li class="divider"></li>
1223                   <li><a href="#">Separated link</a></li>
1224                 </ul>
1225               </div><!-- /btn-group -->
1226               <div class="btn-group">
1227                 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
1228                 <ul class="dropdown-menu">
1229                   <li><a href="#">Action</a></li>
1230                   <li><a href="#">Another action</a></li>
1231                   <li><a href="#">Something else here</a></li>
1232                   <li class="divider"></li>
1233                   <li><a href="#">Separated link</a></li>
1234                 </ul>
1235               </div><!-- /btn-group -->
1236               <div class="btn-group">
1237                 <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
1238                 <ul class="dropdown-menu">
1239                   <li><a href="#">Action</a></li>
1240                   <li><a href="#">Another action</a></li>
1241                   <li><a href="#">Something else here</a></li>
1242                   <li class="divider"></li>
1243                   <li><a href="#">Separated link</a></li>
1244                 </ul>
1245               </div><!-- /btn-group -->
1246               <div class="btn-group">
1247                 <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
1248                 <ul class="dropdown-menu">
1249                   <li><a href="#">Action</a></li>
1250                   <li><a href="#">Another action</a></li>
1251                   <li><a href="#">Something else here</a></li>
1252                   <li class="divider"></li>
1253                   <li><a href="#">Separated link</a></li>
1254                 </ul>
1255               </div><!-- /btn-group -->
1256               <div class="btn-group">
1257                 <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
1258                 <ul class="dropdown-menu">
1259                   <li><a href="#">Action</a></li>
1260                   <li><a href="#">Another action</a></li>
1261                   <li><a href="#">Something else here</a></li>
1262                   <li class="divider"></li>
1263                   <li><a href="#">Separated link</a></li>
1264                 </ul>
1265               </div><!-- /btn-group -->
1266               <div class="btn-group">
1267                 <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
1268                 <ul class="dropdown-menu">
1269                   <li><a href="#">Action</a></li>
1270                   <li><a href="#">Another action</a></li>
1271                   <li><a href="#">Something else here</a></li>
1272                   <li class="divider"></li>
1273                   <li><a href="#">Separated link</a></li>
1274                 </ul>
1275               </div><!-- /btn-group -->
1276               <div class="btn-group">
1277                 <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
1278                 <ul class="dropdown-menu">
1279                   <li><a href="#">Action</a></li>
1280                   <li><a href="#">Another action</a></li>
1281                   <li><a href="#">Something else here</a></li>
1282                   <li class="divider"></li>
1283                   <li><a href="#">Separated link</a></li>
1284                 </ul>
1285               </div><!-- /btn-group -->
1286             </div><!-- /btn-toolbar -->
1287
1288             <div class="btn-toolbar" style="margin: 0;">
1289               <div class="btn-group">
1290                 <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
1291                 <ul class="dropdown-menu">
1292                   <li><a href="#">Action</a></li>
1293                   <li><a href="#">Another action</a></li>
1294                   <li><a href="#">Something else here</a></li>
1295                   <li class="divider"></li>
1296                   <li><a href="#">Separated link</a></li>
1297                 </ul>
1298               </div><!-- /btn-group -->
1299               <div class="btn-group">
1300                 <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
1301                 <ul class="dropdown-menu">
1302                   <li><a href="#">Action</a></li>
1303                   <li><a href="#">Another action</a></li>
1304                   <li><a href="#">Something else here</a></li>
1305                   <li class="divider"></li>
1306                   <li><a href="#">Separated link</a></li>
1307                 </ul>
1308               </div><!-- /btn-group -->
1309               <div class="btn-group">
1310                 <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
1311                 <ul class="dropdown-menu">
1312                   <li><a href="#">Action</a></li>
1313                   <li><a href="#">Another action</a></li>
1314                   <li><a href="#">Something else here</a></li>
1315                   <li class="divider"></li>
1316                   <li><a href="#">Separated link</a></li>
1317                 </ul>
1318               </div><!-- /btn-group -->
1319             </div><!-- /btn-toolbar -->
1320
1321             <div class="btn-toolbar" style="margin: 0;">
1322               <div class="btn-group">
1323                 <button class="btn">Action</button>
1324                 <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1325                 <ul class="dropdown-menu">
1326                   <li><a href="#">Action</a></li>
1327                   <li><a href="#">Another action</a></li>
1328                   <li><a href="#">Something else here</a></li>
1329                   <li class="divider"></li>
1330                   <li><a href="#">Separated link</a></li>
1331                 </ul>
1332               </div><!-- /btn-group -->
1333               <div class="btn-group">
1334                 <button class="btn btn-primary">Action</button>
1335                 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1336                 <ul class="dropdown-menu">
1337                   <li><a href="#">Action</a></li>
1338                   <li><a href="#">Another action</a></li>
1339                   <li><a href="#">Something else here</a></li>
1340                   <li class="divider"></li>
1341                   <li><a href="#">Separated link</a></li>
1342                 </ul>
1343               </div><!-- /btn-group -->
1344               <div class="btn-group">
1345                 <button class="btn btn-danger">Danger</button>
1346                 <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1347                 <ul class="dropdown-menu">
1348                   <li><a href="#">Action</a></li>
1349                   <li><a href="#">Another action</a></li>
1350                   <li><a href="#">Something else here</a></li>
1351                   <li class="divider"></li>
1352                   <li><a href="#">Separated link</a></li>
1353                 </ul>
1354               </div><!-- /btn-group -->
1355               <div class="btn-group">
1356                 <button class="btn btn-warning">Warning</button>
1357                 <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1358                 <ul class="dropdown-menu">
1359                   <li><a href="#">Action</a></li>
1360                   <li><a href="#">Another action</a></li>
1361                   <li><a href="#">Something else here</a></li>
1362                   <li class="divider"></li>
1363                   <li><a href="#">Separated link</a></li>
1364                 </ul>
1365               </div><!-- /btn-group -->
1366               <div class="btn-group">
1367                 <button class="btn btn-success">Success</button>
1368                 <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1369                 <ul class="dropdown-menu">
1370                   <li><a href="#">Action</a></li>
1371                   <li><a href="#">Another action</a></li>
1372                   <li><a href="#">Something else here</a></li>
1373                   <li class="divider"></li>
1374                   <li><a href="#">Separated link</a></li>
1375                 </ul>
1376               </div><!-- /btn-group -->
1377               <div class="btn-group">
1378                 <button class="btn btn-info">Info</button>
1379                 <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1380                 <ul class="dropdown-menu">
1381                   <li><a href="#">Action</a></li>
1382                   <li><a href="#">Another action</a></li>
1383                   <li><a href="#">Something else here</a></li>
1384                   <li class="divider"></li>
1385                   <li><a href="#">Separated link</a></li>
1386                 </ul>
1387               </div><!-- /btn-group -->
1388               <div class="btn-group">
1389                 <button class="btn btn-inverse">Inverse</button>
1390                 <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1391                 <ul class="dropdown-menu">
1392                   <li><a href="#">Action</a></li>
1393                   <li><a href="#">Another action</a></li>
1394                   <li><a href="#">Something else here</a></li>
1395                   <li class="divider"></li>
1396                   <li><a href="#">Separated link</a></li>
1397                 </ul>
1398               </div><!-- /btn-group -->
1399             </div><!-- /btn-toolbar -->
1400
1401             <div class="btn-toolbar">
1402               <div class="btn-group">
1403                 <button class="btn btn-large">Large action</button>
1404                 <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1405                 <ul class="dropdown-menu">
1406                   <li><a href="#">Action</a></li>
1407                   <li><a href="#">Another action</a></li>
1408                   <li><a href="#">Something else here</a></li>
1409                   <li class="divider"></li>
1410                   <li><a href="#">Separated link</a></li>
1411                 </ul>
1412               </div><!-- /btn-group -->
1413             </div><!-- /btn-toolbar -->
1414             <div class="btn-toolbar">
1415               <div class="btn-group">
1416                 <button class="btn btn-small">Small action</button>
1417                 <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1418                 <ul class="dropdown-menu">
1419                   <li><a href="#">Action</a></li>
1420                   <li><a href="#">Another action</a></li>
1421                   <li><a href="#">Something else here</a></li>
1422                   <li class="divider"></li>
1423                   <li><a href="#">Separated link</a></li>
1424                 </ul>
1425               </div><!-- /btn-group -->
1426             </div><!-- /btn-toolbar -->
1427             <div class="btn-toolbar">
1428               <div class="btn-group">
1429                 <button class="btn btn-mini">Mini action</button>
1430                 <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1431                 <ul class="dropdown-menu">
1432                   <li><a href="#">Action</a></li>
1433                   <li><a href="#">Another action</a></li>
1434                   <li><a href="#">Something else here</a></li>
1435                   <li class="divider"></li>
1436                   <li><a href="#">Separated link</a></li>
1437                 </ul>
1438               </div><!-- /btn-group -->
1439             </div><!-- /btn-toolbar -->
1440
1441             <div class="btn-toolbar" style="margin: 0;">
1442               <div class="btn-group dropup">
1443                 <button class="btn">Dropup</button>
1444                 <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1445                 <ul class="dropdown-menu">
1446                   <li><a href="#">Action</a></li>
1447                   <li><a href="#">Another action</a></li>
1448                   <li><a href="#">Something else here</a></li>
1449                   <li class="divider"></li>
1450                   <li><a href="#">Separated link</a></li>
1451                 </ul>
1452               </div><!-- /btn-group -->
1453               <div class="btn-group dropup">
1454                 <button class="btn primary">Right dropup</button>
1455                 <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
1456                 <ul class="dropdown-menu pull-right">
1457                   <li><a href="#">Action</a></li>
1458                   <li><a href="#">Another action</a></li>
1459                   <li><a href="#">Something else here</a></li>
1460                   <li class="divider"></li>
1461                   <li><a href="#">Separated link</a></li>
1462                 </ul>
1463               </div><!-- /btn-group -->
1464             </div>
1465           </div>
1466
1467         </section>
1468
1469
1470
1471         <!-- Nav, Tabs, & Pills
1472         ================================================== -->
1473         <section id="navs">
1474           <div class="page-header">
1475             <h1>Nav: tabs, pills, and lists</small></h1>
1476           </div>
1477
1478           <div class="bs-docs-example">
1479             <ul class="nav nav-tabs">
1480               <li class="active"><a href="#">Home</a></li>
1481               <li><a href="#">Profile</a></li>
1482               <li><a href="#">Messages</a></li>
1483             </ul>
1484           </div>
1485
1486           <div class="bs-docs-example">
1487             <ul class="nav nav-pills">
1488               <li class="active"><a href="#">Home</a></li>
1489               <li><a href="#">Profile</a></li>
1490               <li><a href="#">Messages</a></li>
1491             </ul>
1492           </div>
1493
1494           <div class="bs-docs-example">
1495             <ul class="nav nav-pills">
1496               <li><a href="#">Clickable link</a></li>
1497               <li><a href="#">Clickable link</a></li>
1498               <li class="disabled"><a href="#">Disabled link</a></li>
1499             </ul>
1500           </div>
1501
1502           <div class="bs-docs-example">
1503             <ul class="nav nav-tabs nav-stacked">
1504               <li class="active"><a href="#">Home</a></li>
1505               <li><a href="#">Profile</a></li>
1506               <li><a href="#">Messages</a></li>
1507             </ul>
1508           </div>
1509
1510           <div class="bs-docs-example">
1511             <ul class="nav nav-pills nav-stacked">
1512               <li class="active"><a href="#">Home</a></li>
1513               <li><a href="#">Profile</a></li>
1514               <li><a href="#">Messages</a></li>
1515             </ul>
1516           </div>
1517
1518           <div class="bs-docs-example">
1519             <ul class="nav nav-tabs">
1520               <li class="active"><a href="#">Home</a></li>
1521               <li><a href="#">Help</a></li>
1522               <li class="dropdown">
1523                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
1524                 <ul class="dropdown-menu">
1525                   <li><a href="#">Action</a></li>
1526                   <li><a href="#">Another action</a></li>
1527                   <li><a href="#">Something else here</a></li>
1528                   <li class="divider"></li>
1529                   <li><a href="#">Separated link</a></li>
1530                 </ul>
1531               </li>
1532             </ul>
1533           </div>
1534
1535           <div class="bs-docs-example">
1536             <ul class="nav nav-pills">
1537               <li class="active"><a href="#">Home</a></li>
1538               <li><a href="#">Help</a></li>
1539               <li class="dropdown">
1540                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
1541                 <ul class="dropdown-menu">
1542                   <li><a href="#">Action</a></li>
1543                   <li><a href="#">Another action</a></li>
1544                   <li><a href="#">Something else here</a></li>
1545                   <li class="divider"></li>
1546                   <li><a href="#">Separated link</a></li>
1547                 </ul>
1548               </li>
1549             </ul>
1550           </div>
1551
1552           <div class="bs-docs-example">
1553             <div class="well" style="max-width: 340px; padding: 8px 0;">
1554               <ul class="nav nav-list">
1555                 <li class="nav-header">List header</li>
1556                 <li class="active"><a href="#">Home</a></li>
1557                 <li><a href="#">Library</a></li>
1558                 <li><a href="#">Applications</a></li>
1559                 <li class="nav-header">Another list header</li>
1560                 <li><a href="#">Profile</a></li>
1561                 <li><a href="#">Settings</a></li>
1562                 <li class="divider"></li>
1563                 <li><a href="#">Help</a></li>
1564               </ul>
1565             </div> <!-- /well -->
1566           </div>
1567
1568           <div class="bs-docs-example">
1569             <div class="tabbable" style="margin-bottom: 18px;">
1570               <ul class="nav nav-tabs">
1571                 <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
1572                 <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
1573                 <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
1574               </ul>
1575               <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1576                 <div class="tab-pane active" id="tab1">
1577                   <p>I'm in Section 1.</p>
1578                 </div>
1579                 <div class="tab-pane" id="tab2">
1580                   <p>Howdy, I'm in Section 2.</p>
1581                 </div>
1582                 <div class="tab-pane" id="tab3">
1583                   <p>What up girl, this is Section 3.</p>
1584                 </div>
1585               </div>
1586             </div> <!-- /tabbable -->
1587           </div>
1588
1589           <div class="bs-docs-example">
1590             <div class="tabbable tabs-below">
1591               <div class="tab-content">
1592                 <div class="tab-pane active" id="A">
1593                   <p>I'm in Section A.</p>
1594                 </div>
1595                 <div class="tab-pane" id="B">
1596                   <p>Howdy, I'm in Section B.</p>
1597                 </div>
1598                 <div class="tab-pane" id="C">
1599                   <p>What up girl, this is Section C.</p>
1600                 </div>
1601               </div>
1602               <ul class="nav nav-tabs">
1603                 <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
1604                 <li><a href="#B" data-toggle="tab">Section 2</a></li>
1605                 <li><a href="#C" data-toggle="tab">Section 3</a></li>
1606               </ul>
1607             </div> <!-- /tabbable -->
1608           </div>
1609
1610           <div class="bs-docs-example">
1611             <div class="tabbable tabs-left">
1612               <ul class="nav nav-tabs">
1613                 <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
1614                 <li><a href="#lB" data-toggle="tab">Section 2</a></li>
1615                 <li><a href="#lC" data-toggle="tab">Section 3</a></li>
1616               </ul>
1617               <div class="tab-content">
1618                 <div class="tab-pane active" id="lA">
1619                   <p>I'm in Section A.</p>
1620                 </div>
1621                 <div class="tab-pane" id="lB">
1622                   <p>Howdy, I'm in Section B.</p>
1623                 </div>
1624                 <div class="tab-pane" id="lC">
1625                   <p>What up girl, this is Section C.</p>
1626                 </div>
1627               </div>
1628             </div> <!-- /tabbable -->
1629           </div>
1630
1631           <div class="bs-docs-example">
1632             <div class="tabbable tabs-right">
1633               <ul class="nav nav-tabs">
1634                 <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
1635                 <li><a href="#rB" data-toggle="tab">Section 2</a></li>
1636                 <li><a href="#rC" data-toggle="tab">Section 3</a></li>
1637               </ul>
1638               <div class="tab-content">
1639                 <div class="tab-pane active" id="rA">
1640                   <p>I'm in Section A.</p>
1641                 </div>
1642                 <div class="tab-pane" id="rB">
1643                   <p>Howdy, I'm in Section B.</p>
1644                 </div>
1645                 <div class="tab-pane" id="rC">
1646                   <p>What up girl, this is Section C.</p>
1647                 </div>
1648               </div>
1649             </div> <!-- /tabbable -->
1650           </div>
1651
1652         </section>
1653
1654
1655
1656         <!-- Navbar
1657         ================================================== -->
1658         <section id="navbar">
1659           <div class="page-header">
1660             <h1>Navbar</h1>
1661           </div>
1662
1663
1664           <div class="bs-docs-example">
1665             <div class="navbar">
1666               <div class="navbar-inner">
1667                 <a class="brand" href="#">Title</a>
1668                 <ul class="nav">
1669                   <li class="active"><a href="#">Home</a></li>
1670                   <li><a href="#">Link</a></li>
1671                   <li><a href="#">Link</a></li>
1672                 </ul>
1673               </div>
1674             </div>
1675
1676             <div class="navbar">
1677               <div class="navbar-inner">
1678                 <ul class="nav">
1679                   <li class="active"><a href="#">Home</a></li>
1680                   <li class="divider-vertical"></li>
1681                   <li><a href="#">Link</a></li>
1682                   <li class="divider-vertical"></li>
1683                   <li><a href="#">Link</a></li>
1684                   <li class="divider-vertical"></li>
1685                 </ul>
1686               </div>
1687             </div>
1688
1689             <div class="navbar">
1690               <div class="navbar-inner">
1691                 <form class="navbar-form pull-left">
1692                   <input type="text" class="span2">
1693                   <button type="submit" class="btn">Submit</button>
1694                 </form>
1695               </div>
1696             </div>
1697
1698             <div class="navbar">
1699               <div class="navbar-inner">
1700                 <form class="navbar-search pull-left">
1701                   <input type="text" class="search-query" placeholder="Search">
1702                 </form>
1703               </div>
1704             </div>
1705
1706             <div class="navbar">
1707               <div class="navbar-inner">
1708                 <div class="container">
1709                   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
1710                     <span class="icon-bar"></span>
1711                     <span class="icon-bar"></span>
1712                     <span class="icon-bar"></span>
1713                   </a>
1714                   <a class="brand" href="#">Title</a>
1715                   <div class="nav-collapse">
1716                     <ul class="nav">
1717                       <li class="active"><a href="#">Home</a></li>
1718                       <li><a href="#">Link</a></li>
1719                       <li><a href="#">Link</a></li>
1720                       <li class="dropdown">
1721                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1722                         <ul class="dropdown-menu">
1723                           <li><a href="#">Action</a></li>
1724                           <li><a href="#">Another action</a></li>
1725                           <li><a href="#">Something else here</a></li>
1726                           <li class="divider"></li>
1727                           <li class="nav-header">Nav header</li>
1728                           <li><a href="#">Separated link</a></li>
1729                           <li><a href="#">One more separated link</a></li>
1730                         </ul>
1731                       </li>
1732                     </ul>
1733                     <form class="navbar-search pull-left" action="">
1734                       <input type="text" class="search-query span2" placeholder="Search">
1735                     </form>
1736                     <ul class="nav pull-right">
1737                       <li><a href="#">Link</a></li>
1738                       <li class="divider-vertical"></li>
1739                       <li class="dropdown">
1740                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1741                         <ul class="dropdown-menu">
1742                           <li><a href="#">Action</a></li>
1743                           <li><a href="#">Another action</a></li>
1744                           <li><a href="#">Something else here</a></li>
1745                           <li class="divider"></li>
1746                           <li><a href="#">Separated link</a></li>
1747                         </ul>
1748                       </li>
1749                     </ul>
1750                   </div><!-- /.nav-collapse -->
1751                 </div>
1752               </div><!-- /navbar-inner -->
1753             </div><!-- /navbar -->
1754
1755             <div class="navbar navbar-inverse" style="position: static;">
1756               <div class="navbar-inner">
1757                 <div class="container">
1758                   <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
1759                     <span class="icon-bar"></span>
1760                     <span class="icon-bar"></span>
1761                     <span class="icon-bar"></span>
1762                   </a>
1763                   <a class="brand" href="#">Title</a>
1764                   <div class="nav-collapse subnav-collapse">
1765                     <ul class="nav">
1766                       <li class="active"><a href="#">Home</a></li>
1767                       <li><a href="#">Link</a></li>
1768                       <li><a href="#">Link</a></li>
1769                       <li class="dropdown">
1770                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1771                         <ul class="dropdown-menu">
1772                           <li><a href="#">Action</a></li>
1773                           <li><a href="#">Another action</a></li>
1774                           <li><a href="#">Something else here</a></li>
1775                           <li class="divider"></li>
1776                           <li class="nav-header">Nav header</li>
1777                           <li><a href="#">Separated link</a></li>
1778                           <li><a href="#">One more separated link</a></li>
1779                         </ul>
1780                       </li>
1781                     </ul>
1782                     <form class="navbar-search pull-left" action="">
1783                       <input type="text" class="search-query span2" placeholder="Search">
1784                     </form>
1785                     <ul class="nav pull-right">
1786                       <li><a href="#">Link</a></li>
1787                       <li class="divider-vertical"></li>
1788                       <li class="dropdown">
1789                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1790                         <ul class="dropdown-menu">
1791                           <li><a href="#">Action</a></li>
1792                           <li><a href="#">Another action</a></li>
1793                           <li><a href="#">Something else here</a></li>
1794                           <li class="divider"></li>
1795                           <li><a href="#">Separated link</a></li>
1796                         </ul>
1797                       </li>
1798                     </ul>
1799                   </div><!-- /.nav-collapse -->
1800                 </div>
1801               </div><!-- /navbar-inner -->
1802             </div><!-- /navbar -->
1803           </div>
1804
1805         </section>
1806
1807
1808
1809         <!-- Breadcrumbs
1810         ================================================== -->
1811         <section id="breadcrumbs">
1812           <div class="page-header">
1813             <h1>Breadcrumbs <small></small></h1>
1814           </div>
1815
1816           <div class="bs-docs-example">
1817             <ul class="breadcrumb">
1818               <li class="active">Home</li>
1819             </ul>
1820             <ul class="breadcrumb">
1821               <li><a href="#">Home</a> <span class="divider">/</span></li>
1822               <li class="active">Library</li>
1823             </ul>
1824             <ul class="breadcrumb" style="margin-bottom: 5px;">
1825               <li><a href="#">Home</a> <span class="divider">/</span></li>
1826               <li><a href="#">Library</a> <span class="divider">/</span></li>
1827               <li class="active">Data</li>
1828             </ul>
1829           </div>
1830
1831         </section>
1832
1833
1834
1835         <!-- Pagination
1836         ================================================== -->
1837         <section id="pagination">
1838           <div class="page-header">
1839             <h1>Pagination</h1>
1840           </div>
1841
1842           <div class="bs-docs-example">
1843             <div class="pagination">
1844               <ul>
1845                 <li><a href="#">&laquo;</a></li>
1846                 <li><a href="#">1</a></li>
1847                 <li><a href="#">2</a></li>
1848                 <li><a href="#">3</a></li>
1849                 <li><a href="#">4</a></li>
1850                 <li><a href="#">5</a></li>
1851                 <li><a href="#">&raquo;</a></li>
1852               </ul>
1853             </div>
1854           </div>
1855
1856           <div class="bs-docs-example">
1857             <div class="pagination pagination-centered">
1858               <ul>
1859                 <li class="disabled"><a href="#">&laquo;</a></li>
1860                 <li class="active"><a href="#">1</a></li>
1861                 <li><a href="#">2</a></li>
1862                 <li><a href="#">3</a></li>
1863                 <li><a href="#">4</a></li>
1864                 <li><a href="#">5</a></li>
1865                 <li><a href="#">&raquo;</a></li>
1866              </ul>
1867             </div>
1868           </div>
1869
1870           <div class="bs-docs-example">
1871             <div class="pagination pagination-centered">
1872               <ul>
1873                 <li><a href="#">&laquo;</a></li>
1874                 <li><a href="#">1</a></li>
1875                 <li><a href="#">2</a></li>
1876                 <li><a href="#">3</a></li>
1877                 <li><a href="#">4</a></li>
1878                 <li><a href="#">5</a></li>
1879                 <li><a href="#">&raquo;</a></li>
1880              </ul>
1881             </div>
1882           </div>
1883
1884           <div class="bs-docs-example">
1885             <div class="pagination pagination-right">
1886               <ul>
1887                 <li><a href="#">&laquo;</a></li>
1888                 <li><a href="#">1</a></li>
1889                 <li><a href="#">2</a></li>
1890                 <li><a href="#">3</a></li>
1891                 <li><a href="#">4</a></li>
1892                 <li><a href="#">5</a></li>
1893                 <li><a href="#">&raquo;</a></li>
1894               </ul>
1895             </div>
1896           </div>
1897
1898           <div class="bs-docs-example">
1899             <ul class="pager">
1900               <li><a href="#">Previous</a></li>
1901               <li><a href="#">Next</a></li>
1902             </ul>
1903           </div>
1904
1905           <div class="bs-docs-example">
1906             <ul class="pager">
1907               <li class="previous"><a href="#">&larr; Older</a></li>
1908               <li class="next"><a href="#">Newer &rarr;</a></li>
1909             </ul>
1910           </div>
1911
1912           <div class="bs-docs-example">
1913             <ul class="pager">
1914               <li class="previous disabled"><a href="#">&larr; Older</a></li>
1915               <li class="next"><a href="#">Newer &rarr;</a></li>
1916             </ul>
1917           </div>
1918
1919         </section>
1920
1921
1922
1923         <!-- Labels and badges
1924         ================================================== -->
1925         <section id="labels-badges">
1926           <div class="page-header">
1927             <h1>Labels and badges</h1>
1928           </div>
1929           <table class="table table-bordered table-striped">
1930             <thead>
1931               <tr>
1932                 <th>Labels</th>
1933                 <th>Markup</th>
1934               </tr>
1935             </thead>
1936             <tbody>
1937               <tr>
1938                 <td>
1939                   <span class="label">Default</span>
1940                 </td>
1941                 <td>
1942                   <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
1943                 </td>
1944               </tr>
1945               <tr>
1946                 <td>
1947                   <span class="label label-success">Success</span>
1948                 </td>
1949                 <td>
1950                   <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
1951                 </td>
1952               </tr>
1953               <tr>
1954                 <td>
1955                   <span class="label label-warning">Warning</span>
1956                 </td>
1957                 <td>
1958                   <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
1959                 </td>
1960               </tr>
1961               <tr>
1962                 <td>
1963                   <span class="label label-important">Important</span>
1964                 </td>
1965                 <td>
1966                   <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
1967                 </td>
1968               </tr>
1969               <tr>
1970                 <td>
1971                   <span class="label label-info">Info</span>
1972                 </td>
1973                 <td>
1974                   <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
1975                 </td>
1976               </tr>
1977               <tr>
1978                 <td>
1979                   <span class="label label-inverse">Inverse</span>
1980                 </td>
1981                 <td>
1982                   <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
1983                 </td>
1984               </tr>
1985             </tbody>
1986           </table>
1987
1988           <table class="table table-bordered table-striped">
1989             <thead>
1990               <tr>
1991                 <th>Name</th>
1992                 <th>Example</th>
1993                 <th>Markup</th>
1994               </tr>
1995             </thead>
1996             <tbody>
1997               <tr>
1998                 <td>
1999                   Default
2000                 </td>
2001                 <td>
2002                   <span class="badge">1</span>
2003                 </td>
2004                 <td>
2005                   <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
2006                 </td>
2007               </tr>
2008               <tr>
2009                 <td>
2010                   Success
2011                 </td>
2012                 <td>
2013                   <span class="badge badge-success">2</span>
2014                 </td>
2015                 <td>
2016                   <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
2017                 </td>
2018               </tr>
2019               <tr>
2020                 <td>
2021                   Warning
2022                 </td>
2023                 <td>
2024                   <span class="badge badge-warning">4</span>
2025                 </td>
2026                 <td>
2027                   <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
2028                 </td>
2029               </tr>
2030               <tr>
2031                 <td>
2032                   Important
2033                 </td>
2034                 <td>
2035                   <span class="badge badge-important">6</span>
2036                 </td>
2037                 <td>
2038                   <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
2039                 </td>
2040               </tr>
2041               <tr>
2042                 <td>
2043                   Info
2044                 </td>
2045                 <td>
2046                   <span class="badge badge-info">8</span>
2047                 </td>
2048                 <td>
2049                   <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
2050                 </td>
2051               </tr>
2052               <tr>
2053                 <td>
2054                   Inverse
2055                 </td>
2056                 <td>
2057                   <span class="badge badge-inverse">10</span>
2058                 </td>
2059                 <td>
2060                   <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
2061                 </td>
2062               </tr>
2063             </tbody>
2064           </table>
2065
2066         </section>
2067
2068
2069
2070         <!-- Typographic components
2071         ================================================== -->
2072         <section id="typography">
2073           <div class="page-header">
2074             <h1>Typographic components</h1>
2075           </div>
2076
2077           <div class="bs-docs-example">
2078             <div class="hero-unit">
2079               <h1>Hello, world!</h1>
2080               <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
2081               <p><a class="btn btn-primary btn-large">Learn more</a></p>
2082             </div>
2083           </div>
2084
2085           <div class="bs-docs-example">
2086             <div class="page-header">
2087               <h1>Example page header <small>Subtext for header</small></h1>
2088             </div>
2089           </div>
2090
2091         </section>
2092
2093
2094
2095         <!-- Thumbnails
2096         ================================================== -->
2097         <section id="thumbnails">
2098           <div class="page-header">
2099             <h1>Thumbnails</h1>
2100           </div>
2101
2102           <div class="row-fluid">
2103             <ul class="thumbnails">
2104               <li class="span3">
2105                 <a href="#" class="thumbnail">
2106                   <img src="http://placehold.it/260x180" alt="">
2107                 </a>
2108               </li>
2109               <li class="span3">
2110                 <a href="#" class="thumbnail">
2111                   <img src="http://placehold.it/260x180" alt="">
2112                 </a>
2113               </li>
2114               <li class="span3">
2115                 <a href="#" class="thumbnail">
2116                   <img src="http://placehold.it/260x180" alt="">
2117                 </a>
2118               </li>
2119               <li class="span3">
2120                 <a href="#" class="thumbnail">
2121                   <img src="http://placehold.it/260x180" alt="">
2122                 </a>
2123               </li>
2124             </ul>
2125           </div>
2126
2127           <ul class="thumbnails">
2128             <li class="span4">
2129               <a href="#" class="thumbnail">
2130                 <img src="http://placehold.it/360x270" alt="">
2131               </a>
2132             </li>
2133             <li class="span3">
2134               <a href="#" class="thumbnail">
2135                 <img src="http://placehold.it/260x120" alt="">
2136               </a>
2137             </li>
2138             <li class="span2">
2139               <a href="#" class="thumbnail">
2140                 <img src="http://placehold.it/160x120" alt="">
2141               </a>
2142             </li>
2143             <li class="span3">
2144               <a href="#" class="thumbnail">
2145                 <img src="http://placehold.it/260x120" alt="">
2146               </a>
2147             </li>
2148             <li class="span2">
2149               <a href="#" class="thumbnail">
2150                 <img src="http://placehold.it/160x120" alt="">
2151               </a>
2152             </li>
2153           </ul>
2154
2155         </section>
2156
2157
2158
2159         <!-- Alerts
2160         ================================================== -->
2161         <section id="alerts">
2162           <div class="page-header">
2163             <h1>Alerts</h1>
2164           </div>
2165
2166           <div class="bs-docs-example">
2167             <div class="alert">
2168               <button type="button" class="close" data-dismiss="alert">&times;</button>
2169               <strong>Warning!</strong> Best check yo self, you're not looking too good.
2170             </div>
2171
2172             <div class="alert alert-block">
2173               <button type="button" class="close" data-dismiss="alert">&times;</button>
2174               <h4>Warning!</h4>
2175               <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>
2176             </div>
2177
2178             <div class="alert alert-error">
2179               <button type="button" class="close" data-dismiss="alert">&times;</button>
2180               <strong>Oh snap!</strong> Change a few things up and try submitting again.
2181             </div>
2182
2183             <div class="alert alert-success">
2184               <button type="button" class="close" data-dismiss="alert">&times;</button>
2185               <strong>Well done!</strong> You successfully read this important alert message.
2186             </div>
2187
2188             <div class="alert alert-info">
2189               <button type="button" class="close" data-dismiss="alert">&times;</button>
2190               <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
2191             </div>
2192           </div>
2193
2194         </section>
2195
2196
2197
2198         <!-- Progress bars
2199         ================================================== -->
2200         <section id="progress">
2201           <div class="page-header">
2202             <h1>Progress bars</h1>
2203           </div>
2204
2205           <div class="bs-docs-example">
2206             <div class="progress">
2207               <div class="bar" style="width: 60%;"></div>
2208             </div>
2209
2210             <div class="progress progress-striped">
2211               <div class="bar" style="width: 20%;"></div>
2212             </div>
2213
2214             <div class="progress progress-striped active">
2215               <div class="bar" style="width: 45%"></div>
2216             </div>
2217
2218             <div class="progress">
2219               <div class="bar bar-success" style="width: 35%"></div>
2220               <div class="bar bar-warning" style="width: 20%"></div>
2221               <div class="bar bar-danger" style="width: 10%"></div>
2222             </div>
2223           </div>
2224
2225           <div class="bs-docs-example">
2226             <div class="progress progress-info" style="margin-bottom: 9px;">
2227               <div class="bar" style="width: 20%"></div>
2228             </div>
2229             <div class="progress progress-success" style="margin-bottom: 9px;">
2230               <div class="bar" style="width: 40%"></div>
2231             </div>
2232             <div class="progress progress-warning" style="margin-bottom: 9px;">
2233               <div class="bar" style="width: 60%"></div>
2234             </div>
2235             <div class="progress progress-danger">
2236               <div class="bar" style="width: 80%"></div>
2237             </div>
2238           </div>
2239
2240           <div class="bs-docs-example">
2241             <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
2242               <div class="bar" style="width: 20%"></div>
2243             </div>
2244             <div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
2245               <div class="bar" style="width: 40%"></div>
2246             </div>
2247             <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
2248               <div class="bar" style="width: 60%"></div>
2249             </div>
2250             <div class="progress progress-danger progress-striped">
2251               <div class="bar" style="width: 80%"></div>
2252             </div>
2253           </div>
2254
2255         </section>
2256
2257
2258         <!-- Media Objects
2259         ================================================== -->
2260         <section id="media">
2261           <div class="page-header">
2262             <h1>Media objects</h1>
2263           </div>
2264
2265           <h2>Default example</h2>
2266
2267           <div class="media">
2268             <a class="pull-left" href="#">
2269               <img class="media-object" src="http://placehold.it/64x64">
2270             </a>
2271             <div class="media-body">
2272               <h4 class="media-heading">Media heading</h4>
2273               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
2274             </div>
2275           </div>
2276
2277           <div class="media">
2278             <a class="pull-left" href="#">
2279               <img class="media-object" src="http://placehold.it/64x64">
2280             </a>
2281             <div class="media-body">
2282               <h4 class="media-heading">Media heading</h4>
2283               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
2284               <div class="media">
2285                 <a class="pull-left" href="#">
2286                   <img class="media-object" src="http://placehold.it/64x64">
2287                 </a>
2288                 <div class="media-body">
2289                   <h4 class="media-heading">Media heading</h4>
2290                   Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
2291                 </div>
2292               </div>
2293             </div>
2294           </div>
2295
2296           <h2>Media list</h2>
2297
2298           <ul class="media-list">
2299             <li class="media">
2300               <a class="pull-left" href="#">
2301                 <img class="media-object" src="http://placehold.it/64x64">
2302               </a>
2303               <div class="media-body">
2304                 <h4 class="media-heading">Media heading</h4>
2305                 <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
2306                 <!-- Nested media object -->
2307                 <div class="media">
2308                   <a class="pull-left" href="#">
2309                     <img class="media-object" src="http://placehold.it/64x64">
2310                   </a>
2311                   <div class="media-body">
2312                     <h4 class="media-heading">Nested media heading</h4>
2313                     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2314                     <!-- Nested media object -->
2315                     <div class="media">
2316                       <a class="pull-left" href="#">
2317                         <img class="media-object" src="http://placehold.it/64x64">
2318                       </a>
2319                       <div class="media-body">
2320                         <h4 class="media-heading">Nested media heading</h4>
2321                         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2322                       </div>
2323                     </div>
2324                   </div>
2325                 </div>
2326                 <!-- Nested media object -->
2327                 <div class="media">
2328                   <a class="pull-left" href="#">
2329                     <img class="media-object" src="http://placehold.it/64x64">
2330                   </a>
2331                   <div class="media-body">
2332                     <h4 class="media-heading">Nested media heading</h4>
2333                     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2334                   </div>
2335                 </div>
2336               </div>
2337             </li>
2338             <li class="media">
2339               <a class="pull-right" href="#">
2340                 <img class="media-object" src="http://placehold.it/64x64">
2341               </a>
2342               <div class="media-body">
2343                 <h4 class="media-heading">Media heading</h4>
2344                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2345               </div>
2346             </li>
2347           </ul>
2348
2349         </section>
2350
2351
2352
2353
2354
2355         <!-- Miscellaneous
2356         ================================================== -->
2357         <section id="misc">
2358           <div class="page-header">
2359             <h1>Miscellaneous</h1>
2360           </div>
2361
2362           <div class="bs-docs-example">
2363             <div class="well">
2364               Look, I'm in a well!
2365             </div>
2366
2367             <div class="well well-large">
2368               Look, I'm in a well-large!
2369             </div>
2370
2371             <div class="well well-small">
2372               Look, I'm in a well-small!
2373             </div>
2374
2375             <p><button class="close" style="float: none;">&times;</button></p>
2376           </div>
2377
2378           <div class="bs-docs-example tooltip-demo">
2379             <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
2380             </p>
2381           </div>
2382
2383           <div class="bs-docs-example" style="padding-bottom: 24px;">
2384             <a href="#" id="myPopover" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
2385           </div>
2386
2387         </section>
2388
2389
2390
2391       </div>
2392     </div>
2393
2394   </div>
2395
2396
2397
2398     <!-- Footer
2399     ================================================== -->
2400     <footer class="footer">
2401       <div class="container">
2402         <p class="pull-right"><a href="#top">Back to top</a></p>
2403         <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
2404         <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
2405         <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
2406         <ul class="footer-links">
2407           <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
2408           <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
2409           <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
2410         </ul>
2411       </div>
2412     </footer>
2413
2414
2415     <!-- Modal
2416      ================================================== -->
2417     <div class="modal hide fade" id="myModal">
2418       <div class="modal-header">
2419         <a class="close" data-dismiss="modal">×</a>
2420         <h3>Modal header</h3>
2421       </div>
2422       <div class="modal-body">
2423         <form>
2424           <legend>Legend</legend>
2425           <label>Label name</label>
2426           <input type="text" placeholder="Type something">
2427           <span class="help-block">Example block-level help text here.</span>
2428           <label class="checkbox">
2429             <input type="checkbox"> Check me out
2430           </label>
2431           <button type="submit" class="btn">Submit</button>
2432         </form>
2433
2434         <p>One fine body in paragraph tags…</p>
2435         And without p tags
2436       </div>
2437       <div class="modal-footer">
2438         <a href="#" class="btn">Close</a>
2439         <a href="#" class="btn btn-primary">Save changes</a>
2440       </div>
2441     </div>
2442
2443     <!-- Le javascript
2444     ================================================== -->
2445     <!-- Placed at the end of the document so the pages load faster -->
2446     <script src="../bootstrap/docs/assets/js/jquery.js"></script>
2447     <script src="../bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
2448     <script src="../bootstrap/docs/assets/js/bootstrap-transition.js"></script>
2449     <script src="../bootstrap/docs/assets/js/bootstrap-alert.js"></script>
2450     <script src="../bootstrap/docs/assets/js/bootstrap-modal.js"></script>
2451     <script src="../bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
2452     <script src="../bootstrap/docs/assets/js/bootstrap-scrollspy.js"></script>
2453     <script src="../bootstrap/docs/assets/js/bootstrap-tab.js"></script>
2454     <script src="../bootstrap/docs/assets/js/bootstrap-tooltip.js"></script>
2455     <script src="../bootstrap/docs/assets/js/bootstrap-popover.js"></script>
2456     <script src="../bootstrap/docs/assets/js/bootstrap-button.js"></script>
2457     <script src="../bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
2458     <script src="../bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
2459     <script src="../bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
2460     <script src="../bootstrap/docs/assets/js/bootstrap-affix.js"></script>
2461     <script src="jquery.smooth-scroll.min.js"></script>
2462     <script src="bootswatch.js"></script>
2463     <script>
2464
2465       $(document).ready(function () {
2466         $('.modal').modal('hide');
2467
2468         $("[rel=popover]").popover().click(function(e){
2469           e.preventDefault();
2470         });
2471       });
2472
2473     </script>
2474
2475
2476   </body>
2477 </html>