Vielen Dank für Bootstrap. Sogar ich, der keinen Sinn für Design hat, kann leicht eine Site erstellen, die vernünftig angezeigt werden kann. Vielen Dank.

Ich hatte jedoch das Gefühl, "es ist wirklich ...", also stellte ich Bootswatch Rails vor. Ich habe auch versucht, Honoka vorzustellen, das für "schöne Japaner" bekannt ist.

Umgebung

Ruby 2.7.2 Rails 6.0.3.4 Yarn 1.22.10 Webpack muss installiert sein und die Startseite kann angezeigt werden.

Erstellen der oberen Seite

Erstellen Sie eine Startseite, um die Installation von Bootstrap vorzubereiten.

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


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

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

  <body>
  <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
    </div>
  <%= render 'layouts/footer' %>
  </body>
</html>

`app/views/static_pages/top.html.erb`


<!--<div class="container">-->
  <div class="jumbotron m-3">
    <h1 class="display-4 red">Herzlich willkommen! App testen</h1>
    <hr class="my-4">
    <p>Ruby on Rails +Bootstrap-Vorlage</p>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
      <i class="far fa-window-maximize"></i>
Modal öffnen
    </button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modaler Titel</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
Vielen Dank
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">schließen</button>
        </div>
      </div>
    </div>
  </div>
<!--</div>-->

`app/views/layouts/_header.html.erb`


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

`app/views/footer.html.erb`


<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

`app/assets/stylesheets/cutstom.scss`


 .red { // custom.Um zu überprüfen, ob scss geladen ist
   font-size: 2rem;
   color: red;
 }
 

 /* Sticky footer styles
-------------------------------------------------- */
 html {
   position: relative;
   min-height: 100%;
 }
 body {
   /* Margin bottom by footer height */
   margin-bottom: 60px;
 }
 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
   background-color: #f5f5f5;
 }


 /* Custom page CSS
 -------------------------------------------------- */
 /* Not required for template or sticky footer method. */

 .container {
   width: auto;
   max-width: 680px;
   padding: 0 15px;
 }
 .container .text-muted {
   margin: 20px 0;
 }

Da Bootstrap nicht installiert ist, wird es in einem fehlerhaften Zustand angezeigt.

Einführung in Bootstrap

Installieren Sie Bootstrap mit Garn.

$ yarn add [email protected] jquery popper.js

Wenden Sie den Bootstrap an.

`app/javascripts/packs/application.js`


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
+ import 'bootstrap'
+ import '../src/application.scss'

`app/javascripts/src/application.scss`


@import '~bootstrap/scss/bootstrap';

Beachten Sie, dass App / Assets / Stylesheets / Cutstom.scss nicht geladen wird, wenn Sie hier Stylesheet_link_tag entfernen. Fügen Sie zwei Codezeilen hinzu. Bitte laden Sie über stylesheet_link_tag.

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


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

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

Laden Sie Bootstrap in die erste Zeile von custom.scss. Sie können Farbcodes wie $ blue verwenden.

`app/assets/stylesheets/custom.scss`


@import "../../../node_modules/bootstrap/scss/bootstrap";

Code hinzugefügt, um Bootstrap auch nach dem Hochladen auf Heroku anzuwenden

`config/webpack/environment.js`


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

    const webpack = require('webpack')

    environment.plugins.append('Provide', new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    }))
module.exports = environment

Sie haben Bootstrap4 installiert.

Bootswatch vorstellen

Bootswatch ist eine Sammlung kostenloser Themen, die mit Bootstrap kompatibel sind.

https://bootswatch.com/

Die Installationsmethode ist fast dieselbe wie beim vorherigen Verfahren.

Installieren Sie Bootstrap mit Garn.

$ yarn add [email protected]

Stiefeluhr (Minty) auftragen.

`app/javascripts/src/application.scss`


+ @import '~bootswatch/dist/minty/variables';
@import '~bootstrap/scss/bootstrap';
+ @import '~bootswatch/dist/minty/bootswatch';

Damit ist die Bootswatch-Installation abgeschlossen. Der bekannte Bootstrap wurde in einen wunderbaren verwandelt. Probieren Sie neben Minty noch andere Themen aus.

Honoka

Nachdem wir das Talent haben, wollen wir Honoka vorstellen. Bootstrap-Thema mit schönen Japanern.

https://honokak.osaka/

Mit Garn installieren

$ yarn add bootstrap-honoka

Wenden Sie Honoka an. (Leider konnte es nicht gleichzeitig mit Minty angewendet werden)

`app/javascripts/src/application.scss`


//@import '~bootswatch/dist/minty/variables';
//@import '~bootstrap/scss/bootstrap';
//@import '~bootswatch/dist/minty/bootswatch';
@import '~bootstrap-honoka/dist/css/bootstrap';

Es wurde bestätigt, dass es eine geringfügige Änderung gab, z. B. eine weiße Linie unter dem Navibar-Link.

Es fiel mir schwer zu verstehen, wie Webpack funktioniert, aber die Installation von Bootswatch / Honoka ist abgeschlossen. Ich hoffe es hilft jemandem.

Referenz

https://qiita.com/taKassi/items/56172d140d7208230e32

[RUBY] Wir stellen vor: Rails6 + Bootswatch / Honoka

Umgebung

Erstellen der oberen Seite

app/views/layouts/application.html.erb

app/views/static_pages/top.html.erb

app/views/layouts/_header.html.erb

app/views/footer.html.erb

app/assets/stylesheets/cutstom.scss

Einführung in Bootstrap

app/javascripts/packs/application.js

app/javascripts/src/application.scss

app/views/layouts/application.html.erb

app/assets/stylesheets/custom.scss

config/webpack/environment.js

Bootswatch vorstellen

app/javascripts/src/application.scss

app/javascripts/src/application.scss

Referenz

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

`app/views/static_pages/top.html.erb`

`app/views/layouts/_header.html.erb`

`app/views/footer.html.erb`

`app/assets/stylesheets/cutstom.scss`

`app/javascripts/packs/application.js`

`app/javascripts/src/application.scss`

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

`app/assets/stylesheets/custom.scss`

`config/webpack/environment.js`

`app/javascripts/src/application.scss`

`app/javascripts/src/application.scss`