Bootstrap 入门

在本教程中，您将学习如何使用Bootstrap 3 编译版本创建基本的Bootstrap模板。

Bootstrap 入门

在这里，您将了解使用Bootstrap创建网页有多么容易。在开始之前，请确保具有代码编辑器以及HTML和CSS的一些使用知识。

如果您只是刚开始进行Web开发，请从此处开始学习HTML基础知识»

好吧，让我们直接进入。

下载 Bootstrap 文件

有两个版本可供下载，编译的Bootstrap和Bootstrap源文件。您可以从此处下载Bootstrap文件。

编译下载包含CSS和JavaScript文件的编译和缩小版本，以及字体格式的图标，以便更快，更轻松地进行Web开发，而源代码则包含所有CSS和JavaScript的原始源文件以及文档的本地副本。

为了更好地理解，我们将重点放在已编译的Bootstrap文件上。这样可以节省您的时间，因为您不必每次都为单独的功能而烦恼，包括单独的文件。当您决定将站点移到生产环境中时，由于HTTP请求和下载大小较小，因为它可以编译和压缩文件，因此，它还可以提高网站的性能并节省宝贵的带宽。

了解文件结构

下载编译的Bootstrap后，解压缩压缩文件夹以查看结构。您将找到以下文件结构和内容。

bootstrap/
|—— css/
|   |—— bootstrap.css
|   |—— bootstrap.min.css
|   |—— bootstrap-theme.css
|   |—— bootstrap-theme.min.css
|—— js/
|   |—— bootstrap.js
|   |—— bootstrap.min.js
|—— fonts/
|   |—— glyphicons-halflings-regular.eot
|   |—— glyphicons-halflings-regular.svg
|   |—— glyphicons-halflings-regular.ttf
|   |—— glyphicons-halflings-regular.woff

正如您看到的，Bootstrap的编译版本提供了已编译的CSS和JS文件（bootstrap.*），以及已编译和缩小的CSS和JS（bootstrap.min.*）。

字体文件glyphicons-halflings-regular.*夹中有四个字体文件()。这些字体文件包含Glyphicon Halflings集中的250多个图标。

提示：这是Bootstrap的最基本形式，可以在任何Web项目中快速使用。请注意，Bootstrap的JavaScript插件要求包含jQuery。您可以在这里https://jquery.com/download/下载最新版本的jQuery表单。

使用 Bootstrap 创建您的第一个网页

到目前为止，您已经了解了Bootstrap文件的结构和用途，现在是时候真正使用Bootstrap了。在本节中，我们将创建一个基本的Bootstrap模板，其中包括我们在文件结构中提到的所有内容。

让我们逐步完成以下步骤。在本教程的最后，您将制作一个HTML文件，该文件在Web浏览器中显示“ Hello world”消息。

步骤1：建立基本的HTML文件

打开您喜欢的代码编辑器并创建一个新的HTML文件。从一个空窗口开始，然后键入以下代码，并将其另存为“ basic.html”在您的桌面上。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HTML File</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

测试看看‹/›

提示：始终在文档部分中包含视口<meta>标签<head>，以启用触摸缩放并确保在移动设备上正确呈现。还包括X-UA-Compatible带有edge模式的meta标记，该标记告诉Internet Explorer以可用的最高模式显示网页。

步骤2：将此HTML文件设置为Bootstrap模板

要将这个HTML文件设置为Bootstrap模板，只需添加相应的Bootstrap CSS和JS文件即可。您应该在页面底部添加JavaScript文件-在关闭标记（即）之前，以改善网页的性能。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Bootstrap Template</title>
    <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css">
    <!-- Optional Bootstrap theme -->
    <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="/static/script/jquery-1.11.3.min.js"></script>
    <script src="/static/script/bootstrap.min.js"></script>
</body>
</html>

测试看看‹/›

我们都准备好了！在添加Bootstrap的CSS和JS文件以及所需的jQuery库之后，我们可以开始使用Bootstrap框架开发任何站点或应用程序。

步骤3：保存文件

现在，将文件另存为“ bootstrap-template.html”。

注意：.html指定扩展名很重要-某些文本编辑器（例如记事本）会自动保存该扩展名.txt。

在浏览器中打开文件。导航到您的文件，然后双击它。它将在您的默认Web浏览器中打开。（如果没有，请打开浏览器并将文件拖到其中。）

通过CDN包含Bootstrap的文件

如果不想自己下载和托管引导或jQuery，还可以使用免费提供的CDN（Content Delivery Network）链接将引导的CSS和JavaScript文件以及jQuery库JavaScript文件包含在文档中。

CDN可以通过减少加载时间来提供性能优势，因为它们将Bootstrap的文件托管在遍布全球的多台服务器上，并且当用户请求文件时，将从最靠近它们的服务器提供文件。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic Bootstrap Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional Bootstrap theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

测试看看‹/›

为了实现子资源完整性(SRI)，在Bootstrap CDN中增加了完整性和crossorigin属性。它是一种安全功能，通过确保您的网站获取的文件（从CDN或任何位置）在没有意外操作的情况下交付，从而降低来自受损CDN的攻击风险。它的工作原理是允许您提供一个获取的文件必须匹配的加密散列。

属性integrity和crossorigin已添加到引导CDN实现子资源完整性(SRI)。它是一项安全功能，使您能够确保通过网站传递的文件（从CDN或其他任何地方）获取的文件都未经意外处理，从而减轻了CDN受到攻击的风险。通过允许您提供读取的文件必须匹配的加密散列来工作。

提示：如果您站点的访问者在访问其他站点时已经从同一CDN下载了Bootstrap的文件，则会从浏览器的缓存中加载而不是重新下载，从而缩短了加载时间。

Bootstrap 环境配置 Bootstrap 教程

查看更多关于 Bootstrap 入门的详细内容...

Bootstrap 入门