[MÚSICA]
Neste exercício, vamos ver o suporte do Bootstrap para botões e formulários.
Então vamos incluir alguns botões e grupo de botões em nossa página web.
E também olhamos para projetar formulários e modelar os formulários usando classes Bootstrap.
Para começar, vá para a página de instruções e
baixe o arquivo contactus.html.zip que fornecemos lá.
Então clique com o botão direito sobre isso e
salve este link em sua pasta Confusion.
Como,
contactus.html.zip arquivo.
E, em seguida, uma vez que o arquivo zip é baixado, descompacte o arquivo para obter a página contactus.html.
Em seguida, você pode excluir o arquivo zip.
Depois de descompactar o arquivo e obter a página contactus.html,
você notaria que quando você carregar esta página em seu
navegador usando localhost: 3000/ contactus.html
, você verá que esta página já está pré-formatada com algum conteúdo.
Então você pode notar que você já tem a barra de navegação lá.
Temos o jumbotron já formatado para nós.
E você deve notar que eu tenho as migalhas de pão e
o contato que estamos indo aqui formatados.
Então você verá algumas informações adicionais, o endereço aqui.
E também, você notará que o rodapé já está formado.
Mas você vai notar duas coisas aqui,
você vai notar que há uma linha aqui que diz grupos de botões ir aqui e,
em seguida, mais uma linha aqui que diz formulário vai aqui.
Então vamos substituir estes dois por um grupo de botões e um formulário.
E ao longo do caminho, aprenda o suporte do Bootstrap para botões e formulários.
Antes de avançarmos, agora que temos três páginas em nosso site,
é uma boa idéia para nós vinculá-los juntos,
tanto na barra de navegação quanto nos links no rodapé.
Vamos modificar esses dois para que possamos navegar entre essas três páginas facilmente.
Então, indo para a página contactus.html, você notará que na barra de navegação,
já tenho os links para index.html configurados corretamente.
E você notaria que no fundo
aqui você tem o link de contato aqui.
Mas o link correspondente ao about não foi configurado corretamente.
Então vá para este link aqui e, em seguida, atualize isso para
aboutus.html.
O link entre em contato conosco pode ser deixado sozinho como tal.
E, em seguida, salve as alterações.
Agora, da mesma forma, vá para o rodapé desta página.
E você vai notar que no rodapé temos esses três links aqui.
E isso pode ser um bom ponto para substituir os links
com os links para as páginas correspondentes.
Então eu vou dizer, index.html, aboutus.html
e, contactus.html.
E salve as alterações.
Da mesma forma, vá para index.html e, em seguida, no index.html também,
o link entre em contato conosco não foi configurado.
Então vamos atualizar isso para contactus.html.
E, em seguida, da mesma forma, atualize os links no rodapé.
Também vá para aboutus.html e, em seguida, repare os links mesmo lá.
Então, no aboutus.html também, no cabeçalho eu vou consertar o link.
E também no rodapé do aboutus.html.
Então, agora, quando você acessar seu site,
você poderá navegar de volta para sua página inicial, para sua página sobre.
E a partir da página sobre, você pode até voltar para a página de contatos.
Então, todos os links entre as três páginas nos cabeçalhos correspondentes, e
também os rodapés, aqui devem ser configurados.
Assim, se você clicar em qualquer um destes irá levá-lo para a página apropriada.
Agora é a hora de começar a trabalhar nos botões que vamos
incluir em nossa página contactus.html.
Então o que eu vou fazer é substituir esta linha pelo código para
o botão e o grupo de botões e
depois disso, vamos voltar para explicar como tudo isso funciona.
Abrindo contactus.html em nosso editor,
vamos localizar o lugar onde esta declaração, grupo de botões vai aqui, existe.
E então eu vou substituir isso pelo código correspondente ao
grupo de botões primeiro.
E depois voltarei para explicar como funciona este código.
Então vamos salvar as alterações e, em seguida, dar uma olhada em como
este grupo de botões se parece em nosso navegador.
Indo para o seu navegador, agora você pode ver que em nossa
página web o grupo de botões foi criado.
Então você pode ver que existem três botões aqui, Chamada,
Skype e Email botões.
Agora, todos esses três são unidos em uma única barra ou barra de
botões ou o que está em termos Bootstrap chamado um grupo de botões.
Então vamos ver como vamos construir algo assim no
código Bootstrap.
Então aqui eu tenho a janela do navegador e meu código aberto lado a lado.
Então vamos dar uma olhada em como criamos esse código de botão.
Olhando para o código, você percebe que
os botões estão incluídos dentro de uma div aqui.
Para o div, aplicamos a classe, btn-group.
Então, se você tiver um grupo de botões que você deseja unir e
apresentar como um grupo de botões, como uma barra de botões,
então você usaria uma div com a classe de grupo de botões e
a função como grupo aqui para essa div.
Agora dentro disso, você vai notar que eu estou usando a
tag, a, para definir os três botões.
Então vamos ver como definimos o botão três.
Vejamos como definimos o botão Chamada.
Então, esta linha específica define o botão Chamada.
Então eu digo, um, papel é igual ao botão.
Então este, um, tag aqui,
eu estou usando isso como um botão aqui.
Então é por isso que eu especifico o papel como um botão.
Então, isto é importante.
E então olhe para as aulas que estou aplicando a isso.
Então o primeiro é classe btn.
A classe btn é a classe botão do Bootstrap.
Então ele irá exibir isso como um botão Bootstrap clássico.
A segunda parte diz é btn-primary.
Então, isto é o que define a cor do botão aqui.
Então, neste caso, esta cor do botão é azul.
E assim, esta é a cor primária no Bootstrap.
Então, btn-Primary.
E depois disso, veja o uso do href aqui.
Então, uma vez que esta é uma tag A, eu posso usar um atributo href nessa tag A.
Então, o atributo href aponta para o número de telefone.
E, em seguida, você percebe que estou usando um ícone de fonte aqui para o telefone.
É por isso que eu tenho i classe fa fa-phone e depois da palavra chamada.
Então, isso é o que permite construir este
botão azul, que está incluído nesta barra de botões aqui.
Da mesma forma, o próximo, você percebe que isso também diz botão de função.
E então, à medida que você passa, você vê que btn-info.
BTN-info dá-lhe uma cor de uma cor azul claro.
Então, por padrão btn-info refere-se a um botão colorido azul claro aqui.
E então, você pode ver que eu tenho o Skype definido aqui.
E, em seguida, o terceiro que, é um botão verde lá com e-mail.
Observe que eu especificar letras um papel = classe botão = btn btn-success.
Então, quando você diz btn-success, que será um botão verde aqui.
Então, você tem algumas cores que já estão definidas no Bootstrap.
Primário refere-se ao azul no primeiro, o sucesso azul claro refere-se
à cor verde, então você tem aviso que seria uma cor amarelo pálido, e
então perigo, que é uma cor vermelha.
Então, essas são cores padrão que foram configuradas no Bootstrap.
E, em seguida, a configuração href, com o mailto aqui, e
depois disso, você tem o.
Fonte como ícone aqui e, em seguida, o e-mail lá.
Então essas três tags e, que estão atuando atualmente como botões,
estão incluídas no lado daqueles div, que atua como o grupo btn-.
Então, é assim que exibimos um grupo de botões no Bootstrap.
Se você quiser apenas um botão,
tudo o que você precisa fazer é incluir apenas uma dessas linhas lá.
Então, você também pode usar a tag do botão.
Se você usar a tag button, então você não precisa especificar a função,
em vez disso você apenas diz type button.
Porque um botão também pode atuar como um botão de envio lá.
Então, mais tarde, em formulários, vamos olhar para o uso da tag botão,
para criar um botão para ser incluído em nosso formulário.
Continuando com o exercício, nosso próximo passo seria começar,
desenvolvendo o formulário que vamos incluir na página contactus.html.
Faremos isso passo a passo, para que em cada passo aprendamos um pouco de
como você inclui alguns elementos em sua forma.
Então, como um começo, quando você vai para a página contactus.html,
bem ali, você verá esta declaração chamada, formulário vai aqui.
Agora, o que eu vou fazer é mudar isso de col-sm
para col-md, de modo que para
tamanhos de tela extra pequeno a pequeno, minha forma será colocada para fora
ocupando toda a largura da tela, porque ele usa col-xs-12.
Mas a partir de tela de tamanho médio em enfermarias,
ele ocupará apenas 9 das 12 colunas.
Então, vamos começar a construir o formulário.
Então, o que eu vou fazer é, eu vou substituir isso, pelo meu primeiro pedaço de código.
Vamos incluir dois campos em nosso formulário, para
o nome e sobrenome do usuário.
Deixe-me adicionar o código, então veremos o resultado.
E depois, voltamos e examinamos o código.
Então, adicionando o código nesse ponto,
como sempre esses trechos de código estão nas instruções.
Então, deixe-me salvar as alterações.
E então vamos voltar e olhar para o que este formulário se parece no navegador.
Olhando para o formulário, você verá que eles têm agora dois temas no formulário aqui.
O primeiro, tem um rótulo no lado esquerdo dizendo Nome e
o então você tem a caixa de entrada aqui.
E, em seguida, o Sobrenome e, em seguida, uma caixa de entrada aqui.
Agora você percebe também que este formulário é colocado para fora, de modo
que esta parte ocupa a parte semi da tela, e
a parte restante sendo ocupada pela parte restante da tela.
Você está começando a se perguntar, como vamos fazer isso?
A grade Bootstrap nos ajuda a decidir sobre esses tamanhos.
Essa seria uma pergunta muito boa para você se perguntar.
Vamos ver o código e entender como ele se parece.
Antes de fazer isso, vamos dar uma olhada no mesmo layout de formulários,
no tamanho de tela extra pequeno.
Então, mudando para o tamanho de tela extra pequeno.
Então vamos para o Galaxy S5.
Você percebe, como o formulário é colocado para fora no tamanho de tela extra pequena.
Então, você verá que o rótulo está no topo, e, em
seguida, a caixa em si, caixa de entrada em si é a parte inferior, da mesma forma para o sobrenome.
Então, você percebe que Bootstrap.
By the way, ele fornece essas classes de formulário.
Automaticamente, torna o seu formulário responsivo, de modo que quando ele é
colocado para fora em diferentes tamanhos de tela, o formulário será apropriado para fora, de
modo que ele não vai ficar todo esmagado em tamanhos de tela pequenos.
Mas para tamanhos de tela maiores, porque você tem maior propriedade real,
você é capaz de esticar o formulário, para fazer uso do espaço extra que você tem.
Olhando para esse código-fonte, e o formulário lado a lado, obviamente
a primeira coisa que você percebe, é que seu formulário começa com a tag formulário aqui.
Então, formulário e, em seguida, o formulário de fechamento, tag aqui.
Então, lá dentro, você está descrevendo as várias partes da sua forma.
Então, vamos dar uma olhada em como o primeiro nome é construído,
o sobrenome obviamente como parece deve estar usando uma abordagem semelhante.
Então, no padrão, o que você percebe é que, há uma div aqui.
Elemento div aqui, com a div de fechamento aqui.
Então este elemento div tem uma classe chamada form-group.
E depois seguido por uma classe de linha.
Então, a classe form-group essencialmente,
diz que o que está dentro desta div será tratado como um grupo de elementos.
E então eles serão dispostos em conformidade.
E a segunda parte, você vê o uso de linha aqui.
Então, você veria que a linha do grupo Bootstrap entra em jogo aqui.
E assim este grupo de formulários específico, pode ser colocado para fora
usando a linha e as classes de coluna que você tem a partir da grade Bootstrap.
Então, agora, se você aplicar a linha a esta div,
o que quer que esteja lá dentro, você pode usar as classes de coluna,
para decidir exatamente quanto de espaço cada uma delas vai ocupar na tela.
Agora, de modo que isso torna mais claro para, para que esses grupos de forma encerram.
Esta unidade.
Vamos ver esta repetição uma e
outra vez quando estamos projetando os vários elementos da forma.
Em seguida, abaixo disso, você vê esta etiqueta de etiqueta aqui.
Para a tag label, há certos atributos que foram atribuídos a ela.
Então você vê que a tag label usa um nome para.
Então este rótulo é para algo com o nome do ID.
Então, qual é a caixa de entrada que segue logo abaixo disso.
Vamos olhar para isso daqui a pouco.
E, em seguida, olhar para as classes que são aplicadas à classe label, col-md-2.
Então, o que significa que para telas médias a extra grandes,
este elemento particular vai ocupar 2 colunas do espaço.
E, em seguida, note o outro.
Diz, rótulo col-form-label.
Assim, o col-form-label especifica essencialmente
que este rótulo deve ser posicionado para ser alinhado com
o outro elemento que faz parte deste grupo de formulários.
Então, neste caso, a caixa de entrada.
E isso também significa que
o rótulo seja alinhado no meio,
horizontalmente com a caixa de entrada.
Então essa é a razão pela qual usamos a classe col-form-label.
Se você não aplicar isso, seu rótulo será
alinhado à parte superior da caixa de entrada.
Que seu formulário não ficará tão bom em tamanhos de tela médios a extra grandes.
Agora, no lado esquerdo, é claro, porque esta janela do navegador é esmagada,
então ele está mostrando a exibição em um tamanho de tela pequeno ou extra pequeno aqui.
Então é por isso que você vê o rótulo empilhando em cima da caixa de entrada aqui.
Então este é o rótulo que especifica.
Então, se você tem um rótulo que você deseja atribuir a um elemento, então
é assim que você vai atribuir o rótulo.
Aqui abaixo, você vê uma classe div col-md-10.
Então, isso ocupa os 10 restantes das 12 colunas.
Então, duas colunas que são ocupadas pelo rótulo.
E as dez colunas restantes ocupadas por isso, mas estão fechadas dentro da div.
E dentro desta div,
você vê que há um elemento de tag de entrada lá com o texto de texto.
Então, o que significa que esta caixa de entrada aceita entrada de texto.
E a classe, olhe para a classe aqui.
Diz “controle de forma”.
Isto é importante para aplicar à caixa de entrada aqui.
Então form-control, e id nome próprio.
E o nome que é o primeiro nome.
Em seguida, espaço reservado Nome.
Portanto, o espaço reservado é o que aparece dentro da caixa como um espaço reservado para
a caixa de entrada.
Então todos esses atributos são atribuídos.
Então, mais importante,
observe o uso da classe de controle de formulário que está sendo aplicado ao tipo de entrada.
Então é assim que você estrutura esses dois elementos em sua forma.
Para tamanhos de tela pequenos e abaixo, ele empilha as duas coisas.
Mas para médio a extra grande,
você viu que ele está posicionando-os horizontalmente lado a lado.
A mesma coisa se aplica ao código do sobrenome também.
Será muito parecido com a forma como o primeiro nome é estruturado.
Então eu gostaria que você gastasse um pouco de tempo dando uma olhada nesse código também.
Para que você veja, com base em sua compreensão disso,
como isso também é formatado.
O próximo tipo de evento formal que vamos adicionar em é um elemento de grupo de entrada.
Deixe-me acrescentar o código.
Vamos olhar para o que o formulário acaba por ser.
E então vamos voltar e examinar o código.
Então aqui, após a segunda div, depois do campo sobrenome,
vou incluir o código para o próximo elemento aqui.
E então vamos salvar as alterações.
E então, imediatamente,
você veria mais algumas coisas adicionadas em sua forma.
Você vê um campo de número de telefone adicionado aqui.
Isso, pelo que parece, você vê que isso é muito parecido com isso.
Então eu não vou explicar o código para isso.
Isso deve ser muito simples para você entender.
E, em seguida, este campo de e-mail também deve ser muito simples
para você entender.
Porque isso parece muito parecido com o sobrenome.
Exceto que, para isso, o campo de entrada, o tipo será definido como e-mail.
Para que as capacidades de verificação de forma integrada do
seu navegador sejam iniciadas automaticamente.
Assim, quando você digitar algo que não parece um e-mail,
ele vai reclamar apropriadamente.
Então vamos examinar esta parte particular do formulário aqui.
Observe que, neste caso, estamos adicionando entre parênteses esquerdo e
o parêntese direito a esta caixa de entrada específica.
Então, como você adiciona coisas em sua caixa assim?
Olhando para o código aqui em seu editor,
você vê que você ainda tem a linha de grupo de formulários que você já entende.
E abaixo aqui, você tem tipo de entrada elemento formulário id telnum,
e assim por diante, que também deve ser muito claro para você.
Então acho que não preciso explicar essa parte para você.
Observe como estou usando as classes de coluna de grade do Bootstrap para cada uma delas.
Assim, o rótulo é dado col-md-2.
E então o telefone número um é dado
col-xs-7 col-sm-6 e col-md-7 aqui.
Assim, o número de telefone, este elemento está devidamente posicionado.
Mas, em particular, vamos prestar atenção a esta parte.
Então este aqui está dentro desta div.
Então, dentro desta div, observe a classe que lhe foi dada.
A classe diz “input-group”.
Então, essencialmente, o que quer que esteja dentro desta div será tratado como
um grupo de elementos aqui.
Então é por isso que a classe dada é input-group.
Agora, para adicionar algo assim, você vai usar
uma classe chamada como input-group-addon.
E então observe que estou usando um div para segurar esse item.
Posso usar qualquer coisa aqui, mas um div é útil aqui.
Então eu digo div classe input-group-addon.
E, em seguida, o tipo de div de fechamento dentro, onde,
notar que eu tenho o parêntese esquerdo.
Então isso é o que permite que você adicione em algum
apêndice extra à sua caixa de entrada aqui.
Da mesma forma, o abaixo aqui também é um parêntese direito de input-group-addon.
Então é isso que adiciona o outro parêntese direito aqui.
Agora, entre esses dois, é claro, você tem o tipo de entrada.
A entrada com o tipo tel e classe formulário controle, id, nome,
espaço reservado, tudo no lugar aqui.
Então isso não é nada além da parte do código de área.
Então, se você usar este input-group junto com input-group-addons
como este em ambos os lados.
Essas coisas serão adicionadas ao seu elemento de entrada como este.
Isso lhe fornece uma maneira agradável de projetar sua forma com alguns adicionados em.
Então, por exemplo, se você tiver um campo que está aceitando
dinheiro como entrada, você poderia simplesmente adicionar um cifrão ao lado esquerdo para
indicar ao usuário que esse é um campo que leva o valor da moeda no momento. Neste
momento, neste caso, este campo tem um código de área.
E se você ver como os códigos de área são escritos nos Estados Unidos e no
Canadá, você sabe que eles estão entre parênteses esquerdo e direito.
Então, isso é o que me permite especificar algo assim na minha forma lá.
Meu próximo conjunto de elementos que vou adicionar ao meu
formulário são uma caixa de seleção e uma seleção.
Então, como adicionamos isso?
Então, se você estiver familiarizado com formulários HTML, você entende como a seleção funciona e
você entende como as caixas de seleção funcionam em formulários HTML.
Agora, Bootstrap oferece algumas
classes adicionais que permitem formatar esses elementos adequadamente.
Então, deixe-me acrescentar a citação.
Vamos salvar as alterações.
Dê uma olhada no que isso resulta no formulário aqui.
E então dê uma olhada no código.
Então aqui, você vê que eu tenho uma caixa de seleção e uma mensagem aqui.
E então este é um seletor que me permite selecionar entre um conjunto de opções aqui.
Agora a forma como ele existe aqui é o que você verá em
tamanhos de tela pequenos e extra pequenos.
Vamos dar uma olhada em um tamanho de tela maior.
A mesma forma quando disposta em
tamanhos de tela médio a extra grande será assim.
Assim, você pode ver como o número de telefone de contato está posicionado aqui,
e o e-mail é posicionado aqui.
Portanto, note que estes rótulos estão
alinhados a uma linha no meio com as caixas aqui.
Isso é o que a classe col form label alcança primeiro.
Agora, vamos nos concentrar nisso que acabamos de adicionar.
Aqui, vemos que temos uma caixa de seleção adicionada.
E então, um campo de texto aqui.
Então, podemos contatá-lo?
Então, por exemplo, você esperaria que o usuário verifique e desligue.
Então, qual é a razão para uma caixa de seleção?
Da mesma forma, você poderia ter botões de rádio.
Bootstrap suporta botões de opção que estão disponíveis em formulários HTML.
E forneça algumas classes para modelá-los corretamente.
E, em seguida, este é, naturalmente, o seletor que permite que você selecione entre as opções.
Então, voltando e olhando para o código.
Vamos ver como isso é implementado.
Voltando para dar uma olhada no código, você vê que este é novamente uma
linha de grupo de formulário div aqui que encerra duas coisas aqui.
Um deles é um formulário de verificação
col-md-6 offset-md-2.
Então isso é o que encerra uma caixa de seleção dentro deste elemento div.
E, em seguida, abaixo aqui eu tenho uma classe div, Col-MD-3 offset-md-1.
Então note que aqui, isso diz form-check col-md-6 offset-md-2.
A razão pela qual eu estou fazendo um offset-md-2 é que eu não tenho um rótulo.
Então eu estava normalmente usando duas colunas para os rótulos.
Assim, uma vez que esta caixa de seleção deve alinhar-se para o lado direito no formulário.
Então é por isso que eu usei offset-md-2 aqui.
E, em seguida, dentro aqui diz label class="form-check-label”.
E, em seguida, ele fornece tag de entrada
aqui com caixa de seleção tipo.
Então é assim que você cria uma caixa de seleção.
E então a classe, a classe Bootstrap que você vai aplicar à
sua caixa de seleção é form-check-input.
E então o nome e o valor inicial estão vazios.
E, em seguida, este é o rótulo real que você vê sendo
aplicado a essa caixa de seleção particular lá.
Então, observe como esses dois estão fechados dentro de uma etiqueta de etiqueta aqui.
Então é assim que você cria uma caixa de seleção junto com seu rótulo e
, em seguida, posiciona isso em seu formulário aqui.
Então este aqui usa form-check-label.
E, em seguida, aqui, você tem que ter uma caixa de seleção, tipo de entrada = “checkbox”, e,
em seguida, rotular em si.
Então aqui você vê forte, podemos entrar em contato com você?
Então é por isso que ele é exibido em letras negrito bem ao lado da caixa de seleção aqui.
Agora abaixo no código, você tem uma classe div col-md-3 offset-md-1.
Portanto, isso ocupa três colunas dentro de um deslocamento de coluna.
Então, o total de quatro colunas aqui.
Então este é col-md-6 mais 2, de modo que são oito colunas.
Então, 8 mais 4, 12.
Então isso cuida de suas 12 colunas para sua grade lá.
Agora, dentro disso, você vê um seleto aplicado aqui.
Agora esta é a opção de seleção que os formulários de arquivo HTML suportam.
E olhe para a classe aplicada a isso.
Ele diz class="form-control” para selecionar.
E então você dá as opções na seleção aqui.
Então Tel., E-mail e assim por diante.
Então é assim que você especifica as opções para o seu campo de seleção no seu formulário aqui.
Portanto, este é o uso de seleções e caixas de seleção em seu formulário.
Da mesma forma, se você verificar a documentação do Bootstrap, você verá o uso de
botões de opção e outros elementos do formulário.
Olhando para a nossa forma,
vemos agora que temos muitas das coisas que precisamos na nossa forma já.
Você tem um nome e sobrenome.
Portanto, este formulário é algo que construímos para permitir que os usuários
enviem feedback para o restaurante.
Então aqui temos o primeiro nome,
sobrenome e número de telefone de contato e, em seguida, um e-mail.
E então, é claro,
uma opção para permitir que o usuário veja se eles podem ser contatados ou não.
Então, isso é implementado usando uma caixa de seleção e um seletor aqui.
Agora, a única coisa que sobrou é um botão de submissão para nós.
Então, vamos adicionar em um botão enviar a este formulário e
, em seguida, dar uma olhada final no formulário.
Antes de adicionar um botão de envio, talvez queiramos fornecer uma caixa para
que os usuários digitem seus comentários.
Então, neste caso, eu vou fazer uso de uma área de texto para fornecer isso.
Então deixe-me colar o código.
E então vamos rever o código aqui.
Então este código, como você vê diz,
div class="form-group row” que você já sabe o que significa.
E então este é o rótulo que você já sabe como ele é construído.
E abaixo dela, você vê uma tag textarea sendo usada para o formulário.
Então ele diz, textarea class, com class="form-control”,
que você já viu antes.
E, em seguida, id, nome e, em seguida, o número de linhas para
a área de texto que está sendo especificado aqui.
Então, vamos salvar as alterações e dar uma olhada no formulário.
Então, dando uma olhada no formulário, você vê que junto com isso, logo abaixo, você
tem uma grande caixa de texto na qual comentários de feedback podem ser digitados pelo usuário.
Portanto, seu formulário tem primeiro nome, sobrenome, número de telefone
, e-mail e uma aprovação para entrar em contato com o usuário e, em seguida, uma caixa de feedback.
A última coisa seria o botão Enviar.
Finalmente, vamos adicionar um botão Enviar ao formulário.
Então, depois de uma div, na área de texto,
eu vou colar no código para o botão Enviar aqui.
Então, colando o código para o botão Enviar novamente, olhando para o código, você vê
que esta é uma classe div ="form-group row">, que você já sabe de antes.
E então isso diz, div class="offset-md-2 col-md-10">.
Você entende o que é isso e
então, dentro desta div, você vê um botão sendo fechado aqui.
Agora, uma vez que vimos a construção de um botão usando a tag a,
vamos prestar atenção em como você constrói um botão usando a tag HTML botão.
Então, se você estiver usando a tag HTML botão, então você diz botão e,
em seguida, o tipo é enviar.
Isso vai atuar como um botão Enviar para o meu formulário, então
é por isso que eu disse que o tipo é enviar.
Você define o tipo para botão, ele irá atuar como um botão normal aqui.
E, em seguida, para isso eu digo, botão de classe, botão primário.
Então este é um botão de cor azul e, em seguida, o botão
contém este texto dentro do botão para enviar o texto de feedback dentro do botão.
Então vamos salvar as alterações.
Então esta seria a última modificação para o meu formulário aqui.
Então vamos salvar as alterações e, em seguida, ir e dar uma olhada no botão.
Voltando ao navegador, agora você vê que no seu formulário logo abaixo,
você tem o botão Enviar feedback.
Assim, quando o usuário preencher o formulário,
ele clicará no botão Enviar feedback para enviar o feedback para a empresa.
Então isso completa o design de um formulário.
Então esta é uma dessas formas que você pode incluir.
Existem muitas outras classes disponíveis no Bootstrap para
suporte de formulários.
Gostaria vivamente que você consulte a documentação do formulário para ver
os outros tipos de classes que estão disponíveis para a construção padrão.
Então, se você tem conceitualmente em sua mente uma forma que você deseja construir,
então você apenas procurar todos os diferentes elementos possíveis que você deseja incluir
no formulário, e então projetar o formulário em conformidade.
A coisa mais importante que você notou na construção do formulário usando Bootstrap,
é todas as classes Bootstrap que estão disponíveis.
O controle de formulário, o grupo de formulários, como você usa as classes de linha e coluna.
E todas essas classes diferentes que são suportadas
no Bootstrap para projetar formulários, o filme Bootstrap.
Último conjunto, faça o git commit, então, vamos trazer a página git.
Eu vou comentar as mudanças que eu fiz para o sobre,
contato e índice.
E, em seguida, dizer Bootstrap botões e
formulários, e, em seguida, que teria se
comprometido com o meu repositório git.
Com isso, completamos este exercício.
Aqui aprendemos como incluímos botões e
elementos de forma em nosso campo de design Bootstrap.
[ MUSIC]