标签：两行 网站 代码 Bootstrap 基础知识 HTML CSS
Bootstrap 第 1 课：Bootstrap 基础知识
大家好，
Michael 在这里，在今天的课程中，我将介绍一个新的编程工具 - Bootstrap（我将在本博客中介绍的第八个编程工具）。
Bootstrap 到底是什么？好吧，简单地说，Bootstrap 是一个 HTML/CSS/JavaScript Web 开发工具，可让您创建对移动设备友好且易于响应的网站。
现在，您可能想知道这是否意味着您将学习一门具有全新语法的全新语言。 Bootstrap 的好处在于，虽然我将向大家介绍一些新语法，但如果您至少具备 HTML 和 CSS 的工作知识（所以如果您遵循我的 HTML 和 CSS教训，你应该很好去这里）。如果有帮助，请将 Bootstrap 视为 HTML 和 CSS 的补充。
现在，我们如何开始使用 Bootstrap？首先，我们要从下载最新版本的 Bootstrap 开始（截至 2022 年 9 月）-Bootstrap 5-from getbootstrap.com .
我说下载 Bootstrap 了吗？你可以这样做，但有一个更方便的解决方法。在您的 HTML 文件中，将这两行代码复制到您的文档中：
<link href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
这两行代码将为您提供运行 Bootstrap 所需的所有 CSS 和 JavaScript 脚本（是的，您需要这两个脚本才能充分利用 Bootstrap）。
- 关于这两行代码 - 每次您想为您的网站使用 Bootstrap 时都需要它们，因为如果您不在 HTML 文件顶部包含这两行代码，您的网站将无法在 Bootstrap 上运行
现在，让我们创建我们的第一个 Bootstrap 网站！看看下面的代码（记得在文件顶部包含我刚才提到的两行代码）：
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<h1>这是你的第一个 Bootstrap 网站！！！</h1>
</body>
</head>
如您所见，我们创建了一个简单的 Bootstrap 站点。诚然，网站上没有太多内容或 CSS 样式，但不用担心——我们将在接下来的几节课中介绍更酷的 Bootstrap 功能！
谢谢阅读，
迈克尔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/22840/50550909
标签：两行,网站,代码,Bootstrap,基础知识,HTML,CSS 来源： https://www.cnblogs.com/amboke/p/16671720.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。