[RUBY] Présentation de Rails6 + Bootswatch / Honoka
Merci beaucoup pour Bootstrap. Même moi, qui n'ai aucun sens du design, je peux facilement créer un site qui peut être vu de manière raisonnable. Merci beaucoup.
Cependant, je me sentais comme "c'est vraiment ...", alors j'ai présenté Bootswatch à Rails. J'ai aussi essayé de présenter Honoka, qui a la réputation de "beau japonais".
environnement
Ruby 2.7.2 Rails 6.0.3.4 Yarn 1.22.10 Webpack doit être installé et la page d'accueil peut être affichée.
Création de la première page
Créez une page d'accueil pour préparer l'installation de Bootstrap.
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">Bienvenue! Pour tester l'application</h1>
<hr class="my-4">
<p>Ruby on Rails +Modèle Bootstrap</p>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
<i class="far fa-window-maximize"></i>
Modal ouvert
</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">Titre modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Je vous remercie
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</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.Pour vérifier si scss est chargé
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;
}
Puisque Bootstrap n'est pas installé, il s'affiche dans un état cassé.
Présentation de Bootstrap
Installez Bootstrap avec Yarn.
$ yarn add [email protected] jquery popper.js
Appliquez le bootstrap.
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';
Notez que si vous supprimez stylesheet_link_tag ici, app / assets / stylesheets / cutstom.scss ne sera pas chargé. Ajoutez deux lignes de code. Veuillez charger ci-dessus 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' %>
Chargez Bootstrap sur la première ligne de custom.scss. Vous pourrez utiliser des codes couleur tels que $ blue.
app/assets/stylesheets/custom.scss
@import "../../../node_modules/bootstrap/scss/bootstrap";
Ajout d'un code pour appliquer Bootstrap même après le téléchargement sur Heroku
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
Vous avez installé Bootstrap4.
Présentation de Bootswatch
Bootswatch est une collection de thèmes gratuits compatibles avec Bootstrap.
https://bootswatch.com/
La méthode d'installation est presque la même que la procédure précédente.
Installez Bootstrap avec Yarn.
$ yarn add [email protected]
Appliquez bootswatch (Minty).
app/javascripts/src/application.scss
+ @import '~bootswatch/dist/minty/variables';
@import '~bootstrap/scss/bootstrap';
+ @import '~bootswatch/dist/minty/bootswatch';
Ceci termine l'installation de Bootswatch. Le Bootstrap familier a été transformé en un merveilleux. Essayez d'autres thèmes en plus de Minty.
Honoka
Maintenant que nous avons le talent, présentons Honoka. Thème Bootstrap avec de beaux japonais.
https://honokak.osaka/
Installer avec du fil
$ yarn add bootstrap-honoka
Appliquer Honoka. (Malheureusement, il n'a pas pu être appliqué en même temps que Minty)
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';
Il a été confirmé qu'il y avait un léger changement, comme une ligne blanche sous la liaison Navibar.
J'ai eu du mal à comprendre comment fonctionne Webpack, mais l'installation de Bootswatch / Honoka est terminée. J'espère que cela aide quelqu'un.
référence
https://qiita.com/taKassi/items/56172d140d7208230e32
Recommended Posts