Configuracion para incluir bootstrap en un proyecto rails

[Juan José Ramírez Gónzalez]

La idea de usar esta gema es que no necesiten hacer el código de las vistas desde 0, o configurar

a mano como en el caso de ssas (bootstrap-ssas-rails)

generaremos los layouts y adaptaremos las vistas previamente creadas mediante los comandos proporcionados por esta gema

dentro de nuestro archivo Gemfile

gem "therubyracer"
gem "less-rails" 
gem "twitter-bootstrap-rails"

Ahora hay que ejecutar en terminal (ubicads al inicio del proyecto) los siguientes comandos

bundle install

y

rails generate bootstrap:install less

agregamos los archivos de bootstrap (principalmente los estilos) con el siguiente comando:

rails generate bootstrap:install static

ahora efectuamos alguno de los siguientes comandos (depende si quieren el sistema de grid por defecto o fluido respectivamente). Estos comandos sobreescribiran la plantilla (layout) que el proyecto rails genera pr defecto

Si no quieren sobreescribirlo, solo cambien la palabra application por el nombre del nuevo layout.

Los layouts se guardan en la carpeta app/views/layouts

rails g bootstrap:layout application fixed

rails g bootstrap:layout application fluid 

ahora, para cada Módulo de su aplicación en la que quieran implementar/utilizar el layout generado anteriormente, y ajustar los elementos y estilos completamente con bootstrap solo necesitan el siguiente comando

rails g bootstrap:themed NOMBREdelMODULO

donde NOMBREdelMODULO es el nombre del móduo sobre el cual quieren aplicar los estilos automáticamente

En este punto al revisar su aplicación en un servidor  (rails server) podrán corroborar que loes estilos han sido cargados y configurados

NOTA: en caso de no cargarse sus estilos corroboren que los siguientes archivos contengan las siguientes líneas

• En app/assets/stylesheets

/*
 *... aqui hay mas cosas
 *
 *= require bootstrap_and_overrides
 *
 * ... aqui hay mas cosas
 */

• en app/views/layouts/NOMBREdeSUlayout

    

<!-- aqui hay más código, las siguientes líneas pueden no
  aparecer de forma consecutiva pero deben de existir -->

    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>


<!-- aqui hay más código-->

Y con esto tendrán los estilos de bootstrap incluidos en su proyecto.

Para mayor referencia y opciones sobre esta gema: 

https://github.com/seyhunak/twitter-bootstrap-rails

[Juan José Ramírez Gónzalez]

NOTA: si ya tienen formularios o demas vistas generadas por scaffolding, esta gema automáticamente ajusta el estilo del código generado a bootstrap, por lo que no necesitarán redefinir el estilo por completo, tan solo de aquellos elementos que deseen personalizar