Bootstrap菜鸟教程，如何快速入门？-杰瑞科技汇

Bootstrap 菜鸟教程：从零开始，快速构建响应式网站

什么是 Bootstrap？一句话理解

想象一下，你要盖一栋房子，你需要自己买砖、水泥、钢筋，自己设计图纸，一砖一瓦地砌墙,这非常耗时耗力。

（图片来源网络，侵删）

Bootstrap 就像是 一个装修好的、精装样板房,它已经为你准备好了：

设计好的房间布局：预设了一套美观的网页结构。
高质量的建材：提供了一套现成的 CSS 样式（按钮、表单、导航栏等）。
好用的工具箱：提供了一套 JavaScript 插件（轮播图、弹出框等）。

你只需要搬进去，按照自己的需求稍微调整一下家具（修改内容和样式），就能快速拥有一栋漂亮的房子（网站）。

核心总结： Bootstrap 是一个前端框架，它帮你解决了网页中 80% 的样式和布局问题，让你能专注于网站的内容和功能，而不是在 CSS 的细节上耗费大量时间。

为什么要学习 Bootstrap？（菜鸟的优势）

快速开发：不用写复杂的 CSS，直接复制粘贴 Bootstrap 的类名,就能做出漂亮的页面。
响应式设计：一套代码，自动适配手机、平板、电脑等各种屏幕尺寸，这是 Bootstrap 最强大的功能之一。
跨浏览器兼容：你不用再头疼 IE、Chrome、Firefox 之间的样式差异问题，Bootstrap 已经帮你处理好了。
样式美观统一：所有组件都遵循一套设计规范,保证了整个网站的风格一致性。
学习曲线平缓：只要你懂一点 HTML 和 CSS,就能很快上手。

准备工作：如何引入 Bootstrap

在你的 HTML 文件中，只需要在 <head> 标签里引入 Bootstrap 的 CSS 和 JS 文件即可,有两种主流方法：

（图片来源网络，侵删）

使用 CDN (推荐给初学者) CDN (Content Delivery Network) 是一个内容分发网络，就像你不用把歌曲下载到手机里，可以直接在线播放一样，这种方法最简单,更新也快。

<!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.2/dist/css/bootstrap.min.css" rel="stylesheet">我的第一个 Bootstrap 页面</title>
</head>
<body>
    <!-- 你的页面内容将写在这里 -->
    <!-- 2. 引入 Bootstrap 的 JS 文件和一些依赖 -->
    <!-- Popper.js 是 Bootstrap 的 JS 插件依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <!-- 3. 引入 Bootstrap 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

注意：引入顺序很重要，bootstrap.min.js 必须在 bootstrap.min.css 之后，并且通常放在 </body> 标签前,这样可以避免页面加载时的样式闪烁。

核心概念：布局与组件

Bootstrap 的核心就是 “类名”，你通过给 HTML 标签添加特定的 class 属性来应用 Bootstrap 的样式。

布局：栅格系统

栅格系统是 Bootstrap 的灵魂，它是一个强大的布局工具，它将页面分成 12 列。

（图片来源网络，侵删）

基本结构： 一个典型的布局容器包含 row (行) 和 col (列)。

<div class="container"> <!-- .container 是一个有固定宽度的居中容器 -->
  <div class="row">     <!-- .row 是一行，用于放置列 -->
    <div class="col">第一列</div>
    <div class="col">第二列</div>
    <div class="col">第三列</div>
  </div>
</div>

如何指定列宽？ 通过给 col 添加数字来指定它占几列。col-4 就表示占 4 列（12列中的4列）。

<div class="container">
  <div class="row">
    <div class="col-4">左侧边栏 (占4列)</div>
    <div class="col-8">主要内容区 (占8列)</div>
  </div>
</div>

响应式布局（超重要！） Bootstrap 的栅格系统可以根据屏幕尺寸自动调整，在手机上我们希望是上下排列,在电脑上是左右排列。

语法：col-屏幕尺寸-列数

col：默认，所有屏幕尺寸
col-sm-：小屏幕及以上 (≥576px)
col-md-：中等屏幕及以上 (≥768px)
col-lg-：大屏幕及以上 (≥992px)
col-xl-：超大屏幕及以上 (≥1200px)

例子：

<div class="container">
  <div class="row">
    <!-- 在小屏幕上占12列（全宽），在中等屏幕上占6列 -->
    <div class="col-sm-6 col-md-4">盒子 1</div>
    <div class="col-sm-6 col-md-4">盒子 2</div>
    <div class="col-sm-12 col-md-4">盒子 3</div>
  </div>
</div>

效果：

手机上：三个盒子会垂直堆叠。
平板/电脑上：一行显示三个盒子。

组件：直接“拿来用”

组件就是已经写好的、功能完整的 UI 元素，你只需要复制 HTML 结构,然后修改里面的文字和链接即可。

常用组件示例：

a) 按钮

<!-- 不同样式的按钮 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 不同大小的按钮 -->
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">普通按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>

b) 导航栏

<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" aria-current="page" 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>

说明：导航栏是响应式的，在小屏幕上会变成一个“汉堡包”菜单。

c) 卡片

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这是一张示例卡片，你可以在这里放任何内容，比如图片、文字、链接等。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>

d) 轮播图

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- 轮播指标 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
  </div>
  <!-- 轮播项目 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>第一张幻灯片</h5>
        <p>说明文字...</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
      <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="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

菜鸟实战：搭建一个简单的个人主页

让我们把学到的知识组合起来,创建一个简单的页面。

代码 index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人主页</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义一些简单的样式 */
        .hero-section {
            background-color: #f8f9fa;
            padding: 60px 0;
        }
    </style>
</head>
<body>
    <!-- 1. 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <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 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>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 2. 主要内容区 -->
    <div class="hero-section text-center">
        <div class="container">
            <img src="https://via.placeholder.com/150" class="rounded-circle mb-3" alt="头像">
            <h1>你好，我是张三</h1>
            <p class="lead">一名热爱前端开发的菜鸟</p>
            <a href="#" class="btn btn-primary btn-lg">了解更多</a>
        </div>
    </div>
    <!-- 3. 关于我部分 -->
    <div class="container my-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">前端开发</h5>
                        <p class="card-text">我正在学习 HTML, CSS 和 JavaScript，并使用 Bootstrap 快速构建网页。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">UI/UX 设计</h5>
                        <p class="card-text">我对用户界面和用户体验设计充满兴趣，致力于创造美观且易用的产品。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">持续学习</h5>
                        <p class="card-text">技术日新月异，我始终保持学习的热情，探索新的技术和框架。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 4. 页脚 -->
    <footer class="bg-dark text-white text-center p-3">
        <p>&copy; 2025 张三的主页. All rights reserved.</p>
    </footer>
    <!-- 引入 Bootstrap JS 依赖 -->
    <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.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

如何运行：

将上面的代码复制到一个文本编辑器中（如 VS Code, Sublime Text, Notepad++）。
保存为 index.html 文件。
用任意浏览器打开这个文件,你就能看到一个响应式的个人主页了！

进阶学习与资源

当你熟悉了基础后,可以探索更多：

官方文档 (最重要！)
- Bootstrap 官方文档 (中文)
- 这里包含了所有组件和工具的详细用法、示例和 API 文档，遇到任何问题,第一反应应该是查官方文档。
定制化
- 你可以通过 Bootstrap 官定制工具来选择你需要的组件和变量，生成一个专属的、更小的 Bootstrap 文件。
主题
- 像 Bootswatch 这样的网站提供了许多免费的 Bootstrap 主题,可以一键更换你网站的整体风格。

Bootstrap 是一个强大的前端框架，能极大提升开发效率。
核心是“类名”，通过给 HTML 添加 class 来应用样式。
栅格系统是实现响应式布局的利器，必须掌握 col-*-* 的用法。
组件是现成的“积木”，直接复制粘贴就能用。
遇到问题，首选官方文档。

从今天起，大胆地去使用 Bootstrap 吧！它会是你前端学习路上最好的伙伴之一,祝你学习愉快！

Bootstrap菜鸟教程，如何快速入门？

Bootstrap 菜鸟教程：从零开始，快速构建响应式网站

什么是 Bootstrap？一句话理解

为什么要学习 Bootstrap？（菜鸟的优势）

准备工作：如何引入 Bootstrap

核心概念：布局与组件

布局：栅格系统

组件：直接“拿来用”

菜鸟实战：搭建一个简单的个人主页

进阶学习与资源

99ANYc3cd6

Python如何用with语句操作OpenSSL？

Python try for语句的正确用法是什么？

Java如何实现HTML转Word？

Python if or and 组合优先级如何判断？

Sublime Text 如何配置 Python 开发环境？

Java中如何获取String的最后一个字符？

ArrayList Java遍历有哪些高效方法？

JewelCad教程实用在哪？珠宝设计如何学？

如何用Java开发微信公众号？

Java toByteArray()如何正确使用？

excel for mac教程

Python OpenCV kernel如何正确使用与优化？

Midas Civil教程怎么学？新手入门指南？

PL/SQL Developer怎么用？新手入门教程看这里！

PHPcms V9视频教程哪里找？新手怎么学？

Python for in range循环如何高效使用？

Bootstrap菜鸟教程，如何快速入门？

Bootstrap 菜鸟教程：从零开始，快速构建响应式网站

什么是 Bootstrap？一句话理解

为什么要学习 Bootstrap？（菜鸟的优势）

准备工作：如何引入 Bootstrap

核心概念：布局与组件

布局：栅格系统

组件：直接“拿来用”

菜鸟实战：搭建一个简单的个人主页

进阶学习与资源

相关推荐

Java中如何获取String的最后一个字符？