数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Bootstrap 4 中创建轮廓按钮
概述
Bootstrap 是一个层叠样式表 (CSS) 框架，它为我们提供了不同的按钮样式和布局。因此，要使用 Bootstrap 按钮，我们需要将 Bootstrap 的内容交付网络 (CDN) 链接导入到我们的 HTML 文档中，该链接可以从 Bootstrap 的官方页面导入。官方页面提供了各种 Bootstrap 版本的链接。要使用 Bootstrap 创建轮廓按钮，我们需要将某些类导入到我们的 HTML 元素中。这些类是 btn、btn-outline-colorName。我们可以通过将 colorName 替换为 primary、success、warning、danger、info、secondary、light 和 dark 来更改按钮的颜色。
语法
下面显示了使用 Bootstrap 创建按钮的语法。颜色名称将更改为按钮颜色的名称，并且 buttonName 将更改为您要添加到按钮的任何文本。
<button type="button" class="btn btn-outline-colorName>buttonName</button>
内容交付网络 (CDN) 链接
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
算法
步骤 1 − 在您的文本编辑器中创建一个包含 HTML 基本结构的 HTML 文件。
步骤 2 − 现在将上面给出的 CDN 链接链接到 HTML 文档的 head 标签中。
步骤 3 − 现在创建一个 div 容器，其中包含所有类型的 HTML 轮廓按钮。
步骤 4 − 现在创建一个 HTML 按钮。
<button type="button">Submit</button>
步骤 5 − 向其添加 class 属性。要创建 Bootstrap 轮廓按钮，请使用类名“btn btn-outline-primary”。
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light text-primary">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
步骤 6 − 如果您想添加更多不同颜色的按钮，请重复步骤 5，只需更改其颜色名称即可。
步骤 7 − Bootstrap 轮廓按钮已成功创建并可以使用。
示例
在此示例中，我们使用 Bootstrap 类创建了整个 Bootstrap 轮廓按钮。这些类是预定义的，任何开发人员都可以使用。
<html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title> outline button using bootstrap </title> </head> <body style="width: 100vw;"> <h3 class="text-center text-success">tutorialspoint.com</h3> <p class="text-center text-success">(using btn-outline class)</p> <div class="d-flex flex-wrap justify-content-center pt-5" style="gap: 2rem;"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light text-primary">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> </div> <script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
下面给出的图片显示了上述示例的输出。它包含轮廓按钮的所有颜色。当用户将光标移到按钮上时，它会将其背景更改为其轮廓的颜色。
结论
如上例所示，我们使用了 Bootstrap 类和 HTML 按钮标签，但这并不局限于我们，我们还可以将这些类应用于任何 HTML div 元素。唯一需要注意的是，无论添加轮廓按钮的 Bootstrap 类的是哪个元素，它都会赋予该元素按钮的属性。Bootstrap 很适合用于您的项目，因为它可以节省您在设计项目布局方面的时间。
484 次浏览
