Bootstrap v2 教程学习笔记

Bootstrap v2 是一套流行的 HTML，CSS 和 JavaScript 框架，由 Twitter 开发。它被用于快速开发响应式网站和 Web 应用程序。本文将介绍 Bootstrap v2 的一些基本概念和常用组件。

安装 Bootstrap v2

要开始使用 Bootstrap v2，请在 HTML 文件中添加以下代码：

htmlCopy Code
<!-- 引入 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/2.3.2/css/bootstrap.min.css">

<!-- 可选的主题文件（如不需要可删除） -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/2.3.2/css/bootstrap-theme.min.css">

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>

<!-- 引入 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

常用组件

标签

Bootstrap v2 提供了多种标签样式，包括默认标签、成功标签、警告标签和危险标签等。示例代码如下：

htmlCopy Code
<span class="label">默认标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-important">重要标签</span>

表格

Bootstrap v2 还提供了易于使用和高度可定制的表格组件。示例代码如下：

htmlCopy Code
<table class="table table-bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

按钮

Bootstrap v2 提供了多种按钮样式，包括默认按钮、主要按钮、信息按钮和危险按钮等。示例代码如下：

htmlCopy Code
<button class="btn">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-danger">危险按钮</button>

结语

本文介绍了 Bootstrap v2 的基本概念和常用组件。在实际项目中，我们可以根据需要选择相应的组件来快速构建优美的界面。