Installation de Bootstrap 3 sur l'application Rails

112

J'essaye d'installer Bootstrap 3.0 sur mon application Rails. J'ai récemment terminé le tutoriel de Michael Hartl et j'essaye maintenant de construire mon propre système en utilisant 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
  • Rubis 2.0

Questions que j'ai:

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

Éditer

Voici ce que le projet bootstrap-rails sur GitHub dit d'abord de faire:

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

Ensuite, il dit de faire:

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

Est-ce qu'ils font la même chose ou devez-vous faire les deux?

ruby-on-rails ruby twitter-bootstrap-3 mégashigger
la source

Réponses:

272

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

  • Télécharger Bootstrap

  • Copie:

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

    À: vendor/assets/stylesheets

  • Copie:

    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, vous n'avez pas besoin d'attendre que le gem soit mis à jour. Également avec cette approche, le pipeline d'actifs utilisera des versions minifiées en production.

faucon
la source
2
Je suis d'accord. J'ai également constaté que l'insertion directe des fichiers pose moins de problèmes lors de la précompilation des actifs (par exemple, pour pousser vers Heroku).
Amy.js
26
Y a-t-il un avantage à inclure les fichiers minifiés vendor/assets/{stylesheets|javascripts}? Les pignons doivent réduire les fichiers inclus dans app/assets/{stylesheets|javascripts}.
jrhorn424
16
Comment inclure des fichiers d'image et de polices?
wwli
5
@wwli - Voir ma réponse ci-dessous. Il explique comment ajouter les glyphicons et les polices.
RVG
4
pourquoi copiez-vous à la fois bootstrap et bootstrap.min?
JohnMerlino
62

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

É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 Bootstrap cool.

Pourquoi app/au lieu de vendor/?

Il est important d'ajouter les fichiers à l' application / aux actifs , vous pourrez donc à l'avenir écraser les styles Bootstrap.

Si plus tard vous souhaitez ajouter un custom.css.scssfichier 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 d'amorçage dans app / assets , tout fonctionne comme prévu. Mais, si vous les avez placés dans le fournisseur / les 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 derrière cela

Rails recherchera 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 l' application / les actifs ont la priorité, ce qui les charge en premier.

donner
la source
4
L'ordre des instructions require dans le fichier application.css ne contrôle-t-il pas l'ordre dans lequel les fichiers sont chargés plutôt que l'ordre des répertoires dans la liste des chemins? L'ordre des chemins contrôle généralement la version d'un fichier gest chargé s'il se trouve dans plusieurs répertoires inclus dans la liste des chemins. Sinon, comment l'ordre des instructions require entre-t-il en jeu?
Kickingbull
2
Veuillez ne pas copier les versions minifiées, sinon vous obtiendrez le double include plus tard (il semble que 'require_tree.' Fonctionne de cette façon?). Je n'ai pas pu ouvrir les listes déroulantes après l'installation de la gemme de démarrage juste à cause de cette double inclusion.
Kourindou Hime
1
Le commentaire de @Kourindou Hime semble mériter l'attention. Je ne pouvais pas ouvrir les listes déroulantes tant que je n'avais pas supprimé les fichiers .min.
Paco Abato
35

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

  1. Utilisation 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 à partir d'un CDN à votre application Rails - Les fichiers Bootstrap 3 sont servis à partir du CDN Bootstrap .

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. Vous pouvez donc exécuter la version Bootstrap de votre choix, qu'il s'agisse de versions 3.0.0, 3.0.3 ou même plus anciennes de Bootstrap 2.

RVG
la source
Je n'arrive pas à faire fonctionner cela. Il continue à chercher localhost:3000/fonts/glyphicons-halflings-regular.svgcomme exemple dans la console Chrome, et les glyphicons n'apparaissent pas (en tant que 404).
Steve
1
@Steve - J'ai supposé que vous rencontriez un problème de développement et que vous aviez choisi le n ° 1 ci-dessus. Si c'est exact, je vérifierais que vous avez copié le répertoire des polices Bootstrap et tout son contenu /vendor/assets/dans votre projet. Vous devez également vérifier votre application.css pour vous assurer que vous avez besoin de bootstrap.min et que vous disposez des remplacements @ font-face. SCSS est largement utilisé de nos jours. Si vous l'utilisez, vous devez remplacer «src: url» par «src: asset-url» dans les remplacements @ font-face. Il y a aussi un exemple de projet au bas de l'article qui peut vous aider.
RVG
Je n'ai eu aucun problème avec les polices - a bien fonctionné en développement mais pas en production. J'ai fini par les mettre en public / polices
ChrisJ
22

Twitter a maintenant une version sass-ready de bootstrap avec gemme incluse, 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 rendre les fichiers disponibles via le pipeline.

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

Eneko Alonso
la source
Merci. Un point clé du readme de github pour les débutants; "Si vous venez de générer une nouvelle application Rails, elle peut être accompagnée d'un fichier .css à la place. Si ce fichier existe, il sera servi à la place de Sass, alors renommez-le ..."
Brett
5

gem bootstrap-sass

bootstrap-sass est facile à insérer dans Rails avec le pipeline d'actifs.

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

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

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

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

Bruno
la source
3

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

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

2) Ajoutez le chemin de bootstrap à votre configuration

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

3) Les exiger

en css *= require css/bootstrap

en js //= require js/bootstrap

Terminé!

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

vinhboy
la source
3

Nous espérons 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'
chanakya devraj
la source
1

Je pense que le joyau le plus à jour pour la nouvelle version de bootstrap est la forme anjlab .

Mais je ne sais pas si cela fonctionne actuellement bien avec d'autres gemmes comme simple_form quand vous le faites rails generate simple_form:install --bootstrap, etc. vous devrez peut-être modifier certains initialiseurs ou configurations pour s'adapter à la nouvelle version de bootstrap.

tbraun89
la source
Merci pour la réponse. Donc 'gem anjlab' dans mon Gemfile est tout ce que j'ai à faire @ tbraun89?
megashigger
Le readme se trouve sur la page github. Le joyau actuel est gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
tbraun89
Dans le fichier readme, ils font ceci:gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
tbraun89
Merci! J'ai ajouté quelque chose dans la question. Pourriez-vous clarifier la partie après «modifier»?
megashigger
Le premier charge les fichiers directement depuis github, donc lorsque vous effectuez une mise à jour du bundle, vous aurez la version la plus récente, le second charge le gem de rubygems qui est la version 3.0.0.1 pour le moment. (2 jours)
tbraun89
0

En fait, j'ai eu une solution de contournement facile sur celui-ci dans laquelle je me suis presque gratté la tête sur la façon de le faire fonctionner. hahah!

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

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

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

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

therealadrain
la source