POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/migration.html

   1 ---
   2 layout: default
   3 title: Migrating to v3.x
   4 slug: migration
   5 lead: "Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed."
   6 ---
   7
   8
   9 <!-- Migration
  10 ================================================== -->
  11 <div class="bs-docs-section">
  12   <h1 class="page-header">Migrating from 2.x to 3.0</h1>
  13
  14   <p class="lead">Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
  15
  16   <h2 id="classes">Major class changes</h2>
  17   <p>This table shows the style changes between v2.x and v3.0.</p>
  18   <div class="table-responsive">
  19     <table class="table table-bordered table-striped">
  20       <thead>
  21         <tr>
  22           <th>Bootstrap 2.x</th>
  23           <th>Bootstrap 3.0</th>
  24         </tr>
  25       </thead>
  26       <tbody>
  27         <tr>
  28           <td><code>.row-fluid</code></td>
  29           <td><code>.row</code></td>
  30         </tr>
  31         <tr>
  32           <td><code>.span*</code></td>
  33           <td><code>.col-md-*</code></td>
  34         </tr>
  35         <tr>
  36           <td><code>.offset*</code></td>
  37           <td><code>.col-md-offset-*</code></td>
  38         </tr>
  39         <tr>
  40           <td><code>.brand</code></td>
  41           <td><code>.navbar-brand</code></td>
  42         </tr>
  43         <tr>
  44           <td><code>.navbar .nav</code></td>
  45           <td><code>.navbar-nav</code></td>
  46         </tr>
  47         <tr>
  48           <td><code>.nav-collapse</code></td>
  49           <td><code>.navbar-collapse</code></td>
  50         </tr>
  51         <tr>
  52           <td><code>.nav-toggle</code></td>
  53           <td><code>.navbar-toggle</code></td>
  54         </tr>
  55         <tr>
  56           <td><code>.btn-navbar</code></td>
  57           <td><code>.navbar-btn</code></td>
  58         </tr>
  59         <tr>
  60           <td><code>.hero-unit</code></td>
  61           <td><code>.jumbotron</code></td>
  62         </tr>
  63         <tr>
  64           <td><code>.icon-*</code></td>
  65           <td><code>.glyphicon .glyphicon-*</code></td>
  66         </tr>
  67         <tr>
  68           <td><code>.btn</code></td>
  69           <td><code>.btn .btn-default</code></td>
  70         </tr>
  71         <tr>
  72           <td><code>.btn-mini</code></td>
  73           <td><code>.btn-xs</code></td>
  74         </tr>
  75         <tr>
  76           <td><code>.btn-small</code></td>
  77           <td><code>.btn-sm</code></td>
  78         </tr>
  79         <tr>
  80           <td><code>.btn-large</code></td>
  81           <td><code>.btn-lg</code></td>
  82         </tr>
  83         <tr>
  84           <td><code>.alert-error</code></td>
  85           <td><code>.alert-danger</code></td>
  86         </tr>
  87         <tr>
  88           <td><code>.visible-phone</code></td>
  89           <td><code>.visible-xs</code></td>
  90         </tr>
  91         <tr>
  92           <td><code>.visible-tablet</code></td>
  93           <td><code>.visible-sm</code></td>
  94         </tr>
  95         <tr>
  96           <td><code>.visible-desktop</code></td>
  97           <td>Split into <code>.visible-md .visible-lg</code></td>
  98         </tr>
  99         <tr>
 100           <td><code>.hidden-phone</code></td>
 101           <td><code>.hidden-xs</code></td>
 102         </tr>
 103         <tr>
 104           <td><code>.hidden-tablet</code></td>
 105           <td><code>.hidden-sm</code></td>
 106         </tr>
 107         <tr>
 108           <td><code>.hidden-desktop</code></td>
 109           <td>Split into <code>.hidden-md .hidden-lg</code></td>
 110         </tr>
 111         <tr>
 112           <td><code>.input-block-level</code></td>
 113           <td><code>.form-control</code></td>
 114         </tr>
 115         <tr>
 116           <td><code>.control-group</code></td>
 117           <td><code>.form-group</code></td>
 118         </tr>
 119         <tr>
 120           <td><code>.control-group.warning .control-group.error .control-group.success</code></td>
 121           <td><code>.form-group.has-*</code></td>
 122         </tr>
 123         <tr>
 124           <td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
 125           <td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
 126         </tr>
 127         <tr>
 128           <td><code>.input-prepend</code> <code>.input-append</code></td>
 129           <td><code>.input-group</code></td>
 130         </tr>
 131         <tr>
 132           <td><code>.add-on</code></td>
 133           <td><code>.input-group-addon</code></td>
 134         </tr>
 135         <tr>
 136           <td><code>.img-polaroid</code></td>
 137           <td><code>.img-thumbnail</code></td>
 138         </tr>
 139         <tr>
 140           <td><code>ul.unstyled</code></td>
 141           <td><code>.list-unstyled</code></td>
 142         </tr>
 143         <tr>
 144           <td><code>ul.inline</code></td>
 145           <td><code>.list-inline</code></td>
 146         </tr>
 147         <tr>
 148           <td><code>.muted</code></td>
 149           <td><code>.text-muted</code></td>
 150         </tr>
 151         <tr>
 152           <td><code>.label</code></td>
 153           <td><code>.label .label-default</code></td>
 154         </tr>
 155         <tr>
 156           <td><code>.label-important</code></td>
 157           <td><code>.label-danger</code></td>
 158         </tr>
 159         <tr>
 160           <td><code>.text-error</code></td>
 161           <td><code>.text-danger</code></td>
 162         </tr>
 163         <tr>
 164           <td><code>.table .error</code></td>
 165           <td><code>.table .danger</code></td>
 166         </tr>
 167         <tr>
 168           <td><code>.bar</code></td>
 169           <td><code>.progress-bar</code></td>
 170         </tr>
 171         <tr>
 172           <td><code>.bar-*</code></td>
 173           <td><code>.progress-bar-*</code></td>
 174         </tr>
 175         <tr>
 176           <td><code>.accordion</code></td>
 177           <td><code>.panel-group</code></td>
 178         </tr>
 179         <tr>
 180           <td><code>.accordion-group</code></td>
 181           <td><code>.panel .panel-default</code></td>
 182         </tr>
 183         <tr>
 184           <td><code>.accordion-heading</code></td>
 185           <td><code>.panel-heading</code></td>
 186         </tr>
 187         <tr>
 188           <td><code>.accordion-body</code></td>
 189           <td><code>.panel-collapse</code></td>
 190         </tr>
 191         <tr>
 192           <td><code>.accordion-inner</code></td>
 193           <td><code>.panel-body</code></td>
 194         </tr>
 195       </tbody>
 196     </table>
 197   </div><!-- /.table-responsive -->
 198
 199   <h2 id="new">What's new</h2>
 200   <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
 201   <div class="table-responsive">
 202     <table class="table table-bordered table-striped">
 203       <thead>
 204         <tr>
 205           <th>Element</th>
 206           <th>Description</th>
 207         </tr>
 208       </thead>
 209       <tbody>
 210         <tr>
 211           <td>Panels</td>
 212           <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
 213         </tr>
 214         <tr>
 215           <td>List groups</td>
 216           <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
 217         </tr>
 218         <tr>
 219           <td>Glyphicons</td>
 220           <td><code>.glyphicon</code></td>
 221         </tr>
 222         <tr>
 223           <td>Jumbotron</td>
 224           <td><code>.jumbotron</code></td>
 225         </tr>
 226         <tr>
 227           <td>Extra small grid (&lt;768px)</td>
 228           <td><code>.col-xs-*</code></td>
 229         </tr>
 230         <tr>
 231           <td>Small grid (&ge;768px)</td>
 232           <td><code>.col-sm-*</code></td>
 233         </tr>
 234         <tr>
 235           <td>Medium grid (&ge;992px)</td>
 236           <td><code>.col-md-*</code></td>
 237         </tr>
 238         <tr>
 239           <td>Large grid (&ge;1200px)</td>
 240           <td><code>.col-lg-*</code></td>
 241         </tr>
 242         <tr>
 243           <td>Responsive utility classes (&ge;1200px)</td>
 244           <td><code>.visible-lg</code> <code>.hidden-lg</code></td>
 245         </tr>
 246         <tr>
 247           <td>Offsets</td>
 248           <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
 249         </tr>
 250         <tr>
 251           <td>Push</td>
 252           <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
 253         </tr>
 254         <tr>
 255           <td>Pull</td>
 256           <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
 257         </tr>
 258         <tr>
 259           <td>Input height sizes</td>
 260           <td><code>.input-sm</code> <code>.input-lg</code></td>
 261         </tr>
 262         <tr>
 263           <td>Input groups</td>
 264           <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
 265         </tr>
 266         <tr>
 267           <td>Form controls</td>
 268           <td><code>.form-control</code> <code>.form-group</code></td>
 269         </tr>
 270         <tr>
 271           <td>Button group sizes</td>
 272           <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
 273         </tr>
 274         <tr>
 275           <td>Navbar text</td>
 276           <td><code>.navbar-text</code></td>
 277         </tr>
 278         <tr>
 279           <td>Navbar header</td>
 280           <td><code>.navbar-header</code></td>
 281         </tr>
 282         <tr>
 283           <td>Justified tabs / pills</td>
 284           <td><code>.nav-justified</code></td>
 285         </tr>
 286         <tr>
 287           <td>Responsive images</td>
 288           <td><code>.img-responsive</code></td>
 289         </tr>
 290         <tr>
 291           <td>Contextual table rows</td>
 292           <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td>
 293         </tr>
 294         <tr>
 295           <td>Contextual panels</td>
 296           <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
 297         </tr>
 298         <tr>
 299           <td>Modal</td>
 300           <td><code>.modal-dialog</code> <code>.modal-content</code></td>
 301         </tr>
 302         <tr>
 303           <td>Thumbnail image</td>
 304           <td><code>.img-thumbnail</code></td>
 305         </tr>
 306         <tr>
 307           <td>Well sizes</td>
 308           <td><code>.well-sm</code> <code>.well-lg</code></td>
 309         </tr>
 310         <tr>
 311           <td>Alert links</td>
 312           <td><code>.alert-link</code></td>
 313         </tr>
 314       </tbody>
 315     </table>
 316   </div><!-- /.table-responsive -->
 317
 318   <h2 id="dropped">What's removed</h2>
 319   <p>The following elements have been dropped or changed in v3.0.</p>
 320   <div class="table-responsive">
 321     <table class="table table-bordered table-striped">
 322       <thead>
 323         <tr>
 324           <th>Element</th>
 325           <th>Removed from 2.x</th>
 326           <th>3.0 Equivalent</th>
 327         </tr>
 328       </thead>
 329       <tbody>
 330         <tr>
 331           <td>Form actions</td>
 332           <td><code>.form-actions</code></td>
 333           <td class="text-muted">N/A</td>
 334         </tr>
 335         <tr>
 336           <td>Search form</td>
 337           <td><code>.form-search</code></td>
 338           <td class="text-muted">N/A</td>
 339         </tr>
 340         <tr>
 341           <td>Form group with info</td>
 342           <td><code>.control-group.info</code></td>
 343           <td class="text-muted">N/A</td>
 344         </tr>
 345         <tr>
 346           <td>Fixed-width input sizes</td>
 347           <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td>
 348           <td>Use <a href="../css/#forms-controls"><code>.form-control</code></a> and <a href="../css/#grid">the grid system</a> instead.</td>
 349         </tr>
 350         <tr>
 351           <td>Block level form input</td>
 352           <td><code>.input-block-level</code></td>
 353           <td>No direct equivalent, but <a href="../css/#forms-controls">forms controls</a> are similar.</td>
 354         </tr>
 355         <tr>
 356           <td>Inverse buttons</td>
 357           <td><code>.btn-inverse</code></td>
 358           <td class="text-muted">N/A</td>
 359         </tr>
 360         <tr>
 361           <td>Fluid row</td>
 362           <td><code>.row-fluid</code></td>
 363           <td><code>.row</code> (no more fixed grid)</td>
 364         </tr>
 365         <tr>
 366           <td>Controls wrapper</td>
 367           <td><code>.controls</code></td>
 368           <td class="text-muted">N/A</td>
 369         </tr>
 370         <tr>
 371           <td>Controls row</td>
 372           <td><code>.controls-row</code></td>
 373           <td><code>.row</code> or <code>.form-group</code></td>
 374         </tr>
 375         <tr>
 376           <td>Navbar inner</td>
 377           <td><code>.navbar-inner</code></td>
 378           <td class="text-muted">N/A</td>
 379         </tr>
 380         <tr>
 381           <td>Navbar vertical dividers</td>
 382           <td><code>.navbar .divider-vertical</code></td>
 383           <td class="text-muted">N/A</td>
 384         </tr>
 385         <tr>
 386           <td>Dropdown submenu</td>
 387           <td><code>.dropdown-submenu</code></td>
 388           <td class="text-muted">N/A</td>
 389         </tr>
 390         <tr>
 391           <td>Tab alignments</td>
 392           <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
 393           <td class="text-muted">N/A</td>
 394         </tr>
 395         <tr>
 396           <td>Pill-based tabbable area</td>
 397           <td><code>.pill-content</code></td>
 398           <td><code>.tab-content</code></td>
 399         </tr>
 400         <tr>
 401           <td>Pill-based tabbable area pane</td>
 402           <td><code>.pill-pane</code></td>
 403           <td><code>.tab-pane</code></td>
 404         </tr>
 405         <tr>
 406           <td>Nav lists</td>
 407           <td><code>.nav-list</code> <code>.nav-header</code></td>
 408           <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
 409         </tr>
 410         <tr>
 411           <td>Inline help for form controls</td>
 412           <td><code>.help-inline</code></td>
 413           <td>No exact equivalent, but <code>.help-block</code> is similar.</td>
 414         </tr>
 415         <tr>
 416           <td>Non-bar-level progress colors</td>
 417           <td><code>.progress-info</code> <code>.progress-success</code> <code>.progress-warning</code> <code>.progress-danger</code></td>
 418           <td>Use <code>.progress-bar-*</code> on the <code>.progress-bar</code> instead.</td>
 419         </tr>
 420       </tbody>
 421     </table>
 422   </div><!-- /.table-responsive -->
 423
 424   <h2 id="notes">Additional notes</h2>
 425   <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
 426   <ul>
 427     <li>By default, text-based form controls now receive only minimal styling.  For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li>
 428     <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
 429     <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
 430     <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
 431     <li><code>.row</code> is now fluid.</li>
 432     <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
 433     <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
 434     <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
 435     <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li>
 436     <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
 437     <li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li>
 438     <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
 439   </ul>
 440   <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
 441 </div>