1
00:00:00,410 --> 00:00:06,720
Voltaremos nesta lição e demonstraremos o sistema de grade de inicialização e o sistema de grade provavelmente é o

2
00:00:06,720 --> 00:00:11,310
primeiro motivo pelo qual as pessoas usam bootstrap as horas da soga das formas.

3
00:00:11,310 --> 00:00:16,500
Os botões são boas mudanças estilísticas que podemos fazer com o bootstrap, mas o sistema de grade do

4
00:00:16,500 --> 00:00:19,290
bootstrap atuará como o esqueleto de toda a nossa aplicação.

5
00:00:19,440 --> 00:00:23,980
É uma maneira muito fácil para nós adicionar estrutura e estabelecer a nossa aplicação.

6
00:00:24,000 --> 00:00:27,480
Então, deixe-me mostrar alguns exemplos do que você pode fazer com o sistema de grade.

7
00:00:27,480 --> 00:00:33,990
Eu tenho alguns sites abertos do Bootstrap ex-beau, o primeiro aqui é uma página do produto para um jarro de

8
00:00:34,380 --> 00:00:36,140
água e deslize para baixo.

9
00:00:36,240 --> 00:00:37,530
Observe o layout aqui.

10
00:00:37,560 --> 00:00:46,740
Nós temos três itens lado a lado e, em seguida, notamos que eles mudam de tamanho, pois eles reduzem a escala e, quando eu atinge o

11
00:00:46,890 --> 00:00:50,310
tamanho do tablet, eles se empilham um sobre o outro.

12
00:00:51,090 --> 00:00:56,940
Então, esse é o sistema de grade de bootstrap no trabalho, como está aqui mesmo, onde temos outro efeito semelhante.

13
00:00:57,270 --> 00:01:02,100
Escalam e depois empilham no tamanho do tablet e do celular.

14
00:01:02,880 --> 00:01:04,110
Aqui está outro exemplo.

15
00:01:04,140 --> 00:01:10,440
Este é o músico islandês e Olafur Arnolds e este é deslocar para baixo neste site.

16
00:01:10,560 --> 00:01:19,260
grade aqui, que você pode ver um layout similar, mas não é só isso, isso também é construído com um sistema de grade.

17
00:01:19,260 --> 00:01:23,150
Nós temos algum conteúdo que é construído com o sistema de

18
00:01:23,160 --> 00:01:25,210
Aqui, este conteúdo.

19
00:01:26,100 --> 00:01:28,350
Estas datas da turnê aqui.

20
00:01:28,350 --> 00:01:33,930
Basicamente, usando o sistema de grade, podemos dizer que queremos que algum conteúdo ocupe 100% da tela, então

21
00:01:34,950 --> 00:01:39,870
também podemos usá-lo para dizer que queremos que cada um deles ocupe 25% da largura da

22
00:01:39,870 --> 00:01:46,620
tela até atingir O lado móvel ou o tamanho da tabuleta para cada exame leva 50 de vez em quando quando atingimos

23
00:01:46,620 --> 00:01:49,220
o celular, cada um leva 100 por cento.

24
00:01:49,860 --> 00:01:50,850
A mesma coisa é feita aqui.

25
00:01:50,850 --> 00:01:56,660
Ele nos permite dividir isso com a tela em pedaços e escolher quantas peças queremos.

26
00:01:56,790 --> 00:02:00,660
Cada um de nossos próprios elementos para aproveitar e aqui está o último que já vimos.

27
00:02:00,660 --> 00:02:05,670
É chamado de Tim Tim criativo Deslize para baixo aqui conteúdo similar.

28
00:02:05,680 --> 00:02:09,530
Aqui está o sistema de grade e aqui também.

29
00:02:09,570 --> 00:02:11,430
Então tudo isso é feito com o sistema de grade.

30
00:02:11,430 --> 00:02:15,590
Tudo isso é muito importante, muito emocionante.

31
00:02:15,760 --> 00:02:20,640
Isso nos ajuda a colocar as coisas tão facilmente em comparação com o que teríamos que fazer sem bootstrap.

32
00:02:20,670 --> 00:02:25,660
Então, estaremos usando sistema de grade de bootstraps e praticamente todas as aplicações que fazemos usando o bootstrap.

33
00:02:25,890 --> 00:02:27,500
E deixe-me mostrar-lhe um deles.

34
00:02:27,540 --> 00:02:33,940
Esta é a nossa aplicação de acampamento e observe que temos uma grade de campgrounds para todo.

35
00:02:33,960 --> 00:02:39,750
E como eu redimensionar o aviso de tela que eles escala e depois vamos para dois em frente e depois para o Mobile.

36
00:02:40,050 --> 00:02:44,480
Nós vamos para um lado e é um layout móvel muito agradável e fácil de usar.

37
00:02:44,760 --> 00:02:47,840
Então, esse é apenas um lugar onde usaremos um sistema de grade.

38
00:02:47,850 --> 00:02:54,060
Agora vamos começar escrevendo algum código usando o sistema de grade, então, cheia tela essa janela e

39
00:02:54,060 --> 00:02:57,800
volte para obter o ponto de partida bootstrapped na guia Avaliada.

40
00:02:58,050 --> 00:03:00,850
Você pode clicar no sistema da grade.

41
00:03:00,850 --> 00:03:05,670
Há um pouco para o sistema de grade, mas vou começar apenas apontando um

42
00:03:06,130 --> 00:03:07,300
único número aqui 12.

43
00:03:07,470 --> 00:03:09,890
Isso é realmente importante para o funcionamento do sistema de grade.

44
00:03:09,900 --> 00:03:15,930
Assim, cada recipiente e bootstrap podem ser divididos em 12 colunas diferentes e, em seguida, usando o

45
00:03:16,230 --> 00:03:21,150
sistema de grade, podemos escolher quantas dessas 12 unidades cada elemento deve assumir.

46
00:03:21,150 --> 00:03:27,050
Então, neste caso, parece que eles têm algo ocupando cerca de 10 em 12 unidades.

47
00:03:27,060 --> 00:03:33,420
E, em seguida, por aqui, duas em 12 unidades ou podem ser nove e 3, mas eles têm alguma

48
00:03:33,420 --> 00:03:40,320
razão onde eles têm mais daqueles 12 no lado esquerdo e, em seguida, uma pequena fração dos 12 no lado direito.

49
00:03:40,770 --> 00:03:46,510
Então, se voltarmos para acampar, este é o nosso recipiente aqui.

50
00:03:46,890 --> 00:03:51,670
E cada uma destas em cada 12 unidades cada uma ocupa três unidades.

51
00:03:51,810 --> 00:03:56,850
Então, acabamos com quatro colunas iguais e depois diminuímos aqui.

52
00:03:56,880 --> 00:04:00,040
Agora, cada um ocupa seis unidades de 12.

53
00:04:00,240 --> 00:04:02,840
Então, novamente esse número 12 é muito importante.

54
00:04:02,850 --> 00:04:03,660
Agora vamos na direita.

55
00:04:03,660 --> 00:04:05,130
Nossa primeira grade.

56
00:04:05,250 --> 00:04:12,710
feita por arquivos, está vazio, exceto para o bootstraps do arquivo SS e, para começar, precisamos definir um contêiner.

57
00:04:12,870 --> 00:04:14,640
Então, eu tenho uma grade

58
00:04:14,860 --> 00:04:18,180
Sempre que usamos uma grade de Boucek, ela precisa estar dentro de um recipiente.

59
00:04:18,210 --> 00:04:22,230
Então a classe é igual ao recipiente.

60
00:04:22,290 --> 00:04:28,950
E a primeira coisa que precisamos fazer é encontrar outra div com classe igual à linha em vez de cada linha.

61
00:04:29,220 --> 00:04:31,100
Temos 12 unidades para escolher.

62
00:04:31,350 --> 00:04:37,110
Então, o que vamos começar por fazer é apenas fazer uma divisão de 50 50, teremos 1 div que ocupa

63
00:04:37,110 --> 00:04:40,730
6 de 12 e, em seguida, outra div que ocupa 6 de 12.

64
00:04:41,070 --> 00:04:42,050
Então vamos fazer isso agora.

65
00:04:42,120 --> 00:04:48,060
Vamos adicionar uma div e então também adicionarei minha segunda divisão e agora são apenas dois dispositivos vazios.

66
00:04:48,330 --> 00:04:49,430
Você não vai trabalhar.

67
00:04:49,650 --> 00:04:57,000
Mas o que vou fazer é adicionar uma aula ao primeiro e isso parecerá uma coluna um pouco estranha, uma grande

68
00:04:57,670 --> 00:05:00,300
seis e nós faremos o mesmo aqui.

69
00:05:00,300 --> 00:05:03,520
A classe é igual a uma coluna de seis grandes.

70
00:05:03,630 --> 00:05:05,200
Então, adicionaremos algum conteúdo aqui.

71
00:05:05,210 --> 00:05:10,880
Eles vão apenas dizer seis grandes colunas.

72
00:05:10,950 --> 00:05:12,140
Mesma coisa aqui.

73
00:05:12,210 --> 00:05:18,950
E enquanto faço isso, vamos economizar e na verdade não veremos muito, não vemos a própria grade.

74
00:05:19,020 --> 00:05:24,300
Então, para tornar isso mais claro, eu vou definir uma classe aqui em vez de uma tag de estilo.

75
00:05:24,300 --> 00:05:26,670
O que eu vou fazer é definir uma classe.

76
00:05:26,730 --> 00:05:31,350
Eu apenas chamarei de rosa e aplicarei essa classe em duas divs para que possamos vê-las.

77
00:05:31,490 --> 00:05:32,820
Então, agora, eles são apenas brancos.

78
00:05:32,820 --> 00:05:33,660
Sem fronteira.

79
00:05:33,750 --> 00:05:34,840
Apenas um pouco de texto.

80
00:05:35,010 --> 00:05:36,050
Mas se nós adicionarmos isso em.

81
00:05:36,180 --> 00:05:37,010
Tão rosa.

82
00:05:37,140 --> 00:05:45,660
E então queremos que o fundo seja cor-de-rosa e nós faremos uma beira roxa com um pixel sólido e

83
00:05:45,660 --> 00:05:49,950
depois aplicaremos a classe rosa a estas duas divs.

84
00:05:49,950 --> 00:05:52,660
Cada um ocupa seis unidades.

85
00:05:52,680 --> 00:05:54,570
Agora vamos voltar e atualizar.

86
00:05:54,900 --> 00:05:55,580
Aqui vamos nós.

87
00:05:55,800 --> 00:05:59,640
Você pode ver que temos dois divs que ocupam exatamente metade do recipiente.

88
00:05:59,670 --> 00:06:01,930
O recipiente começa aqui e aqui.

89
00:06:02,460 --> 00:06:04,530
E dividimos em dois.

90
00:06:04,620 --> 00:06:10,110
Então agora podemos voltar e brincar um pouco mais e vamos tentar adicionar uma terceira coluna.

91
00:06:10,410 --> 00:06:16,150
E desta vez fará a coluna do meio oito unidades e depois a esquerda e a direita serão duas.

92
00:06:16,170 --> 00:06:21,270
Então acabe e eu vou mudar esses números aqui.

93
00:06:21,280 --> 00:06:22,200
Aqui vamos nós.

94
00:06:22,200 --> 00:06:27,960
Terminaremos com uma boa coluna centralizada no meio e depois duas colunas menores à esquerda e a direita que

95
00:06:27,960 --> 00:06:30,900
poderíamos usar para uma barra lateral ou algo assim.

96
00:06:30,900 --> 00:06:34,860
Então, esse é um conceito muito básico subjacente a todo o sistema de grade do bootstrap.

97
00:06:34,920 --> 00:06:40,290
Temos 12 unidades em todo o recipiente em que estamos trabalhando e podemos designar essas

98
00:06:40,290 --> 00:06:42,210
12 unidades da forma que quisermos.

99
00:06:42,240 --> 00:06:49,830
Então, poderíamos fazer 12 colunas individuais cada uma de uma coluna grande e poderíamos fazer

100
00:06:49,830 --> 00:06:52,170
isso 12 vezes assim.

101
00:06:52,290 --> 00:06:53,600
Certifique-se de não perder a contagem.

102
00:06:54,090 --> 00:06:54,670
Aqui vamos nós.

103
00:06:54,690 --> 00:06:56,620
E então vamos nos livrar desses dois por agora.

104
00:06:56,820 --> 00:07:01,630
E se eu estivesse fresco, você verá em uma linha, temos 12 colunas de tamanho uniforme.

105
00:07:01,650 --> 00:07:07,570
Cada um ocupa uma unidade e, em seguida, eu também vou mostrar que podemos adicionar outras linhas.

106
00:07:07,740 --> 00:07:14,390
Então, vamos fazer isso agora, a classe div é igual à linha e simplesmente vai abaixo da primeira linha que temos.

107
00:07:14,730 --> 00:07:18,870
Então, dentro deste, vamos fazer div.

108
00:07:19,020 --> 00:07:23,350
A classe é igual à coluna Dasch grande e vamos fazer quatro.

109
00:07:23,370 --> 00:07:27,280
Então, vamos dividi-lo em três unidades de tamanho uniforme.

110
00:07:27,360 --> 00:07:36,260
Então, a coluna para ela é assim.

111
00:07:36,420 --> 00:07:44,190
E vamos dar uma olhada agora e você pode ver que não aplicamos a classe rosa, mas temos três colunas

112
00:07:44,190 --> 00:07:49,260
de tamanho uniforme que caem abaixo das 12 colunas de tamanho uniforme criadas.

113
00:07:49,470 --> 00:07:53,240
Então, podemos adicionar a classe rosa apenas para facilitar a visualização do que está acontecendo.

114
00:07:53,940 --> 00:07:54,800
E nós vamos lá.

115
00:07:55,140 --> 00:07:57,350
Então, este é apenas um exemplo simples.

116
00:07:57,420 --> 00:08:01,470
Você realmente não teria essas caixas rosa provavelmente em nosso site.

117
00:08:01,710 --> 00:08:08,730
Mas, como você pode ver aqui, temos uma grade onde temos linhas e cada linha tem quatro colunas em cruzamento.

118
00:08:08,760 --> 00:08:15,830
Cada um tem três unidades de largura ou aqui neste site criativo da Tim.

119
00:08:15,900 --> 00:08:19,830
Temos três colunas em cada uma das quatro unidades de largura.

120
00:08:20,070 --> 00:08:20,900
Mesma coisa aqui.

121
00:08:20,900 --> 00:08:23,860
Três colunas estão por aqui.

122
00:08:23,910 --> 00:08:24,960
Temos quatro colunas.

123
00:08:24,960 --> 00:08:26,840
Cada um tem três unidades de largura.

124
00:08:27,390 --> 00:08:30,650
Então, esse é o muito básico da grade no próximo vídeo.

125
00:08:30,660 --> 00:08:35,850
Falaremos sobre como tornar a grade reativa e ter layouts diferentes em diferentes tamanhos.

126
00:08:35,850 --> 00:08:38,230
Neste momento, estamos trabalhando com uma coluna grande.

127
00:08:38,250 --> 00:08:43,050
tamanhos e veremos aqueles no próximo vídeo e também veremos como podemos escrever grades aninhadas

128
00:08:43,050 --> 00:08:49,080
onde podemos adicionar outra linha dentro de qualquer uma dessas colunas e dividir isso em mais 12 peças.

129
00:08:49,080 --> 00:08:52,290
Eu expliquei com um grande meio e há outros três