Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
customize.html 26.1 KB
Newer Older
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Mark Otto's avatar
Changing title of docs pages to simply say 'Bootstrap' like the docs home page    
Mark Otto committed
5 
    <title>Customize · Bootstrap</title>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- 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]-->

    <!-- Le fav and touch icons -->
Mark Otto's avatar
fixes #5717: add retina favicon, recompile docs    
Mark Otto committed
21 
    <link rel="shortcut icon" href="assets/ico/favicon.png">
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
22
23
24
25
26
27
28 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <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">

  </head>
Mark Otto's avatar
fix static navbar container issues, clean up docs presentation by unfixing the...    
Mark Otto committed
29 
  <body data-spy="scroll" data-target=".bs-docs-sidebar">
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
30
31
32 

    <!-- Navbar
    ================================================== -->
Mark Otto's avatar
pre font-size increase; revert static top navbar, undo contents section for now    
Mark Otto committed
33 
    <div class="navbar navbar-inverse navbar-fixed-top">
Mark Otto's avatar
initial pass at removing navbar-inner from .navbar component    
Mark Otto committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64 
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <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="">
              <a href="./index.html">Home</a>
            </li>
            <li class="">
              <a href="./getting-started.html">Get started</a>
            </li>
            <li class="">
              <a href="./scaffolding.html">Scaffolding</a>
            </li>
            <li class="">
              <a href="./base-css.html">Base CSS</a>
            </li>
            <li class="">
              <a href="./components.html">Components</a>
            </li>
            <li class="">
              <a href="./javascript.html">JavaScript</a>
            </li>
            <li class="active">
              <a href="./customize.html">Customize</a>
            </li>
          </ul>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
65
66
67
68
69
70
71
72
73 
        </div>
      </div>
    </div>

<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>Customize and download</h1>
Martin Bean's avatar
Standardized spelling of 'JavaScript'; added icons to file trees    
Martin Bean committed
74 
    <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
75
76
77
78 
  </div>
</header>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
79 
  <div class="container">
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
80
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
81
82
83
84 
    <!-- 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
85 
        <ul class="nav nav-list bs-docs-sidenav">
Mark Otto's avatar
Swap old icons for new in docs    
Mark Otto committed
86
87
88
89 
          <li><a href="#components"><i class="glyphicon-chevron-right"></i> 1. Choose components</a></li>
          <li><a href="#plugins"><i class="glyphicon-chevron-right"></i> 2. Select jQuery plugins</a></li>
          <li><a href="#variables"><i class="glyphicon-chevron-right"></i> 3. Customize variables</a></li>
          <li><a href="#download"><i class="glyphicon-chevron-right"></i> 4. Download</a></li>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132 
        </ul>
      </div>
      <div class="span9">


        <!-- Customize form
        ================================================== -->
        <form>
          <section class="download" id="components">
            <div class="page-header">
              <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
              <h1>
                1. Choose components
              </h1>
            </div>
            <div class="row download-builder">
              <div class="span3">
                <h3>Scaffolding</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
                <h3>Base CSS</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
              </div><!-- /span -->
              <div class="span3">
                <h3>Components</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
Mark Otto's avatar
add media.less to customizer page    
Mark Otto committed
133 
                <label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media component</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194 
                <h3>JS Components</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
              </div><!-- /span -->
              <div class="span3">
                <h3>Miscellaneous</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
                <h3>Responsive</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
              </div><!-- /span -->
            </div><!-- /row -->
          </section>

          <section class="download" id="plugins">
            <div class="page-header">
              <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
              <h1>
                2. Select jQuery plugins
              </h1>
            </div>
            <div class="row download-builder">
              <div class="span3">
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-transition.js">
                  Transitions <small>(required for any animation)</small>
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-modal.js">
                  Modals
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-dropdown.js">
                  Dropdowns
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
                  Scrollspy
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-tab.js">
                  Togglable tabs
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
                  Tooltips
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-popover.js">
                  Popovers <small>(requires Tooltips)</small>
                </label>
Mark Otto's avatar
add affix plugin to downloads page    
Mark Otto committed
195
196
197
198
199
200 
              </div><!-- /span -->
              <div class="span3">
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-affix.js">
                  Affix
                </label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239 
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-alert.js">
                  Alert messages
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-button.js">
                  Buttons
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-collapse.js">
                  Collapse
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-carousel.js">
                  Carousel
                </label>
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
                  Typeahead
                </label>
              </div><!-- /span -->
              <div class="span3">
                <h4 class="muted">Heads up!</h4>
                <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
              </div><!-- /span -->
            </div><!-- /row -->
          </section>


          <section class="download" id="variables">
            <div class="page-header">
              <a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
              <h1>
                3. Customize variables
              </h1>
            </div>
            <div class="row download-builder">
              <div class="span3">
                <h3>Scaffolding</h3>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
240 
                <label>@body-background</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
241 
                <input type="text" class="span3" placeholder="@white">
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
242 
                <label>@text-color</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
243
244
245 
                <input type="text" class="span3" placeholder="@grayDark">

                <h3>Links</h3>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
246 
                <label>@link-color</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
247 
                <input type="text" class="span3" placeholder="#08c">
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
248
249 
                <label>@link-color-hover</label>
                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287 
                <h3>Colors</h3>
                <label>@blue</label>
                <input type="text" class="span3" placeholder="#049cdb">
                <label>@green</label>
                <input type="text" class="span3" placeholder="#46a546">
                <label>@red</label>
                <input type="text" class="span3" placeholder="#9d261d">
                <label>@yellow</label>
                <input type="text" class="span3" placeholder="#ffc40d">
                <label>@orange</label>
                <input type="text" class="span3" placeholder="#f89406">
                <label>@pink</label>
                <input type="text" class="span3" placeholder="#c3325f">
                <label>@purple</label>
                <input type="text" class="span3" placeholder="#7a43b6">

                <h3>Sprites</h3>
                <label>@iconSpritePath</label>
                <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
                <label>@iconWhiteSpritePath</label>
                <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">

                <h3>Grid system</h3>
                <label>@gridColumns</label>
                <input type="text" class="span3" placeholder="12">
                <label>@gridColumnWidth</label>
                <input type="text" class="span3" placeholder="60px">
                <label>@gridGutterWidth</label>
                <input type="text" class="span3" placeholder="20px">
                <label>@gridColumnWidth1200</label>
                <input type="text" class="span3" placeholder="70px">
                <label>@gridGutterWidth1200</label>
                <input type="text" class="span3" placeholder="30px">
                <label>@gridColumnWidth768</label>
                <input type="text" class="span3" placeholder="42px">
                <label>@gridGutterWidth768</label>
                <input type="text" class="span3" placeholder="20px">
Mark Otto's avatar
reorg vars fields on customize page to ensure they are all in three columns for time being    
Mark Otto committed
288
289
290 
              </div><!-- /span -->
              <div class="span3">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
291 
                <h3>Typography</h3>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
292 
                <label>@font-family-sans-serif</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
293 
                <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
294 
                <label>@font-family-serif</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
295 
                <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
296 
                <label>@font-family-monospace</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
297 
                <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
298
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
299 
                <label>@base-font-size</label>
kylase's avatar
Changed placeholders value of @baseFontSize and @baseLineHeight to the values...    
kylase committed
300 
                <input type="text" class="span3" placeholder="14px">
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
301
302
303 
                <label>@base-font-family</label>
                <input type="text" class="span3" placeholder="@font-family-sans-serif">
                <label>@base-line-height</label>
kylase's avatar
Changed placeholders value of @baseFontSize and @baseLineHeight to the values...    
kylase committed
304 
                <input type="text" class="span3" placeholder="20px">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
305
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
306 
                <label>@headings-font-family</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
307 
                <input type="text" class="span3" placeholder="inherit">
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
308 
                <label>@headings-font-weight</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
309
310
311 
                <input type="text" class="span3" placeholder="bold">
                <label>@headingsColor</label>
                <input type="text" class="span3" placeholder="inherit">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
312
313 

                <label>@fontSizeLarge</label>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
314 
                <input type="text" class="span3" placeholder="@base-font-size * 1.25">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
315 
                <label>@fontSizeSmall</label>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
316 
                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
317 
                <label>@fontSizeMini</label>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
318 
                <input type="text" class="span3" placeholder="@base-font-size * 0.75">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333 

                <label>@paddingLarge</label>
                <input type="text" class="span3" placeholder="11px 19px">
                <label>@paddingSmall</label>
                <input type="text" class="span3" placeholder="2px 10px">
                <label>@paddingMini</label>
                <input type="text" class="span3" placeholder="1px 6px">

                <label>@baseBorderRadius</label>
                <input type="text" class="span3" placeholder="4px">
                <label>@borderRadiusLarge</label>
                <input type="text" class="span3" placeholder="6px">
                <label>@borderRadiusSmall</label>
                <input type="text" class="span3" placeholder="3px">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
334
335
336
337
338
339 
                <label>@heroUnitBackground</label>
                <input type="text" class="span3" placeholder="@grayLighter">
                <label>@heroUnitHeadingColor</label>
                <input type="text" class="span3" placeholder="inherit">
                <label>@heroUnitLeadColor</label>
                <input type="text" class="span3" placeholder="inherit">
Mark Otto's avatar
reorg vars fields on customize page to ensure they are all in three columns for time being    
Mark Otto committed
340
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
341
342
343
344
345
346
347
348
349
350 
                <h3>Tables</h3>
                <label>@tableBackground</label>
                <input type="text" class="span3" placeholder="transparent">
                <label>@tableBackgroundAccent</label>
                <input type="text" class="span3" placeholder="#f9f9f9">
                <label>@tableBackgroundHover</label>
                <input type="text" class="span3" placeholder="#f5f5f5">
                <label>@tableBorder</label>
                <input type="text" class="span3" placeholder="#ddd">
Mark Otto's avatar
reorg vars fields on customize page to ensure they are all in three columns for time being    
Mark Otto committed
351
352
353
354
355
356
357
358
359
360
361
362
363
364 
                <h3>Forms</h3>
                <label>@placeholderText</label>
                <input type="text" class="span3" placeholder="@grayLight">
                <label>@inputBackground</label>
                <input type="text" class="span3" placeholder="@white">
                <label>@inputBorder</label>
                <input type="text" class="span3" placeholder="#ccc">
                <label>@inputBorderRadius</label>
                <input type="text" class="span3" placeholder="3px">
                <label>@inputDisabledBackground</label>
                <input type="text" class="span3" placeholder="@grayLighter">
                <label>@formActionsBackground</label>
                <input type="text" class="span3" placeholder="#f5f5f5">
                <label>@btnPrimaryBackground</label>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
365 
                <input type="text" class="span3" placeholder="@link-color">
Mark Otto's avatar
reorg vars fields on customize page to ensure they are all in three columns for time being    
Mark Otto committed
366 
                <label>@btnPrimaryBackgroundHighlight</label>
Mark Otto's avatar
remove ; from customizer    
Mark Otto committed
367 
                <input type="text" class="span3" placeholder="darken(@white, 10%)">
Mark Otto's avatar
reorg vars fields on customize page to ensure they are all in three columns for time being    
Mark Otto committed
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389 

              </div><!-- /span -->
              <div class="span3">

                <h3>Form states &amp; alerts</h3>
                <label>@warningText</label>
                <input type="text" class="span3" placeholder="#c09853">
                <label>@warningBackground</label>
                <input type="text" class="span3" placeholder="#fcf8e3">
                <label>@errorText</label>
                <input type="text" class="span3" placeholder="#b94a48">
                <label>@errorBackground</label>
                <input type="text" class="span3" placeholder="#f2dede">
                <label>@successText</label>
                <input type="text" class="span3" placeholder="#468847">
                <label>@successBackground</label>
                <input type="text" class="span3" placeholder="#dff0d8">
                <label>@infoText</label>
                <input type="text" class="span3" placeholder="#3a87ad">
                <label>@infoBackground</label>
                <input type="text" class="span3" placeholder="#d9edf7">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419 
                <h3>Navbar</h3>
                <label>@navbarHeight</label>
                <input type="text" class="span3" placeholder="40px">
                <label>@navbarBackground</label>
                <input type="text" class="span3" placeholder="@grayDarker">
                <label>@navbarBackgroundHighlight</label>
                <input type="text" class="span3" placeholder="@grayDark">
                <label>@navbarText</label>
                <input type="text" class="span3" placeholder="@grayLight">
                <label>@navbarBrandColor</label>
                <input type="text" class="span3" placeholder="@navbarLinkColor">
                <label>@navbarLinkColor</label>
                <input type="text" class="span3" placeholder="@grayLight">
                <label>@navbarLinkColorHover</label>
                <input type="text" class="span3" placeholder="@white">
                <label>@navbarLinkColorActive</label>
                <input type="text" class="span3" placeholder="@navbarLinkColorHover">
                <label>@navbarLinkBackgroundHover</label>
                <input type="text" class="span3" placeholder="transparent">
                <label>@navbarLinkBackgroundActive</label>
                <input type="text" class="span3" placeholder="@navbarBackground">
                <label>@navbarSearchBackground</label>
                <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
                <label>@navbarSearchBackgroundFocus</label>
                <input type="text" class="span3" placeholder="@white">
                <label>@navbarSearchBorder</label>
                <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
                <label>@navbarSearchPlaceholderColor</label>
                <input type="text" class="span3" placeholder="#ccc">
Mark Otto's avatar
add a ton of the new vars to the customizer    
Mark Otto committed
420
421
422
423
424 
                <label>@navbarCollapseWidth</label>
                <input type="text" class="span3" placeholder="979px">
                <label>@navbarCollapseDesktopWidth</label>
                <input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
425
426
427
428
429
430
431
432
433
434 
                <h3>Dropdowns</h3>
                <label>@dropdownBackground</label>
                <input type="text" class="span3" placeholder="@white">
                <label>@dropdownBorder</label>
                <input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
                <label>@dropdownLinkColor</label>
                <input type="text" class="span3" placeholder="@grayDark">
                <label>@dropdownLinkColorHover</label>
                <input type="text" class="span3" placeholder="@white">
                <label>@dropdownLinkBackgroundHover</label>
Mark Otto's avatar
Part 1 of unCamelCasing variables    
Mark Otto committed
435 
                <input type="text" class="span3" placeholder="@link-color">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452 
              </div><!-- /span -->
            </div><!-- /row -->
          </section>

          <section class="download" id="download">
            <div class="page-header">
              <h1>
                4. Download
              </h1>
            </div>
            <div class="download-btn">
              <a class="btn btn-primary" href="#" >Customize and Download</a>
              <h4>What's included?</h4>
              <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
            </div>
          </section><!-- /download -->
        </form>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
453
454
455
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
456 
      </div>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
457 
    </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
458
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
459
460
461
462 
  </div>
Mark Otto's avatar
remove the canvas slider doodad    
Mark Otto committed
463
464
465
466 
    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
Mark Otto's avatar
copy and style changes to improve docs rendering on mobile devices    
Mark Otto committed
467
468
469 
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
Mark Otto's avatar
remove the canvas slider doodad    
Mark Otto committed
470 
        <ul class="footer-links">
Mark Otto's avatar
copy and style changes to improve docs rendering on mobile devices    
Mark Otto committed
471
472
473
474 
          <li><a href="http://blog.getbootstrap.com">Blog</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
          <li class="muted">&middot;</li>
Mark Otto's avatar
remove the canvas slider doodad    
Mark Otto committed
475
476
477
478 
          <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
        </ul>
      </div>
    </footer>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
479
480
Mark Otto's avatar
remove the canvas slider doodad    
Mark Otto committed
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499 

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/bootstrap-affix.js"></script>
Mark Otto's avatar
add holder and replace placehold.it    
Mark Otto committed
500
501
502
503 

    <script src="assets/js/holder/holder.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
Mark Otto's avatar
remove the canvas slider doodad    
Mark Otto committed
504 
    <script src="assets/js/application.js"></script>
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...  
Mark Otto committed
505
506
507
508
509 



  </body>
</html>