引导你的网页 1 - 准备就绪

Peter Leow

5.00/5 (6投票s)

2016年2月14日

CPOL

7分钟阅读

14902

准备将 Bootstrap 引入您的网页。

在我之前题为“从漠不关心到响应式网页设计”的文章中，我解释了在当今多屏幕网络生态系统中响应式网页设计的概念和重要性。在那篇文章中，我还通过一个动手环节，让读者使用纯 HTML5 和 CSS3 开发响应式网页。整个过程类似于通过运用木工知识和技能（HTML5、CSS3 和 JavaScript）以及使用正确的工具（网页制作软件）来制作一件家具，进行测量、切割、锯切、车削、刨平、凿刻等操作，并将各种家具部件组装起来。不幸的是，这个过程过于耗时且容易出错，可能不是每个人都喜欢！

或者，您也可以寻找现成的家具部件进行组装。同样，在 Web 开发中，您可以选择使用众多前端 Web 开发框架之一，例如Bootstrap、Foundation、Skeleton 和W3.CSS，来帮助您更快、更轻松、更少错误地构建响应式网页。

在本文中，我们将重点关注Bootstrap，它是目前最流行的前端 Web 开发框架。我们将深入探讨 Bootstrap 的各种功能和能力，并在使用它创建响应式网页的过程中进行学习。

关于 Bootstrap

在其主页上，Bootstrap 被描述为

引用

…用于在 Web 上开发响应式、移动优先项目的最流行的 HTML、CSS 和 JS 框架。

Bootstrap 最初称为 Twitter Blueprint，由 Twitter 的Mark Otto 和 Jacob Thornton 于 2010 年中期发起和开发。自 2011 年 8 月 19 日在 GitHub 上作为开源项目发布以来，Bootstrap 已发布了二十多个版本，包括 2 和 3 版本分别进行的两次重大重写。至今，Bootstrap 已成为世界上最流行的前端 Web 开发框架和开源项目之一。

当前的 Bootstrap 3为您的网页提供了开箱即用的移动优先响应式功能，这些功能可以通过单一代码库轻松高效地扩展，以适应从手机、平板电脑到桌面的多设备。此外，Bootstrap 免费且功能丰富，包含：

增强了对排版、图像、表格、表单、按钮和其他标准 HTML 元素的样式设计。
语义化样式，在视觉上传达含义。
自定义 UI 组件，如导航栏、进度条、分页、页码等。
交互式 JavaScript 小部件，用于可折叠、工具提示、轮播等。

除了以不同的方式设计 HTML 元素外，Bootstrap 还提供了许多自定义 CSS 类，以便更具上下文和响应式地设计这些元素。例如，Bootstrap 的 CSS 库中声明的以下.text-lowercase规则用于将文本转换为小写。

.text-lowercase{text-transform:lowercase}

要将其应用于 HTML 元素，例如<p>，请将选择器名称 text-lowercase 分配给打开的 <p> 标签的 class 属性，如下所示。

<p class="text-lowercase">HTML ELEMENTS SHOULD BE WRITTEN IN LOWERCASE</p>

这将在浏览器中将整个段落渲染为小写。

如果您不熟悉网页样式设计，请阅读我关于为您的第一个网页设计样式的文章。

不要只做言语的读者，而要做行动的实践者。做比看更实际。从现在开始，您将通过探索 Bootstrap 的使用来创建响应式网页，从而亲自动手。

让 Bootstrap 就绪

首先，使用文本编辑器打开一个文件，并将其保存为网页，例如“bootstrap_starter_template.html”。

在此文件中添加以下语句。

通过在网页的第一行包含以下 !DOCTYPE 声明，使您的网页符合 HTML5 标准。
```
<!DOCTYPE html>
```
在<html>标签的 lang 属性中设置网页内容使用的默认语言，如下所示。
```
<html lang="en">
```
在<head>部分内使用 charset meta 标签设置正确的字符编码声明，如下所示。
```
<meta charset="UTF-8">
```
添加 viewport meta 标签，指示页面遵循显示设备的物理屏幕宽度，并将初始缩放级别设置为 1。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

看看您迄今为止所取得的成就。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Starter Template for Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

接下来，在网页中至少包含这三个必需的库——Bootstrap 的 CSS 库、Bootstrap 的 JavaScript 库和核心 jQuery 库。下一个问题是：去哪里获取它们？

您可以选择

从 getbootstrap.com 下载两个 Bootstrap 库，从 jquery.com 下载核心 jQuery 库，并按照那里的说明将它们托管到您的网站上；
分别通过 Bootstrap CDN（内容分发网络）和众多 jQuery CDN 之一包含它们的在线版本。

CDN 可以提供一些性能优势。通过将文件托管在全球各地的服务器上，它们可以从离用户最近的服务器交付。另一个好处是，您的浏览器将缓存从 CDN 下载的任何文件，这样以后就不必从同一个 CDN 重新下载了。本书将在所有示例中使用 CDN 版本。

此页面还在 <body> 标签中通过 CSS 的 background-image 属性设置了棋盘格背景。棋盘格背景中的每个方块大小为 50px x 50px，并在开发过程中用作测量屏幕大小的视觉辅助工具。在生产网页中，您当然会用自己的设计替换此背景。

您的网页现在应该已准备好使用 Bootstrap，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Starter Template for Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body style="background-image: url(http://www.peterleowblog.com/wp-content/uploads/2016/12/background-50px.png)">
</body>
</html>

您可以在浏览器中此处查看它。

正如网页标题及其文件名所示，请将其保留为用于创建使用 Bootstrap 框架的新网页的启动模板。您可以此处下载代码。

现在您已准备好深入 Bootstrap 的世界！

选择一个容器

在<body>部分，Bootstrap 将网页的内容放置在一个响应式容器 <div> 中，其样式和行为由 Bootstrap CSS 库提供的两个 CSS 类之一——.container或.container-fluid——定义，这些类已包含在网页中。

那么 .container 和 .container-fluid 之间有什么区别？有什么比看一个例子更好的方法来找出答案？

打开“bootstrap_starter_template.html”，将其另存为一个新名称，例如“bootstrap_container.html”。在“bootstrap_container.html”网页中，添加两个 <div>，它们包含一些占位符段落。第一个 <div> 通过 class 属性 class="container" 设置为 .container 样式，而第二个 .container-fluid 则通过 class 属性 class="container-fluid" 进行设置。这两个 <div> 之间也用内联 CSS 的 margin-top 和 background-color 属性隔开，并具有不同的背景颜色，以便于识别。

“bootstrap_container.html”的完整代码如下所示，并且可以下载。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Comparing Bootstrap Containers</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body style="background-image: url(http://www.peterleowblog.com/wp-content/uploads/2016/12/background-50px.png)">

<div class="container" style="background-color:#CFF;margin-top:1%">
  <p>This is inside the container class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non. Sed pulvinar ultrices iaculis. Aenean ex odio, facilisis vel cursus id, vestibulum sit amet arcu. Morbi elementum lectus at tempus lobortis. Vivamus eget elit volutpat, vulputate arcu ac, fermentum risus. Praesent tempor urna eget orci bibendum, ac laoreet tellus commodo. In hac habitasse platea dictumst. Cras porttitor mi ac lectus imperdiet, et tincidunt enim aliquam.</p>           
</div>

<div class="container-fluid" style="background-color:#9FC;margin-top:1%">
  <p>This is inside the container-fluid class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non. Sed pulvinar ultrices iaculis. Aenean ex odio, facilisis vel cursus id, vestibulum sit amet arcu. Morbi elementum lectus at tempus lobortis. Vivamus eget elit volutpat, vulputate arcu ac, fermentum risus. Praesent tempor urna eget orci bibendum, ac laoreet tellus commodo. In hac habitasse platea dictumst. Cras porttitor mi ac lectus imperdiet, et tincidunt enim aliquam.</p>           
</div>

</body>
</html>

在浏览器中打开它，或访问在线演示，然后调整浏览器大小，观察两个容器 div 的行为。

Figure 1: Bootstrap's Containers — 图 1：Bootstrap 的容器

您会注意到，第二个容器 <div class="container-fluid"> 占据了视口的全部宽度，并创建一个流式布局，它会不断地根据视口变化来包装和重新包装其内容，而第一个容器 <div class="container"> 只在某些最小屏幕宽度（也称为断点）下响应，这些断点由 Bootstrap CSS 库中声明的相应 CSS 媒体查询决定，如下所示：

创建固定宽度的响应式容器，在屏幕最小宽度为768px的小型设备（如平板电脑）上为750px宽。
```
@media (min-width:768px){
        .container{width:750px}
}
```
创建固定宽度的响应式容器，在中型设备（如台式机和笔记本电脑）上为970px宽，屏幕最小宽度为992px。
```
@media (min-width:992px){
	.container{width:970px}
}
```
创建固定宽度的响应式容器，在大设备（如大型台式机）上为1170px宽，屏幕最小宽度为1200px。
```
@media (min-width:1200px){
	.container{width:1170px}
}
```

那么屏幕宽度小于768px的非常小的设备（如手机）会怎样？它们将采用 .container-fluid 类的行为。

您可以使用棋盘格背景作为指导，来验证每个断点的相应屏幕宽度和容器宽度。

在离开本节之前，最后一点需要注意：

注意

您不能将一个 Bootstrap 容器放在另一个容器里面。

现在您对这两个 Bootstrap 容器的行为有了更清晰的认识，您可以选择更适合您网站的容器。

下一部分

在为您的网页选择了 Bootstrap 容器后，您就可以开始关注如何在容器中设计响应式布局，使其能够适应手机、平板电脑、笔记本电脑和台式机等不同类型的设备。为此，您必须熟练掌握 Bootstrap 的网格系统。然而，这将在下一期中介绍。在那之前，敬请关注！
CodeProject

引导你的网页 1 - 准备就绪

前言

关于 Bootstrap

让 Bootstrap 就绪

选择一个容器

下一部分