on
jquery
Web Design
- Get link
- X
- Other Apps
Bootstrap 4 Migration Guide on how to upgrade from Bootstrap v3.x to v4.x with emphasis on major changes, what's new, and what's been removed. Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components. Direct convertor Bootstrap 3 to Bootstrap 4 - Click Here
Summary:
Browser support:| Dropped IE8, IE9, and iOS 6 support |
|
Global Changes:
| Flexbox is enabled by default. As part of flexbox, included support for vertical and horizontal alignment classes. | |
| Switched from Less to Sass for bootstrap source CSS files. | |
| Font size unit: px | Font size unit: rem, though pixels are still used for media queries and grid behavior as viewports are not affected by type size. |
| Font size: 14px | Font size: 16px |
| Xs tier | Added a new grid tier for smaller devices at 576px and below (new xs tier). We now have xs, sm, md, lg, and xl. Means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4). |
| Separate optional theme | Replaced the separate optional theme with configurable options via SCSS variables (e.g. $enable-gradients: true). |
Icons:
| Dropped the Glyphicons icon font. If you need icons, some options are: The upstream version of Glyphicons, Octicons, Font Awesome |
Typography:
| - | .text-truncate for ellipsis text |
| - | Moved all .text- utilities to the _utilities.scss file. |
| <blockquote> | classe .blockquote and the .blockquote-reverse |
| White text | .text-white |
| <p> | Make a paragraph stand out by adding <p class="lead"></p> Also use class .h1, .h2, .h3, .h4, .h5 with p tag |
| <h1> tag | Now we can use .display-1, .display-2, .display-3, .display-4, .display-5 with headings. |
Notation:
| m | For classes that set margin |
| p | For classes that set padding |
| t | top |
| b | bottom |
| l | left |
| r | right |
| x | Set both *-left and *-right |
| y | Set both *-top and *-bottom |
| blank | Set a margin or padding on all 4 sides of the element |
| 0 | The margin or padding by setting it to 0 |
| 1 | Margin or padding to $spacer-x * .25 or $spacer-y * .25 |
| 2 | Margin or padding to $spacer-x * .5 or $spacer-y * .5 |
| 3 | Margin or padding to $spacer-x or $spacer-y |
| 4 | Margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5 |
| 5 | Margin or padding to $spacer-x * 3 or $spacer-y * 3 |
Images:
| .img-responsive | .img-fluid |
| .img-rounded | .rounded |
| .img-circle | .rounded-circle |
Border:
| .border-0 |
| .border-top-0 |
| .border-right-0 |
| .border-bottom-0 |
| .border-left-0 |
Border Radius:
| .rounded |
| .rounded-top |
| .rounded-right |
| .rounded-bottom |
| .rounded-left |
| .rounded-circle |
| .rounded-0 |
Flex Basic class:
| .d-flex |
| .d-inline-flex |
| .flex-row |
| .flex-row-reverse |
| .flex-column |
| .flex-column-reverse |
| .justify-content-start |
| .justify-content-end |
| .justify-content-center |
| .justify-content-between |
Alignment:
| Top align col | .align-items-start (add class with row) |
| Middle align | .align-items-center |
| Bottom align | .align-items-end |
| Only this content on top | .align-self-start |
| Only this content on middle | .align-self-center |
| Only this content on bottom | .align-self-end |
Text-align:
| .align-baseline |
| .align-top |
| .align-middle |
| .align-bottom |
| .align-text-top |
| .align-text-bottom |
Margin:
| .mr-auto [margin-right:auto] |
| .ml-auto [margin-left:auto] |
| .mb-auto [margin-bottom:auto] |
| .mt-auto [margin-top:auto] |
Display Property :
| .d-block |
| .d-inline |
| .d-inline-block |
| .invisible [content hide] |
Position:
| .fixed-top |
| .fixed-bottom |
| .sticky-top |
Float:
| .float-left | Float left on all viewport sizes |
| .float-right | Float right on all viewport sizes |
| .float-none | Don't float on all viewport sizes |
| .float-sm-left | Float left on viewports sized SM (small) or wider |
| .float-md-left | Float left on viewports sized MD (medium) or wider |
| .float-lg-left | Float left on viewports sized LG (large) or wider |
| .float-XL-left | Float left on viewports sized XL (large) or wider |
Grid system:
| .col-xs | <576px |
| .col-sm | ≥576px |
| .col-md | ≥768px |
| .col-lg | ≥992px |
| .col-xl | ≥1200px |
| .col-md-3.col-md-push-9 | .col-md-3.push-md-9 |
Sizing:
| .w-25 | .h-25 | .mw-100 |
| .w-50 | .h-50 | .mh-100 |
| .w-75 | .h-75 | |
| .w-100 | .h-100 | Max-height:100% |
| e.g. width:25% | height:25% | Max-width:100% |
Utilities:
| Removed .pull-left and .pull-right | .float-{sm,md,lg,xl}-{left,right,none} e.g.. .float-md-left |
| .hidden-xs | .d-none (display-none) (d-{sm,md,lg,xl}-none). |
| .hidden-sm | .d-sm-none |
| .hidden-md | .d-md-none |
| .pull-left | .float-left |
| .pull-right | .float-right |
| - | Added .text-{sm,md,lg,xl}-{left,center,right} e.g. (text-sm-center) |
| .center-block | .mx-auto |
Badges:
| .list-group |
| .list-group-item .justify-content-between |
Breadcrumbs:
| . breadcrumb-item added and now it is required on the descendants of .breadcrumbs. |
Buttons:
| .btn-default | .btn-secondary |
| .btn-xs | removed |
Panels:
| .panel | .card |
| .panel-default | removed |
| .panel-group | removed |
| .panel-heading | .card-header |
| .panel-title | .card-title |
| .panel-body | .card-block |
| .panel-footer | .card-footer |
| .panel-primary | .card-primary, .card-inverse |
| .panel-success | .card-success and .card-inverse |
| .panel-info | .card-info |
| .panel-warning | .card-warning |
| .panel-danger | .card-danger |
Carousel:
| .carousel-control.right | .carousel-control-right |
| .carousel-control.left | .carousel-control-left |
| .next, .prev, .left, and .right | .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right. |
| .item | .carousel-item |
Dropdowns:
| .divider | .dropdown-divider |
| .dropdown-item | |
| <span class="caret"></span>; | automatically |
Forms:
| .control-label | .form-control-label |
| .input-lg | .form-control-lg |
| .input-sm | .form-control-sm |
| .form-group-* | .form-control-* |
| .help-block | .form-text, .text-muted |
| .col-form-label |
List groups:
| .list-group |
| .list-group-item |
| .list-group-item-action .list-group-item .active |
| .list-group-item-success |
| .list-group-item-info |
| .list-group-item-danger |
| .dl-horizontal | Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children. |
e.g. Navs & Navbar:
| .nav navbar > li | .nav-item |
| .nav navbar > li > a | .nav-link, .navs, .nav-items |
| .navbar-right | .ml-auto |
| .navbar-btn | .nav-item |
| .navbar-fixed-top | .fixed-top |
| .nav-stacked | .flex-column |
Navbar:
| .navbar-toggle | .navbar-toggler |
| .navbar-form | .form-inline |
Pagination:
| .pagination > li | .page-item |
| .pagination > li > a | .page-link |
Tooltips:
| The Bootstrap tooltip plugin was originally based on the jQuery.tipsy plugin written by Jason Frame. | In Bootstrap 4, it move to Tether, a third party plugin. If you want to use this new feature include tether.js just before the bootstrap.js. |
Popovers:
| Removed support for auto placement options. |
Tables:
| Nearly all instances of the > selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations. | |
| Responsive tables no longer require a wrapping element | just put the .table-responsive right on the <table>. |
| .table-condensed | .table-sm |
| Added a new .table-inverse option. | |
| table header modifiers | .thead-default and .thead-inverse |
| .active, .success, .warning, .danger and .table-info | .table-active, .table-success, .table-warning, .table-danger and .table-info. |
Responsive utilities:
| The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. | Instead, try toggling the [hidden] attribute, use inline styles like style="display: none;" and style="display: block;", or toggle the .invisible class. |
| .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg, .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block | hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down (1)e.g. .hidden-md-up hides an element on medium, large, and extra-large devices. (2) e.g. .hidden-md-down hides an element on extra-small, small, and medium devices. (3) You can combine one .hidden-*-up class with one .hidden-*-down class to show an element only on a given interval of screen sizes (e.g. .hidden-sm-down.hidden-xl-up shows the element only on medium and large devices). |
Removed the following mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select. Misc notes to prioritize:
- Removed the min--moz-device-pixel-ratio typo hack for retina media queries
- Change buttons’ [disabled] to :disabled as IE9+ supports :disabled. However fieldset[disabled] is still necessary because native disabled fieldsets are still buggy in IE11.
Comments
Post a Comment