1 00:00:00,089 --> 00:00:04,955 [MÚSICA] 2 00:00:04,955 --> 00:00:08,311 Longe vão os dias em que os sites eram puramente usados para 3 00:00:08,311 --> 00:00:11,385 fornecer informações aos usuários. 4 00:00:11,385 --> 00:00:16,380 Atualmente, na maioria dos sites, os usuários poderão interagir com o site para 5 00:00:16,380 --> 00:00:21,360 fornecer informações, por exemplo, clicando em botões ou preenchendo formulários 6 00:00:21,360 --> 00:00:26,240 e digitando algo nas caixas de pesquisa, e assim por diante. 7 00:00:26,240 --> 00:00:29,940 Então, como apoiamos esses tipos de interações com os usuários? 8 00:00:29,940 --> 00:00:35,900 Então é com isso que vamos lidar nesta palestra em particular e 9 00:00:35,900 --> 00:00:38,333 no exercício que se segue. 10 00:00:38,333 --> 00:00:43,880 Como exemplo, se você visitar o site Coursera, você verá que você tem 11 00:00:43,880 --> 00:00:49,091 botões no topo aqui que você pode clicar para chegar a lugares diferentes. 12 00:00:49,091 --> 00:00:54,954 Você poderia ter uma caixa de pesquisa, na qual você pode digitar informações, 13 00:00:54,954 --> 00:01:01,880 para procurar, digamos, por exemplo, desenvolvimento web de pilha completa e, assim por diante. 14 00:01:01,880 --> 00:01:08,286 Então, o que percebemos é que a interação do usuário precisa ser suportada 15 00:01:08,286 --> 00:01:14,808 em sites usando muitas abordagens diferentes, incluindo botões, 16 00:01:14,808 --> 00:01:20,054 formulários, caixas de texto, caixas de seleção e muitos outros. 17 00:01:20,054 --> 00:01:25,710 As interações iniciais com sites foram fornecidas principalmente por meio de hiperlinks. 18 00:01:25,710 --> 00:01:29,852 Então você pode clicar em um hiperlink e ir para outros lugares e assim por diante, mas 19 00:01:29,852 --> 00:01:31,046 isso é, obviamente, 20 00:01:31,046 --> 00:01:35,559 hiperlink é apenas um dos muitos métodos de interagir com o seu site. 21 00:01:35,559 --> 00:01:40,335 Você pode ter botões incluídos no site que, quando clicado, 22 00:01:40,335 --> 00:01:44,580 resultarão em alguma ação sendo tomada no site. 23 00:01:44,580 --> 00:01:49,900 Você pode ter formulários que você preenche para fornecer informações para o site. 24 00:01:49,900 --> 00:01:54,500 Então, quando você olha para como você incluiria esses 25 00:01:54,500 --> 00:01:58,660 recursos de interação do usuário em seu site, você verá que você pode usar algo 26 00:01:58,660 --> 00:02:03,930 como as tags a que são úteis para fornecer hiperlinks, 27 00:02:03,930 --> 00:02:10,100 então você tem as tags de botão que permitem que você inclua botões em seu site. 28 00:02:10,100 --> 00:02:15,060 Agora o que vamos olhar é como formatar com um tags 29 00:02:15,060 --> 00:02:19,850 nas tags botão usando classes bootstrap para que você possa modelá-los 30 00:02:20,910 --> 00:02:24,775 para falsificar o tema geral de bootstrap. 31 00:02:25,785 --> 00:02:30,075 HTML já inclui os elementos de formulário e os elementos de entrada lá. 32 00:02:30,075 --> 00:02:34,640 Agora, podemos olhar para como bootstrap aprimora esses elementos, fornecendo 33 00:02:34,640 --> 00:02:40,310 recursos de estilo para formulários, e vários elementos que vão para os formulários. 34 00:02:40,310 --> 00:02:45,950 Botões obviamente fornecem uma maneira simples de interagir com o seu site. 35 00:02:45,950 --> 00:02:49,600 Então, quando você tem um botão em seu site, você pode passar o mouse sobre o botão, 36 00:02:49,600 --> 00:02:55,100 você pode clicar no botão e esperar que algo aconteça no processo. 37 00:02:55,100 --> 00:02:59,830 O comportamento do botão depende de onde ele está posicionado no bootstrap. 38 00:02:59,830 --> 00:03:03,060 Se o botão estiver dentro de um formulário, por exemplo, 39 00:03:03,060 --> 00:03:08,280 normalmente o clique no botão fará com que o formulário seja enviado a um servidor 40 00:03:08,280 --> 00:03:13,270 ou que as informações do formulário sejam canceladas. 41 00:03:13,270 --> 00:03:19,200 Um botão fora de um formulário pode ter outras maneiras de fornecer interação. 42 00:03:19,200 --> 00:03:24,589 Da mesma forma, a < a > tag que tradicionalmente associamos a 43 00:03:25,690 --> 00:03:31,550 hiperlinks também pode ser seqüestrada para ser estilizada e 44 00:03:31,550 --> 00:03:34,170 apresentada na forma de um botão. 45 00:03:34,170 --> 00:03:39,356 Então, aqui vamos ver como bootstrap fornece classes que podem ser 46 00:03:39,356 --> 00:03:46,580 usadas para formatar a tag em um botão a ser apresentado em seu site. 47 00:03:46,580 --> 00:03:51,600 Nós também olharemos para vários elementos de formulário, como os elementos de entrada 48 00:03:51,600 --> 00:03:56,390 , select, o botão e também os elementos de texto AD, e 49 00:03:56,390 --> 00:04:03,320 como fazemos uso deles dentro de nossos formulários para projetar e 50 00:04:03,320 --> 00:04:09,660 construir um formulário que pode ser incluído em nosso site. 51 00:04:09,660 --> 00:04:13,640 Assim, o exercício que segue esta palestra em particular irá apresentar-lhe o 52 00:04:13,640 --> 00:04:17,440 suporte de bootstrap para botões de estilo, e 53 00:04:17,440 --> 00:04:22,670 também olhar para como vários elementos de formulário podem ser melhorados usando 54 00:04:22,670 --> 00:04:27,730 classes bootstrap para apresentar formulários Bootstrap clássicos.