2014-02-13 18:36:49 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Meta, title, CSS, favicons, etc. -->
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." >
< meta name = "keywords" content = "HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
2014-01-18 23:09:09 +01:00
2014-02-13 18:36:49 +01:00
< title >
2015-08-19 08:18:20 +02:00
2014-02-13 18:36:49 +01:00
Migrating to v3.x · Bootstrap
2015-08-19 08:18:20 +02:00
2014-02-13 18:36:49 +01:00
< / title >
2014-01-18 23:09:09 +01:00
2014-02-13 18:36:49 +01:00
<!-- Bootstrap core CSS -->
2014-10-29 20:17:44 +01:00
2015-06-16 22:13:14 +02:00
< link href = "../dist/css/bootstrap.min.css" rel = "stylesheet" >
2014-10-29 20:17:44 +01:00
2014-01-18 23:09:09 +01:00
2014-06-26 18:46:59 +02:00
2014-02-13 18:36:49 +01:00
<!-- Documentation extras -->
2014-10-29 20:17:44 +01:00
2015-06-16 22:13:14 +02:00
< link href = "../assets/css/docs.min.css" rel = "stylesheet" >
2014-10-29 20:17:44 +01:00
2014-02-13 18:36:49 +01:00
<!-- [if lt IE 9]><script src="../assets/js/ie8 - responsive - file - warning.js"></script><![endif] -->
2014-06-26 18:46:59 +02:00
< script src = "../assets/js/ie-emulation-modes-warning.js" > < / script >
2014-02-13 18:36:49 +01:00
2014-10-29 20:17:44 +01:00
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
2014-02-13 18:36:49 +01:00
<!-- [if lt IE 9]>
2014-06-26 18:46:59 +02:00
< script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >
< script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script >
2014-02-13 18:36:49 +01:00
<![endif]-->
<!-- Favicons -->
2014-10-29 20:17:44 +01:00
< link rel = "apple-touch-icon" href = "/apple-touch-icon.png" >
2014-06-26 18:46:59 +02:00
< link rel = "icon" href = "/favicon.ico" >
2014-02-13 18:36:49 +01:00
< script >
2014-06-26 18:46:59 +02:00
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
2014-02-13 18:36:49 +01:00
< / script >
< / head >
< body >
2015-01-19 18:10:41 +01:00
< a id = "skippy" class = "sr-only sr-only-focusable" href = "#content" > < div class = "container" > < span class = "skiplink-text" > Skip to main content< / span > < / div > < / a >
2014-02-13 18:36:49 +01:00
2015-08-19 08:18:20 +02:00
< a href = "http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class = "v4-tease" > Aww yeah, Bootstrap 4 is coming!< / a >
2014-02-13 18:36:49 +01:00
<!-- Docs master nav -->
< header class = "navbar navbar-static-top bs-docs-nav" id = "top" role = "banner" >
< div class = "container" >
< div class = "navbar-header" >
2015-06-16 18:50:35 +02:00
< button class = "navbar-toggle collapsed" type = "button" data-toggle = "collapse" data-target = "#bs-navbar" aria-controls = "bs-navbar" aria-expanded = "false" >
2014-02-13 18:36:49 +01:00
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a href = "../" class = "navbar-brand" > Bootstrap< / a >
< / div >
2015-06-16 18:50:35 +02:00
< nav id = "bs-navbar" class = "collapse navbar-collapse" >
2014-02-13 18:36:49 +01:00
< ul class = "nav navbar-nav" >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../getting-started/" > Getting started< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../css/" > CSS< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../components/" > Components< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../javascript/" > JavaScript< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../customize/" > Customize< / a >
2014-02-13 18:36:49 +01:00
< / li >
< / ul >
< ul class = "nav navbar-nav navbar-right" >
2015-08-19 08:18:20 +02:00
< li > < a href = "http://themes.getbootstrap.com" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Themes');" > Themes< / a > < / li >
2014-06-26 18:46:59 +02:00
< li > < a href = "http://expo.getbootstrap.com" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Expo');" > Expo< / a > < / li >
< li > < a href = "http://blog.getbootstrap.com" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Blog');" > Blog< / a > < / li >
2014-02-13 18:36:49 +01:00
< / ul >
< / nav >
< / div >
< / header >
<!-- Docs page layout -->
2015-03-16 16:57:29 +01:00
< div class = "bs-docs-header" id = "content" tabindex = "-1" >
2014-02-13 18:36:49 +01:00
< div class = "container" >
< h1 > Migrating to v3.x< / h1 >
< p > 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.< / p >
< div id = "carbonads-container" > < div class = "carbonad" > < div id = "azcarbon" > < / div > < script > var z = document . createElement ( "script" ) ; z . async = true ; z . src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ" ; var s = document . getElementsByTagName ( "script" ) [ 0 ] ; s . parentNode . insertBefore ( z , s ) ; < / script > < / div > < / div >
< / div >
< / div >
< div class = "container bs-docs-container" >
< div class = "row" >
< div class = "col-md-9" role = "main" >
<!-- Migration
2014-01-18 23:09:09 +01:00
================================================== -->
< div class = "bs-docs-section" >
< h1 class = "page-header" > Migrating from 2.x to 3.0< / h1 >
< 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 >
< h2 id = "classes" > Major class changes< / h2 >
< p > This table shows the style changes between v2.x and v3.0.< / p >
< 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 > .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 >
2014-06-26 18:46:59 +02:00
< tr >
< td > < code > .navbar .nav< / code > < / td >
< td > < code > .navbar-nav< / code > < / td >
< / tr >
2014-01-18 23:09:09 +01:00
< tr >
< td > < code > .nav-collapse< / code > < / td >
< td > < code > .navbar-collapse< / code > < / td >
< / tr >
< tr >
< td > < code > .nav-toggle< / code > < / td >
< td > < code > .navbar-toggle< / code > < / td >
< / tr >
< tr >
< td > < code > .btn-navbar< / code > < / td >
< td > < code > .navbar-btn< / 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 >
2015-06-16 18:50:35 +02:00
< tr >
< td > < code > .alert< / code > < / td >
< td > < code > .alert .alert-warning< / code > < / td >
< / tr >
2014-01-18 23:09:09 +01:00
< tr >
< td > < code > .alert-error< / code > < / td >
< td > < code > .alert-danger< / code > < / td >
< / tr >
< tr >
< td > < code > .visible-phone< / code > < / td >
< td > < code > .visible-xs< / code > < / td >
< / tr >
< tr >
< td > < code > .visible-tablet< / code > < / td >
< td > < code > .visible-sm< / code > < / td >
< / tr >
< tr >
< td > < code > .visible-desktop< / code > < / td >
< td > Split into < code > .visible-md .visible-lg< / code > < / td >
< / tr >
< tr >
< td > < code > .hidden-phone< / code > < / td >
< td > < code > .hidden-xs< / code > < / td >
< / tr >
< tr >
< td > < code > .hidden-tablet< / code > < / td >
< td > < code > .hidden-sm< / code > < / td >
< / tr >
< tr >
< td > < code > .hidden-desktop< / code > < / td >
< td > Split into < code > .hidden-md .hidden-lg< / code > < / td >
< / tr >
< tr >
< td > < code > .input-block-level< / code > < / td >
< td > < code > .form-control< / code > < / td >
< / tr >
< tr >
< td > < code > .control-group< / code > < / td >
< td > < code > .form-group< / code > < / td >
< / tr >
< tr >
< td > < code > .control-group.warning .control-group.error .control-group.success< / code > < / td >
< td > < code > .form-group.has-*< / code > < / td >
< / tr >
< tr >
< td > < code > .checkbox.inline< / code > < code > .radio.inline< / code > < / td >
< td > < code > .checkbox-inline< / code > < code > .radio-inline< / code > < / td >
< / tr >
< tr >
< td > < code > .input-prepend< / code > < 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 > .img-polaroid< / code > < / td >
< td > < code > .img-thumbnail< / code > < / td >
< / tr >
< tr >
< td > < code > ul.unstyled< / code > < / td >
< td > < code > .list-unstyled< / code > < / td >
< / tr >
< tr >
< td > < code > ul.inline< / code > < / td >
< td > < code > .list-inline< / code > < / td >
< / tr >
< tr >
< td > < code > .muted< / code > < / td >
< td > < code > .text-muted< / code > < / td >
< / tr >
< tr >
< td > < code > .label< / code > < / td >
< td > < code > .label .label-default< / code > < / td >
< / tr >
< tr >
< td > < code > .label-important< / code > < / td >
< td > < code > .label-danger< / code > < / td >
< / tr >
< tr >
< td > < code > .text-error< / code > < / td >
< td > < code > .text-danger< / code > < / td >
< / tr >
< tr >
< td > < code > .table .error< / code > < / td >
< td > < code > .table .danger< / code > < / td >
< / tr >
< tr >
< td > < code > .bar< / code > < / td >
< td > < code > .progress-bar< / code > < / td >
< / tr >
< tr >
< td > < code > .bar-*< / code > < / td >
< td > < code > .progress-bar-*< / code > < / td >
< / tr >
< tr >
< td > < code > .accordion< / code > < / td >
< td > < code > .panel-group< / code > < / td >
< / tr >
< tr >
< td > < code > .accordion-group< / code > < / td >
< td > < code > .panel .panel-default< / code > < / td >
< / tr >
< tr >
< td > < code > .accordion-heading< / code > < / td >
< td > < code > .panel-heading< / code > < / td >
< / tr >
< tr >
< td > < code > .accordion-body< / code > < / td >
< td > < code > .panel-collapse< / code > < / td >
< / tr >
< tr >
< td > < code > .accordion-inner< / code > < / td >
< td > < code > .panel-body< / code > < / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /.table - responsive -->
< h2 id = "new" > What's new< / h2 >
< p > We've added new elements and changed some existing ones. Here are the new or updated styles.< / p >
< 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 .panel-default< / 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 > Extra small grid (< 768px)< / td >
< td > < code > .col-xs-*< / code > < / td >
< / tr >
< tr >
< td > Small grid (≥ 768px)< / td >
< td > < code > .col-sm-*< / code > < / td >
< / tr >
< tr >
< td > Medium grid (≥ 992px)< / td >
< td > < code > .col-md-*< / code > < / td >
< / tr >
< tr >
< td > Large grid (≥ 1200px)< / td >
< td > < code > .col-lg-*< / code > < / td >
< / tr >
< tr >
< td > Responsive utility classes (≥ 1200px)< / td >
< td > < code > .visible-lg< / code > < code > .hidden-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 >
2014-02-03 10:44:50 +01:00
< tr >
< td > Input height sizes< / td >
< td > < code > .input-sm< / code > < code > .input-lg< / code > < / td >
< / tr >
2014-01-18 23:09:09 +01:00
< 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 > 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 >
2014-01-19 01:08:39 +01:00
< td > < code > .success< / code > < code > .danger< / code > < code > .warning< / code > < code > .active< / code > < code > .info< / code > < / td >
2014-01-18 23:09:09 +01:00
< / 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 -->
< h2 id = "dropped" > What's removed< / h2 >
< p > The following elements have been dropped or changed in v3.0.< / p >
< 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 > Form actions< / td >
< td > < code > .form-actions< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Search form< / td >
< td > < code > .form-search< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Form group with info< / td >
< td > < code > .control-group.info< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
2014-02-03 10:44:50 +01:00
< td > Fixed-width input sizes< / td >
< 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 >
< td > Use < a href = "../css/#forms-controls" > < code > .form-control< / code > < / a > and < a href = "../css/#grid" > the grid system< / a > instead.< / td >
< / tr >
< tr >
< td > Block level form input< / td >
2014-01-18 23:09:09 +01:00
< td > < code > .input-block-level< / code > < / td >
< td > No direct equivalent, but < a href = "../css/#forms-controls" > forms controls< / a > are similar.< / td >
< / tr >
2014-02-13 18:36:49 +01:00
< tr >
< td > Inverse buttons< / td >
< td > < code > .btn-inverse< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
2014-01-18 23:09:09 +01:00
< tr >
< td > Fluid row< / td >
< td > < code > .row-fluid< / code > < / td >
< td > < code > .row< / code > (no more fixed grid)< / td >
< / tr >
< tr >
< td > Controls wrapper< / td >
< td > < code > .controls< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Controls row< / td >
< td > < code > .controls-row< / code > < / td >
< td > < code > .row< / code > or < code > .form-group< / code > < / td >
< / tr >
< tr >
< td > Navbar inner< / td >
< td > < code > .navbar-inner< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Navbar vertical dividers< / td >
< td > < code > .navbar .divider-vertical< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Dropdown submenu< / td >
< td > < code > .dropdown-submenu< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Tab alignments< / td >
< td > < code > .tabs-left< / code > < code > .tabs-right< / code > < code > .tabs-below< / code > < / td >
< td class = "text-muted" > N/A< / td >
< / tr >
< tr >
< td > Pill-based tabbable area< / td >
< td > < code > .pill-content< / code > < / td >
< td > < code > .tab-content< / code > < / td >
< / tr >
< tr >
< td > Pill-based tabbable area pane< / td >
< td > < code > .pill-pane< / code > < / td >
< td > < code > .tab-pane< / code > < / td >
< / tr >
< tr >
< td > Nav lists< / td >
< td > < code > .nav-list< / code > < code > .nav-header< / code > < / td >
< 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 >
< / tr >
2014-02-13 18:36:49 +01:00
< tr >
< td > Inline help for form controls< / td >
< td > < code > .help-inline< / code > < / td >
< td > No exact equivalent, but < code > .help-block< / code > is similar.< / td >
< / tr >
2014-06-26 18:46:59 +02:00
< tr >
< td > Non-bar-level progress colors< / td >
< td > < code > .progress-info< / code > < code > .progress-success< / code > < code > .progress-warning< / code > < code > .progress-danger< / code > < / td >
< td > Use < code > .progress-bar-*< / code > on the < code > .progress-bar< / code > instead.< / td >
< / tr >
2014-01-18 23:09:09 +01:00
< / tbody >
< / table >
< / div > <!-- /.table - responsive -->
< h2 id = "notes" > Additional notes< / h2 >
< 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 >
< ul >
< 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 >
< li > Text-based form controls with the < code > .form-control< / code > class applied are now 100% wide by default. Wrap inputs inside < code > < div class="col-*"> < /div> < / code > to control input widths.< / li >
< li > < code > .badge< / code > no longer has contextual (-success,-primary,etc..) classes.< / li >
< li > < code > .btn< / code > must also use < code > .btn-default< / code > to get the "default" button.< / li >
< li > < code > .row< / code > is now fluid.< / li >
< li > Images are no longer responsive by default. Use < code > .img-responsive< / code > for fluid < code > < img> < / code > size.< / li >
< 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 >
< li > Typeahead has been dropped, in favor of using < a href = "http://twitter.github.io/typeahead.js/" > Twitter Typeahead< / a > .< / li >
2014-02-13 18:36:49 +01:00
< 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 >
< 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 >
2014-06-26 18:46:59 +02:00
< 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 >
2014-01-18 23:09:09 +01:00
< 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 >
< / ul >
< p > For more information on upgrading to v3.0, and code snippets from the community, see < a href = "http://bootply.com/" > Bootply< / a > .< / p >
< / div >
2014-02-13 18:36:49 +01:00
< / div >
2015-08-19 08:18:20 +02:00
2014-12-22 21:27:32 +01:00
< div class = "col-md-3" role = "complementary" >
< nav class = "bs-docs-sidebar hidden-print hidden-xs hidden-sm" >
2014-02-13 18:36:49 +01:00
< ul class = "nav bs-docs-sidenav" >
2015-08-19 08:18:20 +02:00
2014-02-13 18:36:49 +01:00
< li >
< a href = "#classes" > Major class changes< / a >
< / li >
< li >
< a href = "#new" > What's new< / a >
< / li >
< li >
< a href = "#dropped" > What's removed< / a >
< / li >
< li >
< a href = "#notes" > Additional notes< / a >
< / li >
2015-08-19 08:18:20 +02:00
2014-02-13 18:36:49 +01:00
< / ul >
< a class = "back-to-top" href = "#top" >
Back to top
< / a >
2015-08-19 08:18:20 +02:00
2014-12-22 21:27:32 +01:00
< / nav >
2014-02-13 18:36:49 +01:00
< / div >
2015-08-19 08:18:20 +02:00
2014-02-13 18:36:49 +01:00
< / div >
< / div >
<!-- Footer
================================================== -->
< footer class = "bs-docs-footer" role = "contentinfo" >
< div class = "container" >
< div class = "bs-docs-social" >
< ul class = "bs-docs-social-buttons" >
< li >
2015-06-16 18:50:35 +02:00
< iframe class = "github-btn" src = "https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width = "100" height = "20" title = "Star on GitHub" > < / iframe >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2015-06-16 18:50:35 +02:00
< iframe class = "github-btn" src = "https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width = "102" height = "20" title = "Fork on GitHub" > < / iframe >
2014-02-13 18:36:49 +01:00
< / li >
< li class = "follow-btn" >
2015-02-06 04:40:29 +01:00
< a href = "https://twitter.com/getbootstrap" class = "twitter-follow-button" data-link-color = "#0069D6" data-show-count = "true" > Follow @getbootstrap< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li class = "tweet-btn" >
2015-02-06 04:40:29 +01:00
< a href = "https://twitter.com/share" class = "twitter-share-button" data-url = "http://getbootstrap.com/" data-count = "horizontal" data-via = "getbootstrap" data-related = "mdo:Creator of Bootstrap" > Tweet< / a >
2014-02-13 18:36:49 +01:00
< / li >
< / ul >
< / div >
2014-10-29 20:17:44 +01:00
< p > Designed and built with all the love in the world by < a href = "https://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "https://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Maintained by the < a href = "https://github.com/orgs/twbs/people" > core team< / a > with the help of < a href = "https://github.com/twbs/bootstrap/graphs/contributors" > our contributors< / a > .< / p >
2015-03-16 16:57:29 +01:00
< p > Code licensed under < a rel = "license" href = "https://github.com/twbs/bootstrap/blob/master/LICENSE" target = "_blank" > MIT< / a > , documentation under < a rel = "license" href = "https://creativecommons.org/licenses/by/3.0/" target = "_blank" > CC BY 3.0< / a > .< / p >
2014-12-22 21:27:32 +01:00
< ul class = "bs-docs-footer-links text-muted" >
2015-06-16 18:50:35 +02:00
< li > Currently v3.3.5< / li >
2014-02-13 18:36:49 +01:00
< li > · < / li >
< li > < a href = "https://github.com/twbs/bootstrap" > GitHub< / a > < / li >
< li > · < / li >
< li > < a href = "../getting-started/#examples" > Examples< / a > < / li >
< li > · < / li >
< li > < a href = "../2.3.2/" > v2.3.2 docs< / a > < / li >
< li > · < / li >
< li > < a href = "../about/" > About< / a > < / li >
< li > · < / li >
< li > < a href = "http://expo.getbootstrap.com" > Expo< / a > < / li >
< li > · < / li >
< li > < a href = "http://blog.getbootstrap.com" > Blog< / a > < / li >
< li > · < / li >
2014-10-29 20:17:44 +01:00
< li > < a href = "https://github.com/twbs/bootstrap/issues" > Issues< / a > < / li >
2014-02-13 18:36:49 +01:00
< li > · < / li >
< li > < a href = "https://github.com/twbs/bootstrap/releases" > Releases< / a > < / li >
< / ul >
< / div >
< / footer >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
2015-06-16 18:50:35 +02:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < / script >
2014-02-13 18:36:49 +01:00
2015-06-16 22:13:14 +02:00
< script src = "../dist/js/bootstrap.min.js" > < / script >
2014-10-29 20:17:44 +01:00
2015-06-16 22:13:14 +02:00
< script src = "../assets/js/docs.min.js" > < / script >
2014-10-29 20:17:44 +01:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
< script src = "../assets/js/ie10-viewport-bug-workaround.js" > < / script >
2014-02-13 18:36:49 +01:00
< script >
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
< / script >
<!-- Analytics
================================================== -->
< script >
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
< / script >
< / body >
< / html >
