Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
base-css.html 81.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 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Mark Otto's avatar
change title attr to re-include twitter    
Mark Otto committed
5 
    <title>Base · Twitter Bootstrap</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
10 
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
Jacob Thornton's avatar
move doc building into base make method + build bootstrap to doc assets    
Jacob Thornton committed
11
12 
    <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
13
14
15 
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
Mark Otto's avatar
move shim after css    
Mark Otto committed
16
17
18
19
20 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
21 
    <!-- 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
adding 144x144 ipad touch icon    
Mark Otto committed
23 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
Mark Otto's avatar
updated apple touch icons and moved input responsive fix from <480 to <767    
Mark Otto committed
24 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
Mark Otto's avatar
use variable for navbar text line-height    
Mark Otto committed
25
26 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
Mark Otto's avatar
adding google analytics tracking to docs    
Mark Otto committed
27
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
28
29 
  </head>
Mark Otto's avatar
fix static navbar container issues, clean up docs presentation by unfixing the...    
Mark Otto committed
30 
  <body data-spy="scroll" data-target=".bs-docs-sidebar">
Mark Otto's avatar
add back left rail nav, tweak colors    
Mark Otto committed
31
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
32
33 
    <!-- Navbar
    ================================================== -->
Mark Otto's avatar
pre font-size increase; revert static top navbar, undo contents section for now    
Mark Otto committed
34 
    <div class="navbar navbar-inverse navbar-fixed-top">
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
35 
      <div class="navbar-inner">
Mark Otto's avatar
fix up docs to use default container, fix responsive home changes    
Mark Otto committed
36 
        <div class="container">
Purwandi's avatar
Add space on navbar button    
Purwandi committed
37 
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
38
39
40
41
42
43
44
45 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
46 
                <a href="./index.html">Home</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
47 
              </li>
Mark Otto's avatar
remove getting started link from home, add to navbar, overhaul getting started docs    
Mark Otto committed
48
49
50 
              <li class="">
                <a href="./getting-started.html">Get started</a>
              </li>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
51
52
53
54
55
56
57
58
59
60 
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="active">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="./components.html">Components</a>
              </li>
              <li class="">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
61 
                <a href="./javascript.html">Javascript</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
62 
              </li>
Mark Otto's avatar
renamed less.html to extend.html, removing all the vars and mixins    
Mark Otto committed
63 
              <li class="">
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...    
Mark Otto committed
64 
                <a href="./customize.html">Customize</a>
Mark Otto's avatar
renamed less.html to extend.html, removing all the vars and mixins    
Mark Otto committed
65 
              </li>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
66
67
68
69
70
71 
            </ul>
          </div>
        </div>
      </div>
    </div>
Mark Otto's avatar
fix indenting and remove hidden subnav on Base CSS docs    
Mark Otto committed
72 
<!-- Subhead
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
73
74 
================================================== -->
<header class="jumbotron subhead" id="overview">
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
75
76 
  <div class="container">
    <h1>Base CSS</h1>
Mark Otto's avatar
copy edits to docs    
Mark Otto committed
77 
    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
78 
  </div>
Mark Otto's avatar
updated javascripts for first pass at single column    
Mark Otto committed
79 
</header>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
80
Mark Otto's avatar
adding getting started page based on Bootstrap University from awhile back,...    
Mark Otto committed
81
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
82 
  <div class="container">
Mark Otto's avatar
more tweaks to layouts and some docs styles    
Mark Otto committed
83
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
84
85
86
87 
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
Jacob Thornton's avatar
get affix actually working and update docs    
Jacob Thornton committed
88 
        <ul class="nav nav-list bs-docs-sidenav">
Mark Otto's avatar
place chevrons first in sidenav in docs, fix ie7 bugs for said sidenav    
Mark Otto committed
89
90
91
92
93
94
95 
          <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
          <li><a href="#code"><i class="icon-chevron-right"></i> Code</a></li>
          <li><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>
          <li><a href="#forms"><i class="icon-chevron-right"></i> Forms</a></li>
          <li><a href="#buttons"><i class="icon-chevron-right"></i> Buttons</a></li>
          <li><a href="#images"><i class="icon-chevron-right"></i> Images</a></li>
          <li><a href="#icons"><i class="icon-chevron-right"></i> Icons by Glyphicons</a></li>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
96
97
98 
        </ul>
      </div>
      <div class="span9">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
99
100
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
101
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
102
103
104
105 
        <!-- Typography
        ================================================== -->
        <section id="typography">
          <div class="page-header">
Mark Otto's avatar
copy edits to base css page    
Mark Otto committed
106 
            <h1>Typography</h1>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
107 
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
108
Mark Otto's avatar
fix static navbar container issues, clean up docs presentation by unfixing the...    
Mark Otto committed
109 
          <h2 id="headings">Headings</h2>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
110
111
112
113
114
115
116
117
118 
          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
          <div class="bs-docs-example">
            <h1>h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
          </div>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
119
Mark Otto's avatar
fix static navbar container issues, clean up docs presentation by unfixing the...    
Mark Otto committed
120 
          <h2 id="body-copy">Body copy</h2>
Mark Otto's avatar
fixes #4517 manually in mustache file as well, typo in docs    
Mark Otto committed
121 
          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
122
123
124
125
126
127 
          <div class="bs-docs-example">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
          </div>
          <pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
128
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
129
130
131
132
133
134 
          <h3>Lead body copy</h3>
          <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
          <div class="bs-docs-example">
            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
          <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
135
Mark Otto's avatar
fix static navbar container issues, clean up docs presentation by unfixing the...    
Mark Otto committed
136 
          <h3>Built with Less</h3>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
137 
          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
138
139
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
140 
          <hr class="bs-docs-separator">
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
141
142
Mark Otto's avatar
fix static navbar container issues, clean up docs presentation by unfixing the...    
Mark Otto committed
143 
          <h2 id="emphasis">Emphasis</h2>
Mark Otto's avatar
fixes #4455: improve small styles and add to docs    
Mark Otto committed
144
145
146
147
148
149
150
151
152
153
154
155 
          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>

          <h3><code>&lt;small&gt;</code></h3>
          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
          <div class="bs-docs-example">
            <p><small>This line of text is meant to be treated as fine print.</small></p>
          </div>
<pre class="prettyprint">
&lt;p&gt;
  &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
&lt;/p&gt;
</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
156
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
157
158
159
160
161
162 
          <h3><code>&lt;strong&gt;</code></h3>
          <p>For emphasizing a snippet of text with <strong>important</strong></p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
          </div>
          <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
163
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
164
165
166
167
168
169 
          <h3><code>&lt;em&gt;</code></h3>
          <p>For emphasizing a snippet of text with <em>stress</em></p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
          </div>
          <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
170
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
171 
          <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
172
173
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
174 
          <hr class="bs-docs-separator">
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
175
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
176
Mark Otto's avatar
pre font-size increase; revert static top navbar, undo contents section for now    
Mark Otto committed
177 
          <h2 id="abbreviations">Abbreviations</h2>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
178 
          <p>Stylized implemenation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
179
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
180
181
182
183
184
185 
          <h3><code>&lt;abbr&gt;</code></h3>
          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
          <div class="bs-docs-example">
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
          </div>
          <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
186
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
187
188
189
190
191
192 
          <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
          <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
          <div class="bs-docs-example">
            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
          </div>
          <pre class="prettyprint">&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
193
194
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
195
196
197 
          <hr class="bs-docs-separator">
Mark Otto's avatar
pre font-size increase; revert static top navbar, undo contents section for now    
Mark Otto committed
198 
          <h2 id="addresses">Addresses</h2>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214 
          <p>Present contact information for the nearest ancestor or the entire body of work.</p>

          <h3><code>&lt;address&gt;</code></h3>
          <p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
          <div class="bs-docs-example">
            <address>
              <strong>Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
              <strong>Full Name</strong><br>
              <a href="mailto:#">first.last@gmail.com</a>
            </address>
          </div>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
215
216
217
218
219
220
221
222
223
224
225
226
227 
<pre class="prettyprint linenums">
&lt;address&gt;
  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  795 Folsom Ave, Suite 600&lt;br&gt;
  San Francisco, CA 94107&lt;br&gt;
  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;

&lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  &lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
&lt;/address&gt;
</pre>
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
228
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
229
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
230 
          <hr class="bs-docs-separator">
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
231
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
232
Mark Otto's avatar
pre font-size increase; revert static top navbar, undo contents section for now    
Mark Otto committed
233 
          <h2 id="blockquotes">Blockquotes</h2>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
234 
          <p>For quoting blocks of content from another source within your document.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
235
Mark Otto's avatar
fixes #4472: manually change mustache file as well for typo    
Mark Otto committed
236 
          <h3>Default blockquote</h3>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
237
238
239
240
241
242 
          <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
          <div class="bs-docs-example">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
243
244 
<pre class="prettyprint linenums">
&lt;blockquote&gt;
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
245 
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
246
247 
&lt;/blockquote&gt;
</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
248
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
249
250 
          <h3>Blockquote options</h3>
          <p>Style and content changes for simple variations on a standard blockquote.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
251
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
252
253
254
255
256
257
258
259 
          <h4>Naming a source</h4>
          <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
          <div class="bs-docs-example">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
260
261
262
263
264
265
266 
<pre class="prettyprint linenums">
&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
267
268
269
270
271
272
273
274 
          <h4>Alternate displays</h4>
          <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
          <div class="bs-docs-example" style="overflow: hidden;">
            <blockquote class="pull-right">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
275
276 
<pre class="prettyprint linenums">
&lt;blockquote class="pull-right"&gt;
Mark Otto's avatar
docs cleanup and blockquote cleanup for .pull-right option    
Mark Otto committed
277 
  ...
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
278
279
280
281 
&lt;/blockquote&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
282 
          <hr class="bs-docs-separator">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
283
Mark Otto's avatar
updated docs and type styles for blockquotes and a few fixes for type    
Mark Otto committed
284
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
285 
          <!-- Lists -->
Mark Otto's avatar
pre font-size increase; revert static top navbar, undo contents section for now    
Mark Otto committed
286 
          <h2 id="lists">Lists</h2>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333 

          <h3>Unordered</h3>
          <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
          <div class="bs-docs-example">
            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ul>
          </div>
<pre class="prettyprint linenums">
&lt;ul&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

          <h3>Ordered</h3>
          <p>A list of items in which the order <em>does</em> explicitly matter.</p>
          <div class="bs-docs-example">
            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit</li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ol>
          </div>
<pre class="prettyprint linenums">
&lt;ol&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;
</pre>
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
334
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
335
336 
        <h3>Unstyled</h3>
        <p>A list of items with no <code>list-style</code> or additional left padding.</p>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
337 
        <div class="bs-docs-example">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
338 
          <ul class="unstyled">
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356 
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
              <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
              </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
<pre class="prettyprint linenums">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
357 
&lt;ul class="unstyled"&gt;
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
358
359
360
361 
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
362
363 
        <h3>Description</h3>
        <p>A list of terms with their associated descriptions.</p>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
364 
        <div class="bs-docs-example">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
365
366
367
368
369
370
371
372
373 
          <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
          </dl>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
374
375 
        </div>
<pre class="prettyprint linenums">
Mark Otto's avatar
more tweaks to layouts and some docs styles    
Mark Otto committed
376
377
378
379
380
381 
&lt;dl&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396 
        <h4>Horizontal description</h4>
        <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
        <div class="bs-docs-example">
          <dl class="dl-horizontal">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
          </dl>
        </div>
Mark Otto's avatar
more tweaks to layouts and some docs styles    
Mark Otto committed
397
398
399
400
401
402 
<pre class="prettyprint linenums">
&lt;dl class="dl-horizontal"&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
403
404
405
406
407 
        <p>
          <span class="label label-info">Heads up!</span>
          Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
        </p>
      </section>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
408
409
410
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
411
412
413
414 
        <!-- Code
        ================================================== -->
        <section id="code">
          <div class="page-header">
Mark Otto's avatar
copy edits to base css page    
Mark Otto committed
415 
            <h1>Code</h1>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
416 
          </div>
Mark Otto's avatar
convert code section to new layout    
Mark Otto committed
417
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
418
419 
          <h2>Inline</h2>
          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
Mark Otto's avatar
modifications to new content    
Mark Otto committed
420
421
422 
<div class="bs-docs-example">
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
423 
<pre class="prettyprint linenums">
Mark Otto's avatar
modifications to new content    
Mark Otto committed
424 
For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inline.
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
425 
</pre>
Mark Otto's avatar
convert code section to new layout    
Mark Otto committed
426
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
427
428 
          <h2>Basic block</h2>
          <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
Mark Otto's avatar
modifications to new content    
Mark Otto committed
429
430
431 
<div class="bs-docs-example">
  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
432
433 
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;pre&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
434 
  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
435
436 
&lt;/pre&gt;
</pre>
Erik van der Kolk's avatar
Replace Note: by Heads up!    
Erik van der Kolk committed
437 
          <p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
438
439 
          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
        </section>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
440
441
442
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
443
444
445
446 
        <!-- Tables
        ================================================== -->
        <section id="tables">
          <div class="page-header">
Mark Otto's avatar
copy edits to base css page    
Mark Otto committed
447 
            <h1>Tables</h1>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
448 
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
449
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483 
          <h2>Default styles</h2>
          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
484 
<pre class="prettyprint linenums">
Mark Otto's avatar
scope table styles to a class, .table, instead of on the generic element as a smarter default    
Mark Otto committed
485 
&lt;table class="table"&gt;
Jacob Thornton's avatar
rebuild base-css    
Jacob Thornton committed
486 
  …
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
487
488 
&lt;/table&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
489
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
490
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530 
          <hr class="bs-docs-separator">


          <h2>Optional classes</h2>
          <p>Add any of the follow classes to the <code>.table</code> base class.</p>

          <h3><code>.table-striped</code></h3>
          <p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
          <div class="bs-docs-example">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
Mark Otto's avatar
more table docs cleanup    
Mark Otto committed
531 
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
Mark Otto's avatar
scope table styles to a class, .table, instead of on the generic element as a smarter default    
Mark Otto committed
532 
&lt;table class="table table-striped"&gt;
Jacob Thornton's avatar
rebuild base-css    
Jacob Thornton committed
533 
  …
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
534
535 
&lt;/table&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
536
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574 
          <h3><code>.table-bordered</code></h3>
          <p>Add borders and rounded corners to the table.</p>
          <div class="bs-docs-example">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwBootstrap</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
Mark Otto's avatar
adding bordered table to docs and showing it works with colspan    
Mark Otto committed
575 
<pre class="prettyprint linenums">
Mark Otto's avatar
scope table styles to a class, .table, instead of on the generic element as a smarter default    
Mark Otto committed
576 
&lt;table class="table table-bordered"&gt;
Jacob Thornton's avatar
rebuild base-css    
Jacob Thornton committed
577 
  …
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
578 
&lt;/table&gt;
Mark Otto's avatar
#3223: make table row hover optional class    
Mark Otto committed
579
580 
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613 
          <h3><code>.table-hover</code></h3>
          <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
          <div class="bs-docs-example">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
614
615
616
617
618
619 
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-hover"&gt;
  …
&lt;/table&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652 
          <h3><code>.table-condensed</code></h3>
          <p>Makes tables more compact by cutting cell padding in half.</p>
          <div class="bs-docs-example">
            <table class="table table-condensed">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
653
654
655
656
657
658
659 
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt;
  …
&lt;/table&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
660
661
662
663
664
665
666
667
668
669 
          <hr class="bs-docs-separator">


          <h2>Optional row classes</h2>
          <p>Use contextual classes to color table rows.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
670
671 
            <thead>
              <tr>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
672
673 
                <th>Class</th>
                <th>Description</th>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
674
675
676 
              </tr>
            </thead>
            <tbody>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
677
678
679
680
681 
              <tr>
                <td>
                  <code>.success</code>
                </td>
                <td>Indicates a successful or positive action.</td>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
682 
              </tr>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
683
684
685
686
687 
              <tr>
                <td>
                  <code>.error</code>
                </td>
                <td>Indicates a dangerous or potentially negative action.</td>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
688 
              </tr>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
689
690
691
692
693 
              <tr>
                <td>
                  <code>.info</code>
                </td>
                <td>Used as an alternative to the default styles.</td>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
694
695
696 
              </tr>
            </tbody>
          </table>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728 
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Product</th>
                  <th>Payment Taken</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                  <td>1</td>
                  <td>TB - Monthly</td>
                  <td>01/04/2012</td>
                  <td>Approved</td>
                </tr>
                <tr class="error">
                  <td>2</td>
                  <td>TB - Monthly</td>
                  <td>02/04/2012</td>
                  <td>Declined</td>
                </tr>
                <tr class="info">
                  <td>3</td>
                  <td>TB - Monthly</td>
                  <td>03/04/2012</td>
                  <td>Pending</td>
                </tr>
              </tbody>
            </table>
          </div>
Gavin Cooper (work)'s avatar
added ability to give rows in tables status classes .success .error and .info.    
Gavin Cooper (work) committed
729 
<pre class="prettyprint linenums">
Mark Otto's avatar
fixes #3845: add .btn-link for transparent buttons styled as links    
Mark Otto committed
730
731
732
733
734
735
736
737 
...
  &lt;tr class="success"&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;TB - Monthly&lt;/td&gt;
    &lt;td&gt;01/04/2012&lt;/td&gt;
    &lt;td&gt;Approved&lt;/td&gt;
  &lt;/tr&gt;
...
Gavin Cooper (work)'s avatar
added ability to give rows in tables status classes .success .error and .info.    
Gavin Cooper (work) committed
738
739
740 
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816 
          <hr class="bs-docs-separator">


          <h2>Supported table markup</h2>
          <p>List of supported table HTML elements and how they should be used.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
            <thead>
              <tr>
                <th>Tag</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>&lt;table&gt;</code>
                </td>
                <td>
                  Wrapping element for displaying data in a tabular format
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;thead&gt;</code>
                </td>
                <td>
                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tbody&gt;</code>
                </td>
                <td>
                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tr&gt;</code>
                </td>
                <td>
                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;td&gt;</code>
                </td>
                <td>
                  Default table cell
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;th&gt;</code>
                </td>
                <td>
                  Special table cell for column (or row, depending on scope and placement) labels<br>
                  Must be used within a <code>&lt;thead&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;caption&gt;</code>
                </td>
                <td>
                  Description or summary of what the table holds, especially useful for screen readers
                </td>
              </tr>
            </tbody>
          </table>
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
817
818 
<pre class="prettyprint linenums">
&lt;table&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
819 
  &lt;caption&gt;...&lt;/caption&gt;
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
820
821 
  &lt;thead&gt;
    &lt;tr&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
822
823 
      &lt;th&gt;...&lt;/th&gt;
      &lt;th&gt;...&lt;/th&gt;
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
824
825
826
827 
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
828
829 
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
830
831 
    &lt;/tr&gt;
  &lt;/tbody&gt;
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
832
833
834 
&lt;/table&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
835 
        </section>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
836
837
838
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
839
840
841
842
843
844 
        <!-- Forms
        ================================================== -->
        <section id="forms">
          <div class="page-header">
            <h1>Forms</h1>
          </div>
Mark Otto's avatar
finish off rest of base-css page    
Mark Otto committed
845
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
846
847
848
849
850
851 
          <h2>Default styles</h2>
          <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
          <form class="bs-docs-example">
            <legend>Legend</legend>
            <label>Label name</label>
            <input type="text" placeholder="Type something…">
Erik van der Kolk's avatar
Change .help-block tag for "Forms => Default styles" example into <span>    
Erik van der Kolk committed
852 
            <span class="help-block">Example block-level help text here.</span>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
853
854
855
856
857 
            <label class="checkbox">
              <input type="checkbox"> Check me out
            </label>
            <button type="submit" class="btn">Submit</button>
          </form>
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
858 
<pre class="prettyprint linenums">
Erik van der Kolk's avatar
Make Forms => Default styles code snippet the same as example    
Erik van der Kolk committed
859
860 
&lt;form&gt;
  &lt;legend&gt;Legend&lt;/legend&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
861 
  &lt;label&gt;Label name&lt;/label&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
862 
  &lt;input type="text" placeholder="Type something…"&gt;
Mark Otto's avatar
start rearranging form docs and clear up messaging about required classes and default styles    
Mark Otto committed
863 
  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
864
865
866
867
868
869 
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Check me out
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</pre>
Mark Otto's avatar
finish off rest of base-css page    
Mark Otto committed
870
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
871
Erik van der Kolk's avatar
Remove inexisting end tag </hr>    
Erik van der Kolk committed
872 
          <hr class="bs-docs-separator">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
873
874
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
875
876 
          <h2>Optional layouts</h2>
          <p>Included with Bootstrap are three optional form layouts for common use cases.</p>
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
877
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
878
879
880
881
882
883 
          <h3>Search form</h3>
          <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
          <form class="bs-docs-example form-search">
            <input type="text" class="input-medium search-query">
            <button type="submit" class="btn">Search</button>
          </form>
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
884 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
885 
&lt;form class="form-search"&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
886
887
888
889 
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>
Mark Otto's avatar
start rearranging form docs and clear up messaging about required classes and default styles    
Mark Otto committed
890
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
891
892
893
894
895
896
897
898
899
900 
          <h3>Inline form</h3>
          <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
          <form class="bs-docs-example form-inline">
            <input type="text" class="input-small" placeholder="Email">
            <input type="password" class="input-small" placeholder="Password">
            <label class="checkbox">
              <input type="checkbox"> Remember me
            </label>
            <button type="submit" class="btn">Sign in</button>
          </form>
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
901 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
902 
&lt;form class="form-inline"&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
903
904 
  &lt;input type="text" class="input-small" placeholder="Email"&gt;
  &lt;input type="password" class="input-small" placeholder="Password"&gt;
Mark Otto's avatar
update inline forms to resolve checkbox label with space in it and overlapping content, per #1969    
Mark Otto committed
905
906
907 
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Remember me
  &lt;/label&gt;
Mark Otto's avatar
add version to docs homepage, fix docs example for forms    
Mark Otto committed
908 
  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
909
910 
&lt;/form&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
911
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
912
913
914
915
916
917
918
919
920
921
922 
          <h3>Horizontal form</h3>
          <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
          <ul>
            <li>Add <code>.form-horizontal</code> to the form</li>
            <li>Wrap labels and controls in <code>.control-group</code></li>
            <li>Add <code>.control-label</code> to the label</li>
            <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
          </ul>
          <form class="bs-docs-example form-horizontal">
            <legend>Legend</legend>
            <div class="control-group">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
923 
              <label class="control-label" for="inputEmail">Email</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
924 
              <div class="controls">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
925 
                <input type="text" id="inputEmail" placeholder="Email">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
926 
              </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
927 
            </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
928 
            <div class="control-group">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
929 
              <label class="control-label" for="inputPassword">Password</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
930 
              <div class="controls">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
931 
                <input type="password" id="inputPassword" placeholder="Password">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
932 
              </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
933 
            </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
934
935
936
937
938
939
940 
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
              </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
941 
            </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
942 
          </form>
Mark Otto's avatar
add another code example for horizontal forms    
Mark Otto committed
943
944 
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
945 
  &lt;div class="control-group"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
946 
    &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
947 
    &lt;div class="controls"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
948 
      &lt;input type="text" id="inputEmail" placeholder="Email"&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
949
950
951 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
952 
    &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
953 
    &lt;div class="controls"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
954 
      &lt;input type="password" id="inputPassword" placeholder="Password"&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
955
956
957
958
959
960
961
962 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;div class="controls"&gt;
      &lt;label class="checkbox"&gt;
        &lt;input type="checkbox"&gt; Remember me
      &lt;/label&gt;
      &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
Mark Otto's avatar
add another code example for horizontal forms    
Mark Otto committed
963 
    &lt;/div&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
964 
  &lt;/div&gt;
Mark Otto's avatar
add another code example for horizontal forms    
Mark Otto committed
965
966 
&lt;/form&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
967
968
Erik van der Kolk's avatar
Remove inexisting end tag </hr>    
Erik van der Kolk committed
969 
          <hr class="bs-docs-separator">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
970
971
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
972
973 
          <h2>Supported form controls</h2>
          <p>Examples of standard form controls supported in an example form layout.</p>
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
974
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
975
976
977
978
979
980 
          <h3>Inputs</h3>
          <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
          <p>Requires the use of a specified <code>type</code> at all times.</p>
          <form class="bs-docs-example form-inline">
            <input type="text" placeholder="Text input">
          </form>
Mark Otto's avatar
rearrange other parts of forms docs    
Mark Otto committed
981 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
982 
&lt;input type="text" placeholder="Text input"&gt;
Mark Otto's avatar
rearrange other parts of forms docs    
Mark Otto committed
983 
</pre>
Mark Otto's avatar
finish off rest of base-css page    
Mark Otto committed
984
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
985 
          <h3>Textarea</h3>
Mark Otto's avatar
fix up padding on small buttons, add button examples    
Mark Otto committed
986 
          <p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
987
988
989 
          <form class="bs-docs-example form-inline">
            <textarea rows="3"></textarea>
          </form>
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
990 
<pre class="prettyprint linenums">
Erik van der Kolk's avatar
Make Forms => Textarea code snippet the same as example    
Erik van der Kolk committed
991 
&lt;textarea rows="3"&gt;&lt;/textarea&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
992
993 
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
994
995
996
997
998
999
1000 
          <h3>Checkboxes and radios</h3>
          <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
          <h4>Default (stacked)</h4>
          <form class="bs-docs-example">
            <label class="checkbox">
              <input type="checkbox" value="">
              Option one is this and that&mdash;be sure to include why it's great
For faster browsing, not all history is shown. View entire blame