设备的足迹现在变化非常快,引导程序也是如此。出于这个原因,我会考虑去3。这是我从另一个 Stack 溢出帖子中偷来的东西,其中列出了不同之处,但不确定你会在这里找到什么引人注目的东西。
Bootstrap 3 的目标是移动优先。
1.放弃对IE7和FF3.6的支持。
2.标准和响应式CSS合并到一个文件中。
3.Renamed Variables:重命名变量以使用破折号而不是camelCase。例如,现在是 @body-bg 而不是 @bodyBackground
4.不再有@blue、@orange,而是它的@brand-primary、@brand-success 等。然后基于每个组件分配这些(例如,@state-warning-text、@btn-background-primary 等)
5.使用 .img-retina() 添加视网膜图像混合
6.添加的新变量如下:- 更改@component-active-bg 并自定义导航药丸、下拉菜单等的活动状态。
大修网格系统,使其流畅且移动优先。
1.删除了单独的流体网格系统、容器和布局
2.新的单一网格系统使用.row(百分比而不是像素),(边距上的填充)和box-sizing:border-box,现在。
3.Offsets 仍然 100% 支持。
4.我们现在分别使用 .col-* 和 .col-offset-,而不是 .span* 和 .offset*。
5.为微型设备(智能手机)使用 .col- 类。并为小型设备(平板电脑)使用 .col-sm-* 类
6.添加 .col-push-* 和 .col-pull-* 修饰符类,方便列源排序。
7.删除专用表格网格类。
8. 建议在所有 .container 实例上使用“max-width”而不是“width”,以帮助防止导航栏等组件中的容器出现问题。
按钮:
1.默认灰色按钮需要两个类——class="btn btn-default"。
2.删除.btn-inverse
表格:
1.删除单数.input-group的input-prepend和input-append
2.Dropped .form-search
3.水平形式现在是移动优先的,这意味着在 上使用
图标
1.转换为 Glyphicons v1.7 @font-face 并删除旧的 PNG。
2.所有类都以.glyphicon-开头,而不是.icon-
标签:-
1.重构标签以根据其父级的字体大小进行缩放
2.删除了.label-inverse
英雄单位到 Jumbotron
1.Class由.hero-unit改为.jumbotron
2.更轻的标题字体粗细
3.在响应式视图中缩放字体大小。
导航和导航栏
1.删除 .nav-list 选项。替换为新的 .list-group 组件。
2.放弃对.navbar-search的支持
3.大修默认导航栏及其子组件的样式:
4. 下拉菜单插入符号(那些附加到实际菜单,而不是指示器)已被删除,以便下拉菜单平放在导航栏的边缘。
5.导航栏垂直分隔线被引入了一点点,这意味着它们不会延伸导航栏的整个高度。
6.导航栏上不再有框阴影或渐变。
7.导航栏的高度从移动设备的44px增加到62px,台式机的50px。
8.移除 .navbar-inner 并将相关样式移至 .navbar
9.将 .navbar > .nav 更改为 .navbar-nav
10.将 .btn-navbar 更改为 .navbar-toggle
11.将.brand改为.navbar-brand
下拉菜单:-
1.删除下拉菜单中的子菜单支持。
2.去掉.nav-header,替换成.dropdown-header
模态:-
1.不再需要使用.hide
2.Reintroduces .modal-open 在 body 上(这样我们就可以用 nuke 滚动那里了)
3.添加几个额外级别的标记(即.modal-dialog 和.modal-content),这样我们就可以滚动整个模态而不是溢出模态中的部分。
4.Related,.modal 现在是包装器,.modal-content 是模态本身。这样我们仍然可以使用 position:fixed;,但是使模态相对定位,以便滚动移动整个模态,而不是随它移动。
5.添加了一个 .modal-title 以更一致和有用地定位标题内容(以前这只是一个糟糕的选择器性能)。
轮播:-
1.重新设计!上一个和下一个控件以及轮播标题的较轻样式。
2.更新轮播控件所需的标记。 .carousel-control 类现在需要其中的另一个元素用于上一个/下一个字符。这些字符现在是 Glyhpicons 图标,用于改进跨浏览器和设备的样式和定位。指标现在是中下对齐。
3.Captions 被加强为可选,默认情况下,隐藏在移动视图中,然后显示为 >768px 视口。