学习Bootstrap 3：快速入门指南

Bootstrap是一种流行的前端框架，它使得开发人员能够快速构建响应式、现代化的Web应用程序。Bootstrap提供了一组CSS和JavaScript工具，可用于构建丰富的UI组件，例如导航栏、表格、表单和模态框等。

以下是一个快速入门指南，帮助你开始使用Bootstrap 3：

步骤1：下载Bootstrap

首先，你需要从Bootstrap的官方网站（https://getbootstrap.com/docs/3.4/getting-started/#download）下载Bootstrap。你可以选择下载已编译的CSS和JavaScript文件，也可以下载Sass源码（如果你想要更好地维护和定制你的项目）。

步骤2：创建HTML文件

在下载完Bootstrap之后，你需要创建一个HTML文件，并在文件头部引入Bootstrap的CSS和JavaScript文件。请注意，你需要按照正确的顺序引入这些文件，因为Bootstrap的JavaScript依赖于jQuery库。

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 3 Quickstart</title>
	<link rel="stylesheet" href="path/to/bootstrap.css">
	<script src="path/to/jquery.js"></script>
	<script src="path/to/bootstrap.js"></script>
</head>
<body>

</body>
</html>

步骤3：添加UI组件

一旦你的HTML文件与Bootstrap的文件连接，你就可以开始添加UI组件了。以下是一些常见的UI组件及其代码示例：

导航栏

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<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>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div><!--/.nav-collapse -->
	</div><!--/.container-fluid -->
</nav>

表格

<table class="table table-striped">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>

表单

<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>

模态框

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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">×</span></button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
         <p>Modal body text goes here.</p>
         </div>
         <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
         </div>
      </div>
   </div>
</div>

步骤4：自定义样式

Bootstrap的一大优势是其可定制性。你可以轻松地添加自定义样式，以满足你的项目需求。例如，以下CSS代码将更改导航栏链接的颜色：

.navbar-default .navbar-nav > li > a {
	color: #ff0000;
}

结论

本文为你提供了一个快速入门指南，帮助你开始学习如何使用Bootstrap 3构建现代化的Web应用程序。通过引入Bootstrap的CSS和JavaScript文件，然后添加UI组件和自定义样式，你可以轻松地开始构建响应式、现代化的Web应用程序。

我们还为Bootstrap 3初学者推出了 Bootstrap3 入门课程 ，零基础也能轻松入门！