为啥我的引导 btn 反转按钮显示为灰色而不是黑色渐变?

Posted

技术标签:

【中文标题】为啥我的引导 btn 反转按钮显示为灰色而不是黑色渐变?【英文标题】:Why are my bootstrap btn-inverted buttons showing up as grey instead of a black gradient?为什么我的引导 btn 反转按钮显示为灰色而不是黑色渐变? 【发布时间】:2015-05-10 04:19:21 【问题描述】:

我正在使用 angular、bootstrap 和 jquery 来使用 json 填充按钮。但是,当我将样式设置为这样的样式时:

它是这样显示的:

那么我怎样才能让引导程序正确呈现按钮?

*** 代码预览不起作用。 Plunk 项目在这里: http://plnkr.co/edit/FmK38oyDRZzWOTstoaEo

var bridgeCreek	= angular.module('bridgeCreek', []);

bridgeCreek.controller('MyController', ['$scope', '$http', function($scope, $http) 
  $http.get('http://www.zaithe.com/demos/bridgeCreek/js/json/navigation.json').success(function(data) 
    $scope.navigation = data;
  );
]);
<!DOCTYPE html>
<html ng-app="bridgeCreek">
  <head>
      <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  </head>
  <body ng-controller="MyController">
      <ul class="nav navbar-right navbar-nav">
          <li ng-repeat="item in navigation">
              <button type="button" class="btn btn-inverse btn-sm">
                  <span ng-class="item.glyph" aria-hidden="true"></span> item.text
              </button>
          </li>
  
      </ul>
      <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
      
      <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
      <script src="script.js"></script>
      <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

【问题讨论】:

【参考方案1】:

我查看了与您的按钮元素相关的样式,但没有 btn-inverse 的样式。这意味着您缺少所需的 css 文件。

我刚刚检查了引导文档,看起来 btn-inverse 已经停产,所以这可能就是你缺少 css 的原因:-(

这段文字来自他们的文档:

对按钮颜色类的更改

将 btn-default 添加到没有其他颜色的 btn 元素。将 btn-inverse 替换为 btn-default,因为 inverse 已从 Bootstrap 3 中移除。

【讨论】:

谢谢,我认为这是解决这个问题的方法! @DerekRhode 如果这个答案对你有帮助,请考虑accepting it(点击投票按钮下方的绿色大勾号)。

以上是关于为啥我的引导 btn 反转按钮显示为灰色而不是黑色渐变?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile 主题

jQuery Mobile 主题

Bootstrap 5 的按钮文本是黑色而不是白色,就像他们的演示一样

C# winfrom程序可以实现按钮的鼠标悬停变色,离开恢复,按下时变成黑色并一直保持吗

从按钮中删除边框

为啥 OAuth 流程中的 GitHub 授权按钮显示为灰色?