较少的文件不会生成Twitter Bootstrap响应式css

时间:2012-07-20 14:46:58

标签: twitter-bootstrap

我已经从download with docs链接下载了.less文件,我已将其添加到我的项目中。我已经下载了less.js并将其添加到我的项目中。如果我在页面的头部包含以下内容:

<link rel="stylesheet/less" href="@routes.Assets.at("less/bootstrap.less")">
    <script src="@routes.Assets.at("less/less-1.3.0.min.js")"></script>

引导程序似乎有效,减去响应部分(即如果浏览器窗口变得太窄,导航栏将不会崩溃)。我可以通过手动添加bootstrap-responsive.css

来解决这个问题
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/bootstrap-responsive.css")" />

问题是,如果我想修改页面的颜色主题,我需要在bootstrap-responsive.css中编辑颜色值,这很痛苦。看起来有些.less文件用于生成bootstrap-responsive.css(例如responsive-navabar.less),但它们无法正常工作。

关于如何从.less文件中获取bootstrap-responsive.css文件的任何建议?

1 个答案:

答案 0 :(得分:10)

您还需要明确包含此文件:

responsive.less

假设您使用的是Twitter Bootstrap的最新版本(2.0.x)。

正如他们的网站(http://twitter.github.com/bootstrap/scaffolding.html#responsive)所述:

  

Bootstrap不会自动包含这些媒体查询,但理解和添加它们非常简单,只需要很少的设置。 您可以选择包含Bootstrap的响应功能

     
      
  1. 使用已编译的响应版本bootstrap-responsive.css
  2.   
  3. 添加@import“responsive.less”并重新编译Bootstrap
  4.   
  5. 修改并重新编译responsive.less作为单独的文件
  6.         

    为什么不包括它?说实话,并非一切都需要回应。我们最好启用它,而不是鼓励开发人员删除此功能。