twitter bootstrap rails 3 tutorial


Beginning here, we show how to create the application from scratch over over rails 3.2.3 and ruby 1.9.3.

1. Open a terminal, navigate to a folder where you have rights to create files, and Type: Or  do git clone twitter-bootstrap-rails-3-demo  app and get real time experience with TWITTER BOOTSTRAP.

$ rails new twitter-bootstrap-rails-3-demo

2. Set Up Source Control

If you’re creating an app for deployment into production, you’ll want to set up a source control repository at this point. Type:

$ git init
Initialized empty Git repository in /home/pravinmishra/workSpace/twitter-bootstrap-rails-3-demo/.git/
$ git add .
$ git commit -m “first commmit”
[master (root-commit) ffeb58c] first commmit
37 files changed, 1201 insertions(+)
create mode 100644 .gitignore
create mode 100644 Gemfile

3. Create a Home Page.

$ rails g scaffold blog title:string body:text –skip-stylesheets

Note that we’ve used the --skip-stylesheets option in the scaffold as we want to use Bootstrap’s CSS instead of the scaffolding’s. We’ve also migrated the database so that the products table is created.

$ rake db:create
$ rake db:migrate
==  CreateBlogs: migrating ====================================================
— create_table(:blogs)
-> 0.0026s
==  CreateBlogs: migrated (0.0028s) ===========================================

And Delete the default home page from your application:

$rm public/index.html

Next, set a route to your home page. Edit the file config/routes.rb and replace:

root :to => 'blogs#index'

Now it's time to run server and take a look to blog..........

Here’s what the generated scaffold page looks like. It isn’t very pretty as we don’t have any styling applied.

 

4. It’s time to add Twitter Bootstrap. Add twitter bootstrap gem in gemfile and do bundle update.

gem “twitter-bootstrap-rails”
$ bundle update
Using sqlite3 (1.3.6)
Using therubyracer (0.10.1)
Using twitter-bootstrap-rails (2.0.7)
Using uglifier (1.2.4)

And we are saw latest version of bootstrap 2.0.7 is install on application.

Now we need to generate some file by using command

$ rails g bootstrap:install
insert  app/assets/javascripts/application.js
create  app/assets/javascripts/bootstrap.js.coffee
create  app/assets/stylesheets/bootstrap_and_overrides.css.less
gsub  app/assets/stylesheets/application.css
gsub  app/assets/stylesheets/application.css

As we saw it create some css and javascript file for us in assets folder.  One key file that was generated is bootstrap_and_overrides.css.less. This file loads up Bootstrap and it’s a good place to customize the styling to suit your application. After we restart the server and reload the page we can see that the styling is already starting to look better, but there’s still a lot to do.

 

 

5. Customize your css.

As we see button having default css we can make it more decent adding bootstrap class properties. Here we adding <%= f.submit :class => “btn btn-primary” %> , class to submit button in page views/blog/_form.html.rb file. Now once more take a look to browser.

Button style has changed as expected. The is a lot more css and javascript features of twitter boostrap. Once take a look and play with it.

That’s it. Enjoy………..!!!!!!!!!!!!!!!!!!!!!

Advertisements

2 thoughts on “twitter bootstrap rails 3 tutorial

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s