是否在bootstrap-4中删除标签

zvokhttg  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(5)|浏览(100)

之前在bootstrap中有一个名为label的组件,请参阅这里的文档和下面的示例:

<h3>Example heading <span class="label label-default">New</span></h3>

我无法在bootstrap-4中找到这些,这些是否已删除,有任何方法可以使用bootstrap-4获得此信息。

qhhrdooz

qhhrdooz1#

好像现在标签都做了标签了,看文档。标签here的文档。

<h1>Example heading <span class="tag tag-default">New</span></h1>
klh5stk1

klh5stk12#

最后的V 4个 Bootstrap 、标签(和标记)已重命名为徽章https://getbootstrap.com/docs/4.0/components/badge/

00jrzges

00jrzges3#

在他们声称的'https://v4-alpha.getbootstrap.com/migration/#labels-badges-and-tags'中,'badge'-component被删除,'label'在'tag'中被重命名(但好吧:* alpha1 *!);
在'https://getbootstrap.com/docs/4.3/migration/#labels-and-badges'中,不再有'tag'。
在“组件”部分中找不到“标签”。在“组件”部分中找不到“标记”。
搜索“.label”,您会发现

  • 进度/标签(https://getbootstrap.com/docs/4.3/components/progress/#labels)
  • 表单/复选框和单选框>无标签(https://getbootstrap.com/docs/4.3/components/forms/#without-labels)
  • 表单/布局>表单网格>水平表单>水平表单标签大小(https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form-label-sizing)
  • 按钮组/基本示例>确保正确的角色并提供标签(https://getbootstrap.com/docs/4.3/components/button-group/#ensure-correct-role-and-provide-a-label)

您会再次在组件中找到徽章。因此,目前“标签”和“标记”组件仍然被“徽章”取代。
如果你想有概括的标签,回到你自己的标签(这里是SASS):

.label
    display: inline-block
    font-size: 11px
    font-weight: 600
    padding: 3px 6px
    border: 1px solid transparent
    min-width: 10px
    line-height: 1
    color: #fff
    text-align: center
    white-space: nowrap
    vertical-align: middle
    border-radius: 99999px
    &.label-outlined
        background-color: transparent
        &.label-primary
            border-color: #2196F3
            color: #2196F3
        &.label-success
            border-color: #64DD17
            color: #64DD17
col17t5w

col17t5w4#

现在它被重命名为badge.使用它像下面的例子:

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
uelo1irk

uelo1irk5#

如果您使用的是最新的Bootstrap 5.2,则上述内容都不起作用。这才是正确的做法:

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

相关问题