Bootstrap - 起步模板演示

你好，有抱负的网页开发者们！今天，我们将深入Bootstrap的奇妙世界，探索它的起步模板。作为你友好的计算机科学老师，我很兴奋能引导你完成这次旅程。所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始吧！

Bootstrap-Starter template Demo

起步模板是什么？

在我们深入了解Bootstrap的起步模板之前，让我们先了解一下起步模板究竟是什么。把它想象成你网站结构的预制食谱。就像食谱给你基本的食材和制作美味菜肴的指导一样，起步模板为你提供了启动网页项目所需的HTML、CSS和JavaScript。

在Bootstrap的背景下，起步模板是一个包含所有必要Bootstrap组件和依赖项的基本HTML文件。这就像有一个空白的画布，所有的绘画工具都已经准备好，随时可以使用！

为什么使用起步模板？

你可能会有疑问，“我为什么要麻烦使用起步模板？难道我不能从头开始编写所有内容吗？”当然，你可以从头开始编写，但让我分享一个我早期教学经历中的小故事。

我曾经有一个学生，他坚持从头开始构建一切。虽然令人钦佩，但他花了数周时间解决基本的布局问题，而Bootstrap几分钟就能解决。不要像那个学生一样——要聪明工作，而不是辛苦工作！

使用起步模板：

节省时间
确保你有所有必要的依赖项
提供一个一致的起点
帮助你专注于实际内容和功能

现在我们明白了“为什么”，让我们来看看“怎么做”！

Bootstrap 起步模板

下面是一个基本的Bootstrap起步模板的样子：

<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必要的元标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>你好，世界！</title>
</head>
<body>
<h1>你好，世界！</h1>

<!-- 可选的JavaScript，选择其中一个！ -->

<!-- 选项1：包含Popper的Bootstrap捆绑包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- 选项2：单独的Popper和Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

让我们逐个分析：

文档类型声明

<!doctype html>

这行告诉浏览器这是一个HTML5文档。就像在开始对话前介绍自己一样，它为接下来的内容设定了基调。

HTML标签

<html lang="zh-CN">

这打开我们的HTML文档，并指定语言为中文。就像打开一本书，看到它是用中文写的。

头部部分

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>你好，世界！</title>
</head>

<head>部分包含关于我们文档的元数据。让我们来分解它：

<meta charset="utf-8">：这指定了HTML文档的字符编码。UTF-8是一种通用的字符编码，可以表示任何字符。
<meta name="viewport" content="width=device-width, initial-scale=1">：这确保网页是响应式的，并在所有设备上看起来都很好。
<link>标签从CDN导入Bootstrap的CSS文件。这就像导入一个网页的样式指南。
<title>：这设置了你的网页标题，它出现在浏览器标签中。

身体部分

<body>
<h1>你好，世界！</h1>

<!-- 可选的JavaScript，选择其中一个！ -->

<!-- 选项1：包含Popper的Bootstrap捆绑包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- 选项2：单独的Popper和Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

<body>部分是网页主要内容的地方。在这个起步模板中，它包括：

一个简单的“你好，世界！”标题来开始。
Bootstrap功能的JavaScript文件。你有两个选项：

选项1：一个包含Bootstrap和Popper.js（Bootstrap某些组件依赖的库）的单个捆绑文件。
选项2：单独的Popper.js和Bootstrap文件（默认注释掉）。

使用起步模板

现在我们已经剖析了我们的起步模板，让我们来使用它！以下是如何利用这个模板构建一个简单示例：

<!doctype html>
<html lang="zh-CN">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>我的第一个Bootstrap页面</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">欢迎来到我的网站！</h1>
<p class="lead">这是一个简单的英雄单位（hero unit），一个简单的类似于大字报（jumbotron）的组件，用于对特色内容或信息进行额外关注。</p>
<hr class="my-4">
<p>它使用排版和间距的实用类来在更大的容器中隔开内容。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

在这个示例中，我们添加了一个简单的英雄单位（一个突出的消息框）使用Bootstrap类。让我们分解一下我们添加的内容：

<div class="container">：这创建了一个响应式的固定宽度容器。
<h1 class="mt-5">：mt-5类在标题顶部添加了边距。
<p class="lead">：lead类使这段文字更加突出。
<hr class="my-4">：这创建了一个水平线，带有y轴的边距。
<a class="btn btn-primary btn-lg">：这创建了一个大型的、主要颜色的按钮。

结论

就是这样，伙计们！我们已经穿越了Bootstrap起步模板的土地，从了解它们是什么到使用它们创建一个简单的网页。记住，这只是一个开始。Bootstrap提供了大量的组件和工具，你可以用来创建出色的响应式网站。

在我们结束之前，我想起了我另一个学生。她从同一个模板开始，学期结束时，创建了一个作品集网站，并因此获得了一份实习机会。谁知道呢？也许几个月后那就是你！

继续练习，继续探索，最重要的是，享受其中的乐趣。网页开发既是一门艺术，也是一门科学，所以让你的创造力发光吧。下次见，快乐编码！

Credits: Image by storyset