docs/styleguide/components.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Components - SugarCRM Patterns and Styleguide</title>
   6     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   7     <meta name="apple-mobile-web-app-capable" content="yes">
   8     <meta name="apple-mobile-web-app-status-bar-style" content="black">
   9     <meta name="description" content="">
  10     <meta name="author" content="">
  11
  12     <!-- HTML5 shim, for IE6-8 support of HTML elements -->
  13     <!--[if lt IE 9]>
  14       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  15     <![endif]-->
  16
  17     <link href="../../themes/default/css/bootstrap.css" rel="stylesheet">
  18
  19     <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
  20     <link href="../../themes/default/images/sugar_icon.ico" rel="SHORTCUT ICON">
  21   </head>
  22
  23   <body data-spy="scroll" data-target=".subnav" data-offset="50">
  24
  25
  26   <!-- Navbar
  27     ================================================== -->
  28     <div class="navbar navbar-fixed-top">
  29       <div class="navbar-inner">
  30         <div class="container">
  31           <a class="cube" href="index.html" rel="tooltip" title="Dashboard"></a>
  32           <div class="nav-collapse">
  33             <ul class="nav">
  34               <li>
  35                 <a href="index.html">Overview</a>
  36               </li>
  37               <li>
  38                 <a href="scaffolding.html">Scaffolding</a>
  39               </li>
  40               <li>
  41                 <a href="base-css.html">Base CSS</a>
  42               </li>
  43               <li class="active">
  44                 <a href="components.html">Components</a>
  45               </li>
  46               <li>
  47                 <a href="widgets.html">Widgets</a>
  48               </li>
  49               <li>
  50                 <a href="less.html">Quick Styles</a>
  51               </li>
  52
  53             </ul>
  54           </div>
  55         </div>
  56       </div>
  57     </div>
  58
  59     <div class="container">
  60
  61 <!-- Masthead
  62 ================================================== -->
  63 <header class="jumbotron subhead" id="overview">
  64   <h1>Components</h1>
  65   <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
  66   <div class="subnav">
  67     <ul class="nav nav-pills">
  68       <li class="dropdown">
  69         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
  70         <ul class="dropdown-menu">
  71           <li><a href="#buttonGroups">Button groups</a></li>
  72           <li><a href="#buttonDropdowns">Button dropdowns</a></li>
  73         </ul>
  74       </li>
  75       <li class="dropdown">
  76         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a>
  77         <ul class="dropdown-menu">
  78           <li><a href="#navs">Nav, tabs, pills</a></li>
  79           <li><a href="#navbar">Navbar</a></li>
  80           <li><a href="#breadcrumbs">Breadcrumbs</a></li>
  81           <li><a href="#pagination">Pagination</a></li>
  82         </ul>
  83       </li>
  84       <li><a href="#labels">Labels</a></li>
  85       <li><a href="#thumbnails">Thumbnails</a></li>
  86       <li><a href="#alerts">Alerts</a></li>
  87       <li><a href="#progress">Progress bars</a></li>
  88       <li><a href="#misc">Miscellaneous</a></li>
  89     </ul>
  90   </div>
  91 </header>
  92
  93
  94
  95 <!-- Button Groups
  96 ================================================== -->
  97 <section id="buttonGroups">
  98   <div class="page-header">
  99     <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
 100   </div>
 101   <div class="row">
 102     <div class="span4">
 103       <h3>Button groups</h3>
 104       <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
 105       <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
 106       <div class="btn-toolbar" style="margin-top: 18px;">
 107         <div class="btn-group">
 108           <a class="btn" href="#">Left</a>
 109           <a class="btn" href="#">Middle</a>
 110           <a class="btn" href="#">Right</a>
 111         </div>
 112       </div>
 113       <div class="btn-toolbar">
 114         <div class="btn-group">
 115           <a class="btn" href="#">1</a>
 116           <a class="btn" href="#">2</a>
 117           <a class="btn" href="#">3</a>
 118           <a class="btn" href="#">4</a>
 119         </div>
 120         <div class="btn-group">
 121           <a class="btn" href="#">5</a>
 122           <a class="btn" href="#">6</a>
 123           <a class="btn" href="#">7</a>
 124         </div>
 125         <div class="btn-group">
 126           <a class="btn" href="#">8</a>
 127         </div>
 128       </div>
 129     </div>
 130     <div class="span4">
 131       <h3>Example markup</h3>
 132       <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
 133 <pre class="prettyprint linenums">
 134 &lt;div class="btn-group"&gt;
 135   &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
 136   &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
 137   &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
 138 &lt;/div&gt;
 139 </pre>
 140       <p>And with a toolbar for multiple groups:</p>
 141 <pre class="prettyprint linenums">
 142 &lt;div class="btn-toolbar"&gt;
 143   &lt;div class="btn-group"&gt;
 144     ...
 145   &lt;/div&gt;
 146 &lt;/div&gt;
 147 </pre>
 148     </div>
 149     <div class="span4">
 150       <h3>Checkbox and radio flavors</h3>
 151       <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="widgets.html#buttons">the Javascript docs</a> for that.</p>
 152       <p><a class="btn js-btn" href="widgets.html#buttons">Get the javascript &raquo;</a></p>
 153       <hr>
 154       <h4 class="muted">Heads up</h4>
 155       <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
 156     </div>
 157   </div>
 158 </section>
 159
 160
 161
 162 <!-- Split button dropdowns
 163 ================================================== -->
 164 <section id="buttonDropdowns">
 165   <div class="page-header">
 166     <h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
 167   </div>
 168
 169   <div class="row">
 170     <div class="span4">
 171       <h3>Button dropdowns</h3>
 172       <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
 173       <div class="btn-toolbar" style="margin-top: 18px;">
 174         <div class="btn-group">
 175           <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
 176           <ul class="dropdown-menu">
 177             <li><a href="#">Action</a></li>
 178             <li><a href="#">Another action</a></li>
 179             <li><a href="#">Something else here</a></li>
 180             <li class="divider"></li>
 181             <li><a href="#">Separated link</a></li>
 182           </ul>
 183         </div><!-- /btn-group -->
 184         <div class="btn-group">
 185           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
 186           <ul class="dropdown-menu">
 187             <li><a href="#">Action</a></li>
 188             <li><a href="#">Another action</a></li>
 189             <li><a href="#">Something else here</a></li>
 190             <li class="divider"></li>
 191             <li><a href="#">Separated link</a></li>
 192           </ul>
 193         </div><!-- /btn-group -->
 194         <div class="btn-group">
 195           <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">Danger <span class="caret"></span></a>
 196           <ul class="dropdown-menu">
 197             <li><a href="#">Action</a></li>
 198             <li><a href="#">Another action</a></li>
 199             <li><a href="#">Something else here</a></li>
 200             <li class="divider"></li>
 201             <li><a href="#">Separated link</a></li>
 202           </ul>
 203         </div><!-- /btn-group -->
 204       </div>
 205       <div class="btn-toolbar">
 206         <div class="btn-group">
 207           <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">Success <span class="caret"></span></a>
 208           <ul class="dropdown-menu">
 209             <li><a href="#">Action</a></li>
 210             <li><a href="#">Another action</a></li>
 211             <li><a href="#">Something else here</a></li>
 212             <li class="divider"></li>
 213             <li><a href="#">Separated link</a></li>
 214           </ul>
 215         </div><!-- /btn-group -->
 216         <div class="btn-group">
 217           <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">Info <span class="caret"></span></a>
 218           <ul class="dropdown-menu">
 219             <li><a href="#">Action</a></li>
 220             <li><a href="#">Another action</a></li>
 221             <li><a href="#">Something else here</a></li>
 222             <li class="divider"></li>
 223             <li><a href="#">Separated link</a></li>
 224           </ul>
 225         </div><!-- /btn-group -->
 226       </div>
 227     </div>
 228     <div class="span8">
 229       <h3>Example markup</h3>
 230       <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
 231 <pre class="prettyprint linenums">
 232 &lt;div class="btn-group"&gt;
 233   &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
 234     Action
 235     &lt;span class="caret"&gt;&lt;/span&gt;
 236   &lt;/a&gt;
 237   &lt;ul class="dropdown-menu"&gt;
 238     &lt;!-- dropdown menu links --&gt;
 239   &lt;/ul&gt;
 240 &lt;/div&gt;
 241 </pre>
 242     </div>
 243   </div>
 244
 245   <div class="row">
 246     <div class="span4">
 247       <h3>Split button dropdowns</h3>
 248       <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
 249       <div class="btn-toolbar" style="margin-top: 18px;">
 250         <div class="btn-group">
 251           <a class="btn" href="#">Action</a>
 252           <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 253           <ul class="dropdown-menu">
 254             <li><a href="#">Action</a></li>
 255             <li><a href="#">Another action</a></li>
 256             <li><a href="#">Something else here</a></li>
 257             <li class="divider"></li>
 258             <li><a href="#">Separated link</a></li>
 259           </ul>
 260         </div><!-- /btn-group -->
 261         <div class="btn-group">
 262           <a class="btn btn-primary" href="#">Action</a>
 263           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 264           <ul class="dropdown-menu">
 265             <li><a href="#">Action</a></li>
 266             <li><a href="#">Another action</a></li>
 267             <li><a href="#">Something else here</a></li>
 268             <li class="divider"></li>
 269             <li><a href="#">Separated link</a></li>
 270           </ul>
 271         </div><!-- /btn-group -->
 272         <div class="btn-group">
 273           <a class="btn btn-danger" href="#">Danger</a>
 274           <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 275           <ul class="dropdown-menu">
 276             <li><a href="#">Action</a></li>
 277             <li><a href="#">Another action</a></li>
 278             <li><a href="#">Something else here</a></li>
 279             <li class="divider"></li>
 280             <li><a href="#">Separated link</a></li>
 281           </ul>
 282         </div><!-- /btn-group -->
 283       </div>
 284       <div class="btn-toolbar">
 285         <div class="btn-group">
 286           <a class="btn btn-success" href="#">Success</a>
 287           <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 288           <ul class="dropdown-menu">
 289             <li><a href="#">Action</a></li>
 290             <li><a href="#">Another action</a></li>
 291             <li><a href="#">Something else here</a></li>
 292             <li class="divider"></li>
 293             <li><a href="#">Separated link</a></li>
 294           </ul>
 295         </div><!-- /btn-group -->
 296         <div class="btn-group">
 297           <a class="btn btn-info" href="#">Info</a>
 298           <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
 299           <ul class="dropdown-menu">
 300             <li><a href="#">Action</a></li>
 301             <li><a href="#">Another action</a></li>
 302             <li><a href="#">Something else here</a></li>
 303             <li class="divider"></li>
 304             <li><a href="#">Separated link</a></li>
 305           </ul>
 306         </div><!-- /btn-group -->
 307       </div>
 308     </div>
 309     <div class="span8">
 310       <h3>Example markup</h3>
 311       <p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
 312 <pre class="prettyprint linenums">
 313 &lt;div class="btn-group"&gt;
 314   &lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
 315   &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
 316     &lt;span class="caret"&gt;&lt;/span&gt;
 317   &lt;/a&gt;
 318   &lt;ul class="dropdown-menu"&gt;
 319     &lt;!-- dropdown menu links --&gt;
 320   &lt;/ul&gt;
 321 &lt;/div&gt;
 322 </pre>
 323     </div>
 324   </div>
 325 </section>
 326
 327
 328
 329 <!-- Nav, Tabs, & Pills
 330 ================================================== -->
 331 <section id="navs">
 332   <div class="page-header">
 333     <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
 334   </div>
 335
 336   <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
 337   <div class="row">
 338     <div class="span4">
 339       <h3>Powerful base class</h3>
 340       <p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
 341       <h3>Why tabs and pills</h3>
 342       <p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
 343       <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
 344     </div>
 345     <div class="span4">
 346       <h3>Basic tabs</h3>
 347       <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
 348       <ul class="nav nav-tabs">
 349         <li class="active"><a href="#">Home</a></li>
 350         <li><a href="#">Profile</a></li>
 351         <li><a href="#">Messages</a></li>
 352       </ul>
 353 <pre class="prettyprint linenums">
 354 &lt;ul class="nav nav-tabs"&gt;
 355   &lt;li class="active"&gt;
 356     &lt;a href="#"&gt;Home&lt;/a&gt;
 357   &lt;/li&gt;
 358   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 359   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 360 &lt;/ul&gt;
 361 </pre>
 362     </div>
 363     <div class="span4">
 364       <h3>Basic pills</h3>
 365       <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
 366       <ul class="nav nav-pills">
 367         <li class="active"><a href="#">Home</a></li>
 368         <li><a href="#">Profile</a></li>
 369         <li><a href="#">Messages</a></li>
 370       </ul>
 371 <pre class="prettyprint linenums">
 372 &lt;ul class="nav nav-pills"&gt;
 373   &lt;li class="active"&gt;
 374     &lt;a href="#"&gt;Home&lt;/a&gt;
 375   &lt;/li&gt;
 376   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 377   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 378 &lt;/ul&gt;
 379 </pre>
 380     </div>
 381   </div>
 382
 383   <h2>Stackable <small>Make tabs or pills vertical</small></h2>
 384   <div class="row">
 385     <div class="span4">
 386       <h3>How to stack 'em</h3>
 387       <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
 388     </div>
 389     <div class="span4">
 390       <h3>Stacked tabs</h3>
 391       <ul class="nav nav-tabs nav-stacked">
 392         <li class="active"><a href="#">Home</a></li>
 393         <li><a href="#">Profile</a></li>
 394         <li><a href="#">Messages</a></li>
 395       </ul>
 396 <pre class="prettyprint linenums">
 397 &lt;ul class="nav nav-tabs nav-stacked"&gt;
 398   ...
 399 &lt;/ul&gt;
 400 </pre>
 401     </div>
 402     <div class="span4">
 403       <h3>Stacked pills</h3>
 404       <ul class="nav nav-pills nav-stacked">
 405         <li class="active"><a href="#">Home</a></li>
 406         <li><a href="#">Profile</a></li>
 407         <li><a href="#">Messages</a></li>
 408       </ul>
 409 <pre class="prettyprint linenums">
 410 &lt;ul class="nav nav-pills nav-stacked"&gt;
 411   ...
 412 &lt;/ul&gt;
 413 </pre>
 414     </div>
 415   </div>
 416
 417   <h2>Dropdowns <small>For advanced nav components</small></h2>
 418   <div class="row">
 419     <div class="span4">
 420       <h3>Rich menus made easy</h3>
 421       <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
 422       <p>Head over to the Javascript page to read the docs on <a href="widgets.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
 423     </div>
 424     <div class="span4">
 425       <h3>Tabs with dropdowns</h3>
 426       <ul class="nav nav-tabs">
 427         <li class="active"><a href="#">Home</a></li>
 428         <li><a href="#">Profile</a></li>
 429         <li class="dropdown">
 430           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
 431           <ul class="dropdown-menu">
 432             <li><a href="#">Action</a></li>
 433             <li><a href="#">Another action</a></li>
 434             <li><a href="#">Something else here</a></li>
 435             <li class="divider"></li>
 436             <li><a href="#">Separated link</a></li>
 437           </ul>
 438         </li>
 439       </ul>
 440 <pre class="prettyprint linenums">
 441 &lt;ul class="nav nav-tabs"&gt;
 442   &lt;li class="dropdown"&gt;
 443     &lt;a class="dropdown-toggle"
 444        data-toggle="dropdown"
 445        href="#"&gt;
 446         Dropdown
 447         &lt;b class="caret"&gt;&lt;/b&gt;
 448       &lt;/a&gt;
 449     &lt;ul class="dropdown-menu"&gt;
 450       &lt;!-- links --&gt;
 451     &lt;/ul&gt;
 452   &lt;/li&gt;
 453 &lt;/ul&gt;
 454 </pre>
 455     </div>
 456     <div class="span4">
 457       <h3>Pills with dropdowns</h3>
 458       <ul class="nav nav-pills">
 459         <li class="active"><a href="#">Home</a></li>
 460         <li><a href="#">Profile</a></li>
 461         <li class="dropdown">
 462           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
 463           <ul class="dropdown-menu">
 464             <li><a href="#">Action</a></li>
 465             <li><a href="#">Another action</a></li>
 466             <li><a href="#">Something else here</a></li>
 467             <li class="divider"></li>
 468             <li><a href="#">Separated link</a></li>
 469           </ul>
 470         </li>
 471       </ul>
 472 <pre class="prettyprint linenums">
 473 &lt;ul class="nav nav-pills"&gt;
 474   &lt;li class="dropdown"&gt;
 475     &lt;a class="dropdown-toggle"
 476        data-toggle="dropdown"
 477        href="#"&gt;
 478         Dropdown
 479         &lt;b class="caret"&gt;&lt;/b&gt;
 480       &lt;/a&gt;
 481     &lt;ul class="dropdown-menu"&gt;
 482       &lt;!-- links --&gt;
 483     &lt;/ul&gt;
 484   &lt;/li&gt;
 485 &lt;/ul&gt;
 486 </pre>
 487     </div>
 488   </div>
 489
 490   <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
 491   <div class="row">
 492     <div class="span4">
 493       <h3>Application-style navigation</h3>
 494       <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
 495       <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
 496       <h4>With icons</h4>
 497       <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
 498     </div>
 499     <div class="span4">
 500       <h3>Example nav list</h3>
 501       <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
 502       <div class="well" style="padding: 8px 0;">
 503         <ul class="nav nav-list">
 504           <li class="nav-header">List header</li>
 505           <li class="active"><a href="#">Home</a></li>
 506           <li><a href="#">Library</a></li>
 507           <li><a href="#">Applications</a></li>
 508           <li class="nav-header">Another list header</li>
 509           <li><a href="#">Profile</a></li>
 510           <li><a href="#">Settings</a></li>
 511           <li><a href="#">Help</a></li>
 512         </ul>
 513       </div> <!-- /well -->
 514 <pre class="prettyprint linenums">
 515 &lt;ul class="nav nav-list"&gt;
 516   &lt;li class="nav-header"&gt;
 517     List header
 518   &lt;/li&gt;
 519   &lt;li class="active"&gt;
 520     &lt;a href="#"&gt;Home&lt;/a&gt;
 521   &lt;/li&gt;
 522   &lt;li&gt;
 523     &lt;a href="#"&gt;Library&lt;/a&gt;
 524   &lt;/li&gt;
 525   ...
 526 &lt;/ul&gt;
 527 </pre>
 528     </div>
 529     <div class="span4">
 530       <h3>Example with Icons
 531         </h3>
 532       <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
 533       <div class="well" style="padding: 8px 0;">
 534         <ul class="nav nav-list">
 535           <li class="nav-header">List header</li>
 536           <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
 537           <li><a href="#"><i class="icon-book"></i> Library</a></li>
 538           <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
 539           <li class="nav-header">Another list header</li>
 540           <li><a href="#"><i class="icon-user"></i> Profile</a></li>
 541           <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
 542           <li><a href="#"><i class="icon-flag"></i> Help</a></li>
 543         </ul>
 544       </div> <!-- /well -->
 545 <pre class="prettyprint linenums">
 546 &lt;ul class="nav nav-list"&gt;
 547   ...
 548   &lt;li&gt;
 549     &lt;a href="#"&gt;
 550       &lt;i class="icon-book"&gt;&lt;/i&gt;
 551       Library
 552     &lt;/a&gt;
 553   &lt;/li&gt;
 554   ...
 555 &lt;/ul&gt;
 556 </pre>
 557     </div>
 558   </div>
 559
 560
 561   <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
 562   <div class="row">
 563     <div class="span4">
 564       <h3>What's included</h3>
 565       <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
 566       <p>Changing between them is easy and only requires changing very little markup.</p>
 567     </div>
 568     <div class="span4">
 569       <h3>Tabbable example</h3>
 570       <p>To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.</p>
 571       <div class="tabbable" style="margin-bottom: 9px;">
 572         <ul class="nav nav-tabs">
 573           <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
 574           <li><a href="#2" data-toggle="tab">Section 2</a></li>
 575           <li><a href="#3" data-toggle="tab">Section 3</a></li>
 576         </ul>
 577         <div class="tab-content">
 578           <div class="tab-pane active" id="1">
 579             <p>I'm in Section 1.</p>
 580           </div>
 581           <div class="tab-pane" id="2">
 582             <p>Howdy, I'm in Section 2.</p>
 583           </div>
 584           <div class="tab-pane" id="3">
 585             <p>What up girl, this is Section 3.</p>
 586           </div>
 587         </div>
 588       </div> <!-- /tabbable -->
 589     </div>
 590     <div class="span4">
 591       <h3>Custom jQuery plugin</h3>
 592       <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
 593       <p><a class="btn" href="widgets.html#tabs">Get the javascript &rarr;</a></p>
 594     </div>
 595   </div>
 596
 597   <h3>Straightforward markup</h3>
 598   <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
 599 <pre class="prettyprint linenums">
 600 &lt;div class="tabbable"&gt;
 601   &lt;ul class="nav nav-tabs"&gt;
 602     &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
 603     &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
 604   &lt;/ul&gt;
 605   &lt;div class="tab-content"&gt;
 606     &lt;div class="tab-pane active" id="1"&gt;
 607       &lt;p&gt;I'm in Section 1.&lt;/p&gt;
 608     &lt;/div&gt;
 609     &lt;div class="tab-pane" id="2"&gt;
 610       &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
 611     &lt;/div&gt;
 612   &lt;/div&gt;
 613 &lt;/div&gt;
 614 </pre>
 615
 616   <h3>Tabbable in any direction</h3>
 617   <div class="row">
 618     <div class="span4">
 619       <h4>Tabs on the bottom</h4>
 620       <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
 621       <div class="tabbable tabs-below">
 622         <div class="tab-content">
 623           <div class="tab-pane active" id="A">
 624             <p>I'm in Section A.</p>
 625           </div>
 626           <div class="tab-pane" id="B">
 627             <p>Howdy, I'm in Section B.</p>
 628           </div>
 629           <div class="tab-pane" id="C">
 630             <p>What up girl, this is Section C.</p>
 631           </div>
 632         </div>
 633         <ul class="nav nav-tabs">
 634           <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
 635           <li><a href="#B" data-toggle="tab">Section 2</a></li>
 636           <li><a href="#C" data-toggle="tab">Section 3</a></li>
 637         </ul>
 638       </div> <!-- /tabbable -->
 639 <pre class="prettyprint linenums" style="margin-top: 11px;">
 640 &lt;div class="tabbable tabs-below"&gt;
 641   &lt;div class="tab-content"&gt;
 642     ...
 643   &lt;/div&gt;
 644   &lt;ul class="nav nav-tabs"&gt;
 645     ...
 646   &lt;/ul&gt;
 647 &lt;/div&gt;
 648 </pre>
 649     </div>
 650     <div class="span4">
 651       <h4>Tabs on the left</h4>
 652       <p>Swap the class to put tabs on the left.</p>
 653       <div class="tabbable tabs-left">
 654         <ul class="nav nav-tabs">
 655           <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
 656           <li><a href="#lB" data-toggle="tab">Section 2</a></li>
 657           <li><a href="#lC" data-toggle="tab">Section 3</a></li>
 658         </ul>
 659         <div class="tab-content">
 660           <div class="tab-pane active" id="lA">
 661             <p>I'm in Section A.</p>
 662           </div>
 663           <div class="tab-pane" id="lB">
 664             <p>Howdy, I'm in Section B.</p>
 665           </div>
 666           <div class="tab-pane" id="lC">
 667             <p>What up girl, this is Section C.</p>
 668           </div>
 669         </div>
 670       </div> <!-- /tabbable -->
 671 <pre class="prettyprint linenums">
 672 &lt;div class="tabbable tabs-left"&gt;
 673   &lt;ul class="nav nav-tabs"&gt;
 674     ...
 675   &lt;/ul&gt;
 676   &lt;div class="tab-content"&gt;
 677     ...
 678   &lt;/div&gt;
 679 &lt;/div&gt;
 680 </pre>
 681     </div>
 682     <div class="span4">
 683       <h4>Tabs on the right</h4>
 684       <p>Swap the class to put tabs on the right.</p>
 685       <div class="tabbable tabs-right">
 686         <ul class="nav nav-tabs">
 687           <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
 688           <li><a href="#rB" data-toggle="tab">Section 2</a></li>
 689           <li><a href="#rC" data-toggle="tab">Section 3</a></li>
 690         </ul>
 691         <div class="tab-content">
 692           <div class="tab-pane active" id="rA">
 693             <p>I'm in Section A.</p>
 694           </div>
 695           <div class="tab-pane" id="rB">
 696             <p>Howdy, I'm in Section B.</p>
 697           </div>
 698           <div class="tab-pane" id="rC">
 699             <p>What up girl, this is Section C.</p>
 700           </div>
 701         </div>
 702       </div> <!-- /tabbable -->
 703 <pre class="prettyprint linenums">
 704 &lt;div class="tabbable tabs-right"&gt;
 705   &lt;ul class="nav nav-tabs"&gt;
 706     ...
 707   &lt;/ul&gt;
 708   &lt;div class="tab-content"&gt;
 709     ...
 710   &lt;/div&gt;
 711 &lt;/div&gt;
 712 </pre>
 713     </div>
 714   </div>
 715
 716 </section>
 717
 718
 719
 720 <!-- Navbar
 721 ================================================== -->
 722 <section id="navbar">
 723   <div class="page-header">
 724     <h1>Navbar</h1>
 725   </div>
 726   <h2>Static navbar example</h2>
 727   <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
 728   <div class="navbar">
 729     <div class="navbar-inner">
 730       <div class="container" style="width: auto;">
 731         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 732           <span class="icon-bar"></span>
 733           <span class="icon-bar"></span>
 734           <span class="icon-bar"></span>
 735         </a>
 736         <a class="brand" href="#">Project name</a>
 737         <div class="nav-collapse">
 738           <ul class="nav">
 739             <li class="active"><a href="#">Home</a></li>
 740             <li><a href="#">Link</a></li>
 741             <li><a href="#">Link</a></li>
 742             <li><a href="#">Link</a></li>
 743             <li class="dropdown">
 744               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 745               <ul class="dropdown-menu">
 746                 <li><a href="#">Action</a></li>
 747                 <li><a href="#">Another action</a></li>
 748                 <li><a href="#">Something else here</a></li>
 749                 <li class="divider"></li>
 750                 <li><a href="#">Separated link</a></li>
 751               </ul>
 752             </li>
 753           </ul>
 754           <form class="navbar-search pull-left" action="">
 755             <input type="text" class="search-query span2" placeholder="Search">
 756           </form>
 757           <ul class="nav pull-right">
 758             <li><a href="#">Link</a></li>
 759             <li class="divider-vertical"></li>
 760             <li class="dropdown">
 761               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 762               <ul class="dropdown-menu">
 763                 <li><a href="#">Action</a></li>
 764                 <li><a href="#">Another action</a></li>
 765                 <li><a href="#">Something else here</a></li>
 766                 <li class="divider"></li>
 767                 <li><a href="#">Separated link</a></li>
 768               </ul>
 769             </li>
 770           </ul>
 771         </div><!-- /.nav-collapse -->
 772       </div>
 773     </div><!-- /navbar-inner -->
 774   </div><!-- /navbar -->
 775
 776   <div class="row">
 777     <div class="span8">
 778       <h3>Navbar scaffolding</h3>
 779       <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
 780 <pre class="prettyprint linenums">
 781 &lt;div class="navbar"&gt;
 782   &lt;div class="navbar-inner"&gt;
 783     &lt;div class="container"&gt;
 784       ...
 785     &lt;/div&gt;
 786   &lt;/div&gt;
 787 &lt;/div&gt;
 788 </pre>
 789       <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
 790 <pre class="prettyprint linenums">
 791 &lt;div class="navbar navbar-fixed-top"&gt;
 792   ...
 793 &lt;/div&gt;
 794 </pre>
 795       <h3>Brand name</h3>
 796       <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 797 <pre class="prettyprint linenums">
 798 &lt;a class="brand" href="#"&gt;
 799   Project name
 800 &lt;/a&gt;
 801 </pre>
 802       <h3>Search form</h3>
 803       <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
 804 <pre class="prettyprint linenums">
 805 &lt;form class="navbar-search pull-left"&gt;
 806   &lt;input type="text" class="search-query" placeholder="Search"&gt;
 807 &lt;/form&gt;
 808 </pre>
 809       <h3>Optional responsive variation</h3>
 810       <p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
 811 <pre class="prettyprint linenums">
 812 &lt;div class="navbar"&gt;
 813   &lt;div class="navbar-inner"&gt;
 814     &lt;div class="container"&gt;
 815
 816       &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
 817       &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
 818         &lt;span class="icon-bar"&gt;&lt;/span&gt;
 819         &lt;span class="icon-bar"&gt;&lt;/span&gt;
 820         &lt;span class="icon-bar"&gt;&lt;/span&gt;
 821       &lt;/a&gt;
 822
 823       &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
 824       &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
 825
 826       &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
 827       &lt;div class="nav-collapse"&gt;
 828         &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
 829       &lt;/div&gt;
 830
 831     &lt;/div&gt;
 832   &lt;/div&gt;
 833 &lt;/div&gt;
 834 </pre>
 835       <div class="alert alert-info">
 836         <strong>Heads up!</strong> The responsive navbar requires the <a href="widgets.html#collapse">collapse plugin</a>.
 837       </div>
 838
 839     </div><!-- /.span -->
 840     <div class="span4">
 841       <h3>Nav links</h3>
 842       <p>Nav items are simple to add via unordered lists.</p>
 843 <pre class="prettyprint linenums">
 844 &lt;ul class="nav"&gt;
 845   &lt;li class="active"&gt;
 846     &lt;a href="#">Home&lt;/a&gt;
 847   &lt;/li&gt;
 848   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
 849   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
 850 &lt;/ul&gt;
 851 </pre>
 852       <h3>Adding dropdowns</h3>
 853       <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="widgets.html#dropdown">our javascript plugin</a>.</p>
 854 <pre class="prettyprint linenums">
 855 &lt;ul class="nav"&gt;
 856   &lt;li class="dropdown"&gt;
 857     &lt;a href="#"
 858           class="dropdown-toggle"
 859           data-toggle="dropdown">
 860           Account
 861           &lt;b class="caret"&gt;&lt;/b&gt;
 862     &lt;/a&gt;
 863     &lt;ul class="dropdown-menu"&gt;
 864       ...
 865     &lt;/ul&gt;
 866   &lt;/li&gt;
 867 &lt;/ul&gt;
 868 </pre>
 869       <p><a class="btn" href="widgets.html#dropdown">Get the javascript &rarr;</a></p>
 870     </div><!-- /.span -->
 871   </div><!-- /.row -->
 872
 873 </section>
 874
 875
 876
 877 <!-- Breadcrumbs
 878 ================================================== -->
 879 <section id="breadcrumbs">
 880   <div class="page-header">
 881     <h1>Breadcrumbs <small></small></h1>
 882   </div>
 883
 884   <div class="row">
 885     <div class="span6">
 886       <h3>Why use them</h3>
 887       <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
 888
 889       <h3>Examples</h3>
 890       <p>A single example shown as it might be displayed across multiple pages.</p>
 891       <ul class="breadcrumb">
 892         <li class="active">Home</li>
 893       </ul>
 894       <ul class="breadcrumb">
 895         <li><a href="#">Home</a> <span class="divider">/</span></li>
 896         <li class="active">Library</li>
 897       </ul>
 898       <ul class="breadcrumb">
 899         <li><a href="#">Home</a> <span class="divider">/</span></li>
 900         <li><a href="#">Library</a> <span class="divider">/</span></li>
 901         <li class="active">Data</li>
 902       </ul>
 903     </div>
 904     <div class="span6">
 905       <h3>Markup</h3>
 906       <p>HTML is your standard unordered list with links.</p>
 907 <pre class="prettyprint linenums">
 908 &lt;ul class="breadcrumb"&gt;
 909   &lt;li&gt;
 910     &lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
 911   &lt;/li&gt;
 912   &lt;li&gt;
 913     &lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
 914   &lt;/li&gt;
 915   &lt;li class="active"&gt;
 916     &lt;a href="#"&gt;Data&lt;/a&gt;
 917   &lt;/li&gt;
 918 &lt;/ul&gt;
 919 </pre>
 920     </div>
 921   </div>
 922
 923 </section>
 924
 925
 926
 927 <!-- Pagination
 928 ================================================== -->
 929 <section id="pagination">
 930   <div class="page-header">
 931     <h1>Pagination <small>Two options for paging through content</small></h1>
 932   </div>
 933
 934   <h2>Multicon-page pagination</h2>
 935   <div class="row">
 936     <div class="span4">
 937       <h3>When to use</h3>
 938       <p>Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
 939       <h3>Stateful page links</h3>
 940       <p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p>
 941       <h3>Flexible alignment</h3>
 942       <p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
 943     </div>
 944     <div class="span4">
 945       <h3>Examples</h3>
 946       <p>The default pagination component is flexible and works in a number of variations.</p>
 947       <div class="pagination">
 948         <ul>
 949           <li class="disabled"><a href="#">&laquo;</a></li>
 950           <li class="active"><a href="#">1</a></li>
 951           <li><a href="#">2</a></li>
 952           <li><a href="#">3</a></li>
 953           <li><a href="#">4</a></li>
 954           <li><a href="#">&raquo;</a></li>
 955         </ul>
 956       </div>
 957       <div class="pagination">
 958         <ul>
 959           <li><a href="#">&laquo;</a></li>
 960           <li><a href="#">10</a></li>
 961           <li class="active"><a href="#">11</a></li>
 962           <li><a href="#">12</a></li>
 963           <li><a href="#">&raquo;</a></li>
 964         </ul>
 965       </div>
 966       <div class="pagination">
 967         <ul>
 968           <li><a href="#">&larr;</a></li>
 969           <li class="active"><a href="#">10</a></li>
 970           <li class="disabled"><a href="#">...</a></li>
 971           <li><a href="#">20</a></li>
 972           <li><a href="#">&rarr;</a></li>
 973         </ul>
 974       </div>
 975       <div class="pagination pagination-centered">
 976         <ul>
 977           <li class="active"><a href="#">1</a></li>
 978           <li><a href="#">2</a></li>
 979           <li><a href="#">3</a></li>
 980           <li><a href="#">4</a></li>
 981           <li><a href="#">5</a></li>
 982         </ul>
 983       </div>
 984     </div>
 985     <div class="span4">
 986       <h3>Markup</h3>
 987       <p>Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.</p>
 988 <pre class="prettyprint linenums">
 989 &lt;div class="pagination"&gt;
 990   &lt;ul&gt;
 991     &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li>
 992     &lt;li class="active"&gt;
 993       &lt;a href="#"&gt;1&lt;/a&gt;
 994     &lt;/li&gt;
 995     &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 996     &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 997     &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
 998     &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li>
 999   &lt;/ul&gt;
1000 &lt;/div&gt;
1001 </pre>
1002     </div>
1003   </div><!-- /row -->
1004
1005   <h2>Pager <small>For quick previous and next links</small></h2>
1006   <div class="row">
1007     <div class="span4">
1008       <h3>About pager</h3>
1009       <p>The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
1010     </div>
1011     <div class="span4">
1012       <h3>Default example</h3>
1013       <p>By default, the pager centers links.</p>
1014       <ul class="pager">
1015         <li><a href="#">Previous</a></li>
1016         <li><a href="#">Next</a></li>
1017       </ul>
1018 <pre class="prettyprint linenums">
1019 &lt;ul class="pager"&gt;
1020   &lt;li&gt;
1021     &lt;a href="#"&gt;Previous&lt;/a&gt;
1022   &lt;/li&gt;
1023   &lt;li&gt;
1024     &lt;a href="#"&gt;Next&lt;/a&gt;
1025   &lt;/li&gt;
1026 &lt;/ul&gt;
1027 </pre>
1028     </div>
1029     <div class="span4">
1030       <h3>Aligned links</h3>
1031       <p>Alternatively, you can align each link to the sides:</p>
1032       <ul class="pager">
1033         <li class="previous"><a href="#">&larr; Older</a></li>
1034         <li class="next"><a href="#">Newer &rarr;</a></li>
1035       </ul>
1036 <pre class="prettyprint linenums">
1037 &lt;ul class="pager"&gt;
1038   &lt;li class="previous"&gt;
1039     &lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;
1040   &lt;/li&gt;
1041   &lt;li class="next"&gt;
1042     &lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;
1043   &lt;/li&gt;
1044 &lt;/ul&gt;
1045 </pre>
1046     </div>
1047   </div><!-- /row -->
1048 </section>
1049
1050
1051
1052 <!-- Labels
1053 ================================================== -->
1054 <section id="labels">
1055   <div class="page-header">
1056     <h1>Inline labels <small>Label and annotate text</small></h1>
1057   </div>
1058   <table class="table table-bordered table-striped">
1059     <thead>
1060       <tr>
1061         <th>Labels</th>
1062         <th>Markup</th>
1063       </tr>
1064     </thead>
1065     <tbody>
1066       <tr>
1067         <td>
1068           <span class="label">Default</span>
1069         </td>
1070         <td>
1071           <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
1072         </td>
1073       </tr>
1074       <tr>
1075         <td>
1076           <span class="label label-lead">Lead</span>
1077         </td>
1078         <td>
1079           <code>&lt;span class="label label-lead"&gt;New&lt;/span&gt;</code>
1080         </td>
1081       </tr>
1082       <tr>
1083         <td>
1084           <span class="label label-note">Note</span>
1085         </td>
1086         <td>
1087           <code>&lt;span class="label label-note"&gt;Note&lt;/span&gt;</code>
1088         </td>
1089       </tr>
1090       <tr>
1091         <td>
1092           <span class="label label-contact">Contact</span>
1093         </td>
1094         <td>
1095           <code>&lt;span class="label label-contact"&gt;Contact&lt;/span&gt;</code>
1096         </td>
1097       </tr>
1098       <tr>
1099         <td>
1100           <span class="label label-document">Document</span>
1101         </td>
1102         <td>
1103           <code>&lt;span class="label label-document"&gt;Document&lt;/span&gt;</code>
1104         </td>
1105       </tr>
1106       <tr>
1107         <td>
1108           <span class="label label-file">File</span>
1109         </td>
1110         <td>
1111           <code>&lt;span class="label label-file"&gt;File&lt;/span&gt;</code>
1112         </td>
1113       </tr>
1114     </tbody>
1115   </table>
1116 </section>
1117
1118
1119
1120 <!-- Thumbnails
1121 ================================================== -->
1122 <section id="thumbnails">
1123   <div class="page-header">
1124     <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
1125   </div>
1126
1127   <div class="row">
1128     <div class="span6">
1129       <h2>Default thumbnails</h2>
1130       <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
1131       <ul class="thumbnails">
1132         <li class="span3">
1133           <a href="#" class="thumbnail">
1134             <img src="http://placehold.it/260x180" alt="">
1135           </a>
1136         </li>
1137         <li class="span3">
1138           <a href="#" class="thumbnail">
1139             <img src="http://placehold.it/260x180" alt="">
1140           </a>
1141         </li>
1142         <li class="span3">
1143           <a href="#" class="thumbnail">
1144             <img src="http://placehold.it/260x180" alt="">
1145           </a>
1146         </li>
1147         <li class="span3">
1148           <a href="#" class="thumbnail">
1149             <img src="http://placehold.it/260x180" alt="">
1150           </a>
1151         </li>
1152       </ul>
1153     </div>
1154     <div class="span6">
1155       <h2>Highly customizable</h2>
1156       <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
1157       <ul class="thumbnails">
1158         <li class="span3">
1159           <div class="thumbnail">
1160             <img src="http://placehold.it/260x180" alt="">
1161             <div class="caption">
1162               <h5>Thumbnail label</h5>
1163               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
1164               <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
1165             </div>
1166           </div>
1167         </li>
1168         <li class="span3">
1169           <div class="thumbnail">
1170             <img src="http://placehold.it/260x180" alt="">
1171             <div class="caption">
1172               <h5>Thumbnail label</h5>
1173               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
1174               <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
1175             </div>
1176           </div>
1177         </li>
1178       </ul>
1179     </div>
1180   </div>
1181
1182   <div class="row">
1183     <div class="span4">
1184       <h3>Why use thumbnails</h3>
1185       <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
1186     </div>
1187     <div class="span4">
1188       <h3>Simple, flexible markup</h3>
1189       <p>Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
1190     </div>
1191     <div class="span4">
1192       <h3>Uses grid column sizes</h3>
1193       <p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>
1194     </div>
1195   </div>
1196
1197   <div class="row">
1198     <div class="span6">
1199       <h2>The markup</h2>
1200       <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
1201 <pre class="prettyprint linenums">
1202 &lt;ul class="thumbnails"&gt;
1203   &lt;li class="span3"&gt;
1204     &lt;a href="#" class="thumbnail"&gt;
1205       &lt;img src="http://placehold.it/260x180" alt=""&gt;
1206     &lt;/a&gt;
1207   &lt;/li&gt;
1208   ...
1209 &lt;/ul&gt;
1210 </pre>
1211       <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>
1212 <pre class="prettyprint linenums">
1213 &lt;ul class="thumbnails"&gt;
1214   &lt;li class="span3"&gt;
1215     &lt;div class="thumbnail"&gt;
1216       &lt;img src="http://placehold.it/260x180" alt=""&gt;
1217       &lt;h5&gt;Thumbnail label&lt;/h5&gt;
1218       &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
1219     &lt;/div&gt;
1220   &lt;/li&gt;
1221   ...
1222 &lt;/ul&gt;
1223 </pre>
1224     </div>
1225     <div class="span6">
1226       <h2>More examples</h2>
1227       <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
1228       <ul class="thumbnails">
1229         <li class="span4">
1230           <a href="#" class="thumbnail">
1231             <img src="http://placehold.it/360x268" alt="">
1232           </a>
1233         </li>
1234         <li class="span2">
1235           <a href="#" class="thumbnail">
1236             <img src="http://placehold.it/160x120" alt="">
1237           </a>
1238         </li>
1239         <li class="span2">
1240           <a href="#" class="thumbnail">
1241             <img src="http://placehold.it/160x120" alt="">
1242           </a>
1243         </li>
1244         <li class="span2">
1245           <a href="#" class="thumbnail">
1246             <img src="http://placehold.it/160x120" alt="">
1247           </a>
1248         </li>
1249         <li class="span2">
1250           <a href="#" class="thumbnail">
1251             <img src="http://placehold.it/160x120" alt="">
1252           </a>
1253         </li>
1254         <li class="span2">
1255           <a href="#" class="thumbnail">
1256             <img src="http://placehold.it/160x120" alt="">
1257           </a>
1258         </li>
1259       </ul>
1260     </div>
1261   </div>
1262
1263 </section>
1264
1265
1266
1267 <!-- Alerts & Messages
1268 ================================================== -->
1269 <section id="alerts">
1270   <div class="page-header">
1271     <h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
1272   </div>
1273
1274   <h2>Lightweight defaults</h2>
1275   <div class="row">
1276     <div class="span4">
1277       <h3>Rewritten base class</h3>
1278       <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
1279       <h3>Single alert message</h3>
1280       <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
1281       <hr>
1282       <h3>Goes great with javascript</h3>
1283       <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
1284       <p><a class="btn js-btn" href="widgets.html#alerts">Get the plugin &raquo;</a></p>
1285     </div>
1286     <div class="span8">
1287       <h3>Example alerts</h3>
1288       <p>Wrap your message and an optional close icon in a div with simple class.</p>
1289       <div class="alert">
1290         <a class="close">&times;</a>
1291         <strong>Warning!</strong> Best check yo self, you're not looking too good.
1292       </div>
1293 <pre class="prettyprint linenums">
1294 &lt;div class="alert"&gt;
1295   &lt;a class="close"&gt;&times;&lt;/a&gt;
1296   &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
1297 &lt;/div&gt;
1298 </pre>
1299       <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
1300       <div class="alert alert-block">
1301         <a class="close">&times;</a>
1302         <h4 class="alert-heading">Warning!</h4>
1303         <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>
1304       </div>
1305 <pre class="prettyprint linenums">
1306 &lt;div class="alert alert-block"&gt;
1307   &lt;a class="close"&gt;&times;&lt;/a&gt;
1308   &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
1309   Best check yo self, you're not...
1310 &lt;/div&gt;
1311 </pre>
1312     </div>
1313   </div>
1314
1315   <h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2>
1316   <div class="row">
1317     <div class="span4">
1318       <h3>Error or danger</h3>
1319       <div class="alert alert-error">
1320         <a class="close">&times;</a>
1321         <strong>Oh snap!</strong> Change a few things up and try submitting again.
1322       </div>
1323 <pre class="prettyprint linenums">
1324 &lt;div class="alert alert-error"&gt;
1325   ...
1326 &lt;/div&gt;
1327 </pre>
1328     </div>
1329     <div class="span4">
1330       <h3>Success</h3>
1331       <div class="alert alert-success">
1332         <a class="close">&times;</a>
1333         <strong>Well done!</strong> You successfully read this important alert message.
1334       </div>
1335 <pre class="prettyprint linenums">
1336 &lt;div class="alert alert-success"&gt;
1337   ...
1338 &lt;/div&gt;
1339 </pre>
1340     </div>
1341     <div class="span4">
1342       <h3>Information</h3>
1343       <div class="alert alert-info">
1344         <a class="close">&times;</a>
1345         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
1346       </div>
1347 <pre class="prettyprint linenums">
1348 &lt;div class="alert alert-info"&gt;
1349   ...
1350 &lt;/div&gt;
1351 </pre>
1352     </div>
1353   </div>
1354
1355 </section>
1356
1357
1358
1359 <!-- Progress bars
1360 ================================================== -->
1361 <section id="progress">
1362   <div class="page-header">
1363     <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
1364   </div>
1365
1366   <h2>Examples and markup</h2>
1367   <div class="row">
1368     <div class="span4">
1369       <h3>Basic</h3>
1370       <p>Default progress bar with a vertical gradient.</p>
1371       <div class="progress">
1372         <div class="bar" style="width: 60%;"></div>
1373       </div>
1374       <br>
1375 <pre class="prettyprint linenums">
1376 &lt;div class="progress"&gt;
1377   &lt;div class="bar"
1378        style="width: 60%;"&gt;&lt;/div&gt;
1379 &lt;/div&gt;
1380 </pre>
1381     </div>
1382     <div class="span4">
1383       <h3>Striped</h3>
1384       <p>Uses a gradient to create a striped effect.</p>
1385       <div class="progress progress-info progress-striped">
1386         <div class="bar" style="width: 20%;"></div>
1387       </div>
1388       <br>
1389 <pre class="prettyprint linenums">
1390 &lt;div class="progress progress-info
1391      progress-striped"&gt;
1392   &lt;div class="bar"
1393        style="width: 20%;"&gt;&lt;/div&gt;
1394 &lt;/div&gt;
1395 </pre>
1396     </div>
1397     <div class="span4">
1398       <h3>Animated</h3>
1399       <p>Takes the striped example and animates it.</p>
1400       <div class="progress progress-success progress-striped active">
1401         <div class="bar" style="width: 45%"></div>
1402       </div>
1403       <br>
1404 <pre class="prettyprint linenums">
1405 &lt;div class="progress progress-success
1406      progress-striped active"&gt;
1407   &lt;div class="bar"
1408        style="width: 40%;"&gt;&lt;/div&gt;
1409 &lt;/div&gt;
1410 </pre>
1411     </div>
1412   </div>
1413
1414   <h2>Options and browser support</h2>
1415   <div class="row">
1416     <div class="span4">
1417       <h3>Additional colors</h3>
1418       <p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
1419       <ul>
1420         <li><code>.progress-info</code></li>
1421         <li><code>.progress-success</code></li>
1422         <li><code>.progress-danger</code></li>
1423       </ul>
1424       <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
1425     </div>
1426     <div class="span4">
1427       <h3>Behavior</h3>
1428       <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
1429       <p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
1430     </div>
1431     <div class="span4">
1432       <h3>Browser support</h3>
1433       <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
1434       <p>Opera does not support animations at this time.</p>
1435     </div>
1436   </div>
1437
1438 </section>
1439
1440
1441
1442
1443
1444 <!-- Miscellaneous
1445 ================================================== -->
1446 <section id="misc">
1447   <div class="page-header">
1448     <h1>Miscellaneous <small>Wells, badges, and close icon</small></h1>
1449   </div>
1450   <div class="row">
1451     <div class="span4">
1452       <h2>Wells</h2>
1453       <p>Use the well as a simple effect on an element to give it an inset effect.</p>
1454       <div class="well">
1455         Look, I'm in a well!
1456       </div>
1457 <pre class="prettyprint linenums">
1458 &lt;div class="well"&gt;
1459   ...
1460 &lt;/div&gt;
1461 </pre>
1462     </div><!--/span-->
1463     <div class="span4" style="display: none;">
1464       <h2>Badges</h2>
1465       <p>Use a badge on an element for an unread count or as a simple indicator.</p>
1466 <pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
1467     </div><!--/span-->
1468     <div class="span4">
1469       <h2>Close icon</h2>
1470       <p>Use the generic close icon for dismissing content like modals and alerts.</p>
1471       <p><a class="close" style="float: none;">&times;</a></p>
1472 <pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
1473     </div><!--/span-->
1474   </div><!--/row-->
1475 </section>
1476 </div>
1477     <script src="../../cache/include/javascript/sugar_grp1_jquery.js"></script>
1478     <script src="js/google-code-prettify/prettify.js"></script>
1479     <script src="js/application.js"></script>
1480   </body>
1481 </html>