热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Bootstrap4和Sass中设置自定义按钮文本颜色?

如何解决《如何在Bootstrap4和Sass中设置自定义按钮文本颜色?》经验,为你挑选了1个好方法。

我想在Bootstrap 4中创建一个带有白色(#fff)文本颜色的新按钮样式.Mixin button-variant根据背景颜色自动设置文本颜色.如何在不修改的情况下同时使用此mixin并设置颜色_buttons.scss

custom.scss

.my_button {
  @include button-variant(HOW TO SET TEXT COLOR TO WHITE?);
}

_buttons.scss

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

Zim.. 7

这类似于:如何使用sass在Bootstrap 4中创建新的颜色样式集

您需要使用@include作为自定义按钮,设置color:并传入适当的mixin参数...

.btn-custom {
    @include button-variant(pink, red, red, #444, #333, red);
    color: #fff;
}

https://www.codeply.com/go/EHwnjvUXac


相关:扩展Bootstrap 4和SASS



1> Zim..:

这类似于:如何使用sass在Bootstrap 4中创建新的颜色样式集

您需要使用@include作为自定义按钮,设置color:并传入适当的mixin参数...

.btn-custom {
    @include button-variant(pink, red, red, #444, #333, red);
    color: #fff;
}

https://www.codeply.com/go/EHwnjvUXac


相关:扩展Bootstrap 4和SASS


推荐阅读
author-avatar
良良8003
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有