Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
components.html 55.2 KB
Newer Older
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
1
2
3
4
5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
Raul Riera's avatar
Removed trailing backslash :)    
Raul Riera committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
7
8
9 
    <meta name="description" content="">
    <meta name="author" content="">
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
10 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
11
12
13
14
15 
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
Jacob Thornton's avatar
move doc building into base make method + build bootstrap to doc assets    
Jacob Thornton committed
16
17 
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
18
19
20
21 
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le fav and touch icons -->
Mark Otto's avatar
fix location of favicon    
Mark Otto committed
22 
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
Mark Otto's avatar
fix links to apple touch icons    
Mark Otto committed
23
24
25 
    <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
26
27 
  </head>
Jacob Thornton's avatar
rebuild + add spy to template    
Jacob Thornton committed
28 
  <body data-spy="scroll" data-target=".subnav" data-offset="50">
Jacob Thornton's avatar
turn off brand hover for now + get nav toggling in mobile    
Jacob Thornton committed
29
30
Jacob Thornton's avatar
rebuild with new templates    
Jacob Thornton committed
31 
  <!-- Navbar
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
32 
    ================================================== -->
Mark Otto's avatar
huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff    
Mark Otto committed
33 
    <div class="navbar navbar-fixed-top">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
34
35 
      <div class="navbar-inner">
        <div class="container">
Jacob Thornton's avatar
turn off brand hover for now + get nav toggling in mobile    
Jacob Thornton committed
36 
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
chance icon class    
Mark Otto committed
37
38
39 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
Mark Otto's avatar
add in a navbar button for toggling the nav items    
Mark Otto committed
40 
          </a>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
41 
          <a class="brand" href="./index.html">Bootstrap</a>
Mark Otto's avatar
fix broken navbar collapse    
Mark Otto committed
42 
          <div class="nav-collapse">
Jacob Thornton's avatar
turn off brand hover for now + get nav toggling in mobile    
Jacob Thornton committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="active">
                <a href="./components.html">Components</a>
              </li>
              <li class="">
                <a href="./javascript.html">Javascript plugins</a>
              </li>
              <li class="">
                <a href="./less.html">Using LESS</a>
              </li>
Mark Otto's avatar
rename vertical-divider to divider-vertical, add more space around the divider    
Mark Otto committed
62 
              <li class="divider-vertical"></li>
Jacob Thornton's avatar
turn off brand hover for now + get nav toggling in mobile    
Jacob Thornton committed
63
64
65 
              <li class="">
                <a href="./download.html">Customize</a>
              </li>
Mark Otto's avatar
overhaul grid mixins and variables, standardize fluid grid system and enable...    
Mark Otto committed
66
67
68 
              <li class="">
                <a href="./examples.html">Examples</a>
              </li>
Jacob Thornton's avatar
turn off brand hover for now + get nav toggling in mobile    
Jacob Thornton committed
69
70 
            </ul>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
71
72
73
74
75
76 
        </div>
      </div>
    </div>

    <div class="container">
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
77
78
79
80
81
82 
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>Components</h1>
  <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
  <div class="subnav">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
83 
    <ul class="nav nav-pills">
Mark Otto's avatar
adding wells and close icon to the docs under misc in components, with a new subnav style    
Mark Otto committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100 
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#buttonGroups">Button groups</a></li>
          <li><a href="#buttonDropdowns">Button dropdowns</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#navs">Nav, tabs, pills</a></li>
          <li><a href="#navbar">Navbar</a></li>
          <li><a href="#breadcrumbs">Breadcrumbs</a></li>
          <li><a href="#pagination">Pagination</a></li>
        </ul>
      </li>
      <li><a href="#labels">Labels</a></li>
Mark Otto's avatar
move css builder and downloader to dedicated page, start to update remaining...    
Mark Otto committed
101
102
103 
      <li><a href="#thumbnails">Thumbnails</a></li>
      <li><a href="#alerts">Alerts</a></li>
      <li><a href="#progress">Progress bars</a></li>
Mark Otto's avatar
adding wells and close icon to the docs under misc in components, with a new subnav style    
Mark Otto committed
104 
      <li><a href="#misc">Miscellaneous</a></li>
Jacob Thornton's avatar
rebuild with new templates    
Jacob Thornton committed
105 
    </ul>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
106
107 
  </div>
</header>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
108
109
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
110
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
111
112
113
114
115
116
117
118
119
120
121 
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
  <div class="page-header">
    <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
  </div>
  <div class="row">
    <div class="span4">
      <h3>Button groups</h3>
      <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>
      <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>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
122 
      <div class="btn-toolbar" style="margin-top: 18px;">
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
123
124
125
126
127
128 
        <div class="btn-group">
          <a class="btn" href="#">Left</a>
          <a class="btn" href="#">Middle</a>
          <a class="btn" href="#">Right</a>
        </div>
      </div>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
129
130
131
132
133
134
135
136
137
138
139
140
141
142 
      <div class="btn-toolbar">
        <div class="btn-group">
          <a class="btn" href="#">1</a>
          <a class="btn" href="#">2</a>
          <a class="btn" href="#">3</a>
          <a class="btn" href="#">4</a>
        </div>
        <div class="btn-group">
          <a class="btn" href="#">5</a>
          <a class="btn" href="#">6</a>
          <a class="btn" href="#">7</a>
        </div>
        <div class="btn-group">
          <a class="btn" href="#">8</a>
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
143
144 
        </div>
      </div>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
145
146
147
148 
    </div>
    <div class="span4">
      <h3>Example markup</h3>
      <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164 
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
  &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
  &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
      <p>And with a toolbar for multiple groups:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
  &lt;div class="btn-group"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
165
166
167
168
169
170
171
172
173
174 
    <div class="span4">
      <h3>Checkbox and radio flavors</h3>
      <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="./javascript.html#buttons">the Javascript docs</a> for that.</p>
      <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
      <hr>
      <h4 class="muted">Heads up</h4>
      <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
    </div>
  </div>
</section>
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
175
176
177
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
178
179 
<!-- Split button dropdowns
================================================== -->
Mark Otto's avatar
huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff    
Mark Otto committed
180 
<section id="buttonDropdowns">
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
181 
  <div class="page-header">
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
182 
    <h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
183 
  </div>
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200 

  <div class="row">
    <div class="span4">
      <h3>Button dropdowns</h3>
      <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>
      <div class="btn-toolbar" style="margin-top: 18px;">
        <div class="btn-group">
          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
201 
          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
202
203
204
205
206
207
208
209
210 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
211 
          <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">Danger <span class="caret"></span></a>
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
212
213
214
215
216
217
218
219
220
221
222 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar">
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
223 
          <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">Success <span class="caret"></span></a>
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
224
225
226
227
228
229
230
231
232 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
233 
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">Info <span class="caret"></span></a>
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
    </div>
    <div class="span8">
      <h3>Example markup</h3>
      <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>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
    Action
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
    </div>
  </div>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
261
262
263
264 
  <div class="row">
    <div class="span4">
      <h3>Split button dropdowns</h3>
      <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>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
265
266
267
268
269
270
271
272
273
274
275
276
277 
      <div class="btn-toolbar" style="margin-top: 18px;">
        <div class="btn-group">
          <a class="btn" href="#">Action</a>
          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
278
279 
          <a class="btn btn-primary" href="#">Action</a>
          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
280
281
282
283
284
285
286
287
288 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
289
290 
          <a class="btn btn-danger" href="#">Danger</a>
          <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
291
292
293
294
295
296
297
298
299
300
301 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar">
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
302
303 
          <a class="btn btn-success" href="#">Success</a>
          <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
304
305
306
307
308
309
310
311
312 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
Mark Otto's avatar
*really* refactor the buttons and update them all over the docs    
Mark Otto committed
313
314 
          <a class="btn btn-info" href="#">Info</a>
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
Mark Otto's avatar
fixing up buttons and examples of implementing icons    
Mark Otto committed
315
316
317
318
319
320
321
322
323 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
324 
    </div>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
325
326 
    <div class="span8">
      <h3>Example markup</h3>
Mark Otto's avatar
add in regular button dropdowns, rejigger the button dropdowns section to reflect change    
Mark Otto committed
327 
      <p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
328
329
330
331
332
333
334
335
336
337
338
339 
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
    </div>
Mark Otto's avatar
update the subnav on all pages    
Mark Otto committed
340
341 
  </div>
</section>
Jacob Thornton's avatar
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup    
Jacob Thornton committed
342
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
343
344
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
345 
<!-- Nav, Tabs, & Pills
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
346 
================================================== -->
Mark Otto's avatar
updated js pages to put examples first    
Mark Otto committed
347 
<section id="navs">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
348 
  <div class="page-header">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
349 
    <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
350 
  </div>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
351
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
352 
  <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
353 
  <div class="row">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
354
355
356
357
358
359
360
361
362 
    <div class="span4">
      <h3>Powerful base class</h3>
      <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>
      <h3>Why tabs and pills</h3>
      <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>
      <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
    </div>
    <div class="span4">
      <h3>Basic tabs</h3>
nkryptic's avatar
add nav- prefix to rest of docs    
nkryptic committed
363 
      <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
364 
      <ul class="nav nav-tabs">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
365
366
367 
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
368 
      </ul>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
369 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
370 
&lt;ul class="nav nav-tabs"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
371
372
373
374
375
376
377 
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
378 
    </div>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
379
380 
    <div class="span4">
      <h3>Basic pills</h3>
nkryptic's avatar
add nav- prefix to rest of docs    
nkryptic committed
381 
      <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
382 
      <ul class="nav nav-pills">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
383
384
385 
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
386 
      </ul>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
387 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
388 
&lt;ul class="nav nav-pills"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
389
390
391
392
393
394
395 
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
396
397
398 
    </div>
  </div>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
399 
  <h2>Stackable <small>Make tabs or pills vertical</small></h2>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
400
401 
  <div class="row">
    <div class="span4">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
402 
      <h3>How to stack 'em</h3>
nkryptic's avatar
add nav- prefix to rest of docs    
nkryptic committed
403 
      <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>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
404
405 
    </div>
    <div class="span4">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
406 
      <h3>Stacked tabs</h3>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
407 
      <ul class="nav nav-tabs nav-stacked">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
408
409
410
411 
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
412 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
413 
&lt;ul class="nav nav-tabs nav-stacked"&gt;
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
414
415
416 
  ...
&lt;/ul&gt;
</pre>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
417
418
419 
    </div>
    <div class="span4">
      <h3>Stacked pills</h3>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
420 
      <ul class="nav nav-pills nav-stacked">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
421
422
423
424 
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
425 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
426 
&lt;ul class="nav nav-pills nav-stacked"&gt;
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues    
Mark Otto committed
427
428
429
430 
  ...
&lt;/ul&gt;
</pre>
    </div>
Mark Otto's avatar
tweaks abound, updated prettify styles, new sidenav component started, sprite icons started    
Mark Otto committed
431
432 
  </div>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
433 
  <h2>Dropdowns <small>For advanced nav components</small></h2>
Mark Otto's avatar
breaking out patterns.less even more, removing unnecessary div from checkbox...    
Mark Otto committed
434 
  <div class="row">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
435
436
437
438 
    <div class="span4">
      <h3>Rich menus made easy</h3>
      <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
      <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
439 
    </div>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
440
441 
    <div class="span4">
      <h3>Tabs with dropdowns</h3>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
442 
      <ul class="nav nav-tabs">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
443
444
445
446
447
448
449
450
451
452
453
454
455 
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
456 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
457 
&lt;ul class="nav nav-tabs"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
458 
  &lt;li class="dropdown"&gt;
Jacob Thornton's avatar
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup    
Jacob Thornton committed
459 
    &lt;a class="dropdown-toggle"
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
460
461
462
463
464
465
466
467
468
469 
       data-toggle="dropdown"
       href="#"&gt;
        Dropdown
        &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;!-- links --&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
470 
</pre>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
471
472
473 
    </div>
    <div class="span4">
      <h3>Pills with dropdowns</h3>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
474 
      <ul class="nav nav-pills">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
475
476
477
478
479
480
481
482
483
484
485
486
487 
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
488 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
489 
&lt;ul class="nav nav-pills"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
490 
  &lt;li class="dropdown"&gt;
Jacob Thornton's avatar
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup    
Jacob Thornton committed
491 
    &lt;a class="dropdown-toggle"
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
492
493
494
495
496
497
498
499
500
501 
       data-toggle="dropdown"
       href="#"&gt;
        Dropdown
        &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;!-- links --&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
502
503 
</pre>
    </div>
Mark Otto's avatar
tweaks abound, updated prettify styles, new sidenav component started, sprite icons started    
Mark Otto committed
504
505 
  </div>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
506
507
508
509
510
511 
  <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
  <div class="row">
    <div class="span4">
      <h3>Application-style navigation</h3>
      <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>
      <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
512
513 
      <h4>With icons</h4>
      <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>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
514
515 
    </div>
    <div class="span4">
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
516 
      <h3>Example nav list</h3>
nkryptic's avatar
add nav- prefix to rest of docs    
nkryptic committed
517 
      <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
518 
      <div class="well" style="padding: 8px 0;">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
519 
        <ul class="nav nav-list">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
520 
          <li class="nav-header">List header</li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
521 
          <li class="active"><a href="#">Home</a></li>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
522
523
524
525
526
527 
          <li><a href="#">Library</a></li>
          <li><a href="#">Applications</a></li>
          <li class="nav-header">Another list header</li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Help</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
528 
        </ul>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
529 
      </div> <!-- /well -->
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
530 
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
531 
&lt;ul class="nav nav-list"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
532
533
534 
  &lt;li class="nav-header"&gt;
    List header
  &lt;/li&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
535 
  &lt;li class="active"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
536 
    &lt;a href="#"&gt;Home&lt;/a&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
537 
  &lt;/li&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
538
539 
  &lt;li&gt;
    &lt;a href="#"&gt;Library&lt;/a&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
540 
  &lt;/li&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
541 
  ...
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
542 
&lt;/ul&gt;
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
543
544
545
546
547
548 
</pre>
    </div>
    <div class="span4">
      <h3>Example with icons</h3>
      <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
      <div class="well" style="padding: 8px 0;">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
549 
        <ul class="nav nav-list">
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
550 
          <li class="nav-header">List header</li>
Mark Otto's avatar
chance icon class    
Mark Otto committed
551
552
553 
          <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
          <li><a href="#"><i class="icon-book"></i> Library</a></li>
          <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
554 
          <li class="nav-header">Another list header</li>
Mark Otto's avatar
chance icon class    
Mark Otto committed
555
556
557 
          <li><a href="#"><i class="icon-user"></i> Profile</a></li>
          <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
          <li><a href="#"><i class="icon-flag"></i> Help</a></li>
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
558
559
560 
        </ul>
      </div> <!-- /well -->
<pre class="prettyprint linenums">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
561 
&lt;ul class="nav nav-list"&gt;
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
562
563
564 
  ...
  &lt;li&gt;
    &lt;a href="#"&gt;
Mark Otto's avatar
chance icon class    
Mark Otto committed
565 
      &lt;i class="icon-book"&gt;&lt;/i&gt;
Mark Otto's avatar
add icons in nav list example and markup    
Mark Otto committed
566
567
568
569
570 
      Library
    &lt;/a&gt;
  &lt;/li&gt;
  ...
&lt;/ul&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
571 
</pre>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
572
573 
    </div>
  </div>
Purwandi's avatar
Remove sidebar with icon from my own repo    
Purwandi committed
574
Mark Otto's avatar
docs updates, forms updated to include error states and more examples, remove...    
Mark Otto committed
575
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
576 
  <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
Mark Otto's avatar
remove tabbable stuff to try new approach    
Mark Otto committed
577
578
579 
  <div class="row">
    <div class="span4">
      <h3>What's included</h3>
Mark Otto's avatar
cleanup organization of tabbable nav section    
Mark Otto committed
580 
      <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>
Mark Otto's avatar
remove tabbable stuff to try new approach    
Mark Otto committed
581
582 
      <p>Changing between them is easy and only requires changing very little markup.</p>
    </div>
Mark Otto's avatar
cleanup organization of tabbable nav section    
Mark Otto committed
583 
    <div class="span4">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
584 
      <h3>Tabbable example</h3>
nkryptic's avatar
add nav- prefix to rest of docs    
nkryptic committed
585 
      <p>To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.</p>
Mark Otto's avatar
cleanup organization of tabbable nav section    
Mark Otto committed
586 
      <div class="tabbable" style="margin-bottom: 9px;">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
587 
        <ul class="nav nav-tabs">
Jacob Thornton's avatar
clean up all the js across all the doc pages    
Jacob Thornton committed
588
589
590 
          <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
          <li><a href="#2" data-toggle="tab">Section 2</a></li>
          <li><a href="#3" data-toggle="tab">Section 3</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
591
592
593 
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="1">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
594 
            <p>I'm in Section 1.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
595
596 
          </div>
          <div class="tab-pane" id="2">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
597 
            <p>Howdy, I'm in Section 2.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
598
599 
          </div>
          <div class="tab-pane" id="3">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
600 
            <p>What up girl, this is Section 3.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
601
602 
          </div>
        </div>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
603 
      </div> <!-- /tabbable -->
Mark Otto's avatar
cleanup organization of tabbable nav section    
Mark Otto committed
604
605
606
607 
    </div>
    <div class="span4">
      <h3>Custom jQuery plugin</h3>
      <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>
Mark Otto's avatar
fix js links in components    
Mark Otto committed
608 
      <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
Mark Otto's avatar
cleanup organization of tabbable nav section    
Mark Otto committed
609
610 
    </div>
  </div>
Jacob Thornton's avatar
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup    
Jacob Thornton committed
611
Mark Otto's avatar
cleanup organization of tabbable nav section    
Mark Otto committed
612
613 
  <h3>Straightforward markup</h3>
  <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
614
615 
<pre class="prettyprint linenums">
&lt;div class="tabbable"&gt;
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
616 
  &lt;ul class="nav nav-tabs"&gt;
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
617
618
619
620
621
622
623
624
625
626
627
628
629 
    &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="1"&gt;
      &lt;p&gt;I'm in Section 1.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="2"&gt;
      &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
630
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
631
632
633
634
635
636
637
638
639 
  <h3>Tabbable in any direction</h3>
  <div class="row">
    <div class="span4">
      <h4>Tabs on the bottom</h4>
      <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
      <div class="tabbable tabs-below">
        <div class="tab-content">
          <div class="tab-pane active" id="A">
            <p>I'm in Section A.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
640 
          </div>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
641
642
643
644
645 
          <div class="tab-pane" id="B">
            <p>Howdy, I'm in Section B.</p>
          </div>
          <div class="tab-pane" id="C">
            <p>What up girl, this is Section C.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
646
647 
          </div>
        </div>
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
648 
        <ul class="nav nav-tabs">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
649
650
651
652
653 
          <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
          <li><a href="#B" data-toggle="tab">Section 2</a></li>
          <li><a href="#C" data-toggle="tab">Section 3</a></li>
        </ul>
      </div> <!-- /tabbable -->
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
654 
<pre class="prettyprint linenums" style="margin-top: 11px;">
Mark Otto's avatar
fix tabs-below typo    
Mark Otto committed
655 
&lt;div class="tabbable tabs-below"&gt;
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
656
657
658 
  &lt;div class="tab-content"&gt;
    ...
  &lt;/div&gt;
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
659
660
661 
  &lt;ul class="nav nav-tabs"&gt;
    ...
  &lt;/ul&gt;
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
662
663 
&lt;/div&gt;
</pre>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
664
665
666
667
668 
    </div>
    <div class="span4">
      <h4>Tabs on the left</h4>
      <p>Swap the class to put tabs on the left.</p>
      <div class="tabbable tabs-left">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
669 
        <ul class="nav nav-tabs">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
670
671
672
673 
          <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
          <li><a href="#lB" data-toggle="tab">Section 2</a></li>
          <li><a href="#lC" data-toggle="tab">Section 3</a></li>
        </ul>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
674 
        <div class="tab-content">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
675
676 
          <div class="tab-pane active" id="lA">
            <p>I'm in Section A.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
677 
          </div>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
678
679 
          <div class="tab-pane" id="lB">
            <p>Howdy, I'm in Section B.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
680 
          </div>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
681
682 
          <div class="tab-pane" id="lC">
            <p>What up girl, this is Section C.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
683
684 
          </div>
        </div>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
685 
      </div> <!-- /tabbable -->
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
686
687 
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-left"&gt;
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
688 
  &lt;ul class="nav nav-tabs"&gt;
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
689
690
691
692
693
694
695 
    ...
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</pre>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
696
697
698
699
700 
    </div>
    <div class="span4">
      <h4>Tabs on the right</h4>
      <p>Swap the class to put tabs on the right.</p>
      <div class="tabbable tabs-right">
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
701 
        <ul class="nav nav-tabs">
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
702
703
704 
          <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
          <li><a href="#rB" data-toggle="tab">Section 2</a></li>
          <li><a href="#rC" data-toggle="tab">Section 3</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
705 
        </ul>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
706
707
708
709
710
711
712
713
714
715
716
717 
        <div class="tab-content">
          <div class="tab-pane active" id="rA">
            <p>I'm in Section A.</p>
          </div>
          <div class="tab-pane" id="rB">
            <p>Howdy, I'm in Section B.</p>
          </div>
          <div class="tab-pane" id="rC">
            <p>What up girl, this is Section C.</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
718
719 
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-right"&gt;
Mark Otto's avatar
refactor the navs to use prefixed classes, because you know, consistency is beast mode    
Mark Otto committed
720 
  &lt;ul class="nav nav-tabs"&gt;
Mark Otto's avatar
fix progress bars by removing border and negative margins    
Mark Otto committed
721
722
723
724
725
726
727 
    ...
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</pre>
Mark Otto's avatar
redoing the tabs on bottom, left, and right    
Mark Otto committed
728
729 
    </div>
  </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
730
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
731
732
733
734
735
736
737
738
739
740
741
742 
</section>



<!-- Navbar
================================================== -->
<section id="navbar">
  <div class="page-header">
    <h1>Navbar</h1>
  </div>
  <h2>Static navbar example</h2>
  <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
Mark Otto's avatar
removing required .navbar-static class, rewrote docs to reflect the change,...    
Mark Otto committed
743 
  <div class="navbar">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
744
745 
    <div class="navbar-inner">
      <div class="container" style="width: auto;">
Mark Otto's avatar
fix the navbar click and a few jank responsive problems    
Mark Otto committed
746 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
chance icon class    
Mark Otto committed
747
748
749 
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
Mark Otto's avatar
fix the navbar click and a few jank responsive problems    
Mark Otto committed
750 
        </a>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
751 
        <a class="brand" href="#">Project name</a>
Mark Otto's avatar
fix the navbar click and a few jank responsive problems    
Mark Otto committed
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773 
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="">
            <input type="text" class="search-query span2" placeholder="Search">
          </form>
          <ul class="nav pull-right">
            <li><a href="#">Link</a></li>
Mark Otto's avatar
rename vertical-divider to divider-vertical, add more space around the divider    
Mark Otto committed
774 
            <li class="divider-vertical"></li>
Mark Otto's avatar
fix the navbar click and a few jank responsive problems    
Mark Otto committed
775
776
777
778
779
780
781
782
783
784
785
786 
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
787
788
789
790
791
792
793
794
795 
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->

  <div class="row">
    <div class="span8">
      <h3>Navbar scaffolding</h3>
      <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<pre class="prettyprint linenums">
Mark Otto's avatar
removing required .navbar-static class, rewrote docs to reflect the change,...    
Mark Otto committed
796 
&lt;div class="navbar"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
797 
  &lt;div class="navbar-inner"&gt;
Mark Otto's avatar
correct navbar scaffolding code snippet    
Mark Otto committed
798 
    &lt;div class="container"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
799
800
801
802
803 
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
Mark Otto's avatar
removing required .navbar-static class, rewrote docs to reflect the change,...    
Mark Otto committed
804 
      <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>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
805 
<pre class="prettyprint linenums">
Mark Otto's avatar
huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff    
Mark Otto committed
806 
&lt;div class="navbar navbar-fixed-top"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
807
808
809
810
811
812
813
814
815
816
817
818
819 
  ...
&lt;/div&gt;
</pre>
      <h3>Brand name</h3>
      <p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
&lt;a class="brand" href="#"&gt;
  Project name
&lt;/a&gt;
</pre>
      <h3>Search form</h3>
      <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>
<pre class="prettyprint linenums">
Mark Otto's avatar
fix docs: move .pull-left from search input to search form in navbar    
Mark Otto committed
820
821 
&lt;form class="navbar-search pull-left"&gt;
  &lt;input type="text" class="search-query" placeholder="Search"&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
822
823 
&lt;/form&gt;
</pre>
Mark Otto's avatar
update components page to include docs for the new navbar collapse feature,...    
Mark Otto committed
824 
      <h3>Optional responsive variation</h3>
Mark Otto's avatar
update navbar collapse everywhere and remake    
Mark Otto committed
825 
      <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>
Mark Otto's avatar
update components page to include docs for the new navbar collapse feature,...    
Mark Otto committed
826 
<pre class="prettyprint linenums">
Mark Otto's avatar
removing required .navbar-static class, rewrote docs to reflect the change,...    
Mark Otto committed
827 
&lt;div class="navbar"&gt;
Mark Otto's avatar
update components page to include docs for the new navbar collapse feature,...    
Mark Otto committed
828
829
830
831
832 
  &lt;div class="navbar-inner"&gt;
    &lt;div class="container"&gt;
      
      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
Mark Otto's avatar
chance icon class    
Mark Otto committed
833
834
835 
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
Mark Otto's avatar
update components page to include docs for the new navbar collapse feature,...    
Mark Otto committed
836
837
838
839
840
841 
      &lt;/a&gt;
      
      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
      &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;

      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
Mark Otto's avatar
remove .collapse from navbar responsive docs    
Mark Otto committed
842 
      &lt;div class="nav-collapse"&gt;
Mark Otto's avatar
update components page to include docs for the new navbar collapse feature,...    
Mark Otto committed
843
844
845
846
847
848
849 
        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
Mark Otto's avatar
updates to responsive and docs for responsive navbar    
Mark Otto committed
850
851
852 
      <div class="alert alert-info">
        <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
      </div>
Mark Otto's avatar
update components page to include docs for the new navbar collapse feature,...    
Mark Otto committed
853
Mark Otto's avatar
fix the navbar click and a few jank responsive problems    
Mark Otto committed
854 
    </div><!-- /.span -->
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
855
856
857 
    <div class="span4">
      <h3>Nav links</h3>
      <p>Nav items are simple to add via unordered lists.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
858 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
859
860
861
862
863
864
865
866 
&lt;ul class="nav"&gt;
  &lt;li class="active"&gt;
    &lt;a href="#">Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
Mark Otto's avatar
fix up dropdowns and navbar docs for the new dropdown styles    
Mark Otto committed
867 
      <h3>Adding dropdowns</h3>
Mark Otto's avatar
fix js links in components    
Mark Otto committed
868 
      <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdown">our javascript plugin</a>.</p>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
869
870
871
872
873
874
875 
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Account
Mark Otto's avatar
fix up dropdowns and navbar docs for the new dropdown styles    
Mark Otto committed
876 
          &lt;b class="caret"&gt;&lt;/b&gt;
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
877
878
879
880
881 
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      ...
    &lt;/ul&gt;
  &lt;/li&gt;
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
882
883 
&lt;/ul&gt;
</pre>
Mark Otto's avatar
fix js links in components    
Mark Otto committed
884 
      <p><a class="btn" href="./javascript.html#dropdown">Get the javascript &rarr;</a></p>
Mark Otto's avatar
fix the navbar click and a few jank responsive problems    
Mark Otto committed
885
886 
    </div><!-- /.span -->
  </div><!-- /.row -->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
887
Mark Otto's avatar
docs updates, forms updated to include error states and more examples, remove...    
Mark Otto committed
888
889
890
891
892
893
894
895
896
897
898 
</section>



<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
  <div class="page-header">
    <h1>Breadcrumbs <small></small></h1>
  </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
899 
  <div class="row">
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
900
901
902
903
904
905 
    <div class="span6">
      <h3>Why use them</h3>
      <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>

      <h3>Examples</h3>
      <p>A single example shown as it might be displayed across multiple pages.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
906
907
908
909
910 
      <ul class="breadcrumb">
        <li class="active">Home</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
911 
        <li class="active">Library</li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
912
913
914 
      </ul>
      <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
915
916 
        <li><a href="#">Library</a> <span class="divider">/</span></li>
        <li class="active">Data</li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
917 
      </ul>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
918
919
920
921 
    </div>
    <div class="span6">
      <h3>Markup</h3>
      <p>HTML is your standard unordered list with links.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
922
923 
<pre class="prettyprint linenums">
&lt;ul class="breadcrumb"&gt;
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
924
925
926
927
928
929
930
931
932 
  &lt;li&gt;
    &lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;Data&lt;/a&gt;
  &lt;/li&gt;
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
933
934
935
936
937 
&lt;/ul&gt;
</pre>
    </div>
  </div>
Mark Otto's avatar
docs updates, forms updated to include error states and more examples, remove...    
Mark Otto committed
938
939
940
941
942
943 
</section>



<!-- Pagination
================================================== -->
Chris Gunther's avatar
fix section ID for pagination    
Chris Gunther committed
944 
<section id="pagination">
Mark Otto's avatar
docs updates, forms updated to include error states and more examples, remove...    
Mark Otto committed
945 
  <div class="page-header">
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
946 
    <h1>Pagination <small>Two options for paging through content</small></h1>
Mark Otto's avatar
docs updates, forms updated to include error states and more examples, remove...    
Mark Otto committed
947
948 
  </div>
Mark Otto's avatar
chance icon class    
Mark Otto committed
949 
  <h2>Multicon-page pagination</h2>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
950 
  <div class="row">
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
951
952
953
954
955
956
957 
    <div class="span4">
      <h3>When to use</h3>
      <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>
      <h3>Stateful page links</h3>
      <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>
      <h3>Flexible alignment</h3>
      <p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
958 
    </div>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
959
960
961 
    <div class="span4">
      <h3>Examples</h3>
      <p>The default pagination component is flexible and works in a number of variations.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
962
963 
      <div class="pagination">
        <ul>
Mark Otto's avatar
make dl and child elements less specific    
Mark Otto committed
964 
          <li class="disabled"><a href="#">&laquo;</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
965
966
967
968 
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
Mark Otto's avatar
make dl and child elements less specific    
Mark Otto committed
969 
          <li><a href="#">&raquo;</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
970
971
972
973 
        </ul>
      </div>
      <div class="pagination">
        <ul>
Mark Otto's avatar
make dl and child elements less specific    
Mark Otto committed
974 
          <li><a href="#">&laquo;</a></li>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
975 
          <li><a href="#">10</a></li>
Mark Otto's avatar
make dl and child elements less specific    
Mark Otto committed
976
977
978 
          <li class="active"><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">&raquo;</a></li>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
979
980
981
982
983 
        </ul>
      </div>
      <div class="pagination">
        <ul>
          <li><a href="#">&larr;</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
984 
          <li class="active"><a href="#">10</a></li>
Mark Otto's avatar
make dl and child elements less specific    
Mark Otto committed
985 
          <li class="disabled"><a href="#">...</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
986 
          <li><a href="#">20</a></li>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
987 
          <li><a href="#">&rarr;</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
988
989 
        </ul>
      </div>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
990 
      <div class="pagination pagination-centered">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
991 
        <ul>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
992
993
994
995
996 
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
997
998 
        </ul>
      </div>
Mark Otto's avatar
adding the pager component after rewriting the pagination docs and css    
Mark Otto committed
999
1000 
    </div>
    <div class="span4">
For faster browsing, not all history is shown. View entire blame