css Bootstrap按钮在单击时没有轮廓

ztyzrc3y 于 2023-01-03 发布在 Bootstrap

关注(0)|答案(3)|浏览(190)

我看过很多Bootstrap按钮的例子，当我点击按钮时，它会显示一个轮廓。我试着复制它，但是我的按钮不显示轮廓。
出了什么问题？

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<!-- Body -->
<button type="button" class="btn btn-primary">Click me!</button>

css

来源：https://stackoverflow.com/questions/74961841/bootstrap-button-doesnt-have-an-outline-on-click

3条答案

按热度按时间

3pmvbmvn1#

您正在使用的bootstrap版本似乎没有这个大纲，可以在他们的网站上看到。似乎有大纲的最新版本是5. 1. 3版。
是否为：https://getbootstrap.com/docs/5.1/components/buttons/
没有：https://getbootstrap.com/docs/5.2/components/buttons/

赞(0）回复(0）举报 2023-01-03

pobjuy322#

你正在使用的是bootstrap 5.3 alpha，所以这个版本bootstrap改变了它的设计原则。其中之一是一个按钮点击的大纲。如果你想要一个大纲，你可以去它的旧版本。

Bootstrap 5（https://getbootstrap.com/docs/5.0/getting-started/introduction/）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div style="margin:10px;">
  <button class="btn btn-primary" type="submit">Button</button>
</div>

1.引导5.3 Alpha（https://getbootstrap.com）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div style="margin:10px;">
  <button class="btn btn-primary" type="submit">Button</button>
</div>

赞(0）回复(0）举报 2023-01-03

brqmpdu13#

您没有提供您所看到的示例。根据您的描述，我可能会猜测您的抱怨是关于Bootstrap v5 buttons的默认主题，而Bootstrap v4 buttons在单击时显示一个大纲。版本5确实只在使用Tab键导航时显示大纲。事实上，这发生在您的问题示例中：单击不显示轮廓，但选项卡导航显示轮廓。
在这种情况下，您有几个选项：
1.保持版本5及其默认行为。
1.降级到版本4以获得所需的行为。
1.创建一个自定义的CSS来恢复大纲。
1.创建或获取自定义主题。

赞(0）回复(0）举报 2023-01-03

我来回答

css Bootstrap按钮在单击时没有轮廓

3条答案

相关问题

热门标签

最新问答