如何在HTML中使用BootStrap

2022-10-14 10:12:45
865次极悦

相信大家对BootStrap框架的使用已经有所了解，Bootstrap 是一个开源 HTML、CSS 和 Javascript 框架，它通过预构建的响应类和其他实用程序使 UI 开发更加容易。这个开源框架目前为超过 1800 万个网站提供支持，预计未来这个数字还会增长。

Bootstrap 提供的可重用 JS 和 CSS JavaScript 可以帮助您实现您想要的结果。将 Bootstrap 与 HTML 结合使用可能会让初学者感到困惑。这是有关如何执行此操作的全面的分步指南。

先决条件

您需要具备 HTML/CSS 和 JS 的基本知识。

入门

要在 HTML 中包含 Bootstrap，您可以使用以下三种方法之一：

1. 使用引导 CDN

CSS

只需将此样式表链接复制到HTML文件的

<link rel= "stylesheet"  href= "http://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 完整性= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"  crossorigin = “匿名” >

一些组件的 JavaScript 功能，如下拉菜单、选项卡等，依赖于 jQuery 和 popper.js。因此，在加载引导 JavaScript 文件以使其正常运行之前，按以下顺序包含 jQuery 和 popper.js。

<script src= “http://code.jquery.com/jquery-3.3.1.slim.min.js” 完整性= “sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo”  crossorigin= “匿名” ></script>
<script src= “http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” 完整性= “sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1”  crossorigin= “匿名” ></脚本>
<script src= “http://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” 完整性= “sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM”  crossorigin= “匿名” ></script>

2.本地下载文件

您可以从http://getbootstrap.com/docs/4.3/getting-started/download/将文件本地下载到项目文件夹，而不是使用 CDN下载文件后，您可以将 bootstrap.min.css 文件和 bootstrap.min.js 文件包含在. 即使您使用下载的引导文件，您也必须在加载 bootstrap.min.js 之前包含 jquery.min.js 和 popper.min.js

3. 使用包管理器

使用“npm”、“yarn”等包管理器可以轻松地将引导程序拉入任何项目。由于 npm 是前端开发人员使用的最流行的包管理器，我们将继续使用 npm 命令来安装引导程序。在你的项目文件夹中输入以下命令(假设你已经在项目中初始化了 npm)

npm安装引导程序

此命令将在项目的“node_modules”文件夹中下载引导文件的本地副本。然后，您可以将 bootstrap.min.css 文件包含在. 如方法 2 中所述，您必须在加载 bootstrap.min.js 之前包含 jquery.min.js 和 popper.min.js。

用法

包含引导 CSS 和 js 后的示例 HTML 文件将如下所示(我们在下面的示例中使用了 CDN 方法。如果您选择任何其他方法，您可以使用正确的路径编辑样式表的 HREF 属性和 javascript 的 src 属性)：

<!doctype html>
 <html  lang= "en" > 
<head> <!-- 必需的元标记 --> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-宽度，初始比例=1，缩小到适合=否“ > <!-- Bootstrap CSS --> <link rel= "stylesheet" href= "http://stackpath.bootstrapcdn.com/bootstrap/4.3. 1/css/bootstrap.min.css”完整性= “sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin= “匿名” ><title>引导示例</title> </head>     
  <body> <!-- 先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS --> <script src= "http://code.jquery.com/jquery-3.3.1.slim.min.js"完整性= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin= "匿名" ></script> <script src= "http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/ popper.min.js"完整性 = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "匿名" ></script> <script src= "http://stackpath.bootstrapcdn.com/bootstrap/4.3。1/js/bootstrap.min.js"完整性=     
     "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"  crossorigin= "匿名" ></script> 
</body> </html>

一旦您使用上述任何一种方法将 Bootstrap 包含在您的项目中，您就可以轻松地使用 bootstrap 中可用的所有组件。

例如，要以原色创建 Bootstrap 按钮，您必须简单地使用标记

<button type= "button"  class= "btn btn-primary" >主要
</button>

仅使用这两个类，您将获得一个包含所有相关样式的按钮，从而节省您为默认 HTML 按钮设置样式的时间。

如何使用 Bootstrap 构建导航栏

通过添加以下 HTML 标记，可以使用 bootstrap 轻松构建排列良好的导航栏：

<nav class= "navbar navbar-expand-lg navbar-light bg-light" > 
<a class="navbar-brand" href="#" > Navbar </a> <button class= " navbar -toggler" type = “按钮”数据切换= “折叠”数据目标= “#navbarSupportedContent” aria-controls= “navbarSupportedContent” aria-expanded= “假” aria-label= “切换导航” > <span class= “navbar-toggler-图标" ></span></button> <div class= "collapse navbar-collapse" id=    
    "navbarSupportedContent" > 
< ul class= "navbar-nav mr-auto" > < li class= "nav-item active" > <a class="nav-link" href="#" >主页<span class= "sr -only" > (current) </span></a> < /li> <li class= "nav-item " > <a class="nav-link" href="#" > Link </a> < /li> <li class= "nav-item dropdown" > <a class= "nav-link dropdown-toggle"                   
          href= "#"  id= "navbarDropdown"  role= "button"  data-toggle= "dropdown"  aria-haspopup= "true"  aria-expanded= "false" > 
          Dropdown 
</a> <div class= "dropdown-menu " aria- labelledby = "navbarDropdown " > <a class="dropdown-item" href="#" >动作</a> <a class="dropdown-item" href="#" >另一个动作</a> <div class= "dropdown-divider" ></div> <a                 
           class= "dropdown-item"  href= "#" >这里有别的东西</a> 
</div> </li> <li class= "nav-item" > <a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" >禁用</a> </li> </ul> <form class= "form-inline my-2 my-lg-0" > <input类= “表单控制mr-sm-2”类型= “搜索”placeholder= "搜索" aria-label= "搜索" > <按钮                    
       class= "btn btn-outline-success my-2 my-sm-0"  type= "submit" >搜索</button> 
</form> </div> </nav>

此代码生成以下样式的导航栏，无需您自己编写单个 CSS 或 JS!如果大家想了解更多相关知识，不妨来关注一下本站的HTML教程，里面还有更丰富的知识等着大家去学习，希望对大家能够有所帮助。

上一篇：JDK9新特性概括下一篇：告诉你Windows中如何安装NodeJS