1
00:00:00,180 --> 00:00:04,680
このレッスンでは、自分のアプリケーションにブートストラップをインストールする方法を説明します。

2
00:00:04,740 --> 00:00:08,370
そしてそれを済ませたら、ピッチを使う重要な基礎をいくつかお見せします。

3
00:00:08,850 --> 00:00:14,180
だから、私はちょうどホームページ上のブートストラップドットコムを取得しています。ここにはブートストラップをダウンロードするリンクがあります。

4
00:00:14,850 --> 00:00:19,580
また、実際には直接ダウンロードリンクではありません。なぜなら、ブートストラップの使い方には2つの主な選択肢があるからです。

5
00:00:20,430 --> 00:00:24,340
私たちはファイルをダウンロードすることができます。

6
00:00:24,530 --> 00:00:29,360
その後、これらのファイルを取得してアプリケーションに追加することができます。

7
00:00:29,430 --> 00:00:35,230
私は単純な検索チームを持っています。私は基本的なものをhMLMLと呼んでいます。

8
00:00:35,790 --> 00:00:40,770
タイトルを追加するだけで、ブートストラップのいくつかの要素を追加するだけです。

9
00:00:40,800 --> 00:00:45,510
一度インストールすれば、包括的なものを作りません。基本的なブートストラップコンポーネントの一部として、それを単に遊び場として使用します。

10
00:00:45,510 --> 00:00:47,960
 

11
00:00:48,510 --> 00:00:54,840
まず、単純なH-1ブートストラップの基本を追加して保存してみましょう。

12
00:00:57,720 --> 00:00:58,460
 

13
00:00:58,700 --> 00:01:01,790
そして、これをブラウザで開いてみましょう。

14
00:01:03,240 --> 00:01:05,280
今のところそれを保つだけです。

15
00:01:05,280 --> 00:01:06,690
今すぐブートストラップをインストールします。

16
00:01:06,780 --> 00:01:08,190
私はそれをダウンロードしました。

17
00:01:08,250 --> 00:01:13,720
そのファイルを開くと、ここにはいくつかの異なるコンポーネントがあります。

18
00:01:13,830 --> 00:01:19,650
C

19
00:01:19,650 --> 00:01:23,890
Sのディレクトリがあり、CCSディレクトリの中にはかなりのファイルがありますが、実際にCSSAを起動する重要なファイルは1つだけです。

20
00:01:24,630 --> 00:01:27,710
これは実際にはここでブートアップされた同じファイルです。

21
00:01:27,740 --> 00:01:32,290
それは分の戦いが少ないスペースを取るために縮小されていることを除いてSS。

22
00:01:32,460 --> 00:01:36,280
したがって、これらの2つはブートストラップを実際に使用するための重要なファイルです。

23
00:01:36,600 --> 00:01:41,850
これはブートストラップのテーマです。これらの3つはブートストラップにカスタムテーマを追加するのに使われていますので、それほど重要ではありません。

24
00:01:41,850 --> 00:01:43,370
 

25
00:01:43,380 --> 00:01:45,680
我々が必要とするのは、ブートストラップ・ドットシ・アセスメントだけです。

26
00:01:45,780 --> 00:01:49,430
そして、それを開くだけで作業しているものを見ることができます。

27
00:01:49,470 --> 00:01:52,200
これは主に再評価されたブートストラップのファイルです。

28
00:01:52,770 --> 00:01:54,280
それは単なるクラスです。

29
00:01:54,300 --> 00:02:00,510
あなたがCSSAのすべての一行を見ると、ほぼクラス宣言が点になります。

30
00:02:00,690 --> 00:02:05,340
そして、私たちができることは、アプリケーションの代わりにそれらのクラスを使用することです。

31
00:02:05,340 --> 00:02:12,060
したがって、白いテキストと赤い背景のボタンを使用する場合は、ドットボタンの危険性を適用します。

32
00:02:12,060 --> 00:02:12,720
 

33
00:02:12,900 --> 00:02:14,510
そして、これがここでやっていることです。

34
00:02:14,730 --> 00:02:19,590
しかし危険は白い背景に赤い背景と赤い境界線を持っています。

35
00:02:19,650 --> 00:02:24,410
それでは、他のCSSAファイルと同じように、アプリケーションにこれを含めましょう。

36
00:02:24,750 --> 00:02:31,880
だから私がやることは、基本的な調査チームを持っているのと同じディレクトリにここをドラッグするだけで、これに代わってブートストラップされた分を再評価することもできます。

37
00:02:32,540 --> 00:02:37,020
 

38
00:02:37,020 --> 00:02:38,520
それは本当に重要ではありません。

39
00:02:38,550 --> 00:02:45,420
技術的にはこれは少し速くロードされます。なぜなら、私がそれを開くと、すべての空白が削除された1つの巨大な行であることがわかるからです。

40
00:02:45,690 --> 00:02:47,570
 

41
00:02:47,850 --> 00:02:53,640
ロードする方が簡単ですが、この長いバージョンを使用して、作業しているものを正確に見ることができます。

42
00:02:53,640 --> 00:02:55,450
 

43
00:02:55,470 --> 00:03:02,130
ここで実際のファイルに移動します。ここではこれを閉じて、ブートストラップされたCSXを取り上げます。

44
00:03:02,130 --> 00:03:03,120
 

45
00:03:03,220 --> 00:03:11,370
他のスタイルシートと同様に、リンクされたタグが必要です。TrefはブートストラップドットC

46
00:03:11,370 --> 00:03:16,310
Ssです。保存するとここに新しいページが表示されます。

47
00:03:16,320 --> 00:03:18,140
このH-1のフォントを見てください。

48
00:03:18,420 --> 00:03:19,590
それは変わる。

49
00:03:19,620 --> 00:03:24,720
私たちは今ブートストラップをインストールしているか、少なくともブートストラップと一緒になっているC Sを持っています。

50
00:03:24,720 --> 00:03:25,500
 

51
00:03:25,650 --> 00:03:30,060
 

52
00:03:30,510 --> 00:03:35,310
私たちはjavascriptを使って作業しませんが、ブートストラップをインストールするための別のオプションはありません。

53
00:03:35,400 --> 00:03:40,750
ブートストラップCDNここでこのリンクを利用してコードに追加することができます。

54
00:03:41,010 --> 00:03:44,870
そして、それは同じファイルのホストされたバージョンへのリンクです。

55
00:03:45,120 --> 00:03:49,920
 

56
00:03:49,920 --> 00:03:56,670
したがって、ブラウザでそのファイルを開き、それを貼り付けると、最小化されたファイルの内容が表示され、このファイルでホストされていることがわかります。そうすれば、私はそれを置き換えることができます。

57
00:03:56,970 --> 00:03:57,540
別のリンク。

58
00:03:57,540 --> 00:04:01,530
あなたがEllenであることをタグ付けして貼り付けてください。私はこれをコメントします。

59
00:04:01,530 --> 00:04:04,230
今のところ戻ってリフレッシュしてください。

60
00:04:04,380 --> 00:04:06,020
何も変わりません。

61
00:04:06,030 --> 00:04:10,950
 

62
00:04:10,950 --> 00:04:16,650
唯一の違いは、最初のケースでは、リンク先のファイルがコンピュータにダウンロードされていて、2番目のケースでは、オンラインでホストされている外部ファイルにリンクしているという点です。

63
00:04:16,650 --> 00:04:20,750
さて、ブートストラップのドキュメントに行き、これらのコンポーネントの周りや一部を再生してみましょう。

64
00:04:21,240 --> 00:04:27,330
だから、ブートストラップを手に入れてC Ssをクリックしてみましょう。私たちが使用する重要な部分を指摘します。

65
00:04:27,330 --> 00:04:29,150
 

66
00:04:29,400 --> 00:04:31,940
ですから、ボタンで簡単に始めましょう。

67
00:04:32,460 --> 00:04:40,650
ボタンを使用する場合は、叩かれたクラスを使用してから、デフォルトのボタンのタイプを選択します。このボタンは、白いボタンを表示しますが、これもVTAMプライマリBATNAアクセス情報です。

68
00:04:40,990 --> 00:04:48,510
 

69
00:04:48,740 --> 00:04:49,220
 

70
00:04:49,260 --> 00:04:54,080
危険とリンクを警告し、それらはすべて少しずつ異なったスタイルになっています。

71
00:04:54,240 --> 00:04:58,860
もちろん、私たち自身でこれらの色を変更することもできますが、一度に組み込みを使用して開始し、ここで表示することもできます。

72
00:04:58,860 --> 00:05:02,500
 

73
00:05:02,700 --> 00:05:08,600
ボタン要素を使用するだけでなく、アンカータグとしてボタンや入力を使用することもできます。

74
00:05:08,820 --> 00:05:10,720
だからそれを試してみましょう。

75
00:05:11,730 --> 00:05:13,030
こんにちは、このH-1。

76
00:05:13,230 --> 00:05:22,740
ボタンタグを追加しましょう。このボタンのタグは、私をクリックして、今すぐページをリフレッシュして見てみましょう。

77
00:05:22,740 --> 00:05:25,860
 

78
00:05:25,950 --> 00:05:27,310
それはかなり醜いボタンです。

79
00:05:27,690 --> 00:05:37,740
しかし、私たちが行ってそのクラスPTENを追加すると、成功と保存の間に、この素​​晴らしい緑のボタンが表示されます。

80
00:05:37,740 --> 00:05:39,200
 

81
00:05:39,330 --> 00:05:41,870
基本的なスタイルをかなり簡単に得ることができます。

82
00:05:42,190 --> 00:05:47,670
もう一度戻ってみましょう。また、私たちも使うことのできるサイズの違うボタンについて、いくつかのことを紹介します。本当に簡単です。

83
00:05:47,670 --> 00:05:50,110
 

84
00:05:50,130 --> 00:05:58,410
ボタンを大きくしたり小さくしたり、ボタンを小さくしたりする必要があります。ボタンの成功後に試してみる必要はありません。

85
00:05:58,410 --> 00:06:00,500
 

86
00:06:00,510 --> 00:06:08,600
クラスの順番は関係ありませんが、ここではDTNの後にやってみましょう。ちょっとしたことをしてページを更新しましょう。

87
00:06:08,600 --> 00:06:09,740
 

88
00:06:09,750 --> 00:06:11,170
そこに行く。

89
00:06:11,170 --> 00:06:16,710
私は今これを上に移動し、いくつかのボタンを追加しますが、これはアンカータグになります、これはタグになるか、私たちはHを持っています。

90
00:06:16,710 --> 00:06:24,640
F.

91
00:06:24,660 --> 00:06:30,480
毎日読んでいるDPコロンのスラッシュスラッシュと同じです。ブートストラップドットコムを取得し、テキストは単にブートストラップのdocsと言うでしょう。

92
00:06:30,550 --> 00:06:38,550
 

93
00:06:38,550 --> 00:06:47,330
これをもう少し大きくして、クラスでクラスに追加してPTENに等しくする必要があり、Deschの情報とそれを大規模なPTENダッシュElgieにしてリフレッシュさせましょう。

94
00:06:47,340 --> 00:06:48,690
今は2つのボタンがあります。

95
00:06:48,750 --> 00:06:50,620
1つは実際のボタン要素です。

96
00:06:50,620 --> 00:06:55,210
もう1つはアンカータグを持っていて、これをクリックするとアンカータグとして見ることができます。

97
00:06:56,340 --> 00:07:01,200
ブートストラップを使用する最初の1分で、まともなボタンを手に入れることができました。

98
00:07:01,370 --> 00:07:05,330
それは私たち自身でCSSAの10〜15行を複製することになりました。

99
00:07:05,760 --> 00:07:06,960
今戻ってみましょう。

100
00:07:06,990 --> 00:07:10,980
このフルスクリーンをもう一度作成して、ボタンについて他にもいくつか紹介します。

101
00:07:11,220 --> 00:07:12,720
だから我々はサイズがあります。

102
00:07:12,750 --> 00:07:18,560
また、ボタンがアクティブであるかのように見せたり、アクティブなクラスを追加するだけで、ボタンを表示させることができる州が異なります。

103
00:07:18,570 --> 00:07:21,080
 

104
00:07:21,390 --> 00:07:27,060
 

105
00:07:27,060 --> 00:07:37,140
だから私たちがこれを試してみたら、いくつかのボタンを追加しましょう。私は小さなミニチュアのClick

106
00:07:37,140 --> 00:07:43,590
Meボタンを3回複製し、クラスの中の最後のボタンをアクティブにしてリフレッシュします。この画面がアクティブに見えるだけで十分です。

107
00:07:43,620 --> 00:07:49,290
戻りましょう。また、この属性を追加することでボタンを無効にすることもできます。

108
00:07:49,290 --> 00:07:51,850
無効は無効になります。

109
00:07:52,440 --> 00:07:57,950
戻り、最後のリフレッシュを無効にしましょう。

110
00:07:58,180 --> 00:08:00,020
そして今、このボタンは無効になっています。

111
00:08:00,120 --> 00:08:01,940
私たちはそのすてきな小さなアイコンを手に入れます。

112
00:08:02,070 --> 00:08:05,110
それは色がそれ以上変わるホバー効果を持たない。

113
00:08:05,220 --> 00:08:07,460
これは明らかに無効にされたボタンです。

114
00:08:07,560 --> 00:08:14,610
最後に私はあなたにお見せしますので、色をもう一度変えることができますので、危険な夜は赤みを帯びたオレンジ色になり、ここですべての色を見ることができます。

115
00:08:14,610 --> 00:08:18,630
 

116
00:08:18,870 --> 00:08:24,300
もちろん、スタイルを上書きすることでそれらを変更することができますので、別のスタイルシートを作成するのではなく、このようなことをすることができます。

117
00:08:24,300 --> 00:08:25,850
 

118
00:08:25,860 --> 00:08:27,270
私は今ここでそれをやります。

119
00:08:27,330 --> 00:08:32,330
ですから、私たちはただ一つの行を行い、美しさと危険を好きになるでしょう。

120
00:08:32,460 --> 00:08:40,050
私たちは色をオレンジ色に変えることができ、現在はテキサスオレンジを危険にさらしているかもしれません。バックグラウンドを実際に変更したいのであれば、私は背景色をオレンジ色にすることができます。どのブートストラップがあなたを箱から出してくれるかを使ってください。

121
00:08:40,050 --> 00:08:46,440
 

122
00:08:46,440 --> 00:08:51,550
 

123
00:08:52,200 --> 00:08:53,580
そしてほとんどの場所はそうしない。

124
00:08:54,030 --> 00:08:56,940
それでボタンはOKだから私はこのビデオでやっていることだ。

125
00:08:56,940 --> 00:09:00,300
私はちょうどあなたにブートストラップがどのように動作するかを本当に素早く知りたいと思っていました。

126
00:09:00,300 --> 00:09:06,450
 

127
00:09:06,460 --> 00:09:11,010
 

128
00:09:11,010 --> 00:09:13,540
既存の要素とそのクラスにクラスを追加するこのパターンは、そのブートストラップで定義され、CSSAファイルは次のビデオにあります。フォームや入力を含むブートストラップに付属するその他の重要な部分を強調します。