diff options
Diffstat (limited to 'getting-started.html')
| -rw-r--r-- | getting-started.html | 590 |
1 files changed, 299 insertions, 291 deletions
diff --git a/getting-started.html b/getting-started.html index 9daf35955..f44a55801 100644 --- a/getting-started.html +++ b/getting-started.html @@ -328,304 +328,312 @@ bootstrap/ <h3 id="migration-classes">Major class changes</h3> <p></p> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Bootstrap 2.x</th> - <th>Bootstrap 3.0</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>.container-fluid</code></td> - <td><code>.container</code></td> - </tr> - <tr> - <td><code>.row-fluid</code></td> - <td><code>.row</code></td> - </tr> - <tr> - <td><code>.span*</code></td> - <td><code>.col-md-*</code></td> - </tr> - <tr> - <td><code>.offset*</code></td> - <td><code>.col-md-offset-*</code></td> - </tr> - <tr> - <td><code>.brand</code></td> - <td><code>.navbar-brand</code></td> - </tr> - <tr> - <td><code>.hero-unit</code></td> - <td><code>.jumbotron</code></td> - </tr> - <tr> - <td><code>.icon-*</code></td> - <td><code>.glyphicon .glyphicon-*</code></td> - </tr> - <tr> - <td><code>.btn</code></td> - <td><code>.btn .btn-default</code></td> - </tr> - <tr> - <td><code>.btn-mini</code></td> - <td><code>.btn-xs</code></td> - </tr> - <tr> - <td><code>.btn-small</code></td> - <td><code>.btn-sm</code></td> - </tr> - <tr> - <td><code>.btn-large</code></td> - <td><code>.btn-lg</code></td> - </tr> - <tr> - <td><code>.visible-phone</code></td> - <td><code>.visible-sm</code></td> - </tr> - <tr> - <td><code>.visible-tablet</code></td> - <td><code>.visible-md</code></td> - </tr> - <tr> - <td><code>.visible-desktop</code></td> - <td><code>.visible-lg</code></td> - </tr> - <tr> - <td><code>.hidden-phone</code></td> - <td><code>.hidden-sm</code></td> - </tr> - <tr> - <td><code>.hidden-tablet</code></td> - <td><code>.hidden-md</code></td> - </tr> - <tr> - <td><code>.hidden-desktop</code></td> - <td><code>.hidden-lg</code></td> - </tr> - <tr> - <td><code>.input-small</code></td> - <td><code>.input-sm</code></td> - </tr> - <tr> - <td><code>.input-large</code></td> - <td><code>.input-lg</code></td> - </tr> - <tr> - <td><code>.input-prepend</code></td> - <td><code>.input-group</code></td> - </tr> - <tr> - <td><code>.input-append</code></td> - <td><code>.input-group</code></td> - </tr> - <tr> - <td><code>.add-on</code></td> - <td><code>.input-group-addon</code></td> - </tr> - <tr> - <td><code>.btn-navbar</code></td> - <td><code>.navbar-btn</code></td> - </tr> - <tr> - <td><code>.thumbnail</code></td> - <td><code>.img-thumbnail</code></td> - </tr> - <tr> - <td><code>ul.inline</code></td> - <td><code>.list-inline</code></td> - </tr> - </tbody> - </table> + <div class="table-responsive"> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th>Bootstrap 2.x</th> + <th>Bootstrap 3.0</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>.container-fluid</code></td> + <td><code>.container</code></td> + </tr> + <tr> + <td><code>.row-fluid</code></td> + <td><code>.row</code></td> + </tr> + <tr> + <td><code>.span*</code></td> + <td><code>.col-md-*</code></td> + </tr> + <tr> + <td><code>.offset*</code></td> + <td><code>.col-md-offset-*</code></td> + </tr> + <tr> + <td><code>.brand</code></td> + <td><code>.navbar-brand</code></td> + </tr> + <tr> + <td><code>.hero-unit</code></td> + <td><code>.jumbotron</code></td> + </tr> + <tr> + <td><code>.icon-*</code></td> + <td><code>.glyphicon .glyphicon-*</code></td> + </tr> + <tr> + <td><code>.btn</code></td> + <td><code>.btn .btn-default</code></td> + </tr> + <tr> + <td><code>.btn-mini</code></td> + <td><code>.btn-xs</code></td> + </tr> + <tr> + <td><code>.btn-small</code></td> + <td><code>.btn-sm</code></td> + </tr> + <tr> + <td><code>.btn-large</code></td> + <td><code>.btn-lg</code></td> + </tr> + <tr> + <td><code>.visible-phone</code></td> + <td><code>.visible-sm</code></td> + </tr> + <tr> + <td><code>.visible-tablet</code></td> + <td><code>.visible-md</code></td> + </tr> + <tr> + <td><code>.visible-desktop</code></td> + <td><code>.visible-lg</code></td> + </tr> + <tr> + <td><code>.hidden-phone</code></td> + <td><code>.hidden-sm</code></td> + </tr> + <tr> + <td><code>.hidden-tablet</code></td> + <td><code>.hidden-md</code></td> + </tr> + <tr> + <td><code>.hidden-desktop</code></td> + <td><code>.hidden-lg</code></td> + </tr> + <tr> + <td><code>.input-small</code></td> + <td><code>.input-sm</code></td> + </tr> + <tr> + <td><code>.input-large</code></td> + <td><code>.input-lg</code></td> + </tr> + <tr> + <td><code>.input-prepend</code></td> + <td><code>.input-group</code></td> + </tr> + <tr> + <td><code>.input-append</code></td> + <td><code>.input-group</code></td> + </tr> + <tr> + <td><code>.add-on</code></td> + <td><code>.input-group-addon</code></td> + </tr> + <tr> + <td><code>.btn-navbar</code></td> + <td><code>.navbar-btn</code></td> + </tr> + <tr> + <td><code>.thumbnail</code></td> + <td><code>.img-thumbnail</code></td> + </tr> + <tr> + <td><code>ul.inline</code></td> + <td><code>.list-inline</code></td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> <h3 id="migration-new">What's new</h3> <p>We've added a few new elements and changed some existing ones. Here's their new or updated classes.</p> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Element</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>Panels</td> - <td><code>.panel</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> - </tr> - <tr> - <td>List groups</td> - <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> - </tr> - <tr> - <td>Glyphicons</td> - <td><code>.glyphicon</code></td> - </tr> - <tr> - <td>Jumbotron</td> - <td><code>.jumbotron</code></td> - </tr> - <tr> - <td>Tiny grid (<768 px)</td> - <td><code>.col-xs-*</code></td> - </tr> - <tr> - <td>Small grid (>768 px)</td> - <td><code>.col-sm-*</code></td> - </tr> - <tr> - <td>Medium grid (>992 px)</td> - <td><code>.col-md-*</code></td> - </tr> - <tr> - <td>Large grid (>1200 px)</td> - <td><code>.col-lg-*</code></td> - </tr> - <tr> - <td>Offsets</td> - <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> - </tr> - <tr> - <td>Push</td> - <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> - </tr> - <tr> - <td>Pull</td> - <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> - </tr> - <tr> - <td>Input groups</td> - <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> - </tr> - <tr> - <td>Form controls</td> - <td><code>.form-control</code> <code>.form-group</code></td> - </tr> - <tr> - <td>Inline controls</td> - <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> - </tr> - <tr> - <td>Button group sizes</td> - <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> - </tr> - <tr> - <td>Navbar text</td> - <td><code>.navbar-text</code></td> - </tr> - <tr> - <td>Navbar header</td> - <td><code>.navbar-header</code></td> - </tr> - <tr> - <td>Justified tabs / pills</td> - <td><code>.nav-justified</code></td> - </tr> - <tr> - <td>Responsive images</td> - <td><code>.img-responsive</code></td> - </tr> - <tr> - <td>Contextual table rows</td> - <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td> - </tr> - <tr> - <td>Contextual panels</td> - <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> - </tr> - <tr> - <td>Modal</td> - <td><code>.modal-dialog</code> <code>.modal-content</code></td> - </tr> - <tr> - <td>Thumbnail image</td> - <td><code>.img-thumbnail</code></td> - </tr> - <tr> - <td>Well sizes</td> - <td><code>.well-sm</code> <code>.well-lg</code></td> - </tr> - <tr> - <td>Alert links</td> - <td><code>.alert-link</code></td> - </tr> - </tbody> - </table> + <div class="table-responsive"> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th>Element</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Panels</td> + <td><code>.panel</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> + </tr> + <tr> + <td>List groups</td> + <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> + </tr> + <tr> + <td>Glyphicons</td> + <td><code>.glyphicon</code></td> + </tr> + <tr> + <td>Jumbotron</td> + <td><code>.jumbotron</code></td> + </tr> + <tr> + <td>Tiny grid (<768 px)</td> + <td><code>.col-xs-*</code></td> + </tr> + <tr> + <td>Small grid (>768 px)</td> + <td><code>.col-sm-*</code></td> + </tr> + <tr> + <td>Medium grid (>992 px)</td> + <td><code>.col-md-*</code></td> + </tr> + <tr> + <td>Large grid (>1200 px)</td> + <td><code>.col-lg-*</code></td> + </tr> + <tr> + <td>Offsets</td> + <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> + </tr> + <tr> + <td>Push</td> + <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> + </tr> + <tr> + <td>Pull</td> + <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> + </tr> + <tr> + <td>Input groups</td> + <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> + </tr> + <tr> + <td>Form controls</td> + <td><code>.form-control</code> <code>.form-group</code></td> + </tr> + <tr> + <td>Inline controls</td> + <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> + </tr> + <tr> + <td>Button group sizes</td> + <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> + </tr> + <tr> + <td>Navbar text</td> + <td><code>.navbar-text</code></td> + </tr> + <tr> + <td>Navbar header</td> + <td><code>.navbar-header</code></td> + </tr> + <tr> + <td>Justified tabs / pills</td> + <td><code>.nav-justified</code></td> + </tr> + <tr> + <td>Responsive images</td> + <td><code>.img-responsive</code></td> + </tr> + <tr> + <td>Contextual table rows</td> + <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td> + </tr> + <tr> + <td>Contextual panels</td> + <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td> + </tr> + <tr> + <td>Modal</td> + <td><code>.modal-dialog</code> <code>.modal-content</code></td> + </tr> + <tr> + <td>Thumbnail image</td> + <td><code>.img-thumbnail</code></td> + </tr> + <tr> + <td>Well sizes</td> + <td><code>.well-sm</code> <code>.well-lg</code></td> + </tr> + <tr> + <td>Alert links</td> + <td><code>.alert-link</code></td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> + <h3 id="migration-dropped">What's removed</h3> <p>The following elements have been dropped or changed in v3.</p> - <table class="table table-bordered table-striped bs-table"> - <thead> - <tr> - <th>Element</th> - <th>Removed from 2.x</th> - <th>3.0 Equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td>Hero Unit</td> - <td><code>.hero-unit</code></td> - <td><code>.jumbotron</code></td> - </tr> - <tr> - <td>Form actions</td> - <td><code>.form-actions</code></td> - <td>-</td> - </tr> - <tr> - <td>Grid</td> - <td><code>.span*</code></td> - <td><code>.col-md-*</code></td> - </tr> - <tr> - <td>Fluid container</td> - <td><code>.container-fluid</code></td> - <td><code>.container</code> (no more fixed grid)</td> - </tr> - <tr> - <td>Fluid row</td> - <td><code>.row-fluid</code></td> - <td><code>.row</code> (no more fixed grid)</td> - </tr> - <tr> - <td>Icons</td> - <td><code>.icon-*</code></td> - <td><code>.glyphicon-*</code></td> - </tr> - <tr> - <td>Navbar button</td> - <td><code>.btn-navbar</code></td> - <td><code>.navbar-btn</code></td> - </tr> - <tr> - <td>Navbar inner</td> - <td><code>.navbar-inner</code></td> - <td>-</td> - </tr> - <tr> - <td>Thumbnails</td> - <td><code>.thumbnails</code></td> - <td><code>.col-*</code> and <code>.thumbnail</code></td> - </tr> - <tr> - <td>Input append / prepend</td> - <td><code>.input-append</code> <code>.input-prepend</code> <code>.add-on</code></td> - <td><code>.input-group</code></td> - </tr> - <tr> - <td>Dropdown submenu</td> - <td><code>.dropdown-submenu</code></td> - <td>-</td> - </tr> - <tr> - <td>Tab alignments</td> - <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> - <td>-</td> - </tr> - </tbody> - </table> + <div class="table-responsive"> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th>Element</th> + <th>Removed from 2.x</th> + <th>3.0 Equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td>Hero Unit</td> + <td><code>.hero-unit</code></td> + <td><code>.jumbotron</code></td> + </tr> + <tr> + <td>Form actions</td> + <td><code>.form-actions</code></td> + <td>-</td> + </tr> + <tr> + <td>Grid</td> + <td><code>.span*</code></td> + <td><code>.col-md-*</code></td> + </tr> + <tr> + <td>Fluid container</td> + <td><code>.container-fluid</code></td> + <td><code>.container</code> (no more fixed grid)</td> + </tr> + <tr> + <td>Fluid row</td> + <td><code>.row-fluid</code></td> + <td><code>.row</code> (no more fixed grid)</td> + </tr> + <tr> + <td>Icons</td> + <td><code>.icon-*</code></td> + <td><code>.glyphicon-*</code></td> + </tr> + <tr> + <td>Navbar button</td> + <td><code>.btn-navbar</code></td> + <td><code>.navbar-btn</code></td> + </tr> + <tr> + <td>Navbar inner</td> + <td><code>.navbar-inner</code></td> + <td>-</td> + </tr> + <tr> + <td>Thumbnails</td> + <td><code>.thumbnails</code></td> + <td><code>.col-*</code> and <code>.thumbnail</code></td> + </tr> + <tr> + <td>Input append / prepend</td> + <td><code>.input-append</code> <code>.input-prepend</code> <code>.add-on</code></td> + <td><code>.input-group</code></td> + </tr> + <tr> + <td>Dropdown submenu</td> + <td><code>.dropdown-submenu</code></td> + <td>-</td> + </tr> + <tr> + <td>Tab alignments</td> + <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td> + <td>-</td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> + <h3 id="migration-notes">Additional notes</h3> <p>We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p> |