Bootstrap3.3.5教程，如何快速入门与实战应用？-建站教程-锦华智联科技

本教程将引导你从零开始，理解 Bootstrap 的核心概念,并构建一个响应式的网页。

（图片来源网络，侵删）

第一部分：Bootstrap 简介
- 什么是 Bootstrap？
- 为什么选择 Bootstrap 3.3.5？
- 核心概念：移动优先
第二部分：快速上手
- 步骤1：准备工作（引入 Bootstrap）
- 步骤2：创建你的第一个页面
第三部分：核心组件详解
- 布局系统
  - 栅格系统
  - 容器
- 基础样式
  - 排版
  - 表格
  - 表单
  - 按钮
- 组件
  - 导航栏
  - 轮播图
  - 模态框
  - 标签页
第四部分：进阶与最佳实践
（图片来源网络，侵删）
- 定制化
- 响应式设计实战
- 最佳实践
第五部分：资源与总结

第一部分：Bootstrap 简介

什么是 Bootstrap？

Bootstrap 是一个由 Twitter 开发的、用于快速开发 Web 应用程序和网站的前端框架，它包含基于 HTML、CSS 和 JavaScript 的设计模板，用于排版、表单、按钮、表格、导航、模态框、图片轮播等常见的 UI 组件。

Bootstrap 提供了一套预先写好的 CSS 和 JS 文件，让你能像搭积木一样，快速构建出美观且功能齐全的网页,而无需从零开始编写大量样式代码。

为什么选择 Bootstrap 3.3.5？

成熟稳定：v3 是一个经过长期市场检验的版本，非常稳定，bug 很少。
广泛兼容：对旧版浏览器（如 IE9 及以上）有很好的支持。
大量文档和插件：网络上关于 v3 的教程、文章和第三方插件非常丰富,遇到问题容易找到解决方案。
维护项目：如果你需要维护一个基于 Bootstrap 3 的旧项目，了解 v3 是必要的。

核心概念：移动优先

这是 Bootstrap 设计哲学的基石，它意味着 Bootstrap 的默认样式是为最小的屏幕（移动设备）设计的，然后通过媒体查询 逐步增强样式，以适应更大的屏幕（平板、桌面）。

实践中的体现： 在栅格系统中，你定义的是在小屏幕上元素如何排列，然后通过 .col-md-*、.col-lg-* 等类来告诉 Bootstrap 在中等或大屏幕上如何扩展。

第二部分：快速上手

步骤 1：准备工作（引入 Bootstrap）

你有两种主要方式可以将 Bootstrap 3.3.5 引入到你的项目中：

使用 CDN（推荐初学者） 这是最简单的方法，直接将 Bootstrap 的 CSS 和 JS 文件链接放在你的 HTML 中，优点是无需下载，利用了 CDN 的加速,加载速度快。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 1. 引入 Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选：引入 Bootstrap 的主题 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    我的第一个 Bootstrap 页面</title>
</head>
<body>
    <!-- 你的页面内容将放在这里 -->
    <!-- 2. 引入 jQuery 文件（Bootstrap 的 JS 依赖 jQuery） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- 3. 引入 Bootstrap 的 JS 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

注意： Bootstrap 3 的 JavaScript 组件（如模态框、轮播图）完全依赖 jQuery，因此必须先引入 jQuery，再引入 Bootstrap 的 JS 文件。

下载文件

访问 Bootstrap v3.3.5 官方下载页面。
点击 "Download Bootstrap" 按钮，下载 bootstrap-3.3.5-dist.zip 压缩包。
解压后，你会看到三个文件夹：css、js 和 fonts。
将这些文件夹放到你的项目根目录下，然后在 HTML 中通过相对路径引入它们。

<!-- 本地引入 -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<script src="path/to/js/jquery.min.js"></script>
<script src="path/to/js/bootstrap.min.js"></script>

步骤 2：创建你的第一个页面

让我们创建一个简单的、带有导航栏和按钮的页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 快速上手</title>
    <!-- 使用 CDN 引入 Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 为了演示，给 body 加一点内边距 */
        body {
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <!-- 1. 导航栏组件 -->
    <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-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">我的网站</a>
        </div>
        <!-- 导航链接 -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">lt;/a></li>
            <li><a href="#">联系</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 2. 主要内容区 -->
    <div class="container">
      <div class="jumbotron">
        <h1>欢迎来到 Bootstrap 世界！</h1>
        <p>这是一个使用 Bootstrap 3.3.5 构建的简单页面，下面是一些按钮示例。</p>
        <!-- 3. 按钮组件 -->
        <p>
          <a class="btn btn-primary btn-lg" href="#" role="button">主要按钮</a>
          <a class="btn btn-default btn-lg" href="#" role="button">默认按钮</a>
        </p>
      </div>
    </div>
    <!-- 引入 jQuery 和 Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

将以上代码保存为 .html 文件，用浏览器打开,你就能看到一个带有固定导航栏和欢迎内容的页面了。

第三部分：核心组件详解

布局系统

容器

容器是布局中最外层的元素,用于包裹和居中页面内容。

.container: 类似的固定宽度容器，根据视口大小变化（在大屏幕上居中，有最大宽度）。
.container-fluid: 100% 宽度的容器,会占据全部视口宽度。

<div class="container">
  <!-- 内容，宽度自适应 -->
</div>
<div class="container-fluid">
  <!-- 内容，宽度100% -->
</div>

栅格系统

这是 Bootstrap 最强大的功能，它是一个用于创建布局的、灵活且强大的系统。

工作原理：

行必须放在 .container (或 .container-fluid) 内。
使用 .row 来创建一行。
在 .row 内部，使用 .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* 来创建列。
- xs (Extra small): 超小屏幕（手机，<768px）
- sm (Small): 小屏幕（平板，≥768px）
- md (Medium): 中等屏幕（桌面，≥992px）
- lg (Large): 大屏幕（大桌面，≥1200px）
是一个数字，表示该列占用的 12 份份数中的几份。

示例：一个响应式布局

<div class="container">
  <h2>栅格系统示例</h2>
  <p>调整浏览器窗口大小，查看效果。</p>
  <div class="row">
    <!-- 在手机上，这列占满12份（全宽）。
         在平板及以上的屏幕上，它占6份（一半宽度）。 -->
    <div class="col-xs-12 col-sm-6" style="background-color: #d3f2c7; padding: 15px; border: 1px solid #ccc;">
      <p>左侧内容 - 在平板上占一半宽度。</p>
    </div>
    <div class="col-xs-12 col-sm-6" style="background-color: #a9dfbf; padding: 15px; border: 1px solid #ccc;">
      <p>右侧内容 - 在平板上占一半宽度。</p>
    </div>
  </div>
  <div class="row">
    <!-- 在所有屏幕上，这列都占12份（全宽）。 -->
    <div class="col-xs-12" style="background-color: #aed6f1; padding: 15px; border: 1px solid #ccc;">
      <p>底部内容 - 始终占满整行。</p>
    </div>
  </div>
</div>

基础样式

排版

Bootstrap 提供了标题、段落、强调文本等基本元素的样式，你只需使用标准的 HTML 标签即可。

<h1>h1. Bootstrap heading</h1>
<p>这是一个段落，<code>&lt;code&gt;</code> 标签用于显示代码片段。</p>
<p>这是一个 <strong>加粗</strong> 和一个 <em>斜体</em> 的文本。</p>
<blockquote>
  <p>这是一个引用块。</p>
</blockquote>

表格

添加 .table 类可以给表格添加基本的样式，添加 .table-striped 可以添加斑马线样式，.table-bordered 添加边框，.table-hover 添加鼠标悬停效果。

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>产品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>产品 A</td>
      <td>¥100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>产品 B</td>
      <td>¥200</td>
    </tr>
  </tbody>
</table>

表单

使用 .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="checkbox">
    <label>
      <input type="checkbox"> 记住我
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

按钮

Bootstrap 提供了多种样式的按钮,通过不同的类名实现。

.btn: 基础按钮样式。
.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link: 不同颜色和用途的按钮。
.btn-lg, .btn-sm, .btn-xs: 不同大小的按钮。

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

组件

导航栏

我们之前已经使用过，它是一个复杂的组件，可以包含品牌、导航链接、表单、按钮等，通过 navbar-* 类来控制其颜色（如 navbar-inverse）和位置（如 navbar-fixed-top）。

轮播图

一个用于展示多张图片或内容的幻灯片组件。

HTML 结构：

<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>
    <!-- 更多 item... -->
  </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>

注意： 轮播图组件依赖于 bootstrap-transition.js 和 bootstrap-carousel.js，但通常我们直接引入 bootstrap.min.js 即可,因为它包含了所有组件。

模态框

一个对话框/弹出窗口,用于显示额外的信息或表单。

触发模态框的按钮：

<!-- 按钮用于触发模态框 -->
<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>

标签页

用于在一小块区域中切换显示不同的内容。

HTML 结构：

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#profile" data-toggle="tab">个人资料</a></li>
  <li><a href="#messages" data-toggle="tab">消息</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">首页内容</div>
  <div class="tab-pane" id="profile">个人资料内容</div>
  <div class="tab-pane" id="messages">消息内容</div>
</div>

第四部分：进阶与最佳实践

定制化

Bootstrap 允许你根据自己的需求修改其样式。

Less 变量：如果你下载了源码，可以修改 variables.less 文件来改变颜色、字体、间距等核心变量，然后重新编译 CSS。
自定义编译：在官方定制页面上，你可以选择需要包含的组件和插件，并修改变量，然后下载一个为你量身定制的 Bootstrap 包。

响应式设计实战

始终从移动端开始设计，先确保内容在小屏幕上清晰可读、易于操作,然后逐步为更大的屏幕添加布局和样式。

技巧：

使用 <meta name="viewport" ...> 标签,这是实现响应式设计的关键。
善用栅格系统的偏移类（如 .col-md-offset-3）来居中列。
对于图片，使用 .img-responsive 类使其自适应容器宽度。

<img src="..." class="img-responsive" alt="响应式图片">

最佳实践

语义化 HTML：尽量使用 <header>, <nav>, <main>, <section>, <article>, <footer> 等语义化标签，这有利于 SEO 和可访问性。
保持结构清晰：遵循 Bootstrap 的嵌套结构（container > row > col）,不要随意打破它。
利用文档：Bootstrap v3.3.5 官方文档是你最强大的工具,几乎所有组件的用法和示例都能找到。

第五部分：资源与总结

资源

Bootstrap v3.3.5 官方文档：最权威、最全面的参考资料。
Bootstrap 3 在线定制：创建你自己的 Bootstrap 版本。
Bootstrap 3 实例：W3Schools 提供的实例集合,方便快速预览效果。
Glyphicons 图标库：Bootstrap 3 自带的图标集。

Bootstrap 3.3.5 是一个功能强大且易于上手的前端框架，通过本教程,你已经了解了如何：

引入 Bootstrap 到你的项目中。
使用 栅格系统 构建响应式布局。
应用 基础样式（排版、表格、表单、按钮）。
使用常用组件（导航栏、轮播图、模态框、标签页）。
理解了 移动优先 的核心思想。

掌握这些基础知识，你就可以开始使用 Bootstrap 3 快速构建美观且功能完善的网页了，随着实践的深入,你会越来越熟悉它的各种特性和技巧。

Bootstrap3.3.5教程，如何快速入门与实战应用？

目录