HTML/CSS:如何设计Div的样式，使其与Bootstrap按钮的样式/行为相匹配

Question

我有一个使用Bootstrap按钮class="btn btn-sm btn-outline-primary"的网页。

在同一个页面上，我用可点击的JavaScript呈现了一个Div。我给它分配了一个orders-data类：

element.classList.add('orders-data');

我想让Div使用一些CSS来匹配按钮的样式。这就是我目前所拥有的：

CSS

.orders-data {
border: 1px solid #007bff;
border-radius: 5px;
margin-top: 5px;
padding-left: 10px;
}
.orders-data:hover {
background-color: #007bff;
border: 1px solid #007bff;
color: white;
border-radius: 5px;
margin-top: 5px;
padding-left: 20px;

这似乎奏效了。但是，还有更优雅的方法吗？

谢谢！

Answer 1

您可以使用此样式使div元素类似于Bootstrap Button。

.orders-data {
cursor:pointer;
color: #fff;
background-color: #007bff;
border-color: #007bff;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
user-select: none;
display: inline-block;
font-weight: 400;
}
.orders-data:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;}

Answer 2

您可以将此样式添加到div:

.orders-data {
display: block;
width: 115px;
height: 25px;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: 25px;
background-color: #0d6efd;
border-color: #0d6efd;

}
.orders-data:hover {
background-color: #007bff;
border: 1px solid #007bff;
color: white;
border-radius: 5px;
margin-top: 5px;
padding-left: 20px;
}

<div class="orders-data"></div>

Answer 3

这看起来更像您想要的按钮：

.orders-data {
display: inline-block;
border: 1px solid transparent;
background-color: rgb(239, 239, 239);
border-radius: 3px;
line-height: 1.5;
font-size: 12px;
padding: 5px 10px;
text-align: center;
cursor: pointer;
}
.orders-data:active{
outline:5px auto rgb(14,98,201) ;
}

<div class='orders-data'>
Bootstrap Button
</div>

Answer 4

欢迎光临，兄弟，这是一项没有任何问题的工作，但你可以采取比这更快的方式你可以在引导程序中为div添加按钮类这个类是全局的，你可以在任何你想要的元素中使用它，比如

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-sm btn-outline-primary"> button</button>
<div class="btn btn-sm btn-outline-primary">
button
</div>

Answer 5

因为：您使用的element.classList.add('orders-data');，您可以通过循环将引导类添加到元素中，因此需要重新编写它们。

举例说明这个想法：

let el = document.querySelector('a');
const classS = ['btn', 'btn-sm', 'btn-outline-primary'];
for (i = 0; i < classS.length; i++) {
el.classList.add(classS[i])
}

.shadow {
box-shadow: 2px 2px 2px black
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-sm btn-outline-primary">hello</button>
<a class="shadow" href="#">the world</a>

(如果你的元素没有其他类，那么setAttribute马上就可以了(：

let el = document.querySelector('a');
el.setAttribute('class','btn btn-sm btn-outline-primary' ) ;

.shadow {
box-shadow: 2px 2px 2px black
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-sm btn-outline-primary">hello</button>
<a class="shadow" href="#">the world</a>
<p><code>setAttribute()</code> removes any value already there , shadow class is not there anymore!</p>