为什么不使用bootstrap 2.3.2?

时间:2013-12-26 21:42:07

标签: css ruby-on-rails angularjs twitter-bootstrap

我们有生产Rails&基于Bootstrap 2.3.2的Angular应用程序。它现在是一个内部应用程序,但我们很快就会向外部客户开放。它很稳定,没有外观升级到Bootstrap 3的原因。

要升级到Bootstrap 3需要付出一些努力,而且更有可能的是,当打开应用程序到客户端时,我们将邀请设计人员在Bootstrap基础上工作并扩展它。

由于Bootstrap是“只是”CSS并且支持js,我想知道是否有任何理由不继续使用Bootstrap 2.3.2这个应用程序?

更新 我应该补充一点,该应用程序是办公室中使用的键盘密集型桌面(仅限)应用程序。此时似乎不太可能在移动设备上使用它。

决策

我们最终决定升级到Bootstrap 3以及AngularUI。 Bootstrap 2已经看起来过时了...升级工作很多,因为没有自动升级路径。有一些转换网站,但我们发现它们在复杂页面上效果不佳,每个页面都必须手动重新编码。

3 个答案:

答案 0 :(得分:3)

升级到bootstrap 3需要考虑几点

<强>优点:

  • Bootstrap 3与移动平台更兼容。
  • 它将被维护和调试,因为对bootstrap 2.3.2的支持已经结束。
  • Bootstrap 3可能会添加一些新功能。

<强>缺点:

  • 升级需要很多时间,特别是测试时间 确保一切按照他们的方式运作。
  • Bootstrap是一个前端javascript和css库,因此不进行此迁移 “关键的”。

由于您的更新并且不需要移动平台,如果编码时间合理,我仍然会考虑切换到Bootstrap 3但是如果时间超过2.3.2的好处。

答案 1 :(得分:1)

设备的足迹现在正在快速变化,因此是自举。因为那个原因我会考虑去3。这是我从另一个Stack溢出帖子中偷走的东西,它列出了差异,不确定你会发现在这里有什么吸引力。

Bootstrap 3的目标是移动优先。 1.Dropped IE7和FF3.6支持。 2.Standard和响应式CSS组合成一个文件。 3.Renamed Variables:重命名变量以使用破折号而不是camelCase。例如,它现在是@ ​​body-bg而不是@bodyBackground 4.没有更多@blue,@ range,而是@ brand-primary,@ brand-success和其他人。然后根据每个组件分配这些(例如,@ state-warning-text,@ btn-background-primary等) 5.使用.img-retina()添加视网膜图像mixin 6.添加的新变量如下: - 更改@ component-active-bg并自定义导航丸的活动状态,下拉列表等。

检修网格系统,使其流畅,移动优先。 1.删​​除单独的流体网格系统,容器和布局 2.新的单个网格系统使用.row(百分比不是像素),(填充边距)和框大小:边框,现在。 3.Offsets仍然是100%支持。 4.而不是.span *和.offset *,我们现在分别使用.col- *和.col-offset- 。 5.使用小型设备(智能手机)的.col - 类。并为小型设备(平板电脑)使用.col-sm- *类 6.添加.col-push- *和.col-pull- *修饰符类,以便于列源排序。 7.删除专用的表格网格类。 8.建议在所有.container实例上使用“max-width”而不是“width”来帮助防止组件(如navbars)中的容器出现问题。

按钮: 1.默认的灰色按钮需要两个class-class =“btn btn-default”。 2.Dropped .btn-inverse

形式: 1.删​​除单个.input-group的input-prepend和input-append 2.Dropped .form-search 3.水平形式现在是移动优先的,意味着在&lt; 768px,元素被堆叠。在此之上,元素浮动并且并排出现。 4.现在需要额外的支票箱和收音机 5.而不是.radio.inline,你现在需要一个单独的类,.radio-inline,直接用于

图标 1.转换为Glyphicons v1.7 @ font-face并删除旧的PNG。 2.所有课程都以.glyphicon-而不是.icon -

开头

标签: - 1.Refactor标签与父母的字体大小一起缩放 2.Dropped .label-inverse

英雄单位到Jumbotron 1.Class从.hero-unit变为.jumbotron 2.标题的字体重量较轻 3.在响应式视图中缩放字体大小。

Navs和Navbars 1.删​​除.nav-list选项。替换为新的.list-group组件。 2.Drop支持.navbar-search 3.Overhaul样式的默认导航栏及其子组件: 4.Dropdown菜单插入符号(附加到实际菜单,而不是指示符)已被删除,以便下拉菜单平放在导航栏的边缘。 5.Navbar垂直分隔器已被带入一个微小的位置,这意味着它们不会延伸导航栏的整个高度。 6.导航栏上没有更多的盒子阴影或渐变。 7.导航栏的高度从44px增加到62px(移动设备),50px(台式机)。 8.删除.navbar-inner并将相关样式移动到.navbar 9.Changed .navbar&gt; .nav到.navbar-nav 10.将.btn-navbar更改为.navbar-toggle 11.Changed .brand为.navbar-brand

Dropdowns的: - 1.在下拉菜单中删除子菜单支持。 2.删除.nav-header并替换为.dropdown-header

情态动词: - 1.不再需要使用.hide 2.重新介绍身体上的.modal-open(所以我们可以在那里修改卷轴) 3.添加几个额外级别的标记(即.modal-dialog和.modal-content),这样我们就可以滚动整个模态而不是溢出模态中的一个部分。 4.Related,.modal现在是包装器,.modal-content是模态本身。这样我们仍然可以使用position:fixed;,但是让模态相对定位,以便滚动移动整个模态,而不是使用它。 5.添加.modal-title以获得更加一致和有用的标题内容定位(以前这只是一个选择性表现明智而且很糟糕)。

传送带: - 1.Redesign!上一个和下一个控件的较轻的样式,以及旋转木马标题。 2.更新轮播控件所需的标记。 .carousel-control类现在需要其中的前一个/下一个字符的另一个元素。这些角色现在是Glyhpicons图标,用于改进浏览器和设备的样式和定位。指标现在是中下调整的。 3.Captions被强化为可选,默认情况下隐藏在移动视图中,然后显示为&gt; 768px视口。

答案 2 :(得分:1)

Bootstrap 3的主要区别在于一流的移动支持。您可以使用Bootstrap 2进行移动支持,但Bootstrap 3的移动支持更好。

你也会被困在旧版本上。