15 April 2014
Major changes
. Dropped IE7 and FF3.6 support.
. Standard and responsive CSS combined into a single file.
. Renamed Variables: Rename variables to use dashes instead of camelCase. For example, it's now @body-bg instead of @bodyBackground
. No more @blue, @orange, instead its @brand-primary, @brand-success, and others. These are then assigned on a per-component basis (e.g., @state-warning-text, @btn-background-primary, etc)
. Add retina image mixin with .img-retina()
. New variables added like:- Change @component-active-bg and customize the active states of nav pills, dropdowns, and more.
. Overhaul grid systems to make it fluid and mobile-first.
.Removed separate fluid grid system, container, and layout
. New single grid system uses .row (percentages not pixels), (padding over margin), and box-sizing: border-box, now. Offsets are still 100% supported.
. Instead of .span and .offset, we're now using .col- and .col-offset-, respectively.
. Use .col- classes for tiny devices (smartphones). And use .col-sm- classes for small devices (tablets)
. Added .col-push- and .col-pull- modifier classes for easy column source ordering.
. Removed dedicated table grid classes.
. Use of "max-width" instead of "width" on all .container instances is recommended to help prevent some issues with containers in components like navbars.
Buttons
. The default gray button requires two classes—class="btn btn-default".
. Dropped .btn-inverse
Forms
. Removed input-prepend and input-append for singular .input-group
. Dropped .form-search
. Horizontal forms are now mobile-first, meaning at less than 768px, elements are stacked. Above that, elements are floated and appear side-by-side.
. Checkboxes and radios now require an extra additional step to setup. Instead of .radio.inline, you now need a single class, .radio-inline, for direct use
Icons
. Convert to Glyphicons v1.7 @font-face and drop the old PNGs.
. All classes start with .glyphicon- instead of .icon-
Labels
. Refactor labels to scale with their parent's font-size
. Dropped the .label-inverse
. Hero Unit changed to Jumbotron, Class changed from .hero-unit to .jumbotron
. Lighter font-weight for headings
. Scale font-size in responsive views.
Navs and Navbars
. Removed .nav-list option. Replaced by the new .list-group component.
. Drop support for .navbar-search
. Overhaul styles of default navbar and its sub-components:
. Dropdown menu carets (those attached to the actual menu, not the indicators) have been removed so that dropdown menus sit flat against the edge of the navbar.
. Navbar vertical dividers have been brought in a smidge, meaning they do not extend the full height of the navbar.
. No more box-shadow or gradients on the navbars.
. Height of navbar has increased from 44px to 62px for mobile devices, and 50px for desktops.
. Removed .navbar-inner and moved relevant styles to .navbar
. Changed .navbar > .nav to .navbar-nav
. Change .btn-navbar to .navbar-toggle
. Changed .brand to .navbar-brand
Dropdowns
. Removed submenus suport in dropdown menus.
. Removed .nav-header and replaced with .dropdown-header
Modals
. No longer require use of .hide
. Reintroduces .modal-open on the body (so we can nuke the scroll there)
. Adds a couple extra levels of markup (namely .modal-dialog and .modal-content) so we can scroll the entire modal rather than overflow a section within the modal.
. Related, .modal is now the wrapper, and .modal-content is the modal itself. This is so we can still use position: fixed;, but make the modal relatively positioned so that scrolling moves the entire modal, not something with it.
. Added a .modal-title for more consistent and useful targeting of the heading content (previously this was just an and selector performance wise that sucked).
Carousel
. Redesigned Lighter styles for the previous and next controls, as well as the carousel captions.
. Updated required markup for carousel controls. The .carousel-control class now requires another element within it for the previous/next characters. Those characters are now Glyhpicons icons for improved styling and positioning across browsers and devices. Indicators are now bottom-middle aligned.
. Captions are reinforced as optional and, by default, are hidden on mobile views, then shown for >768px viewports.