Bootstrap 创建一个网页学习笔记
什么是 Bootstrap？
Bootstrap 是一个流行的前端框架，由 Twitter 公司开发和维护。Bootstrap 可以帮助开发者快速、高效地构建响应式的 Web 应用程序和网站。
Bootstrap 提供了丰富的组件和工具，包括 HTML、CSS 和 JavaScript 的预定义代码片段、栅格系统、表单、导航、按钮、图标等等。由于 Bootstrap 的普及率和易用性，很多开发者都选择使用 Bootstrap 来构建他们的项目。
安装和使用 Bootstrap
安装 Bootstrap
要使用 Bootstrap，可以从官网下载最新版本的源码压缩包，解压后将其中的 css、js 和 fonts 文件夹复制到自己的项目中即可。
htmlCopy Code<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
栅格系统
Bootstrap 的栅格系统是一个灵活的、移动设备优先的布局系统。
htmlCopy Code<div class="container">
<div class="row">
<div class="col-md-6">左侧内容</div>
<div class="col-md-6">右侧内容</div>
</div>
</div>
导航栏
Bootstrap 的导航栏组件可以方便地实现响应式的导航栏。
htmlCopy Code<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
实例
下面是一个使用 Bootstrap 构建的简单网页。
htmlCopy Code<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 网页示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<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-collapse-1" aria-expanded="false">
<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 class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Hello, world!</h1>
<p>This is a simple example of a Bootstrap website.</p>
</div>
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
这个示例包含了一个响应式的导航栏和一个带有两列的栅格系统。在右侧列中加入了一个列表组件，使用了 Bootstrap 内置的样式。
结语
Bootstrap 提供了丰富的组件和工具，可以大大提高开发效率。使用 Bootstrap 可以让你更快地构建出漂亮、响应式的 Web 应用程序和网站。