1
00:00:00,270 --> 00:00:05,730
Bem-vindo novamente nesta unidade, vou apresentar uma nova ferramenta chamada Bootstrap e estou na página

2
00:00:05,730 --> 00:00:08,110
inicial do bootstrap, obtenha o bootcom pontoado.

3
00:00:08,330 --> 00:00:12,570
E eu só quero levar alguns minutos neste vídeo de introdução para explicar o que é o bootstrap e por que

4
00:00:12,570 --> 00:00:13,180
o estamos usando.

5
00:00:13,230 --> 00:00:17,100
E então também para mostrar alguns exemplos de sites que usam o bootstrap.

6
00:00:17,100 --> 00:00:20,350
Então, vamos começar apenas pela leitura oficial do bootstrap.

7
00:00:20,610 --> 00:00:26,550
Bootstrap é o mais popular TMLC SS no framework javascript para o desenvolvimento de primeiros

8
00:00:26,550 --> 00:00:28,310
projetos móveis sensíveis na Web.

9
00:00:28,710 --> 00:00:30,460
Vamos acabar com isso um pouco.

10
00:00:30,480 --> 00:00:32,540
O Bootstrap é extremamente popular.

11
00:00:32,580 --> 00:00:37,830
Na verdade, é o repositório mais destacado e bifurcado no hub, o que, basicamente, significa que ele tem a

12
00:00:37,830 --> 00:00:43,410
maioria das pessoas que o utilizam, a maioria das pessoas favorece adicioná-lo para obter ajuda e tudo isso bootstrap é,

13
00:00:43,410 --> 00:00:47,550
na verdade, um único arquivo de sucesso e um único arquivo de javascript .

14
00:00:47,550 --> 00:00:52,080
Agora, há muitos C S S e muitos javascript nesses arquivos, mas são apenas dois arquivos

15
00:00:52,080 --> 00:00:54,180
e podemos incluí-los em nossa própria aplicação.

16
00:00:54,180 --> 00:00:59,280
que são sensíveis e nos ajudam a fazê-los rapidamente sem ter que escrever uma tonelada de nosso próprio código.

17
00:00:59,280 --> 00:01:04,320
Basicamente, nós levamos o código de outra pessoa e, da Bootstrap, adicionamos a nossa própria aplicação e nos ajuda

18
00:01:04,320 --> 00:01:05,950
a criar sites de boa aparência

19
00:01:05,970 --> 00:01:08,760
Existem dois motivos principais que eu estou mostrando a você neste curso.

20
00:01:08,760 --> 00:01:10,890
O primeiro é que é muito popular.

21
00:01:10,890 --> 00:01:11,850
Muitos lugares usam isso.

22
00:01:11,850 --> 00:01:15,560
Muitas empresas, muitos desenvolvedores usam isso e vale a pena conhecer.

23
00:01:15,690 --> 00:01:20,250
Mas o segundo é que isso nos ajudará a fazer bons sites da Web bastante rápido neste curso.

24
00:01:20,640 --> 00:01:25,080
conter o bootstrap e podemos fazer as coisas em 10 15 minutos e ficamos muito bons.

25
00:01:25,250 --> 00:01:30,750
Então, quando estamos aprendendo de volta e coisas quando nos concentramos em Node e expressamos e Mongo e mangustão

26
00:01:30,750 --> 00:01:36,480
e joelho profundo e toda essa complexa volta e lógica ainda podemos fazer algo que parece ser bom sem ter

27
00:01:36,480 --> 00:01:40,020
que dedicar uma hora ou duas horas Vídeo para desenhar algo que possamos

28
00:01:40,020 --> 00:01:45,360
A próxima coisa que vou fazer é dar-lhe um rápido passeio pelas docas, mas o bootstrap tem uma

29
00:01:45,660 --> 00:01:50,840
boa documentação boa documentação de bons exemplos e eles realmente usam bootstrap neste site, o que faz sentido.

30
00:01:51,060 --> 00:01:57,090
Então, vamos começar clicando em C Ss e isso é mencionado bootstrap é apenas um único arquivo

31
00:01:57,090 --> 00:02:00,250
CSSA um único arquivo javascript dentro desse arquivo CSSA.

32
00:02:00,300 --> 00:02:02,560
Há um monte de coisas que nós obtemos gratuitamente.

33
00:02:02,610 --> 00:02:05,420
Então, vamos dar uma olhada nos botões.

34
00:02:05,460 --> 00:02:10,890
Então, se queremos fazer um botão e temos bootstrapped incluído em nosso aplicativo, podemos adicionar

35
00:02:10,890 --> 00:02:16,680
esta classe à classe é, na verdade, Beati e PTEN padrão e nós obtemos esses botões.

36
00:02:17,010 --> 00:02:18,840
Podemos fazer cores diferentes.

37
00:02:19,470 --> 00:02:21,260
Vamos dar uma olhada nos formulários.

38
00:02:21,360 --> 00:02:22,870
Nós recebemos boas entradas aqui.

39
00:02:23,310 --> 00:02:29,310
E também é importante notar que tudo é receptivo no site para que você possa ver as

40
00:02:29,310 --> 00:02:31,890
coisas que respondem à largura da tela.

41
00:02:32,250 --> 00:02:34,060
Também temos diferentes tipos de formas.

42
00:02:34,080 --> 00:02:35,680
Você pode combinar as diferentes peças.

43
00:02:35,700 --> 00:02:38,330
Então, eles estão usando um botão com um formulário.

44
00:02:38,400 --> 00:02:43,230
Então, é como as peças do Lego bootstrap e muitas maneiras é ter sido de peças do

45
00:02:43,230 --> 00:02:46,660
Lego que você pode juntar e adicionar ao seu site conforme entender.

46
00:02:46,740 --> 00:02:48,690
Nós iremos sobre a maioria desses componentes.

47
00:02:48,720 --> 00:02:53,800
A maioria dessas grandes peças, uma vez que começamos a trabalhar com ela e escrevemos o código bootstrap.

48
00:02:54,270 --> 00:03:00,420
os componentes contêm alguns dos maiores pedaços de bootstrap que podemos usar e que inclui coisas como barras de navegação.

49
00:03:00,420 --> 00:03:05,750
Então, por enquanto, vamos seguir em frente e quando mostrar a próxima aba, que é um componente,

50
00:03:05,940 --> 00:03:11,520
E este é provavelmente um dos aspectos mais populares do bootstrap que muitos e muitos sites usam como você

51
00:03:11,520 --> 00:03:13,680
pode ver com um pouco de código.

52
00:03:13,710 --> 00:03:18,450
Parece muito, mas asseguro-lhe que é muito menos do que seria se estivéssemos escrevendo um bar NAV

53
00:03:18,450 --> 00:03:19,680
a partir do zero.

54
00:03:19,680 --> 00:03:26,880
E isso vem com forma de drop downs e existem vários tipos de barras de cores diferentes, algumas que

55
00:03:26,880 --> 00:03:30,660
são fixadas no topo da página, algumas que se deslocam.

56
00:03:30,690 --> 00:03:36,200
o Jumbotron, que é uma maneira de exibir algum conteúdo nas barras de progresso do seu site.

57
00:03:37,110 --> 00:03:38,390
Existem outros componentes, como

58
00:03:38,670 --> 00:03:40,330
E todos eles trazem bootstrap.

59
00:03:40,680 --> 00:03:45,750
Então, você pode estar se perguntando agora se o bootstrap chegar a todas essas peças e eles já estão com

60
00:03:46,040 --> 00:03:48,970
estilo, o que cada site que usa o bootstrap parecia o mesmo.

61
00:03:49,320 --> 00:03:50,760
E a resposta é sim e não.

62
00:03:50,760 --> 00:03:53,240
Depende de como o site usa bootstrap.

63
00:03:53,760 --> 00:03:58,440
empresa ou um projeto que usa bootstrap bem dificulta dizer que eles realmente estão usando o bootstrap

64
00:03:58,440 --> 00:04:03,390
porque usam esses componentes principais e então você pode entrar e escrever seus próprios estilos no topo.

65
00:04:03,390 --> 00:04:04,490
Eu argumentaria que uma

66
00:04:04,500 --> 00:04:07,860
Altere as cores altere as fontes altere alguns dos efeitos de deslocamento.

67
00:04:07,920 --> 00:04:13,290
Você não precisa usar exatamente as mesmas cores e tudo o que vem com o bootstrap, mas

68
00:04:13,290 --> 00:04:17,670
isso não significa que haja algo intrinsecamente ruim no uso dos estilos Bootstrap incorporados.

69
00:04:17,670 --> 00:04:19,080
E nós definitivamente estaremos fazendo as duas coisas.

70
00:04:19,200 --> 00:04:23,580
Então, quando estamos fazendo um site e um foco não está realmente no front-end, queremos apenas

71
00:04:23,580 --> 00:04:25,290
fazer algo que seja apresentável rapidamente.

72
00:04:25,290 --> 00:04:30,310
Basicamente, o protótipo front-end usará o bootstrap e não modificaremos muitas peças.

73
00:04:30,780 --> 00:04:34,530
Mas então, se estamos trabalhando em algo um pouco maior, algo que não

74
00:04:34,530 --> 00:04:39,930
queremos parecer, usamos o bootstrap sem mudar nada, então entraremos e adicionaremos alguns de nossos próprios estilos, basicamente, adicione

75
00:04:39,930 --> 00:04:42,580
um casaco de tinta spray em cima do bootstrap.

76
00:04:42,600 --> 00:04:47,250
A próxima coisa que eu quero fazer é mostrar-lhe alguns dos sites que são construídos com bootstrap e

77
00:04:47,250 --> 00:04:50,740
Buddh trip realmente tem um site oficial onde eles mostram alguns desses sites.

78
00:04:50,970 --> 00:04:54,330
Se você clicar na Expo eu já abrir.

79
00:04:54,330 --> 00:04:59,730
Você pode ver que eles mostram bonito e inspirador usa um bootstrap para que possamos abrir alguns

80
00:04:59,970 --> 00:05:01,890
destes para abri-los e novas guias.

81
00:05:02,270 --> 00:05:03,870
E estes são apenas os mais recentes.

82
00:05:03,870 --> 00:05:05,390
Há centenas neste site.

83
00:05:05,420 --> 00:05:11,400
Você pode ver toneladas e toneladas deles e você pode manter a rolagem e rolagem e então podemos ir para alguns

84
00:05:11,400 --> 00:05:14,660
mais velhos e há muitos sites diferentes que estão usando isso.

85
00:05:15,000 --> 00:05:17,050
E eles realmente não parecem todos iguais.

86
00:05:17,610 --> 00:05:20,190
Sim, talvez muitos deles tenham uma barra de navegação.

87
00:05:20,190 --> 00:05:25,470
Talvez muitos deles tenham esse layout de imagem grande em tela cheia, mas isso é mais uma tendência de

88
00:05:25,470 --> 00:05:28,450
design do que algo que o arrastou para ser puramente responsável.

89
00:05:28,980 --> 00:05:30,890
Então, vamos dar uma olhada em alguns desses.

90
00:05:30,930 --> 00:05:36,400
Este é Tim criativo, que é uma empresa que faz modelos de site na realidade.

91
00:05:36,630 --> 00:05:40,330
E você pode ver que temos essa boa grade de imagens.

92
00:05:40,500 --> 00:05:41,600
É muito receptivo.

93
00:05:41,610 --> 00:05:46,710
Se eu encolher isso, pegamos nosso pequeno bar de navegação aqui.

94
00:05:46,920 --> 00:05:52,660
Então, este é um componente de bootstrap da maneira que tudo está definido nesta grade.

95
00:05:52,890 --> 00:05:57,960
O Bootstrap é parcialmente responsável por isso, mas você também pode ver que eles não estão usando

96
00:05:58,010 --> 00:05:59,540
os botões padrão Bootstrap incorporados.

97
00:05:59,580 --> 00:06:00,710
Eles mudaram.

98
00:06:00,780 --> 00:06:01,960
As coisas parecem diferentes.

99
00:06:02,190 --> 00:06:06,130
Então, eu acho que esse é um ótimo uso do bootstrap, que é um site realmente agradável.

100
00:06:06,180 --> 00:06:12,170
Ele funciona bem e ele usa o bootstrap, mas não depende do bootstrap 100%.

101
00:06:13,080 --> 00:06:15,120
Vejamos um ou dois mais.

102
00:06:15,480 --> 00:06:19,640
Então este é chamado Indicus ou índices algo assim.

103
00:06:19,710 --> 00:06:24,200
Aparentemente eles projetam e criam produtos digitais que as pessoas gostam de usar.

104
00:06:24,240 --> 00:06:25,520
Então, vamos rolar para baixo aqui.

105
00:06:25,680 --> 00:06:26,980
Dê uma olhada no que temos.

106
00:06:27,270 --> 00:06:31,950
Então, há algum conteúdo que provavelmente foi construído com o sistema de grade de inicialização que

107
00:06:31,950 --> 00:06:37,500
ajuda a organizar e lay out lay out como eu mencionei anteriormente é notoriamente difícil em Pearcey SS.

108
00:06:37,560 --> 00:06:42,420
Está ficando melhor, mas o bootstrap é realmente muito útil para nos ajudar a resolver as coisas na nossa aplicação.

109
00:06:43,260 --> 00:06:49,380
pequeno rodapé, há um bar de navegação aqui, então é muito divertido ir ao bootstrap Expo levar algum tempo para explorar

110
00:06:49,610 --> 00:06:54,620
alguns dos projetos que costumavam inicializar e ver como eles o usam e todas as diferentes maneiras

111
00:06:54,640 --> 00:06:59,970
pelas quais as empresas estão modificando Ele adiciona em suas próprias fontes suas próprias cores e realmente descobre quais

112
00:06:59,970 --> 00:07:05,160
são os principais componentes que muitos e muitos sites estão usando e por que decidir usar o bootstrap.

113
00:07:05,170 --> 00:07:05,930
E temos um

114
00:07:06,170 --> 00:07:10,950
E na minha opinião, realmente se resume ao sistema de grade que estaremos dedicando um vídeo

115
00:07:10,950 --> 00:07:14,970
nesta unidade às barras de navegação e a capacidade de resposta de tudo.

116
00:07:15,420 --> 00:07:15,710
ESTÁ BEM.

117
00:07:15,720 --> 00:07:20,230
Então, para encerrar, vou mostrar-lhe um site simples que faremos.

118
00:07:20,280 --> 00:07:23,110
Esta é a nossa inicialização chamada petting pesada.

119
00:07:23,190 --> 00:07:28,200
Isso ajuda você a encontrar sua alma gemela felina perfeita e usa bootstrap.

120
00:07:28,200 --> 00:07:33,610
Você pode ver que temos um bar de navegação aqui, assim como nós assinamos os botões Morgan.

121
00:07:33,630 --> 00:07:39,970
Nós recebemos esses pequenos ícones, então temos nosso texto aqui e a pequena linha de tag e, em seguida, o nosso botão.

122
00:07:40,290 --> 00:07:46,880
E então, enquanto eu redimensiono as coisas, tudo é sensível, você pode ver as coisas estão se movendo em torno de mudar.

123
00:07:47,190 --> 00:07:52,660
E, o mais importante, conseguimos esse pequeno hambúrguer e temos uma barra de navegação amigável para dispositivos móveis.

124
00:07:52,710 --> 00:07:57,780
Então, no final desta unidade, estaremos trabalhando na criação dessa página de destino de inicialização falsa que

125
00:07:57,960 --> 00:08:00,540
combina pessoas e animais de estimação em relacionamentos românticos