rails twitter-bootstrap-rails

暮雨风吹

浏览: 15909 次
性别:
来自: 重庆

最近访客更多访客>>

guoyx

凉城以北

cc465925590

sunhb1990

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

接着上篇文章，这次我们使用twitter-bootstrap-rails，Bootstrap是一个能够进行网站开发的工具包。它包含了基本的CSS和HTML排版，例如，表单、按钮、表格、网格、导航等等。使用twitter-bootstrap-rails gem非常简单，这里你可以使用两种方式。Less方式提供了更多的定制选项，像改变主题，为你的代码提供更有用的Less mixins，但是这也需要Less gem和Ruby Racer Javascript（在windows上不可用）。

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>&copy; 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>&copy; 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.访问，查看效果

流式布局