rails3 使用bootstrap step by step

最新推荐文章于 2022-05-03 17:52:02 发布

ruby小酱

最新推荐文章于 2022-05-03 17:52:02 发布

阅读量258

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/raosheng1993/article/details/45421731

版权

bootstrap 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

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

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

step2:在你的application.js中添加

[ruby] view plain copy

//= require twitter/bootstrap

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

[ruby] view plain copy

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

[ruby] view plain copy

rm public/index.html

修改routes.rb

[ruby] view plain copy

root :to =>"people#index"

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

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

[ruby] view plain copy

rails server

step 5:见证神奇：

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

[ruby] view plain copy

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

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

[ruby] view plain copy

rails server

的确不一样啦

三，稍微复杂的配置：

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

bootstrap_and_overrides.css.less

ruby小酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rails3 使用bootstrap step by step

rails3 使用bootstrap一，背景：这个不多说，最好的就是看文档http://twitter.github.com/bootstrap/ 本文例子github链接 testbootstrap git 地址git@github.com:Ryan007/testbootstrap.git二，使用方法：本人用的使rails3.2.12应该是比较新的
复制链接

扫一扫

专栏目录