关于Rails 6, Bootstrap 5的教程

DebugUsery
128 阅读2分钟

前提条件

以下是我在本教程中使用的工具。较旧的版本可能也可以，但我没有尝试。

$> ruby --version  
=> 3.0.0  
$> rails --version  
=> 6.1.3  
$> node --version  
=> 14.15.1  
$> yarn --version  
=> 1.22.10

1.创建新的Rails应用程序

$> rails new myapp && cd myapp

现在等一下......好吧！你现在有一个新的默认Rails应用程序。

2.建立一个欢迎页面

在app/controllers/welcome_controller.rb中创建一个控制器，如下所示

# inside app/controllers/welcome_controller.rb  
class WelcomeController < ApplicationController  
end

在config/routes.rb中配置一个默认路由，如下所示

# inside config/routes.rb  
Rails.application.routes.draw do  
  get "welcome/index"  
  root to: "welcome#index"  
end

现在我们要把这个简单的例子变得足够复杂😬，以确保所有的CSS、JavaScript组件都能工作。

不要担心，只要把下面的代码复制/粘贴到app/views/welcome/index.html.erb中即可。

<!-- inside app/views/welcome/index.html.erb -->  
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

<main>
  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light">Album example</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
        </p>
      </div>
    </div>
  </section>
</main>

通过运行确保该应用程序工作

$/myapp> bin/rails server

并在你的浏览器上打开localhost:3000

Raw image, Bootstrap v5 is not yet installed

原始图片，Bootstrap v5还没有安装

好的，到目前为止没有风格。

3.选择一个前端管理器

由于历史原因，Rails 6有两个不同的工具来管理前端资产（CSS、JavaScript、图片等）。旧的名为 "Sprokets"，在Rails范围之外使用不多。新的工具被命名为 "Webpacker"，它依赖于成熟的、广泛使用的Webpack。因此，我不建议新项目再使用Sprockets，特别是自webpacker的第5版以来。它要稳定得多，而且可以处理多个包。

确保你的Gemfile至少包括webpacker的第5个版本。

gem 'webpacker', '~> 5.0'

如果没有，就按上面的方法包括第5版，然后运行 "bundle install"。

现在我们希望webpacker能够处理我们所有的资产，而不仅仅是JavaScript。将app/javascript 改名为app/frontend ，像这样。

$/myapp> mv app/javascript app/frontend

在webpacker.yml中，警告webpack，我们改变了assets文件夹的名称。

# Inside webpacker.yml, first lines  
default: &default  
source_path: app/frontend # Change here

4.安装Bootstrap v5

添加最新的Bootstrap版本，以及PopperJs（一个必须的依赖），如下所示。

$/myapp> yarn add bootstrap@5.0.0-beta2  
$/myapp> yarn add @popperjs/core@2.0.0-alpha.1

5.将Bootstrap注入到你的应用程序中

5a) 注入Boostrap的JS文件

创建JS文件：app/frontend/js/bootstrap_js_files.js，并导入Bootstrap相关的JS文件，如下所示。

$/myapp> mkdir app/frontend/js && touch app/frontend/js/bootstrap_js_files.js  

// inside app/frontend/js/bootstrap_js_files.js  
  
// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip'

注意，我们并没有导入所有Bootstrap的JS文件，我们只导入项目所需的文件（用于导航条）。

现在把这个文件导入主JS文件app/frontend/packs/application.js中。

// inside app/frontend/packs/application.js  
  
// Add this line  
import '../js/bootstrap_js_files.js'

5b) 注入Bootstrap的样式

创建主CSS文件

$/myapp> touch app/frontend/packs/application.scss

在里面，导入Bootstrap

// inside app/frontend/packs/application.scss  
  
// Just a quick ugly style to see if our CSS works  
h1 {  
  text-decoration: underline;  
}  
  
// Import Bootstrap v5  
@import "~bootstrap/scss/bootstrap";

现在告诉Rails你的主CSS文件在哪里，在app/views/layouts/application.html.erb里面。

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

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

5c) 检查所有工作

停止你的Rails服务器。我们已经改变了很多前端资产，所以在重启Rails服务器之前，我们要做一些清理/重新编译的工作。

$/myapp> bin/rails assets:clobber  
$/myapp> bin/rails webpacker:compile  
$/myapp> bin/rails server

并在localhost:3000处打开浏览器。

  • 如果风格看起来像Bootstrap，那就好了 !我们对Bootstrap的CSS文件的导入已经成功。
  • 如果点击汉堡包菜单意味着切换导航条，那就好了！我们对Bootstrap的CSS文件进行了导入。我们对Bootstrap的JS文件的导入已经成功了。

it works!

它成功了!

6 更多内容

鉴于得到这个结果所涉及的步骤之多，今天就到此为止。不过，我想补充的是:

  • 如何复制/粘贴SCSS文件以获得深度的Bootstrap定制。
  • 如何管理图片
  • 如何管理字体
  • 如何优化资产
  • 可能还有其他我现在没有想到的东西。敬请期待
avatar
文章
阅读
粉丝