接着上篇文章,这次我们使用twitter-bootstrap-rails,Bootstrap是一个能够进行 网站开发的工具包。它包含了基本的CSS和HTML排版,例如,表单、按钮、表格、网格、导航等等。使用twitter-bootstrap-rails gem非常简单,这里你可以使用两种方式。Less方式提供了更多的定制选项,像改变主题,为你的代码提供更有用的Less mixins,但是这也需要Less gem和Ruby Racer Javascript(在windows上不可用)。
1.安装gem包
gemfile文件中添加
然后运行bootstrap的generator去添加Bootstrap到你的assets中
最后运行generator
布局用法:
3.SASS
如果你正在使用SASS去编译你的application.css(例如你的manifest文件是application.css.sass 或者application.css.scss)你可能得到这些
fixed_layout.html.erb:
1.安装gem包
a.安装Less样式的gem包
为了使用Less样式,你需要less-rails gem和一个CommonJS的JavaScript运行时支持gemfile文件中添加
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
或者你也能这样安装最新的build
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
从命令行运行bundle install
然后运行bootstrap的generator去添加Bootstrap到你的assets中
rails generate bootstrap:install less
如果你不想在你的应用generator生成coffeescript,使用这个命令
rails generate bootstrap:install --no-coffeescript
b.安装CSS样式
如果你不需要使用Less去定制你的样式,那么只需要这个gem就可以了gem "twitter-bootstrap-rails"
然后运行 bundle install
最后运行generator
rails generate bootstrap:install static
2.生成布局和视图
你能使用下面的generator命令快速的开始使用Bootstrap布局用法:
rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]
固定式布局文件application.html.erb生成命令:
rails g bootstrap:layout application fixed
流式布局文件application.html.erb生成命令:
rails g bootstrap:layout application fluid
主题用法:
rails g bootstrap:themed [RESOURCE_NAME]
例如:
rails g scaffold Post title:string description:text
rake db:migrate
rails g bootstrap:themed Posts
生成bootstrap主题时注意资源的复数用法
3.SASS
如果你正在使用SASS去编译你的application.css(例如你的manifest文件是application.css.sass 或者application.css.scss)你可能得到这些
Invalid CSS after "*": expected "{", was "= require twitt..."
(in app/assets/stylesheets/application.css)
(sass)
在这种情况下你必须使用@import 代替 *=在你的manifest 文件中,或者你不使用SASS编译你的manifest文件
4.关于bootstrap就先介绍到这,下面我们就开始使用
a.在gemfile文件中添加
#bootstrap
gem 'twitter-bootstrap-rails'
b.执行命令 ctrl+alt+g -> bootstrap:isntall 参数 static
c.执行rake命令bundle install
d.使用命令生成固定式应用布局文件和流式布局文件application.hrml.erb
rails g bootstrap:layout admin/application fluid
rails g bootstrap:layout common/application fixed
e.修改views/people/index.html.erb文件
<%= link_to 'New Person', new_person_path %>
<br>
部门列表<%= link_to 'Department_list', departments_path %>
<br>
流式布局<%= link_to 'fluid_layout', '/people/fluid_layout' %>
<br>
固定式布局<%= link_to 'fixed_layout', '/people/fixed_layout' %>
f.在people_controller中添加方法
#流式布局
def fluid_layout
end
#固定式布局
def fixed_layout
end
g.生成方法相对应的html.erb文件
h.将刚生产的admin/application.html.erb和common/application.html.erb两个文件中的内容复制到fluid_layout.html.erb和fixed_layout.html.erb中
fluid_layout.html.erb:
<!--
#流式布局的生成 ctrl+alt+g -> bootstrap layout -> arguments: admin/application fluid 生成这个文件
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Liwenjuan" %></title>
<%= csrf_meta_tags %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<!-- For iPhone with high-resolution Retina display: -->
<!-- Size should be 114 x 114 pixels -->
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<!-- For first- and second-generation iPad: -->
<!-- Size should be 72 x 72 pixels -->
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<!-- Size should be 57 x 57 pixels -->
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= javascript_include_tag "application" %>
</head>
<body>
<div class="navbar navbar-fluid-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Liwenjuan</a>
<div class="container-fluid nav-collapse">
<ul class="nav">
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<%= bootstrap_flash %>
<%= yield %>
</div>
</div><!--/row-->
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
</body>
</html>
fixed_layout.html.erb:
<!--
#固定布局的生成 ctrl+alt+g -> bootstrap layout -> arguments: common/application fixed 生成这个文件
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Liwenjuan" %></title>
<%= csrf_meta_tags %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<!-- For iPhone with high-resolution Retina display: -->
<!-- Size should be 114 x 114 pixels -->
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<!-- For first- and second-generation iPad: -->
<!-- Size should be 72 x 72 pixels -->
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<!-- Size should be 57 x 57 pixels -->
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= javascript_include_tag "application" %>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Liwenjuan</a>
<div class="container nav-collapse">
<ul class="nav">
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span9">
<%= bootstrap_flash %>
<%= yield %>
</div>
<div class="span3">
<div class="well sidebar-nav">
<h3>Sidebar</h3>
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
</body>
</html>
i.添加路由
get 'people/fluid_layout' => 'people#fluid_layout'
get 'people/fixed_layout' => 'people#fixed_layout'
get 'departments/tree_data/:id' => 'departments#tree_data'
resources :departments
get 'people/:id/move_position/:type' => 'people#move_position'
resources :people
j.访问,查看效果
流式布局
固定式布局
k.相关源码会在后面的文章中给出,更多文档请看 twitter-bootstrap-rails