Bootstrap v2 教程

作者likuolei

Bootstrap 2（当前版本为 2.3.2，发布于 2013 年）是 Bootstrap 框架的早期版本，专注于响应式设计和组件化前端开发。虽然已被 Bootstrap 5取代，但仍有一些遗留项目或学习需求涉及 Bootstrap 2。以下是一个简明的 Bootstrap 2 教程，涵盖其核心功能、设置方法、关键组件和代码示例，适合初学者或需要回顾旧版本的用户。由于 Bootstrap 2 已不再维护，建议新项目使用 Bootstrap 5，但本教程将专注于 v2 的特性和用法。

1. Bootstrap 2 简介

  • 版本特点：
  • 发布于 2012 年，支持响应式 12 列网格系统。
  • 提供 CSS 样式、JavaScript 插件（如模态框、轮播）和组件（如导航栏、按钮）。
  • 使用 jQuery（1.7+）作为 JavaScript 依赖。
  • 支持 IE7+ 和现代浏览器。
  • 适用场景：
  • 维护旧项目。
  • 学习前端框架历史。
  • 快速构建简单的响应式页面。
  • 局限性：
  • 缺乏现代 CSS 特性（如 Flexbox、CSS 变量）。
  • 插件和样式较旧，响应式功能有限。
  • 不支持最新的可访问性标准。

2. 设置 Bootstrap 2

  1. 下载 Bootstrap 2：
  • 从 GitHub 存档下载 Bootstrap 2.3.2（https://github.com/twbs/bootstrap/releases/tag/v2.3.2）。
  • 或者使用 CDN（以下为历史 CDN 链接，可能不稳定）：
    html:disable-run <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> ¨K31K ¨K32K
  1. 基本 HTML 模板：
    创建一个简单的 HTML 文件，引入 Bootstrap 2 的 CSS 和 JS 文件，并确保包含 jQuery：
   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Bootstrap 2 示例</title>
       <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
   </head>
   <body>
       <div class="container">
           <h1>欢迎使用 Bootstrap 2</h1>
           <p>这是一个简单的 Bootstrap 2 页面。</p>
       </div>
       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
       <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
   </body>
   </html>
  1. 注意事项：
  • 确保 <meta name="viewport"> 启用响应式布局。
  • jQuery 必须在 Bootstrap 的 JS 文件之前加载。
  • bootstrap-combined.min.css 包含核心 CSS 和响应式样式。

3. 核心功能

Bootstrap 2 提供了以下主要功能和组件：

3.1 网格系统

  • 12 列响应式网格：使用 .container、.row 和 .span*（如 .span4）布局。
  • 示例：
  <div class="container">
      <div class="row">
          <div class="span4">
              <h2>列 1</h2>
              <p>占 4 列宽的内容。</p>
          </div>
          <div class="span8">
              <h2>列 2</h2>
              <p>占 8 列宽的内容。</p>
          </div>
      </div>
  </div>
  • 响应式类：
  • .visible-phone, .visible-tablet, .visible-desktop：控制设备可见性。
  • .hidden-phone, .hidden-tablet, .hidden-desktop：隐藏特定设备内容。

3.2 排版

  • 标题和段落：支持 <h1> 到 <h6>，以及 .lead 类突出段落。
  • 示例：
  <h1>主标题</h1>
  <p class="lead">这是一个突出显示的段落。</p>

3.3 按钮

  • 样式：.btn, .btn-primary, .btn-danger, .btn-large, .btn-small 等。
  • 示例：
  <button class="btn btn-primary">主要按钮</button>
  <button class="btn btn-danger btn-small">小型危险按钮</button>

3.4 导航栏

  • 固定导航栏：使用 .navbar, .navbar-fixed-top, .nav。
  • 示例：
  <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container">
              <a class="brand" href="#">我的网站</a>
              <ul class="nav">
                  <li class="active"><a href="#">首页</a></li>
                  <li><a href="#">关于</a></li>
              </ul>
          </div>
      </div>
  </div>

3.5 JavaScript 插件

Bootstrap 2 提供以下主要插件（需 jQuery 支持）：

  • Modal（模态框）：弹出对话框。
  • Dropdown（下拉菜单）：导航或按钮的下拉选项。
  • Scrollspy（滚动监听）：根据滚动更新导航高亮。
  • Tab（标签页）：切换内容面板。
  • Tooltip（工具提示）：悬停显示提示。
  • Popover（弹出框）：内容更丰富的提示框。
  • Alert（警告框）：可关闭的提示信息。
  • Button（按钮）：切换按钮状态。
  • Collapse（折叠）：展开/收起内容。
  • Carousel（轮播）：图片或内容幻灯片。
  • Typeahead（自动完成）：输入框自动补全。
  • Affix（附加导航）：固定导航栏在滚动时的位置。

4. 插件示例：轮播（Carousel）

以下是一个使用 Bootstrap 2 轮播插件的示例，展示图片幻灯片功能。

Bootstrap 2 轮播示例

Bootstrap 2 轮播示例

Slide 1

第一张幻灯片

这是第一张幻灯片的描述。

Slide 2

第二张幻灯片

这是第二张幻灯片的描述。

Slide 3

第三张幻灯片

这是第三张幻灯片的描述。

‹›暂停继续

5. 关键组件和插件用法

以下是 Bootstrap 2 中几个常用插件的简要说明和代码片段：

5.1 Modal（模态框）

  • 用途：显示弹出对话框。
  • 示例：
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
  <div class="modal hide fade" id="myModal">
      <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h3>模态框标题</h3>
      </div>
      <div class="modal-body">
          <p>这是模态框内容。</p>
      </div>
      <div class="modal-footer">
          <button class="btn" data-dismiss="modal">关闭</button>
          <button class="btn btn-primary">保存</button>
      </div>
  </div>

5.2 Dropdown（下拉菜单）

  • 用途：为导航或按钮添加下拉选项。
  • 示例：
  <div class="dropdown">
      <button class="btn dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="#">选项 1</a></li>
          <li><a href="#">选项 2</a></li>
      </ul>
  </div>

5.3 Tooltip（工具提示）

  • 用途：鼠标悬停时显示提示。
  • 初始化：
  <button class="btn" data-toggle="tooltip" title="这是一个提示">悬停提示</button>
  <script>
      $(document).ready(function() {
          $('[data-toggle="tooltip"]').tooltip();
      });
  </script>

5.4 Collapse（折叠）

  • 用途：切换内容的显示/隐藏。
  • 示例：
  <button class="btn" data-toggle="collapse" data-target="#collapseExample">切换折叠</button>
  <div class="collapse in" id="collapseExample">
      <div class="well">可折叠内容</div>
  </div>

5.5 Affix（附加导航）

  • 用途：固定导航栏在滚动时的位置。
  • 示例：
  <div id="sidebar" data-spy="affix" data-offset-top="60">
      <ul class="nav nav-list">
          <li><a href="#section1">章节 1</a></li>
          <li><a href="#section2">章节 2</a></li>
      </ul>
  </div>
  <script>
      $(document).ready(function() {
          $('#sidebar').affix();
      });
  </script>

6. 关键点

  • 网格系统：使用 .span* 而非 Bootstrap 5 的 .col-*，不支持 Flexbox。
  • 插件初始化：大多数插件（如 Tooltip、Popover）需要通过 jQuery 手动初始化。
  • 可访问性：Bootstrap 2 的 ARIA 支持较弱，需手动添加 role 和 aria-* 属性。
  • 响应式设计：
  • 使用 .container 固定宽度，或 .container-fluid 流式布局。
  • 通过 @media 查询调整布局。
  • JavaScript 依赖：所有插件依赖 jQuery，需确保正确加载。

7. 自定义 Bootstrap 2

  • 自定义 CSS：
  • 修改 bootstrap.css 或使用 LESS 文件编译：
    css .btn-primary { background-color: #ff5733; }
  • LESS 定制：
  • 下载 Bootstrap 2 的源代码，编辑 variables.less（如 @primary 颜色）。
  • 使用 lessc 编译生成自定义 CSS。
  • 动态控制插件：
  $('#myModal').modal('show'); // 显示模态框
  $('#myCarousel').carousel('next'); // 切换到下一项

8. 注意事项

  • 已废弃：Bootstrap 2 已停止维护，不建议用于新项目。
  • 浏览器兼容性：支持 IE7+，但在现代浏览器中可能出现样式问题。
  • 与现代版本差异：
  • 使用 data-toggle 而非 data-bs-toggle。
  • 插件命名和类名不同（如 .item 代替 .carousel-item）。
  • 缺少现代特性（如 CSS Grid、暗黑模式）。
  • CDN 稳定性：历史 CDN 可能失效，建议本地托管文件。
  • 升级建议：若维护旧项目，考虑迁移到 Bootstrap 5，参考 Bootstrap 迁移指南。

9. 更多信息

  • 官方文档：Bootstrap 2 的文档存档在 http://getbootstrap.com/2.3.2/（可能需要通过 Wayback Machine 查看）。
  • GitHub 仓库：查看 Bootstrap 2.3.2 发布。
  • 学习资源：
  • W3Schools Bootstrap 2 教程（存档版）。
  • 社区教程，如 Tuts+ 或 SitePoint（搜索 “Bootstrap 2 tutorial”）。

如果你需要特定组件的深入教程（如模态框、手风琴）、迁移到 Bootstrap 5 的帮助，或一个完整的 Bootstrap 2 示例项目，请告诉我！
“`

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注