Bootstrap 3.0 完整入门教程

目录

  1. 第一部分：Bootstrap 简介
    • 什么是 Bootstrap？
    • 为什么选择 Bootstrap 3.0？（优点）
    • “移动优先” (Mobile First) 理念
  2. 第二部分：准备工作
    • 下载 Bootstrap 3
    • 使用 CDN (推荐方式)
    • 创建你的第一个 HTML 页面
  3. 第三部分：核心布局组件

    • 栅格系统 - Bootstrap 的灵魂

      bootstrap3.0教程
      （图片来源网络，侵删）

    • 排版 - 标题、段落、列表

    • 表格

    • 表单

    • 按钮

      bootstrap3.0教程
      （图片来源网络，侵删）
  4. 第四部分：CSS 组件

    • 导航栏

    • 轮播图

    • 缩略图

    • 警告框

      bootstrap3.0教程
      （图片来源网络，侵删）

    • 模态框

  5. 第五部分：JavaScript 插件
    • 如何引入 JS 插件
    • 常用插件示例
  6. 第六部分：一个完整的项目示例

    从零开始构建一个简单的响应式网页

  7. 第七部分：进阶与资源
    • 自定义 Bootstrap
    • 学习资源与版本说明

第一部分：Bootstrap 简介

什么是 Bootstrap？

Bootstrap 是一个由 Twitter 开发并开源的前端框架，它包含了大量的 HTML、CSS 和 JavaScript 的预设代码，旨在帮助开发者快速、轻松地构建美观且功能完善的响应式网站。

它是一个“网站模板工具箱”。

为什么选择 Bootstrap 3.0？（优点）

  • 响应式设计：一套代码，可以自动适配手机、平板、桌面电脑等各种屏幕尺寸。
  • 移动优先：从移动端的设计开始，再逐步增强到桌面端,确保在移动设备上有最佳体验。
  • 开发效率高：大量现成的组件（如导航栏、按钮、模态框）可以直接使用,无需重复造轮子。
  • 浏览器兼容性好：支持所有主流浏览器，包括较旧的 IE8 和 IE9。
  • 学习成本低：基于 HTML 和 CSS，语法简单直观,上手非常快。

“移动优先” (Mobile First) 理念

这是 Bootstrap 3 的核心思想，它鼓励你先为小屏幕设备（如手机）设计内容和布局，因为屏幕空间有限，你只会保留最核心的功能和内容，通过媒体查询，随着屏幕尺寸的增大，再添加更多的布局细节和功能,这种方法让你的网站天生就为移动设备优化。

第二部分：准备工作

在开始之前，你需要准备好一个 HTML 文件，并引入 Bootstrap 的 CSS 和 JS 文件。

下载 Bootstrap 3

访问 Bootstrap 官网，在顶部导航栏点击 "v3.3.7" (这是最后一个 3.x 版本)，然后进入 "Download" 页面下载，下载后解压，你会看到 css、js 和 fonts 三个文件夹。

使用 CDN (推荐方式)

对于初学者和学习，使用 CDN 是最简单的方式，你无需下载任何文件，只需在 HTML 中通过链接引入即可，CDN 会自动为你提供 Bootstrap 的文件。

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选：主题 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 必须引入的 JS 文件 (jQuery, Bootstrap JS) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

注意：Bootstrap 3 的 JavaScript 插件依赖 jQuery，所以必须先引入 jQuery。

创建你的第一个 HTML 页面

将下面的代码保存为 index.html 文件,这就是我们所有示例的起点。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式视口标签，Bootstrap 3 的核心 -->Bootstrap 3.0 教程</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入主题 CSS (可选) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
    <h1>你好，Bootstrap 3!</h1>
    <!-- 引入 jQuery 和 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

第三部分：核心布局组件

栅格系统 - Bootstrap 的灵魂

栅格系统是 Bootstrap 实现响应式布局的核心，它将页面水平划分为 12 列。

  • 容器：.container 类用于居中并固定宽度（在不同屏幕尺寸下宽度不同），.container-fluid 类用于占满整个浏览器宽度。
  • 行：.row 类用于水平排列列,并清除列的浮动。
  • 列：.col-xs-*, .col-sm-*, .col-md-*, .col-lg-*
    • xs (Extra Small): <768px (手机)
    • sm (Small): >=768px (平板)
    • md (Medium): >=992px (小桌面)
    • lg (Large): >=1200px (大桌面)
    • 代表 1-12 之间的数字,表示该列占用的宽度。

示例：响应式三栏布局

<div class="container">
    <h2>栅格系统示例</h2>
    <div class="row">
        <!-- 在小屏幕上，每个 col-md-4 会占满一行 (12/3=4) -->
        <!-- 在大屏幕上，它们会并排显示 -->
        <div class="col-md-4">
            <h3>第一列</h3>
            <p>这是一些内容。</p>
        </div>
        <div class="col-md-4">
            <h3>第二列</h3>
            <p>这是更多内容。</p>
        </div>
        <div class="col-md-4">
            <h3>第三列</h3>
            <p>这是最后一些内容。</p>
        </div>
    </div>
</div>

排版

Bootstrap 提供了基础的排版样式。

  • <h1> 到 <h6>，以及 .h1 到 .h6 类（可用于其他元素）。
  • 段落：<p> 类。
  • 对齐：.text-left, .text-center, .text-right, .text-justify。
  • 强调：.lead（让段落更突出），.text-muted（灰色文本）。

表格

为表格添加 .table 类可以添加基本样式。

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>名称</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>项目一</td>
            <td><a href="#">编辑</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>项目二</td>
            <td><a href="#">编辑</a></td>
        </tr>
    </tbody>
</table>

其他表格样式类：.table-striped (斑马纹), .table-bordered (边框), .table-hover (鼠标悬停高亮)。

表单

使用 .form-control 类来设置文本输入框、文本域和选择框的样式,使其占满父容器宽度。

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">文件上传</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">示例块级帮助文本。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 记住我
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

按钮

使用 .btn 类作为基础,然后添加特定样式。

<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认</button>
<!-- 主要按钮 -->
<button type="button" class="btn btn-primary">主要</button>
<!-- 成功按钮 -->
<button type="button" class="btn btn-success">成功</button>
<!-- 信息按钮 -->
<button type="button" class="btn btn-info">信息</button>
<!-- 警告按钮 -->
<button type="button" class="btn btn-warning">警告</button>
<!-- 危险按钮 -->
<button type="button" class="btn btn-danger">危险</button>
<!-- 链接按钮 -->
<button type="button" class="btn btn-link">链接</button>

第四部分：CSS 组件

导航栏

导航栏是网站最重要的组件之一，Bootstrap 的导航栏非常强大且灵活。

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">我的网站</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

轮播图

轮播图需要依赖 JavaScript 才能工作。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 轮播指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="https://placehold.it/1140x500" alt="第一张">
            <div class="carousel-caption">
                <h3>标题一</h3>
                <p>描述一...</p>
            </div>
        </div>
        <div class="item">
            <img src="https://placehold.it/1140x500" alt="第二张">
            <div class="carousel-caption">
                <h3>标题二</h3>
                <p>描述二...</p>
            </div>
        </div>
        <div class="item">
            <img src="https://placehold.it/1140x500" alt="第三张">
            <div class="carousel-caption">
                <h3>标题三</h3>
                <p>描述三...</p>
            </div>
        </div>
    </div>
    <!-- 轮播导航 -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

缩略图

的网格布局。

<div class="row">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="https://placehold.it/300x200" alt="...">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些示例文本，一些示例文本。</p>
                <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
            </div>
        </div>
    </div>
    <!-- 可以添加更多缩略图 -->
</div>

警告框

<div class="alert alert-success" role="alert">
    <strong>成功！</strong> 操作已成功完成。
</div>
<div class="alert alert-info" role="alert">
    <strong>信息！</strong> 这是一条信息。
</div>
<div class="alert alert-warning" role="alert">
    <strong>警告！</strong> 请注意检查您的输入。
</div>
<div class="alert alert-danger" role="alert">
    <strong>错误！</strong> 发生了一个错误。
</div>

模态框

点击按钮弹出一个对话框。

HTML:

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
            </div>
            <div class="modal-body">
                模态框内容...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

第五部分：JavaScript 插件

Bootstrap 的许多交互功能（如轮播图、模态框、下拉菜单）都是通过 JavaScript 插件实现的。

如何引入 JS 插件

如前所述，你只需要在页面底部引入 bootstrap.min.js 文件即可，这个文件包含了所有插件，如果你只想引入部分插件，可以使用单独的 JS 文件。

常用插件示例

  • 下拉菜单：给一个 <ul> 添加 .dropdown-menu 类，给父元素添加 .dropdown 和 data-toggle="dropdown" 属性。
  • 标签页：使用 .nav 和 .nav-tabs 创建标签页头部，使用 .tab-content 和 .tab-pane 创建内容区域，并通过 data-toggle="tab" 或 data-toggle="pill" 来激活。
  • 工具提示：给元素添加 title 属性和 data-toggle="tooltip" 属性，然后需要用 JS 初始化：$('#myTooltip').tooltip();。

第六部分：一个完整的项目示例

让我们结合所学,创建一个简单的响应式个人主页。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的 Bootstrap 3 主页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <style>
        /* 自定义一些样式 */
        .jumbotron {
            background-color: #f0f0f0;
            text-align: center;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px 0;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">我的主页</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#about">lt;/a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- 主要内容 -->
<div class="container">
    <!-- Jumbotron -->
    <div class="jumbotron">
        <h1>欢迎来到我的网站！</h1>
        <p>这是一个使用 Bootstrap 3 构建的简单响应式网站示例。</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
    </div>
    <!-- 栅格系统示例 -->
    <div class="row">
        <div class="col-md-4">
            <h2>第一部分</h2>
            <p>这是栅格系统中的第一列，在大屏幕上，它会占据三分之一的宽度。</p>
            <p><a class="btn btn-default" href="#" role="button">查看详情 &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>第二部分</h2>
            <p>这是栅格系统中的第二列，同样占据三分之一的宽度。</p>
            <p><a class="btn btn-default" href="#" role="button">查看详情 &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>第三部分</h2>
            <p>这是栅格系统中的第三列，并排显示，形成三栏布局。</p>
            <p><a class="btn btn-default" href="#" role="button">查看详情 &raquo;</a></p>
        </div>
    </div>
    <!-- 轮播图 -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="https://placehold.it/1140x500" alt="Slide 1">
            </div>
            <div class="item">
                <img src="https://placehold.it/1140x500" alt="Slide 2">
            </div>
            <div class="item">
                <img src="https://placehold.it/1140x500" alt="Slide 3">
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>
<!-- 页脚 -->
<footer>
    <p>&copy; 2025 我的主页. 由 Bootstrap 3 驱动.</p>
</footer>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

将以上代码保存并在浏览器中打开,你就能看到一个功能完整的响应式网页了。

第七部分：进阶与资源

自定义 Bootstrap

如果你不想使用 Bootstrap 的所有样式，可以下载源代码，使用官方的 Customizer 工具来选择你需要的组件和变量，然后生成一个定制的 CSS 文件,以减小文件体积。

学习资源与版本说明

  • 官方文档 (最重要！): Bootstrap 3.3.7 官方文档，这是你最好的学习资料,包含了所有组件和插件的详细用法和示例。
  • 版本说明：Bootstrap 3 是一个非常成熟和稳定的版本，但自 2025 年起已停止更新，目前最新的稳定版本是 Bootstrap 5。对于新项目，强烈推荐使用 Bootstrap 5，因为它不再依赖 jQuery，并且采用了更现代的 CSS 技术（如 CSS 变量）。
  • 何时使用 Bootstrap 3：
    • 维护旧有的 Bootstrap 3 项目。
    • 需要支持非常老的浏览器（如 IE8/IE9）。
    • 团队对 Bootstrap 3 非常熟悉,且项目没有迁移到新版本的必要。

希望这份教程能帮助你顺利入门 Bootstrap 3.0！祝你编码愉快！