Twitter Bootstrap on Rails  2011.12.07 Hamamatsu.rb #10 @mackato
@mackato I’m a programmer,not a web designer.
Programmer’s web design
Programmer’s web design
Bootstrap, from TwitterBootstrap is a toolkit from Twitter designed to kickstart          development of webapps and sites...
LayoutsFixed             Fluid
Typography
Tables
Forms
Navigation
Alerts
Popovers
Twitter Bootstrap for Rails    https://github.com/seyhunak/twitter-bootstrap-railsGemfilegem twitter-bootstrap-rails % bun...
Twitter Bootstrap for Railsapp/assets/javascripts/application.js//=   require jquery//=   require jquery_ujs//=   require ...
Markup by Hand<div class="topbar">  <div class="topbar-inner">    <div class="container">       <h3><%= link_to "MyApp", "...
Markup by Hand<div class="topbar">  <div class="topbar-inner">    <div class="container">       <h3><%= link_to "MyApp", "...
Fork ithttps://github.com/mackato/twitter-bootstrap-rails
InstallGemfilegem twitter-bootstrap-rails,    :git => git://github.com/mackato/twitter-bootstrap-rails.git % bundle install
Layout generator% rails g bootstrap:layout --helpUsage:  rails generate bootstrap:layout [LAYOUT_NAME] [*fixed or fluid][opt...
form generator% rails g bootstrap:form --helpUsage:  rails generate bootstrap:form MODEL_NAME [DIR_NAME] [options]Runtime ...
Demo
Thanks!ToDo: haml and mongoid support.
Upcoming SlideShare
Loading in …5
×

Twitter bootstrap on rails

14,668 views

Published on

Twitter BootstrapをRailsで便利に使う説明&デモです。

2011.12.07 Hamamatsu.rb #10 @mackato

Published in: Technology

Twitter bootstrap on rails

  1. Twitter Bootstrap on Rails 2011.12.07 Hamamatsu.rb #10 @mackato
  2. @mackato I’m a programmer,not a web designer.
  3. Programmer’s web design
  4. Programmer’s web design
  5. Bootstrap, from TwitterBootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. http://twitter.github.com/bootstrap/
  6. LayoutsFixed Fluid
  7. Typography
  8. Tables
  9. Forms
  10. Navigation
  11. Alerts
  12. Popovers
  13. Twitter Bootstrap for Rails https://github.com/seyhunak/twitter-bootstrap-railsGemfilegem twitter-bootstrap-rails % bundle install % rails generate bootstrap:install
  14. Twitter Bootstrap for Railsapp/assets/javascripts/application.js//= require jquery//= require jquery_ujs//= require twitter/bootstrap//= require_tree .app/assets/stylesheets/application.css *= require_self *= require twitter/bootstrap *= require_tree .
  15. Markup by Hand<div class="topbar"> <div class="topbar-inner"> <div class="container"> <h3><%= link_to "MyApp", "/" %></h3> <ul class="nav"> <li><%= link_to "Link1", "/path1" %></li> <li><%= link_to "Link2", "/path2" %></li> <li><%= link_to "Link3", "/path3" %></li> </ul> </div> </div></div>
  16. Markup by Hand<div class="topbar"> <div class="topbar-inner"> <div class="container"> <h3><%= link_to "MyApp", "/" %></h3> <ul class="nav"> <li><%= link_to "Link1", "/path1" %></li> <li><%= link_to "Link2", "/path2" %></li> <li><%= link_to "Link3", "/path3" %></li> </ul> </div> </div></div> bored!!!
  17. Fork ithttps://github.com/mackato/twitter-bootstrap-rails
  18. InstallGemfilegem twitter-bootstrap-rails, :git => git://github.com/mackato/twitter-bootstrap-rails.git % bundle install
  19. Layout generator% rails g bootstrap:layout --helpUsage: rails generate bootstrap:layout [LAYOUT_NAME] [*fixed or fluid][options]Runtime options: -p, [--pretend] # Run but do not make any changes -s, [--skip] # Skip files that already exist -q, [--quiet] # Supress status output -f, [--force] # Overwrite files that already existThis generator creates layout file with navigation.
  20. form generator% rails g bootstrap:form --helpUsage: rails generate bootstrap:form MODEL_NAME [DIR_NAME] [options]Runtime options: -p, [--pretend] # Run but do not make any changes -s, [--skip] # Skip files that already exist -q, [--quiet] # Supress status output -f, [--force] # Overwrite files that already existThis generator creates form partial file for a model.
  21. Demo
  22. Thanks!ToDo: haml and mongoid support.

×