Bootstrap 入门

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

Bootstrap 入门

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

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

好吧,让我们直接进入。

下载 Bootstrap 文件

有两个版本可供下载,编译的BootstrapBootstrap源文件。您可以从此处下载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的文件,则会从浏览器的缓存中加载而不是重新下载,从而缩短了加载时间。