質問編集履歴
2
ガラッと変える。
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
angulerで
|
1
|
+
angulerでbootstrap3を使う方法の差
|
test
CHANGED
@@ -1,30 +1,32 @@
|
|
1
|
-
|
1
|
+
angularでbootstrapを使用する際に
|
2
|
-
|
3
|
-
iconやボタン・Gridは正常に表示されています。
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
https://ng-bootstrap.github.io/#/components/dropdown
|
8
|
-
|
9
|
-
を参考に、
|
10
2
|
|
11
3
|
|
12
4
|
|
13
5
|
ターミナルで
|
14
6
|
|
7
|
+
|
8
|
+
|
15
|
-
```
|
9
|
+
```ターミナルコマンド
|
16
10
|
|
17
11
|
npm install ng-bootstrap
|
18
12
|
|
19
13
|
```
|
20
14
|
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
|
21
19
|
をコマンドし、インストール
|
22
20
|
|
23
21
|
|
24
22
|
|
25
|
-
|
23
|
+
|
26
24
|
|
27
25
|
angular-cli.json内のstylesに追加
|
26
|
+
|
27
|
+
|
28
|
+
|
29
|
+
```ターミナルコマンド
|
28
30
|
|
29
31
|
"styles": [
|
30
32
|
|
@@ -38,72 +40,26 @@
|
|
38
40
|
|
39
41
|
|
40
42
|
|
43
|
+
という形で、bootstrapを引っ張ってくる方法と、
|
41
44
|
|
42
45
|
|
43
|
-
htmlファイルに
|
44
46
|
|
45
|
-
```ここに言語を入力
|
46
47
|
|
47
|
-
<div class="row">
|
48
48
|
|
49
|
-
|
49
|
+
src/index.htmlの中のheadタグ内に
|
50
50
|
|
51
|
-
<div ngbDropdown class="d-inline-block">
|
52
51
|
|
53
|
-
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
|
54
52
|
|
55
|
-
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
56
53
|
|
57
|
-
<button class="dropdown-item">Action - 1</button>
|
58
54
|
|
59
|
-
<button class="dropdown-item">Another Action</button>
|
60
55
|
|
61
|
-
<button class="dropdown-item">Something else is here</button>
|
62
56
|
|
63
|
-
|
57
|
+
```ターミナルコマンド
|
64
58
|
|
65
|
-
|
59
|
+
<link rel="stylesheet" href="./css/bootstrap.min.css">
|
66
|
-
|
67
|
-
</div>
|
68
|
-
|
69
|
-
</div>
|
70
60
|
|
71
61
|
```
|
72
62
|
|
73
63
|
|
74
64
|
|
75
|
-
を追記しましたが、ボタンが表示されるだけで、dropdownメニューとして動きません。
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
tsファイルの編集が足りていないのかとも思うのですが、サイトのtsソースが
|
80
|
-
|
81
|
-
```ここに言語を入力
|
82
|
-
|
83
|
-
import {Component} from '@angular/core';
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
@Component({
|
88
|
-
|
89
|
-
selector: 'ngbd-dropdown-basic',
|
90
|
-
|
91
|
-
templateUrl: './dropdown-basic.html'
|
92
|
-
|
93
|
-
})
|
94
|
-
|
95
|
-
export class NgbdDropdownBasic {
|
96
|
-
|
97
|
-
}
|
98
|
-
|
99
|
-
```
|
100
|
-
|
101
|
-
になっており、
|
102
|
-
|
103
|
-
selectorとtemplateUelとclass名はもともと準備しているコンポーネントが指定されており、[angular/core]はすでにimportされています。
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
65
|
+
と直接書くのではどのような差がありますか?
|
108
|
-
|
109
|
-
詳しい方ご指摘お願いします。
|
1
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
ngbDropdownの使用方法
|
1
|
+
angulerでのngbDropdownの使用方法
|
test
CHANGED
File without changes
|