运维开发网

ruby-on-rails – 如何使用Twitter中的Bootstrap样式表和Rails中的现有样式表而不会搞乱一切?

运维开发网 https://www.qedev.com 2020-03-19 11:33 出处:网络 作者:运维开发网整理
所以我在我的Rails应用程序中包含了 stylesheet的URL,但它将所有内容都抛入了haywire. 我把它包括在内: <%= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', 'style', 'css3buttons', 'jquery.lightbox-0.5', :m
所以我在我的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引导程序布局.然后,当您准备好后,您可以将旧页面迁移到新的布局模板.

0

精彩评论

暂无评论...
验证码 换一张
取 消