在本教程中，您将学习如何使用Bootstrap 3 编译版本创建基本的Bootstrap模板。
在这里，您将了解使用Bootstrap创建网页有多么容易。在开始之前，请确保具有代码编辑器以及HTML和CSS的一些使用知识。
如果您只是刚开始进行Web开发，请从此处开始学习HTML基础知识?
好吧，让我们直接进入。
有两个版本可供下载，编译的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。您可以在这里下载最新版本的jQuery表单。
到目前为止，您已经了解了Bootstrap文件的结构和用途，现在是时候真正使用Bootstrap了。在本节中，我们将创建一个基本的Bootstrap模板，其中包括我们在文件结构中提到的所有内容。
让我们逐步完成以下步骤。在本教程的最后，您将制作一个HTML文件，该文件在Web浏览器中显示“ Hello world”消息。
打开您喜欢的代码编辑器并创建一个新的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以可用的最高模式显示网页。
要将这个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框架开发任何站点或应用程序。
现在，将文件另存为“ bootstrap-template.html”。
注意：.html指定扩展名很重要-某些文本编辑器（例如记事本）会自动保存该扩展名.txt。
在浏览器中打开文件。导航到您的文件，然后双击它。它将在您的默认Web浏览器中打开。（如果没有，请打开浏览器并将文件拖到其中。）
如果不想自己下载和托管引导或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的文件，则会从浏览器的缓存中加载而不是重新下载，从而缩短了加载时间。