Bootstrap is one of the most talked about project of twitter on github . It is a total html5 and css3 compliant solution for your UI . Basically, It is a kind of reverse engineering for a UI developer. Let me put up it in simple words. When a UI designer, design a site, he write css and keep adding on them as need arises . So he first write classes for managing overall layout, then for navigation, button forms etc. Bootstrap do it all for you in a single file bootstrap.css. But, here you need to be aware of the different class of css, you can use in particular condition, say different css for layout or Navigation etc. They are quite simple to figure it out from bootstrap online documentation. Bootstrap also provides a no of plugin written with jquery to work seamlessly, with its css and without much work.
Let me first list the url where you can find different bootstrap resources :
=> List of all opensource projects of twitter hosted on github
=> Download Page
You can download bootstrap from below link. It have download bootstrap and download bootstrap source. You will just need bootstrap css and js file for your application, but I suggest you to download it with the source as it will also contain examples and demo along with the required js and css files. If you downlaod with source the js and css file will be available in /doc/assets/js and /doc/assets/css folder respectively.
The, bootstrap downloaded from here, will contain everything offered by bootstrap, But say you need only tooltip and popover plugin and do not want a huge bootstrap.min.js or bootstrap.js (both file are same, but first one is minified so, it is of smaller size) to be render. In such case you can customize the js and css file before downloading at below link,
Here, you can also see the css variables, which show you the default settings like @bodyBackground, @linkcolor etc. Well, the bodycolour by default set to white. You want to set it to orange. Strange, you can’t customize these variables here. Don’t worry we will do it later on by writing custom css to override bootstrap default css. personally, I never customize bootstrap from above link, but download the original source and later on do customization in code whenever needed.
NOTE : If you have downloaded the bootstrap with source, in docs/assets/js folder you will find js files of individual components, like tooltip, popover etc. The individual css component are present in less folder of downloaded source. So, If you are more concerned about load time of your page, keep adding the required component as need arises, instead of including bootstrap.min.js or bootstrap.min.css file itself. But the component js file or the css files in less folder is not minified, better minified it before including as it will reduce the file size considerably. online tools is available there for minification of js and css files.
=> classes used in creating Layouts
Layout can be classified into two categories : fixed and fluid. The fixed layout is static and measure width, height etc in terms of pixle, while fluid layout measure in terms of percent. Fluid layout adept itself to different screen size. I always prefer fluid layout. Sample code for layout design is available here.
You can see that, You can create a layout with few classes. Those classes are as below
Fixed Layout classes -> container, row, span2 span6 etc, offset2 offset4 etc
Fluid Layout classes -> container-fluid, row-fluid, span2 span6 etc, offset2 offset4 etc
=> classes used in creating different component
Now, your layout is ready and you want to create other components like navbar, footer, sidebar etc. But, what class I should use. Well the sample code of every component and its classes is available at the below link
=> Basic classes, images and icons
Now, you want to beautify the content of your site. You can find detail of classes related to links, text, list, images etc at the below link
NOTE : Bookmark, these links or just http://getbootstrap.com/components , above are just different tabs of this site.
So, now I assume that, You have your bootstrap’s css and js file to design your whole site and You know about different classes you may need to build it or atleast you know the place from where you can figure out the things which fullfill your need. Great…we will now apply these things to our rails project. Lets call it bootstrap_demo.
$ rails new bootstrap_demo
$ cd bootstrap_demo/
$ rails generate controller bootstrap_demos index
$ rails s
load index page in browser at http://localhost:3000/bootstrap_demos . You will get routes not found error. well add the routes as below in /config/routes.rb file
Reload the Page…. Well You get simple page with message BootstrapDemos#index. Fine, Let us now decide on layout of our site. So this is the spec.
-> Navigation at the top and Footer at bottom
-> Body have two column. Left column for side bar navigation and right column for main content
-> Main content layout will varies for each page.
Top two requirement is consistent through out the site. Let us Put this layout in application.html.erb file. This html file will look like this.
Now reload the page http://localhost:3000/bootstrap_demos
<link href=”css/bootstrap.min.css” rel=”stylesheet”> assuming the path is css/bootstrap.min.css relative to the html file
Let us assume that the bootstrap.min.js file is linked properly in head. So refresh the page again….and here you can see all the css reflected with the page looking as below.
So, you can see that, we have our layout structured through application.html.erb file with top navigation bar, two column for content, and three column footer. Here, you should note that, use and nesting of container-fluid, row-fluid, span4 span12 etc and offset class. You can nest them within one other to make as many block as you wish.
container-fluid -> It will define the container or box for you. You can create a single container for whole application or multiple box. I have use three container-fluid, one for top nav, one for body content and one for footer
row-fluid -> It will define no of racks or row in your box, each roe occupy the whole space of the container, within which it is placed.
span4 -> It define, blocks within a row. span4 means, the div with this class will occupy 4 part of the row, a row-fluid consist of 12 part.
span8 -> it means the div with this class will occupy 8/12 of whole width of row-fluid
offset1 -> offset define gap between two blocks, see it use in footer
-> In any row the sum of number used against span and offset should not increase 12
-> The well class, I have used in application.html.erb has nothing to do with layout, it just make a DIV to rise with light background colour. I have used it to make the blocks we have created get visible to you as we do not have any real content there. Use, it if you want your div to rise
So, our layout is ready, Let us add custom content to our index page of bootstrap_demo controller. index.html.erb will look like this
Wao…we have achieved so much without writing single line of css. What about bootstrap jquery plugin. Let us try tool-tip plugin form bootstrap. This will show some tip about the link when user hover over it
NOTE : bootstrap plugin is build over jquery, So You must include jquery.js also when including bootstrap.js.
Now refresh the Page. It will look like this, and when you hover over a link it will show the tip about that link
APPLYING THEMES :
The bootstrap we have downloaded comes with default themes i,e background colour, link colour etc. We can customize them as per our need. But what if, something suits our need without customization or we need to customize on smaller extent. Well bootswatch provides a no of themes for bootstrap. List of all the themes is available here . Download the themes you liked and just replace the bootstrap.css file in your application with the bootstrap.css available in the downloaded theme. say , I downloaded, bootstrap.min.css for amelia and replaced the existing bootstrap.min.css in my app/assets/stylesheet folder with it. Refresh the page….wao now the site looking much colourful.
CUSTOMIZING BOOTSTRAP CSS
for time being refer it at below link to get some idea
http://bootstrapthemes.quora.com/25-Awseome-Twitter-Bootstrap-Themes-For-Better-Bootstrap-Designs # contain free demo templates
http://www.sitepoint.com/beyond-bootstrap-foundation-frameworks-never-heard/ # alternative framework to bootstrap