为什么Bootstrap风格不适用于AngularJS模板？

我想在AngularJS中做一个可折叠的指令。我有一个风格问题。当我在AngularJS指令中使用它时，Twitter Bootstrap样式不起作用。为什么Bootstrap风格不适用于AngularJS模板？

因此，这里是我的指令代码：

app.directive("collapsible", function() { 
    return { 
     restrict: "E", 
     transclude: true, 
     scope: { 
      title: '@' 
     }, 
     template: '<div class="panel panel-default">' + 
         '<div class="panel-heading">' + 
          '<h3 class="panel-title" ng-click="triggerCollapsible()">{{title}}</h3>' + 
         '</div>' + 
         '<div class="panel-body" ng-show="isVisible" ng-transclude></div>' + 
        '</div>', 
     link: function (scope) { 
      scope.isVisible = true; 

      scope.triggerCollapsible = function() { 
       scope.isVisible = !scope.isVisible; 
      } 
     } 
    } 
});

这是代码的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
</head> 
<body> 

<div ng-app="angularBlackbox"> 
    <div style="margin: 15px"> 
     <form> 
      <div class="form-group"> 
       <label>Title</label> 
       <input type="text" class="form-control" ng-model="model.title"> 
      </div> 
      <div class="form-group"> 
       <label>Content</label> 
       <input type="text" class="form-control" ng-model="model.content"> 
      </div> 
     </form> 

     <collapsible title="{{model.title}}"> 
      <strong>Content:</strong> {{model.content}} 
     </collapsible> 

    </div> 
</div> 

<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript" src="main.js"></script> 
</body> 
</html>

下面是结果：

H3与类面板标题无法正常工作。怎么了？

引导-theme.min.css

/*! 
* Bootstrap v3.3.7 (http://getbootstrap.com) 
* Copyright 2011-2016 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
*/

bootstrap.min.css

/*! 
* Bootstrap v3.3.7 (http://getbootstrap.com) 
* Copyright 2011-2016 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

来源

2017-09-28 Aleksey Kurkov

您是否检查过该标题是否有任何CSS优先？你有没有检查''.panel-title'类是否存在于你的引导CSS？ – ProEvilz

请添加您的CSS。 –

@Aleksey你为什么期待标题大胆？ –

-1

引导没有一个大胆的样式添加到默认的面板的标题，你必须添加在你自己的CSS中。

您可以在下面的类添加到您自己的CSS文件：

.panel-title { 
    font-weight: bold; 
}

或者直接添加样式到你的指令模板：

<h3 class="panel-title" 
    style="font-weight: bold;" 
    ng-click="triggerCollapsible()"> 
    {{title}} 
</h3>

您可以在以下codepen看看看结果。

来源

2017-09-28 16:17:11

错误 - 是的，它默认添加它。 https://codepen.io/anon/pen/qPmQRw – ProEvilz

'font-weight：bold' just maker bold-呃。 OP的图片并不是大胆的。 – ProEvilz

@ProEvilz你在'panel-title'中在哪里看到字体重量设置？你是什么意思，大胆呃？该设置被称为“粗体”，这是一个形容词，而不是像你所建议的那样具有复杂性。什么是OP？ –

问题是因为panel-title类有一个属性与h3中为引导设置的属性发生冲突。

bootstrap.min.css

.panel-title { 
    margin-top: 0px; 
    margin-bottom: 0px; 
    font-size: 16px; 
} 
h3, .h3 { 
    font-size: 24px; 
}

所以我的解决办法是增加一个内嵌式的（可以是一个新的类也）设置font-size到24px的。下面的演示！

JSFiddle Demo

来源

2017-09-28 16:45:26

为什么Bootstrap风格不适用于AngularJS模板？

回答

相关问题