Bootstrap 5 入门：第一句话就该知道它不会帮你找对象

11-26 82 0 0

系列 ① | 阅读时长：3 分钟，读完不秃

1. 开场白：预制菜拯救秃头少年

如果你写过网页，一定懂那种 "一行 CSS 调一上午" 的绝望。
别慌，Bootstrap 5 就是前端界的预制菜：盒子、按钮、排版，全给你切好配好，下锅 3 分钟，色香味俱全。老板吃完还问：

"今天这么快？你是不是偷偷报培训班了！"

2. Bootstrap 是谁家的崽？

2011 年，Twitter 两程序员下班不想加班，顺手把内部样式打包开源，取名 Bootstrap，江湖号 "靴哥"。
十年过去，靴哥 5.0 减肥成功：
- 甩掉 jQuery，瘦成闪电⚡️
- 新增 CSS 自定义属性，颜值自由🎨
- 响应式升级，手机→8K 大屏通吃📱🖥

一句话：拿来就用，用完就下班。

3. 安装比点外卖还简单

派系	命令	场景	耗时
CDN 派	贴两行 `<link>`	我就试试	30 s
源码派	`npm i bootstrap`	我命由我	2 min
懒人派	抄官方 Starter	Ctrl+S	10 s

下面演示最懒的 10 s 方案👇

4. 第一行代码：Hello 靴哥！

把下面整段复制→粘贴→保存→双击，见证奇迹：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>靴哥首秀</title>
  <!-- 1. CDN 核心 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container text-center mt-5">
    <h1 class="text-primary">Hello, 靴哥!</h1>
    <button class="btn btn-success">点我并不会加薪</button>
  </div>
  <!-- 2. 可选：JS 全家桶（弹窗、轮播要用） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

看见 蓝色标题 + 绿色按钮，恭喜你！
人生第一个 Bootstrap 页面诞生，此刻请把 "我写的网页能看" 写进简历，HR 小姐姐都多瞟你一眼。

5. 背完这三词，能吹半年

响应式
页面像水，倒进手机是手机形，倒进 32 寸显示器也不糊。
组件
官方写好 200+ UI 零件，轮播、导航、模态框，拼乐高一样。
工具类
颜色、边距、圆角、阴影，一个 class 搞定，拒绝内联 CSS 打到手抽筋。

6. 今日作业，不写完不许emo

把按钮文字改成 "点我暴富"
截图发群里，让同事感受你飞一般的进步
明晚同一时间，我们开讲栅格系统，教你 5 分钟拼出"左边 logo、右边导航、中间 banner"的经典布局！

Bootstrap 不会帮你找对象，但能让你 6 点下班去约会。
知识就是生产力，下班才是第一生产力！

系列预告

篇目	标题	发布时间
②	栅格篇：为什么别人一行代码对齐，我掉坑 3 小时？	明晚 8 点
③	组件篇：按钮、导航、轮播，复制粘贴就能毕业？	后天
④	实战篇：10 分钟拼一个"能看"的公司官网	周末
⑤	避坑篇：一上线就崩？八成是这些骚操作	下周

关注我，包教包会，不会你打我（网络传输延迟，打不到算我赢）。

快来点个赞吧

编程知识