9

El sitio web https://wrapbootstrap.com/ tiene temas que se hicieron usando Twitter Bootstrap. Cada uno de estos temas incluye diferentes versiones de Twitter Bootstrap junto con otras bibliotecas y versiones (jquery, fontawesome, etc.)Cómo agregar wrapbootstrap (hecho con twitter bootstrap) temas a la aplicación de rieles

¿Cómo agrego estos temas a mi aplicación Rails existente? ¿Cuáles son los pasos?

Tengo especial curiosidad por los conflictos que pueden surgir si ya estoy usando una versión diferente de jquery, twitter bootstrap, fontawesome y otros (como se declara en el Gemfile).

Gracias

Respuesta

6

Puede añadir el css del tema que ha adquirido desde wrapbootstrap a su patrimonio> archivo application.css.scss. Y use las etiquetas html que vienen con el tema en las vistas de la aplicación de rieles para que se aplique el estilo css.

Además, recomendaría usar gem 'sass-rails' para importar el estilo de arranque estándar.

Aquí hay un tutorial para comenzar a agregar bootstrap a una aplicación de rieles. Agregar el tema css y etiquetas html depende de usted.

http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast

2

momento interesante, ya que sólo tenía que hacerlo yo mismo. Todavía soy bastante nuevo en Rails, así que esta podría no ser la mejor solución, pero así es cómo lo conseguí trabajando ...

Nota: cada tema es diferente, por lo que este puede no ser un enfoque único.

1) Mi tema fue creado con Middleman y esperaba funcionar solo o en una instancia de Sinatra.

2) Para obtener el tema en Rails, tuve que agregar la gema brújula, la gema sass, la gema sass-rails y la gema compss-rails para que funcionen correctamente. Supongo que puedes instalarlos (si es necesario para tu tema).

3) Suponiendo que tiene una aplicación de Rails lista para rodar, vaya a su directorio de activos y haga una copia de seguridad de sus archivos .js, .css y todas las fuentes e imágenes. Coloque sus archivos de elementos de tema en el lugar apropiado.

4) Ahora haz lo mismo con tu capa de vista. Puede tener una carpeta de parciales y/o páginas que puede colocar en el directorio de vistas. Deberá poner application.erb.html y cualquier archivo de navegación en la carpeta de diseños debajo del directorio de vistas. Nuevamente, asegúrese de hacer una copia de seguridad de sus archivos originales primero.

5) Si su tema fue diseñado para Sinatra, puede tener un archivo Config.rb. Moví la lógica de este archivo a mi archivo config/environment.rb. Yo era el menos seguro con este paso. Otros desarrolladores de Rails pueden sonar si hay una mejor ubicación.

6) Encienda su servidor. Puede encontrar algunas excepciones, pero esto es de esperar.

7) Eche un vistazo a su archivo anterior de aplicaciones/assets/javascripts/application.js y compárelo con el nuevo archivo. Asegúrese de que el nuevo archivo tenga la biblioteca jquery ujs incluida //= require jquery_ujs. Sin este poco de magia, los verbos HTTP PUT y DELETE no funcionarán correctamente.

8) Ajustes de ruta.Mi tema tenía la biblioteca Font Awesome incluida. Para que funcione, tuve que ajustar las rutas de referencia en la parte superior del archivo font-awesome.scss.

9) Finalmente, deberá depurar el código recién agregado en el archivo environment.rb. El desarrollador de Sinatra estaba haciendo mucha magia de ruta para ajustar la pantalla de navegación. Esto no se transportaba bien a mi entorno. Eliminé muchas de estas llamadas de mis archivos de plantilla de navegación. Una vez completa, ¡mi aplicación recién despellejada comenzó a funcionar! Buena suerte.

3

Lo hice para algunos de los proyectos, estoy de acuerdo con lo que Mike ha respondido anteriormente. Estos son algunos de los problemas que vi.

Comenzamos como un proyecto estándar en Rails todas nuestras vistas dynamic (Ember)/static se basaban en Bootstrap CSS. Cuando las páginas internas principales estaban arriba y la funcionalidad demostrada, nos enfocamos en las páginas de destino. En este momento teníamos las gemas para bootstrap, fontawesome añadidas a nuestro Gemfile.

Una de las cosas es eliminar estas gemas "bootstrap", "fontawesome" de Gemfile. Incluya estos como parte de su volcado wrapbootstrap.

También a medida que progresa con la integración puede darse cuenta de que se repite una gran cantidad de código común, lo mejor para usted es dividir los componentes de la página: encabezados, pies de página, otras cosas como vistas parciales de Rails. Severamente guarda el esfuerzo de edición.

Otra cosa que encontré extremadamente útil para mantener todo en orden mientras todavía estás en la etapa de integración, es dividir tu CSS/JS incluye para las páginas importadas de wrap bootstrap y las páginas que ya tienes. Por lo tanto, si tiene la intención de migrar todas las páginas existentes a un tema nuevo, raspando su CSS, puede fusionarse por etapas; de lo contrario, puede permitir que coexistan.

Tiene que agregar nuevas entradas en routes.rb, las llamadas del controlador para admitir las páginas si usted no las tiene. Le gusta de about, contactus, team etc. etc.

Y si usa algo como Ember/Backbone, entonces tiene que gestionar la coexistencia de la aplicación de pager solo en algunas páginas que pueden o no estar vinculadas al Wrapbootstrap páginas.

Esto era todo lo que tenía que cuidar cuando integé el tema wrapbootstrap encima de la aplicación Rails-EmberJS.

0

asegúrese de que durante la instalación de Twitter Bootstrap se debe añadir después de la gema en su Gemfile en "activos" del grupo:

gem 'therubyracer' 
gem 'less-rails' 
gem 'twitter-bootstrap-rails' 

a continuación, ejecutar comando bundle.

Ahora, el tema "file_name.css" (nombre_archivo podría ser cualquiera) que u han descargado simplemente agregarlo a la carpeta "hojas de estilo" bajo app-> assests-> hojas de estilo

a continuación, abra el archivo de application.css en la misma carpeta allí verá

*= require_tree. 

reemplazar esta línea con

*= require "file_name.css" 

NOTA: no se olvide de volver a compilar sus activos o simplemente borrar el contenido de su tmp/c carpeta de dolor

guárdelo y reinicie su servidor. aplicará tu nuevo tema.

0
+1

Nota que [respuestas-Link sólo] (http://meta.stackoverflow.com/tags/link-only-answers/info) están desanimados, SO respuestas deben ser el punto final de una buscar una solución (frente a otra escala más de referencias, que tienden a quedar obsoletas en el tiempo). Considere agregar una sinopsis independiente aquí, manteniendo el enlace como referencia. – kleopatra

+0

esa es una respuesta horrible. El curso no solo no explica cómo hacerlo, sino que su respuesta no fue una solución final. Terrible. –

+0

¿Tenía esta respuesta CUALQUIER COSA que ver con la pregunta? – TJChambers

Cuestiones relacionadas