1
00:00:00,270 --> 00:00:05,730
このユニットでは、ブートストラップと呼ばれる新しいツールを紹介します。ブートストラップのホームページには、ブートストラップされたドットコムがあります。

2
00:00:05,730 --> 00:00:08,110
 

3
00:00:08,330 --> 00:00:12,570
そして、私はこの紹介ビデオで、ブートストラップが何であるか、なぜそれを使用しているのかを説明するために、数分を要したいと思います。

4
00:00:12,570 --> 00:00:13,180
 

5
00:00:13,230 --> 00:00:17,100
また、ブートストラップを使用するサイトの例をいくつか紹介します。

6
00:00:17,100 --> 00:00:20,350
それでは公式のブートストラップ宣言を読んで始めましょう。

7
00:00:20,610 --> 00:00:26,550
ブートストラップは、ウェブ上で応答性の高いモバイルの最初のプロジェクトを開発するための、JavaScriptフレームワークで最も一般的なTMLC SSです。

8
00:00:26,550 --> 00:00:28,310
 

9
00:00:28,710 --> 00:00:30,460
それをちょっと打ち砕いてみましょう。

10
00:00:30,480 --> 00:00:32,540
ブートストラップは非常に人気があります。

11
00:00:32,580 --> 00:00:37,830
実際、それは基本的にそれがほとんどの人がそれを追加して助けを得ることに好意を持ってそれを使用していることを意味し、基本的にはハブを取得する上で最も有名かつフォークされたリポジトリであり、そのブートストラップは実際には成功の単一のファイルとjavascript

12
00:00:37,830 --> 00:00:43,410
。

13
00:00:43,410 --> 00:00:47,550
 

14
00:00:47,550 --> 00:00:52,080
今では多くのC S

15
00:00:52,080 --> 00:00:54,180
Sとそれらのファイルに多数のjavascriptがありますが、それらは2つのファイルに過ぎず、私たち自身のアプリケーションにそれらを含めることができます。

16
00:00:54,180 --> 00:00:59,280
基本的に私たちは誰かのコードを取得し、Bootstrapから独自のアプリケーションを追加しました。これは反応の良い良質のサイトを作成するのに役立ち、独自のコードを書くことなく高速化するのに役立ちます。

17
00:00:59,280 --> 00:01:04,320
 

18
00:01:04,320 --> 00:01:05,950
 

19
00:01:05,970 --> 00:01:08,760
私がこのコースであなたにそれを示している主な理由は2つあります。

20
00:01:08,760 --> 00:01:10,890
最初は、非常に人気があるということです。

21
00:01:10,890 --> 00:01:11,850
たくさんの場所でそれを使用しています。

22
00:01:11,850 --> 00:01:15,560
多くのデベロッパーがそれを使用していて、知るだけの価値があります。

23
00:01:15,690 --> 00:01:20,250
しかし、第二は、このコースでは、見栄えの良いWebサイトをすばやく作成するのに役立つだろうということです。

24
00:01:20,640 --> 00:01:25,080
だから、私たちがNodeとexpressとMongoとmongooseとdeepのすべてと複雑な背中と論理に集中しているときに私たちが背中と物事を学んでいるとき、我々はまだ1時間か2時間を費やすことなくよく見える何かを作ることができますビデオをスタイリングすることでブートストラップを差し込むことができます.10分15分で作業を進めることができます。

25
00:01:25,250 --> 00:01:30,750
 

26
00:01:30,750 --> 00:01:36,480
 

27
00:01:36,480 --> 00:01:40,020
 

28
00:01:40,020 --> 00:01:45,360
私がやることは、ドックを素早く見学することですが、ブートストラップには良い例がたくさんあります。実際にはこのウェブサイトにはブートストラップが使われています。

29
00:01:45,660 --> 00:01:50,840
 

30
00:01:51,060 --> 00:01:57,090
それではC

31
00:01:57,090 --> 00:02:00,250
Ssをクリックしてみましょう。ブートストラップとは、CSSAファイル内に単一のJavaScriptファイルが1つだけ存在することです。

32
00:02:00,300 --> 00:02:02,560
私たちが無料で入手できるものがたくさんあります。

33
00:02:02,610 --> 00:02:05,420
ですから、ボタンを見てみましょう。

34
00:02:05,460 --> 00:02:10,890
 

35
00:02:10,890 --> 00:02:16,680
したがって、ボタンを作成してアプリケーションにブートストラップした場合、クラスにこのクラスを追加することができます。実際にはBeatiとPTENのデフォルトです。これらのボタンを取得します。

36
00:02:17,010 --> 00:02:18,840
私たちは色々なことができます。

37
00:02:19,470 --> 00:02:21,260
フォームを見てみましょう。

38
00:02:21,360 --> 00:02:22,870
私たちはここで良い入力を得る。

39
00:02:23,310 --> 00:02:29,310
また、すべてがサイト上で反応的であることに注意することも重要ですので、画面の幅に応じたものを得ることができます。

40
00:02:29,310 --> 00:02:31,890
 

41
00:02:32,250 --> 00:02:34,060
また、さまざまな種類のフォームがあります。

42
00:02:34,080 --> 00:02:35,680
さまざまな部分を組み合わせることができます。

43
00:02:35,700 --> 00:02:38,330
そこでここではフォームのボタンを使用しています。

44
00:02:38,400 --> 00:02:43,230
だから、レゴのブーツストラップのようなもので、たくさんの方法でレゴのものができあがり、一緒に組み立てて自分のサイトに追加することができます。

45
00:02:43,230 --> 00:02:46,660
 

46
00:02:46,740 --> 00:02:48,690
私たちは、これらのコンポーネントのほとんどを検討していきます。

47
00:02:48,720 --> 00:02:53,800
これらの大部分の大部分は、一度作業を開始し、ブートストラップコードを作成することで始まります。

48
00:02:54,270 --> 00:03:00,420
だから今私たちに移りましょう。次のタブにはコンポーネントのコンポーネントがあります。これには、より大きなブートストラップの一部が含まれています。これには、ナビゲーションバーのようなものも含まれています。

49
00:03:00,420 --> 00:03:05,750
 

50
00:03:05,940 --> 00:03:11,520
これはおそらく、少しのコードで見られるように、たくさんのサイトが使用するブートストラップの最も一般的な側面の1つです。

51
00:03:11,520 --> 00:03:13,680
 

52
00:03:13,710 --> 00:03:18,450
それはたくさんのように見えますが、最初からNAVバーを作成していた場合よりもはるかに少なくなっています。

53
00:03:18,450 --> 00:03:19,680
 

54
00:03:19,680 --> 00:03:26,880
これにはドロップダウン形式があり、さまざまな種類のバーがあり、ページの上部にスクロールするものがいくつかあります。

55
00:03:26,880 --> 00:03:30,660
 

56
00:03:30,690 --> 00:03:36,200
Jumbotronのような他のコンポーネントがありますが、これはWebサイトの進行状況バーにいくつかのコンテンツを表示する方法です。

57
00:03:37,110 --> 00:03:38,390
 

58
00:03:38,670 --> 00:03:40,330
これらはすべてブートストラップと一緒に来ます。

59
00:03:40,680 --> 00:03:45,750
だから、ブートストラップがこれらすべての部分に付属しているかどうか疑問に思うかもしれません。

60
00:03:46,040 --> 00:03:48,970
 

61
00:03:49,320 --> 00:03:50,760
答えは「はい」と「いいえ」です。

62
00:03:50,760 --> 00:03:53,240
サイトがどのようにブートストラップを使用するかによって異なります。

63
00:03:53,760 --> 00:03:58,440
 

64
00:03:58,440 --> 00:04:03,390
私は、ブートストラップをよく使っている会社やプロジェクトでは、ブートストラップを使っていることを伝えるのが難しいと主張しています。なぜなら、それらの主要なコンポーネントを使用していて、自分のスタイルを上に書くことができるからです。

65
00:04:03,390 --> 00:04:04,490
 

66
00:04:04,500 --> 00:04:07,860
色を変更すると、フォントがホバー効果の一部を変更します。

67
00:04:07,920 --> 00:04:13,290
まったく同じ色とブートストラップに付属しているものはすべて使用する必要はありませんが、ブートストラップ・スタイルを組み込むのに本質的に悪いことはありません。

68
00:04:13,290 --> 00:04:17,670
 

69
00:04:17,670 --> 00:04:19,080
そして我々は間違いなく両方をやっています。

70
00:04:19,200 --> 00:04:23,580
だから私たちがサイトを作っているときに、フォーカスが実際にフロントエンドにあるわけではなく、私たちはすぐに見えるものを作りたいだけです。

71
00:04:23,580 --> 00:04:25,290
 

72
00:04:25,290 --> 00:04:30,310
基本的にプロトタイプのフロントエンドはブートストラップを使用し、実際には多くの部分を変更することはありません。

73
00:04:30,780 --> 00:04:34,530
 

74
00:04:34,530 --> 00:04:39,930
 

75
00:04:39,930 --> 00:04:42,580
しかし、少し大きめのものに取り組んでいるのであれば、何も変更せずにブートストラップを使用したように見えないようにしたい場合、私たちは自分のスタイルを追加して基本的にスプレー塗装ブートストラップの上に

76
00:04:42,600 --> 00:04:47,250
私がしたいことは、ブートストラップで構築されたサイトの一部を表示し、Buddhの旅行に実際にそれらのサイトのいくつかを紹介する公式Webサイトがあることです。

77
00:04:47,250 --> 00:04:50,740
 

78
00:04:50,970 --> 00:04:54,330
Expoをクリックすると、すでに開いています。

79
00:04:54,330 --> 00:04:59,730
彼らはショーケースが美しく、感動的なものはブートストラップを使用していることがわかります。そのため、これらを開いて新しいタブを開くことができます。

80
00:04:59,970 --> 00:05:01,890
 

81
00:05:02,270 --> 00:05:03,870
これらはまさに最新のものです。

82
00:05:03,870 --> 00:05:05,390
このサイトには何百というものがあります。

83
00:05:05,420 --> 00:05:11,400
あなたはそれらのトンとトンを見ることができますし、スクロールとスクロールを維持することができますし、我々はいくつかの古いものに行くことができますし、それを使用している非常に多くの異なるサイトがあります。

84
00:05:11,400 --> 00:05:14,660
 

85
00:05:15,000 --> 00:05:17,050
そして、彼らは本当にすべてが同じに見えるわけではありません。

86
00:05:17,610 --> 00:05:20,190
はい、多分彼らにはナビゲーションバーがあります。

87
00:05:20,190 --> 00:05:25,470
たぶんそれらの多くは、このフルスクリーンの大きな画像レイアウトを持っているかもしれませんが、それは純粋に責任があるものをブートストラップしたものよりも、デザイントレンドのほうです。

88
00:05:25,470 --> 00:05:28,450
 

89
00:05:28,980 --> 00:05:30,890
だから、これらのいくつかを見てみましょう。

90
00:05:30,930 --> 00:05:36,400
これは創造的なTimであり、Webサイトのテンプレートを実際に作成する会社です。

91
00:05:36,630 --> 00:05:40,330
そして、あなたはこの素晴らしいグリッドの画像を見ることができます。

92
00:05:40,500 --> 00:05:41,600
それは非常に敏感です。

93
00:05:41,610 --> 00:05:46,710
私がこれを縮めれば、ここに私たちの小さなナビゲーションバーができます。

94
00:05:46,920 --> 00:05:52,660
これは、すべてがこのグリッドに配置される方法のブートストラップコンポーネントです。

95
00:05:52,890 --> 00:05:57,960
ブートストラップはそれに部分的に責任がありますが、ブートストラップのボタンに組み込まれているデフォルトを使用していないこともわかります。

96
00:05:58,010 --> 00:05:59,540
 

97
00:05:59,580 --> 00:06:00,710
彼らは彼らを変えました。

98
00:06:00,780 --> 00:06:01,960
ものは異なって見える。

99
00:06:02,190 --> 00:06:06,130
だから、これはブートストラップの本当にいい使い方だと思います。それは本当に素晴らしい探しサイトです。

100
00:06:06,180 --> 00:06:12,170
それはうまく動作し、ブートストラップを使用しますが、ブートストラップ100％には依存しません。

101
00:06:13,080 --> 00:06:15,120
1つまたは2つ以上を見てみましょう。

102
00:06:15,480 --> 00:06:19,640
だから、これはIndicusと呼ばれたり、そのような指標になったりします。

103
00:06:19,710 --> 00:06:24,200
明らかに、彼らは人々が楽しむデジタル製品を設計し、構築しています。

104
00:06:24,240 --> 00:06:25,520
ここで下にスクロールしましょう。

105
00:06:25,680 --> 00:06:26,980
私たちが持っているものを見てみましょう。

106
00:06:27,270 --> 00:06:31,950
だから、おそらくPearcey

107
00:06:31,950 --> 00:06:37,500
SSでは、これまで述べてきたようにレイアウトや整理に役立つブートストラップ・グリッド・システムで構築されたコンテンツがいくつかあります。

108
00:06:37,560 --> 00:06:42,420
それは良くなってきていますが、ブートストラップは本当にアプリケーションの上に物事を築くのに役立ちます。

109
00:06:43,260 --> 00:06:49,380
 

110
00:06:49,610 --> 00:06:54,620
 

111
00:06:54,640 --> 00:06:59,970
 

112
00:06:59,970 --> 00:07:05,160
ここにはナビゲーションバーがあるので、ブートストラップに行くのは本当に楽しいです。Expoは、ブートストラップに使っていたプロジェクトのいくつかを調べて、その使い方や、企業が変更しているさまざまな方法を見て時間を割いています独自のフォントを独自の色で追加し、たくさんのサイトが使用しているコアコンポーネントが何であり、どうしてブートストラップを使用するのかを決定します。

113
00:07:05,170 --> 00:07:05,930
 

114
00:07:06,170 --> 00:07:10,950
そして、私の意見では、実際にはこのシステムのビデオとナビゲーションバーとすべての応答性を重視するグリッドシステムになっています。

115
00:07:10,950 --> 00:07:14,970
 

116
00:07:15,420 --> 00:07:15,710
OK。

117
00:07:15,720 --> 00:07:20,230
だから私が作ってくれるシンプルなサイトをあなたに見せてくれるでしょう。

118
00:07:20,280 --> 00:07:23,110
これは私たちのスタートアップであり、激しいペッティングです。

119
00:07:23,190 --> 00:07:28,200
それはあなたの完璧なネコのソウルメイトを見つけるのに役立ち、ブートストラップを使用します。

120
00:07:28,200 --> 00:07:33,610
Morganボタンにサインアップしたのと同じように、ここにnav barがあることがわかります。

121
00:07:33,630 --> 00:07:39,970
これらの小さなアイコンが表示され、ここにテキストが表示され、小さなタグ行とボタンが表示されます。

122
00:07:40,290 --> 00:07:46,880
そして、私がサイズを変更すると、すべてが反応して、あなたは物事が動き回っていくのを見ることができます。

123
00:07:47,190 --> 00:07:52,660
そして、最も重要なことに、私たちはその小さなハンバーガーを手に入れ、私たちはモバイルフレンドリーなナビゲーションバーを持っています。

124
00:07:52,710 --> 00:07:57,780
このユニットの終わりには、ロマンチックな関係で人々とペットにマッチするこの偽のスタートアップのランディングページを作成する作業をしていきます

125
00:07:57,960 --> 00:08:00,540