Anleitung: Integration von Bootstrap in Ruby on Rails

Entdecken Sie in unserem Tutorial, wie Sie Bootstrap nahtlos in Ihre Ruby on Rails-Anwendung integrieren können, um ein ansprechendes und benutzerfreundliches Webdesign zu erreichen. Von der Installation der erforderlichen Abhängigkeiten bis zur Anpassung von Layouts und Stilen – folgen Sie unserem Leitfaden, um Ihre Entwicklungszeit zu verkürzen und das Erscheinungsbild Ihrer Anwendung zu verbessern.

Wenn Sie eine Ruby-on-Rails-Anwendung entwickeln, möchten Sie möglicherweise Styles hinzufügen, um die Benutzerinteraktion zu erleichtern. Eine Möglichkeit, dies zu tun, besteht darin, Bootstrap hinzuzufügen, ein HTML-, CSS- und JavaScript-Framework, das entwickelt wurde, um den Prozess der Erstellung von Webprojekten responsiv und mobilfähig zu vereinfachen. Durch die Implementierung von Bootstrap in ein Rails-Projekt können Sie dessen Layoutkonventionen und Komponenten in Ihre Anwendung integrieren, um die Benutzerinteraktion mit Ihrer Website ansprechender zu gestalten.

Schritt 1: Projekt klonen und Abhängigkeiten installieren

Unser erster Schritt besteht darin, das rails-stimulus-Repository von GitHub zu klonen und die Abhängigkeiten zu installieren. Führen Sie dazu die folgenden Befehle aus:

git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap

cd rails-bootstrap

bundle install

yarn install –check-files

rails db:migrate

rails s

Schritt 2: Haupt-Landing-Page und Controller hinzufügen

Aktuell ist die Wurzelansicht auf die Hauptseite der Haie gesetzt. Um die Hauptseite des Controllers zu ändern, führen Sie die folgenden Schritte aus:

rails generate controller home index

nano config/routes.rb

In der `routes.rb` Datei ändern Sie:

root ’sharks#index‘

zu

root ‚home#index‘

Schritt 3: Bootstrap installieren und benutzerdefinierte Styles hinzufügen

In diesem Schritt fügen Sie Bootstrap zu Ihrem Projekt hinzu und erstellen benutzerdefinierte Stile. Führen Sie die folgenden Befehle aus:

yarn add bootstrap jquery popper.js

nano config/webpack/environment.js

Fügen Sie in der `environment.js` Datei den folgenden Code hinzu:

const webpack = require(„webpack“);

environment.plugins.append(„Provide“, new webpack.ProvidePlugin({

$: ‚jquery‘,

jQuery: ‚jquery‘,

Popper: [‚popper.js‘, ‚default‘]

}));

Schritt 4: Anwendungslayout anpassen

Fügen Sie Bootstrap-Konventionen und -Komponenten zum Hauptanwendungslayout hinzu, um das visuelle Erscheinungsbild zu verbessern. Öffnen Sie dazu die `app/views/layouts/application.html.erb` Datei und fügen Sie den folgenden Code hinzu:

„>

<%= csrf_meta_tags %>

<%= csp_meta_tag %>

<%= stylesheet_link_tag ‚application‘, media: ‚all‘, ‚data-turbolinks-track‘: ‚reload‘ %>

<%= javascript_pack_tag ‚application‘, ‚data-turbolinks-track‘: ‚reload‘ %>
<%= render ‚layouts/navigation‘ %>


<%= content_for?(:content) ? yield(:content) : yield %>

Schritt 5: Gemeinsame Partialansicht und spezifische Layouts erstellen

Erstellen Sie gemeinsame Partialansichten, spezifische Layouts und eine Anzeige für die Startseite der Anwendung. Fügen Sie außerdem Bootstrap-Stile zu Ihren aktuellen link_to-Elementen hinzu. Führen Sie dazu die folgenden Schritte aus:

nano app/views/layouts/_navigation.html.erb

nano app/views/layouts/sharks.html.erb

nano app/views/home/index.html.erb

nano app/views/sharks/index.html.erb

nano app/views/sharks/new.html.erb

nano app/views/sharks/edit.html.erb

nano app/views/sharks/show.html.erb

Fügen Sie die entsprechenden Bootstrap-Klassen zu den HTML-Dateien hinzu, wie im Tutorial beschrieben.

Fazit

Herzlichen Glückwunsch! Sie haben nun Bootstrap erfolgreich in Ihre Rails-Anwendung integriert. Durch die Anwendung dieses Tutorials können Sie die Benutzererfahrung Ihrer Anwendung verbessern und sie ansprechender gestalten. Weitere Informationen zu Bootstrap finden Sie in der offiziellen Dokumentation. Anleitung: Integration von Bootstrap in Ruby on Rails