【问题标题】:Why not use bootstrap 2.3.2? [closed]为什么不使用引导程序 2.3.2? [关闭]
【发布时间】:2014-01-14 12:15:41
【问题描述】:

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

升级到 Bootstrap 3 需要一些努力,而且更有可能的是,在向客户开放应用程序时,我们会聘请设计师从 Bootstrap 基础上工作并对其进行扩展。

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

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

决定

我们最终决定与 AngularUI 一起升级到 Bootstrap 3。 Bootstrap 2 看起来已经过时了……升级工作量很大,因为没有自动升级路径。有一些转换网站,但我们发现它们不适用于复杂的页面,并且每个页面都必须手动重新编码。

【问题讨论】:

  • 如果不担心移动,不需要升级IMO

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


【解决方案1】:

设备的足迹现在变化非常快,引导程序也是如此。出于这个原因,我会考虑去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 视口。

【讨论】:

    【解决方案2】:

    升级到 bootstrap 3 需要考虑几点

    优点:

    • Bootstrap 3 与移动平台的兼容性更高。
    • 它将在对引导程序 2.3.2 的支持结束时进行维护和调试。
    • Bootstrap 3 可能会添加一些新功能。

    缺点:

    • 升级需要大量时间,尤其是测试时间 确保一切正常。
    • Bootstrap 是一个前端 javascript 和 css 库,因此进行此迁移不是 “关键”。

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

    【讨论】:

    • 嗨,Sam D,感谢您的回答。您认为即使存在安全漏洞,2.3.2 也不会得到增强?
    • 嗨@ardochhigh js、css 框架没有严重的安全漏洞,安全性在中间件和后端更受关注。但我很确定 2.3.2 将是最后一个 Bootstrap 2 版本。
    • 2.3.2 是 2 系列的结尾。它也支持ie7。有些人仍然需要它,尽管我已经有一段时间没有为 ie7 支持而烦恼了。全球不到 1%。花了很长时间才把 100 多个页面的网站转换为我。我什至在 sql 中进行了查找和替换,但仍然需要很长时间,因为表单完全不同,并且 prepend 和 append 消失了,完全使用了不同的类。我使用LESS,一旦完成更新就容易得多。所以现在我在 3.1.0 与 repo 同步。
    【解决方案3】:

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

    您也会卡在旧版本上。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-11-29
      • 1970-01-01
      • 2021-10-27
      • 2019-09-02
      相关资源
      最近更新 更多