ruby-on-rails – 如何使用Twitter中的Bootstrap样式表和Rails中

发布时间：2020-12-17 03:53:37 所属栏目：百科来源：网络整理

导读：所以我在我的Rails应用程序中包含了 stylesheet的URL,但它将所有内容都抛入了haywire. 我把它包括在内： %= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css','style','css3buttons','jquery.lightbox-0.5',:media = 'al

所以我在我的Rails应用程序中包含了 stylesheet的URL,但它将所有内容都抛入了haywire.

我把它包括在内：

<%= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css','style','css3buttons','jquery.lightbox-0.5',:media => 'all') %>

我想要做的是,当我将类应用于html标签时,应用Twitter样式.理想情况下,我想要做的是让它甚至覆盖我的“样式”表中的样式 – 这是我整个应用程序的样式表.

是否有可能以简单的方式完成此操作,而无需为我想要使用的每个元素修改样式？

解决方法

看看 http://twitter.github.com/bootstrap/1.4.0/bootstrap.css,你会发现它定义了root html元素的重置和样式.

例如：

h1 {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 36px;
}

因此,如果您的style.css已经为h1定义了样式,或者如果您的布局希望h1具有不同的边距,那么您的布局将不会像预期的那样.

Twitter引导程序通常用于启动项目时,而不是可以完全插入现有项目的样式表而没有任何问题.

如果您想要包含例如表单和表格样式,则可以使用their LESS stylesheets. (using Bootstrap with Less).

<link rel="stylesheet/less" type="text/css" href="lib/tables.less">
<link rel="stylesheet/less" type="text/css" href="lib/forms.less">
<script src="less.js" type="text/javascript"></script>

你不会想要使用lib / boostrap.less,因为包含了所有内容,但你可以包含其他适合你的LESS样式表.请注意,仅包含twitter boostrap的子集,可能无法按预期工作,特别是如果您没有定义css重置.如果这对您不起作用,请考虑使用Preboot.less.注意：Rails 3.1 supports LESS compilation

如果您仍想在应用程序中使用完整的twitter bootstrap css,则可以创建一个使用twitter引导程序的新的rails布局模板.然后,使用twitter boostrap构建新页面,指定render：layout => “boostrap”或类似的东西让你的新页面使用twitter引导程序布局.然后,当您准备好后,您可以将旧页面迁移到新的布局模板.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!