Getting Started with Ruby on Rails4 + Twitter Bootstrap3

Getting Started with
Ruby on Rails4 + Bootstrap3
Clwit, Inc.
Yukimitsu Izawa
2013/11/23 Kanazawa.rb #15

「安心・安全・安定・信頼」できるインターネットサービスを

じこしょうかい
•

井澤志充 (いざわゆきみつ)

•

(株)クルウィットの取締役兼北北陸陸⽀支社⻑⾧長
博⼠士(情報科学)

•

•

ネットワークの委託研究・⾃自社サービス開発など


!2

What is Ruby on Rails?
Ruby on Rails, often simply Rails, is an
open source web application framework
which runs on the Ruby programming
language.
• Ruby on Rails emphasizes the use of
well-known software engineering patterns
and principles, such as active record
pattern, convention over configuration
(CoC), don't repeat yourself (DRY), and
model–view–controller (MVC). 
 
- wikipedia.org
•


!3

What is Ruby on Rails?


!4

Ruby on Rails tutorial


!5

What is Twitter bootstrap?
Bootstrap is a free collection of
tools for creating websites and web
applications. It contains HTML and
CSS-based design templates for
typography, forms, buttons, navigation
and other interface components, as
well as optional JavaScript
extensions. 

•

 

- wikipedia.org


!6

What is Twitter bootstrap?


!7

pre requirements
ruby

•

•

rails gem

twitter bootstrap 

•

 

In this document,
!

ruby 2.0.0
• rails 4.0.1
• twitter bootstrap 3.0
•


!8

Getting start
•

create rails project, named “myapp”

% rails new myapp
% cd !$


!9

Edit Gemfile
•

add bootstrap gem to Gemfile.

% vi Gemfile
:
gem 'anjlab-bootstrap-rails', '~> 3.0.2.0', :require => ‘bootstrap-rails'
:


!10

Bundle libraries
•

execute bundle install.

!

% bundle install --path vendor/bundle


!11

Edit application css for BS
•

to use bootstrap, edit app/assets/
stylesheets/application.css

!

% mv app/assets/stylesheets/application.css{,.scss}
% vi app/assets/stylesheets/application.css.scss
(delete all line, and add two lines below.)

!

@import "twitter/bootstrap";
body { padding-top: 70px; }


!12

Edit application.js
•

to use bootstrap, edit app/assets/
javascript/application.js

!

% vi app/assets/javascripts/application.js

!

//=
//=
//=
//=
//=

•

require jquery
require jquery_ujs
require turbolinks
require twitter/bootstrap
require_tree .

← add this line.

Initial setup was completed.

!13

App example
•

at the top directory of rails project,
scaffolding blog post application.

 

!

% rails g scaffold Post title:string description:text
% rake db:migrate
•

You can check your app, access to http://localhost:3000/posts/ . 
Invoke rails server.

!

% rails s


!14


!15

Decorate app (all view)
•

!

Edit app/views/layouts/application.html.erb

% vi app/views/layouts/application.html.erb
→ Continue to the next page.


!16

app/views/layouts/application.html.erb
!

:
<body>
<div id="wrap">

<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menucollapse">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyApp<sup>devel</sup></a>
</div>
<div class="navbar-collapse collapse navbar-menu-collapse">
c
<ul class="nav navbar-nav">
<li><a href="#">link1</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"></a></li>
</ul>
</div>
</div>

<div class="container">
<%= yield %>
</div>
c </div>
</body>
</html>

!17


!18


!19

Decorate app (posts#index)
•

edit post's view.

<table>
↓
<table class="table table-striped">
<td><%= link_to 'Show', post %></td>
↓
<td><%= link_to 'Show', post, class:"btn btn-primary btn-sm" %></td>
<th>Description</th>
↓
<th class="hidden-xs">Description</th>
<td><%= post.description %></td>
↓
<td class="hidden-xs"><%= post.description %></td>


!20


!21

Bootswatch


!22

Cerulean theme


!23

How to use bootswatch(cerulean)
•

Fetch css from official site.

% mkdir vendor/assets/stylesheets/bootswatch
% cd !$
% curl -O http://bootswatch.com/cerulean/bootstrap.css
•

Edit application css.

% vi app/assets/stylesheets/application.css.scss
@import 'twitter/bootstrap';
← remove this line.
@import ‘bootswatch/bootstrap'; ← add this line.


!24


!25


!26

How to use pagination(kaminari) with BS3
•

Edit Gemfile.

!

:
gem ‘kaminari'
:

•

re-bundle.

!

% bundle install --path vendor/bundle


!27

Generate pagination's view

% rails g kaminari:views bootstrap
•

This generator will create BS2 view,
patch below:

app/views/kaminari/_paginator.html.erb
- <div class="pagination">
<ul>
+ <div>
+
<ul class="pagination">


!28

Pagination example
•

!
!
!

Edit post controller.

% vi app/controllers/posts_controller.rb
def index
@posts = Post.all
end
↓
def index
@posts = Post.all
@posts = @posts.page(params[:page]).per(3) # 3 posts/page
end


!29

Pagination example
•

!

Edit post index view.

% vi app/views/posts/index.html.erb

<%= paginate @posts %> ← add this line to bottom of listing.


!30


!31


!32

References
•

Ruby on Rails
•
•

•

Twitter bottstrap
•

•

http://getbootstrap.com/

bootstrap-rails Gem
•

•

http://rubyonrails.org/
http://ruby.railstutorial.org/

https://github.com/anjlab/bootstrap-rails

kaminari
•

https://github.com/amatsuda/kaminari


!33

•

Thank You!
•

If you have any comments,
•

please send to:
•

Mail: izawa@izawa.org / izawa@clwit.co.jp

•

Twitter: @Yukimitsu_̲Izawa


!34

Getting Started with Ruby on Rails4 + Twitter Bootstrap3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Getting Started with Ruby on Rails4 + Twitter Bootstrap3

Similar to Getting Started with Ruby on Rails4 + Twitter Bootstrap3 (20)

More from Yukimitsu Izawa

More from Yukimitsu Izawa (15)

Recently uploaded

Recently uploaded (14)

Getting Started with Ruby on Rails4 + Twitter Bootstrap3