如何在 Bootstrap 中创建自定义按钮 [重复]答案

【问题标题】：How do I create a custom button in Bootstrap [duplicate]如何在 Bootstrap 中创建自定义按钮 [重复]
【发布时间】：2021-04-15 20:33:12
【问题描述】：

我创建了一个带有 Bootstrap 的新 ASP.Net Core 5 应用程序。我想创建 btn-primary 按钮的完整副本，但使用新颜色。我不想替换 btn-primary。

我看到 bootstrap.min.css 和 bootstrap.bundle.min.js 被导入了。

创建新按钮并将其作为构建的一部分发布的正确方法是什么？

【问题讨论】：

你应该看看 Bootstrap 文档

标签： jquery css asp.net-core bootstrap-4

【解决方案1】：

只需在btn-primary 类之后添加一个新类即可

<button type="submit" class="btn-primary red_button">Submit</button>

然后创建一个具有新创建的类样式的新样式表

.red-button {
    background-color: red;
}

编写自己的类并在引导类之后包含它。

【讨论】：

【解决方案2】：

这只是使用 css，有更好的方法可以使用 sass 或构建 btn-default 的副本

只需添加一个额外的类修饰符，例如mybtn

.mybtn{
        background-color: pink!important;
        
}
.mybtn:hover{ background-color: #fa7aa0!important; color: white!important;}
.mybtn:active{
    background-color: #E75480!important;
    color: white!important;
        
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-default mybtn">Custom BTN</button>
</div>

</body>
</html>

【讨论】：