Bem-vindo novamente nesta unidade, vou mostrar-lhe alguns outros componentes, incluindo jumbotron e bootstrap
formas e entradas.
Mas antes que eu faça isso quero dar um momento para abordar algo que é realmente muito importante
quando estamos aprendendo novas ferramentas como esta, como o bootstrap.
E na minha experiência de ensinar as pessoas a tornarem-se desenvolvedores web, percebi que um bootstrap é
um dos primeiros lugares em que alguns dos alunos começam a se sentir desconfortáveis ​​e sentem que não sabem
se estão fazendo e então porque Estamos de repente incluindo um monte de código que alguém
escreveu em nosso aplicativo.
Mas se você olha os documentos aqui, eles são muito longos, eles são abrangentes, o que é ótimo,
mas há muito aqui e eu quero que você enquadre isso não como um manual que você deve ler
para entender tudo.
Este não é como um guia para que você precise terminar antes de usar o bootstrap.
É uma referência em que, se você decidir que precisa de um formulário, veja a seção do formulário se precisar de uma tabela.
Você acessará a seção da tabela se precisar de uma barra de navegação.
como esse, você vai usá-los sem parar, voltando até aqui referenciando bits de código individuais, copiando
seus segmentos de código, verificando algumas demonstrações que lê exemplos que usei para o bootstrapped para anos neste momento.
Você olha para a seção NFR, mas é importante que você trate os documentos
E eu me sinto muito bem com a maioria.
Mas deixo os documentos abertos quando estou trabalhando em qualquer coisa com o bootstrap.
Estou constantemente referenciando os exemplos em um dos vídeos realmente adiantados neste curso. Eu falei sobre
como se tornar um desenvolvedor web.
Você não está se tornando um especialista em memorização e em saber cada informação.
Sim, você precisa saber as coisas.
Sim, você tem que entender e memorizar algumas coisas, mas você não está se tornando um especialista ou memorização.
Você está se tornando um especialista em acessar informações.
E algumas dessas informações que você terá memorizado e muito estará disponível na documentação ou exemplos
de livros de vídeos de todos os tipos de recursos.
Tudo bem, para resumir toda a conversa.
Basicamente eu só quero que você tenha em mente que sim, há muito para inicializar e você verá 20
30 por cento dele e há muito mais por aí.
Mas não seja intimidado por isso.
sentir confortável ao acessar os documentos se você precisa fazer algo que eu não mostro como fazer.
Você deve se
Abra os documentos e procure-o.
E sempre há ótimos exemplos e explicações sobre obter o pontocom bootstrapped.
Ok, então, sem mais adiante, vamos passar a falar sobre alguns desses
componentes importantes e vou começar mostrando Jumbotron.
Então, um Jumbotron de acordo com os documentos oficiais é um componente leve e flexível que pode, opcionalmente, estender a
janela de exibição inteira para mostrar o conteúdo da chave em seu site.
Você pode ver um exemplo de um aqui e, se queremos usar um Jumbotron, é realmente muito fácil.
Tudo o que precisamos fazer é escrever div class jumbotron e, em seguida, o que quer que colocamos dentro disso
fará parte do Jumbotron.
Então vamos tentar isso.
Basta fazê-lo abaixo, os botões terão um div com a classe Jumbotron jumbo tron ​​e, em seguida, dentro, se houvermos fazer um
H1 ou H-1, dirá que este é um jumbotron e, em seguida, adicione um botão lá, como eles têm
aqui e nós vamos adicione um parágrafo também em nosso parágrafo será apenas um jibberish.
Bom o suficiente por enquanto.
oi lá.
E um botão e nosso botão apenas dirão
ESTÁ BEM.
E então, um botão, temos algumas escolhas.
Vamos fazer um sucesso de botão e vou fazer isso grande e salvar.
Vamos dar uma olhada no que recebemos.
E há um Jumbotron que você pode ver que ele ocupa toda a largura da nossa janela do navegador e normalmente
não é o que queremos.
que está acontecendo é que o JumboTron está configurado para ocupar 100% de qualquer recipiente que esteja dentro de.
E o
Neste caso, não está fora de nada.
Mas em breve vou mostrar-lhe o sistema de grade e o bootstrap onde podemos controlar exatamente o quanto
você deseja que ele ocupe a tela se quiser que ele seja centrado e ocupe um terço da tela.
Dois terços da tela, um quarto da tela, temos todas essas escolhas diferentes que podemos fazer
usando o sistema de grade de bootstraps.
Por agora, vou mostrar-lhe outro elemento que não podemos em que é uma div com classe igual ao recipiente e o
que o recipiente irá fazer.
Se colocarmos coisas dentro do contentor de classe div, isso dá algum espaçamento com algum estofamento ao redor dele e
ele concentra coisas.
Então, o contêiner descobre
que ele ocupa todo esse espaço aqui que você pode ver, mas tem um pouco de margem nisso.
Então, se queremos apenas uma melhoria rápida sem ter que usar o sistema
de grade que não falamos, podemos adicionar contêiner de classe div e agora temos esse Jumbotron bonito.
E se movemos esse código que já temos nos recipientes bem, mas não o
colocamos dentro do Jumbotron.
Você verá que ainda é afetado por esse recipiente.
Então, fora do Jumbotron, mas dentro do recipiente, salve e atualize, você pode ver também dentro desse
recipiente e reflete isso visualmente.
OK, vamos voltar aos componentes e a próxima coisa que eu vou mostrar.
Nós vamos ao topo.
Nós temos que ir para avaliar e eu vou mostrar-lhe os formulários e como eles funcionam.
Então, clique nos formulários e há alguns tipos diferentes e exemplos diferentes.
E eu vou percorrê-los primeiro antes de digitar qualquer coisa.
Então, aqui está um exemplo básico de um formulário de inicialização.
Você pode ver o mercado que o cria.
Então temos o que é conhecido como uma forma inline e temos outro tipo de formulário em linha
e ainda outro com diferentes tipos de insumos e outro tipo de formulário.
E agora isso fala sobre todos os diferentes tipos de controles de formulário dos
diferentes tipos de entradas suportadas.
Então, todas essas cores você é.
botões de rádio desativados caixas de seleção inline botões de opção inline os menus suspensos selecionados continuam a diminuir.
Número de e-mail no tempo da semana e assim por diante áreas de texto caixas de seleção diferentes caixas de seleção desativadas
Nós temos outros estados do fórum.
Temos um estado de foco.
Você pode ver esse destaque em torno desse azul.
Esse é o estilo de foco padrão do bootstrap.
Nós também podemos desativar as entradas, adicionando desativado e nós também conseguimos algumas outras coisas que podemos fazer, mas vou voltar e
realmente me concentrar no começo do exemplo básico e vou começar por copiar esse
formulário completo Sobre e depois vamos dissecá-lo pouco a pouco.
Então vamos voltar aqui e vamos adicionar este formulário depois de tudo o resto.
Mas vou fazê-lo dentro do recipiente.
Deixe-me fazer esta tela cheia por um momento.
Nós temos nossa forma e dentro dessa forma temos bastante conteúdo.
Voltemos ao navegador e dê uma olhada no que parece.
E a primeira coisa que você provavelmente notará é que nosso formulário passa todo este contenedor.
Isso ocupa 100 por cento disso e isso é algo que poderemos controlar.
falamos sobre o sistema de grade de bootstrap e poderemos facilmente dizer que isso deve passar 50% no caminho.
Uma vez que
Então, é algo que poderemos mudar facilmente quando falamos sobre o sistema de grade do bootstrap ou
ainda não estamos lá.
Então, vamos apenas ir com ele.
Ele ocupa 100% por enquanto.
É um gigantesco fórum de aparência estranha, mas está bem.
Nós adoramos como é.
Então voltaremos a sublimar e vamos dissecar essa peça por vez.
Então, temos uma etiqueta de fórum dentro dessa tag de fórum.
Há um grupo de formulário de classe div e se você quiser saber mais sobre o que isso faz se você
voltar aos documentos do bootstrap e fazer uma pesquisa para o grupo de formulários e você pode ver os rótulos e controles do rap
no grupo de formulários para um espaçamento ótimo.
Então, se nos livrarmos dessa classe de grupo de forma em torno deste primeiro e nós faremos isso em torno do
primeiro e segundo, você verá o que acabamos.
Vou salvar e atualizar você ver como o espaçamento muda aqui entre essas entradas.
como você o usa onde você tem uma entrada e o rótulo e deseja que eles sejam agrupados juntos.
Então, podemos voltar e adicionar esse grupo de formulário e isso é realmente
Então, preste atenção aqui mesmo, um pouco de espaço é adicionado ali mesmo.
Acabou de adicionar um pouco de espaço aqui, o que efetivamente agrupa esses dois juntos visualmente e,
em seguida, o Grip está juntos visualmente, assim como isso, aqui.
Então esse é o grupo de formulário.
E então os rótulos são apenas normais.
Nós não precisamos adicionar nada extravagante para rotular nenhuma classe de Boucek, mas a entrada lá é um controle de formulário de classe.
Então, vamos ver o que acontece quando eu me livrar disso.
Então, eu vou fazer isso primeiro e colocar a entrada de e-mail e voltar e atualizar.
Observe que isso muda completamente para uma entrada normal do navegador padrão.
Então você não obtém os cantos arredondados.
Não recebemos o mesmo preenchimento e espaçamento das coisas.
E também não temos o mesmo efeito de foco quando eu clicar, nós obtemos um esboço azul, mas
é diferente desse.
óbvias entre os dois, mas, na verdade, há algumas diferenças mais importantes que você verá, uma vez
que trabalharmos com o sistema de grade e a forma como eles se comportam e interagem com outros elementos.
O esquema do bootstrap é um pouco mais sutil e essas são apenas as mudanças visuais imediatamente
Voltará e adicione o controle de formulário novamente.
Então, realmente, se quisemos destilar, tudo aqui se resume a formar um grupo e controlar a forma.
Essas duas classes são realmente responsáveis ​​por fazer com que as coisas se vejam bem.
Agora, há este bloqueio de ajuda de classe de parágrafo e podemos dar uma olhada no que obtemos disso.
uma pequena sugestão sobre uma parte do seu formulário e essas coisas com a classe ajudam a bloquear e, em seguida,
temos o nosso botão aqui embaixo, que é apenas um botão Pucelle regular ou temos entre um e B
tendem a cair e podemos torná-lo maior ou menor, extra pequeno, altere a cor como qualquer outro botão.
É este texto aqui embaixo, que apenas dá
Então, você já pode ver como isso é um pouco como Legos, onde temos um botão Lego que podemos
adicionar em um jumbotron.
Nós também podemos simplesmente adicionar por conta própria ou podemos adicioná-lo em vez de um formulário.
É apenas um pequeno componente plug and play que podemos adicionar em diferentes partes da nossa aplicação.
Então vamos voltar e dar uma olhada em um outro tipo de formulário, que é a forma inline.
Então isso parece um pouco diferente.
um comentário aqui em linha e vamos recuar as coisas corretamente.
Se coparmos esse código e examinamos as diferenças, então deixarei esse primeiro formulário e vamos adicionar
Parece bom.
Observe que tudo é idêntico.
Ainda temos um controle de forma nas entradas que formamos, mas há uma grande diferença.
Tudo está dentro de uma forma com a forma de classe na linha, de modo que uma linha.
Vamos mostrar o que parece começar.
Volto dá-nos esta forma agradável aqui.
E assim que eu me livrar disso e salvá-lo agora volta a uma forma regular, como nós temos aqui.
Então, apenas uma classe contém todos os estilos que irão controlar isso.
Então, vamos mantê-lo como formulário na linha.
E novamente, o espaçamento não é ideal neste momento.
Isso será corrigido quando falarmos sobre o sistema de grade.
Há muito mais sobre o que podemos falar sobre os formulários do bootstrap.
Nós poderíamos fazer 30 conferências de 45 minutos apenas criando formas complexas de bootstrap aprendendo os prós e contras de
todas essas peças diferentes e coisas diferentes que podemos fazer validações personalizadas dimensionando todos os tipos de estilos
diferentes com os quais podemos trabalhar.
Mas não vou fazer isso.
Cobrimos os princípios básicos importantes.
Existem dois tipos de formas são o tipo de pão e manteiga de formas Boucek onde
temos a forma básica regular e, em seguida, uma forma inline e haverá algumas outras características em diferentes aspectos
do bootstrap que usamos em torno dos formulários.
Mas ao invés de gastar o tempo agora e encostar-se em todos os prós e contras e os
pequenos detalhes das formas do PRICHEP, eu vou simplesmente jogar essas peças quando precisamos delas quando estamos realmente
usando o bootstrap.
Então, as duas coisas de viagem aqui sobre formas seriam duas classes que são controle de formulário realmente importante e o controle de
forma de formulário do grupo faz com que as entradas do grupo de formulário refinado bootstrap apenas adicionem algum espaçamento agradável.
Então, o que quer que você coloque, disse que um grupo de formulários obtém algum espaço agradável e, em seguida, uma única forma de classe em linha.
Se você envolver um formulário na medida em que o formulário inteiro vai na linha.
E também conversamos sobre Jumbotron.
A classe muito simples é igual a Jumbotron.
Então você pode ver um par.
E então colocamos tudo dentro de um recipiente.
E se nos livrarmos desse recipiente para mostrar o que acontece.
Refresque todo esse espaçamento que a margem agradável vai embora.
Então, os contêineres de maneira agradável apenas para obter um pouco de espaçamento rápido em seu aplicativo tornam as coisas parecidas relativamente boas.
OK, então, antes de terminar este vídeo, passaremos 10 segundos a mostrar-lhe um site em que vamos
criar um aplicativo que tenha um banco de dados de back-end completo conectado usando nó e expressar e Mongo
e mangustão e um monte de tecnologias e nós usamos bootstrap para protótipo da interface para
que pareça relativamente bom muito rápido e você pode ver que temos um Jumbotron aqui.
Estamos usando alguns dos botões que estamos usando o sistema de grade que eu vou explicar mais tarde.
E então, se eu entrar no log pode ver que temos um formulário.
Portanto, esses são controles de formulário que eu usei usando o sistema de grade para que ele não ocupe
toda a largura da tela.
Em vez disso, só ocupa essa pequena seção do meio.
Então, veremos isso uma vez que falamos sobre o sistema de grade.
Mas eu só quero mostrar-lhe que este é um aplicativo real e é algo que usaremos o bootstrap para
nos ajudar a protótipos e que as coisas pareçam decentes, muito rapidamente