为什么我选择 bootstrap5 而不是 tailwildcss

原因是我前端菜鸡，从来没有好好认真写过 css，虽然 tailwildcss 给了原子粒度的工具类名，让你很容易能定制自己的轮子，但是我根本不知道一个能看的过去的轮子怎么搭建，还是 bootstrap 这种直接给出的还比较好看的组件适合我，我可以像搭积木一下搭出一个能比较好看的网页。

在 rails8 项目中引入 bootstrap5

step1.新建 rails8 项目

rails new rails101 cd rails101 用 rubymine 打开项目： rubymine .

step2.引入 bootstrap css 和 icon

将以下链接添加到 app/views/layouts/application.html.erb 的

中，由于我电脑连接 jspm.io 有问题，切换其他 CDN 源为 jsDelivr 或 unpkg 的链接：

<!-- 引入 Bootstrap CSS 和 Bootstrap icon -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

step3.引入 bootstrap 的 js

在 config/importmap.rb 中添加 bootstrap 的 js 文件的 url

# 将原来的 jspm.io 链接替换为 jsDelivr 或 unpkg 的链接
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/esm/popper.min.js"

测试引入 bootstrap 的效果

step1.生成测试页面

rails g controller home index

step2.在 config/routes.rb 中修改成 root 路径指向测试页面路径

root "home#index"

step3.添加 bootstrap5 的测试代码

在测试页面 app/views/home/index.html.erb 填入

<h1 class="text-danger"><i class="bi bi-wifi">good</i>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<div class="container mt-5">
  <h2 class="text-primary">Hello, Bootstrap!</h2>
  <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Demo Modal
  </button>

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Bootstrap Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>
            Wow! A modal is working without any build tool!
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

step4.浏览器查看效果

启动项目 bin/dev 在浏览器访问http://127.0.0.1:3000/ 得到效果图如下，bootstrap 的 css、js、icon 功能均生效

用 bootstrap 为网站添加常用一些 partial 模块

Step 1. 新增 app/views/common 资料夹

mkdir app/views/common

Step 2. 新增 navbar

touch app/views/common/_navbar.html.erb 填入

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">
    <img src="https://img1.baidu.com/it/u=2544257883,100398830&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="logo" style="width:40px; margin-left: 15px">
  </a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>

    <form class="d-flex">
      <input class="form-control me-2" type="text" placeholder="Search">
      <button class="btn btn-primary" type="button">Search</button>
    </form>

    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">登录</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">注册</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>

  </div>
</nav>

Step 3. 新增 footer touch app/views/common/_footer.html.erb 填入

<footer class="fixed-bottom bg-light p-3 text-center">
  <p class="mb-0">
    Copyright ©2025 rails101
    <br>
    Design by chenhuaping
  </p>
</footer>

Step 4. 新增 flashes

touch app/views/common/_flashes.html.erb 填入

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-<%= flash_class(key) %> alert-dismissible">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <%= value %>
    </div>
  <% end %>
<% end %>

增加 flash 的辅助模块 touch app/helpers/flashes_helper.rb 填入

module FlashesHelper
  FLASH_CLASSES = { danger: "danger", success: "success", warning: "warning", info: "info", primary: "primary"}.freeze

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

  def user_facing_flashes
    flash.to_hash.slice "danger", "success", "warning", "info", "primary"
  end
end

Step 5. 将新增几个 partial 加载显示

在 app/views/layouts/application.html.erb，将<%= yield %>换成以下代码：

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

Step 6. 触发 flash 功能

在 app/controllers/home_controller.rb 中 index 方法中添加触发代码

def index
    flash[:primary] = "测试flash功能！"
  end

step7.浏览器中查看效果

刷新网址http://127.0.0.1:3000/navbar, footer, flash，均正常显示

大功告成

给自己点个👍，嘎嘎