编写 Twitter 的 Bootstrap 并考虑升级到 v3 [英] Writing Twitter's Bootstrap with upgrading to v3 in mind
问题描述
如果您想让升级过程尽可能轻松，您将如何使用 bootstrap 2.3.2 编写新应用程序?
How would you write a new application using bootstrap 2.3.2 if you wanted to make the upgrade path as painless as possible?
例如，我知道 span- 和 col- 类将消失，因此我将为每个具有 mixin 的类创建一个自定义的 less 类该定义，或者在我的模板语言中创建一个宏来输出类名而不是直接使用它.
For example, i know that span- and col- classes are going away, so i would create a custom less class for each of those classes that has a mixin of that definition, or create a macro in my templating language to output the class name instead of using it directly.
另外，是否有引导程序 3 迁移指南?我找不到一个.
Also, is there a bootstrap 3 migration guide? I couldnt find one.
那么，您将采取哪些步骤来简化升级?
So, what steps would you take to ease the upgrade?
推荐答案
Bootstrap 3 尚未正式发布，但您可以从 https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip.您还可以编译文档以检查差异，请参阅:编译 Twitter 引导程序3 个文档(如何做)?.
Bootstrap 3 is not officially released yet, but you can download the latest code from https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip. You could also compile the docs to check for differences, see: Compile Twitter bootstrap 3 docs (How to)?.
Bootstrap 3 RC1 现已发布.
Twitter 的 Bootstrap 3 不会与版本 2 向后兼容，因此迁移在某些方面总是很痛苦.
Twitter's Bootstrap 3 will not be backwards compatible with version 2 so migration will always be painful in some way.
Twitter 的 Bootstrap 3 将具有流体网格(默认情况下)，因此它也将有助于构建具有流体布局的第 2 版模板.其他重要的变化是:
Twitter's Bootstrap 3 will have a fluid grid (by default) so it will help to build your version 2 templates with a fluid layout too. Other important changes are:
- TB3 将优先移动
- 不支持 IE7 和 Firefox 3.x
- 没有单独的响应式 CSS 文件.
我喜欢你为迁移制作 mixin 的想法.Twitter 的 Bootstrap 3 定义了三个网格:用于手机的小网格(<480px)、用于平板电脑的小网格(<768px)和用于 Destkops 的中大网格(>768px).这些网格的行类前缀是.col-"、.col-sm-"和.col-lg-".中大网格将在 768 像素屏幕宽度以下堆叠.480 像素以下的小网格也是如此，并且小网格永远不会堆叠.除了总是会堆叠元素的旧手机(移动优先设计).
I like your idea of making a mixin for migration. Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are ".col-", ".col-sm-" and ".col-lg-". The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
Twitter 的 Bootstrap 2 在 480px、768px、980px 和 1200px 处定义了断点.布局将始终低于 768 像素.
Twitter’s Bootstrap 2 defines breakpoints at 480px, 768px, 980px and 1200px. The layout will always be fluid below 768px.
因此，旧"span* 将与 col-* 或 col-lg-* 不同.所以替换模板中的类名会给你更好的结果.但是当寻找像 http://examples.getbootstrap.com/jumbotron/index.html 这样的例子时 您会发现 col-lg-* 类代替了之前的 span* 类.在这种情况下，这将使您可以使用与 col-lg-* 相同的样式为 span* 创建 mixin.
For this reason the 'old' span* will not be the same as col-* or col-lg-*. So replacing the class names in your templates will be give you better results. But when looking to an example like http://examples.getbootstrap.com/jumbotron/index.html you will find the the col-lg-* class in place of the former span* class. This will give you a possibility to create a mixin for span* with the same styles as col-lg-* in this case.
当您开始迁移时，您还必须决定是否使用响应式功能.Bootstrap 3 不再有单独的响应式 CSS 文件.
When you start migrate you also have to decide to use the responsive features or not. Bootstrap 3 don't have a separate responsive CSS file any more.
无响应功能谁不想拥有响应功能必须为您的行类使用.col-"前缀.这个网格永远不会堆叠.您还必须将 grid-float-breakpoint 设置为 0.当使用 Less 时，@grid-float-breakpoint 将在 variables.less 中定义.请记住，表单和模态等其他部分也使用@grid-float-breakpoint.另见:http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
No responive features Who don't want to have the responive features has to use the ".col-" prefix for your row classes. This grid will never stack. You also will have to set the grid-float-breakpoint to 0. When using Less the @grid-float-breakpoint will be defined in variables.less. Keep in mind other parts like forms and modals also use the @grid-float-breakpoint. See also: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
具有响应式功能在大多数情况下，您将使用响应式功能.迁移时，您必须在.col-sm-"和.col-lg-"之间进行选择以替换旧的span"前缀.上面提到的col-lg-"很可能会给你和以前一样的行为.col-lg-"将堆叠在 768 像素以下.同样在这种情况下，请考虑 grid-float-breakpoint.grid-float-breakpoint 默认为 768px.
With responive features In most cases you will use the responsive features. When migration you have to choose between the ".col-sm-" and ".col-lg-" to replace your old "span" prefixes. The "col-lg-" as told above will give you most likely the same behavior as before. "col-lg-" will stack below the 768px. Also in this case consider the grid-float-breakpoint. The grid-float-breakpoint is 768px by default.
注意:目前为 TB2.3.2.已在主站点上替换为 Bootstrap 3 RC1.因此，请考虑从一开始就使用 TB3.有关网格的更多示例，另请参阅 http://examples.getbootstrap.com/grid/.
Note: at the moment TB2.3.2. has been replaced with Bootstrap 3 RC1 on the main site. So consider to start with TB3 from start. See also http://examples.getbootstrap.com/grid/ for more examples of the grids.
另请阅读 https://stackoverflow.com/a/17977432/1596547 来自 @skelly 它提供了两个有用的链接:
Also read this https://stackoverflow.com/a/17977432/1596547 answer from @skelly it provide two useful links:
http://bootply.com/bootstrap-3-migration-guide
正在开发的 Bootstrap 迁移工具:https://github.com/iatek/bootstrap-migrate
A Bootstrap migration tool in the works: https://github.com/iatek/bootstrap-migrate
这篇关于编写 Twitter 的 Bootstrap 并考虑升级到 v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
