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

112

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
  • Carriles 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é importo en mi custom.css.scss? Leí en alguna parte que es diferente de 2.3.2.
  3. ¿Hay algo más que deba 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 primero dice el proyecto bootstrap-rails en GitHub :

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 ambas cosas?

ruby-on-rails ruby twitter-bootstrap-3 megashigger
fuente

Respuestas:

272

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

  • Descarga Bootstrap

  • Copiar:

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

    A: vendor/assets/stylesheets

  • Copiar:

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

    A: vendor/assets/javascripts

  • Actualización: app/assets/stylesheets/application.css agregando:

    *= require bootstrap.min

  • Actualización: app/assets/javascripts/application.js agregando:

    //= require bootstrap.min

Con esto, puede actualizar bootstrap en cualquier momento que desee, no es necesario esperar a que Gem se actualice. Además, con este enfoque, la canalización de activos utilizará versiones minificadas en producción.

halcón
fuente
2
Estoy de acuerdo. También descubrí que la inserción directa de archivos genera menos problemas en la precompilación de activos (por ejemplo, para enviar a Heroku).
Amy.js
26
¿Hay alguna ventaja en incluir los archivos minificados vendor/assets/{stylesheets|javascripts}? Los piñones deben minimizar los archivos incluidos en app/assets/{stylesheets|javascripts}.
jrhorn424
16
¿Cómo incluir archivos de imágenes y fuentes?
wwli
5
@wwli - Vea mi respuesta a continuación. Explica cómo agregar los Glyphicons y las fuentes.
RVG
4
¿Por qué está copiando tanto bootstrap como bootstrap.min?
JohnMerlino
62

Como muchos saben, no hace falta una joya.

Pasos a seguir:

  1. Descarga Bootstrap

  2. Copiar 

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

    a: app/assets/stylesheets

  3. Copiar 

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

    a: app/assets/javascripts

  4. Agregar a: app/assets/stylesheets/application.css

    * = requiere bootstrap

  5. Agregar a: app/assets/javascripts/application.js

    // = requiere bootstrap

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

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

Es importante agregar los archivos a la aplicación / activos , por lo que en el futuro podrá sobrescribir los estilos de Bootstrap.

Si más tarde desea agregar un custom.css.scssarchivo con estilos personalizados. Tendrá algo similar a esto en application.css:

 *= require bootstrap                                                            
 *= require custom

Si colocó los archivos de arranque en la aplicación / activos , todo funciona como se esperaba. Pero, si los colocó en proveedor / activos , los archivos Bootstrap se cargarán en último lugar. Me gusta esto:

<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 las anularán.

Razón detrás de esto

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

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

En el resultado, verá que la aplicación / activos tiene prioridad, por lo que se carga primero.

givanse
fuente
4
¿No controla el orden de las instrucciones require en el archivo application.css el orden en que se cargan los archivos en lugar del orden de los directorios en la lista de rutas? El orden de las rutas generalmente controla qué versión de un archivo se carga mediante gestos si se encuentra en varios directorios incluidos en la lista de rutas. Si no es así, ¿cómo entra en juego el orden de las declaraciones obligatorias?
Kickingbull
2
Por favor, no copie las versiones minificadas, de lo contrario obtendrá una inclusión doble más adelante (parece que 'require_tree.' ¿Funciona de esa manera?) No pude abrir ningún menú desplegable después de instalar Bootsy Gema solo por esta doble inclusión.
Kourindou Hime
1
El comentario de @Kourindou Hime parece merecer atención. No pude abrir menús desplegables hasta que eliminé los archivos .min.
Paco Abato
35

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

  1. Uso de Bootstrap 3 con Rails 4 : los archivos de Bootstrap 3 se copian en el directorio de proveedores de su aplicación.

  2. Agregar Bootstrap desde un CDN a su aplicación Rails : los archivos Bootstrap 3 se sirven desde 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 está almacenado en un asistente de diseño. Por lo tanto, puede ejecutar la versión de Bootstrap de su elección, ya sea 3.0.0, 3.0.3 o incluso versiones anteriores de Bootstrap 2.

rvg
fuente
Parece que no puedo hacer que esto funcione. Sigue buscando localhost:3000/fonts/glyphicons-halflings-regular.svgcomo ejemplo en la consola de Chrome, y los glifos no aparecen (como un 404).
Steve
1
@Steve: asumí que tiene el problema en desarrollo y que eligió el número 1 arriba. Si eso es correcto, verificaría dos veces que haya copiado el directorio de fuentes Bootstrap y todo su contenido /vendor/assets/en su proyecto. También debe verificar su application.css para asegurarse de que está requiriendo bootstrap.min y que tiene las anulaciones @ font-face. SCSS se usa ampliamente en estos días. Si está usando eso, entonces necesita cambiar 'src: url' a 'src: asset-url' en las anulaciones de @ font-face. También hay un proyecto de muestra al final de la publicación que puede ayudar.
RVG
Tuve un sinfín de problemas con las fuentes: funcionó bien en desarrollo pero no en producción. Terminé poniéndolos en público / fuentes
ChrisJ
22

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

Simplemente agregue a su archivo de gemas 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 solo para brújula y sass: https://github.com/twbs/bootstrap-sass

Eneko Alonso
fuente
Gracias. Un punto clave del archivo Léame de github para principiantes; "Si acaba de generar una nueva aplicación Rails, puede que venga con un archivo .css en su lugar. Si este archivo existe, se servirá en lugar de Sass, así que cámbiele el nombre ..."
Brett
5

gem bootstrap-sass

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

En su Gemfile, debe agregar la gema bootstrap-sass y asegurarse de que la gema sass-rails esté presente; se agrega a las nuevas aplicaciones Rails de forma predeterminada.

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

Bruno
fuente
3

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

1) Descargue y descomprima 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 de arranque fuera de su directorio autónomo.

vinhboy
fuente
3

Es de esperar que el uso de esta rama resuelva el problema:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
chanakya devraj
fuente
1

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

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

tbraun89
fuente
Gracias por la respuesta. Entonces, 'gem anjlab' en mi Gemfile es todo lo que tengo que hacer @ tbraun89?
megashigger
El archivo Léame está en la página de github. La joya actual es gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
tbraun89
En el gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
archivo
¡Gracias! Agregué algo en la pregunta. ¿Podrías aclarar la parte después de 'editar'?
megashigger
El primero carga los archivos directamente desde github, por lo que cuando realice una actualización del paquete tendrá la versión más reciente, el segundo carga la gema de rubygems, que es la versión 3.0.0.1 en este momento. (2 días de edad)
tbraun89
0

De hecho, tuve una solución fácil en esta en la que casi me rasco la cabeza sobre cómo hacer que funcione. jaja!

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

Luego pegué todos los archivos CSS de arranque en el app/assets/stylesheets/ .

Y luego pegué todos los archivos bootstrap js en el app/assets/javascripts/.

Recargué la página y ¡wallah! ¡Acabo de agregar bootstrap en mi RoR!

therealadrain
fuente