Bootstrap 3.0教程怎么学？入门到精通关键步骤？-建站教程-锦华智联科技

本教程将带您从零开始,系统地学习 Bootstrap 3 的核心概念和使用方法。

（图片来源网络，侵删）

第一部分：入门与基础
- 什么是 Bootstrap？
- 为什么选择 Bootstrap 3.0？
- 如何引入 Bootstrap 3.0？（下载与CDN）
- 创建第一个页面：Bootstrap 的基本模板
第二部分：核心布局组件
- 响应式布局：栅格系统
- 导航栏
- 轮播图
- 缩略图与面板
第三部分：内容样式与交互组件
- 排版
- 表单
- 按钮
- 模态框
- 提示框与警告框
第四部分：实用工具类
（图片来源网络，侵删）
- 间距与浮动
- 文本对齐与显示
- 响应式工具类
第五部分：一个完整的实例

动手实践：构建一个简单的企业官网首页
总结与资源

第一部分：入门与基础

什么是 Bootstrap？

Bootstrap 是一个由 Twitter 开发并开源的前端框架，它包含了大量的 HTML、CSS 和 JavaScript 的预设代码，旨在帮助开发者快速构建出美观、响应式且功能完善的网站和 Web 应用，你可以把它理解为一个“积木盒”，里面提供了各种标准化的网页组件（如按钮、导航栏、轮播图等），你只需要像搭积木一样把它们组合起来，就能快速搭建出页面。

为什么选择 Bootstrap 3.0？

移动优先：Bootstrap 3 从一开始就为移动设备进行设计，然后通过媒体查询逐步增强对平板和桌面设备的支持，其核心理念是“移动设备优先，然后逐步增强”。
响应式设计：一套代码可以完美适配手机、平板和桌面电脑等多种屏幕尺寸，大大减少了开发适配不同设备的工作量。
丰富的组件：提供了大量开箱即用的组件，如导航栏、下拉菜单、模态框、轮播图、缩略图等，极大地提高了开发效率。
强大的栅格系统：12列的响应式栅格系统是布局的基石，让页面结构变得清晰、灵活且易于控制。
浏览器兼容性好：支持所有主流的现代浏览器，包括旧版的 Internet Explorer (IE8+)。

如何引入 Bootstrap 3.0？

有两种主要方式：

使用 CDN（推荐）

这是最简单、最快捷的方式，特别适合初学者和快速原型开发，你只需要在 HTML 文件的 <head> 标签中引入 Bootstrap 的 CSS 和 JavaScript 文件链接即可。

<!-- Bootstrap 3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选：引入 Bootstrap 主题文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 注意：所有 Bootstrap 的 JavaScript 插件都依赖于 jQuery -->
<!-- jQuery (必须先引入) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

下载并本地引入

访问 Bootstrap 官网的旧版本页面，找到 Bootstrap 3 的下载链接。
下载后,你会得到一个压缩包，解压后包含三个主要文件夹：
- css/：存放样式文件（bootstrap.min.css, bootstrap-theme.min.css）。
- js/：存放 JavaScript 文件（bootstrap.min.js）。
- fonts/：存放图标字体文件（Glyphicons）。
将这些文件放在你的项目目录中,然后像使用 CDN 一样在 HTML 中通过相对路径引入它们。

创建第一个页面：Bootstrap 的基本模板

这是使用 Bootstrap 开发任何页面时都应该遵循的标准模板。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- Bootstrap 3 的视口元标签，用于响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个 Bootstrap 页面</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Bootstrap 主题 CSS (可选) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- 你自己的自定义样式可以放在这里 -->
    <style>
        body {
            padding-top: 50px; /* 给顶部导航栏留出空间 */
        }
    </style>
</head>
<body>
    <!-- 这里放置你的页面内容 -->
    <!-- 引入 jQuery 和 Bootstrap 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>
</body>
</html>

第二部分：核心布局组件

响应式布局：栅格系统

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

核心概念：

容器：.container 或 .container-fluid。
- .container：有固定宽度，并在不同屏幕尺寸下居中，在小屏幕上宽度是 100%，在中等以上屏幕有固定宽度。
- .container-fluid：宽度始终是 100%，占满整个视口。
行：.row，必须放在 .container 内部，用于放置列，它设置了负的 margin 来抵消列的 padding。
列：.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>
    <p>调整浏览器窗口大小，查看响应式效果。</p>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

响应式列偏移：

如果想在列之间添加空白,可以使用 .col-md-offset-* 类。

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <!-- 向右偏移 4 列，使其居中 -->
    <div class="col-md-4 col-md-offset-4">.col-md-4 (偏移 4)</div>
</div>

导航栏

导航栏是网站的“门面”，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">
                <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="#">Brand</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="#">关于我们</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

轮播图

轮播图常用于展示网站的重要图片或信息。

基础示例：

<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="..." alt="第一张">
            <div class="carousel-caption">
                <h3>标题 1</h3>
                <p>描述 1</p>
            </div>
        </div>
        <div class="item">
            <img src="..." alt="第二张">
            <div class="carousel-caption">
                <h3>标题 2</h3>
                <p>描述 2</p>
            </div>
        </div>
        <div class="item">
            <img src="..." alt="第三张">
            <div class="carousel-caption">
                <h3>标题 3</h3>
                <p>描述 3</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">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    <!-- ... 其他缩略图 ... -->
</div>

面板：一个带标题和内容的容器。

<div class="panel panel-primary">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        面板内容
    </div>
</div>

第三部分：内容样式与交互组件

排版

Bootstrap 提供了一套默认的排版样式，包括标题、段落、列表等。

<h1> 到 <h6> 都有预设样式。
段落：<p> 标签有默认的 margin-bottom。
强调：<small>、<strong>、<em>、<cite> 等。
对齐：使用 .text-left, .text-center, .text-right, .text-justify 类。

表单

Bootstrap 的表单样式让表单元素看起来更统一、更美观。

基础示例：

<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>

按钮

Bootstrap 提供了多种样式的按钮。

<!-- 标准按钮 -->
<button type="button" class="btn btn-default">Default</button>
<!-- 主要按钮 -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- 成功按钮 -->
<button type="button" class="btn btn-success">Success</button>
<!-- 信息按钮 -->
<button type="button" class="btn btn-info">Info</button>
<!-- 警告按钮 -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- 危险按钮 -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- 链接按钮 -->
<button type="button" class="btn btn-link">Link</button>

模态框

模态框是一个覆盖在父窗体上的对话框。

触发模态框的按钮：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

模态框的 HTML 结构：

<!-- 模态框 -->
<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>

提示框与警告框

警告框：

<div class="alert alert-success" role="alert">
    <strong>成功！</strong> 操作已成功完成。
</div>
<div class="alert alert-warning" role="alert">
    <strong>警告！</strong> 请检查您的输入。
</div>

可关闭的警告框：

<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>提示！</strong> 这是一个可以关闭的警告框。
</div>

第四部分：实用工具类

Bootstrap 提供了大量“开箱即用”的工具类，让你可以快速为元素添加样式，而无需编写自定义 CSS。

浮动：.pull-left (左浮动), .pull-right (右浮动), .clearfix (清除浮动)。
显示：.show (强制显示), .hidden (隐藏), .invisible (视觉上隐藏，但仍占空间)。
文本对齐：.text-left, .text-center, .text-right, .text-justify。
垂直对齐：.top, .middle, .bottom (需要用在父元素上，如 .row)。
响应式工具类：.visible-xs-*, .hidden-xs 等，用于在不同屏幕尺寸下显示或隐藏元素。

第五部分：一个完整的实例

让我们动手创建一个简单的企业官网首页。

目标：

顶部一个固定导航栏。
一个大图轮播图。
一个关于我们的三列布局。
一个页脚。

代码实现：

<!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@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>
        /* 自定义样式 */
        .carousel {
            height: 500px;
            background-color: #000;
        }
        .carousel .item {
            height: 500px;
            background-color: #777;
        }
        .carousel img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
        .content-section {
            padding: 50px 0;
        }
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-inverse navbar-fixed-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="#">关于我们</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 轮播图 -->
    <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://picsum.photos/seed/slide1/1200/500" alt="Slide 1">
                <div class="carousel-caption">
                    <h1>欢迎来到我的公司</h1>
                    <p>我们致力于提供最优质的服务。</p>
                </div>
            </div>
            <div class="item">
                <img src="https://picsum.photos/seed/slide2/1200/500" alt="Slide 2">
                <div class="carousel-caption">
                    <h1>创新驱动未来</h1>
                    <p>探索无限可能。</p>
                </div>
            </div>
            <div class="item">
                <img src="https://picsum.photos/seed/slide3/1200/500" alt="Slide 3">
                <div class="carousel-caption">
                    <h1>客户至上</h1>
                    <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="content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center">
                    <span class="glyphicon glyphicon-glyphicon glyphicon-ok-circle" style="font-size: 48px;"></span>
                    <h3>专业可靠</h3>
                    <p>拥有多年的行业经验，为您提供最专业、最可靠的服务。</p>
                </div>
                <div class="col-md-4 text-center">
                    <span class="glyphicon glyphicon-glyphicon glyphicon-time" style="font-size: 48px;"></span>
                    <h3>高效快捷</h3>
                    <p>我们深知时间的重要性，承诺以最快的速度为您解决问题。</p>
                </div>
                <div class="col-md-4 text-center">
                    <span class="glyphicon glyphicon-glyphicon glyphicon-user" style="font-size: 48px;"></span>
                    <h3>贴心服务</h3>
                    <p>7x24小时客户支持，随时准备为您服务。</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 我的公司. 保留所有权利.</p>
        </div>
    </footer>
    <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 3.0 的核心概念和使用方法，从基础布局到复杂组件，再到实用工具类，Bootstrap 3 为你提供了一个强大的工具箱，让你能够快速构建出响应式、美观的网站。

核心要点回顾：

响应式是核心：始终记住 viewport 标签和栅格系统的响应式特性。
组件化思维：优先使用 Bootstrap 提供的现成组件，而不是自己从零开始写。
类驱动：Bootstrap 的样式主要通过添加/移除 CSS 类来实现，而不是内联样式或自定义 CSS 文件（除非必要）。
依赖关系：Bootstrap 的 JavaScript 组件（如模态框、下拉菜单）依赖于 jQuery，请确保正确引入顺序。

学习资源

Bootstrap 3.0 官方文档：最权威、最全面的参考资料，包含了所有组件和工具类的详细用法和示例。
Bootstrap 3.0 官方示例：官方提供的一些可以直接使用的页面模板，是学习和借鉴的好地方。
Glyphicons 图标库：Bootstrap 3 自带的图标库，可以免费使用。
Bootstrap 3 在线定制工具：可以按需下载 Bootstrap 组件，减小文件体积。

虽然 Bootstrap 4 和 5 已经发布，但 Bootstrap 3 仍然因其稳定性和广泛的存量项目而具有重要价值，希望这份教程能帮助你顺利入门！

Bootstrap 3.0教程怎么学？入门到精通关键步骤？

目录

第一部分：入门与基础

什么是 Bootstrap？

为什么选择 Bootstrap 3.0？

如何引入 Bootstrap 3.0？

创建第一个页面：Bootstrap 的基本模板

第二部分：核心布局组件

响应式布局：栅格系统

导航栏

轮播图

缩略图与面板

第三部分：内容样式与交互组件

排版

表单

按钮

模态框

提示框与警告框

第四部分：实用工具类

第五部分：一个完整的实例

总结与资源

学习资源