Hay varias formas diferentes de integrar Bootstrap en su aplicación Rails 5, pero lo haremos funcionar instalando la gema oficial de bootstrap. Las instrucciones en la página de github de la gema son geniales, por lo que lo siguiente es solo una reimpresión de lo que encontrarás allí.
Agregue la gema a suGemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Ejecutar bundle install en la línea de comando.
$ bundle install Incluir el Bootstrap CSS
Confirme que la aplicación archivo css utiliza un .scss extensión. Puede ser un .css archivo en cuyo caso usted tendrá que cambiar con la siguiente:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Retire cualquier *= require y *= require_tree declaraciones del archivo Sass, y en lugar de usar @import importar archivos Sass. A continuación, importar los estilos de arranque!
//app/assets/stylesheets/application.scss @import "bootstrap"; ahora tiene todos los estilos de bootstrap listo para ir! No hemos terminado.
Incluye el Javascript de arranque
Muchos de los componentes de arranque dependen de Javascript y jQuery, por lo que necesitamos importar los archivos javascript de arranque e instalar jQuery si es necesario. jQuery ya está incluido si la versión de Rails es inferior a la 5.1. En ese caso, simplemente incluya bootstrap y popper (un bootstrap de biblioteca Javascript depende del posicionamiento) en su archivo de manifiesto app/assets/javascripts/application.js.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Si su versión de Rails es 5.1+, deberá incluir jQuery. Para hacer eso, instale la gema jquery-railsbundle intsall y luego agregue las bibliotecas a su archivo de manifiesto application.js. Por ejemplo:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Ahora estamos listos para personalizar los estilos!
Personalizar Bootstrap
Hay muchas variables de Bootstrap que puedes definir para darle a tu app su propio estilo personalizado. Cambiaremos rápidamente el color de fondo del cuerpo y los colores del tema para mostrar rápidamente cómo comenzar. El punto clave es que debe establecer estas variables antes de su línea @import "bootstrap";.
Cambiaremos los colores del tema para que coincidan con el tema signal de este sitio de tematización de Bootstrap y cambiaremos el fondo de nuestro cuerpo a un gris claro.
//app/assets/stylesheets/application.scss $body-bg: #e2e2e2; $theme-colors: ( "primary": #FF304F, "secondary": #CACACA, "success": #015668, "info": #0F81C7, "warning": #0DE2EA, "danger": #06648C, "light": #ececec, "dark": #222222 ); @import "bootstrap"; //bootstrap gem Ahora puede usar los estilos de arranque estándar, pero tendrán sus colores personalizados.
.container .row .col-md %button.btn.btn-primary Primary %button.btn.btn-secondary Secondary %button.btn.btn-success Success %button.btn.btn-danger Danger %button.btn.btn-warning Warning %button.btn.btn-info Info %button.btn.btn-light Light %button.btn.btn-dark Dark Hay muchos otros trucos y utilidades que Bootstrap ofrece para personalizar aún más la apariencia de tu aplicación. Recomiendo leer la documentación para obtener más información, pero espero que lo anterior lo ayude a comenzar.
