web-dev-qa-db-fra.com

Installation de Bootstrap 3 sur Rails App

J'essaie d'installer Bootstrap 3.0 sur mon application Rails. J'ai récemment terminé le didacticiel de Michael Hartl et j'essaie maintenant de créer mon propre système avec cette nouvelle version de Bootstrap, mais j'ai quelques questions dont je ne suis pas sûr.

Mes spécifications système:

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

Questions que j'ai:

  1. Quelle est la meilleure gemme à utiliser dans mon Gemfile? J'ai trouvé quelques-uns d'entre eux.
  2. Que dois-je importer sur mon custom.css.scss? J'ai lu quelque part que c'est différent de 2.3.2.
  3. Dois-je faire autre chose pour que Bootstrap fonctionne ou bien les étapes restantes sont-elles identiques à celles que j'ai suivies pour Bootstrap 2.3.2?

Modifier

Voici ce que le projet bootstrap-Rails sur GitHub dit en premier de faire:

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

Alors il dit de faire:

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

Font-ils la même chose ou devez-vous les faire tous les deux?

ruby-on-railsrubytwitter-bootstrap-3
112
megashigger

En fait, vous n’avez pas besoin de gemme pour cela, voici l’étape pour installer Bootstrap 3 dans RoR

  • Télécharger Bootstrap

  • Copier:

    bootstrap-dist/css/bootstrap.css et bootstrap-dist/css/bootstrap.min.css

    À: vendor/assets/stylesheets

  • Copier:

    bootstrap-dist/js/bootstrap.js et bootstrap-dist/js/bootstrap.min.js

    À: vendor/assets/javascripts

  • Mise à jour: app/assets/stylesheets/application.css en ajoutant:

    *= require bootstrap.min

  • Mise à jour: app/assets/javascripts/application.js en ajoutant:

    //= require bootstrap.min

Avec cela, vous pouvez mettre à jour bootstrap à tout moment, sans attendre que Gem soit mis à jour. De plus, avec cette approche, le pipeline d’actifs utilisera des versions minifiées en production.

271
hawk

Comme beaucoup le savent, il n'y a pas besoin de joyau.

Étapes à suivre:

  1. Télécharger Bootstrap

  2. Copie

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

    à: app/assets/stylesheets

  3. Copie

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

    à: app/assets/javascripts

  4. Ajouter à: app/assets/stylesheets/application.css

    * = nécessite un bootstrap

  5. Ajouter à: app/assets/javascripts/application.js

    // = nécessite un bootstrap

C'est tout. Vous êtes prêt à ajouter un nouveau modèle cool Bootstrap.

Pourquoi app/ au lieu de vendor/?

Il est important d’ajouter les fichiers à app/assets . À l'avenir, vous pourrez donc écraser les styles Bootstrap.

Si vous souhaitez ajouter ultérieurement un fichier custom.css.scss avec des styles personnalisés. Vous aurez quelque chose de similaire à ceci dans application.css:

 *= require bootstrap                                                            
 *= require custom

Si vous avez placé les fichiers bootstrap dans app/assets , tout fonctionne comme prévu. Mais, si vous les avez placés dans fournisseur/actifs , les fichiers Bootstrap seront chargés en dernier. Comme ça:

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

Ainsi, certaines de vos personnalisations ne seront pas utilisées car les styles Bootstrap les remplaceront.

Raison de ce

Les rails rechercheront des actifs dans de nombreux endroits; Pour obtenir une liste de ces emplacements, vous pouvez le faire:

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

Dans la sortie, vous verrez que app/assets a la priorité et le charge donc en premier.

62
givanse

Cette réponse s'adresse à ceux d'entre vous qui envisagez d'installer Bootstrap 3 dans votre application Rails sans utiliser de gemme. Il existe deux façons simples de faire cela qui prennent moins de 10 minutes. Choisissez celui qui répond le mieux à vos besoins. Les glyphiques et Javascript fonctionnent et je les ai testés avec la dernière version bêta de Rails 4.1.0.

  1. tilisation de Bootstrap 3 avec Rails 4 - Les fichiers Bootstrap 3 sont copiés dans le répertoire du fournisseur de votre application.

  2. Ajout de Bootstrap d'un CDN à votre application Rails - Les fichiers Bootstrap 3 sont servis à partir du Bootstrap CDN .

Le numéro 2 ci-dessus est le plus flexible. Tout ce que vous avez à faire est de changer le numéro de version stocké dans un assistant de mise en page. Ainsi, vous pouvez exécuter la version Bootstrap de votre choix, qu'il s'agisse de versions 3.0.0, 3.0.3 ou même antérieures Bootstrap 2.

35
rvg

Twitter a maintenant un version sass-ready de bootstrap avec gem inclus, il est donc plus facile que jamais de l'ajouter à Rails.

Ajoutez simplement à votre gemfile ce qui suit:

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

bundle install et redémarrez votre serveur pour que les fichiers soient disponibles via le pipeline.

Il existe également un support pour compass et sass-only: https://github.com/twbs/bootstrap-sass

22
Eneko Alonso

J'utilise https://github.com/yabawock/bootstrap-sass-Rails

Ce qui est une installation plutôt simple, des mises à jour et suivis rapides de gemmes et des solutions rapides au cas où.

11
Nick Ginanto

gem bootstrap-sass

il est facile d’ajouter bootstrap-sass dans Rails avec le pipeline d’actifs.

Dans votre Gemfile, vous devez ajouter la gemme bootstrap-sass et vous assurer que la gem sass-Rails est présente - elle est ajoutée aux nouvelles Rails applications par défaut.

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

bundle install et redémarrez votre serveur pour que les fichiers soient disponibles via le pipeline.

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

5
Bruno

J'espère que l'utilisation de cette branche résoudra le problème:

gem 'Twitter-bootstrap-Rails',
  git: 'git://github.com/seyhunak/Twitter-bootstrap-Rails.git',
  branch: 'bootstrap3'
3
chanakya devraj

Pour moi, le moyen le plus simple de le faire est

1) Téléchargez et décompressez bootstrap en vendor

2) Ajoutez le chemin bootstrap à votre configuration

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

3) Exigez-les

en css *= require css/bootstrap

dans js //= require js/bootstrap

Terminé!

Cette méthode permet aux polices de se charger sans autre configuration spéciale et ne nécessite pas de déplacer les fichiers bootstrap hors de leur répertoire autonome.

3
vinhboy

Je pense que le joyau le plus récent de la nouvelle version bootstrap est la forme anjlab .

Mais je ne sais pas si cela fonctionne actuellement bien avec d'autres gemmes comme simple_form lorsque vous faites Rails generate simple_form:install --bootstrap, etc. Vous devrez peut-être modifier des initialiseurs ou des configurations pour les adapter à la nouvelle version bootstrap.

1
tbraun89

J'ai en fait eu une solution de contournement facile sur celle-ci dans laquelle je me suis presque égaré sur la façon de la faire fonctionner. hahah!

Eh bien, d’abord, j’ai téléchargé Bootstrap (la version compilée de css et de js).

Ensuite, j'ai collé tous les fichiers bootstrap css dans le fichier app/assets/stylesheets/.

Et puis j'ai collé tous les fichiers bootstrap js dans le app/assets/javascripts/.

J'ai rechargé la page et wallah! Je viens d'ajouter bootstrap dans mon dossier!

0
therealadrain