Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
upgrading.html 10 KB
Newer Older
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
5 
    <title>Bootstrap, from Twitter</title>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
6
7
8
9 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
10 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
11
12
13
14
15
16
17
18
19
20 
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

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

    <!-- Le fav and touch icons -->
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
21
22
23
24
25 
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
26
27
28
29
30
31
32
33
34
35
36 
  </head>

  <body>

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-fixed">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="./index.html">Bootstrap</a>
          <ul class="nav">
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
37
38 
            <li class=""><a href="./index.html">Overview</a></li>
            <li class="dropdown ">
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
39
40
41
42
43 
              <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
                Scaffolding
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
Chris Gunther's avatar
fix navbar links to scaffolding > grid system    
Chris Gunther committed
44 
                <li><a href="./scaffolding.html#grid-system">Grid system</a></li>
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
45
46
47
48 
                <li><a href="./scaffolding.html#layouts">Layouts</a></li>
                <li><a href="./scaffolding.html#responsive">Responsive design</a></li>
              </ul>
            </li>
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
49 
            <li class="dropdown ">
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
50
51
52
53
54 
              <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
                Base CSS
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
Chris Gunther's avatar
fix navbar links to base CSS > typography    
Chris Gunther committed
55 
                <li><a href="./base-css.html#typography">Typography</a></li>
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
56
57
58
59
60
61 
                <li><a href="./base-css.html#tables">Tables</a></li>
                <li><a href="./base-css.html#forms">Forms</a></li>
                <li><a href="./base-css.html#buttons">Buttons</a></li>
                <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
              </ul>
            </li>
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
62 
            <li class="dropdown ">
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
63
64
65
66
67
68
69
70
71
72
73
74
75 
              <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
                Components
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="./components.html#buttonGroups">Button groups</a></li>
                <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
                <li><a href="./components.html#navs">Nav, tabs, pills</a></li>
                <li><a href="./components.html#navbar">Navbar</a></li>
                <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
                <li><a href="./components.html#pagination">Pagination</a></li>
                <li><a href="./components.html#thumbnails">Thumbnails</a></li>
                <li><a href="./components.html#alerts">Alert messages</a></li>
Chris Gunther's avatar
add Progress Bars to Components narbar dropdown    
Chris Gunther committed
76 
                <li><a href="./components.html#progress">Progress bars</a></li>
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
77
78 
              </ul>
            </li>
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
79 
            <li class="dropdown ">
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
80
81
82
83
84 
              <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
                Javascript plugins
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
Mark Otto's avatar
fix js link in docs nav, restyle accordion with new css    
Mark Otto committed
85 
                <li><a href="./javascript.html#javascript">Overview</a></li>
Purwandi's avatar
Fix id anchor javascript    
Purwandi committed
86
87 
                <li><a href="./javascript.html#modals">Modal</a></li>
                <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
88 
                <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
Purwandi's avatar
Fix id anchor javascript    
Purwandi committed
89
90
91 
                <li><a href="./javascript.html#tabs">Tab</a></li>
                <li><a href="./javascript.html#tooltips">Tooltip</a></li>
                <li><a href="./javascript.html#popovers">Popover</a></li>
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
92
93
94
95
96
97
98 
                <li><a href="./javascript.html#alerts">Alert</a></li>
                <li><a href="./javascript.html#buttons">Button</a></li>
                <li><a href="./javascript.html#collapse">Collapse</a></li>
                <li><a href="./javascript.html#carousel">Carousel</a></li>
                <li><a href="./javascript.html#typeahead">Typeahead</a></li>
              </ul>
            </li>
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
99 
            <li class="">
Mark Otto's avatar
nuke uber footer, bring back topbar dropdowns    
Mark Otto committed
100
101
102
103 
              <a href="./less.html">
                Using LESS
              </a>
            </li>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
104
105
106
107
108
109
110 
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
111
112
113
114
115
116 
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>Upgrading to Bootstrap 2</h1>
  <p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p>
</header>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156 


<h2>Rough outline</h2>
<ul>
  <li>Docs completely overhauled
    <ul>
      <li>Responsive thanks to new grid system</li>
      <li>Now less marketing and more information</li>
      <li>Extensive use of tables to share classes and elements of most components</li>
      <li>Broken down into several pages for easier consumption</li>
    </ul>
  </li>
  <li>Updated grid system, now only 12 columns
    <ul>
      <li>Same great classes, but now only 12 columns</li>
      <li>Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more</li>
    </ul>
  </li>
  <li>New thumbnails (previously media grids)
    <ul>
      <li><code>.media-grid</code> class has been changed to <code>.thumbnails</code></li>
      <li>Individual thumbnails now require <code>.thumbnail</code> class</li>
    </ul>
  </li>
  <li>Updated forms
    <ul>
      <li>Default form style is now stacked to use less CSS and add flexibility</li>
      <li>Exact same markup is required for vertical or horizontal forms&mdash;just swap the classes</li>
      <li>New form defaults for search, inline, vertical, and horizontal</li>
    </ul>
  </li>
  <li>Updated tables
    <ul>
      <li>Table classes made more consistent</li>
      <li>Removed unused table color options (too much code for such little impact)</li>
    </ul>
  </li>
  <li>Typography
    <ul>
      <li>Right-aligned option for blockquotes if float: right;</li>
Mark Otto's avatar
front page docs updated to include old getting started section, update code...    
Mark Otto committed
157
158
159 
      <li><code>h4</code> elements were dropped from 16px to 14px with a default <code>line-height</code> of 18px</li>
      <li><code>h5</code> elements were dropped from 14px to 12px</li>
      <li><code>h6</code> elements were dropped from 13px to 11px</li>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
160
161
162
163
164
165
166 
    </ul>
  </li>
  <li>Buttons
    <ul>
      <li>Added button bar options</li>
    </ul>
  </li>
Mark Otto's avatar
update the fluid examples to use new classes and clear the floats properly from sidebar    
Mark Otto committed
167
168
169
170
171 
  <li>Examples
    <ul>
      <li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
    </ul>
  </li>
Mark Otto's avatar
overhauled dropdowns now require use of .caret for dropdown arrow, redid the...    
Mark Otto committed
172
173
174
175 
  <li>Dropdown menus
    <ul>
      <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
      <li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
Mark Otto's avatar
nuke unused code, add to upgrading page    
Mark Otto committed
176 
      <li>The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.</li>
Mark Otto's avatar
overhauled dropdowns now require use of .caret for dropdown arrow, redid the...    
Mark Otto committed
177
178 
    </ul>
  </li>
Mark Otto's avatar
overhaul the entire tabs component structure and docs; remove side nav and...    
Mark Otto committed
179
180
181
182
183
184
185
186
187 
  <li>Navigation
    <ul>
      <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li>
      <li>New nav list component added that uses the same base class, <code>.nav</code></li>
      <li>Vertical tabs and pills have been added&mdash;just add <code>.stacked</code> to the <code>&lt;ul&gt;</code></li>
      <li>Pills were restyled to be less rounded by default</li>
      <li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
    </ul>
  </li>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
188 
</ul>
Mark Otto's avatar
updated all docs to jQuery 1.7, move all docs JS to application.js, and move...    
Mark Otto committed
189 
<!--
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
190
191
192
193
194
195 
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
-->
Mark Otto's avatar
updated all docs to jQuery 1.7, move all docs JS to application.js, and move...    
Mark Otto committed
196 
</ul>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
197
198
199
200
201
202
203
204 
      <!-- Footer
      ================================================== -->
      <footer class="footer">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
      </footer>
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
205
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
206
207 
    </div><!-- /container -->
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
208
Mark Otto's avatar
updated js includes to make nav work everywhere    
Mark Otto committed
209
210 
    <!-- Le javascript -->
    <!-- Placed at the end of the document so the pages load faster -->
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
211
212
213
214
215
216 
    <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
    <script src="../js/tests/vendor/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="../js/bootstrap-transition.js"></script>
    <script src="../js/bootstrap-alert.js"></script>
    <script src="../js/bootstrap-modal.js"></script>
Mark Otto's avatar
updated js includes to make nav work everywhere    
Mark Otto committed
217 
    <script src="../js/bootstrap-dropdown.js"></script>
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
218
219
220
221
222
223
224
225
226 
    <script src="../js/bootstrap-scrollspy.js"></script>
    <script src="../js/bootstrap-tab.js"></script>
    <script src="../js/bootstrap-tooltip.js"></script>
    <script src="../js/bootstrap-popover.js"></script>
    <script src="../js/bootstrap-button.js"></script>
    <script src="../js/bootstrap-collapse.js"></script>
    <script src="../js/bootstrap-carousel.js"></script>
    <script src="../js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>
Mark Otto's avatar
mostly docs updates, but also some bug fixes per github issues  
Mark Otto committed
227
228 
  </body>
</html>