rails3 使用bootstrap step by step_综合

rails3 使用bootstrap

这个不多说，最好的就是看文档http://twitter.github.com/bootstrap/

本文例子github链接 testbootstrap

git 地址git@github.com:Ryan007/testbootstrap.git

本人用的使rails3.2.12应该是比较新的版本：

step1:在gemfile里添加twitter的gem包支持,然后bundle install

[ruby] view plain copy

step2:在你的application.js中添加

[ruby] view plain copy

step3:生成你的model，修改相应的rails配置文件

[ruby] view plain copy

[ruby] view plain copy

修改routes.rb

[ruby] view plain copy

step 4:启动你的rails应用,在地址栏中访问：

这时候看到的跟平常的一样

[ruby] view plain copy

step 5:见证神奇：

执行下面命令，生成css代码

[ruby] view plain copy

step 6:启动你的rails应用,在地址栏中访问：

[ruby] view plain copy

的确不一样啦

step1: 修改layout/application.html.erb,加载css

[ruby] view plain copy

<!DOCTYPE html>
<html>
<head>
<title>Testbootstrap</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My Link</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Link", root_url %></li>
<li><%= link_to "Link" %></li>
<li><%= link_to "Link" %></li>
<li><%= link_to "Link" %></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span9"><%= yield %></div>
<div class="span3">
<h2>About Us</h2>
The Baidu Story
Our name was inspired by a poem written more than 800 years ago during the Song Dynasty. The poem compares the search for a retreating beauty amid chaotic glamour with the search for one's dream while confronted by life's many obstacles. "…hundreds and thousands of times, for her I searched in chaos, suddenly, I turned by chance, to where the lights were waning, and there she stood." Baidu, whose literal meaning is “hundreds of times”, represents a persistent search for the ideal.
</div>
</div>
</div>
</body>
</html>

setp2:，让你的样式更好看

修改bootstrap_and_overrides.css.less，添加

[ruby] view plain copy