爲什麼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模板？

回答

相關問題