为什么我选择 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，均正常显示
大功告成
给自己点个👍，嘎嘎
