### 一、为什么选择 Bootstrap？
– **响应式布局**：自动适配手机、平板、电脑等设备。
– **组件丰富**：导航栏、卡片、按钮、模态框等现成组件。
– **开发效率高**：节省大量写 CSS 的时间。
– **兼容性强**：支持主流浏览器。
—
### 二、项目结构
我们先创建一个基本的 HTML 文件结构：
“`bash
personal-website/
├── index.html
├── style.css
└── assets/
└── images/
“`
—
### 三、引入 Bootstrap
可以通过 CDN 快速引入 Bootstrap：
“`html
<!– index.html –>
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>我的个人主页</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<!– 页面内容放在这里 –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
“`
—
### 四、构建主页内容
#### 1. 导航栏（Navbar）
“`html
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<div class=”container-fluid”>
<a class=”navbar-brand” href=”#”>我的主页</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarNav”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav ms-auto”>
<li class=”nav-item”><a class=”nav-link” href=”#about”>关于我</a></li>
<li class=”nav-item”><a class=”nav-link” href=”#portfolio”>作品集</a></li>
<li class=”nav-item”><a class=”nav-link” href=”#contact”>联系我</a></li>
</ul>
</div>
</div>
</nav>
“`
#### 2. 主页横幅（Jumbotron）
“`html
<header class=”bg-primary text-white text-center py-5″>
<div class=”container”>
<h1 class=”display-4″>你好，我是张三</h1>
<p class=”lead”>前端开发 | 热爱开源 | 擅长响应式设计</p>
</div>
</header>
“`
#### 3. 关于我（About Section）
“`html
<section id=”about” class=”py-5″>
<div class=”container”>
<h2 class=”text-center mb-4″>关于我</h2>
<div class=”row”>
<div class=”col-md-4 text-center”>
<img src=”assets/images/avatar.jpg” alt=”头像” class=”img-fluid rounded-circle mb-3″>
</div>
<div class=”col-md-8″>
<p>我是张三，一名热爱前端开发的程序员，擅长使用 HTML、CSS、JavaScript 和 Bootstrap 构建响应式网站。热爱开源项目，乐于分享技术。</p>
<a href=”#” class=”btn btn-primary”>下载简历</a>
</div>
</div>
</div>
</section>
“`
#### 4. 作品集（Portfolio）
“`html
<section id=”portfolio” class=”bg-light py-5″>
<div class=”container”>
<h2 class=”text-center mb-4″>我的作品</h2>
<div class=”row”>
<div class=”col-md-4 mb-4″>
<div class=”card”>
<img src=”assets/images/project1.jpg” class=”card-img-top” alt=”项目1″>
<div class=”card-body”>
<h5 class=”card-title”>项目一</h5>
<p class=”card-text”>一个使用 Bootstrap 搭建的响应式博客网站。</p>
<a href=”#” class=”btn btn-outline-primary”>查看详情</a>
</div>
</div>
</div>
<div class=”col-md-4 mb-4″>
<div class=”card”>
<img src=”assets/images/project2.jpg” class=”card-img-top” alt=”项目2″>
<div class=”card-body”>
<h5 class=”card-title”>项目二</h5>
<p class=”card-text”>基于 Vue 和 Bootstrap 的后台管理系统。</p>
<a href=”#” class=”btn btn-outline-primary”>查看详情</a>
</div>
</div>
</div>
<div class=”col-md-4 mb-4″>
<div class=”card”>
<img src=”assets/images/project3.jpg” class=”card-img-top” alt=”项目3″>
<div class=”card-body”>
<h5 class=”card-title”>项目三</h5>
<p class=”card-text”>个人博客系统，使用 Node.js + Bootstrap 构建。</p>
<a href=”#” class=”btn btn-outline-primary”>查看详情</a>
</div>
</div>
</div>
</div>
</div>
</section>
“`
#### 5. 联系我（Contact Section）
“`html
<section id=”contact” class=”py-5″>
<div class=”container”>
<h2 class=”text-center mb-4″>联系我</h2>
<form>
<div class=”mb-3″>
<label for=”name” class=”form-label”>姓名</label>
<input type=”text” class=”form-control” id=”name” placeholder=”请输入你的姓名”>
</div>
<div class=”mb-3″>
<label for=”email” class=”form-label”>邮箱</label>
<input type=”email” class=”form-control” id=”email” placeholder=”请输入你的邮箱”>
</div>
<div class=”mb-3″>
<label for=”message” class=”form-label”>留言</label>
<textarea class=”form-control” id=”message” rows=”4″ placeholder=”写下你的留言”></textarea>
</div>
<button type=”submit” class=”btn btn-success”>发送消息</button>
</form>
</div>
</section>
“`
—
### 五、底部信息（Footer）
“`html
<footer class=”bg-dark text-white text-center py-4″>
<div class=”container”>
<p class=”mb-0″>© 2025 张三 · 保留所有权利</p>
</div>
</footer>
“`
—
### 六、自定义样式（style.css）
你可以添加一些自定义样式来美化页面：
“`css
body {
font-family: “Segoe UI”, sans-serif;
}
header {
background-color: #0d6efd;
color: white;
}
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
“`
—
### 七、部署网站
你可以将网站部署到以下平台：
– [GitHub Pages](https://pages.github.com/)
– [Vercel](https://vercel.com/)
– [Netlify](https://www.netlify.com/)
– [Firebase Hosting](https://firebase.google.com/products/hosting)
只需上传你的 HTML、CSS 和图片资源即可！
—
## ✅ 小结
通过本文，你可以快速使用 **Bootstrap** 搭建一个响应式个人主页，包含导航栏、介绍、作品集、联系表单等常见模块。无需复杂配置，即可快速上线展示自我。
