2016-07-03 12 views
0

角度2のチュートリアルに従っていますが、ある時点ではブートストラップクラスを使用しなければなりませんでした。外部ライブラリフォルダでは、ブートストラップは存在しますが、動作していないようです。これを私がindex.htmlファイルにインポートしたことを解決するために、今でも動作しますが、私の他のCSSファイルではありません。これらはindex.html(ライン6-7のCSSファイル)の内容は以下のとおりです。2つのcssファイルのうち1つだけが角度2のアプリケーションで有効です

template: ` 
    <h1>Hello</h1> 
    <i class="glyphicon" 
     [class.glyphicon-star] = "isFull" 
     [class.glyphicon-star-empty] = "!isFull" 
     (click)="onClick()"> 
    </i>  
    ` 

し、最終的にstyles.css

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html> 

もここで私は、ブートストラップクラスを使用する部分である

h1 { 
    color: #369; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 250%; 
} 
body { 
    margin: 2em; 
} 
+0

、私の作業のデモをチェックアウト? – micronyks

答えて

1

@コンポーネントのViewEncapsulationメタデータプロパティについて聞いたことがあります。あなたのカスタムスタイルで動作するように、ブートストラップのために、このようにそれを使用することができ :

@Component({ 
    selector: 'my-app', 
    encapsulation: ViewEncapsulation.none, 
    styleUrls: ['styles.css'], 
    ... 
    ... 
}) 

は、あなたが一緒に働いていないの両方の意味

http://plnkr.co/edit/oQYg5EFgaxoWdYyD8yhl?p=preview

+0

ありがとう)。もう一つの質問。チュートリアルでは、彼らのappフォルダに 'boot.ts'ファイルがあるのを見ましたが、私はそれを持っていません。大切ですか?ファイル名は – VlassisFo

+0

です。ファイルの別の名前を付けることができます。それは必須ではありません...その 'bootstrap function'は他に何もありません...あなたはprbmなしであなたの望む方法を実装することができます... – micronyks

関連する問題