Bootstrap 是一个流行的前端框架，它可以帮助开发者快速创建美观、响应式的网页。Bootstrap3 是 Bootstrap 的一个版本，它提供了大量的工具和组件，使得构建网页变得更加简单和高效。本指南将为你提供一个轻松掌握 Bootstrap3 的入门教程，帮助你快速入门，打造属于自己的响应式网页。
Bootstrap3 简介
Bootstrap3 是 Bootstrap 的第三个主要版本，它于 2014 年发布。相比之前的版本，Bootstrap3 做了许多改进，包括：
- 更好的响应式设计
- 更简洁的代码
- 更丰富的组件
- 更好的兼容性
安装 Bootstrap3
要开始使用 Bootstrap3，首先需要将其下载到你的项目中。你可以在 Bootstrap 的官方网站（http://getbootstrap.com/）上下载最新的 Bootstrap3 版本。
下载和引入
- 访问 Bootstrap 官方网站，选择合适的下载版本。
- 下载 ZIP 文件并解压。
- 将
css和js文件夹中的文件引入你的 HTML 文件中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3 入门指南</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
...
<script src="js/bootstrap.min.js"></script>
</body>
</html>
基本布局
Bootstrap3 提供了一个响应式网格系统，可以帮助你轻松地构建网页布局。以下是网格系统的基本用法：
<div class="container">
<div class="row">
<div class="col-md-4">列1</div>
<div class="col-md-4">列2</div>
<div class="col-md-4">列3</div>
</div>
</div>
在上面的例子中，我们使用了 container 类来创建一个容器，然后使用 row 类创建了一行。在这个行中，我们使用了三个 col-md-4 类来创建三个列，每个列宽度为 1/3。
基本样式
Bootstrap3 提供了大量的样式类，可以帮助你快速地美化网页。以下是一些常用的样式类：
- 文本颜色：
.text-muted、.text-primary、.text-success等 - 文本对齐：
.text-left、.text-center、.text-right等 - 文本大小：
.h1、.h2、.h3等 - 段落：
.lead等
<div class="container">
<div class="row">
<div class="col-md-4">
<p class="text-muted">这是一个灰色的文本。</p>
<p class="text-primary">这是一个蓝色的文本。</p>
<p class="text-success">这是一个绿色的文本。</p>
<h1 class="h2">这是一个标题</h1>
<p class="lead">这是一个段落，它使用了 lead 类。</p>
</div>
</div>
</div>
组件
Bootstrap3 提供了大量的组件，可以帮助你快速地构建网页。以下是一些常用的组件：
- 按钮：
.btn、.btn-primary、.btn-success等 - 表格：
.table、.table-bordered、.table-hover等 - 表单：
.form-group、.form-control、.form-inline等 - 导航栏：
.navbar、.navbar-default、.navbar-brand等
<div class="container">
<div class="row">
<div class="col-md-4">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-success">按钮</button>
<table class="table table-bordered">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
<form class="form-inline">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">导航栏</a>
</div>
<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">(当前)</span></a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
总结
通过本指南，你应该已经对 Bootstrap3 有了一个基本的了解。现在，你可以开始使用 Bootstrap3 来创建美观、响应式的网页了。祝你学习愉快！