twitter-bootstrap - 编写 Twitter 的 Bootstrap 并考虑升级到 v3

Question

如果您想让升级路径尽可能轻松，您将如何使用 bootstrap 2.3.2 编写新应用程序？

例如，我知道 span-和 col-类正在消失，所以我将为每个具有该定义的 mixin 的类创建一个自定义的 less 类，或者在我的模板语言中创建一个宏来输出类名而不是直接使用它。

另外，是否有 bootstrap 3 迁移指南？我找不到一个。

那么，您将采取哪些步骤来简化升级？

Answer 1

Bootstrap 3 尚未正式发布，但您可以从 https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip 下载最新代码。您还可以编译文档以检查差异，请参阅:Compile Twitter bootstrap 3 docs (How to)?。

Bootstrap 3 RC1 现已发布。

Twitter 的 Bootstrap 3 不会向后兼容第 2 版，因此迁移在某种程度上总是很痛苦。

Twitter 的 Bootstrap 3 将有一个流畅的网格(默认情况下)，因此它也有助于构建具有流畅布局的第 2 版模板。
其他重要的变化是:

TB3 将是移动优先

不支持 IE7 和 Firefox 3.x

没有单独的响应式 CSS 文件。

另请阅读: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

我喜欢你为迁移制作 mixin 的想法。 Twitter 的 Bootstrap 3 定义了三个网格:用于手机的小网格 (<480px)、用于平板电脑的小网格 (<768px) 和用于 Destkops 的中大网格 (>768px)。这些网格的行类前缀是“.col-”、“.col-sm-”和“.col-lg-”。中大型网格将堆叠在 768 像素以下的屏幕宽度之下。小于 480 像素的小网格也是如此，小网格永远不会堆叠。除了总是会堆叠元素的旧手机(移动优先设计)。

Twitter 的 Bootstrap 2 在 480px、768px、980px 和 1200px 处定义了断点。布局将始终在 768 像素以下流畅。

因此，“旧” span* 将与 col-* 或 col-lg-* 不同。所以替换模板中的类名会给你更好的结果。但是当查看像 http://examples.getbootstrap.com/jumbotron/index.html 这样的示例时，您会发现 col-lg-* 类代替了以前的 span* 类。在这种情况下，这将使您有可能为 span* 创建一个与 col-lg-* 样式相同的 mixin。

响应功能

当您开始迁移时，您还必须决定是否使用响应式功能。 Bootstrap 3 不再有单独的响应式 CSS 文件。

没有响应功能
不想拥有响应特性的人必须为您的行类使用“.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/

具有响应功能
在大多数情况下，您将使用响应式功能。迁移时，您必须在“.col-sm-”和“.col-lg-”之间进行选择，以替换旧的“span”前缀。上面所说的“col-lg-”很可能会给你和以前一样的行为。 “col-lg-”将堆叠在 768px 以下。在这种情况下，还要考虑网格浮点断点。默认情况下，grid-float-breakpoint 为 768px。

注意 :目前 TB2.3.2。已在主站点上替换为 Bootstrap 3 RC1。所以考虑从一开始就用TB3。有关网格的更多示例，另请参见 http://examples.getbootstrap.com/grid/。

相关问题及更多:

Images not responsive by default in Twitter Bootstrap 3?

Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

Bootstrap 3.0 Modal

还从 https://stackoverflow.com/a/17977432/1596547 阅读这个 @skelly 答案，它提供了两个有用的链接:

http://bootply.com/bootstrap-3-migration-guide

正在开发的 Bootstrap 迁移工具: https://github.com/iatek/bootstrap-migrate