git.roojs.org Git - bootswatch/blob - 2/bower_components/bootstrap/less/tests/css-tests.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CSS Tests · 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="../../docs/assets/css/bootstrap.css" rel="stylesheet">
  12     <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
  13     <link href="../../docs/assets/css/docs.css" rel="stylesheet">
  14     <link href="../../docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
  15
  16     <!-- CSS just for the tests page -->
  17     <link href="css-tests.css" rel="stylesheet">
  18
  19     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  20     <!--[if lt IE 9]>
  21       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  22     <![endif]-->
  23
  24     <!-- Le fav and touch icons -->
  25     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
  26     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
  27       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
  28                     <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
  29                                    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
  30   </head>
  31
  32   <body>
  33
  34
  35   <!-- Navbar
  36     ================================================== -->
  37     <div class="navbar navbar-inverse navbar-fixed-top">
  38       <div class="navbar-inner">
  39         <div class="container">
  40           <a class="brand" href="../../docs/index.html">Bootstrap</a>
  41         </div>
  42       </div>
  43     </div>
  44
  45
  46 <!-- Masthead
  47 ================================================== -->
  48 <header class="jumbotron subhead" id="overview">
  49   <div class="container">
  50     <h1>CSS Tests</h1>
  51     <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
  52   </div>
  53 </header>
  54
  55
  56 <div class="bs-docs-canvas">
  57
  58   <div class="container">
  59
  60
  61
  62 <!-- Typography
  63 ================================================== -->
  64
  65 <div class="page-header">
  66   <h1>Typography</h1>
  67 </div>
  68
  69 <div class="row">
  70   <div class="span6">
  71     <div class="type-test">
  72       <h1>h1. Heading 1</h1>
  73       <h2>h2. Heading 2</h2>
  74       <h3>h3. Heading 3</h3>
  75       <h4>h4. Heading 4</h4>
  76       <h5>h5. Heading 5</h5>
  77       <h6>h6. Heading 6</h6>
  78       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  79     </div>
  80   </div>
  81   <div class="span6">
  82     <div class="type-test">
  83       <h1>h1. Heading 1</h1>
  84       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  85       <h2>h2. Heading 2</h2>
  86       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  87       <h3>h3. Heading 3</h3>
  88       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  89       <h4>h4. Heading 4</h4>
  90       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  91       <h5>h5. Heading 5</h5>
  92       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  93       <h6>h6. Heading 6</h6>
  94       <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  95     </div>
  96   </div>
  97 </div>
  98
  99
 100
 101 <!-- Responsive images
 102 ================================================== -->
 103
 104 <div class="page-header">
 105   <h1>Responsive images</h1>
 106 </div>
 107
 108 <div class="row">
 109   <div class="span4">
 110     <img data-src="holder.js/600x600" height="200">
 111   </div>
 112   <div class="span4">
 113     <img data-src="holder.js/600x600">
 114   </div>
 115   <div class="span4">
 116     <img data-src="holder.js/600x600">
 117   </div>
 118 </div>
 119
 120 <br>
 121
 122 <div class="row">
 123   <div class="span4">
 124     <img data-src="holder.js/600x900" style="width: 200px;">
 125   </div>
 126   <div class="span4">
 127     <img data-src="holder.js/200x300">
 128   </div>
 129   <div class="span4">
 130     <img data-src="holder.js/600x600">
 131   </div>
 132 </div>
 133
 134 <br><br>
 135
 136
 137
 138
 139 <!-- Fluid grid
 140 ================================================== -->
 141
 142 <div class="page-header">
 143   <h1>Fluid grids</h1>
 144 </div>
 145
 146 <div class="fluid-grid">
 147   <div class="row">
 148     <div class="span12">12
 149       <div class="row-fluid">
 150         <div class="span1">1</div>
 151         <div class="span1">1</div>
 152         <div class="span1">1</div>
 153         <div class="span1">1</div>
 154         <div class="span1">1</div>
 155         <div class="span1">1</div>
 156         <div class="span1">1</div>
 157         <div class="span1">1</div>
 158         <div class="span1">1</div>
 159         <div class="span1">1</div>
 160         <div class="span1">1</div>
 161         <div class="span1">1</div>
 162       </div>
 163     </div>
 164   </div>
 165   <div class="row">
 166     <div class="span11">11
 167       <div class="row-fluid">
 168         <div class="span1">1</div>
 169         <div class="span1">1</div>
 170         <div class="span1">1</div>
 171         <div class="span1">1</div>
 172         <div class="span1">1</div>
 173         <div class="span1">1</div>
 174         <div class="span1">1</div>
 175         <div class="span1">1</div>
 176         <div class="span1">1</div>
 177         <div class="span1">1</div>
 178         <div class="span1">1</div>
 179         <div class="span1">1</div>
 180       </div>
 181     </div>
 182     <div class="span1">1
 183       <div class="row-fluid">
 184         <div class="span1">1</div>
 185         <div class="span1">1</div>
 186         <div class="span1">1</div>
 187         <div class="span1">1</div>
 188         <div class="span1">1</div>
 189         <div class="span1">1</div>
 190         <div class="span1">1</div>
 191         <div class="span1">1</div>
 192         <div class="span1">1</div>
 193         <div class="span1">1</div>
 194         <div class="span1">1</div>
 195         <div class="span1">1</div>
 196       </div>
 197     </div>
 198   </div>
 199   <div class="row">
 200     <div class="span10">10
 201       <div class="row-fluid">
 202         <div class="span1">1</div>
 203         <div class="span1">1</div>
 204         <div class="span1">1</div>
 205         <div class="span1">1</div>
 206         <div class="span1">1</div>
 207         <div class="span1">1</div>
 208         <div class="span1">1</div>
 209         <div class="span1">1</div>
 210         <div class="span1">1</div>
 211         <div class="span1">1</div>
 212         <div class="span1">1</div>
 213         <div class="span1">1</div>
 214       </div>
 215     </div>
 216     <div class="span2">2
 217       <div class="row-fluid">
 218         <div class="span1">1</div>
 219         <div class="span1">1</div>
 220         <div class="span1">1</div>
 221         <div class="span1">1</div>
 222         <div class="span1">1</div>
 223         <div class="span1">1</div>
 224         <div class="span1">1</div>
 225         <div class="span1">1</div>
 226         <div class="span1">1</div>
 227         <div class="span1">1</div>
 228         <div class="span1">1</div>
 229         <div class="span1">1</div>
 230       </div>
 231     </div>
 232   </div>
 233   <div class="row">
 234     <div class="span9">9
 235       <div class="row-fluid">
 236         <div class="span1">1</div>
 237         <div class="span1">1</div>
 238         <div class="span1">1</div>
 239         <div class="span1">1</div>
 240         <div class="span1">1</div>
 241         <div class="span1">1</div>
 242         <div class="span1">1</div>
 243         <div class="span1">1</div>
 244         <div class="span1">1</div>
 245         <div class="span1">1</div>
 246         <div class="span1">1</div>
 247         <div class="span1">1</div>
 248       </div>
 249     </div>
 250     <div class="span3">3
 251       <div class="row-fluid">
 252         <div class="span1">1</div>
 253         <div class="span1">1</div>
 254         <div class="span1">1</div>
 255         <div class="span1">1</div>
 256         <div class="span1">1</div>
 257         <div class="span1">1</div>
 258         <div class="span1">1</div>
 259         <div class="span1">1</div>
 260         <div class="span1">1</div>
 261         <div class="span1">1</div>
 262         <div class="span1">1</div>
 263         <div class="span1">1</div>
 264       </div>
 265     </div>
 266   </div>
 267   <div class="row">
 268     <div class="span8">8
 269       <div class="row-fluid">
 270         <div class="span1">1</div>
 271         <div class="span1">1</div>
 272         <div class="span1">1</div>
 273         <div class="span1">1</div>
 274         <div class="span1">1</div>
 275         <div class="span1">1</div>
 276         <div class="span1">1</div>
 277         <div class="span1">1</div>
 278         <div class="span1">1</div>
 279         <div class="span1">1</div>
 280         <div class="span1">1</div>
 281         <div class="span1">1</div>
 282       </div>
 283     </div>
 284     <div class="span4">4
 285       <div class="row-fluid">
 286         <div class="span1">1</div>
 287         <div class="span1">1</div>
 288         <div class="span1">1</div>
 289         <div class="span1">1</div>
 290         <div class="span1">1</div>
 291         <div class="span1">1</div>
 292         <div class="span1">1</div>
 293         <div class="span1">1</div>
 294         <div class="span1">1</div>
 295         <div class="span1">1</div>
 296         <div class="span1">1</div>
 297         <div class="span1">1</div>
 298       </div>
 299     </div>
 300   </div>
 301   <div class="row">
 302     <div class="span7">7
 303       <div class="row-fluid">
 304         <div class="span1">1</div>
 305         <div class="span1">1</div>
 306         <div class="span1">1</div>
 307         <div class="span1">1</div>
 308         <div class="span1">1</div>
 309         <div class="span1">1</div>
 310         <div class="span1">1</div>
 311         <div class="span1">1</div>
 312         <div class="span1">1</div>
 313         <div class="span1">1</div>
 314         <div class="span1">1</div>
 315         <div class="span1">1</div>
 316       </div>
 317     </div>
 318     <div class="span5">5
 319       <div class="row-fluid">
 320         <div class="span1">1</div>
 321         <div class="span1">1</div>
 322         <div class="span1">1</div>
 323         <div class="span1">1</div>
 324         <div class="span1">1</div>
 325         <div class="span1">1</div>
 326         <div class="span1">1</div>
 327         <div class="span1">1</div>
 328         <div class="span1">1</div>
 329         <div class="span1">1</div>
 330         <div class="span1">1</div>
 331         <div class="span1">1</div>
 332       </div>
 333     </div>
 334   </div>
 335   <div class="row">
 336     <div class="span6">6
 337       <div class="row-fluid">
 338         <div class="span1">1</div>
 339         <div class="span1">1</div>
 340         <div class="span1">1</div>
 341         <div class="span1">1</div>
 342         <div class="span1">1</div>
 343         <div class="span1">1</div>
 344         <div class="span1">1</div>
 345         <div class="span1">1</div>
 346         <div class="span1">1</div>
 347         <div class="span1">1</div>
 348         <div class="span1">1</div>
 349         <div class="span1">1</div>
 350       </div>
 351     </div>
 352     <div class="span6">6
 353       <div class="row-fluid">
 354         <div class="span1">1</div>
 355         <div class="span1">1</div>
 356         <div class="span1">1</div>
 357         <div class="span1">1</div>
 358         <div class="span1">1</div>
 359         <div class="span1">1</div>
 360         <div class="span1">1</div>
 361         <div class="span1">1</div>
 362         <div class="span1">1</div>
 363         <div class="span1">1</div>
 364         <div class="span1">1</div>
 365         <div class="span1">1</div>
 366       </div>
 367     </div>
 368   </div>
 369 </div> <!-- fluid grids -->
 370
 371
 372
 373 <!-- Tables
 374 ================================================== -->
 375
 376 <div class="page-header">
 377   <h1>Tables</h1>
 378 </div>
 379
 380 <div class="row">
 381   <div class="span6">
 382     <h4>Bordered without thead</h4>
 383     <table class="table table-bordered">
 384       <tbody>
 385         <tr>
 386           <td>1</td>
 387           <td>2</td>
 388           <td>3</td>
 389         </tr>
 390         <tr>
 391           <td>1</td>
 392           <td>2</td>
 393           <td>3</td>
 394         </tr>
 395         <tr>
 396           <td>1</td>
 397           <td>2</td>
 398           <td>3</td>
 399         </tr>
 400       </tbody>
 401     </table>
 402     <h4>Bordered without thead, with caption</h4>
 403     <table class="table table-bordered">
 404       <caption>Table caption</caption>
 405       <tbody>
 406         <tr>
 407           <td>1</td>
 408           <td>2</td>
 409           <td>3</td>
 410         </tr>
 411         <tr>
 412           <td>1</td>
 413           <td>2</td>
 414           <td>3</td>
 415         </tr>
 416         <tr>
 417           <td>1</td>
 418           <td>2</td>
 419           <td>3</td>
 420         </tr>
 421       </tbody>
 422     </table>
 423     <h4>Bordered without thead, with colgroup</h4>
 424     <table class="table table-bordered">
 425       <colgroup>
 426         <col class="col1">
 427         <col class="col2">
 428         <col class="col3">
 429       </colgroup>
 430       <tbody>
 431         <tr>
 432           <td>1</td>
 433           <td>2</td>
 434           <td>3</td>
 435         </tr>
 436         <tr>
 437           <td>1</td>
 438           <td>2</td>
 439           <td>3</td>
 440         </tr>
 441         <tr>
 442           <td>1</td>
 443           <td>2</td>
 444           <td>3</td>
 445         </tr>
 446       </tbody>
 447       <tfoot>
 448         <tr>
 449           <td>3</td>
 450           <td>6</td>
 451           <td>9</td>
 452         </tr>
 453       </tfoot>
 454     </table>
 455     <h4>Bordered with thead, with colgroup</h4>
 456     <table class="table table-bordered">
 457       <colgroup>
 458         <col class="col1">
 459         <col class="col2">
 460         <col class="col3">
 461       </colgroup>
 462       <thead>
 463         <tr>
 464           <th>A</th>
 465           <th>B</th>
 466           <th>C</th>
 467         </tr>
 468       </thead>
 469       <tbody>
 470         <tr>
 471           <td>1</td>
 472           <td>2</td>
 473           <td>3</td>
 474         </tr>
 475         <tr>
 476           <td>1</td>
 477           <td>2</td>
 478           <td>3</td>
 479         </tr>
 480         <tr>
 481           <td>1</td>
 482           <td>2</td>
 483           <td>3</td>
 484         </tr>
 485       </tbody>
 486       <tfoot>
 487         <tr>
 488           <td>3</td>
 489           <td>6</td>
 490           <td>9</td>
 491         </tr>
 492       </tfoot>
 493     </table>
 494   </div><!--/span-->
 495   <div class="span6">
 496     <h4>Bordered with thead and caption</h4>
 497     <table class="table table-bordered">
 498       <caption>Table caption</caption>
 499       <thead>
 500         <tr>
 501           <th>1</th>
 502           <th>2</th>
 503           <th>3</th>
 504         </tr>
 505       </thead>
 506       <tbody>
 507         <tr>
 508           <td>1</td>
 509           <td>2</td>
 510           <td>3</td>
 511         </tr>
 512         <tr>
 513           <td>1</td>
 514           <td>2</td>
 515           <td>3</td>
 516         </tr>
 517         <tr>
 518           <td>1</td>
 519           <td>2</td>
 520           <td>3</td>
 521         </tr>
 522       </tbody>
 523       <tfoot>
 524         <tr>
 525           <td>3</td>
 526           <td>6</td>
 527           <td>9</td>
 528         </tr>
 529       </tfoot>
 530     </table>
 531     <h4>Bordered with rowspan and colspan</h4>
 532     <table class="table table-bordered">
 533       <thead>
 534         <tr>
 535           <th>1</th>
 536           <th>2</th>
 537           <th>3</th>
 538         </tr>
 539       </thead>
 540       <tbody>
 541         <tr>
 542           <td colspan="2">1 and 2</td>
 543           <td>3</td>
 544         </tr>
 545         <tr>
 546           <td>1</td>
 547           <td rowspan="2">2</td>
 548           <td>3</td>
 549         </tr>
 550         <tr>
 551           <td rowspan="2">1</td>
 552           <td>3</td>
 553         </tr>
 554         <tr>
 555           <td colspan="2">2 and 3</td>
 556         </tr>
 557       </tbody>
 558     </table>
 559   </div><!--/span-->
 560 </div><!--/row-->
 561
 562
 563 <h4>Grid sizing</h4>
 564 <div class="row">
 565   <div class="span12">
 566     <table class="table table-bordered">
 567       <thead>
 568         <tr>
 569           <th class="span3">1</th>
 570           <th class="span4">2</th>
 571           <th>3</th>
 572         </tr>
 573       </thead>
 574       <tbody>
 575         <tr>
 576           <td colspan="2">1 and 2</td>
 577           <td>3</td>
 578         </tr>
 579         <tr>
 580           <td>1</td>
 581           <td rowspan="2">2</td>
 582           <td>3</td>
 583         </tr>
 584         <tr>
 585           <td rowspan="2">1</td>
 586           <td>3</td>
 587         </tr>
 588         <tr>
 589           <td colspan="2">2 and 3</td>
 590         </tr>
 591       </tbody>
 592     </table>
 593   </div>
 594 </div><!--/row-->
 595
 596 <h4>Nesting and striping</h4>
 597 <table class="table table-bordered table-striped">
 598   <thead>
 599     <tr>
 600       <th>Test</th>
 601     </tr>
 602   </thead>
 603   <tbody>
 604     <tr>
 605       <td>
 606         <table class="table table-bordered table-striped">
 607           <thead>
 608             <tr>
 609               <th>Test</th>
 610               <th>Test</th>
 611             </tr>
 612           </thead>
 613           <tbody>
 614             <tr>
 615               <td>
 616                 test
 617               </td>
 618               <td>
 619                 test
 620               </td>
 621             </tr>
 622             <tr>
 623               <td>
 624                 test
 625               </td>
 626               <td>
 627                 test
 628               </td>
 629             </tr>
 630             <tr>
 631               <td>
 632                 test
 633               </td>
 634               <td>
 635                 test
 636               </td>
 637             </tr>
 638           </tbody>
 639         </table>
 640       </td>
 641     </tr>
 642   </tbody>
 643 </table>
 644
 645 <h4>Fluid grid sizing</h4>
 646 <div class="row-fluid">
 647   <div class="span12">
 648     <table class="table table-bordered">
 649       <thead>
 650         <tr>
 651           <th class="span3">1</th>
 652           <th class="span4">2</th>
 653           <th>3</th>
 654         </tr>
 655       </thead>
 656       <tbody>
 657         <tr>
 658           <td colspan="2">1 and 2</td>
 659           <td>3</td>
 660         </tr>
 661         <tr>
 662           <td>1</td>
 663           <td rowspan="2">2</td>
 664           <td>3</td>
 665         </tr>
 666         <tr>
 667           <td rowspan="2">1</td>
 668           <td>3</td>
 669         </tr>
 670         <tr>
 671           <td colspan="2">2 and 3</td>
 672         </tr>
 673       </tbody>
 674     </table>
 675   </div>
 676 </div><!--/row-->
 677
 678
 679
 680 <!-- Forms
 681 ================================================== -->
 682
 683 <div class="page-header">
 684   <h1>Forms</h1>
 685 </div>
 686
 687 <h4>Buttons and button groups</h4>
 688 <form class="form-inline">
 689   <button class="btn btn-success">Save</button>
 690   <button class="btn btn-info">Add new</button>
 691   <div class="btn-group">
 692     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
 693       <i class="icon-user"></i> User
 694       <span class="caret"></span>
 695     </a>
 696     <ul class="dropdown-menu">
 697       <li><a href="#">Profile</a></li>
 698       <li class="divider"></li>
 699       <li><a href="#">Sign Out</a></li>
 700     </ul>
 701   </div>
 702 </form>
 703
 704 <h4>Horizontal form errors</h4>
 705 <form class="form-horizontal">
 706   <div class="control-group error">
 707     <label class="control-label" for="inputError">Radio with error</label>
 708     <div class="controls">
 709       <label class="radio">
 710         <input type="radio" id="inputError"> Oh hai
 711       </label>
 712       <span class="help-inline">Please correct the error</span>
 713     </div>
 714   </div>
 715 </form>
 716
 717 <div class="row">
 718   <div class="span4">
 719     <h4>Prepend and append on inputs</h4>
 720     <form>
 721       <div class="controls">
 722         <div class="input-prepend">
 723           <span class="add-on">@</span>
 724           <input class="span2" id="prependedInput" size="16" type="text">
 725         </div>
 726       </div>
 727       <div class="controls">
 728         <div class="input-append">
 729           <input class="span2" id="prependedInput" size="16" type="text">
 730           <span class="add-on">@</span>
 731         </div>
 732       </div>
 733       <div class="controls">
 734         <div class="input-prepend input-append">
 735           <span class="add-on">$</span>
 736           <input class="span2" id="prependedInput" size="16" type="text">
 737           <span class="add-on">.00</span>
 738         </div>
 739       </div>
 740     </form>
 741   </div><!--/span-->
 742   <div class="span4">
 743     <h4>Prepend and append with uneditable</h4>
 744     <form>
 745       <div class="input-prepend">
 746         <span class="add-on">$</span>
 747         <span class="span2 uneditable-input">Some value here</span>
 748       </div>
 749       <div class="input-append">
 750         <span class="span2 uneditable-input">Some value here</span>
 751         <span class="add-on">.00</span>
 752       </div>
 753       <div class="input-prepend input-append">
 754         <span class="add-on">$</span>
 755         <span class="span2 uneditable-input">Some value here</span>
 756         <span class="add-on">.00</span>
 757       </div>
 758     </form>
 759   </div><!--/span-->
 760   <div class="span4">
 761     <h4>Prepend with type="submit"</h4>
 762     <form class="form-search">
 763       <div class="input-append">
 764         <input type="text" class="span2 search-query" value="" name="q">
 765         <input type="submit" value="Search" class="btn">
 766       </div>
 767     </form>
 768     <div class="input-append">
 769       <input type="text" class="span2" value="" name="">
 770       <input type="submit" value="Button" class="btn">
 771     </div>
 772     <div class="input-append">
 773       <input type="text" size="16" id="appendedInputButtons" class="span2">
 774       <input type="submit" value="Search" class="btn">
 775       <button type="button" class="btn">Options</button>
 776     </div>
 777   </div><!--/span-->
 778 </div><!--/row-->
 779
 780 <h4>Fluid prepended and appended inputs</h4>
 781 <div class="row-fluid">
 782   <div class="span6">
 783     <form>
 784       <div class="controls">
 785         <div class="input-prepend">
 786           <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
 787         </div>
 788       </div>
 789       <div class="controls">
 790         <div class="input-append">
 791           <input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
 792         </div>
 793       </div>
 794       <div class="controls">
 795         <div class="input-prepend input-append">
 796           <span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
 797         </div>
 798       </div>
 799     </form>
 800   </div>
 801 </div>
 802
 803 <h4>Fixed row with inputs</h4>
 804 <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
 805
 806 <div class="rowInputs">
 807   <div class="row">
 808     <div class="span12">
 809       <input type="text" class="span1" placeholder="span1">
 810     </div><!--/span-->
 811   </div><!--/row-->
 812   <div class="row">
 813     <div class="span12">
 814       <input type="text" class="span2" placeholder="span2">
 815     </div><!--/span-->
 816   </div><!--/row-->
 817   <div class="row">
 818     <div class="span12">
 819       <input type="text" class="span3" placeholder="span3">
 820     </div><!--/span-->
 821   </div><!--/row-->
 822   <div class="row">
 823     <div class="span12">
 824       <input type="text" class="span4" placeholder="span4">
 825     </div><!--/span-->
 826   </div><!--/row-->
 827   <div class="row">
 828     <div class="span12">
 829       <input type="text" class="span5" placeholder="span5">
 830     </div><!--/span-->
 831   </div><!--/row-->
 832   <div class="row">
 833     <div class="span12">
 834       <input type="text" class="span6" placeholder="span6">
 835     </div><!--/span-->
 836   </div><!--/row-->
 837   <div class="row">
 838     <div class="span12">
 839       <input type="text" class="span7" placeholder="span7">
 840     </div><!--/span-->
 841   </div><!--/row-->
 842   <div class="row">
 843     <div class="span12">
 844       <input type="text" class="span8" placeholder="span8">
 845     </div><!--/span-->
 846   </div><!--/row-->
 847   <div class="row">
 848     <div class="span12">
 849       <input type="text" class="span9" placeholder="span9">
 850     </div><!--/span-->
 851   </div><!--/row-->
 852   <div class="row">
 853     <div class="span12">
 854       <input type="text" class="span10" placeholder="span10">
 855     </div><!--/span-->
 856   </div><!--/row-->
 857   <div class="row">
 858     <div class="span12">
 859       <input type="text" class="span11" placeholder="span11">
 860     </div><!--/span-->
 861   </div><!--/row-->
 862   <div class="row">
 863     <div class="span12">
 864       <input type="text" class="span12" placeholder="span12">
 865     </div><!--/span-->
 866   </div><!--/row-->
 867 </div>
 868 <br>
 869
 870 <h4>Fluid row with inputs</h4>
 871 <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
 872 <div id="fluidRowInputs">
 873   <div class="row-fluid">
 874     <div class="span12">
 875       <input type="text" class="span1" placeholder="span1">
 876     </div><!--/span-->
 877   </div><!--/row-->
 878   <div class="row-fluid">
 879     <div class="span12">
 880       <input type="text" class="span2" placeholder="span2">
 881     </div><!--/span-->
 882   </div><!--/row-->
 883   <div class="row-fluid">
 884     <div class="span12">
 885       <input type="text" class="span3" placeholder="span3">
 886     </div><!--/span-->
 887   </div><!--/row-->
 888   <div class="row-fluid">
 889     <div class="span12">
 890       <input type="text" class="span4" placeholder="span4">
 891     </div><!--/span-->
 892   </div><!--/row-->
 893   <div class="row-fluid">
 894     <div class="span12">
 895       <input type="text" class="span5" placeholder="span5">
 896     </div><!--/span-->
 897   </div><!--/row-->
 898   <div class="row-fluid">
 899     <div class="span12">
 900       <input type="text" class="span6" placeholder="span6">
 901     </div><!--/span-->
 902   </div><!--/row-->
 903   <div class="row-fluid">
 904     <div class="span12">
 905       <input type="text" class="span7" placeholder="span7">
 906     </div><!--/span-->
 907   </div><!--/row-->
 908   <div class="row-fluid">
 909     <div class="span12">
 910       <input type="text" class="span8" placeholder="span8">
 911     </div><!--/span-->
 912   </div><!--/row-->
 913   <div class="row-fluid">
 914     <div class="span12">
 915       <input type="text" class="span9" placeholder="span9">
 916     </div><!--/span-->
 917   </div><!--/row-->
 918   <div class="row-fluid">
 919     <div class="span12">
 920       <input type="text" class="span10" placeholder="span10">
 921     </div><!--/span-->
 922   </div><!--/row-->
 923   <div class="row-fluid">
 924     <div class="span12">
 925       <input type="text" class="span11" placeholder="span11">
 926     </div><!--/span-->
 927   </div><!--/row-->
 928   <div class="row-fluid">
 929     <div class="span12">
 930       <input type="text" class="span12" placeholder="span12">
 931     </div><!--/span-->
 932   </div><!--/row-->
 933 </div>
 934
 935 <br>
 936
 937 <h4>Inline form in fluid row</h4>
 938
 939 <div class="row-fluid">
 940   <div class="span12">
 941     <form class="form-inline">
 942       <input type="text" class="span3" placeholder="Email">
 943       <input type="password" class="span3" placeholder="Password">
 944       <label class="checkbox">
 945         <input type="checkbox"> Remember me
 946       </label>
 947       <button type="submit" class="btn">Sign in</button>
 948     </form>
 949   </div>
 950 </div>
 951
 952
 953 <br>
 954
 955
 956 <h4>Fluid textarea at .span12</h4>
 957 <div class="row-fluid">
 958   <div class="span12">
 959     <textarea class="span12"></textarea>
 960   </div>
 961 </div>
 962
 963
 964 <br>
 965
 966
 967 <h4>Selects</h4>
 968 <form>
 969   <select class="span4">
 970     <option>Option</option>
 971   </select>
 972 </form>
 973
 974
 975 <br>
 976
 977
 978
 979
 980 <!-- Dropdowns
 981 ================================================== -->
 982
 983 <div class="page-header">
 984   <h1>Dropdowns</h1>
 985 </div>
 986
 987 <h4>Dropdown link with hash URL</h4>
 988 <ul class="nav nav-pills">
 989   <li class="active"><a href="#">Link</a></li>
 990   <li><a href="#">Example link</a></li>
 991   <li class="dropdown">
 992     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 993       Dropdown <span class="caret"></span>
 994     </a>
 995     <ul class="dropdown-menu">
 996       <li><a href="#">Action</a></li>
 997       <li><a href="#">Another action</a></li>
 998       <li><a href="#">Something else here</a></li>
 999       <li class="divider"></li>
1000       <li><a href="#">Separated link</a></li>
1001     </ul>
1002   </li>
1003 </ul>
1004
1005 <h4>Dropdown link with custom URL and data-target</h4>
1006 <ul class="nav nav-pills">
1007   <li class="active"><a href="#">Link</a></li>
1008   <li><a href="#">Example link</a></li>
1009   <li class="dropdown">
1010     <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
1011       Dropdown <span class="caret"></span>
1012     </a>
1013     <ul class="dropdown-menu">
1014       <li><a href="#">Action</a></li>
1015       <li><a href="#">Another action</a></li>
1016       <li><a href="#">Something else here</a></li>
1017       <li class="divider"></li>
1018       <li><a href="#">Separated link</a></li>
1019     </ul>
1020   </li>
1021 </ul>
1022
1023 <h4>Dropdown on a button</h4>
1024 <div style="position: relative;">
1025   <button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
1026   <ul class="dropdown-menu">
1027     <li><a href="#">Action</a></li>
1028     <li><a href="#">Another action</a></li>
1029     <li><a href="#">Something else here</a></li>
1030     <li class="divider"></li>
1031     <li><a href="#">Separated link</a></li>
1032   </ul>
1033 </div>
1034
1035 <br>
1036
1037
1038 <!-- Thumbnails
1039 ================================================== -->
1040
1041 <div class="page-header">
1042   <h1>Thumbnails</h1>
1043 </div>
1044
1045 <h4>Default thumbnails (no grid sizing)</h4>
1046 <ul class="thumbnails">
1047   <li class="thumbnail">
1048     <img data-src="holder.js/260x180" alt="">
1049   </li>
1050   <li class="thumbnail">
1051     <img data-src="holder.js/260x180" alt="">
1052   </li>
1053   <li class="thumbnail">
1054     <img data-src="holder.js/260x180" alt="">
1055   </li>
1056   <li class="thumbnail">
1057     <img data-src="holder.js/260x180" alt="">
1058   </li>
1059 </ul>
1060
1061 <!-- NOT CURRENTLY SUPPORTED
1062 <h4>Offset thumbnails</h4>
1063 <ul class="thumbnails">
1064   <li class="span3 offset3">
1065     <a href="#" class="thumbnail">
1066       <img data-src="holder.js/260x180" alt="">
1067     </a>
1068   </li>
1069   <li class="span3">
1070     <a href="#" class="thumbnail">
1071       <img data-src="holder.js/260x180" alt="">
1072     </a>
1073   </li>
1074   <li class="span3">
1075     <a href="#" class="thumbnail">
1076       <img data-src="holder.js/260x180" alt="">
1077     </a>
1078   </li>
1079 </ul>
1080 -->
1081
1082 <h4>Standard grid sizing</h4>
1083 <ul class="thumbnails">
1084   <li class="span3">
1085     <a href="#" class="thumbnail">
1086       <img data-src="holder.js/260x180" alt="">
1087     </a>
1088   </li>
1089   <li class="span3 offset3">
1090     <a href="#" class="thumbnail">
1091       <img data-src="holder.js/260x180" alt="">
1092     </a>
1093   </li>
1094   <li class="span3">
1095     <a href="#" class="thumbnail">
1096       <img data-src="holder.js/260x180" alt="">
1097     </a>
1098   </li>
1099 </ul>
1100
1101 <h4>Fluid thumbnails</h4>
1102 <div class="row-fluid">
1103   <div class="span8">
1104     <ul class="thumbnails">
1105       <li class="span4">
1106         <a href="#" class="thumbnail">
1107           <img data-src="holder.js/260x180" alt="">
1108         </a>
1109       </li>
1110       <li class="span4">
1111         <a href="#" class="thumbnail">
1112           <img data-src="holder.js/260x180" alt="">
1113         </a>
1114       </li>
1115       <li class="span4">
1116         <a href="#" class="thumbnail">
1117           <img data-src="holder.js/260x180" alt="">
1118         </a>
1119       </li>
1120     </ul>
1121   </div>
1122 </div>
1123
1124
1125
1126 <!-- Tabs
1127 ================================================== -->
1128
1129 <div class="page-header">
1130   <h1>Tabs</h1>
1131 </div>
1132
1133 <div class="tabbable tabs-left" style="margin-bottom: 18px;">
1134   <ul class="nav nav-tabs">
1135     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
1136     <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
1137     <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
1138   </ul>
1139   <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1140     <div class="tab-pane active" id="tab1">
1141       <p>I'm in Section 1.</p>
1142
1143       <div class="tabbable" style="background: #f5f5f5; padding: 20px;">
1144         <ul class="nav nav-tabs">
1145           <li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
1146           <li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
1147           <li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
1148         </ul>
1149         <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1150           <div class="tab-pane active" id="tab1-1">
1151             <p>I'm in Section 1.1.</p>
1152           </div>
1153           <div class="tab-pane" id="tab1-2">
1154             <p>I'm in Section 1.2.</p>
1155           </div>
1156           <div class="tab-pane" id="tab1-3">
1157             <p>I'm in Section 1.3.</p>
1158           </div>
1159         </div>
1160       </div>
1161     </div>
1162     <div class="tab-pane" id="tab2">
1163       <p>Howdy, I'm in Section 2.</p>
1164     </div>
1165     <div class="tab-pane" id="tab3">
1166       <p>What up girl, this is Section 3.</p>
1167     </div>
1168   </div>
1169 </div> <!-- /tabbable -->
1170
1171 <br>
1172
1173
1174 <!-- Labels
1175 ================================================== -->
1176
1177 <div class="page-header">
1178   <h1>Labels</h1>
1179 </div>
1180
1181 <div class="row">
1182   <div class="span4">
1183     <h4>Inline label</h4>
1184     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam <span class="label label-warning">Label name</span> eget risus varius blandit sit amet non magna. Fusce <code>.class-name</code> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
1185   </div><!--/span-->
1186   <div class="span4">
1187     <form class="form-horizontal">
1188       <label>Example label</label>
1189       <input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
1190     </form>
1191   </div><!--/span-->
1192   <div class="span4">
1193     <button class="btn">Action <span class="badge">2</span></button>
1194     <button class="btn">Action <span class="label">2</span></button>
1195   </div><!--/span-->
1196 </div><!--/row-->
1197
1198 <br>
1199
1200
1201 <!-- Button groups
1202 ================================================== -->
1203
1204 <div class="page-header">
1205   <h1>Buttons</h1>
1206 </div>
1207
1208 <table class="table table-bordered">
1209   <tbody>
1210     <tr>
1211       <td>
1212         Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
1213       </td>
1214       <td>
1215         <div class="btn-group">
1216           <button class="btn">1</button>
1217           <button class="btn">2</button>
1218           <button class="btn">3</button>
1219           <button class="btn">4</button>
1220         </div>
1221       </td>
1222     </tr>
1223   </tbody>
1224 </table>
1225
1226 <h4>Mini buttons: text and icon</h4>
1227 <div class="btn-group">
1228   <button class="btn btn-mini">Button text</button>
1229   <button class="btn btn-mini"><i class="icon-cog"></i></button>
1230 </div>
1231
1232 <br>
1233
1234
1235
1236 <!-- Responsive utility classes
1237 ================================================== -->
1238
1239 <div class="page-header">
1240   <h1>Responsive utility classes</h1>
1241 </div>
1242
1243 <h4>Visible on...</h4>
1244 <ul class="responsive-utilities-test visible-on">
1245   <li>Phone<span class="visible-phone">✔ Phone</span></li>
1246   <li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
1247   <li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
1248 </ul>
1249 <ul class="responsive-utilities-test visible-on">
1250   <li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li>
1251   <li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li>
1252   <li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
1253 </ul>
1254
1255 <h4>Hidden on...</h4>
1256 <ul class="responsive-utilities-test hidden-on">
1257   <li>Phone<span class="hidden-phone">✔ Phone</span></li>
1258   <li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
1259   <li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
1260 </ul>
1261 <ul class="responsive-utilities-test hidden-on">
1262   <li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li>
1263   <li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li>
1264   <li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
1265 </ul>
1266
1267
1268
1269 <!-- Gradients
1270 ================================================== -->
1271
1272 <div class="page-header">
1273   <h1>Gradients</h1>
1274 </div>
1275
1276 <h4>Horizontal</h4>
1277 <div class="gradient-horizontal"></div>
1278
1279 <h4>Vertical</h4>
1280 <div class="gradient-vertical"></div>
1281
1282 <h4>Directional</h4>
1283 <div class="gradient-directional"></div>
1284
1285 <h4>Three colors</h4>
1286 <div class="gradient-vertical-three"></div>
1287
1288 <h4>Radial</h4>
1289 <div class="gradient-radial"></div>
1290
1291 <h4>Striped</h4>
1292 <div class="gradient-striped"></div>
1293
1294 <h4>Horizontal three colors</h4>
1295 <div class="gradient-horizontal-three"></div>
1296
1297
1298
1299 <div class="page-header">
1300   <h1>Alerts</h1>
1301 </div>
1302
1303 <h4>Alert default</h4>
1304 <div class="alert">
1305   <button type="button" class="close" data-dismiss="alert">&times;</button>
1306   <strong>Alert!</strong> Best check yourself, you're not looking too good.
1307 </div>
1308 <div class="alert alert-block">
1309   <button type="button" class="close" data-dismiss="alert">&times;</button>
1310   <p><strong>Alert!</strong> Best check yourself, you're not looking too good.</p>
1311 </div>
1312
1313 <h4>Success</h4>
1314 <div class="alert alert-success">
1315   <button type="button" class="close" data-dismiss="alert">&times;</button>
1316   <strong>Success!</strong> Best check yourself, you're not looking too good.
1317 </div>
1318 <div class="alert alert-block alert-success">
1319   <button type="button" class="close" data-dismiss="alert">&times;</button>
1320   <p><strong>Success!</strong> Best check yourself, you're not looking too good.</p>
1321 </div>
1322
1323 <h4>Info</h4>
1324 <div class="alert alert-info">
1325   <button type="button" class="close" data-dismiss="alert">&times;</button>
1326   <strong>Info!</strong> Best check yourself, you're not looking too good.
1327 </div>
1328 <div class="alert alert-block alert-info">
1329   <button type="button" class="close" data-dismiss="alert">&times;</button>
1330   <p><strong>Info!</strong> Best check yourself, you're not looking too good.</p>
1331 </div>
1332
1333 <h4>Warning</h4>
1334 <div class="alert ">
1335   <button type="button" class="close" data-dismiss="alert">&times;</button>
1336   <strong>Warning!</strong> Best check yourself, you're not looking too good.
1337 </div>
1338 <div class="alert alert-block alert-warning">
1339   <button type="button" class="close" data-dismiss="alert">&times;</button>
1340   <p><strong>Warning!</strong> Best check yourself, you're not looking too good.</p>
1341 </div>
1342
1343 <h4>Error</h4>
1344 <div class="alert alert-error">
1345   <button type="button" class="close" data-dismiss="alert">&times;</button>
1346   <strong>Error!</strong> Best check yourself, you're not looking too good.
1347 </div>
1348 <div class="alert alert-block alert-error">
1349   <button type="button" class="close" data-dismiss="alert">&times;</button>
1350   <p><strong>Error!</strong> Best check yourself, you're not looking too good.</p>
1351 </div>
1352
1353
1354     </div><!-- /container -->
1355
1356
1357
1358     <!-- Footer
1359     ================================================== -->
1360     <footer class="footer">
1361       <div class="container">
1362         <p class="pull-right"><a href="#">Back to top</a></p>
1363         <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>
1364         <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>
1365         <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>
1366         <ul class="footer-links">
1367           <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
1368           <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Submit issues</a></li>
1369           <li><a href="https://github.com/twbs/bootstrap/wiki">Roadmap and changelog</a></li>
1370         </ul>
1371       </div>
1372     </footer>
1373
1374 </div>
1375
1376
1377     <!-- Le javascript
1378     ================================================== -->
1379     <!-- Placed at the end of the document so the pages load faster -->
1380     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
1381     <script src="../../docs/assets/js/jquery.js"></script>
1382     <script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
1383     <script src="../../docs/assets/js/bootstrap-transition.js"></script>
1384     <script src="../../docs/assets/js/bootstrap-alert.js"></script>
1385     <script src="../../docs/assets/js/bootstrap-modal.js"></script>
1386     <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
1387     <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
1388     <script src="../../docs/assets/js/bootstrap-tab.js"></script>
1389     <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
1390     <script src="../../docs/assets/js/bootstrap-popover.js"></script>
1391     <script src="../../docs/assets/js/bootstrap-button.js"></script>
1392     <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
1393     <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
1394     <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
1395     <script src="../../docs/assets/js/application.js"></script>
1396
1397
1398   </body>
1399 </html>