Question

我想为我的页面创建一些自定义按钮或自定义按钮组，但我不知道在哪里编辑按钮。我想改变一些事情：

活跃/正常状态
字体
文字/背景颜色
border

<div class="btn-group" id="category-switch">
<label class="btn btn-custom" ng-model="Test.radioModel" uib-btn-radio="Left" id="label-critic">left</label>
<label class="btn btn-custom" ng-model="Test.radioModel" uib-btn-radio="Middle" id="label-general">middke</label>
<label class="btn btn-custom" ng-model="Test.radioModel" uib-btn-radio="Right" id="label-support">right</label>
</div>

我首先尝试使用一些CSS格式化我的按钮

（无格式）

#category-switch{
            padding-top: 48px;
            padding-left: 17px;
            background: @navbar-background;
            border: 1px soild black;

            #label-critic{
                width: 85px;
                height: 26px;
                padding-top: 2px;
                background: @navbar-background;
                border: 1px soild black;
            }

            #label-general{
                width: 91px;
                height: 26px;
                padding-top: 2px;
                background: @navbar-background;
            }

            #label-support{
                width: 90px;
                height: 26px;
                padding-top: 2px;
                background: @navbar-background;
            }
        }

        .custom{
            border: 1px soild black;
        }

尝试完成后，我尝试复制默认按钮并编辑副本。我把它命名为自定义

编辑butons.less（默认bootstrap less文件）

.btn-custom {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

在variables.less中编辑

//CUSTOM BUTTON BGE
@btn-custom-color:               #fff;
@btn-custom-bg:                  #606060;
@btn-custom-border:              black;

这也行不通。最后看起来很喜欢这个，这绝对不是我想要的结果。

所以问题是：
如何自定义我的ui-bootstrap按钮组/按钮？

修改

似乎我的CSS / less部分是由于更改大小和添加按钮而起作用的。此更改已正确应用于我的按钮，但未应用边框/颜色的更改。

Answer 1

我已经对bootstrap按钮的默认布局进行了一些更改。我总是用css（或更少）。请记住，css总是覆盖以前设置的样式。因此，请务必最后加载自定义文件或添加

！重要

确保所有css样式都可以接受。 E.g：

#label-critic{
                width: 85px !important;
                height: 26px !important;
                padding-top: 2px !important;
                background: @navbar-background !important;
                border: 1px soild black !important;

这有帮助吗？如果不是问题是什么？不管你自己的css风格申请还是看起来很奇怪？如果它们看起来很怪异，那么你的造型本身就会出现问题，而不是引导按钮。

自定义UI-Bootstrap按钮/ Buttongroup

1 个答案: