1 00:00:00,000 --> 00:00:04,797 [MÚSICA] 2 00:00:04,797 --> 00:00:11,490 Neste exercício, vamos ver o suporte do Bootstrap para botões e formulários. 3 00:00:11,490 --> 00:00:17,293 Então vamos incluir alguns botões e grupo de botões em nossa página web. 4 00:00:17,293 --> 00:00:24,190 E também olhamos para projetar formulários e modelar os formulários usando classes Bootstrap. 5 00:00:25,780 --> 00:00:31,080 Para começar, vá para a página de instruções e 6 00:00:31,080 --> 00:00:36,900 baixe o arquivo contactus.html.zip que fornecemos lá. 7 00:00:36,900 --> 00:00:39,798 Então clique com o botão direito sobre isso e 8 00:00:39,798 --> 00:00:44,969 salve este link em sua pasta Confusion. 9 00:00:48,512 --> 00:00:49,568 Como, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip arquivo. 11 00:01:01,598 --> 00:01:08,580 E, em seguida, uma vez que o arquivo zip é baixado, descompacte o arquivo para obter a página contactus.html. 12 00:01:09,740 --> 00:01:11,580 Em seguida, você pode excluir o arquivo zip. 13 00:01:13,440 --> 00:01:18,764 Depois de descompactar o arquivo e obter a página contactus.html, 14 00:01:18,764 --> 00:01:23,084 você notaria que quando você carregar esta página em seu 15 00:01:23,084 --> 00:01:28,107 navegador usando localhost: 3000/ contactus.html 16 00:01:28,107 --> 00:01:34,748 , você verá que esta página já está pré-formatada com algum conteúdo. 17 00:01:34,748 --> 00:01:38,550 Então você pode notar que você já tem a barra de navegação lá. 18 00:01:38,550 --> 00:01:42,846 Temos o jumbotron já formatado para nós. 19 00:01:42,846 --> 00:01:48,061 E você deve notar que eu tenho as migalhas de pão e 20 00:01:48,061 --> 00:01:52,190 o contato que estamos indo aqui formatados. 21 00:01:52,190 --> 00:01:57,730 Então você verá algumas informações adicionais, o endereço aqui. 22 00:01:57,730 --> 00:02:04,180 E também, você notará que o rodapé já está formado. 23 00:02:04,180 --> 00:02:06,580 Mas você vai notar duas coisas aqui, 24 00:02:06,580 --> 00:02:11,820 você vai notar que há uma linha aqui que diz grupos de botões ir aqui e, 25 00:02:11,820 --> 00:02:15,678 em seguida, mais uma linha aqui que diz formulário vai aqui. 26 00:02:15,678 --> 00:02:20,280 Então vamos substituir estes dois por um grupo de botões e um formulário. 27 00:02:20,280 --> 00:02:25,380 E ao longo do caminho, aprenda o suporte do Bootstrap para botões e formulários. 28 00:02:25,380 --> 00:02:31,015 Antes de avançarmos, agora que temos três páginas em nosso site, 29 00:02:31,015 --> 00:02:34,585 é uma boa idéia para nós vinculá-los juntos, 30 00:02:34,585 --> 00:02:39,525 tanto na barra de navegação quanto nos links no rodapé. 31 00:02:39,525 --> 00:02:45,165 Vamos modificar esses dois para que possamos navegar entre essas três páginas facilmente. 32 00:02:45,165 --> 00:02:52,008 Então, indo para a página contactus.html, você notará que na barra de navegação, 33 00:02:52,008 --> 00:02:56,816 já tenho os links para index.html configurados corretamente. 34 00:02:58,908 --> 00:03:03,568 E você notaria que no fundo 35 00:03:03,568 --> 00:03:08,450 aqui você tem o link de contato aqui. 36 00:03:08,450 --> 00:03:15,550 Mas o link correspondente ao about não foi configurado corretamente. 37 00:03:15,550 --> 00:03:19,905 Então vá para este link aqui e, em seguida, atualize isso para 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 O link entre em contato conosco pode ser deixado sozinho como tal. 40 00:03:27,788 --> 00:03:31,050 E, em seguida, salve as alterações. 41 00:03:31,050 --> 00:03:35,070 Agora, da mesma forma, vá para o rodapé desta página. 42 00:03:35,070 --> 00:03:40,975 E você vai notar que no rodapé temos esses três links aqui. 43 00:03:40,975 --> 00:03:45,215 E isso pode ser um bom ponto para substituir os links 44 00:03:45,215 --> 00:03:48,015 com os links para as páginas correspondentes. 45 00:03:48,015 --> 00:03:54,342 Então eu vou dizer, index.html, aboutus.html 46 00:03:54,342 --> 00:03:59,665 e, contactus.html. 47 00:03:59,665 --> 00:04:01,325 E salve as alterações. 48 00:04:01,325 --> 00:04:08,117 Da mesma forma, vá para index.html e, em seguida, no index.html também, 49 00:04:08,117 --> 00:04:12,280 o link entre em contato conosco não foi configurado. 50 00:04:12,280 --> 00:04:18,640 Então vamos atualizar isso para contactus.html. 51 00:04:18,640 --> 00:04:21,900 E, em seguida, da mesma forma, atualize os links no rodapé. 52 00:04:23,050 --> 00:04:27,258 Também vá para aboutus.html e, em seguida, repare os links mesmo lá. 53 00:04:27,258 --> 00:04:32,540 Então, no aboutus.html também, no cabeçalho eu vou consertar o link. 54 00:04:37,461 --> 00:04:41,690 E também no rodapé do aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Então, agora, quando você acessar seu site, 56 00:04:44,050 --> 00:04:49,290 você poderá navegar de volta para sua página inicial, para sua página sobre. 57 00:04:49,290 --> 00:04:52,950 E a partir da página sobre, você pode até voltar para a página de contatos. 58 00:04:52,950 --> 00:04:57,780 Então, todos os links entre as três páginas nos cabeçalhos correspondentes, e 59 00:04:57,780 --> 00:05:01,480 também os rodapés, aqui devem ser configurados. 60 00:05:01,480 --> 00:05:06,500 Assim, se você clicar em qualquer um destes irá levá-lo para a página apropriada. 61 00:05:08,190 --> 00:05:12,660 Agora é a hora de começar a trabalhar nos botões que vamos 62 00:05:12,660 --> 00:05:17,040 incluir em nossa página contactus.html. 63 00:05:17,040 --> 00:05:23,060 Então o que eu vou fazer é substituir esta linha pelo código para 64 00:05:23,060 --> 00:05:25,580 o botão e o grupo de botões e 65 00:05:25,580 --> 00:05:30,465 depois disso, vamos voltar para explicar como tudo isso funciona. 66 00:05:30,465 --> 00:05:34,650 Abrindo contactus.html em nosso editor, 67 00:05:34,650 --> 00:05:40,402 vamos localizar o lugar onde esta declaração, grupo de botões vai aqui, existe. 68 00:05:40,402 --> 00:05:44,230 E então eu vou substituir isso pelo código correspondente ao 69 00:05:44,230 --> 00:05:46,920 grupo de botões primeiro. 70 00:05:46,920 --> 00:05:51,600 E depois voltarei para explicar como funciona este código. 71 00:05:51,600 --> 00:05:56,570 Então vamos salvar as alterações e, em seguida, dar uma olhada em como 72 00:05:56,570 --> 00:06:00,920 este grupo de botões se parece em nosso navegador. 73 00:06:02,550 --> 00:06:07,224 Indo para o seu navegador, agora você pode ver que em nossa 74 00:06:07,224 --> 00:06:12,310 página web o grupo de botões foi criado. 75 00:06:12,310 --> 00:06:15,040 Então você pode ver que existem três botões aqui, Chamada, 76 00:06:15,040 --> 00:06:17,540 Skype e Email botões. 77 00:06:17,540 --> 00:06:21,990 Agora, todos esses três são unidos em uma única barra ou barra de 78 00:06:21,990 --> 00:06:26,800 botões ou o que está em termos Bootstrap chamado um grupo de botões. 79 00:06:26,800 --> 00:06:31,350 Então vamos ver como vamos construir algo assim no 80 00:06:31,350 --> 00:06:32,390 código Bootstrap. 81 00:06:33,530 --> 00:06:41,530 Então aqui eu tenho a janela do navegador e meu código aberto lado a lado. 82 00:06:41,530 --> 00:06:44,990 Então vamos dar uma olhada em como criamos esse código de botão. 83 00:06:44,990 --> 00:06:48,536 Olhando para o código, você percebe que 84 00:06:48,536 --> 00:06:53,745 os botões estão incluídos dentro de uma div aqui. 85 00:06:53,745 --> 00:06:57,060 Para o div, aplicamos a classe, btn-group. 86 00:06:57,060 --> 00:07:02,255 Então, se você tiver um grupo de botões que você deseja unir e 87 00:07:02,255 --> 00:07:06,225 apresentar como um grupo de botões, como uma barra de botões, 88 00:07:06,225 --> 00:07:10,990 então você usaria uma div com a classe de grupo de botões e 89 00:07:10,990 --> 00:07:14,540 a função como grupo aqui para essa div. 90 00:07:14,540 --> 00:07:18,332 Agora dentro disso, você vai notar que eu estou usando a 91 00:07:18,332 --> 00:07:20,550 tag, a, para definir os três botões. 92 00:07:20,550 --> 00:07:23,590 Então vamos ver como definimos o botão três. 93 00:07:23,590 --> 00:07:26,430 Vejamos como definimos o botão Chamada. 94 00:07:26,430 --> 00:07:30,030 Então, esta linha específica define o botão Chamada. 95 00:07:30,030 --> 00:07:33,718 Então eu digo, um, papel é igual ao botão. 96 00:07:33,718 --> 00:07:38,375 Então este, um, tag aqui, 97 00:07:38,375 --> 00:07:42,565 eu estou usando isso como um botão aqui. 98 00:07:42,565 --> 00:07:44,955 Então é por isso que eu especifico o papel como um botão. 99 00:07:44,955 --> 00:07:46,545 Então, isto é importante. 100 00:07:46,545 --> 00:07:49,591 E então olhe para as aulas que estou aplicando a isso. 101 00:07:49,591 --> 00:07:54,926 Então o primeiro é classe btn. 102 00:07:54,926 --> 00:07:59,880 A classe btn é a classe botão do Bootstrap. 103 00:07:59,880 --> 00:08:03,720 Então ele irá exibir isso como um botão Bootstrap clássico. 104 00:08:03,720 --> 00:08:07,300 A segunda parte diz é btn-primary. 105 00:08:07,300 --> 00:08:10,940 Então, isto é o que define a cor do botão aqui. 106 00:08:10,940 --> 00:08:15,910 Então, neste caso, esta cor do botão é azul. 107 00:08:15,910 --> 00:08:18,750 E assim, esta é a cor primária no Bootstrap. 108 00:08:18,750 --> 00:08:20,670 Então, btn-Primary. 109 00:08:20,670 --> 00:08:25,510 E depois disso, veja o uso do href aqui. 110 00:08:25,510 --> 00:08:30,850 Então, uma vez que esta é uma tag A, eu posso usar um atributo href nessa tag A. 111 00:08:30,850 --> 00:08:33,610 Então, o atributo href aponta para o número de telefone. 112 00:08:35,110 --> 00:08:40,940 E, em seguida, você percebe que estou usando um ícone de fonte aqui para o telefone. 113 00:08:40,940 --> 00:08:47,560 É por isso que eu tenho i classe fa fa-phone e depois da palavra chamada. 114 00:08:47,560 --> 00:08:53,170 Então, isso é o que permite construir este 115 00:08:53,170 --> 00:08:58,550 botão azul, que está incluído nesta barra de botões aqui. 116 00:08:58,550 --> 00:09:04,150 Da mesma forma, o próximo, você percebe que isso também diz botão de função. 117 00:09:04,150 --> 00:09:07,795 E então, à medida que você passa, você vê que btn-info. 118 00:09:07,795 --> 00:09:12,235 BTN-info dá-lhe uma cor de uma cor azul claro. 119 00:09:12,235 --> 00:09:18,665 Então, por padrão btn-info refere-se a um botão colorido azul claro aqui. 120 00:09:18,665 --> 00:09:22,975 E então, você pode ver que eu tenho o Skype definido aqui. 121 00:09:22,975 --> 00:09:28,172 E, em seguida, o terceiro que, é um botão verde lá com e-mail. 122 00:09:28,172 --> 00:09:34,542 Observe que eu especificar letras um papel = classe botão = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 Então, quando você diz btn-success, que será um botão verde aqui. 124 00:09:38,132 --> 00:09:44,102 Então, você tem algumas cores que já estão definidas no Bootstrap. 125 00:09:44,102 --> 00:09:48,322 Primário refere-se ao azul no primeiro, o sucesso azul claro refere-se 126 00:09:49,390 --> 00:09:54,250 à cor verde, então você tem aviso que seria uma cor amarelo pálido, e 127 00:09:54,250 --> 00:09:56,150 então perigo, que é uma cor vermelha. 128 00:09:56,150 --> 00:09:59,763 Então, essas são cores padrão que foram configuradas no Bootstrap. 129 00:10:01,712 --> 00:10:06,602 E, em seguida, a configuração href, com o mailto aqui, e 130 00:10:06,602 --> 00:10:10,140 depois disso, você tem o. 131 00:10:11,972 --> 00:10:16,030 Fonte como ícone aqui e, em seguida, o e-mail lá. 132 00:10:16,030 --> 00:10:21,410 Então essas três tags e, que estão atuando atualmente como botões, 133 00:10:21,410 --> 00:10:26,780 estão incluídas no lado daqueles div, que atua como o grupo btn-. 134 00:10:26,780 --> 00:10:32,100 Então, é assim que exibimos um grupo de botões no Bootstrap. 135 00:10:32,100 --> 00:10:34,470 Se você quiser apenas um botão, 136 00:10:34,470 --> 00:10:37,220 tudo o que você precisa fazer é incluir apenas uma dessas linhas lá. 137 00:10:38,270 --> 00:10:41,130 Então, você também pode usar a tag do botão. 138 00:10:41,130 --> 00:10:44,270 Se você usar a tag button, então você não precisa especificar a função, 139 00:10:44,270 --> 00:10:46,730 em vez disso você apenas diz type button. 140 00:10:46,730 --> 00:10:49,700 Porque um botão também pode atuar como um botão de envio lá. 141 00:10:49,700 --> 00:10:54,140 Então, mais tarde, em formulários, vamos olhar para o uso da tag botão, 142 00:10:54,140 --> 00:10:57,040 para criar um botão para ser incluído em nosso formulário. 143 00:10:58,600 --> 00:11:03,900 Continuando com o exercício, nosso próximo passo seria começar, 144 00:11:03,900 --> 00:11:08,790 desenvolvendo o formulário que vamos incluir na página contactus.html. 145 00:11:08,790 --> 00:11:13,350 Faremos isso passo a passo, para que em cada passo aprendamos um pouco de 146 00:11:13,350 --> 00:11:17,610 como você inclui alguns elementos em sua forma. 147 00:11:17,610 --> 00:11:24,480 Então, como um começo, quando você vai para a página contactus.html, 148 00:11:24,480 --> 00:11:29,430 bem ali, você verá esta declaração chamada, formulário vai aqui. 149 00:11:29,430 --> 00:11:34,771 Agora, o que eu vou fazer é mudar isso de col-sm 150 00:11:34,771 --> 00:11:39,480 para col-md, de modo que para 151 00:11:39,480 --> 00:11:44,290 tamanhos de tela extra pequeno a pequeno, minha forma será colocada para fora 152 00:11:44,290 --> 00:11:49,352 ocupando toda a largura da tela, porque ele usa col-xs-12. 153 00:11:49,352 --> 00:11:53,024 Mas a partir de tela de tamanho médio em enfermarias, 154 00:11:53,024 --> 00:11:57,290 ele ocupará apenas 9 das 12 colunas. 155 00:11:57,290 --> 00:11:59,600 Então, vamos começar a construir o formulário. 156 00:11:59,600 --> 00:12:05,470 Então, o que eu vou fazer é, eu vou substituir isso, pelo meu primeiro pedaço de código. 157 00:12:06,580 --> 00:12:11,300 Vamos incluir dois campos em nosso formulário, para 158 00:12:11,300 --> 00:12:14,280 o nome e sobrenome do usuário. 159 00:12:14,280 --> 00:12:17,440 Deixe-me adicionar o código, então veremos o resultado. 160 00:12:17,440 --> 00:12:19,750 E depois, voltamos e examinamos o código. 161 00:12:19,750 --> 00:12:23,190 Então, adicionando o código nesse ponto, 162 00:12:23,190 --> 00:12:27,820 como sempre esses trechos de código estão nas instruções. 163 00:12:27,820 --> 00:12:30,510 Então, deixe-me salvar as alterações. 164 00:12:30,510 --> 00:12:35,690 E então vamos voltar e olhar para o que este formulário se parece no navegador. 165 00:12:35,690 --> 00:12:40,250 Olhando para o formulário, você verá que eles têm agora dois temas no formulário aqui. 166 00:12:42,060 --> 00:12:46,790 O primeiro, tem um rótulo no lado esquerdo dizendo Nome e 167 00:12:46,790 --> 00:12:49,780 o então você tem a caixa de entrada aqui. 168 00:12:49,780 --> 00:12:52,800 E, em seguida, o Sobrenome e, em seguida, uma caixa de entrada aqui. 169 00:12:52,800 --> 00:12:56,710 Agora você percebe também que este formulário é colocado para fora, de modo 170 00:12:56,710 --> 00:13:00,510 que esta parte ocupa a parte semi da tela, e 171 00:13:00,510 --> 00:13:03,620 a parte restante sendo ocupada pela parte restante da tela. 172 00:13:03,620 --> 00:13:08,400 Você está começando a se perguntar, como vamos fazer isso? 173 00:13:09,720 --> 00:13:15,095 A grade Bootstrap nos ajuda a decidir sobre esses tamanhos. 174 00:13:15,095 --> 00:13:18,725 Essa seria uma pergunta muito boa para você se perguntar. 175 00:13:18,725 --> 00:13:21,695 Vamos ver o código e entender como ele se parece. 176 00:13:21,695 --> 00:13:26,595 Antes de fazer isso, vamos dar uma olhada no mesmo layout de formulários, 177 00:13:26,595 --> 00:13:29,595 no tamanho de tela extra pequeno. 178 00:13:29,595 --> 00:13:32,795 Então, mudando para o tamanho de tela extra pequeno. 179 00:13:32,795 --> 00:13:34,425 Então vamos para o Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 Você percebe, como o formulário é colocado para fora no tamanho de tela extra pequena. 181 00:13:40,060 --> 00:13:44,304 Então, você verá que o rótulo está no topo, e, em 182 00:13:44,304 --> 00:13:50,590 seguida, a caixa em si, caixa de entrada em si é a parte inferior, da mesma forma para o sobrenome. 183 00:13:50,590 --> 00:13:53,420 Então, você percebe que Bootstrap. 184 00:13:53,420 --> 00:13:57,500 By the way, ele fornece essas classes de formulário. 185 00:13:57,500 --> 00:14:02,460 Automaticamente, torna o seu formulário responsivo, de modo que quando ele é 186 00:14:02,460 --> 00:14:07,450 colocado para fora em diferentes tamanhos de tela, o formulário será apropriado para fora, de 187 00:14:07,450 --> 00:14:12,550 modo que ele não vai ficar todo esmagado em tamanhos de tela pequenos. 188 00:14:13,610 --> 00:14:17,220 Mas para tamanhos de tela maiores, porque você tem maior propriedade real, 189 00:14:17,220 --> 00:14:23,480 você é capaz de esticar o formulário, para fazer uso do espaço extra que você tem. 190 00:14:24,830 --> 00:14:31,150 Olhando para esse código-fonte, e o formulário lado a lado, obviamente 191 00:14:31,150 --> 00:14:36,140 a primeira coisa que você percebe, é que seu formulário começa com a tag formulário aqui. 192 00:14:36,140 --> 00:14:40,160 Então, formulário e, em seguida, o formulário de fechamento, tag aqui. 193 00:14:40,160 --> 00:14:45,970 Então, lá dentro, você está descrevendo as várias partes da sua forma. 194 00:14:45,970 --> 00:14:49,150 Então, vamos dar uma olhada em como o primeiro nome é construído, 195 00:14:49,150 --> 00:14:54,390 o sobrenome obviamente como parece deve estar usando uma abordagem semelhante. 196 00:14:54,390 --> 00:15:01,240 Então, no padrão, o que você percebe é que, há uma div aqui. 197 00:15:01,240 --> 00:15:06,480 Elemento div aqui, com a div de fechamento aqui. 198 00:15:06,480 --> 00:15:10,515 Então este elemento div tem uma classe chamada form-group. 199 00:15:11,920 --> 00:15:15,108 E depois seguido por uma classe de linha. 200 00:15:15,108 --> 00:15:17,080 Então, a classe form-group essencialmente, 201 00:15:17,080 --> 00:15:22,580 diz que o que está dentro desta div será tratado como um grupo de elementos. 202 00:15:22,580 --> 00:15:26,120 E então eles serão dispostos em conformidade. 203 00:15:26,120 --> 00:15:30,902 E a segunda parte, você vê o uso de linha aqui. 204 00:15:30,902 --> 00:15:35,740 Então, você veria que a linha do grupo Bootstrap entra em jogo aqui. 205 00:15:35,740 --> 00:15:40,610 E assim este grupo de formulários específico, pode ser colocado para fora 206 00:15:40,610 --> 00:15:45,480 usando a linha e as classes de coluna que você tem a partir da grade Bootstrap. 207 00:15:45,480 --> 00:15:48,506 Então, agora, se você aplicar a linha a esta div, 208 00:15:48,506 --> 00:15:52,956 o que quer que esteja lá dentro, você pode usar as classes de coluna, 209 00:15:52,956 --> 00:15:58,741 para decidir exatamente quanto de espaço cada uma delas vai ocupar na tela. 210 00:15:58,741 --> 00:16:05,390 Agora, de modo que isso torna mais claro para, para que esses grupos de forma encerram. 211 00:16:05,390 --> 00:16:06,650 Esta unidade. 212 00:16:06,650 --> 00:16:08,570 Vamos ver esta repetição uma e 213 00:16:08,570 --> 00:16:14,460 outra vez quando estamos projetando os vários elementos da forma. 214 00:16:14,460 --> 00:16:20,020 Em seguida, abaixo disso, você vê esta etiqueta de etiqueta aqui. 215 00:16:20,020 --> 00:16:25,180 Para a tag label, há certos atributos que foram atribuídos a ela. 216 00:16:25,180 --> 00:16:28,740 Então você vê que a tag label usa um nome para. 217 00:16:28,740 --> 00:16:33,650 Então este rótulo é para algo com o nome do ID. 218 00:16:33,650 --> 00:16:37,690 Então, qual é a caixa de entrada que segue logo abaixo disso. 219 00:16:37,690 --> 00:16:39,790 Vamos olhar para isso daqui a pouco. 220 00:16:39,790 --> 00:16:46,136 E, em seguida, olhar para as classes que são aplicadas à classe label, col-md-2. 221 00:16:46,136 --> 00:16:50,029 Então, o que significa que para telas médias a extra grandes, 222 00:16:50,029 --> 00:16:56,040 este elemento particular vai ocupar 2 colunas do espaço. 223 00:16:56,040 --> 00:16:57,884 E, em seguida, note o outro. 224 00:16:57,884 --> 00:17:00,764 Diz, rótulo col-form-label. 225 00:17:00,764 --> 00:17:05,957 Assim, o col-form-label especifica essencialmente 226 00:17:05,957 --> 00:17:11,780 que este rótulo deve ser posicionado para ser alinhado com 227 00:17:11,780 --> 00:17:18,270 o outro elemento que faz parte deste grupo de formulários. 228 00:17:18,270 --> 00:17:20,576 Então, neste caso, a caixa de entrada. 229 00:17:20,576 --> 00:17:24,508 E isso também significa que 230 00:17:24,508 --> 00:17:29,868 o rótulo seja alinhado no meio, 231 00:17:29,868 --> 00:17:35,550 horizontalmente com a caixa de entrada. 232 00:17:35,550 --> 00:17:39,535 Então essa é a razão pela qual usamos a classe col-form-label. 233 00:17:39,535 --> 00:17:43,725 Se você não aplicar isso, seu rótulo será 234 00:17:43,725 --> 00:17:48,185 alinhado à parte superior da caixa de entrada. 235 00:17:48,185 --> 00:17:53,551 Que seu formulário não ficará tão bom em tamanhos de tela médios a extra grandes. 236 00:17:53,551 --> 00:17:59,727 Agora, no lado esquerdo, é claro, porque esta janela do navegador é esmagada, 237 00:17:59,727 --> 00:18:05,360 então ele está mostrando a exibição em um tamanho de tela pequeno ou extra pequeno aqui. 238 00:18:05,360 --> 00:18:11,650 Então é por isso que você vê o rótulo empilhando em cima da caixa de entrada aqui. 239 00:18:11,650 --> 00:18:14,560 Então este é o rótulo que especifica. 240 00:18:14,560 --> 00:18:18,380 Então, se você tem um rótulo que você deseja atribuir a um elemento, então 241 00:18:18,380 --> 00:18:20,890 é assim que você vai atribuir o rótulo. 242 00:18:20,890 --> 00:18:25,740 Aqui abaixo, você vê uma classe div col-md-10. 243 00:18:25,740 --> 00:18:29,120 Então, isso ocupa os 10 restantes das 12 colunas. 244 00:18:29,120 --> 00:18:31,670 Então, duas colunas que são ocupadas pelo rótulo. 245 00:18:31,670 --> 00:18:36,070 E as dez colunas restantes ocupadas por isso, mas estão fechadas dentro da div. 246 00:18:36,070 --> 00:18:38,230 E dentro desta div, 247 00:18:38,230 --> 00:18:43,493 você vê que há um elemento de tag de entrada lá com o texto de texto. 248 00:18:43,493 --> 00:18:49,734 Então, o que significa que esta caixa de entrada aceita entrada de texto. 249 00:18:49,734 --> 00:18:52,170 E a classe, olhe para a classe aqui. 250 00:18:52,170 --> 00:18:54,800 Diz “controle de forma”. 251 00:18:54,800 --> 00:18:57,730 Isto é importante para aplicar à caixa de entrada aqui. 252 00:18:57,730 --> 00:19:01,301 Então form-control, e id nome próprio. 253 00:19:01,301 --> 00:19:04,550 E o nome que é o primeiro nome. 254 00:19:04,550 --> 00:19:07,630 Em seguida, espaço reservado Nome. 255 00:19:07,630 --> 00:19:12,840 Portanto, o espaço reservado é o que aparece dentro da caixa como um espaço reservado para 256 00:19:12,840 --> 00:19:14,610 a caixa de entrada. 257 00:19:14,610 --> 00:19:17,470 Então todos esses atributos são atribuídos. 258 00:19:17,470 --> 00:19:18,690 Então, mais importante, 259 00:19:18,690 --> 00:19:23,810 observe o uso da classe de controle de formulário que está sendo aplicado ao tipo de entrada. 260 00:19:23,810 --> 00:19:29,960 Então é assim que você estrutura esses dois elementos em sua forma. 261 00:19:29,960 --> 00:19:35,425 Para tamanhos de tela pequenos e abaixo, ele empilha as duas coisas. 262 00:19:35,425 --> 00:19:37,118 Mas para médio a extra grande, 263 00:19:37,118 --> 00:19:41,500 você viu que ele está posicionando-os horizontalmente lado a lado. 264 00:19:41,500 --> 00:19:45,645 A mesma coisa se aplica ao código do sobrenome também. 265 00:19:45,645 --> 00:19:49,670 Será muito parecido com a forma como o primeiro nome é estruturado. 266 00:19:49,670 --> 00:19:54,380 Então eu gostaria que você gastasse um pouco de tempo dando uma olhada nesse código também. 267 00:19:54,380 --> 00:19:58,150 Para que você veja, com base em sua compreensão disso, 268 00:19:58,150 --> 00:20:00,230 como isso também é formatado. 269 00:20:01,550 --> 00:20:08,360 O próximo tipo de evento formal que vamos adicionar em é um elemento de grupo de entrada. 270 00:20:08,360 --> 00:20:09,330 Deixe-me acrescentar o código. 271 00:20:09,330 --> 00:20:13,111 Vamos olhar para o que o formulário acaba por ser. 272 00:20:13,111 --> 00:20:15,560 E então vamos voltar e examinar o código. 273 00:20:15,560 --> 00:20:19,542 Então aqui, após a segunda div, depois do campo sobrenome, 274 00:20:19,542 --> 00:20:24,840 vou incluir o código para o próximo elemento aqui. 275 00:20:25,880 --> 00:20:28,142 E então vamos salvar as alterações. 276 00:20:28,142 --> 00:20:30,466 E então, imediatamente, 277 00:20:30,466 --> 00:20:36,360 você veria mais algumas coisas adicionadas em sua forma. 278 00:20:36,360 --> 00:20:38,975 Você vê um campo de número de telefone adicionado aqui. 279 00:20:38,975 --> 00:20:42,985 Isso, pelo que parece, você vê que isso é muito parecido com isso. 280 00:20:42,985 --> 00:20:45,335 Então eu não vou explicar o código para isso. 281 00:20:45,335 --> 00:20:48,110 Isso deve ser muito simples para você entender. 282 00:20:48,110 --> 00:20:52,073 E, em seguida, este campo de e-mail também deve ser muito simples 283 00:20:52,073 --> 00:20:53,747 para você entender. 284 00:20:53,747 --> 00:20:56,537 Porque isso parece muito parecido com o sobrenome. 285 00:20:56,537 --> 00:21:02,477 Exceto que, para isso, o campo de entrada, o tipo será definido como e-mail. 286 00:21:02,477 --> 00:21:06,739 Para que as capacidades de verificação de forma integrada do 287 00:21:06,739 --> 00:21:10,094 seu navegador sejam iniciadas automaticamente. 288 00:21:10,094 --> 00:21:14,113 Assim, quando você digitar algo que não parece um e-mail, 289 00:21:14,113 --> 00:21:16,860 ele vai reclamar apropriadamente. 290 00:21:16,860 --> 00:21:21,780 Então vamos examinar esta parte particular do formulário aqui. 291 00:21:21,780 --> 00:21:27,500 Observe que, neste caso, estamos adicionando entre parênteses esquerdo e 292 00:21:27,500 --> 00:21:31,430 o parêntese direito a esta caixa de entrada específica. 293 00:21:31,430 --> 00:21:36,570 Então, como você adiciona coisas em sua caixa assim? 294 00:21:36,570 --> 00:21:41,330 Olhando para o código aqui em seu editor, 295 00:21:41,330 --> 00:21:45,750 você vê que você ainda tem a linha de grupo de formulários que você já entende. 296 00:21:45,750 --> 00:21:50,942 E abaixo aqui, você tem tipo de entrada elemento formulário id telnum, 297 00:21:50,942 --> 00:21:54,460 e assim por diante, que também deve ser muito claro para você. 298 00:21:54,460 --> 00:21:57,360 Então acho que não preciso explicar essa parte para você. 299 00:21:57,360 --> 00:22:04,366 Observe como estou usando as classes de coluna de grade do Bootstrap para cada uma delas. 300 00:22:04,366 --> 00:22:08,060 Assim, o rótulo é dado col-md-2. 301 00:22:08,060 --> 00:22:12,062 E então o telefone número um é dado 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 e col-md-7 aqui. 303 00:22:16,880 --> 00:22:23,100 Assim, o número de telefone, este elemento está devidamente posicionado. 304 00:22:23,100 --> 00:22:27,310 Mas, em particular, vamos prestar atenção a esta parte. 305 00:22:27,310 --> 00:22:31,470 Então este aqui está dentro desta div. 306 00:22:32,670 --> 00:22:36,250 Então, dentro desta div, observe a classe que lhe foi dada. 307 00:22:36,250 --> 00:22:38,689 A classe diz “input-group”. 308 00:22:38,689 --> 00:22:43,587 Então, essencialmente, o que quer que esteja dentro desta div será tratado como 309 00:22:43,587 --> 00:22:45,350 um grupo de elementos aqui. 310 00:22:45,350 --> 00:22:49,030 Então é por isso que a classe dada é input-group. 311 00:22:49,030 --> 00:22:53,600 Agora, para adicionar algo assim, você vai usar 312 00:22:53,600 --> 00:22:59,000 uma classe chamada como input-group-addon. 313 00:22:59,000 --> 00:23:04,490 E então observe que estou usando um div para segurar esse item. 314 00:23:04,490 --> 00:23:08,200 Posso usar qualquer coisa aqui, mas um div é útil aqui. 315 00:23:08,200 --> 00:23:12,980 Então eu digo div classe input-group-addon. 316 00:23:12,980 --> 00:23:16,250 E, em seguida, o tipo de div de fechamento dentro, onde, 317 00:23:16,250 --> 00:23:18,500 notar que eu tenho o parêntese esquerdo. 318 00:23:18,500 --> 00:23:25,477 Então isso é o que permite que você adicione em algum 319 00:23:25,477 --> 00:23:30,963 apêndice extra à sua caixa de entrada aqui. 320 00:23:30,963 --> 00:23:38,390 Da mesma forma, o abaixo aqui também é um parêntese direito de input-group-addon. 321 00:23:38,390 --> 00:23:42,350 Então é isso que adiciona o outro parêntese direito aqui. 322 00:23:42,350 --> 00:23:46,270 Agora, entre esses dois, é claro, você tem o tipo de entrada. 323 00:23:46,270 --> 00:23:51,094 A entrada com o tipo tel e classe formulário controle, id, nome, 324 00:23:51,094 --> 00:23:54,310 espaço reservado, tudo no lugar aqui. 325 00:23:54,310 --> 00:23:57,190 Então isso não é nada além da parte do código de área. 326 00:23:57,190 --> 00:24:02,049 Então, se você usar este input-group junto com input-group-addons 327 00:24:02,049 --> 00:24:04,440 como este em ambos os lados. 328 00:24:04,440 --> 00:24:10,070 Essas coisas serão adicionadas ao seu elemento de entrada como este. 329 00:24:10,070 --> 00:24:15,880 Isso lhe fornece uma maneira agradável de projetar sua forma com alguns adicionados em. 330 00:24:15,880 --> 00:24:20,170 Então, por exemplo, se você tiver um campo que está aceitando 331 00:24:22,450 --> 00:24:27,360 dinheiro como entrada, você poderia simplesmente adicionar um cifrão ao lado esquerdo para 332 00:24:27,360 --> 00:24:33,050 indicar ao usuário que esse é um campo que leva o valor da moeda no momento. Neste 333 00:24:33,050 --> 00:24:37,558 momento, neste caso, este campo tem um código de área. 334 00:24:37,558 --> 00:24:43,330 E se você ver como os códigos de área são escritos nos Estados Unidos e no 335 00:24:43,330 --> 00:24:47,640 Canadá, você sabe que eles estão entre parênteses esquerdo e direito. 336 00:24:47,640 --> 00:24:52,680 Então, isso é o que me permite especificar algo assim na minha forma lá. 337 00:24:53,900 --> 00:24:56,460 Meu próximo conjunto de elementos que vou adicionar ao meu 338 00:24:56,460 --> 00:25:01,530 formulário são uma caixa de seleção e uma seleção. 339 00:25:01,530 --> 00:25:03,460 Então, como adicionamos isso? 340 00:25:03,460 --> 00:25:09,014 Então, se você estiver familiarizado com formulários HTML, você entende como a seleção funciona e 341 00:25:09,014 --> 00:25:13,070 você entende como as caixas de seleção funcionam em formulários HTML. 342 00:25:13,070 --> 00:25:15,880 Agora, Bootstrap oferece algumas 343 00:25:15,880 --> 00:25:20,080 classes adicionais que permitem formatar esses elementos adequadamente. 344 00:25:20,080 --> 00:25:21,740 Então, deixe-me acrescentar a citação. 345 00:25:23,400 --> 00:25:25,120 Vamos salvar as alterações. 346 00:25:25,120 --> 00:25:29,695 Dê uma olhada no que isso resulta no formulário aqui. 347 00:25:29,695 --> 00:25:32,480 E então dê uma olhada no código. 348 00:25:32,480 --> 00:25:38,060 Então aqui, você vê que eu tenho uma caixa de seleção e uma mensagem aqui. 349 00:25:38,060 --> 00:25:45,372 E então este é um seletor que me permite selecionar entre um conjunto de opções aqui. 350 00:25:47,324 --> 00:25:53,309 Agora a forma como ele existe aqui é o que você verá em 351 00:25:53,309 --> 00:25:56,080 tamanhos de tela pequenos e extra pequenos. 352 00:25:56,080 --> 00:25:59,940 Vamos dar uma olhada em um tamanho de tela maior. 353 00:25:59,940 --> 00:26:04,740 A mesma forma quando disposta em 354 00:26:04,740 --> 00:26:06,760 tamanhos de tela médio a extra grande será assim. 355 00:26:06,760 --> 00:26:11,440 Assim, você pode ver como o número de telefone de contato está posicionado aqui, 356 00:26:11,440 --> 00:26:14,500 e o e-mail é posicionado aqui. 357 00:26:14,500 --> 00:26:19,825 Portanto, note que estes rótulos estão 358 00:26:19,825 --> 00:26:26,510 alinhados a uma linha no meio com as caixas aqui. 359 00:26:26,510 --> 00:26:32,640 Isso é o que a classe col form label alcança primeiro. 360 00:26:32,640 --> 00:26:36,940 Agora, vamos nos concentrar nisso que acabamos de adicionar. 361 00:26:36,940 --> 00:26:40,060 Aqui, vemos que temos uma caixa de seleção adicionada. 362 00:26:40,060 --> 00:26:43,312 E então, um campo de texto aqui. 363 00:26:43,312 --> 00:26:44,650 Então, podemos contatá-lo? 364 00:26:44,650 --> 00:26:51,370 Então, por exemplo, você esperaria que o usuário verifique e desligue. 365 00:26:51,370 --> 00:26:53,500 Então, qual é a razão para uma caixa de seleção? 366 00:26:53,500 --> 00:26:56,330 Da mesma forma, você poderia ter botões de rádio. 367 00:26:56,330 --> 00:27:02,020 Bootstrap suporta botões de opção que estão disponíveis em formulários HTML. 368 00:27:02,020 --> 00:27:05,650 E forneça algumas classes para modelá-los corretamente. 369 00:27:05,650 --> 00:27:10,850 E, em seguida, este é, naturalmente, o seletor que permite que você selecione entre as opções. 370 00:27:10,850 --> 00:27:13,113 Então, voltando e olhando para o código. 371 00:27:13,113 --> 00:27:15,250 Vamos ver como isso é implementado. 372 00:27:16,340 --> 00:27:22,030 Voltando para dar uma olhada no código, você vê que este é novamente uma 373 00:27:22,030 --> 00:27:28,630 linha de grupo de formulário div aqui que encerra duas coisas aqui. 374 00:27:28,630 --> 00:27:32,859 Um deles é um formulário de verificação 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 Então isso é o que encerra uma caixa de seleção dentro deste elemento div. 377 00:27:45,120 --> 00:27:53,902 E, em seguida, abaixo aqui eu tenho uma classe div, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 Então note que aqui, isso diz form-check col-md-6 offset-md-2. 379 00:27:59,979 --> 00:28:04,197 A razão pela qual eu estou fazendo um offset-md-2 é que eu não tenho um rótulo. 380 00:28:04,197 --> 00:28:08,166 Então eu estava normalmente usando duas colunas para os rótulos. 381 00:28:08,166 --> 00:28:13,160 Assim, uma vez que esta caixa de seleção deve alinhar-se para o lado direito no formulário. 382 00:28:13,160 --> 00:28:16,591 Então é por isso que eu usei offset-md-2 aqui. 383 00:28:16,591 --> 00:28:22,654 E, em seguida, dentro aqui diz label class="form-check-label”. 384 00:28:22,654 --> 00:28:28,042 E, em seguida, ele fornece tag de entrada 385 00:28:28,042 --> 00:28:32,790 aqui com caixa de seleção tipo. 386 00:28:32,790 --> 00:28:35,070 Então é assim que você cria uma caixa de seleção. 387 00:28:35,070 --> 00:28:38,300 E então a classe, a classe Bootstrap que você vai aplicar à 388 00:28:38,300 --> 00:28:41,768 sua caixa de seleção é form-check-input. 389 00:28:41,768 --> 00:28:49,390 E então o nome e o valor inicial estão vazios. 390 00:28:49,390 --> 00:28:54,262 E, em seguida, este é o rótulo real que você vê sendo 391 00:28:54,262 --> 00:28:58,670 aplicado a essa caixa de seleção particular lá. 392 00:28:58,670 --> 00:29:04,260 Então, observe como esses dois estão fechados dentro de uma etiqueta de etiqueta aqui. 393 00:29:04,260 --> 00:29:09,070 Então é assim que você cria uma caixa de seleção junto com seu rótulo e 394 00:29:09,070 --> 00:29:12,980 , em seguida, posiciona isso em seu formulário aqui. 395 00:29:12,980 --> 00:29:15,840 Então este aqui usa form-check-label. 396 00:29:15,840 --> 00:29:19,880 E, em seguida, aqui, você tem que ter uma caixa de seleção, tipo de entrada = “checkbox”, e, 397 00:29:19,880 --> 00:29:21,340 em seguida, rotular em si. 398 00:29:21,340 --> 00:29:23,620 Então aqui você vê forte, podemos entrar em contato com você? 399 00:29:23,620 --> 00:29:29,770 Então é por isso que ele é exibido em letras negrito bem ao lado da caixa de seleção aqui. 400 00:29:29,770 --> 00:29:37,390 Agora abaixo no código, você tem uma classe div col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Portanto, isso ocupa três colunas dentro de um deslocamento de coluna. 402 00:29:40,760 --> 00:29:42,980 Então, o total de quatro colunas aqui. 403 00:29:42,980 --> 00:29:50,113 Então este é col-md-6 mais 2, de modo que são oito colunas. 404 00:29:50,113 --> 00:29:51,480 Então, 8 mais 4, 12. 405 00:29:51,480 --> 00:29:55,140 Então isso cuida de suas 12 colunas para sua grade lá. 406 00:29:55,140 --> 00:30:01,740 Agora, dentro disso, você vê um seleto aplicado aqui. 407 00:30:02,880 --> 00:30:07,320 Agora esta é a opção de seleção que os formulários de arquivo HTML suportam. 408 00:30:07,320 --> 00:30:09,240 E olhe para a classe aplicada a isso. 409 00:30:09,240 --> 00:30:12,870 Ele diz class="form-control” para selecionar. 410 00:30:12,870 --> 00:30:15,830 E então você dá as opções na seleção aqui. 411 00:30:15,830 --> 00:30:18,638 Então