Existem algumas maneiras diferentes de integrar o Bootstrap em seu aplicativo Rails 5, mas vamos pô-lo a funcionar instalando o gem bootstrap oficial. As instruções na página GitHub da gem são ótimas, então o seguinte é realmente apenas uma reimpressão do que você vai encontrar lá.
adicione a gema ao seu Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Runbundle install na sua linha de comandos.
$ bundle install incluir a extensão Bootstrap CSS
confirmar que o ficheiro css da sua aplicação utiliza uma extensão .scss Pode ser uma .css arquivo, caso em que você terá que alterá-lo com o seguinte:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Remover qualquer *= require e *= require_tree instruções do arquivo Sass, e, em vez de usar @import importar Sass arquivos. Em seguida, importar os estilos de bootstrap!
//app/assets/stylesheets/application.scss @import "bootstrap"; agora tem todos os estilos de bootstrap prontos para ir! Ainda não acabámos.
incluem o Javascript de Bootstrap
muitos dos componentes de Bootstrap dependem de Javascript e jQuery, por isso precisamos importar os arquivos javascript de Bootstrap e instalar o jQuery se for necessário. jQuery já está incluído se sua versão Rails é menos 5.1. Nesse caso, basta incluir bootstrap e popper (uma biblioteca Javascript bootstrap depende do posicionamento) em seu arquivo app/assets/javascripts/application.js Manifesto.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Se a sua versão dos carris for 5.1+, terá de incluir a jQuery. Para isso, instale ojquery-rails
gem, bundle intsall e depois adicione as bibliotecas ao seuapplication.js
Manifesto. Por exemplo:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Agora estamos prontos para personalizar os estilos!
personalizar o Bootstrap
Existem muitas variáveis Bootstrap que você pode definir para dar ao seu aplicativo o seu próprio estilo personalizado. Vamos mudar rapidamente a cor de fundo do corpo e as cores do tema para mostrar rapidamente como começar. O ponto chave é que você tem que definir essas variáveis antes de sua linha @import "bootstrap";.
mudaremos as cores do tema para corresponder ao tema do sinal deste site temático Bootstrap e mudaremos o fundo do nosso corpo para um cinza 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 agora pode usar os estilos de Bootstrap padrão, mas eles terão as suas cores personalizadas!
.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 Existem muitos outros arrumado truques e utilitários Bootstrap oferece para personalizar ainda mais a aparência de seu aplicativo. Eu recomendaria ler através da documentação para aprender mais, mas espero que o acima ajuda a começar.
