rails3 使用bootstrap

一，背景：

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

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

二，使用方法：

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

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

gem 'libv8','~> 3.11.8'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'formtastic'

step2:在你的application.js中添加

//= require twitter/bootstrap

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

rails g scaffold people name:string weight:decimal desc:text  --skip-stylesheets
rake db:create
rake db:migrate

rm public/index.html

修改routes.rb

root :to =>"people#index"

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

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

rails server

step 5:见证神奇：

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

rails g bootstrap:install
rails g bootstrap:themed people -f

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

rails server

的确不一样啦

三，稍微复杂的配置：

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

<!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，添加

bootstrap_and_overrides.css.less

rails3 使用bootstrap step by step

rails3 使用bootstrap

一，背景：

二，使用方法：

三，稍微复杂的配置：

相关推荐