任何人都知道如何将 twitter bootstrap 徽章(或标签)从实心更改为轮廓?
问问题
10401 次
3 回答
11
将此 CSS 类添加到您的徽章:
.badge-outline {
color: black;
border: 1px solid #999;
background-color: transparent;
}
为其他颜色创建覆盖类:
.badge-outline.badge-success {
border-color: #468847;
}
于 2013-01-31T10:55:27.583 回答
4
徽章的典型 boostrap 配置具有与您的问题相关的这些关键部分(在他们的 中展开labels-badges.less
):
当前引导
.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
}
于 2013-01-31T11:13:58.730 回答
3
快速引导 4 sass 版本
@each $color, $value in $theme-colors {
.badge-outline-#{$color} {
border: $border-width solid $value;
color: $value !important;
background: transparent !important;
}
}
于 2020-06-14T23:21:52.040 回答