Instalando o aplicativo Bootstrap 3 on Rails

112

Estou tentando instalar o Bootstrap 3.0 em meu aplicativo Rails. Recentemente, terminei o tutorial de Michael Hartl e agora estou tentando construir meu próprio sistema usando esta nova versão do Bootstrap, mas tenho algumas perguntas sobre as quais não tenho certeza.

Minhas especificações de sistema:

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

Perguntas que tenho:

  1. Qual é a melhor gema para usar no meu Gemfile? Eu encontrei alguns deles.
  2. O que eu importo no meu custom.css.scss? Eu li em algum lugar que é diferente de 2.3.2.
  3. Há algo mais que preciso fazer para que o Bootstrap funcione ou as etapas restantes são idênticas às que segui para o Bootstrap 2.3.2?

Editar

Aqui está o que o projeto bootstrap-rails no GitHub diz primeiro para fazer:

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

Então diz para fazer:

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

Eles fazem a mesma coisa ou você tem que fazer os dois?

ruby-on-rails  ruby  twitter-bootstrap-3 
— megashigger
fonte

Respostas:

272

Na verdade você não precisa do gem para isso, aqui está o passo para instalar o Bootstrap 3 no RoR

  • Baixar Bootstrap

  • Cópia de:

    bootstrap-dist/css/bootstrap.css e bootstrap-dist/css/bootstrap.min.css

    Para: vendor/assets/stylesheets

  • Cópia de:

    bootstrap-dist/js/bootstrap.js e bootstrap-dist/js/bootstrap.min.js

    Para: vendor/assets/javascripts

  • Atualização: app/assets/stylesheets/application.css adicionando:

    *= require bootstrap.min

  • Atualização: app/assets/javascripts/application.js adicionando:

    //= require bootstrap.min

Com isso você pode atualizar o bootstrap a qualquer hora que quiser, não precisa esperar que o gem seja atualizado. Além disso, com essa abordagem, o pipeline de ativos usará versões reduzidas na produção.

— Falcão
fonte
2
Concordo. Também descobri que inserir os arquivos diretamente gera menos problemas na pré-compilação de ativos (por exemplo, para enviar para o Heroku).
— Amy.js,
26
Existe alguma vantagem em incluir os arquivos minimizados vendor/assets/{stylesheets|javascripts}? As engrenagens devem reduzir os arquivos incluídos em app/assets/{stylesheets|javascripts}.
— jrhorn424
16
Como incluir arquivos de imagem e fontes?
— wwli
5
@wwli - Veja minha resposta abaixo. Explica como adicionar glifos e fontes.
— rvg
4
por que você está copiando bootstrap e bootstrap.min?
— JohnMerlino
62

Como muitos sabem, não há necessidade de uma joia.

Passos a seguir:

  1. Baixar Bootstrap

  2. cópia de 

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

    para: app/assets/stylesheets

  3. cópia de 

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

    para: app/assets/javascripts

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

    * = requer bootstrap

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

    // = requer bootstrap

Isso é tudo. Você está pronto para adicionar um novo modelo de Bootstrap legal.

Por que em app/vez devendor/ ?

É importante adicionar os arquivos ao aplicativo / ativos , então, no futuro, você poderá sobrescrever os estilos do Bootstrap.

Se mais tarde você quiser adicionar um custom.css.scssarquivo com estilos personalizados. Você terá algo semelhante a isto em application.css:

 *= require bootstrap                                                            
 *= require custom

Se você colocou os arquivos de bootstrap em app / assets , tudo funcionará conforme o esperado. Mas, se você os colocou em fornecedor / ativos , os arquivos Bootstrap serão carregados por último. Como isso:

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

Portanto, algumas de suas personalizações não serão usadas porque os estilos do Bootstrap irão substituí-los.

Razão por trás disso

O Rails irá procurar ativos em muitos locais; para obter uma lista desses locais, você pode fazer o seguinte:

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

Na saída, você verá que o app / assets tem precedência, carregando-o primeiro.

— dar
fonte
4
A ordem das instruções require no arquivo application.css não controla a ordem em que os arquivos são carregados em vez da ordem dos diretórios na lista de caminhos? A ordem dos caminhos controla tipicamente qual versão de um arquivo é carregado se ele for encontrado em vários diretórios incluídos na lista de caminhos. Se não, como a ordem das instruções require entra em jogo?
— Kickingbull
2
Por favor, não copie as versões reduzidas, caso contrário, você terá uma dupla inclusão mais tarde (parece que 'require_tree.' Funciona assim?). Não consegui abrir nenhum menu suspenso após a instalação do BootSy Gem apenas por causa dessa dupla inclusão.
— Kourindou Hime
1
O comentário de @Kourindou Hime parece merecer atenção. Não consegui abrir os menus suspensos até remover os arquivos .min.
— Paco Abato
35

Esta resposta é para aqueles que procuram instalar o Bootstrap 3 em seu aplicativo Rails sem usar uma gema. Existem duas maneiras simples de fazer isso que levam menos de 10 minutos. Escolha aquele que melhor atende às suas necessidades. Glyphicons e Javascript funcionam e eu os testei com a última versão beta do Rails 4.1.0 também.

  1. Usando Bootstrap 3 com Rails 4 - Os arquivos do Bootstrap 3 são copiados para o diretório vendor de seu aplicativo.

  2. Adicionando Bootstrap de um CDN ao seu aplicativo Rails - Os arquivos Bootstrap 3 são servidos a partir do CDN Bootstrap .

O número 2 acima é o mais flexível. Tudo o que você precisa fazer é alterar o número da versão armazenado em um auxiliar de layout. Portanto, você pode executar a versão do Bootstrap de sua escolha, seja 3.0.0, 3.0.3 ou até mesmo versões mais antigas do Bootstrap 2.

— rvg
fonte
Não consigo fazer isso funcionar. Ele continua pesquisando localhost:3000/fonts/glyphicons-halflings-regular.svgcomo um exemplo no console do Chrome, e os glificons não aparecem (como um 404).
— Steve
1
@Steve - Presumi que você está tendo problemas de desenvolvimento e escolheu o nº 1 acima. Se estiver correto, então, eu verificaria novamente se você copiou o diretório de fontes do Bootstrap e todo o seu conteúdo /vendor/assets/em seu projeto. Você também deve verificar seu application.css para garantir que está exigindo bootstrap.min e que possui as substituições de @ font-face. O SCSS é amplamente usado atualmente. Se você estiver usando isso, você precisa alterar 'src: url' para 'src: asset-url' nas substituições de @ font-face. Há também um exemplo de projeto na parte inferior da postagem que pode ajudar.
— rvg de
Não tive problemas com as fontes - funcionou bem no desenvolvimento, mas não na produção. Acabei colocando-os em public / fonts
— ChrisJ
22

Twitter agora tem uma versão sass-ready do bootstrap com gem incluída, então é mais fácil do que nunca adicioná-lo ao Rails.

Basta adicionar ao seu gemfile o seguinte:

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

bundle install e reinicie o servidor para disponibilizar os arquivos por meio do pipeline.

Também há suporte para bússola e apenas sass: https://github.com/twbs/bootstrap-sass

— Eneko Alonso
fonte
Obrigado. Um ponto-chave do leia-me do github para iniciantes; "Se você acabou de gerar um novo aplicativo Rails, ele pode vir com um arquivo .css. Se este arquivo existir, ele será servido no lugar do Sass, então renomeie-o ..."
— Brett,
5

gem bootstrap-sass

bootstrap-sass é fácil de colocar no Rails com o pipeline de ativos.

Em seu Gemfile você precisa adicionar a gem bootstrap-sass e garantir que a gem sass-rails esteja presente - ela é adicionada a novos aplicativos Rails por padrão.

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

bundle install e reinicie o servidor para disponibilizar os arquivos por meio do pipeline.

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

— Bruno
fonte
3

Para mim, a maneira mais simples de fazer isso é

1) Baixe e descompacte bootstrap em vendor

2) Adicione o caminho de bootstrap à sua configuração

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

3) Exigir

em css *= require css/bootstrap

em js //= require js/bootstrap

Feito!

Este método faz com que as fontes sejam carregadas sem qualquer outra configuração especial e não requer a remoção dos arquivos de bootstrap de seu diretório independente.

— Vinhboy
fonte
3

Usar este branch irá resolver o problema:

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

Acho que a gema mais atualizada para a nova versão de bootstrap é o formulário anjlab .

Mas não sei se atualmente funciona bem com outras joias como simple_form quando você faz rails generate simple_form:install --bootstrap, etc. você pode ter que editar alguns inicializadores ou configurações para caber a nova versão de bootstrap.

— tbraun89
fonte
Obrigado pela resposta. Então, 'gem anjlab' no meu Gemfile é tudo que preciso fazer @ tbraun89?
— megashigger de
O leia-me está na página do github. A joia atual é gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
— tbraun89
No readme, eles fazem o seguinte:gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
— tbraun89
Obrigado! Eu adicionei algo na pergunta. Você poderia esclarecer a parte após 'editar'?
— megashigger
O primeiro carrega os arquivos diretamente do github, então quando você faz uma atualização do pacote você terá a versão mais recente, o segundo carrega o gem do rubygems que é a versão 3.0.0.1 no momento. (2 dias de idade)
— tbraun89
0

Na verdade, tive uma solução fácil para este, em que quase coço a cabeça para saber como fazer funcionar. hahah!

Bem, primeiro baixei o Bootstrap (a versão css e js compilada).

Em seguida, colei todos os arquivos css de bootstrap no app/assets/stylesheets/ .

E então colei todos os arquivos js de bootstrap no app/assets/javascripts/ .

Eu recarreguei a página e o wallah! Acabei de adicionar bootstrap no meu RoR!

— há realadreinamento
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.