Instalación de la aplicación Bootstrap 3 on Rails

Estoy intentando instalar Bootstrap 3.0 en mi aplicación Rails. Recientemente terminé el tutorial de Michael Hartl y ahora estoy tratando de construir mi propio sistema usando esta nueva versión de Bootstrap, pero tengo algunas preguntas de las que no estoy seguro.

Mis especificaciones del sistema:

  • OS X Mountain Lion en MBP
  • Rails 4.0
  • Ruby 2.0

Preguntas que tengo:

  1. ¿Cuál es la mejor gema para usar en mi Gemfile? He encontrado algunos de ellos.
  2. ¿Qué importa? en mi custom.css.scss? Leí en alguna parte que es diferente de 2.3.2.
  3. ¿Hay algo más que tenga que hacer para que Bootstrap funcione, o los pasos restantes son idénticos a los que seguí para Bootstrap 2.3.2?

Editar

Esto es lo que el proyecto bootstrap-rails en GitHub primero dice que hacer: 

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

Entonces dice hacer: 

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

¿Hacen lo mismo, o tienes que hacer las dos cosas?

Author: J0e3gan, 2013-08-22
Source

10 answers

En realidad no necesita gem para esto, aquí está el paso para instalar Bootstrap 3 en RoR

  • Descargar Bootstrap

  • Copia:

    bootstrap-dist/css/bootstrap.css y bootstrap-dist/css/bootstrap.min.css

    A: vendor/assets/stylesheets

  • Copia:

    bootstrap-dist/js/bootstrap.js y bootstrap-dist/js/bootstrap.min.js

    A: vendor/assets/javascripts

  • Actualizar: app/assets/stylesheets/application.css añadiendo: 

    *= require bootstrap.min

  • Actualizar: app/assets/javascripts/application.jspor añadiendo:

    //= require bootstrap.min

Con esto puede actualizar bootstrap en cualquier momento que desee, no es necesario esperar gema para ser actualizado. También con este enfoque, assets pipeline utilizará versiones minificadas en producción.

 270
Author: hawk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-04 06:40:09

Como muchos saben, no hay necesidad de una gema.

Pasos a seguir:

  1. Descargar Bootstrap

  2. Copia 

    bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css

    A: app/assets/stylesheets

  3. Copia 

    bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js

    A: app/assets/javascripts

  4. Añadir a: app/assets/stylesheets/application.css

    * = require bootstrap

  5. Añadir para: app/assets/javascripts/application.js

    / / = require bootstrap

Eso es todo. Está listo para agregar una nueva plantilla de arranque genial.

¿Por qué app/ en lugar de vendor/?

Es importante agregar los archivos a app/assets, por lo que en el futuro podrá sobrescribir los estilos de arranque.

Si más tarde desea agregar un archivo custom.css.scss con estilos personalizados. Usted tendrá algo similar a esto en application.css: 

 *= require bootstrap                                                            
 *= require custom

Si al colocar los archivos bootstrap en app/assets, todo funciona como se esperaba. Pero, si los coloca en vendor/assets , los archivos Bootstrap se cargarán en último lugar. Así: 

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

Por lo tanto, algunas de sus personalizaciones no se usarán ya que los estilos de Bootstrap los anularán.

Razón detrás de esto

Rails buscará activos en muchas ubicaciones; para obtener una lista de estas ubicaciones, puede hacer lo siguiente: 

$ rails console
> Rails.application.config.assets.paths

En la salida verás que app/assets tiene prioridad, por lo tanto lo carga primero.

 62
Author: givanse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-11 01:22:54

Esta respuesta es para aquellos que buscan instalar Bootstrap 3 en su aplicación Rails sin usar una gema. Hay dos maneras simples de hacer esto que toman menos de 10 minutos. Elija el que mejor se adapte a sus necesidades. Glyphicons y Javascript funcionan y los he probado con la última beta de Rails 4.1.0 también.

  1. Usando Bootstrap 3 con Rails 4 - Los archivos Bootstrap 3 se copian en el directorio de proveedores de su aplicación.

  2. Añadir Bootstrap desde un CDN a su aplicación Rails - Los archivos Bootstrap 3 se sirven desde el Bootstrap CDN.

El número 2 anterior es el más flexible. Todo lo que necesita hacer es cambiar el número de versión que se almacena en un ayudante de diseño. Así que puedes ejecutar la versión Bootstrap de tu elección, ya sea 3.0.0, 3.0.3 o incluso versiones anteriores de Bootstrap 2.

 35
Author: rvg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-08 19:28:41

Twitter ahora tiene una versión de bootstrap preparada para sass con gema incluida, por lo que es más fácil que nunca agregarla a Rails.

Simplemente agregue a su gemfile lo siguiente: 

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install y reinicie su servidor para que los archivos estén disponibles a través de la canalización.

También hay soporte para compass y sass-only: https://github.com/twbs/bootstrap-sass

 22
Author: Eneko Alonso,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-19 16:09:56

Utilizo https://github.com/yabawock/bootstrap-sass-rails

Que es bastante sencillo de instalar, actualizaciones de gemas rápidas y seguimientos y correcciones rápidas en caso de que sea necesario.

 11
Author: Nick Ginanto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-22 04:29:45

gem bootstrap-sass

Bootstrap-sass es fácil de colocar en Rails con la canalización de activos.

En su Gemfile necesita agregar la gema bootstrap-sass, y asegurarse de que la gema sass-rails esté presente - se agrega a nuevas aplicaciones Rails por defecto.

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install y reinicie su servidor para que los archivos estén disponibles a través de la canalización.

Fuente: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

 5
Author: Bruno,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-16 22:46:29

Para mí, la forma más sencilla de hacer esto es

1) Descargar y descomprimir bootstrap en vendor

2) Agregue la ruta de arranque a su configuración

config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")

3) Requerirlos

En css *= require css/bootstrap

En js //= require js/bootstrap

Hecho!

Este método hace que las fuentes se carguen sin ninguna otra configuración especial y no requiere mover los archivos bootstrap fuera de su directorio autónomo.

 3
Author: vinhboy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-14 16:37:37

El uso de esta rama se espera resolver el problema: 

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
 3
Author: chanakya devraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-23 10:05:37

Creo que la gema más actualizada para la nueva versión de bootstrap es form anjlab.

Pero no se si actualmente funciona bien con otras gemas como simple_form cuando lo haces rails generate simple_form:install --bootstrap, etc. es posible que tenga que editar algunos inicializadores o configuraciones para adaptarse a la nueva versión de bootstrap.

 1
Author: tbraun89,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-22 04:00:01

En realidad tenía una solución fácil en este caso en el que casi me rasco la cabeza sobre cómo hacer que funcione. hahah!

Bueno, primero descargué Bootstrap (la versión compilada de css y js).

Luego pegué todos los archivos css de bootstrap a app/assets/stylesheets/.

Y luego pegué todos los archivos js de bootstrap a app/assets/javascripts/.

Recargé la página y wallah! Acabo de añadir bootstrap en mi RoR!

 0
Author: therealadrain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-23 12:38:45