Cómo Agregar Twitter Booststrap en la aplicacion de Ruby on Rails

Por:, en:

Muy bien, ya estamos construyendo nuestra aplicación. Hasta ahora no ha sido el mejor sitio en el universo. Nunca es demasiado temprano para hacer tu aplicación más agradable a la vista (para que no nos avergoncemos de mostrar nuestro progreso). Lamentablemente escribir tu propio CSS toma mucho tiempo, sin mencionar que el diseño mismo es una elevación pesada. Para abordar ese tema vamos a utilizar Twitter Bootstrap como una forma de acelerar considerablemente el proceso.

Twitter Bootstrap es un conjunto de clases CSS que podemos usar para darle estilo a nuestro sitio Web. Bootstrap es una herramienta muy completa y personalizable, la cual hace que cientos o miles de páginas web la utilicen.

Para añadir Bootstrap a nuestra aplicación utilizaremos la gema de bootstrap-sass.

Paso 1: Añade la gema de Bootstrap

Primero, ve a tu Gemfile y añade la siguiente gema:

Gemfile


    # Use SCSS for stylesheets
    gem 'sass-rails', '~> 4.0.3' ###### ESTO YA DEBERIA ESTAR AHI

    gem 'bootstrap-sass', '~> 3.1.1'

y "bundle" la gema en tu terminal: 

bash


    $ bundle install

Paso 2: Crea el archivo Custom.css

En el siguiente paso, necesitamos importar Bootstrap a nuestro archivo de CSS. Para hacer eso abre /app/assets/stylesheets Y crea un archivo llamado "custom.css.scss" y al inicio del archivo escribe lo siguiente:

/app/assets/stylesheets/custom.css.scss


    @import "bootstrap";

    .field_with_errors { @extend .has-error; }
    .alert-notice { @extend .alert-info; }
    .alert-alert { @extend .alert-danger; }

Las tres últimas líneas están preparando algunas inconsistencias entre cómo Devise funciona y cuáles son los nombres de las clases de bootstrap. Esto asegurará que todas las alertas se muestren correctamente.

Step 3: Modificar Aplicación

En este paso, necesitamos añadir JavaScript bootstrap a nuestra aplicación. Abre /app/assets/javascripts/application.js y agregue esta línea:

/app/assets/javascripts/application.js


    //= require bootstrap

Y aquí es donde la línea debe de estar: 

/app/assets/javascripts/application.js


    // This is a manifest file that'll be compiled into application.js, which will include all the files
    // listed below.
    //
    // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
    // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
    //
    // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
    // compiled file.
    //
    // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
    // about supported directives.
    //
    //= require jquery
    //= require jquery_ujs

    //= require bootstrap

    //= require turbolinks
    //= require_tree .

Si has estado corriendo la aplicación, ahora debes de detenerla y reiniciarla para que los cambios que hemos hecho se lleven a cabo. En la ventana de la terminal donde manejas tu aplicación pulsa “control + C” para detener la aplicación y reiníciala ejecutando:


    $ rails server

Paso 4: Modifica el archivo de "Production"

Antes de guardar los cambios y empujar nuestra aplicación a Heroku, tenemos que cambiar una cosa en nuestro archivo de configuración de producción:

config/environments/production.rb


config.assets.compile = true

 

Step 5: Empuja a Heroku

bash


$ git add .
$ git commit -a -m "added bootstrap"
$ git push
$ git push heroku master

Has terminado. Bootstrap ya está funcionando en tu aplicación. Si has seguido el tutorial correctamente, podrás ir a tu página y ver cómo ha cambiado. Pero esto es sólo el principio, nos zambulliremos más profundo en nuestro HTML cuanto tengamos más contenido con el que trabajar.

Si tu Inicio de sesión serás capaz de marcar esto tutorial Como vas avanzando tu progreso



Comentarios

  • en: amykang escribió:

    Love your tutorials so far. Short and easy to follow.
  • en: Frank escribió:

    Great! Easy to follow along, and it is great to see the changes in the app right away! Thanks for posting these!
  • en: Amanda escribió:

    This is just what I was looking for. Excellent! Thank you for sharing.

Comentar

Tú puedes Inicio de sesión Comentar