如何使用Twitter中的Bootstrap样式表和Rails中的现有样式表而不会搞乱一切？

Question

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?

Answer 1

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.

Answer 2

I think you need to change order of css loading..

in your case to override your app stylesheet with bootstrap

first load your app stylesheet and then bootstrap.css

 <%= stylesheet_link_tag :default %>

and then

 <%= stylesheet_link_tag  ('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', :media => 'all') %> 

Answer 3

You can simply customize the bootstrap from twitter github customization tool Customize Bootstrap

Select only items of your choice and download customized version.

I was also in search of something like this since long , Now I did and helped me alot.

Answer 4

You can use less or sass mixins for this purpose, boostrap provides some nice ones.

For instance :

<!- our new, semanticized HTML -->
<article>
  <section class="main">...</section>
  <aside></aside>
</article>

<!-- its accompanying Less stylesheet -->
article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}

See http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html for some more details, and http://www.sitepoint.com/5-useful-sass-mixins-bootstrap/ and also https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins