前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Rails 7 中引入 Bootstrap 5

Rails 7 中引入 Bootstrap 5

原创
作者头像
RiemannHypothesis
发布2023-02-20 19:25:02
3K0
发布2023-02-20 19:25:02
举报
文章被收录于专栏:Elixir

Rails is a full-stack framework.  It ships with all the tools needed to build amazing web apps on both the front and back end.

在 Rails 6 中有两种不同的工具可以用来管理前端的 CSS、JavaScript 以及 images 等资源,分别是 “Sprockets” 和 “Webpacker”,“Sprockets” 除了 Rails 应用外很少使用,但是 “Webpacker” 不仅在 Rails 中,在其他应用框架中也被广泛的使用。

在 Rails 7 中静态资源的管理已经从 “Webpacker” 改为了 “Import Maps”,用来简化基于 JavaScript 的工具和包管理器 Webpack、Yarn 或者 npm 的使用。

Rails 7 实现了一个愿景,即一种真正的全栈 Web 开发方式,可以同时应对前端和后端的挑战。

Rails 7.0: Fulffilling a vision

本文将使用 Ruby 3.0 和 Rails 7.0 环境,创建 Rails 7 应用,并在该应用中引入 Bootstrap 5。

image.png
image.png

第一种方式:仅引入 Bootstrap

创建 Rails 项目

首先使用 rails new 命令创建 Rails 项目:

image.png
image.png
image.png
image.png

如果创建项目的时间过长,可以考虑更换 Ruby 的 Gem 源,使用 RubyChina 的源:

代码语言:shell
复制
# 删除国外源,使用 RubyChina 的源

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
安装 importmap

项目创建完成后进入项目目录,首先检查config目录下是否包含 “importmap.rb” 文件,如果没有可以通过 rails importmap 命令来安装:

代码语言:shell
复制
cat config/importmap.rb



# 安装 importmap
rails importmap:install
image.png
image.png
添加 Bootstrap 5
代码语言:shell
复制
# 在项目目录下执行 importmap 命令,安装 Bootstrap 5

bin/importmap pin bootstrap
image.png
image.png

该命令执行后会在 config/importmap.rb 中添加命令行中打印出的内容。

在安装 importmap 是创建的 app/javascript/application.js 文件中导入 ”bootstrap“:

代码语言:javascript
复制
// ...



// 新增内容

import 'bootstrap'



// ...
image.png
image.png
安装 Bootstrap 5 Ruby Gem

在 Gemfile 中新增如下内容:

代码语言:txt
复制
# Gemfile

# ...

gem 'bootstrap', '~> 5.2.3'

# ...
image.png
image.png

保存后执行 bundle install 命令安装依赖。

application.scss 中导入 bootstrap

app/assets/stylesheets/application.css 重命名为app/assets/stylesheets/application.scss

代码语言:shell
复制
# 更改文件后缀为 scss

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

增加内容:

代码语言:txt
复制
// app/assets/stylesheets/application.scss

// ...



@import "bootstrap";



// ...
测试 Bootstrap

使用 rails g controller 命令创建一个 home_controller 以及 index 函数:

image.png
image.png

参考 Bootstrap Navabar 的样式修改 app/views/layouts/application.html.erb 页面

代码语言:html
复制
<!DOCTYPE html>

<html>

  <head>

    <title>RailsBootstrap</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <%= csrf\_meta\_tags %>

    <%= csp\_meta\_tag %>



    <%= stylesheet\_link\_tag "application", "data-turbo-track": "reload" %>

    <%= javascript\_importmap\_tags %>

  </head>



  <body>

    <header>

      <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">

        <div class="container-fluid">

          <a class="navbar-brand" href="#">Top navbar</a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarCollapse">

            <ul class="navbar-nav me-auto mb-2 mb-md-0">

              <li class="nav-item">

                <a class="nav-link active" aria-current="page" href="#">Home</a>

              </li>

              <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

              </li>

              <li class="nav-item">

                <a class="nav-link disabled">Disabled</a>

              </li>

            </ul>

            <form class="d-flex" role="search">

              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

              <button class="btn btn-outline-success" type="submit">Search</button>

            </form>

          </div>

        </div>

      </nav>

    </header>

    <%= yield %>

  </body>

</html>

修改 app/views/home/index.html.erb 页面:

代码语言:html
复制
<div class="bg-light p-5 rounded">

  <h1>Navbar example</h1>

  <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>

  <a class="btn btn-lg btn-primary" href="/docs/components/navbar/" role="button">View navbar docs &raquo;</a>

</div>

通过 rails s 命令启动 Rails 应用,在浏览器中输入 localhost:3000/home/index 查看 index 页面

image.png
image.png

出现该页面说明引入的 Bootstrap 已经生效。

第二种方式:引入 Bootstrap 和 jQuery

添加 Bootstrap 和 jQuery 的 Ruby Gem

创建一个新的项目 rails-bootstrap-jquery,之后再项目的 Gemfile 中添加如下 Ruby Gems:

代码语言:txt
复制
gem "sassc-rails"

gem "bootstrap", "~> 5.2.3"

gem "jquery-rails"

执行 bundle install 命令。

接着执行如下命令,修改application.css 后缀,创建 custom.css 以及 my_script.js 文件:

代码语言:txt
复制
# 修改 application.css 为 application.scss

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

# 创建 custom.scss

touch app/assets/stylesheets/custom.scss

# 创建 my\_script.js

touch app/javascript/my\_script.js

在 application.scss 中添加如下内容:

代码语言:txt
复制
@import "bootstrap";

@import "custom";

config/environments/development.rb 文件中添加如下内容:

代码语言:txt
复制
config.sass.inline\_source\_maps = true
image.png
image.png

删除 tmp 文件夹下的缓存:

代码语言:txt
复制
$ rm -r tmp/cache/assets

config/importmap.rb 文件中添加如下内容:

代码语言:txt
复制
# From "jquery-rails" gem

pin "jquery", to: "jquery3.min.js", preload: true

pin "jquery\_ujs", to: "jquery\_ujs.js", preload: true



# From "bootstrap" gem

pin "bootstrap", to: "bootstrap.min.js", preload: true

pin "@popperjs/core", to: "popper.js", preload: true



# Custom JS

pin "my\_script", to: "my\_script.js", preload: true
image.png
image.png

config/initializers/assets.rb 中添加内容:

代码语言:txt
复制
Rails.application.config.assets.precompile += %w( jquery3.min.js jquery\_ujs.js bootstrap.min.js popper.js )
image.png
image.png

app/javascript/application.js 中使用 import 关键字导入:

代码语言:txt
复制
import "jquery";

import "jquery\_ujs";

import "@popperjs/core";

import "bootstrap";

import "my\_script";
image.png
image.png

app/javascript/my\_script.js 中添加如下 JS 代码:

代码语言:txt
复制
document.addEventListener("turbo:load", () => {

  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');

  const popoverList = [...popoverTriggerList].map((popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl));

});

app/assets/stylesheets/custom.scss 中添加如下样式:

代码语言:txt
复制
.body-offset {

  margin-top: 50px;

}
测试 Bootstrap

创建一个 home_controller.rb

代码语言:txt
复制
rails g controller home index

修改 app/views/layouts/application.html.erb Layout 布局:

代码语言:html
复制
<!DOCTYPE html>

<html>

  <head>

    <title>RailsBootstrapJquery</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <%= csrf\_meta\_tags %>

    <%= csp\_meta\_tag %>



    <%= stylesheet\_link\_tag "application", "data-turbo-track": "reload" %>

    <%= javascript\_importmap\_tags %>

  </head>



  <body>

    <header>

      <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">

        <div class="container-fluid">

          <a class="navbar-brand" href="#">Top navbar</a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarCollapse">

            <ul class="navbar-nav me-auto mb-2 mb-md-0">

              <li class="nav-item">

                <a class="nav-link active" aria-current="page" href="#">Home</a>

              </li>

              <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

              </li>

              <li class="nav-item">

                <a class="nav-link disabled">Disabled</a>

              </li>

            </ul>

            <form class="d-flex" role="search">

              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

              <button class="btn btn-outline-success" type="submit">Search</button>

            </form>

          </div>

        </div>

      </nav>

    </header>

    <%= yield %>

  </body>

</html>

修改 app/views/home/index.html.erb 页面:

代码语言:html
复制
<div class="container">

  <div class="row">

    <div class="col-md-8 mt-4">

      <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

    </div>

  </div>



  <div class="row mt-4">

    <div class="col-md-8">

      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">

        Popover on top

      </button>

      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">

        Popover on right

      </button>

      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">

        Popover on bottom

      </button>

      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">

        Popover on left

      </button>

    </div>

  </div>

</div>

使用 rails s 启动 Rails 项目,查看 http://0.0.0.0:3000/home/index

image.png
image.png

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一种方式:仅引入 Bootstrap
    • 创建 Rails 项目
      • 安装 importmap
        • 添加 Bootstrap 5
          • 安装 Bootstrap 5 Ruby Gem
            • application.scss 中导入 bootstrap
              • 测试 Bootstrap
              • 第二种方式:引入 Bootstrap 和 jQuery
                • 添加 Bootstrap 和 jQuery 的 Ruby Gem
                  • 测试 Bootstrap
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档