# Twitter Bootstrap
O gem **twitter-bootstrap-rails** serve para simplificar o processo de utilizar o [Twitter Bootstrap Framework](http://twitter.github.com/bootstrap/) com o Rails.
Por *default* o Rails utiliza o **SASS** como **pre-processador** de CSS. O Twitter Bootstrap utiliza o **Less** como pré-processador.
O gem **twitter-bootstrap-rails** instala o pré-processador de Less no rails alem de disponibilizar varios comandos para gerar layouts rapidamente.
Para começar, modifique o arquivo ```Gemfile```:
group :assets do
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem 'twitter-bootstrap-rails'
end
O **gem** do **twitter-bootstrap** é usado apenas como um asset, por causa do **Less** que vai compilar o **.css**, e não é necessario no enviorment de produção.
Execute o comando a seguir para instalar o gem do twitter-bootstrap-rails e alguns outros gems como o Less.
```$ bundle install```
Em seguida instale o twitter-bootstrap-rails gem:
```$ rails g bootstrap:install```
Esse comando vai instalar o bootstrap, que vai criar os arquivos de css na pasta de layouts.
Com tudo instalado, é possivel utilizar o comando a seguir para criar layouts rapidamente:
```$ rails g bootstrap:layout application fixed```
Esse comando gera um arquivo de layout com todas as configurações do twitter-bootstrap. É possivel criar um layout **fixed** ou **fluid**.
Também é possivel usar o comando de **scaffold** para gerar o CRUD de um modelo e depois rodar um comando para estiliza-lo com o twitter-bootstrap. Primeiro gere o **scafold**:
```$ rails g scaffold product name price:decimal --skip-stylesheets```
Depois faça a migração:
```$ rake db:migrate```
Em seguida re-crie o layout com o coamndo:
```$ rails g bootstrap:themed products -f```
Para esse comando funcionar é preciso especificar o nome do modelo gerado pelo **scaffold**, neste caso "products" e é preciso passar a opção **-f** para sobre-escrever os arquivos de layout gerados anteriormente.
#### body padding-top
Outro detalhe para resolver depois, caso necessario, é colocar o um **padding** no body para criar um espaço no layout entre a navbar e o conteudo. O gem do twitter-bootstrap-rails cria um arquivo para modificar o css padrão: ```app/assets/stylesheets/bootstrap_and_override.css.less```
@import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; }
@import "twitter/bootstrap/responsive";
#### Flash Messages
Para criar mensagens de sucesso e erro ao editar os formularios, utilize este codigo no View desejado ou no ```layouts/application.html.erb```
<% flash.each do |name, msg| %>
<% end %>
Esse codigo vai loopar entre as **flash messages** e escreve-las de acordo com as classes do twitter bootstrap.
#### Validação com SimpleForm
Primeiro crie a validação no **modelo**:
class Product < ActiveRecord::Base
validates_presence_of :name, :price
end
Adicione o SimpleForm no ```Gemfile```:
gem 'simple_form'
Depois execute o comando para instalar o SimpleForm no projeto:
```$ rails g simple_form:install --bootstrap```
Agora mude o codigo do formulario no arquivo ```_form.html.erb```:
<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
<% end %>
#### Customizando a importação de arquivos
Escolha exatamente quais compontentes do Twitter Bootstrap vão ser incluidos no sistema da seguinte forma:
Para mudar o CSS, retire as seguintes linhas no arquivo ```app/assets/stylesheets/bootstrap_and_override.css.less```