Question

我正在使用angular，bootstrap和jquery来使用json填充按钮。但是，当我将样式设置为样式时：

inverted bootstrap button

它显示如下：

faulty inverted bootstrap button

那么如何才能让bootstrap正确渲染按钮呢？

Stackoverflow代码预览不起作用。 Plunk for project在这里： 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>

Answer 1

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

我刚检查了bootstrap文档，看起来btn-inverse已停止使用，这可能就是为什么你错过了css :-(

本文来自他们的文档：

对按钮颜色类的更改

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

为什么我的bootstrap btn-inverted按钮显示为灰色而不是黑色渐变？

1 个答案: