给Rails5 新项目穿上“Bootstrap5”衣服

flchp 关注   2023-08-06  112  31  23  22 

bootstrap5介绍

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。

前期一直是使用bootstrap3，最近发现bootstrap5有让col居中的功能，很喜欢，就研究怎么升级成bootstap5。并记录一下过程，方便以后新项目快速安装。

为什么还在用rails5？

两点原因：
* 因为我不是专业程序员，都是业余开发玩玩，没时间和精力去研究更高版本的rails。
* rails5的中文教程资源相对丰富，rails guide 有5的中文版，全栈营，蛋人网，其他版本遇到坑不太会debug。

代码实现

Step 1. 帮项目穿上衣服 Bootstrap，挂上 bootstrap-sass 这个 gem

Bootstrap 是 Web 设计圈有名的 CSS 框架，提供了开发项目快速便利的元件素材，如按钮、下拉选单、表格等等样式。

在 Rails 上要帮项目穿上 Bootstrap，用的是 bootstrap-sass 这个套件。

修改 Gemfile，在 group :development, :test do前一行加入 gem 'bootstrap'

Gemfile 
1

gem 'bootstrap'

执行 bundle install,重启rails s

Step 2. 将 Bootstrap 的 CSS和js 套件装进项目里面

输入：mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

命令的作用是将 application.css 更名为 application.scss。

添加css：

app/assets/stylesheets/application.scss 
1

@import "bootstrap";

添加js：

app/assets/javascripts/application.js 
1
2
3

//= require jquery3
//= require popper
//= require bootstrap-sprockets

让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

app/views/layouts/application.html.erb 
1
2
3
4
5
6
7

<!DOCTYPE html>
<html>
  <head>
   + <meta charset="utf-8"> 
   + <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
</html>

+号在这里是新增一行代码的意思，不用复制贴上这个+号本身，只要粘贴后面的代码就可以了

step3. 新增 app/views/common 文件夹,添加navbar、footer、flashes等常用partial

在app的根目录命令行中依次执行：mkdir app/views/common，touch app/views/common/_navbar.html.erb，touch app/views/common/_footer.html.erb，touch app/views/common/_flashes.html.erb，touch app/helpers/flashes_helper.rb

依次给新生成的文件添加内容：

app/views/common/_navbar.html.erb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">app_name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item"><%= link_to("教程", #, class: "nav-link") %> </li>
        <li class="nav-item"><%= link_to("模版库", #, class: "nav-link") %> </li>
        <li class="nav-item"><%= link_to("文章广场", #, class: "nav-link") %> </li>
        <li class="nav-item"><%= link_to("找伙伴", #, class: "nav-link") %> </li>
      </ul>

      <ul class="navbar-nav me-1 mb-2 mb-lg-0 ">
        <li class="nav-item"><%= link_to("写文章", #, class: "nav-link") %></li>
        <% if !current_user %>
          <li class="nav-item"><%= link_to("注册", #, class: "nav-link") %> </li>
          <li class="nav-item"><%= link_to('登入', #, class: "nav-link") %></li>
        <% else %>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Hi!, 用户
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li class="nav-item"><%= link_to("我的博客", #, class: "dropdown-item") %></li>
            <li class="nav-item"><%= link_to('修改个人资料', #, class: "dropdown-item")%></li>
            <li class="nav-item"><hr class="dropdown-divider"></li>
            <li class="nav-item">
                <%= link_to("后台管理", #, class: "dropdown-item") %>
                <hr>
            </li>
            <li> <%= link_to('登出', #, class: "dropdown-item") %> </li>
          </ul>
          <li><hr class="dropdown-divider"></li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>
app/views/common/_footer.html.erb 
1
2
3
4
5

<footer class="container" style="margin-top: 100px;">
  <p class="text-center">app_name ©2023
    <br>版权所有 XXX
  </p>
</footer>
app/views/common/_flashes.html.erb 
1
2
3
4
5
6
7
8

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissible alert-<%= flash_class(key) %>">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <%= value %>
    </div>
  <% end %>
<% end %>
app/helpers/flashes_helper.rb 
1
2
3
4
5
6
7
8
9
10
11

module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze

  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end

  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning"
  end
end

step4. 修改全域 HTML 样式 application.html.erb,让所有的template都能应用上

app/views/layouts/application.html.erb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
    <head>
        <title>Rails101</title>
        <%= csrf_meta_tags %>

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

    <body>
        +<div class="container-fluid">
           + <%= render "common/navbar" %>
           + <%= render "common/flashes" %>
            <%= yield %>
      + </div>
      + <%= render "common/footer" %>
    </body>
</html>

测试bootstrap5的加载和flash功能

执行：rails g controller welcome index

让welcome#index触发flash功能

app/controllers/welcome_controller.rb 
1
2
3
4
5

class WelcomeController < ApplicationController
  def index
   + flash[:notice] = "用户！你好！"
  end
end

先清空welcome的index的view内的代码，让后添加以下代码来展示bootstrap5装载成功：

app/views/welcome/index.html.erb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="container-fluid p-5 bg-info text-white text-center">
  <h1>loglearn</h1>
  <p>loglearn的定位：记录学习，帮助成长，展示自己</p>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p>菜鸟教程</p>
      <p>学的不仅是技术，更是梦想！！！</p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p>菜鸟教程</p>
      <p>学的不仅是技术，更是梦想！！！</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3>
      <p>菜鸟教程</p>
      <p>学的不仅是技术，更是梦想！！！</p>
    </div>
  </div>
</div>

将首页指到 welcome 下的 index.html.erb 页面

config/routes.rb 
1
2
3

Rails.application.routes.draw do
 + root 'welcome#index'
end

代码完成！

验收效果

访问；得到以下效果页面：

上一篇 返回目录 下一篇