Installieren von Bootstrap 3 in der Rails App

112

Ich versuche, Bootstrap 3.0 auf meiner Rails-App zu installieren. Ich habe kürzlich das Tutorial von Michael Hartl beendet und versuche nun, mein eigenes System mit dieser neuen Version von Bootstrap zu erstellen, aber ich habe einige Fragen, bei denen ich mir nicht sicher bin.

Meine Systemspezifikationen:

  • OS X Mountain Lion auf MBP
  • Schienen 4.0
  • Ruby 2.0

Fragen, die ich habe:

  1. Was ist der beste Edelstein für meine Gemfile? Ich habe einige von ihnen gefunden.
  2. Was importiere ich auf meinem custom.css.scss? Ich habe irgendwo gelesen, dass es anders ist als 2.3.2.
  3. Muss ich noch etwas tun, damit Bootstrap funktioniert, oder sind die verbleibenden Schritte mit denen identisch, die ich für Bootstrap 2.3.2 ausgeführt habe?

Bearbeiten

Das Bootstrap-Rails-Projekt auf GitHub sagt zunächst Folgendes:

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

Dann heißt es zu tun:

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

Tun sie dasselbe oder müssen Sie beide tun?

ruby-on-rails ruby twitter-bootstrap-3 Megashigger
quelle

Antworten:

272

Eigentlich brauchen Sie dafür kein Juwel. Hier ist der Schritt, um Bootstrap 3 in RoR zu installieren

  • Laden Sie Bootstrap herunter

  • Kopieren:

    bootstrap-dist/css/bootstrap.css und bootstrap-dist/css/bootstrap.min.css

    Zu: vendor/assets/stylesheets

  • Kopieren:

    bootstrap-dist/js/bootstrap.js und bootstrap-dist/js/bootstrap.min.js

    Zu: vendor/assets/javascripts

  • Update: app/assets/stylesheets/application.css durch Hinzufügen von:

    *= require bootstrap.min

  • Update: app/assets/javascripts/application.js durch Hinzufügen von:

    //= require bootstrap.min

Mit diesem können Sie Bootstrap jederzeit aktualisieren, ohne auf die Aktualisierung warten zu müssen. Auch bei diesem Ansatz werden in der Assets-Pipeline minimierte Versionen in der Produktion verwendet.

Falke
quelle
2
Genau. Ich habe auch festgestellt, dass das direkte Einfügen der Dateien weniger Probleme beim Vorkompilieren von Assets verursacht (z. B. beim Pushing an Heroku).
Amy.js
26
Gibt es einen Vorteil beim Einfügen der minimierten Dateien vendor/assets/{stylesheets|javascripts}? Kettenräder sollten die darin enthaltenen Dateien minimieren app/assets/{stylesheets|javascripts}.
jrhorn424
16
Wie füge ich Bild- und Schriftdateien hinzu?
wwli
5
@wwli - Siehe meine Antwort unten. Es wird erklärt, wie Sie die Glyphicons und Schriftarten hinzufügen.
Rvg
4
Warum kopieren Sie sowohl bootstrap als auch bootstrap.min?
John Merlino
62

Wie viele wissen, ist kein Edelstein erforderlich.

Schritte zu unternehmen:

  1. Laden Sie Bootstrap herunter

  2. Kopieren 

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

    zu: app/assets/stylesheets

  3. Kopieren 

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

    zu: app/assets/javascripts

  4. Anhängen: app/assets/stylesheets/application.css

    * = Bootstrap erforderlich

  5. Anhängen: app/assets/javascripts/application.js

    // = Bootstrap erforderlich

Das ist alles. Sie können jetzt eine neue coole Bootstrap-Vorlage hinzufügen.

Warum app/statt vendor/?

Es ist wichtig, die Dateien zu App / Assets hinzuzufügen , damit Sie in Zukunft Bootstrap-Stile überschreiben können.

Wenn Sie später eine custom.css.scssDatei mit benutzerdefinierten Stilen hinzufügen möchten . Sie haben etwas Ähnliches in application.css:

 *= require bootstrap                                                            
 *= require custom

Wenn Sie die Bootstrap-Dateien in App / Assets abgelegt haben , funktioniert alles wie erwartet. Wenn Sie sie jedoch in Vendor / Assets platzieren , werden die Bootstrap-Dateien zuletzt geladen. So was:

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

Einige Ihrer Anpassungen werden daher nicht verwendet, da die Bootstrap-Stile sie überschreiben.

Grund dafür

Rails sucht an vielen Orten nach Assets. Um eine Liste dieser Standorte zu erhalten, können Sie Folgendes tun:

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

In der Ausgabe sehen Sie, dass App / Assets Vorrang haben und daher zuerst geladen werden.

givanse
quelle
4
Steuert nicht die Reihenfolge der require-Anweisungen in der Datei application.css die Reihenfolge, in der Dateien geladen werden, und nicht die Reihenfolge der Verzeichnisse in der Pfadliste? Die Reihenfolge der Pfade steuert normalerweise, welche Version einer Datei geladen wird, wenn sie in mehreren Verzeichnissen in der Pfadliste gefunden wird. Wenn nicht, wie kommt die Reihenfolge der erforderlichen Anweisungen ins Spiel?
Kickingbull
2
Bitte kopieren Sie keine verkleinerten Versionen, sonst erhalten Sie später eine doppelte Aufnahme (scheint 'require_tree.' Funktioniert so?). Ich konnte nach der Installation von bootsy gem keine Dropdowns öffnen, nur wegen dieses Double-Include.
Kourindou Hime
1
@Kourindou Himes Kommentar scheint Aufmerksamkeit zu verdienen. Ich konnte keine Dropdowns öffnen, bis ich .min-Dateien entfernt hatte.
Paco Abato
35

Diese Antwort ist für diejenigen unter Ihnen gedacht, die Bootstrap 3 in Ihrer Rails-App installieren möchten, ohne ein Juwel zu verwenden. Es gibt zwei einfache Möglichkeiten, die weniger als 10 Minuten dauern. Wählen Sie diejenige aus, die Ihren Anforderungen am besten entspricht. Glyphicons und Javascript funktionieren und ich habe sie auch mit der neuesten Beta von Rails 4.1.0 getestet.

  1. Verwenden von Bootstrap 3 mit Rails 4 - Die Bootstrap 3-Dateien werden in das Herstellerverzeichnis Ihrer Anwendung kopiert.

  2. Hinzufügen von Bootstrap von einem CDN zu Ihrer Rails-Anwendung - Die Bootstrap 3-Dateien werden vom Bootstrap-CDN bereitgestellt .

Nummer 2 oben ist die flexibelste. Sie müssen lediglich die Versionsnummer ändern, die in einem Layout-Helfer gespeichert ist. Sie können also die Bootstrap-Version Ihrer Wahl ausführen, unabhängig davon, ob es sich um 3.0.0, 3.0.3 oder sogar ältere Bootstrap 2-Versionen handelt.

rvg
quelle
Kann nicht scheinen, dies zum Laufen zu bringen. Es wird weiterhin localhost:3000/fonts/glyphicons-halflings-regular.svgals Beispiel in der Chrome-Konsole gesucht , und die Glyphicons werden nicht angezeigt (als 404).
Steve
1
@Steve - Ich habe angenommen, dass Sie das Problem in der Entwicklung haben und dass Sie oben die Nummer 1 gewählt haben. Wenn das korrekt ist, würde ich überprüfen, ob Sie das Bootstrap-Schriftartenverzeichnis und den gesamten Inhalt /vendor/assets/in Ihr Projekt kopiert haben . Sie sollten auch Ihre application.css überprüfen, um sicherzustellen, dass Sie bootstrap.min benötigen und die @ font-face-Überschreibungen haben. SCSS ist heutzutage weit verbreitet. Wenn Sie das verwenden, müssen Sie 'src: url' in 'src: asset-url' in den @ font-face-Überschreibungen ändern. Es gibt auch ein Beispielprojekt am Ende des Beitrags, das helfen kann.
Rvg
Ich hatte endlose Probleme mit den Schriftarten - funktionierte gut in der Entwicklung, aber nicht in der Produktion. Endete nur in der Öffentlichkeit / Schriftarten
ChrisJ
22

Twitter hat jetzt eine Sass-fähige Version von Bootstrap mit Edelstein, so dass es einfacher als je zuvor ist, sie zu Rails hinzuzufügen.

Fügen Sie Ihrem Gemfile einfach Folgendes hinzu:

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

bundle install und starten Sie Ihren Server neu, um die Dateien über die Pipeline verfügbar zu machen.

Es gibt auch Unterstützung für Kompass und nur Sass: https://github.com/twbs/bootstrap-sass

Eneko Alonso
quelle
Vielen Dank. Ein wichtiger Punkt aus der Github-Readme für Neulinge; "Wenn Sie gerade eine neue Rails-App generiert haben, wird möglicherweise stattdessen eine CSS-Datei mitgeliefert. Wenn diese Datei vorhanden ist, wird sie anstelle von Sass bereitgestellt. Benennen Sie sie also um ..."
Brett
5

gem bootstrap-sass

bootstrap-sass lässt sich mit der Asset-Pipeline leicht in Rails ablegen.

In Ihrer Gemfile müssen Sie das Bootstrap-Sass-Gem hinzufügen und sicherstellen, dass das Sass-Rails-Gem vorhanden ist. Es wird standardmäßig neuen Rails-Anwendungen hinzugefügt.

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

bundle install und starten Sie Ihren Server neu, um die Dateien über die Pipeline verfügbar zu machen.

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

Bruno
quelle
3

Für mich ist der einfachste Weg, dies zu tun

1) Laden Sie den Bootstrap herunter und entpacken Sie ihn in vendor

2) Fügen Sie den Bootstrap-Pfad zu Ihrer Konfiguration hinzu

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

3) Benötigen Sie sie

in css *= require css/bootstrap

in js //= require js/bootstrap

Getan!

Bei dieser Methode werden die Schriftarten ohne andere spezielle Konfiguration geladen und die Bootstrap-Dateien müssen nicht aus ihrem eigenständigen Verzeichnis verschoben werden.

Vinhboy
quelle
3

Die Verwendung dieses Zweigs wird hoffentlich das Problem lösen:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
Chanakya Devraj
quelle
1

Ich denke, das aktuellste Juwel für die neue Bootstrap-Version ist Form Anjlab .

Aber ich weiß nicht, ob es derzeit gut mit anderen Edelsteinen wie simple_form funktioniert, wenn Sie dies tun rails generate simple_form:install --bootstrapusw. Möglicherweise müssen Sie einige Initialisierer oder Konfigurationen bearbeiten, um sie an die neue Bootstrap-Version anzupassen .

tbraun89
quelle
Danke für die Antwort. Also ist 'gem anjlab' in meiner Gemfile alles was ich tun muss @ tbraun89?
Megashigger
Die Readme-Datei befindet sich auf der Github-Seite. Das aktuelle Juwel ist gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
tbraun89
In der Readme- gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
Datei
Vielen Dank! Ich habe der Frage etwas hinzugefügt. Könnten Sie den Teil nach 'Bearbeiten' klären?
Megashigger
Der erste lädt die Dateien direkt von Github. Wenn Sie also ein Bundle-Update durchführen, haben Sie die neueste Version. Der zweite lädt den Edelstein von Rubygems, der momentan Version 3.0.0.1. (2 Tage alt)
tbraun89
0

Ich hatte tatsächlich eine einfache Problemumgehung, bei der ich mir fast den Kopf kratzte, wie es funktioniert. hahah!

Nun, zuerst habe ich Bootstrap heruntergeladen (die kompilierte CSS- und JS-Version).

Dann habe ich alle Bootstrap-CSS-Dateien in die eingefügt app/assets/stylesheets/ .

Und dann habe ich alle Bootstrap-JS-Dateien in die eingefügt app/assets/javascripts/ .

Ich habe die Seite und die Wallah neu geladen! Ich habe gerade Bootstrap in meinem RoR hinzugefügt!

Therealadrain
quelle