有人知道如何将Twitter Bootstrap的徽章(或标签)从实心改为轮廓吗?
有人知道如何将Twitter Bootstrap的徽章(或标签)从实心改为轮廓吗?
.badge-outline {
color: black;
border: 1px solid #999;
background-color: transparent;
}
为其他颜色创建覆盖类:
.badge-outline.badge-success {
border-color: #468847;
}
Bootstrap 5内置了您想要的效果支持。 边框类不仅可以创建轮廓,还允许控制颜色和粗细。
这个例子在徽章上使用了border
和border-primary
来创建蓝色轮廓。为了让“3”与轮廓颜色相匹配,它还使用了text-primary
。请注意,它只使用了badge
类,而没有使用badge-primary
,因为那样也会将背景颜色改为蓝色。
<span class="badge border border-primary text-primary">3</span>
快速引导4 sass版本
@each $color, $value in $theme-colors {
.badge-outline-#{$color} {
border: $border-width solid $value;
color: $value !important;
background: transparent !important;
}
}
徽章的Typical Bootstrap配置与您的问题相关,其关键部分包括以下内容(在其labels-badges.less
中):
当前的Bootstrap
.badge {
color: @white;
background-color: @grayLight;
/* no border is set, just a border-radius: 9x */
}
.badge {
// Important (red)
&-important { background-color: @errorText; }
&-important[href] { background-color: darken(@errorText, 10%); }
// Warnings (orange)
&-warning { background-color: @orange; }
&-warning[href] { background-color: darken(@orange, 10%); }
// Success (green)
&-success { background-color: @successText; }
&-success[href] { background-color: darken(@successText, 10%); }
// Info (turquoise)
&-info { background-color: @infoText; }
&-info[href] { background-color: darken(@infoText, 10%); }
// Inverse (black)
&-inverse { background-color: @grayDark; }
&-inverse[href] { background-color: darken(@grayDark, 10%); }
}
所以你可以通过以下方式覆盖它:
在后续的LESS代码中进行覆盖
.badge {
color: @black;
background-color: transparent;
border: 1px solid @grayLight; /* set your border */
}
.badge {
// Important (red)
&-important { background-color: transparent;
border-color: @errorText;
color: #errorText; /* maybe change color? up to you. */
}
&-important[href] { background-color: transparent;
border-color: darken(@errorText, 10%);
color: darken(@errorText, 10%); /* ??? */
}
etc... for -warning, -success, -info, -inverse
}