Es gibt verschiedene Möglichkeiten, Bootstrap in Ihre Rails 5-App zu integrieren, aber wir werden es zum Laufen bringen, indem wir das offizielle Bootstrap-Juwel installieren. Die Anweisungen auf der Github-Seite des Edelsteins sind großartig, daher ist das Folgende nur ein Nachdruck dessen, was Sie dort finden.
Fügen Sie den Edelstein zu Ihrem Gemfile hinzu.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Führen Sie bundle install in Ihrer Befehlszeile aus.
$ bundle install Fügen Sie das Bootstrap-CSS hinzu
Bestätigen Sie, dass Ihre Anwendungs-CSS-Datei eine .scss Erweiterung verwendet. Es kann sich um eine .css -Datei handeln, in diesem Fall müssen Sie sie wie folgt ändern:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Entfernen Sie alle *= require und *= require_tree -Anweisungen aus der Sass-Datei und verwenden Sie stattdessen @import , um Sass-Dateien zu importieren. Importieren Sie dann die Bootstrap-Stile!
//app/assets/stylesheets/application.scss @import "bootstrap"; Sie haben jetzt alle Bootstrap-Stile bereit! Wir sind noch nicht ganz fertig.
Bootstrap-Javascript einbinden
Viele der Bootstrap-Komponenten basieren auf Javascript und jQuery, daher müssen wir die Bootstrap-Javascript-Dateien importieren und jQuery installieren, wenn wir müssen. jQuery ist bereits enthalten, wenn Ihre Rails-Version weniger als 5.1 ist. Fügen Sie in diesem Fall einfach Bootstrap und Popper (eine Javascript-Bibliothek, von der Bootstrap für die Positionierung abhängt) in Ihre app/assets/javascripts/application.js Manifestdatei ein.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Wenn Ihre Rails-Version 5.1+ ist, müssen Sie jQuery einschließen. Installieren Sie dazu das jquery-rails gem, bundle intsall und fügen Sie dann die Bibliotheken zu Ihrer application.js Manifestdatei hinzu. Zum Beispiel:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Jetzt können wir die Stile anpassen!
Bootstrap anpassen
Es gibt viele Bootstrap-Variablen, die Sie definieren können, um Ihrer App einen eigenen benutzerdefinierten Stil zu verleihen. Wir werden nur schnell die Körperhintergrundfarbe und die Themenfarben ändern, um schnell zu zeigen, wie man anfängt. Der entscheidende Punkt ist, dass Sie diese Variablen vor Ihrer @import "bootstrap"; Zeile setzen müssen.
Wir ändern die Themenfarben, um sie an das Signal-Thema dieser Bootstrap-Themenseite anzupassen, und ändern unseren Körperhintergrund in ein Hellgrau.
//app/assets/stylesheets/application.scss $body-bg: #e2e2e2; $theme-colors: ( "primary": #FF304F, "secondary": #CACACA, "success": #015668, "info": #0F81C7, "warning": #0DE2EA, "danger": #06648C, "light": #ececec, "dark": #222222 ); @import "bootstrap"; //bootstrap gem Jetzt können Sie die Standard-Bootstrap-Stile verwenden, aber sie haben Ihre benutzerdefinierten Farben!
.container .row .col-md %button.btn.btn-primary Primary %button.btn.btn-secondary Secondary %button.btn.btn-success Success %button.btn.btn-danger Danger %button.btn.btn-warning Warning %button.btn.btn-info Info %button.btn.btn-light Light %button.btn.btn-dark Dark Es gibt viele andere nette Tricks und Dienstprogramme, mit denen Bootstrap das Erscheinungsbild Ihrer App weiter anpassen kann. Ich würde empfehlen, die Dokumentation durchzulesen, um mehr zu erfahren, aber ich hoffe, das Obige hilft Ihnen beim Einstieg.
