bootstrap基础教程-杰瑞科技汇

Bootstrap 基础教程

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

你可以把它想象成一个“网页乐高积木”，它提供了一套预先设计好的、美观的 HTML、CSS 和 JavaScript 组件（比如按钮、导航栏、模态框、轮播图等），你只需要按照它的规则去组合这些“积木”，就能快速搭建出专业、统一的网页界面。

它最初由 Twitter 的开发者开发，现在是全球最流行的前端框架之一。

为什么要使用 Bootstrap？

使用 Bootstrap 带来的好处非常明显：

快速开发：无需从零开始写样式，直接使用现成的组件，极大提高开发效率。
响应式设计：一套代码可以完美适配手机、平板、桌面电脑等各种尺寸的设备。
浏览器兼容性好：Bootstrap 处理了不同浏览器之间的样式差异，你无需担心兼容性问题。
界面美观统一：提供了一套统一的设计语言，让你的网站看起来更专业、更协调。
社区庞大：遇到问题很容易找到解决方案，有大量的模板和插件可供参考和使用。

如何开始使用 Bootstrap？（快速上手）

使用 Bootstrap 最简单的方式就是通过 CDN (Content Delivery Network) 链接，CDN 是一个网络服务器，专门用来存放静态文件（如 CSS、JS），通过 CDN 引入，可以让你的网站访问速度更快。

步骤：

在你的 HTML 文件的 <head> 标签内，引入 Bootstrap 的 CSS 文件，在 <body> 标签结束前，引入 Bootstrap 的 JavaScript 文件和它的依赖库 Popper.js。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1. 引入 Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">我的第一个 Bootstrap 页面</title>
</head>
<body>
    <h1>你好，Bootstrap！</h1>
    <p>这是一个使用 Bootstrap 创建的简单页面。</p>
    <!-- 2. 引入 Popper.js 和 Bootstrap 的 JS 文件 -->
    <!-- Popper.js 是 Bootstrap 中一些组件（如下拉菜单、工具提示等）所必需的 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <!-- Bootstrap 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

重要提示： <meta name="viewport" ...> 这行代码是响应式设计的基石，必须放在 <head> 中，它告诉浏览器如何控制页面的尺寸和缩放。

核心概念详解

掌握了以上引入方法,你就可以开始使用 Bootstrap 了，下面是四个最核心的概念。

1 响应式布局与栅格系统

这是 Bootstrap 的灵魂，栅格系统将页面划分为 12 列，你可以通过组合这些列来创建复杂的布局。

核心结构：

<div class="container">
    <div class="row">
        <div class="col">列</div>
        <div class="col">列</div>
        <div class="col">列</div>
    </div>
</div>

.container：一个居中的容器，有固定的最大宽度，并会在不同屏幕尺寸下有左右内边距。
.row：行，用于在一水平线上放置列，它会自动清除列的左右外边距。
.col：列，表示占据 1 列（12份中的1份）。
*`.col-**：例如.col-md-4`，表示在中等屏幕尺寸上占据 4 列。

响应式断点：

Bootstrap 提供了 5 个断点，用于在不同屏幕下改变布局：

断点前缀	屏幕尺寸	示例用法
`col-`	<576px (超小手机)	`.col-6` 在所有屏幕上都占6列
`col-sm-`	≥576px (小手机)	`.col-sm-6` 在小屏幕及以上占6列
`col-md-`	≥768px (平板)	`.col-md-4` 在平板及以上占4列
`col-lg-`	≥992px (桌面)	`.col-lg-3` 在大桌面及以上占3列
`col-xl-`	≥1200px (超大桌面)	`.col-xl-2` 在超大桌面及以上占2列

示例：一个响应式三栏布局

<div class="container mt-5">
    <div class="row">
        <!-- 在小屏幕上占满12列，在平板及以上屏幕上占4列 -->
        <div class="col-sm-4">
            <div class="p-3 bg-light border">左侧边栏</div>
        </div>
        <div class="col-sm-4">
            <div class="p-3 bg-light border">主要内容</div>
        </div>
        <div class="col-sm-4">
            <div class="p-3 bg-light border">右侧边栏</div>
        </div>
    </div>
</div>

2 全局样式

Bootstrap 提供了许多可以直接使用的实用类，覆盖了排版、表格、表单、图片等。

排版：display-* (改变显示模式), text-* (文本对齐、颜色等), font-weight-* (字体粗细), lead (突出段落)。
表格：table (基础表格), table-striped (斑马纹), table-bordered (带边框), table-hover (悬停高亮)。
表单：.form-control (为 <input>, <select>, <textarea> 添加样式), .form-label (标签样式)。
图片：.img-fluid (使图片响应式，宽度100%，高度自适应)。
工具类：m-* (外边距), p-* (内边距), text-center (文本居中), d-none (隐藏元素) 等。

示例：一个带样式的表单

<form>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">我们绝不会泄露你的邮箱。</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

3 组件

组件是 Bootstrap 最强大的地方，它们是可复用的 UI 元素。

按钮：.btn 基础样式，.btn-primary, .btn-success 等颜色样式，.btn-lg, .btn-sm 尺寸样式。
导航栏：.navbar，一个功能强大的响应式导航组件。
卡片：.card，一个灵活的内容容器，包含头部、主体、底部等。
模态框：.modal，一个弹出式的对话框。
轮播图：.carousel，用于创建幻灯片效果。

示例：一个简单的导航栏

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <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">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lt;/a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

4 JavaScript 插件

Bootstrap 的一些交互组件（如下拉菜单、模态框、工具提示等）需要 JavaScript 才能工作。

我们已经在 HTML 中通过 CDN 引入了 bootstrap.bundle.min.js，这个文件已经包含了所有插件和 Popper.js，所以你不需要额外操作。

使用插件通常有两种方式：

HTML 属性方式：直接在 HTML 元素上添加 data-bs-* 属性，这是最简单的方式。
JavaScript 方式：通过 JavaScript 初始化。

示例：一个通过 HTML 属性触发的工具提示

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="这是一个提示！">
    悬停我
</button>

为了让这个提示生效,你需要一点 JavaScript 来初始化它（通常放在 <body> 底部）：

// 等待整个文档加载完毕后执行
document.addEventListener('DOMContentLoaded', function () {
    // 初始化页面上所有的工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
});

实战案例：构建一个简单的个人博客首页

我们将综合运用以上知识,创建一个包含导航栏、轮播图、三栏内容区和页脚的页面。

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的 Bootstrap 博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义一些简单的样式 */
        .carousel-item img {
            object-fit: cover;
            height: 400px;
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap 博客</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 active" 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>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系方式</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div id="blogCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#blogCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#blogCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#blogCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://picsum.photos/seed/slide1/1200/400.jpg" class="d-block w-100" alt="第一张幻灯片">
                <div class="carousel-caption d-none d-md-block">
                    <h5>欢迎来到我的博客</h5>
                    <p>这里分享技术与生活。</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/seed/slide2/1200/400.jpg" class="d-block w-100" alt="第二张幻灯片">
                <div class="carousel-caption d-none d-md-block">
                    <h5>探索前端世界</h5>
                    <p>深入学习 HTML, CSS, JavaScript。</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/seed/slide3/1200/400.jpg" class="d-block w-100" alt="第三张幻灯片">
                <div class="carousel-caption d-none d-md-block">
                    <h5>记录成长点滴</h5>
                    <p>每一次学习都是一次进步。</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#blogCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#blogCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
    <!-- 主要内容区 -->
    <div class="container my-5">
        <div class="row">
            <!-- 左侧边栏 -->
            <div class="col-lg-3">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">关于博主</h5>
                    </div>
                    <div class="card-body">
                        <img src="https://picsum.photos/seed/avatar/150/150.jpg" class="rounded-circle mb-3 d-block mx-auto" alt="博主头像">
                        <p class="text-center">一个热爱编程的前端开发者。</p>
                    </div>
                </div>
            </div>
            <!-- 中间文章列表 -->
            <div class="col-lg-6">
                <h2>最新文章</h2>
                <div class="card mb-4">
                    <img src="https://picsum.photos/seed/post1/800/400.jpg" class="card-img-top" alt="文章配图">
                    <div class="card-body">
                        <h5 class="card-title">Bootstrap 栅格系统详解</h5>
                        <p class="card-text">本文将深入探讨 Bootstrap 的栅格系统，教你如何用它构建灵活的响应式布局...</p>
                        <a href="#" class="btn btn-primary">阅读更多</a>
                    </div>
                </div>
                 <div class="card mb-4">
                    <img src="https://picsum.photos/seed/post2/800/400.jpg" class="card-img-top" alt="文章配图">
                    <div class="card-body">
                        <h5 class="card-title">JavaScript 异步编程：从回调到 Promise</h5>
                        <p class="card-text">异步编程是 JavaScript 的核心概念之一，本文将带你回顾回调函数的痛点...</p>
                        <a href="#" class="btn btn-primary">阅读更多</a>
                    </div>
                </div>
            </div>
            <!-- 右侧边栏 -->
            <div class="col-lg-3">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">热门标签</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-primary">Bootstrap</span>
                            <span class="badge bg-secondary">JavaScript</span>
                            <span class="badge bg-success">CSS</span>
                            <span class="badge bg-danger">HTML</span>
                            <span class="badge bg-warning text-dark">前端</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            <p>&copy; 2025 我的 Bootstrap 博客. All rights reserved.</p>
        </div>
    </footer>
    <!-- 引入 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

总结与进阶

通过本教程,你已经了解了：

Bootstrap 是什么及其优势。
如何通过 CDN 快速引入 Bootstrap。
栅格系统是响应式布局的核心。
全局样式、组件和插件是构建页面的三大法宝。
如何组合使用这些知识来构建一个完整的页面。

进阶学习：

官方文档是你的最佳朋友：Bootstrap 官方文档是最权威、最详细的学习资料，里面包含了所有组件和工具类的完整用法、示例和API说明。
定制化：学习如何使用 Bootstrap 的定制页面，下载只包含你需要的组件和样式的 CSS/JS 文件，以减小项目体积。
Sass/SCSS：Bootstrap 是基于 Sass 构建的，了解 Sass 可以让你更深入地理解 Bootstrap 的样式结构，并对其进行更灵活的覆盖和扩展。
实战项目：尝试用 Bootstrap 重构你自己的个人网站，或者为一个小企业构建一个展示型网站，实践是掌握技术的最好方式。

祝你学习愉快,用 Bootstrap 搭建出更多精彩的网页！

bootstrap基础教程