编写Twitter的Bootstrap时要考虑升级到v3

Question

编写Twitter的Bootstrap时要考虑升级到v3

mko*_*yak 9 upgrade twitter-bootstrap twitter-bootstrap-3

如果你想让升级路径尽可能轻松,你会如何使用bootstrap 2.3.2编写新的应用程序？

例如,我知道span-并且col-类正在消失,所以我会为每个具有该定义的mixin的类创建一个自定义的较少的类,或者使用我的模板语言创建一个宏来输出类名而不是使用它直.

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

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

Answer 1

Bas*_*sen 12

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

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的断点.布局总是低于768px.

因此,"旧" span*与" col-*或" 不一样col-lg-*.因此,替换模板中的类名将为您提供更好的结果.但是在查看像http://examples.getbootstrap.com/jumbotron/index.html这样的示例时,您会发现col-lg-*该类代替了前一类span*.这将使您可以为span*创建一个mixin,其风格与col-lg-*相同.

响应功能

当您开始迁移时,您还必须决定是否使用响应功能.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.grid-float-breakpoint默认为768px.

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

归档时间：	12 年，4 月前
查看次数：	5906 次
最近记录：	12 年，4 月前

编写Twitter的Bootstrap时要考虑升级到v3

响应功能

相关问题及更多: