Bootstrap 是一个流行的前端开发框架，由 Twitter 开发，用于快速构建响应式和移动优先的网站。在"20分钟打造属于你的Bootstrap站点"的教程中，我们将学习如何利用 Bootstrap 的基本组件和结构创建一个简单的网站。
首先，我们需要一个基本的 HTML 模板作为起点。这个模板会包含 Bootstrap 所需的文件，以便我们可以使用其样式和功能。在提供的代码示例中，我们看到一个基本的 HTML 结构，包括 `<!DOCTYPE html>`、`<head>` 和 `<body>` 标签。在 `<head>` 部分，我们定义了页面标题，并添加了一个简单的 CSS 样式，将背景颜色设为淡灰色，方便观察布局。
接下来，为了使用 Bootstrap，我们需要引入其 CSS 文件。这里选择了通过 Content Delivery Network (CDN) 引入 `bootstrap-combined.min.css`，这是一种便捷的方式，无需下载文件。引入 CSS 文件后，Bootstrap 的样式就能应用到我们的页面上。
Bootstrap 的关键组件之一是 `.container` 类，它创建了一个居中对齐的区域，适合放置其他内容。`.container` 类具有响应式设计，会根据屏幕宽度自动调整宽度。在 `<body>` 标签内，我们创建一个带有 `.container` 类的 `div`，作为页面内容的容器。
教程中还展示了如何添加标题和导航。通过添加 `<h1>` 标签，我们可以创建页面标题。对于导航，Bootstrap 提供了 `.navbar` 类，可以创建多种类型的导航条。在这里，我们使用 `.navbar-inverse` 类创建了一个黑色背景的导航条，并添加了一个包含链接的无序列表，每个链接用 `<li>` 标签包裹，并与 `<a>` 标签配合使用。
`.navbar` 的子元素 `.nav-collapse` 用于实现响应式导航。当页面宽度小于 970px 时，导航条会变为可折叠的视图，以适应小屏幕设备。这通过设置 `height:auto` 的内联样式来实现。
通过这个简短的教程，我们掌握了 Bootstrap 的基本用法，包括创建基本的 HTML 模板、引入 Bootstrap CSS、使用 `.container` 类创建布局、以及创建响应式导航条。这只是 Bootstrap 功能的冰山一角，实际上，Bootstrap 还提供了许多其他组件，如按钮、表单、栅格系统、模态框等，可以用来构建更复杂的网页布局和交互。对于想要深入学习 Bootstrap 的开发者来说，可以通过官方文档和其他资源进一步探索其全部功能。
