Bootstrap 4 - кнопка расширения SASS не работает с тегом привязки?
Мне нравится стиль кнопок по умолчанию из pre-Bootstrap 4. Чтобы попытаться создать свою собственную, я придумал следующий SASS:
.btn-default {
@extend .btn;
border-color: #A5A5A5;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
Это работает должным образом, если я использую тег <button>, но не работает, если я использую тег <a>. Почему это не сработает на обоих?
<a href = "#" class = "btn btn-default">
Test Anchor
</a>
<button type = "submit" class = "btn btn-default">
Test Button
</button>
Почему это не работает с тегом привязки, если вы обычно можете назначить класс .btn тегу привязки, и он будет стилизовать его как кнопку?
Ответы 2
Тег <a> не имеет поведения кнопки. Inorder попробуйте следующий код
a.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Кнопка начальной загрузки имеет радиус границы по умолчанию. Если вы хотите переопределить его, будьте более конкретным в своем классе и переопределите загрузочный css
Я не пытаюсь обойти кнопку Bootstrap, я пытаюсь заставить CSS, который вы включили выше, чтобы тег привязки выглядел как кнопка. Единственное, чего не хватает в приведенном выше коде, - это радиус границы. Я попытался добавить border-radius: .25rem; с приведенным выше кодом, но похоже, что это не сработало.
Сделайте !important и проверьте
Нет. Нет. Я также просто читал, где это не работает в IE. Я закончил тем, что изменил вторичный цвет кнопки Bootstrap, и похоже, что это работает как с кнопкой, так и с привязкой ...
Я не думаю, что вам нужно @extend .btn, поскольку вы уже используете .btn.
Все другие варианты btn-* имеют color, background-color и border-color, поэтому в CSS вы можете создать btn-default с помощью:
.btn-default{
color:#333;
background-color:#bbb;
border-color:#a5a5a5
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
Способ Bootstrap SASS - использовать вариант кнопки @mixin ...
.btn-default {
@include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}
Демо: https://www.codeply.com/go/CWJidmeI1D
Вот параметры миксина с кнопочным вариантом:
button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)
Спасибо! CSS работает так, как ожидалось. Я все еще новичок в SASS и предпочел бы такой способ. Пробовал этот SASS, и у него отсутствует только эффект пылесоса. Я попытаюсь изучить и поиграть с @mixin, чтобы посмотреть, смогу ли я заставить его также пылесосить.
YW! Да, третий параметр управляет этим параметром, поэтому вы можете изменить его по мере необходимости.
Спасибо, это приблизило меня. Единственное, чего не хватает, это border-radius. Я попытался добавить его, а затем установить на $ btn-border-radius, что не сработало. Затем найдите радиус кнопки Bootstrap и попытайтесь установить мой на 0,25 rem, но это тоже не сработало. Вы знаете, как установить радиус границы для тега привязки?