TOC

So fügen Sie einem Ruby on Rails-Programm Bootstrap hinzu

Einführung

Wenn Sie eine Ruby on Rails -Anwendung entwickeln, möchten Sie möglicherweise Ihrem Projekt Stile hinzufügen, um die Benutzerinteraktion zu erleichtern. Eine Möglichkeit, dies zu tun, ist das Hinzufügen von Bootstrap, einem HTML-, CSS- und JavaScript-Framework, das den Prozess der reaktionsschnellen und mobilen Bereitstellung von Webprojekten vereinfacht. Durch die Implementierung von Bootstrap in einem Rails-Projekt können Sie seine Layoutkonventionen und -komponenten in Ihre Anwendung integrieren, um die Interaktion der Benutzer mit Ihrer Site attraktiver zu gestalten.

In diesem Tutorial fügen Sie Bootstrap zu einem vorhandenen Rails-Projekt hinzu, das den Bundler webpack verwendet, um seine JavaScript- und CSS-Assets bereitzustellen. Ziel ist es, eine visuell ansprechende Website zu erstellen, mit der Benutzer Informationen über Haie austauschen können:

image: https://assets.digitalocean.com/articles/docker_node_image/landing_page.png [Landing Page der Anwendung]

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie:

  • Ein lokaler Computer oder Entwicklungsserver, auf dem Ubuntu 18.04 ausgeführt wird. Ihr Entwicklungscomputer sollte einen Nicht-Root-Benutzer mit Administratorrechten und eine mit "+ ufw +" konfigurierte Firewall haben. Anweisungen zum Einrichten finden Sie in unserem Initial Server Setup with Ubuntu 18.04 Tutorial.

  • https://nodejs.org [Node.js] und npm, die auf Ihrem lokalen Computer oder Entwicklungsserver installiert sind. In diesem Tutorial werden die Versionen Node.js und npm verwendet. Anleitungen zum Installieren von Node.js und npm unter Ubuntu 18.04 finden Sie im Abschnitt * „Installieren mit PPA“ * unter https://www.digitalocean.com/community/tutorials/how-to-install-node- js-on-ubuntu-18-04 # installation-using-a-ppa [Installieren von Node.js unter Ubuntu 18.04].

  • Ruby, rbenv und Rails, die auf Ihrem lokalen Computer oder Entwicklungsserver installiert sind, führen Sie die Schritte 1 bis 4 unter https://www.digitalocean.com/community/tutorials/ aus. Wie installiere ich Ruby auf Schienen mit rbenv auf Ubuntu? 18-04 [Wie installiere ich Ruby auf Schienen mit rbenv auf Ubuntu? 18.04]. Dieses Tutorial verwendet Ruby, rbenv und Rails.

  • Installieren von SQLite gemäß * Schritt 1 * von https://www.digitalocean.com/community/tutorials/anwendung-an-bauen-a-ruby-on-rails-anwendungSo erstellen Sie eine Ruby on Rails-Anwendung]. Dieses Tutorial verwendet SQLite 3.

Schritt 1 - Klonen des Projekts und Installieren von Abhängigkeiten

Unser erster Schritt ist das Klonen des rails-stimulus -Repositorys aus dem DigitalOcean Community GitHub-Konto. . Dieses Repository enthält den Code aus dem Setup, der unter How To Add Stimulus to a beschrieben ist Ruby on Rails-Anwendung, in der beschrieben wurde, wie Sie Stimulus.js zu einem vorhandenen Rails 5-Projekt hinzufügen.

Klonen Sie das Repository in ein Verzeichnis mit dem Namen "++":

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

Navigiere zum ++ Verzeichnis:

cd

Um mit dem Projektcode arbeiten zu können, müssen Sie zuerst die Abhängigkeiten des Projekts installieren, die in seiner Gem-Datei aufgeführt sind. Verwenden Sie den folgenden Befehl, um die erforderlichen Edelsteine ​​zu installieren:

bundle install

Als Nächstes installieren Sie die Abhängigkeiten von https://yarnpkg.com [Yarn]. Da dieses Rails 5-Projekt geändert wurde, um Assets mit Webpack bereitzustellen, werden die JavaScript-Abhängigkeiten jetzt von Yarn verwaltet. Dies bedeutet, dass die in der Datei "+ package.json +" des Projekts aufgeführten Abhängigkeiten installiert und überprüft werden müssen.

Führen Sie den folgenden Befehl aus, um diese Abhängigkeiten zu installieren:

yarn install --check-files

Das + - check-files + Flag überprüft, ob Dateien, die bereits im + node_modules + Verzeichnis installiert sind, entfernt wurden.

Führen Sie als Nächstes Ihre Datenbankmigrationen aus:

rails db:migrate

Nach Abschluss Ihrer Migrationen können Sie die Anwendung testen, um sicherzustellen, dass sie wie erwartet funktioniert. Starten Sie Ihren Server mit dem folgenden Befehl, wenn Sie lokal arbeiten:

rails s

Wenn Sie auf einem Entwicklungsserver arbeiten, können Sie die Anwendung starten mit:

rails s --binding=

Navigieren Sie zu "+ localhost: 3000 " oder " http: //: 3000 +". Sie sehen die folgende Zielseite:

image: https://assets.digitalocean.com/articles/build_rails_app/index_no_style.png [Zielseite der Anwendung]

Um einen neuen Hai zu erstellen, klicken Sie auf den Link * New Shark * am unteren Rand der Seite, um zur Route + sharks / new + zu gelangen. Sie werden aufgefordert, einen Benutzernamen (* sammy ) und ein Passwort ( shark *) einzugeben, dank der https://www.digitalocean.com/community/tutorials/how-to-build-a-ruby-on- rail-application # step-% E2% 80% 94-Authentifizierung hinzufügen [Authentifizierungseinstellungen]. Die + new + Ansicht sieht so aus:

image: https: //assets.digitalocean.com/articles/build_rails_app/new_no_style.png [Neuen Hai erstellen]

Um zu überprüfen, ob die Anwendung funktioniert, können wir einige Demo-Informationen hinzufügen. Geben Sie "Great White" in das Feld * Name * und "Scary" in das Feld * Facts * ein:

image: https: //assets.digitalocean.com/articles/build_rails_app/add_shark_no_style.png [Weißen Hai hinzufügen]

Klicken Sie auf die Schaltfläche * Hai erstellen *, um den Hai zu erstellen:

image: https: //assets.digitalocean.com/articles/build_rails_app/show_no_style.png [Show Shark]

Sie haben nun die notwendigen Abhängigkeiten für Ihr Projekt installiert und dessen Funktionalität getestet. Als Nächstes können Sie einige Änderungen an der Rails-Anwendung vornehmen, sodass Benutzer auf eine Hauptzielseite stoßen, bevor sie zur Hai-Informationsanwendung selbst navigieren.

Schritt 2 - Hinzufügen einer Hauptzielseite und eines Controllers

Die aktuelle Anwendung legt die Stammansicht auf die Hauptinformationsseite für Haie fest, die Ansicht "+ Index ein" für den Controller "+ Haie ein". Während dies funktioniert, um Benutzer zur Hauptanwendung zu bringen, ist es möglicherweise weniger wünschenswert, wenn wir uns dafür entscheiden, die Anwendung in Zukunft zu entwickeln und weitere Funktionen und Features hinzuzufügen. Wir können die Anwendung so reorganisieren, dass die Root-Ansicht auf einen "+ home " - Controller gesetzt wird, der eine " index +" - Ansicht enthält. Von dort können wir auf andere Teile der Anwendung verlinken.

Um den Controller "+ home " zu erstellen, können Sie den Befehl https://guides.rubyonrails.org/command_line.html#rails-generate[`+rails generate + `] mit dem Generator" + controller + `" verwenden. In diesem Fall geben wir an, dass wir eine " index +" - Ansicht für unsere Hauptzielseite wünschen:

rails generate controller home index

Nachdem der Controller erstellt wurde, müssen Sie die Stammansicht in der Datei + config / routes.rb + des Projekts ändern - die Datei, in der die Routendeklarationen der Anwendung angegeben sind - da die Stammansicht derzeit auf die Sharks + index + eingestellt ist Aussicht.

Öffne die Datei:

nano config/routes.rb

Suchen Sie die folgende Zeile:

~ / rails-bootstrap/config/routes.rb

. . .
root 'sharks#index'
. . .

Ändern Sie es wie folgt:

~ / rails-bootstrap/config/routes.rb

. . .
root '#index'
. . .

Dadurch wird die "+ home" -Controller-Ansicht "+ index" als Stamm der Anwendung festgelegt, sodass von dort aus zu anderen Teilen der Anwendung verzweigt werden kann.

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Mit diesen Änderungen können Sie fortfahren und der Anwendung Bootstrap hinzufügen.

Schritt 3 - Installieren von Bootstrap und Hinzufügen benutzerdefinierter Stile

In diesem Schritt fügen Sie Ihrem Projekt Bootstrap zusammen mit den Werkzeugbibliotheken hinzu, die für eine ordnungsgemäße Funktion erforderlich sind. Dazu müssen Bibliotheken und Plug-ins in den Webpack-Einstiegspunkt und die Umgebungsdateien der Anwendung importiert werden. Dazu gehört auch das Erstellen eines benutzerdefinierten Stylesheets im Verzeichnis "+ app / javascript" Ihrer Anwendung, dem Verzeichnis, in dem sich die JavaScript-Elemente des Projekts befinden.

Verwenden Sie zuerst + yarn +, um Bootstrap und die erforderlichen Abhängigkeiten zu installieren:

yarn add bootstrap jquery popper.js

Viele der Bootstrap-Komponenten erfordern JQuery und Popper.js zusammen mit den benutzerdefinierten Bootstrap-Plugins. Mit diesem Befehl wird sichergestellt, dass Sie über die Bibliotheken verfügen du brauchst.

Öffnen Sie als nächstes Ihre Hauptkonfigurationsdatei für das Webpack, + config / webpack / environment.js +, mit + nano + oder Ihrem bevorzugten Editor:

nano config/webpack/environment.js

Fügen Sie in der Datei die Webpack-Bibliothek zusammen mit einer https://webpack.js.org/plugins/provide-plugin/ [+ ProvidePlugin +] hinzu, die Bootstrap mitteilt, wie JQuery- und Popper-Variablen zu interpretieren sind.

Fügen Sie der Datei den folgenden Code hinzu:

~ / rails-bootstrap / config / webpack / environment.js

const { environment } = require('@rails/webpacker')








module.exports = environment

Das "+ ProvidePlugin" hilft uns, die mehrfachen "+ Import" - oder "+ Require" -Anweisungen zu vermeiden, die wir normalerweise bei der Arbeit mit JQuery- oder Popper-Modulen verwenden würden. Wenn dieses Plugin installiert ist, lädt das Webpack automatisch die richtigen Module und verweist die benannten Variablen auf die geladenen Exporte der einzelnen Module.

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Öffnen Sie als Nächstes Ihre wichtigste Webpack-Einstiegspunktdatei, + app / javascript / packs / application.js +:

nano app/javascript/packs/application.js

Fügen Sie in die Datei die folgenden "+ import" -Anweisungen ein, um Bootstrap und die benutzerdefinierte "+ css" -Stildatei zu importieren, die Sie als Nächstes erstellen werden:

~ / Rails-Bootstrap / App / Javascript / Packs / application.js

. . .
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"



. . .

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Erstellen Sie als nächstes ein "+ stylesheets +" - Verzeichnis für Ihr Anwendungs-Stylesheet:

mkdir app/javascript/stylesheets

Öffnen Sie die benutzerdefinierte Stildatei:

nano app/javascript/stylesheets/application.scss

Dies ist eine + scss + -Datei, die Sass anstelle von CSS verwendet. Sass, oder Syntactically Awesome Style Sheets, ist eine CSS-Erweiterungssprache, mit der Entwickler Programmierlogik und Konventionen wie freigegebene Variablen in Stilregeln integrieren können.

Fügen Sie der Datei die folgenden Anweisungen hinzu, um die benutzerdefinierten Bootstrap-Stile "+ scss +" und Google-Schriftarten für das Projekt zu importieren:

~ / rails-bootstrap / app / javascript / stylesheets / application.scss

@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

Fügen Sie als Nächstes die folgenden benutzerdefinierten Variablendefinitionen und -stile für die Anwendung hinzu:

~ / rails-bootstrap / app / javascript / stylesheets / application.scss

. . .
$white: white;
$black: black;

.navbar {
       margin-bottom: 0;
       background: $black;
}
body {
       background: $black;
       color: $white;
       font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
       font-weight: bold;
}
p {
       font-size: 16px;
       color: $white;
}
a:visited {
       color: $black;
}
.jumbotron {
       background: #0048CD;
       color: $white;
       text-align: center;
       p {
               color: $white;
               font-size: 26px;
       }
}
.link {
       color: $white;
}
.btn-primary {
       color: $white;
       border-color: $white;
       margin-bottom: 5px;
}
.btn-sm {
       background-color: $white;
       display: inline-block;
}
img,
video,
audio {
       margin-top: 20px;
       max-width: 80%;
}
caption {

       float: left;
       clear: both;

}

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Sie haben Ihrem Projekt Bootstrap sowie einige benutzerdefinierte Stile hinzugefügt. Jetzt können Sie mit der Integration von Bootstrap-Layoutkonventionen und -Komponenten in Ihre Anwendungsdateien fortfahren.

Schritt 4 - Ändern des Anwendungslayouts

Unser erster Schritt bei der Integration von Bootstrap-Konventionen und -Komponenten in das Projekt besteht darin, sie zur Hauptanwendungslayoutdatei hinzuzufügen. Diese Datei legt die Elemente fest, die in jeder gerenderten Ansichtsvorlage für die Anwendung enthalten sind. In dieser Datei stellen wir sicher, dass unser Webpack-Einstiegspunkt definiert ist, und fügen Verweise auf gemeinsame Navigationsheader (https://guides.rubyonrails.org/layouts_and_rendering.html#using-partials[partial) sowie eine entsprechende Logik hinzu Gestatten Sie uns, ein Layout für die Ansichten der Hai-Anwendung zu rendern.

Öffnen Sie zunächst "+ app / views / layouts / application.html.erb +", die Hauptlayoutdatei Ihrer Anwendung:

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

Derzeit sieht die Datei folgendermaßen aus:

~ / bars-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
 <head>
   <title>Sharkapp</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>

   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
 </head>

 <body>
   <%= yield %>
 </body>
</html>

Der Code rendert Dinge wie Fälschungsschutzparameter und Token für Cross-Site-Anforderungen für dynamische Formulare, eine https://api.rubyonrails.org/ v5.2.3 / classes / ActionView / Helpers / CspHelper.html [csp-nonce] für sitzungsbezogene Nonces, die Inline-Skript-Tags sowie die Stylesheets und JavaScript-Elemente der Anwendung zulassen. Beachten Sie, dass unser Code kein "+ javascript_link_tag " enthält, sondern ein " javascript__tag ", das Rails anweist, unseren wichtigsten Webpack-Einstiegspunkt unter " app / javascript / packs / application.js +" zu laden.

Im + <body> + der Seite weist eine + yield + - Anweisung Rails an, den Inhalt aus einer Ansicht einzufügen. In diesem Fall hätte dies den Inhalt dieser Ansicht eingefügt, da unser Anwendungsstamm zuvor der Hai-Ansicht "+ index " zugeordnet war. Da wir jedoch die Stammansicht geändert haben, wird hierdurch Inhalt aus der Ansicht " home " des Controllers " index +" eingefügt.

Dies wirft einige Fragen auf: Soll die Startansicht für die Anwendung mit der Ansicht der Benutzer für die Hai-Anwendung übereinstimmen? Und wenn wir wollen, dass diese Ansichten etwas anders sind, wie setzen wir das um?

Im ersten Schritt wird entschieden, was in allen Anwendungsansichten repliziert werden soll. Wir können alles, was unter dem + <header> + enthalten ist, an Ort und Stelle lassen, da es hauptsächlich Tags und Metadaten sind, die auf allen Anwendungsseiten vorhanden sein sollen. In diesem Abschnitt können wir jedoch auch einige Dinge hinzufügen, die alle unsere Anwendungsansichten anpassen.

Fügen Sie zunächst das von Bootstrap empfohlene Meta-Tag + viewport + für das Reaktionsverhalten hinzu:

~ / bars-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
 <head>

   <title>Sharkapp</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
. . .

Ersetzen Sie als Nächstes den vorhandenen "+ title +" - Code durch Code, der den Titel der Anwendung dynamischer darstellt:

~ / bars-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
. . .

Fügen Sie ein + <meta> + -Tag hinzu, um eine Beschreibung der Site aufzunehmen:

~ / bars-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>

   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
. . .

Mit diesem Code können Sie dem Layout eine teilweise Navigation hinzufügen. Im Idealfall sollte jede Seite unserer Anwendung eine navbar -Komponente am oberen Rand der Seite enthalten, damit Benutzer problemlos von einem Teil der Website zu navigieren können Ein weiterer.

Fügen Sie unter dem + <body> + -Tag ein + <header> + -Tag und die folgende render-Anweisung hinzu:

~ / bars-bootstrap / app / views / layouts / application.html.erb

 <body>




   <%= yield %>
. . .

Mit diesem + <header> + Tag können Sie Ihren Seiteninhalt so organisieren, dass die Navigationsleiste vom Hauptseiteninhalt getrennt wird.

Schließlich können Sie ein "+ <main> " - Elementtag und eine Logik hinzufügen, um zu steuern, welche Ansicht und damit welches Layout die Anwendung rendert. Dieser Code verwendet die https://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-content_for [` content_for +` -Methode], um auf eine Inhaltskennung zu verweisen, die wir mit unserem Sharks-Layout in verknüpfen der nächste Schritt.

Ersetzen Sie die vorhandene Anweisung + yield + durch den folgenden Inhalt:

~ / bars-bootstrap / app / views / layouts / application.html.erb

. . .
 <body>
   <header>
     <%= render 'layouts/navigation' %>
   </header>



 </body>
</html>

Wenn nun der Block ": content +" gesetzt ist, liefert die Anwendung das zugehörige Layout. Andernfalls liefert es dank des ternären Operators implizit die Ansicht, die dem Controller " home +" zugeordnet ist.

Nachdem Sie diese Änderungen vorgenommen haben, speichern und schließen Sie die Datei.

Mit dem anwendungsweiten Layout-Set können Sie mit dem Erstellen des freigegebenen Navigationsleisten-Teils und des Hai-Layouts für Ihre Hai-Ansichten fortfahren.

Schritt 5 - Erstellen der freigegebenen partiellen und spezifischen Layouts

Zusätzlich zu den Änderungen, die Sie im vorherigen Schritt am Anwendungslayout vorgenommen haben, möchten Sie den freigegebenen Teil der Navigationsleiste, das Haifischlayout, auf das Sie in "+ app / views / layouts / application.html.erb " verwiesen haben, und a erstellen Ansicht für die Anwendungszielseite. Sie können den aktuellen " link_to +" - Elementen Ihrer Anwendung auch Bootstrap-Stile hinzufügen, um die Vorteile der integrierten Bootstrap-Stile zu nutzen.

Öffnen Sie zunächst eine Datei für den freigegebenen Teil der Navigationsleiste:

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

Fügen Sie der Datei den folgenden Code hinzu, um die Navigationsleiste zu erstellen:

~ / bars-bootstrap / app / views / layouts / _navigation.html.erb

<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
   <div class="container">
       <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
       </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav mr-auto">
           <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
           <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>

               </li>
           </ul>
       </div>
   </div>
</nav>

Diese Navigationsleiste erstellt einen Link für das Anwendungsstammverzeichnis mit der Methode https://api.rubyonrails.org/v5.2.3/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to [+ link_to +], die zugeordnet wird zum Anwendungsstammpfad. Die Navigationsleiste enthält außerdem zwei zusätzliche Links: einen zum Pfad "+ Home ", der der Indexansicht des " Home " - Controllers entspricht, und einen weiteren zum Pfad der Hai-Anwendung, der dem " Hai +" + entspricht Index + `Ansicht.

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Öffnen Sie als nächstes eine Datei im Verzeichnis + layouts + für das Sharks-Layout:

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

Bevor wir Layout-Features hinzufügen, müssen wir sicherstellen, dass der Inhalt des Layouts als "+: content +" - Block festgelegt ist, auf den wir im Hauptanwendungslayout verweisen. Fügen Sie der Datei die folgenden Zeilen hinzu, um den Block zu erstellen:

~ / rails-bootstrap / app / views / layouts / sharks.html.erb

<% content_for :content do %>
<% end %>

Der Code, den wir in diesem Block schreiben werden, wird innerhalb des Blocks ": content +" in der Datei " app / views / layouts / application.html.erb +" gerendert, wenn eine Hai-Ansicht von einem Controller angefordert wird.

Fügen Sie im Block selbst den folgenden Code hinzu, um eine jumbotron -Komponente und zwei https://getbootstrap.com/docs/4.3/layout/ zu erstellen. Übersicht / # Container [Container]:

~ / rails-bootstrap / app / views / layouts / sharks.html.erb

<% content_for :content do %>




















   <% end %>

Der erste Container enthält eine "+ yield " - Anweisung, mit der der Inhalt aus den Ansichten des " shark +" -Controllers eingefügt wird, während der zweite Container daran erinnert, dass bestimmte Haie immer freundlich und einladend sind.

Fügen Sie am Ende der Datei die folgende Anweisung + render + hinzu, um das Anwendungslayout zu rendern:

~ / rails-bootstrap / app / views / layouts / sharks.html.erb

. . .
           </div>
       </div>
   </div>
   <% end %>

Dieses Sharks-Layout liefert den Inhalt für den benannten "+: content +" - Block im Hauptanwendungslayout. Anschließend wird das Anwendungslayout selbst gerendert, um sicherzustellen, dass unsere gerenderten Anwendungsseiten auf anwendungsweiter Ebene über alles verfügen, was wir möchten.

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Wir haben jetzt unsere Teilansichten und Layouts eingerichtet, haben jedoch noch nicht die Ansicht erstellt, die Benutzer sehen, wenn sie zur Anwendungshomepage navigieren, der Ansicht "+ home " des Controllers " index +".

Öffne diese Datei jetzt:

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

Die Struktur dieser Ansicht entspricht dem Layout, das wir für Hai-Ansichten definiert haben, mit einer Jumbotron-Hauptkomponente und zwei Containern. Ersetzen Sie den Kesselschildcode in der Datei durch den folgenden:

~ / rail-bootstrap / app / views / home / index.html.erb

<div class="jumbotron">
   <div class="container">
       <h1>Want to Learn About Sharks?</h1>
       <p>Are you ready to learn about sharks?</p>
       <br>
       <p>
           <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
       </p>
   </div>
</div>
<div class="container">
   <div class="row">
       <div class="col-lg-6">
           <h3>Not all sharks are alike</h3>
           <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
           </p>
       </div>
       <div class="col-lg-6">
           <h3>Sharks are ancient</h3>
           <p>There is evidence to suggest that sharks lived up to 400 million years ago.
           </p>
       </div>
   </div>
</div>

Wenn Sie nun auf der Startseite der Anwendung landen, haben Sie eine übersichtliche Möglichkeit, durch Klicken auf die Schaltfläche * Hai-Informationen abrufen * zum Hai-Bereich der Anwendung zu navigieren. Diese Schaltfläche zeigt auf den "+ shark_path " - der Helfer, der den Routen zugeordnet ist, die dem " sharks +" - Controller zugeordnet sind.

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Unsere letzte Aufgabe wird es sein, einige der "+ link_to" -Methoden in Ihrer Anwendung in Schaltflächen umzuwandeln, die wir mit Bootstrap stylen können. Wir werden auch eine Möglichkeit hinzufügen, von der Hai-Ansicht + index + zurück zur Homepage zu navigieren.

Öffne die Haie + index + Ansicht um zu starten:

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

Suchen Sie am Ende der Datei die Methode "+ link_to", die zur Ansicht "+ new" führt:

~ / rail-bootstrap / app / views / sharks / index.html.erb

. . .
<%= link_to 'New Shark', new_shark_path %>

Ändern Sie den Code, um diesen Link in eine Schaltfläche zu verwandeln, die die Klasse "" btn btn-primary btn-sm "" von Bootstrap verwendet:

~ / rail-bootstrap / app / views / sharks / index.html.erb

. . .
<%= link_to 'New Shark', new_shark_path %>

Fügen Sie als Nächstes einen Link zur Anwendungshomepage hinzu:

~ / rail-bootstrap / app / views / sharks / index.html.erb

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %>

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Öffnen Sie als nächstes die Ansicht + new +:

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

Fügen Sie die Schaltflächenstile der Methode "+ link_to +" am Ende der Datei hinzu:

~ / Rails-Bootstrap / App / Views / Sharks / new.html.erb

. . .
<%= link_to 'Back', sharks_path %>

Speichern und schließen Sie die Datei.

Öffne die + edit + Ansicht:

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

Gegenwärtig sind die + link_to + Methoden folgendermaßen angeordnet:

~ / rail-bootstrap / app / views / sharks / edit.html.erb

. . .
<%= link_to 'Show', @shark %> |
<%= link_to 'Back', sharks_path %>

Ändern Sie ihre Anordnung auf der Seite und fügen Sie die Schaltflächenstile hinzu, sodass der Code folgendermaßen aussieht:

~ / rail-bootstrap / app / views / sharks / edit.html.erb

. . .
<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

Speichern und schließen Sie die Datei.

Öffnen Sie zum Schluss die Ansicht "+ show +":

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

Suchen Sie die folgenden + link_to + Methoden:

~ / rail-bootstrap / app / views / sharks / show.html.erb

. . .
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>
. . .

Ändern Sie sie so, dass sie so aussehen:

~ / rail-bootstrap / app / views / sharks / show.html.erb

. . .
<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>
. . .

Speichern und schließen Sie die Datei.

Jetzt können Sie die Anwendung testen.

Starten Sie Ihren Server mit dem entsprechenden Befehl:

  • + Schienen s +, wenn Sie lokal arbeiten

  • + Rails s --binding = +, wenn Sie mit einem Entwicklungsserver arbeiten

Navigieren Sie zu "+ localhost: 3000 " oder " http: //: 3000 +", je nachdem, ob Sie lokal oder auf einem Server arbeiten. Sie sehen die folgende Zielseite:

image: https://assets.digitalocean.com/articles/docker_node_image/landing_page.png [Landing Page der Anwendung]

Klicken Sie auf * Get Shark Info *. Sie sehen die folgende Seite:

image: https://assets.digitalocean.com/articles/rails_bootstrap/rails-bootstrap-sharks-index.png [Sharks Index Page]

Sie können Ihren Hai jetzt mit den unter https://www.digitalocean.com/community/tutorials/how-to-add-stimulus-to-a-ruby-on-rails- beschriebenen Methoden bearbeiten oder Fakten und Beiträge hinzufügen. application [Hinzufügen von Stimulus zu einer Ruby on Rails-Anwendung]. Sie können dem Gespräch auch neue Haie hinzufügen.

Wenn Sie zu anderen Hai-Ansichten navigieren, werden Sie feststellen, dass das Hai-Layout immer enthalten ist:

image: https://assets.digitalocean.com/articles/rails_bootstrap/rails-bootstrap-sharks-show.png [Sharks Show Page]

Sie haben jetzt Bootstrap in Ihre Rails-Anwendung integriert. Von hier aus können Sie fortfahren, indem Sie Ihrer Anwendung neue Stile und Komponenten hinzufügen, um sie für Benutzer ansprechender zu gestalten.

Fazit

Sie haben jetzt Bootstrap in Ihre Rails-Anwendung integriert, mit dem Sie reaktionsschnelle und optisch ansprechende Stile erstellen können, um die Benutzererfahrung mit dem Projekt zu verbessern.

Weitere Informationen zu den Bootstrap-Funktionen und ihren Angeboten finden Sie in der Bootstrap documentation. Sie können sich auch die documentation for Sass ansehen, um zu erfahren, wie Sie damit Ihre CSS-Stile und -Logik verbessern und erweitern können.

Wenn Sie wissen möchten, wie sich Bootstrap in andere Frameworks integriert, lesen Sie bitte https://www.digitalocean.com/community/tutorials/how-to-build-a-weather-app-with-angular-bootstrap-and-the -apixu-api [So erstellen Sie eine Wetter-App mit Angular, Bootstrap und der APIXU-API]. Weitere Informationen zur Integration in Rails and React finden Sie unter https://www.digitalocean.com/community/tutorials/how-to-set-up-a-ruby-on-rails-project-with-a-. react-frontend [So richten Sie ein Ruby on Rails-Projekt mit einem React-Frontend ein].

Related