我如何使用Bootstrap样式表从Twitter与我现有的样式表在Rails，而不麻烦一切？

问题描述

所以我在我的网址中加入了的网址

我是这样写的：

 
 code><％= stylesheet_link_tag（'http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css'，'style'，'css3buttons'，'jquery.lightbox-0.5' ，：media =>'all'）％> 
  

我想做什么，只是在应用类时html标签。理想情况下，我想做的是甚至重写我的样式表中的样式 - 这是我的整个应用程序的样式表。

这是一个简单的方法，而不必修改每个单元素的样式，我想与之合作。

解决方案

，你会注意到它定义了根html元素的重置和样式。

例如：

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

所以，如果你的style.css已经定义了 h1 或者如果你的布局期望 h1 有不同的边距，你的布局将不会像预期的那样看起来。

Twitter bootstrap通常用于启动项目，而不是可以完全插入现有项目的样式表而没有任何问题。

另一种方法是使用，如果您要仅包括表单和表样式。 （）。

 < link rel =stylesheet / lesstype =text / csshref =lib / tables.less > 
< link rel =stylesheet / lesstype =text / csshref =lib / forms.less> 
< script src =less.jstype =text / javascript>< / script> 
  

你不会想使用 lib / boostrap.less ，因为包括了一切，但你可以包括其他LESS样式表为你工作。警告，只是包括twitter boostrap的一个子集，可能无法正常工作，特别是如果你没有定义CSS重置。如果这不适合您，请改用。注意：

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

So I included the URL to the stylesheet in my Rails app, but it throws everything into haywire.

I included it like this:

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

What I want to do, is to just have the Twitter styles applied when I apply the class to the html tag. Ideally, what I would like to do is have it even override the styles in my 'style' sheet - which is the stylesheet for my entire app.

Is it possible to do this in an easy way, without having to modify the style for every single element I want to work with?

解决方案

Look at http://twitter.github.com/bootstrap/1.4.0/bootstrap.css, you'll notice it defines resets and styles on root html elements.

For example:

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

So, if your style.css already defines a style for h1 or if your layout expects the h1 to have a different margin, your layout is not going to look as expected.

Twitter bootstrap is generally for when you start a project and not something you can completely plug into an existing project's stylesheets without any problems.

An alternative is to use their LESS stylesheets if you want to include, for example, just the forms and table styles. (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>

You're not going to want to use lib/boostrap.less since includes everything, but you can include the other LESS stylesheets that work for you. Be warned, just including a subset of the twitter boostrap, may not work as expected, especially if you don't have css resets defined. If that doesn't work for you, look into using Preboot.less instead. Note: Rails 3.1 supports LESS compilation

If you still want to use the complete twitter bootstrap css in your application, you can create a new rails layout template that uses the twitter bootstrap. Then, build your new pages with the twitter boostrap, specify render :layout => "boostrap" or something similar to have your new pages use the twitter bootstrap layout. Then, when you're ready, you can migrate your old pages to the new layout template.

这篇关于我如何使用Bootstrap样式表从Twitter与我现有的样式表在Rails，而不麻烦一切？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！