112 votes

Installation de Bootstrap 3 sur Rails App

Je suis en train d'installer Bootstrap 3.0 sur mon application Rails. J'ai récemment fini de Michael Hartl du tutoriel et je suis maintenant en train de construire mon propre système à l'aide de cette nouvelle version de Bootstrap, mais j'ai quelques questions que je ne suis pas sûr.

Mon système spécifications:

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

Les Questions que j'ai:

  1. Quel est le meilleur bijou à 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. Est-il autre chose que je dois faire pour obtenir l'amorce du travail, ou sont les autres étapes identiques à celles que j'ai suivi pour Bootstrap 2.3.2?

Modifier

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

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

Puis il a dit de le faire:

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

Font-ils de la même chose, ou que vous avez à faire les deux?

272voto

hawk Points 2740

En fait, vous n'avez pas besoin de gem pour cela, voici la démarche pour installer Bootstrap 3 dans RoR

  • Télécharger Bootstrap

  • Copie:

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

    De: vendor/assets/stylesheets

  • Copie:

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

    De: vendor/assets/javascripts

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

    *= require bootstrap.min
    
  • Mise à jour: app/assets/javascripts/application.jsen ajoutant:

    //= require bootstrap.min
    

Avec cela, vous pouvez mettre à jour les fichiers d'amorce à tout moment vous voulez, n'a pas besoin d'attendre gem être mis à jour. Aussi, avec cette approche, les actifs pipeline utilisation minimisé les versions en production.

63voto

givanse Points 2421

Comme beaucoup le savent, il n'est pas nécessaire pour un joyau.

Mesures à prendre:

  1. Télécharger Bootstrap
  2. Copie

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

    de: app/assets/stylesheets

  3. Copie

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

    de: app/assets/javascripts

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

    *= besoin de bootstrap

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

    //= besoin de bootstrap

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

Pourquoi app/ au lieu de vendor/

Il est important d'ajouter les fichiers dans le dossier app/assets, de sorte que dans le futur, vous serez en mesure de remplacer les fichiers d'amorce les styles.

Si plus tard vous souhaitez ajouter un custom.css.scss fichier avec des styles personnalisés. Vous aurez quelque chose de semblable en 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 avez placé dans le répertoire vendor/actifs, les fichiers d'Amorçage sera chargé dernier. Comme ceci:

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

Ainsi, certaines de vos personnalisations ne sera pas utilisé comme le Bootstrap de styles de les remplacer.

La raison derrière cela

Rails de recherche actifs dans de nombreux endroits; pour obtenir une liste de ces endroits, vous pouvez faire ceci:

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

Dans la sortie, vous verrez que app/assets l'emporte, donc chargement en premier.

35voto

rvg Points 465

Cette réponse est pour ceux d'entre vous qui cherchent à Installer Bootstrap 3 dans votre application Rails, sans l'aide d'un gem. Il y a deux façons simples de le faire en moins de 10 minutes. Choisissez celui qui vous convient le mieux. Glyphicons et Javascript travail et j'ai testé avec la dernière version bêta de Rails 4.1.0.

  1. En utilisant Bootstrap 3 avec Rails 4 - Le Bootstrap 3 fichiers sont copiés dans le répertoire des vendeurs de votre application.

  2. L'ajout d'Amorçage à partir d'un CDN pour votre application Rails - Le Bootstrap 3 fichiers sont servis à partir du Bootstrap CDN.

Numéro 2 ci-dessus est la plus flexible. Tout ce que vous devez faire est de changer le numéro de version qui est stocké dans une mise en page à l'aide. De sorte que vous pouvez exécuter le démarrage de la version de votre choix, si c'est 3.0.0, 3.0.3 ou même plus Bootstrap 2 versions.

22voto

Eneko Alonso Points 2970

Twitter a maintenant une sass prêts à la version de bootstrap avec gem inclus, de sorte qu'il est plus facile que jamais pour l'ajouter à Rails.

Ajoutez simplement à votre gemfile suivantes:

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

bundle install et de redémarrer le serveur pour rendre les fichiers disponibles à travers le pipeline.

Il y a aussi un support pour le compass et sass-uniquement: https://github.com/twbs/bootstrap-sass

11voto

Nick Ginanto Points 4779

J’utilise https://github.com/yabawock/bootstrap-sass-rails

Qui est à peu près tout droit vers l’avant installation, rapide gem mises à jour et de suivis et de solutions rapides dans le cas où il faut.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X