Construa seu site usando bootstrap

1. Introdução: Olá e bem-vindo. Eu tenho unidades e este é criar o seu site usando Bootstrap. Então, em primeiro lugar, o que é Bootstrap? Basicamente, bootstrap é um site que nos permite tomar as classes já implementadas e incorporadas e usá-las em nosso próprio site. Assim, podemos tomar as classes que estão disponíveis para nós no bootstrap e usá-los em nossos arquivos HTML para modificar e fazer o nosso site olhar mais agradável. Então esta é a idéia geral sobre bootstrap. E nesta aula, vamos verificar as diferentes classes. Bootstrap e, em seguida, aprenda a usá-los. E, claro, e nossos sites. Então vamos usar o que aprendemos até agora e construir nosso próprio site. E tenha em mente, este site será urllib construído usando Bootstrap. E, claro, terminaremos nossa aula com a criação do projeto. E esta sessão de projeto é para você construir e criar por conta própria e, claro, postá-los e a seção do projeto para que eu possa dar-lhe uma revisão e algumas sugestões. E, claro, para que você complete esta classe, você deve ser capaz de entender os elementos básicos ou as tarefas básicas que você vai usar um HTML. Então, sem mais delongas, vamos começar. 2. O que é Bootstrap: Olá e bem-vindo. Então hoje vamos falar sobre Bootstrap. E bootstrap é uma estrutura CSS livre e de código aberto. E basicamente contém modelos de design baseados em CSS e JavaScript ou formulários, botões, navegação e outros componentes de interface. E se você não estiver familiarizado com HTML e CSS, eu recomendo fortemente que você comece com eles antes que eles possam voltar para a minha aula anterior e assistir a esses tópicos, depois volte aqui e comece com o Bootstrap. E para esta classe vamos usar o código do Visual Studio. E você pode ir para o Google e para a direita, baixar o código do Visual Studio e pressionar o download. E você terá a versão mais recente. Então este é o código do Visual Studio. E agora vamos dividir nossa tarefa em tarefas mais simples. Então, em primeiro lugar, bootstrapped é, como dissemos, um framework CSS livre e de código aberto. Então, o que isso significa? Isso significa que sempre que vamos escrever nosso arquivo HTML e CSS, sempre podemos usar a ajuda de bootstrap. Então, em vez de escrever o título e especificar sua largura, sua cor, seu design, onde eu queria que ele estivesse. Eu posso simplesmente usar Bootstrap para fazer o trabalho para mim. E é mais fácil e sempre melhor usar esses tipos de estrutura. Então, primeiro de tudo, vamos olhar para diferentes componentes de interface e como usá-los usando um bootstrap. Então vamos criar vários componentes e várias formas. Depois disso, vamos terminar nossa aula com a criação um site completo usando HTML, CSS e Bootstrap. Então é isso. Vamos começar com o nosso primeiro vídeo. 3. Elementos: Então, a primeira coisa a usar o Bootstrap é ir para bootstrap.com. E esta é a página inicial. Então, clique em começar. Esta é a introdução, Quickstart, CSS JavaScript. E podemos ignorar tudo isso e ir até o nosso modelo inicial. Então este é o modelo iniciado de bootstrap. Como você pode ver, ele inclui o comprimento para CSS, Bootstrap documento que CSS e também o link para o JavaScript. Então, agora vamos copiar isso e voltar para o nosso código do Visual Studio. Eu já criei um arquivo e o chamei de Bootstrap. Aqui estão algumas imagens que vamos usar mais tarde, é claro. E a primeira coisa que vamos fazer é criar o arquivo HTML. Então, podemos simplesmente escrever index.html. Este é o nosso arquivo HTML. Nós simplesmente baseado todo o nosso modelo Bootstrap começou aqui. E deixa-me guardar isto. E, claro, se quisermos verificar este arquivo, podemos sempre clicar, clicar mouse em nosso arquivo e abrir e navegador padrão. Como podemos ver, este é o nosso HTML5. Diz “Olá Mundo”. Este é o cabeçalho que criamos, ou é basicamente que o padrão no Bootstrap. Para que possamos sempre removê-lo. E, claro, se voltarmos aqui, atualizar, ele não estará mais disponível. No entanto, este Hello World é do título. E deixe-me apenas mudá-lo e subscrever Bootstrap. Então deixe-me apenas criar um título. Bem-vindo ao nosso site de bootstrap. E se eu voltar aqui e me refrescar, isso aparecerá. Então, como podemos ver aqui, este é um título um e este é o maior título. Nós temos títulos que vão de um todo o caminho para si mesmo. E eles estão todos disponíveis no Bootstrap. Agora, sempre que criamos esta adição de gonorréia, sempre que escrevemos uma tag 1 e a tag de fechamento H2, nós realmente nunca usamos Bootstrap aqui, nós simplesmente especificamos que este é um cabeçalho em HTML. Então, se eu escrever, por exemplo, em x2 e isso vai voltar aqui, atualizar. Este é o título um e este é adicionar dois. Agora, no bootstrap, temos o H1, H2, ou todos estes são classes e Bootstrap. Então, podemos especificar aqui e este H2 último, e vamos especificar a classe H1. Se eu voltar aqui, se lixo, como podemos ver. Este cabeçalho levou os atributos e parece que é um título um, mesmo que nós criamos este título como cabeçalho dois. No entanto, como podemos ver, é o mesmo e estas são classes em Bootstrap. Deixe-me ajustar isso e classe H1 e depois vê-lo claramente antes de me deixar criar um título diz sexo, tê-lo voltar, atualizar. Como você pode ver, isso está indo sexo e parece muito pequeno. No entanto, se eu lhe der uma aula, cada um, será parecido com este título um. E isso não é basicamente para os títulos. Podemos criar adicionando 123456. Agora, também podemos personalizar o cabeçalho. Então, por exemplo, se eu quiser escrever Bem-vindo ao nosso site bootstrap, no entanto, eu quero escrever este bootstrap como desbotada. Então eu posso simplesmente me deixar excluí-la. E eu vou arrastá-lo em pequeno. E a turma será silenciada. E eu escreveria Bootstrap aqui. E isso é verificado como podemos ver. E desta forma, personalizamos o nosso rumo com um passo muito simples e parece um pouco melhor. Agora. E vamos voltar ao nosso código e vamos aprender sobre como exibir nossos títulos. Então aqui nós criamos nosso título um. E, por exemplo, se eu quiser exibi-lo, eu posso usar a classe exibir um. E você verá a diferença em um minuto. Então exiba um e salve voltar. E como podem ver, esta mostra fará com que a nossa direção não seja Becker. No entanto, será o tamanho das letras são um pouco menores. E isso é basicamente para a exibição. E, claro, podemos exibir qualquer classe, por exemplo, é se eu escrever aqui o SpaceX. E vai parecer o sexo do título. Mesmo que se eu escrever borda seis e escrever isso como adicionar seis e dar-lhe uma classe, exibir. Sx, volte, atualize. Eles parecerão exatamente os mesmos. E, claro, se eu lhe der uma aula é jogar um para ser maior do que este display. Agora, nós também temos a liderança da classe, e basicamente apenas fazer qualquer parágrafo se destacar adicionando-o. Então, por exemplo, deixe-me excluir esses títulos e vamos criar um parágrafo com alguns alunos aprendem ajuda. E deixe-me voltar aqui e vamos ver o parágrafo. Então este é o nosso parágrafo. Vamos voltar e dar-lhe uma classe de chumbo. Agora, volte aqui. E como você pode ver, este é o nosso parágrafo após a modificação que vai olhar. Como este. E você pode concordar que este é um parágrafo mais bonito do que o anterior simplesmente adicionando este lead classe. Agora e HTML, temos o estilo para elementos, temos o próximo elemento inline. Permitam-me que demonstre alguns exemplos. Então, por exemplo, se eu quiser destacar uma palavra, eu posso simplesmente usar a tag MAC. Então, se eu tenho, este, é o MAC amarrado à luz alta. E neste caso eu quero destacar esta palavra. Então, se eu digitar Mark aqui e os destaques detalhados, volte. E como você pode ver, esta é a marca para destacar textos e a palavra destaque é realmente realçada. É claro que também temos outro elemento de texto em linha. E neste caso, será a tag d, l ou delete. Então, se eu tiver Lorem, Deixe-me apenas baixando tubo e como podemos ver, temos o nosso Senhor e eu vou simplesmente adicionar a tag delete. Lauren cinco. Volte, atualize, e nós vamos obter o nosso parágrafo de login, mas com uma linha reta no meio. E é claro que também temos a linha que está por baixo e podemos usá-lo usando o Uta x2, y2 e um menor ele cinco, voltar, atualizar. E esta é a nossa etiqueta. E temos tantas outras coisas que não vamos entrar em tantos detalhes. No entanto, podemos sempre usar Bootstrap para esses tipos de coisas. Não precisamos escrever a etiqueta aqui ou aqui. Então, por exemplo, deixe-me deletar isso. E em vez de usar a masterclass, eu posso simplesmente usar o vidro marca DOD usando Bootstrap. Então eu tenho um parágrafo, nós temos oito, e eu posso simplesmente usar a classe aqui. Mark, volte, atualize, e como pode ver, ele será destacado. Agora, é claro, se você quiser destacar um elementos específicos, por exemplo. Assim, podemos sempre criar, expandir e escrever a palavra dentro e, em seguida, adicionar a marca de classe a ele. Deixa-me apagar isto. E o, a marca de classe daqui, volte e atualize. E como podemos ver, obtivemos o mesmo resultado exato de antes. Agora vamos voltar ao nosso código e excluir este parágrafo. Nós também temos abreviaturas, então vamos criar um parágrafo aqui. E dentro deste parágrafo temos uma abreviatura para uma certa palavra. E o título será, por exemplo. E isso é, por exemplo, CSS. Se eu voltar e atualizar minha página, como podemos ver, temos essa abreviatura e para um tamanho de fonte ligeiramente menor, podemos adicionar o inicialismo de classe. E deixe-me apenas criar outra abreviatura só para ver a diferença. Então aqui também temos CSS. No entanto, nós só, nós também temos a classe. Qualquer concha não. Se voltarmos para o nosso navegador, e como você pode ver, é um tamanho de fonte ligeiramente menor. E este é o fim para a abreviatura. E, finalmente, o último elemento que vamos cobrir neste vídeo como os códigos de bloqueio. E neste caso, sempre que vamos criar um código de bloco, precisamos abrir as tags de código de bloco e temos alguns aprender aqui. Então este é o volume nove. Volte, atualize, e este é o nosso código. No entanto, podemos adicionar o copo aqui e também será apagão. Como você pode ver, a maioria das classes tinha o mesmo nome que a tag. Só para simplificar as coisas para vocês e só para torná-lo um pouco mais fácil e como podem ver, é um pouco maior e parece melhor. Agora também temos a fonte. Sempre que escrevemos um código, provavelmente você deseja adicionar nossa fonte. Então este é o nosso resfriado. Posso acrescentar aqui uma figura, Doug. E deixe-me substituir aqui. E esta é a nossa figura. Dentro de nossa figura, temos nosso código, e, claro, temos nossa, por exemplo, nossa legenda ou legenda de figo. E neste caso, vou escrever “Loudon sete”. E aqui eu posso adicionar o código da sorte da classe e colocá-lo para indicar que esta é a legenda ou o rodapé do nosso código de bloco. Volte e como pode ver, esta é a nossa legenda e este é o nosso código de bloqueio. Então isso é basicamente para este vídeo. No próximo vídeo vamos falar sobre menos. Então, vejo você então. 4. Listas e cores: Passando para menos. E a menos que tenhamos uma lista sem estilo e temos algo que é chamado de lista inline. Então vamos começar com o sem estilo. E isso é basicamente como o nome indica, é uma lista sem classificação. E isso só se aplicará a crianças imediatas dos itens da lista. Então, por exemplo, deixe-me apenas excluir a figura. E neste caso, para criar uma lista, como sabemos, podemos criar uma lista não ordenada. Dentro desta lista desordenada. Deixe-me pegar um item da lista cinco e copiar isso algumas vezes. Então 12345. E neste caso, este é o primeiro item da lista. E se eu voltar aqui e atualizar, e como podemos ver, temos uma lista desordenada com alguns pontos de bala. No entanto, se não queremos esses pontos, pontos para apelar, podemos simplesmente usar a lista e classe estilo de bootstrap. Então, em nossa lista não ordenada, ou eu posso digitar classe e usar a lista e estilo. Suas costas, refresque-se. E como podem ver, os pontos de bala desaparecerão. E também dissemos que essas características não se aplicarão aos filhos das crianças. Então vamos supor que eu tenha uma lista desordenada, outra lista não ordenada. Neste caso, consistirá em lorem dez. E se eu voltar aqui, atualizar, como você pode ver, este ponto de bala ainda aparecerá sentido esta criança não é a criança como a primeira lista desordenada. Então isso é basicamente para a lista sem estilo. Vamos passar para algo que é chamado de inline. E neste caso, podemos remover a bala e aplicar alguma margem de luz com uma combinação de duas classes. Temos o prazo da lista e o item da lista e da linha. E vamos explorá-los agora mesmo. Então, a primeira coisa que vamos fazer é remover todos esses elementos. Então esta é a nossa lista desordenada. No entanto, não queremos que ele seja desestilizado. Queremos que seja menos do que a linha. E isso é basicamente usado em barras de navegação. Sempre que queremos criar um ABA, podemos usar este tipo de classes. E é claro que temos nosso primeiro item. Então deixe-me criar uma casa, bem-vinda. E status. E, claro, precisamos adicionar aqui uma classe chamada lista e lista e item de linha. E precisamos adicionar a mesma classe aqui e aqui. E este é um atalho se você quiser usá-lo. Sempre que você quiser adicionar algo em mais de um lugar, você pode clicar aqui, por exemplo. E clique em adicionar no teclado e, em seguida, clique na outra posição. Então estes são, você pode montar nessas posições ao mesmo tempo. Então, se eu pressionar espaço aqui, você pode ver que nós podemos escrever aqui vidro e lista e linha item. Agora vamos voltar e refrescar-nos. E como podemos ver, nossos itens estão agora listados na mesma linha, casa, boas-vindas e status. E isso é basicamente para o inline est. Nós também temos tantas descrições e tantos elementos que você pode ir e verificar no site do Bootstrap. Há tantos elementos e tantas classes que você pode usar para fazer seu site parecer melhor. Mas estes são os conceitos básicos que devemos saber antes de criar qualquer site usando o Bootstrap. Agora, uma vez que temos alguns itens, podemos, vamos criar alguns outros e podemos falar sobre cores e Bootstrap usando esses itens. Então lista e linha item. E neste caso, vou dar o nome. Entre em contato conosco. E neste caso, se eu voltar ao nosso navegador e atualizar nosso item Fale Conosco. Então, primeiro de tudo, temos no Bootstrap tantas cores. Vamos voltar ao nosso bootstrap. E aqui temos os economistas. Então, em primeiro lugar, temos a informação primária, secundária de sucesso, advertência, perigo, luz e escuridão. E você também tem tantos ajustes para estes e você pode ir em frente e experimentá-los sozinho. No entanto, vamos tentar alguns dos originais e usar os estudiosos. Podemos simplesmente ir para o nosso item de lista e aqui temos o nosso item de casa. Podemos usar a informação de texto para indicar que esta é uma informação. E como você pode ver, vai ficar azul. E, por exemplo, temos o sucesso. Sucesso tão taxado. Vamos mudar isto para perigo, texto vermelho, perigo. E este será o machado escuro. Agora, vamos voltar, refrescar. E como podemos ver, temos agora o status de boas-vindas. Contacte-nos. Todos esses itens são cores diferentes e nós simplesmente criamos os estudiosos ou usar essas cores, prompt Bootstrap sem usar qualquer CSS em tudo do nosso lado. Espero que até agora você entenda completamente o que é Bootstrap e por que o usamos. Então, podemos simplesmente criar esses status CSS ou característica em nosso arquivo aqui. Mas escolhemos não ficar tensos. Eles já estão criados e disponíveis para nós sempre que quisermos usá-los. Agora, já que falamos sobre cores, vamos falar sobre cor de fundo. E para usar isso, podemos simplesmente acertar B, G e ponto traço, por exemplo. Vamos voltar aqui. E como podemos ver, este item depurador ligado, este item fica escuro. Agora vamos usar VG perigo, BG, sucesso, e eles são basicamente as mesmas classes. Mas como o texto, no entanto, escrevemos Vg para indicar que estes são de fundo. Então VGS, por exemplo, hino. Agora volte, atualize. E eu sei que eles não combinam, mas isso é apenas uma simples indicação de como usá-los. E isso é basicamente para as cores. Temos tantos carros em bootstrap. E você pode ir em frente e verificá-los fora do site original. E há super fácil e agradável de usar e aprender. E eu encorajo-te a ir e verificá-los sozinho. Então este é o fim para este vídeo. E o próximo vídeo vamos descobrir alguns outros componentes no Bootstrap. Temos tantos componentes e vamos passar pela maioria deles. E com isso dito, este é o fim deste vídeo. Vejo você no próximo. 5. Imagens: Olá e bem-vindo de volta. E neste vídeo vamos começar com imagens. Então, primeiro de tudo, para criar uma imagem, podemos simplesmente usar a tag geo. E aqui precisamos escrever nossa fonte e, em seguida, seguido pela alternativa. Então esta alternativa é usar apenas para indicar que esta imagem é, por exemplo, digamos que eu tenho um garoto pegou uma teoria, vamos usar a primeira imagem. Uma boa. E neste caso, a imagem não abriu por qualquer motivo. A alternativa será esta como E primeiro. E se eu abrir isso, podemos simplesmente usar isso. Veja que este é o primeiro assustado desde que não adicionamos o número do ciclo solar. Agora, para adicionar a fonte, podemos simplesmente ir para o nosso arquivo de imagens. Temos estas imagens e vamos usar a boa. Foto, volte, atualize. E como podemos ver, esta é a primeira foto. E você pode ver claramente que esta imagem é muito grande e precisamos ajustá-la. Então vamos fazer isso usando Bootstrap. Então, em primeiro lugar, esta é a nossa fonte. Esta é a alternativa. Vamos adicionar aqui nossos óculos. Então o primeiro, assim vamos adicionar é o fluido da imagem. Agora volte, atualize. E para ajustar nossa imagem, precisamos adicioná-la em uma divisão específica ou uma forma específica. E neste caso, para fazer isso, podemos simplesmente adicionar nossa divisão aqui, escrever def, mover tudo isso, e adicioná-lo à divisão. Dentro de nossa divisão, vou adicionar o contêiner da classe e agora voltar. E vamos refrescar. E esta é a nossa imagem agora ajustada. E isso é apenas usando a divisão que novamente, nosso arquivo HTML. E, claro, a classe contêiner de Bootstrap. Agora vamos supor que eu queira adicionar algumas imagens aqui. Então, por exemplo, eu quero três imagens. O primeiro aqui, segundo, terceiro. E neste caso, eu preciso criar uma linha. Então esta é a primeira fila. E então eu preciso criar algumas colunas. Então esta é a primeira coluna, segunda coluna, e a terceira coluna. Agora, geralmente nosso navegador é dividido em 12 itens ou 12 elementos. E neste caso, podemos dividir este 1223 elementos iguais usando para cada um. Assim, a primeira coluna vai levar papel alumínio, a segunda vamos tomar papel alumínio, e a terceira vai também, eles defini-lo para ele. Para fazer isso, deixe-me deletar isso. E vamos criar o rho. E podemos criar o papel criando as mortes e, em seguida, escrevendo a classe Grove, ou simplesmente escrevendo o ponto rho e, em seguida, pressionando Enter. E isso criará automaticamente uma divisão da última linha. Agora precisamos criar a coluna, e neste caso, vamos criar a coluna. E a primeira coluna será quatro. E, em seguida, nós também temos outra coluna, Me desculpe para escrever d ponto coluna para a frente. E finalmente o último seria esse componente também. E aqui podemos adicionar nossas fotos. Assim, a primeira imagem, a primeira imagem será de imagens e obter b1. A segunda imagem será também de imagens, chegar a. E a última imagem será imagens. E vamos voltar e refrescar-nos. E como podemos ver, temos nossas imagens, no entanto, elas não são como queremos. Então eu vou acertar o fluido de imagem da classe e o fluido aqui também. E finalmente adicionado a este fluido de imagem classe e voltar, atualizar. E como podemos ver, temos nossas imagens aqui. Estas são as nossas imagens e dividem-se em três lados iguais. E, claro, se os quisermos no navegador como uma folha, precisamos de fluido de dois anos. Uma vez que usamos a classe fluida de imagem, podemos usar o fluido de recipiente também. Então volte, atualize. E como podemos ver, estas são as nossas três imagens. Agora, vamos supor que não queremos estas bordas quadradas. Podemos sempre ajustar essas imagens usando as classes em Bootstrap. Então, dentro da nossa turma aqui, posso ver que quero que esta imagem seja arredondada se eu voltar aqui. E como você pode notar, que esta imagem é um pouco arredondada em comparação com as outras. E isso é basicamente para criar imagens e colocá-las em nosso site usando Bootstrap. Claro, temos tantos elementos ou tantas características que você pode usar. Mas vamos explorá-los mais tarde enquanto criamos nossos sites. Por enquanto, acho que isso é suficiente para imagens. Agora, vamos passar para outro componente que é capaz, e discutiremos isso no próximo vídeo. Então, vejo você então. 6. Tabelas: Olá e bem-vindo de volta. Neste vídeo vamos criar algumas tabelas. Então, antes de tudo, como de costume, onde quer que seja necessário criar qualquer componente em HTML, simplesmente escrevemos e, em seguida, apertamos enter. Então esta é a nossa mesa. Dentro da nossa mesa, como sabemos, temos a cabeça e o corpo. Então, primeiro de tudo, vamos criar a cabeça. Então esta é a cabeça da mesa d-hat. E dentro da nossa cabeça de mesa, precisamos de alguns títulos. Então vamos supor que eu queira criar uma tabela que consiste em um nome, sobrenome e e-mail. E para fazer isso, simplesmente precisamos adicionar o título, o primeiro título, que será o primeiro nome. E, em seguida, o segundo, sobrenome, finalmente, endereço de e-mail. E, claro, depois de terminar, vamos voltar. Este é o nosso endereço de e-mail FirstName, Sobrenome, e eles parecem muito pequenos. Mas, por enquanto, vamos trabalhar com isso. Então esta é a cabeça. Vamos em frente e criar nosso amigo. Dentro do nosso corpo. Precisamos criar nossa primeira fila. E por dentro crescerei. Este será e os primeiros dados, o primeiro nome será Meu nome Heidi, e depois Urano, e depois meu endereço de e-mail, por exemplo, 1-2-3 em gmail.com. Agora, esta é a nossa primeira fila. Então podemos criar outra linha. Dentro da segunda fila. O primeiro nome será marca, e então o sobrenome será, vamos supor fonte. E então, é claro, o e-mail seria de um a dois em email.com. Agora, se voltarmos para a atualização do nosso navegador, podemos ver que acabamos de criar uma tabela inteira consistindo de uma cabeça e corpo. E dentro de nosso corpo temos nossos dados. Então tivemos unidades, Mark Thornton, e se voltarmos aqui, acreditamos que precisamos de alguns ajustes no estábulo já que não parece muito bom. Então, a primeira coisa que vamos fazer é dar a esta tabela o atributo ou a tabela de classe de bootstrap. Então, tabela de classe, voltar, atualizar. E como podem ver, há uma enorme diferença entre a nossa primeira mesa e esta mesa. Esta tabela está em toda a página e uma tabela mais bonita, e nós temos essas linhas. Então a primeira linha é mais atraente do que as outras, já que estas são leves, talvez, e este é o título. E, claro, nossos primeiros elementos estão no parafuso e comparando-os com os dados. Então esta é apenas uma palavra simples que mudou tanto. Agora, é claro, se não estamos felizes com o estábulo, podemos sempre mudar e adicionar algumas aulas aqui. Então, por exemplo, se eu quiser que esta linha seja escura. Segunda linha para ser leve, eu posso simplesmente adicionar estes em nossa classe mesa. Então, por exemplo, vamos supor que eu quero que todas as linhas sejam informações. Então eu posso adicionar tabela e voltar, atualizar. Como podemos ver, a mesa ficou azul. Agora, não queremos isso. Nós só queremos que a primeira linha, por exemplo, a primeira linha de dados seja assim. Então podemos adicionar aqui na classe e podemos detectar ou cor de fundo, Sinto muito, NFO colorido, voltar, atualizar e cor de fundo da doença. E consiste em uma linha que cores em que a cor é azul. Agora, vamos mover isso e deixar escuro, por exemplo. E como podemos ver, se escurecermos, não vamos ver o texto aqui. Portanto, uma maneira de lidar com isso é dar o texto para ser mais atraente ou mais branco. Temos o slide de texto e podemos usá-lo aqui. E isso geralmente é usado com o fundo escuro, e dá uma melhor aparência Taemin. Agora, também podemos criar aqui a segunda tabela ou a segunda linha, será uma luz de cor de fundo, eo texto será escuro. E este é o oposto da primeira fila. E vai ficar melhor. E isso é basicamente para as cores. Nós também temos a tira crescer. E para fazer isso, podemos simplesmente usar a classe listrada de mesa aqui. Então, em vez de adicionar essas classes e nosso, dentro de nossas linhas, eu posso simplesmente adicionar aqui tabela. Volte, atualize. E como podemos ver, nossa mesa está agora despojada. Então nós temos o primeiro como este, o segundo, eu acho que deixe-me apenas adicionar a terceira linha. Terceira linha de dados só para ver a diferença. E é isso. E é assim que podemos criar um script rho, também temos a tabela escura ou table-striped. E enquanto estiver escuro, nós simplesmente adicionamos a mesa escura aqui. Tão escuro. E, claro, se eu voltar agora, atualizar como dissemos, é. E, ao mesmo tempo, enquanto detecta como branco. Agora menos, vamos passar para as linhas duplas pairar. E neste caso, precisamos adicionar algo aqui. E isso é o fim. Volte e atualize. Você pode ver que não é muito especial. Eu pensei, no entanto, sempre que você mover os dados, isso só vai dar esse efeito. E é um bom efeito. E podemos realmente fazer a mesma coisa com a versão escura. Volte para trás. E como você pode ver, temos esse efeito agradável sempre que passamos mouse sobre qualquer dado dentro de nossa tabela. Então é isso para as fileiras horríveis. E agora temos algo que é chamado de papel ativo. E isso geralmente é usado sempre que precisamos precisar que esta palha. Por exemplo, a primeira linha é a ativa e precisamos mover a segunda. Em seguida, basta alternar ou alternar entre o ativo dentro da primeira segunda linha. No entanto, aqui estamos apenas aprendendo o básico e há realmente uma classe que podemos usar. Por exemplo, nesta linha quando podemos especificar que esta é uma linha ativa. Agora, se voltarmos, atualizar, deixe-me apenas colocá-lo como mesa, apenas mesa e atualizar. Vamos voltar para ver o problema. Sinto muito, para adicionar a mesa ativa dentro da nossa classe. E se voltarmos, atualizar, e esta é uma linha ativa dentro da nossa tabela, é muito comum e muito usado. E geralmente sempre que você abre qualquer site, por exemplo aqui, este é um botão ativo. Então, sempre que eu pressionar este formulário, isso desaparecerá. E este formulário estaria ativo agora. E também temos o efeito de pairar aqui. Como você pode ver, praticamente, onde sempre que você pressiona há um efeito de pairar. E estas são ferramentas muito essenciais e muito poderosas que você pode usar dentro de seu site. Agora vamos para a mesa sem fronteiras. E para fazer isso, podemos simplesmente remover o ativo daqui. E podemos usar a mesa sem fronteiras. E isso nos dará uma mesa sem fronteiras. Então, se voltarmos aqui, refrescarmos, como podem ver, não temos caldeiras e não é tão bom. No entanto, ele é usado em alguns sites. E, claro, se quiséssemos que fosse mais escuro, podemos simplesmente adicionar a mesa escura. E eu acho que isso vai ficar um pouco mais agradável. Agora também temos as mesas pequenas. E para fazer isso, podemos simplesmente adicionar a tabela aqui. E vamos apenas remover isso. Salvar, atualizar. E esta é a nossa mesa. E simplesmente cortou todo o preenchimento ao meio. Então, só para ter certeza que você entendeu a diferença. Esta é a mesa, como de costume. E se escrevermos tabelas e voltarmos, atualizarmos, isso, ficaremos um pouco menores já que o estofamento será cortado ao meio. Agora, vamos para a cabeça agora. Então agora esta é a nossa cabeça. Podemos fazer exatamente a mesma coisa que fizemos para os dados. Por exemplo, podemos adicionar o ano ou teve uma classe para indicar que esta é a tabela e será leve. Claro, vamos mover esta mesa pequena. E como podem ver agora temos o nosso rumo. E é como agora nós também podemos fazê-lo como escuro, é claro, simplesmente adicionando aqui escuro. E não vou fazer isso, já que é a mesma coisa. Agora vamos para o rodapé. E, na verdade, o rodapé é outro elemento que não é tão comumente usado. No entanto, existe e podemos simplesmente usá-lo após o corpo. Então, sempre que terminarmos o para o corpo, podemos simplesmente adicionar o pé da mesa. E dentro desta comida de mesa, vamos tentar um pouco. Então olá, ou vamos tentar o rodapé. Assim como o rodapé e o rodapé. E agora, se voltarmos e atualizarmos, vamos ter Rodapé, Rodapé e Rodapé. Agora, finalmente, nós também temos as legendas. Então, sempre que criamos uma tabela, provavelmente vamos precisar de uma legenda. E para fazer isso, podemos simplesmente adicionar esta legenda logo antes da cabeça. Então, podemos acrescentar Etag que é chamado de legenda e todos os usuários. Então esta é a tabela de todos os usuários. E vai parecer brilhante feito. Agora, eu acho que isso é suficiente para mesas. Este é o básico que você precisa saber sempre que queremos criar uma tabela e HTML usando Bootstrap. E com isso dito, este é o fim deste vídeo. Vejo você na próxima. 7. Formulários: Olá e bem-vindo de volta. E neste vídeo vamos discutir controles de formulários. Então deixe-me ir em frente e apagar isso. Então, para começar, vamos começar com uma entrada e uma área de texto onde o usuário pode digitar algo. Então, por exemplo, se vamos criar uma entrada, faz sentido começar com uma divisão. Assim que criarmos nossa divisão, podemos criar nossa entrada e será do tipo II feito, por exemplo. E nós vamos dar a ele uma classe de controle de forma. E, em seguida, vamos apenas colocar o espaço reservado é digitar seu e-mail aqui. E depois disso, deixe-me abrir isso aqui. E como podemos ver, esta é a nossa opinião. Agora, nós realmente não queremos que nossa entrada esteja no topo da página. Talvez queiramos um pouco de espaço. Então, para fazer isso, podemos simplesmente usar uma das classes que está relacionada ao preenchimento e no Bootstrap. Então temos vários. Uma vez, por exemplo, se queremos um preenchimento na margem, sinto muito, uma margem no topo. Podemos simplesmente usar o MD e especificar o comprimento. Por exemplo, aqui, eu queria ter cinco pixels. Se eu quisesse ter três anos, novo, basta digitar três. Isso é quatro margem, top, margin, bottom MB. E então temos um machado para o eixo X e, claro, y para o eixo y. Então eixo X significa que ele vai nos dar uma margem de última e seca. E eixo y significa que ele nos dará a margem do botão superior. E podemos também especificar, por exemplo, que toda a margem deve ser três. E se eu voltar agora, atualizar, podemos ver que temos três daqui e três daqui, e também três daqui. E se inserirmos qualquer coisa após esta entrada, vamos chegar aqui outro preenchimento. E isso é basicamente para a entrada, vai modificá-lo mais tarde, mas por agora, deixe-me apenas criar a outra divisão. E então esta divisão, nós vamos ter uma margem, também três. E é claro que precisamos criar uma área de texto. Assim, o nome desta área de texto será um exemplo. Não quero uma identificação por enquanto. Coluna rolar nós, ok, e agora vamos verificar o que temos. Então, estes são os nossos ataques até agora. Podemos tentar algo aqui. Por exemplo, P está certo, e se salvarmos, podemos ver que temos abelhas bem aqui. No entanto, sempre que queremos escrever algo, podemos adicionar a ele ou simplesmente excluídos e desde o início. E, claro, não é bonito, então precisamos modificá-lo um pouco. Agora, vamos voltar aqui. E vamos ver o que podemos fazer? A primeira coisa que vamos fazer é adicionar aqui uma classe de bootstrap, e é o mesmo que antes, que seria um controle de formulário. Desde que estamos indo, estamos usando um formulário, como faz sentido usar classe controlador padrão. Se eu voltar aqui e podemos ver que temos uma área de texto todo o caminho em todo o navegador. E a mesma coisa para a área de entrada. Agora, podemos ver que o usuário pode não entender o que estamos tentando dizer. Então, podemos simplesmente adicionar, por exemplo, aqui um rótulo para o e-mail e, claro, outro rótulo para a área de texto. Então, uma maneira de fazer isso é simplesmente adicionar um rótulo antes da entrada. E este rótulo terá o papel alumínio, este específico. E deixe-me apenas adicionar uma identificação aqui. E será igual a entrada. E isto é para a entrada. E, claro, a classe será também para rótulo. Então vamos escrever algo aqui, por exemplo, endereço de e-mail. E, claro, depois de terminar a partir daqui, posso simplesmente remover isso. Ou podemos digitar 1-2-3 em example.com. E isso faria com que o usuário entenda melhor o que está acontecendo aqui. Então, primeiro de tudo, nós tínhamos o endereço de e-mail e nós também temos o exemplo aqui. Agora vamos voltar. E como podemos ver, precisamos ajustar a área detecta. Então, uma maneira de fazer isso é adicionar também o rótulo. Este rótulo será para a área de texto. E, claro, a turma será um estrangeiro rotulado como antes. E esta é a área de texto. E, claro, depois de terminar a partir daqui, simplesmente exclua isso e atualize. E como você pode ver, temos nosso endereço de e-mail e área de texto. Agora, se por exemplo, estamos descobrindo que temos tantos espaços aqui, podemos simplesmente modificar nossa margem. Por exemplo, aqui estamos dizendo que queremos ter endereço de e-mail e, em seguida, seguido por isso. E, claro, seguido pela área de texto com a caixa de área de texto. Agora, por exemplo, podemos ajustar a margem inferior aqui, sinto muito, a margem para margin-bottom. Então, se eu fizer algo assim e voltarmos a atualizar, podemos ver que temos o endereço de e-mail na parte superior da página. E, claro, o e-mail onde podemos inserir nosso e-mail. E, claro, sempre que pressionarmos Enter aqui, nada acontecerá, já que não adicionamos nada ou qualquer ação que possa resultar da entrada ou envio de nossos dados. Por enquanto, este é o nosso endereço de e-mail e a área de texto. Agora também temos o tamanho. Então temos o dimensionamento de classes como. Controle de formulário e, em seguida, especifica um determinado decidir. Então, por exemplo, este tamanho, deixe-me apenas mudá-lo aqui. Eu posso ir para nossa entrada e dentro de nossa entrada e dentro de nossa classe, podemos adicionar controle de formulário. E depois seguido por LG. E isso significa lama. Volte, atualize. Podemos ver que as decisões ficaram um pouco maiores. E temos três classes, o LG e o padrão, e o pequeno SM. Agora também podemos adicionar o atributo disabled, e este é um atributo booleano. Então, por exemplo, se temos algo que não vamos mostrar para o usuário já que ele pode não estar logado. E podemos fazer isso usando o botão desativado. Então, por exemplo, posso voltar à nossa opinião. E dentro de nossa entrada eu simplesmente adiciono os deficientes aqui. Volte, atualize. E desculpe, deixe-me apenas e, claro, nós não adicioná-lo aqui, então deixe-me adicioná-lo. Por isso, temos desativado. E, claro, volte, atualize. Como podemos ver, temos este endereço de e-mail cinzento. Podemos digitar init ou até mesmo excluir qualquer coisa daqui. Aqui, podemos simplesmente acrescentar. Tudo bem, agora vamos voltar ao nosso código e vamos falar sobre senha e confirmação de identidade. Então, em primeiro lugar, temos a nossa divisão. Deixe-me apagar tudo isso e criar nosso formulário. E nesta forma, estamos indo sem ação, é claro, já que não aprendemos. E agora temos a nossa aula. E depois temos dentro da nossa turma. Vamos usar a linha e, claro, g três. E então vamos criar o nosso deficiente e esta é a coluna, deixe-me dar-lhe o atributo de auto. Então vamos criar o nosso trabalho. Portanto, este rótulo será usado para e-mail. E-mail, e, em seguida, é claro , o nosso tipo de entrada, podemos especificar que pode ser e-mail ou texto, não importa. E depois do tipo, podemos adicionar a classe, controle de fórum e, claro, texto simples. O espaço reservado será enviado por e-mail em example.com. Isto é adiado. Primeira divisão. A segunda divisão também terá o auto ilha de vidro e nós temos o rótulo para este rótulo, será para a senha, então eu vou simplesmente escrever passe, e então a classe será visualmente escondida. Então esta é a classe que usamos sempre que queremos criar uma senha. E veremos o que faremos em um momento. Então esta é a entrada rotulada. Eu, é claro, senha para esconder a entrada. E então a classe será para controle, seguido pelo ID, que será o passado que demos o rótulo antes. E, claro, o espaço reservado será a senha. E, em seguida, aqui só precisamos digitar ID E-mail. Então esta é a nossa segunda divisão. E na última divisão vamos criar nosso botão para apenas dar esses dados ao nosso servidor. Então, como fazemos isso? Nós simplesmente criar o nosso, é claro, a classe será auto como antes. E dentro desta divisão vamos simplesmente criar o botão. O botão será conformação de identidade e o tipo será Enviar. E, em seguida, a classe, nós vamos dar-lhe algumas aulas. Mas, por enquanto, deixa-me refrescar isto. E como você pode ver, temos aqui o e-mail, e-mail em example.com. Então temos a senha de confirmação de identidade. E como podemos ver aqui, esta afirmação de uma identidade não parece um gelo. Nós vamos modificá-lo, mas com o uso de Bootstrap. Agora, este é um e-mail em example.com. Deixe-me ler. Isto. Na verdade, não parece bom. Então deixe-me apenas decente ou podemos usar o visualmente escondido aqui também. Então, podemos simplesmente adicionar visualmente e depois voltar. E vamos ver. Nós visualmente tinha feito. E como podemos ver, não está mais aqui. Agora, se voltarmos ao nosso código, podemos ver que precisamos ajustar este botão. Então temos várias aulas aqui. Uma das classes mais importantes é DBT, e isso indica que isso tem um botão. Volto agora, vamos ver a diferença. E parece muito, muito diferente de antes de termos essas fronteiras e a corrente não era agradável. E agora, como você pode ver, parece moderno e muito mais agradável. Então este é o primeiro exemplo ou a primeira classe que vamos usar. Claro, podemos escolher o fundo a, então o botão será primário por enquanto. E, claro, margem, três de baixo, voltar, atualizar. Assim, podemos ver que temos agora o nosso botão. E, claro, se quisermos ajustar isso, podemos simplesmente adicionar ao nosso formulário aqui os três marginados e voltar, atualizar. E agora temos a nossa margem. Então é isso para a senha e confirmação do botão de identidade. Você sempre pode mudar o que quiser se você não gosta da cor ou se você quiser mudar o tamanho, qualquer coisa que você pode ir para bootstrap.com e verificar cada elemento e você verá uma descrição detalhada de cada elemento em Lá. E, claro, por exemplo, deixem-me terminar com isto. Podemos mudar este botão para ficar escuro. E eu acho que fica melhor agora com branco e escuro como cores. E este é o fim para este vídeo. E no próximo vídeo, vamos continuar nossa discussão sobre fóruns. E nós vamos introduzir algumas novas formas que podemos usar e elas são comumente usadas entre sites. Então, vejo você então. 8. Formas 2 -: Agora vamos falar sobre a entrada de arquivos. Sempre que você ver algo ou alinhado, por exemplo, e dentro desta linha temos o atributo choose file. Isso geralmente é uma entrada de arquivo. Agora vamos criar um deles apenas para demonstrar o uso dessas entradas de arquivo. Então, por exemplo, a primeira coisa que vamos fazer é criar nossa divisão. Dentro desta divisão, vou dar-lhe uma aula de arbusto de mercadorias. E essa classe seria a margem, é claro, apenas para dar alguma margem de todos os ângulos, então nós temos nosso trabalho e assim o rótulo seria de arquivo. A classe será formada rotulada como de costume. E então nós também temos o rótulo aqui podemos adicionar, por exemplo, arquivo. Mas depois do rótulo, podemos adicionar nossa entrada. Assim, a entrada será do tipo arquivo. O vidro seria de controle estrangeiro, seguido pela identificação apenas para torná-lo para o rótulo. E isso também é do arquivo. Agora vamos voltar e refrescar-nos. E como podemos ver, este é o nosso rótulo e este é o nosso arquivo Escolher. Sempre que eu pressionar sobre isso, eu posso ir para minha área de trabalho, Documentos, Downloads, e assim por diante. Escolha qualquer arquivo a partir daqui e faça o upload. Agora, vamos ver a diferença entre este e o rótulo sem este HTML neste Bootstrap. Como podemos ver, não parece chique, não é tão moderno. No entanto, quando adicionamos este controle de formulário de classe, eu acho que podemos concordar que ele parece muito melhor. Agora, isso não é para a entrada do arquivo. Temos também alguns outros atributos que podemos adicionar, por exemplo, as múltiplas entradas. Podemos adicionar vários arquivos de uma só vez. E também temos os deficientes, a entrada de arquivos pequenos, pequenos e grandes. Podemos ou este é o tamanho padrão, podemos torná-lo menor ou maior. Eu não vou repassar tudo isso desde que nós os numeramos antes. No entanto, você sempre pode ir para o bootstrap e verificar se há eles. Algo aqui, em algum lugar aqui. E eu acho que isso é o básico. E nós só precisamos do básico para criar nossos sites se você quiser, se você quiser se aprofundar neles, você sempre pode ir para Bootstrap. Mas, por enquanto, esta é a nossa entrada de arquivos. E vamos para outro tópico, e este é o seletor de cores. E aqui temos algo que é chamado de seletor de cores na verdade. E neste caso, vamos criar um deliberado será o canto para as cores, por exemplo, para a coluna. E a classe será como de costume para o trabalho e uma cor. E, em seguida, seguido pela entrada real. E neste caso, temos a entrada do tipo. Olá, classe para controle. E deixe-me deletado e vamos ver o que está acontecendo. Então, se eu apagar a aula, volte, atualize. Este é o nosso seletor de cores FE, e pressione sobre ele. Ele nos dará todos os cantos disponíveis para nós. Este é o RGB. Podemos escolher a partir daqui, mudar os números, ou escolher a partir daqui. E da tela. No entanto, não parece agradável. Então, uma maneira de ajustar isso é adicionar a classe controlada de forma, seguido pela cor de controle externo. Volte, atualize. E como podemos ver, temos essa aparência mais bonita, parece melhor. E fará o mesmo trabalho que antes. No entanto, talvez não queiramos esta cor preta como padrão. Então, como podemos modificar isso? Então, uma maneira de fazer isso é voltar para a entrada. E dentro da entrada temos algo, deixe-me apenas adicionar a idéia para instinto em vez. E então temos algo que é chamado de valor. E dentro deste valor, podemos escolher qualquer número ou qualquer cor para ser a cor padrão. Então, como você escolhe o tipo de nós podemos voltar para a cor e Bootstrap a idéia de qualquer cor que queremos. Então vamos supor que eu quero essa cor. Eu posso simplesmente copiá-lo, voltar, direita, hashtag, esta cor, e depois voltar para o nosso site, atualizar. E lá vamos nós. Temos a nossa cor padrão azul. Então isso é basicamente para a cor. Agora, vamos em frente e falar sobre as listas de dados. Assim, neste caso, as listas de dados nos permitem criar um grupo de opções que podem ser acessadas e completadas automaticamente de dentro de uma entrada. Então, na verdade, eles são semelhantes aos elementos selecionados, mas vêm com mais estilo de menu, limitações e diferença, e vamos explorá-los agora mesmo. Então, a primeira coisa que precisamos fazer para criar este tipo de lista como para criar o rótulo eo rótulo será como de costume. Então d4 é, será a lista de dados, em seguida, a classe para rótulo. E, claro, esta é uma lista de dados. E, em seguida, seguido pela entrada real do tipo. Podemos ignorar o tipo. E nós vamos criar a classe para controle. Em seguida, seguido pelo ID para ser lista de dados, em seguida, o tipo de espaço reservado para aumentar. E, claro, para criar essa idéia, precisamos ter a lista, dados, opções de lista. E neste caso, sempre que fazemos algo assim, se formos atualizar, esta é a nossa lista de dados. E aqui podemos procurar qualquer coisa que quisermos. Agora, as opções serão após a entrada. Podemos criar nossa lista de dados. E dentro desta lista de dados, lista de dados. Deixe-me criar assim. E a ideia seria opções de lista de dados, como dissemos antes. E então vamos abrir. Assim, a primeira opção será de valor. Digamos que dividam o Líbano do que o Egito. Vamos escrever para os Estados Unidos. E, finalmente, a Índia. Agora vamos voltar, refrescar. E acho que temos um problema aqui. Então esta é a opção de listas de dados, opções de lista de dados. Vamos apenas mover cliques aqui, salvar, voltar, atualizar, pressionar aqui. E nós temos nossas opções aqui, Líbano, Egito, Estados Unidos. E podemos escolher entre eles. Ou podemos digitar o nosso próprio, por exemplo, Dubai. E funcionará corretamente, mas estas são algumas opções. Você pode querer torná-los as únicas opções, é completamente com você. E isso virá mais tarde. Sempre que usamos JavaScript ou sempre que terminamos com nosso site. E isso não é basicamente para a lista de dados, tópico muito simples, mas também é muito poderoso e nos dá um pouco, ou torna o site um pouco mais agradável, já o usuário pode realmente ver que ele tem algumas opções ou ele pode escolher de alguma coisa. E não é só que ele só pode escrever “se”. E isso é basicamente para este vídeo. Dito isto: Vejo-te no próximo. 9. Verificações e raios: Agora vamos falar sobre o seleto. E esta é uma seleção personalizada que pode ser usada em HTML. No entanto, temos algumas classes que podemos modificar ou net que podemos adicionar ao nosso selecionado. Então a primeira coisa que vamos fazer é voltar ao nosso código, excluir tudo isso, e começar do zero. Então, a primeira coisa é criar a seleção e sem nome ou ID. E eu posso simplesmente dizer que a classe deve ser controle estrangeiro. E vamos começar com nossas opções. Então, a primeira opção será, como de costume, opção número um seria um, e aqui podemos secá-la. Líbano, opção para comprar dois Estados Unidos. Em seguida, seguido pelo valor três, Egito. E então esses são nossos valores que os empurraram. E, claro, podemos adicionar aqui a área LeBron, e será o padrão selecionar exemplos. Então este é o exemplo de seleção padrão. E, claro, se eu voltar aqui em cima, e nós tivermos opções DS3. Agora, por exemplo, não queremos que o Líbano apareça no primeiro. Podemos adicionar a opção e ela será selecionada. E o valor será sem ninguém, nós não damos nenhum valor aqui. E, claro, a opção seria abrir isso para selecionar em Atualizar. Então abra isso para selecionar a partir de arpanet. Temos tudo isso disponível para nós. Posso escolher os Estados Unidos, o Egito e o Líbano. No entanto, aqui é diferente do que antes. Podemos tentar qualquer coisa aqui. Portanto, estas são as únicas opções disponíveis para nós, e precisamos escolher uma delas. Então isso é basicamente para o padrão. Agora também podemos escolher o tamanho simplesmente adicionando o tamanho aqui. Então temos o formulário de seleção, pode adicionar formulário selecionar almoço. E se eu voltar, atualizar, como podemos ver, essa seleção ficou maior. E parece claro. Agora também podemos escolher o e este Abel. E este é o atributo que adicionamos antes, e é um booleano, então podemos simplesmente adicioná-lo aqui. Então este habilitado voltar, atualizar e podemos escolher a partir dele. E são sites muito usados e comuns, especialmente se você não está logado e você não pode escolher ou modificar nada. E este botão desabilitado, atributo desabilitado permitirá que o site ou o criador se certifique de que você está conectado para fazer isso, ou você pode fazê-lo. Então isso é basicamente para a seleção. Agora vamos falar sobre cheques e rádios. Então vamos em frente e excluir isso e criar nosso cheque. Então, para fazer isso, podemos simplesmente criar nossa divisão e será para choque dentro de nossa divisão, vamos criar nossa entrada. Assim, o tipo desta entrada será uma caixa de seleção. E, claro, a aula será para Jack e colocar. E então a idéia, digamos que este é um cheque seguido pelo rotulado a classe. Então aqui precisamos adicionar o cheque e, em seguida, a classe será antes do cheque rotulado. Então esta é a nossa primeira divisão. E atualize esta página. Podemos ver que temos esta divisão aqui. No entanto, não temos nada dentro são rotulados. Então deixe-me adicionar aqui. Verifique-me, refresque-se. Já me verificamos. Posso verificar ou desmarcar e vai funcionar muito bem. Agora, às vezes não queremos que este botão padrão seja desmarcado aqui. Precisávamos ser. Então, uma maneira de fazer isso é fazer uma verificação ou dizer para o navegador que este botão está marcado. Então deixe-me copiar isto e colá-lo aqui. Como você faz isso? Podemos simplesmente ir para a nossa entrada e adicionar a palavra verificada, atualizar. Portanto, temos um botão que não está marcado e a outra caixa de seleção está marcada. E você sempre pode alternar ou escolher entre eles ou marcar ambos, uma vez que eles estão caixa de seleção. Agora, temos também algo que é chamado intermediário, e vem como a linha horizontal. Então deixe-me voltar aqui. E não podemos criá-lo a partir de HTML ou bootstrap. Ele deve ser criado usando JavaScript e não está disponível em atributos HTML. Agora, por último, podemos criar nosso botão desativado ou verificação desativada, por exemplo, aqui, em vez de marcado, eu posso simplesmente escrever desabilitado, voltar, atualizar. E como pode ver, não consigo marcar este botão. Eu sozinho, eu acho, posso checar o cisne. Isto está desactivado. Agora, vamos avançar para o raio. E neste caso, deixe-me deletar isso, começar de novo. Então o formulário será quatro. Cheque. A entrada será do tipo rádio. A classe será para entrada de shack. E depois seguido de alguma ideia. Por exemplo, isto é um rádio. E então o nome estará no rádio. E depois da entrada, precisamos criar nosso rótulo. Então, para o rádio, e então a classe será formada. Verifique e rotule. Claro, dentro do nosso rótulo, podemos criar ou digitar qualquer coisa. Então, por enquanto vou digitar rádio, e como podemos ver, temos essa entrada de rádio. Agora também podemos digitá-lo ou fazê-lo como Jack simplesmente adicionando o verificado aqui. Volte, atualize, e já está verificado. Nós também podemos usá-lo como um padrão ou como um deficiente. Mas eu não vou fazer isso. Você pode simplesmente mudar esta palavra com deficientes e trabalhar muito bem. Agora, temos algo que é muito popular e muito usado em sites. E isso é chamado de interruptor. Então eu troquei tem notável caixa de seleção personalizada, mas usa o formulário comutado classe dois liquidificador ou um interruptor de alternância. Então, para fazer isso, nós vamos ficar e este surdo. Mas deixe-me ajustar isso que tínhamos antes. E também temos interruptor deformado. Então agora temos as duas formas. Deixe-me apagar e vi o gosma de D. E a entrada será do tipo, será uma caixa de seleção. Então temos a aula para checar. E depois seguido da ideia ou não, deixe-me alimentar a nossa etiqueta dentro da nossa etiqueta. Vamos datilografar. Deixa-me só fazer isto. E a classe será igual a quatro etiquetas de verificação seguido pelo texto real aqui. Então isso é switch, checkbox e put. E se eu voltar aqui, atualizar, Nós temos esta caixa de seleção e alternar entre ligar e desligar. E nós podemos realmente fazer a mesma coisa com isso como fizemos antes. Podemos desativá-lo, podemos fazer um verificado como padrão ou podemos desativá-lo enquanto ele é verificado. Então isso não é basicamente para esses padrões e eu acho que isso é suficiente por agora. Deixe-me acrescentar uma coisa que são as caixas de seleção iluminadas. Então, se por exemplo, eu não quero que eles estejam na horizontal ou na mesma coluna. Quero que fiquem na mesma fila. Por exemplo, deixe-me adicionar aqui algumas caixas de seleção. Então o primeiro será a divisão de quatro, verificar, verificar iluminado. E isso iluminado fará as caixas de seleção na mesma linha. Assim, a entrada será do tipo caixa de seleção. A classe será para entrada de controle. E, em seguida, seguido pelo valor, esse nome e a opção um. E, claro, o rótulo será de classe. Esta classe será quatro cheques rotulados. E, claro, esta é a opção um. E deixe-me copiar e colar isso duas vezes mais 12. Então esta é a opção dois. E o valor aqui será também dois e aqui três e também três. E se eu voltar agora, atualizar, como podemos ver, eles estão todos na mesma linha desde que usamos o controle de formulário ou linha de check-in estrangeiro. E eu posso marcar qualquer uma dessas entradas. Agora, vamos passar para os botões de alternância da caixa de seleção. E neste caso, deixe-me apagar isto. E vamos criar nosso botão de caixa de seleção. Então, a primeira coisa que vamos fazer é criar a caixa de seleção e colocar a classe será btn check. Vamos dar a mesma idéia e, em seguida, auto-completar TLB desligado. Depois disso, podemos simplesmente voltar para a próxima linha e criar nosso rótulo. A classe será como de costume, btn, BTN primária pela primeira vez. Então volte e vamos dar o nome. Botão de verificação. Volte, atualize. E como podemos ver, temos este botão e é o principal. Agora, se eu quisesse que ele fosse verificado, eu poderia simplesmente usar o atributo verificado aqui. Então, como você pode ver aqui, eu posso voltar, atualizar e agora está verificado. Se eu clicar nele, nada vai acontecer, já que não terminamos adicionar nada a agora. E isso é basicamente para os botões. Podemos sempre habilitá-los, todos, verificá-los como quisermos. Então nós podemos, nós podemos remover isso, que desativado aqui e voltar atualizar. Assim, podemos ver que este é um botão desativado. E por último, temos o estilo de contorno. E isso geralmente é usado para simplificar as coisas. Então, por exemplo, se este é o botão e não estamos satisfeitos com o estilo deste botão. Não estamos satisfeitos com a cor de fundo. Talvez queiramos removê-lo. Podemos simplesmente usar este esboço. E neste caso para o rótulo, eu posso simplesmente usar o esboço BTM primário. Agora vamos voltar e refrescar-nos. E como podemos ver, pode parecer melhor em alguns casos especiais. Então é isso para os cheques e o raio. Dito isto, este é o fim deste vídeo. Vejo-te no próximo. 10. Range e entrada: Agora vamos falar sobre alcance. E primeiro de tudo, deixe-me apagar isto e criar o nosso trabalho. Então este cabo vai procurar o alcance. A classe seria como de costume para rotulado. E isto é um alcance. Claro, precisamos criar a entrada de veias tipo. Nós também temos a classe para o alcance. E deixe-me dar-lhe a idéia de alcance também. Vamos voltar aqui e atualizar o como podemos ver, temos agora o nosso alcance para que possamos movê-lo para trás e para frente como podemos ver e configurá-lo onde quisermos. E temos um estranho. Agora, podemos sempre modificá-lo. Podemos criar algumas linhas, então esta é a linha e dividir a página em duas colunas diferentes e fazer sua polegada menor, por exemplo. Ou crie uma divisão no meio do local de trabalho e coloque esta página dentro desta divisão e para que ela pareça melhor e mais inteligente. Porque este não é um alcance muito bonito. No entanto, tem todas as características que precisamos. Agora podemos sempre adicionar o atributo desabilitado. Podemos adicionar um mínimo e o máximo. E encorajo-te a experimentá-los sozinho. E, claro, eles estão todos disponíveis no site do Bootstrap. Agora, vamos passar para outra forma muito importante que é o grupo de entrada. E para fazer isso, deixe-me deletar isso e criar nossa divisão. E dentro da nossa divisão, vamos dar-lhe a classe. Esta classe seria o grupo de entrada, e eu vou adicionar a margem em todos os lados. Dentro desta aula, vamos ter o nosso elemento de expansão dentro desta banda. Vou simplesmente escrever o anúncio para indicar que este é um nome de usuário. E, claro, a classe seria texto de entrada. E como podemos ver agora, se eu voltar e atualizar nossa página, vamos conseguir isso no símbolo e nos raios. E como podemos ver, esta é a nossa divisão. Nós criamos o espaço. Agora, precisamos criar nossa entrada onde o usuário pode digitar já proferiu. Neste caso, vamos criar a entrada do texto do tipo. Declara será como de costume para controle, e o espaço reservado estará no nome de usuário. E é claro que você pode adicionar o que quiser depois disso, mas vamos usar isso por enquanto. E como podemos ver, este é o nome de usuário do nosso anúncio. Podemos escrever o que quisermos aqui. E é claro que podemos adicionar um botão ou algo assim apenas para indicar que queremos enviar. Ou talvez tenhamos um formulário. Então, se temos vários elementos, precisamos apenas preenchê-los todos e, em seguida, clique em enviar para enviar nossas informações de uma só vez. Então é isso para o nome de usuário. Por exemplo, se quisermos adicionar este e-mail, podemos usar o span, por exemplo, na parte inferior aqui. E, claro, posso adicionar example.com para indicar que este é o fim. E se eu tentar isso mais uma vez, nós temos nome de usuário aqui e example.com. E você pode querer apenas diminuir a largura ou o comprimento disso. Desde a sua muito longa, está em toda a imagem no site. Você pode apenas criar uma divisão e talvez apenas metade da página ou no meio da página ou assim por diante. Então isso é basicamente para o e-mail. Agora, vamos supor que não temos certeza sobre o example.com. Neste caso, podemos adicionar outra entrada após esse período e podemos indicá-lo como antes. Então deixe-me mover isso e copiar colar. E, claro, podemos mudar o titular do lugar para adicionar example.com, voltar e atualizar. E como podemos ver, agora temos nossa nova divisão ou nossa nova entrada. Neste caso, podemos escrever nosso nome de usuário aqui em, e claro, o example.com, precisamos mudá-lo para qualquer coisa que temos. Agora, mais uma coisa a acrescentar, por exemplo, se quisermos fazer isso e colocar parecia melhor, podemos sempre usar o grupo de entrada pequeno ou entrada para o grupo de alimentos grandes, uma entrada maior. Então grupos de entrada pequenos. Agora volte, atualize, e como pode ver, ficou menor. E, claro, o LG será maior. E como podemos ver, esta é a nossa opinião agora. Agora também podemos adicionar as caixas de seleção e rádios dentro de nossas opções. Assim, por exemplo, em vez de especificar o tipo de entrada como texto, podemos especificá-lo como ele caixa de seleção. Agora, é claro que precisamos mudar isso e damos a ele a cabana dos insetos da classe. E esta é a entrada. Volte, atualize. Podemos ver que temos esta pequena caixa de seleção aqui. E quando podemos modificá-lo, também podemos adicioná-lo em vez do add aqui. E podemos fazer o que quisermos nesta divisão. Agora também podemos adicionar vários complementos. Então, por exemplo, em vez de especificar isso ou talvez ele simplesmente exclua isso. E antes disso, deixe-me voltar ao nosso padrão. E em vez disso, vou adicionar outro elemento span com uma classe de entrada. Texto de grupo. E aqui eu vou adicionar o example.com e voltar atualizar. E como você pode ver, nós temos que abranger elementos e estes indicam múltiplos acréscimos. Agora também podemos adicionar o botão add ons. Então, em vez de criar um span, podemos criar um botão real. Neste caso, deixe-me deletar o segundo, ou talvez o terceiro. E vamos criar um botão de classe BTN, PT e esboço secundário. E, claro, vamos tentar alguma coisa. Então este é um botão e voltar a atualizar. E como podemos ver, temos o nosso botão aqui. Podemos passar o mouse sobre ele e nos dá um bom efeito. Agora, nós também temos algo que é chamado de botões, drop-down. E neste caso, podemos criar o nosso botão e podemos adicionar alguns elementos a este botão. Então, sempre que pressionamos, esses elementos aparecem e podemos escolher entre eles. Então, para fazer isso, vamos apagar isso e eu vou manter a divisão e as classes dentro da divisão. Então a primeira coisa que vamos fazer é criar a classe, o botão e as classes serão o btn final, contorno e secundário como de costume. E agora vamos adicionar outra classe para o menu suspenso, e é chamado de menu suspenso alternado. E neste caso, o tipo será um botão. E, claro, sempre que precisarmos usar o menu suspenso, precisamos atualizar os dados. Assim, dados ps será igual ao menu suspenso. E neste caso, nós definimos, pode adicionar o nosso botão. Então, dentro deste botão temos, vamos criar uma lista desordenada. Assim, a lista não ordenada será de uma classe que é chamada de menu suspenso. Então esta é a nossa turma e os itens da lista. Dentro do último item vamos criar um link. E este é o hiperlink. E sempre que você quiser criar um link sem qualquer referência, você pode simplesmente escrever o ano hashtag e, em seguida, trabalhar como de costume. Então a classe seria um item suspenso. Lembre-se que todas essas classes são impulsiona as classes Bootstrap, e nós não somos responsáveis por escrevê-las. Podemos simplesmente usá-los agora. E, claro, dentro disso , podemos criar, por exemplo, homepage. Deixe-me copiar isso e colá-lo várias vezes, e apenas fazê-los em linhas separadas. E aqui, digamos missão. Digamos que entre em contato conosco. E digamos feedback. Parece bom. E esta é a nossa lista desordenada. Temos a classe de menu suspenso dentro da nossa lista não ordenada do que dentro de cada item da lista, temos um link e este link é Avid item suspenso de vidro. Agora só temos que criar nossa entrada aqui. Então esta é a nossa entrada e aqui, isto não deveria estar aqui. Podemos simplesmente movê-lo para aqui e criar o botão. Então deixe-me tentar, talvez botão. E é isso. Basta fazê-lo na mesma linha. E agora, bom. Então o tipo será texto, talvez. Então vamos deixar como um texto. E vamos escrever algumas aulas. Então, a classe será como de costume para o controle. E também ajustamos isso. E agora acho que estamos bem, vamos voltar e nos refrescar. E como podem ver, temos o nosso botão. E sempre que pressionamos, temos nossa casa Michigan Fale Conosco e feedback. Agora lembrem-se, sempre que descansarmos em algo, nada acontecerá, já que não adicionamos nenhuma ação ao nosso atlas. Então isso é basicamente para o botão com listas suspensas. Podemos sempre alterar a localização do botão. Por exemplo, aqui eu criei à esquerda, você é criado na noiva ou talvez ambos. Então, isso é com você. E é isso, basicamente, podemos modificar algo aqui. Então, por exemplo, vamos supor que eu tenha a casa Michelle Fale Conosco e feedback de um lado. E eu preciso de uma linha separada para separar estes de outra coisa que talvez possamos querer acrescentar. Então, para fazer isso, podemos simplesmente adicionar e nossa lista não ordenada, o item da lista. E este item da lista será basicamente o item e a classe será um divisor suspenso. E é assim que fazemos. Então agora temos uma divisória, o que quer que tenhamos tentado outra coisa aqui, vamos supor que nos despedimos e voltamos ao fresco e pressione mais uma vez. Podemos ver que o Adeus é diferente e separado dos outros. E acho que aqui cometi um erro. Então, esta atualização suspensa e está boa agora. Então estes são o nosso primeiro lado e este é o segundo lado separado por esta linha. Então isso é basicamente para os botões. Então falamos sobre vários grupos de entrada e como criá-los. Também falámos de intervalos. E eu acho que estes são suficientes por enquanto. E com isso sendo dito, este é o fim deste vídeo. Vejo-te no próximo. 11. Layout: Olá e bem-vindo de volta. E neste vídeo vamos discutir layout. Então, vamos voltar. E basicamente o que vamos fazer é criar várias páginas ou várias formas de um site. E é claro que precisamos modificá-los e fazê-los parecer um site moderno. Então, primeiro de tudo, deixe-me deletar isso e ir aqui. Podemos começar criando nossa divisão. E vamos começar com a utilidade da minha margem de ginásio. E isso é basicamente, como podemos dizer, m3. Então deixe-me escrever B5. Então, em vez de especificar isso, em vez de dizer que nós, de fato, todas as bordas têm pelo menos três pixels. Podemos especificar que só precisamos do fundo. E, claro, depois de sair da divisão, podemos começar com a criação do nosso rótulo. Então entregue será, deixe-me apenas excluir o para. A classe será igual a quatro rotulados. E então temos o exemplo aqui. Agora vamos passar para o nosso lado de entrada. A entrada será digitada texto. Em seguida, a classe será o controle de forma como de costume. E, claro, deixe-me apenas criar o espaço reservado aqui. E o espaço reservado será o nome de usuário talvez. E agora, se eu voltar aqui, refrescar-me, isto é o que vamos conseguir. Agora, vamos supor que eu precise do primeiro nome e sobrenome, ou do e-mail ou senha e senha. Então, por exemplo, neste caso eu posso criar outra divisão. E neste caso, se eu atualizar agora, vou colocar essas duas divisões separadas em linhas separadas. Talvez não queiramos isso. Talvez nós só queremos que o nome de usuário seja, para ser tomado metade da página e, por exemplo, a metade do nome e o sobrenome, a segunda metade. Então deixe-me ajustar o espaço reservado para ser o primeiro nome e sobrenome. Agora volte. E este é FirstName, LastName. Agora, uma maneira de fazer isso é criar nossa nova divisão. E dentro desta divisão, coloque essas duas divisões. Então, em primeiro lugar, nossa divisão deve ser de uma linha de classe para indicar que esta é a nossa massa. E, claro, você precisa do explícito aqui. E estes são a coluna de óculos. Então estas são as nossas duas colunas dentro do nosso drone sobre atualização. E como podemos ver, temos nossas duas divisões e elas estão separadas no meio. Então, agora vamos continuar. Nossa página, então temos agora o nosso FirstName, LastName. Então eu vou simplesmente excluir isso e escrever e-mail e senha até que isso também. Então, o espaço reservado aqui, apenas excluído e, em seguida, excluir o sobrenome. Aqui temos o e-mail e a senha. Como de costume, sempre que usamos senha, o tipo de entrada será também senha. Agora, depois de criar essas duas colunas dentro de nossa unidade, podemos criar outra linha. E neste caso, você pode apenas criar outra linha aqui. Dentro desta linha, vamos dividir nossas colunas e duas, talvez três separadas. Ou deixe-me apenas adicionar o endereço primeiro de tudo e depois criar isso. Então este é o nosso drone e só temos uma coluna. E esta coluna será composta por uma entrada e o tipo será tributado. A turma será para o controle. E, claro, o espaço reservado será o endereço. Agora, se eu voltar aqui, atualizar, nós também temos o nosso endereço, mas como você pode ver, nós não temos espaço entre eles. Então talvez só adicionar um pouco de margem superior aqui. Então, dentro do nosso vidro, nós podemos, dentro desta classe de margem de linha top, talvez três. Isso é atualização suficiente. E como podemos ver, temos um pouco de espaço entre as duas entradas. Agora, voltando aqui, este é o nosso primeiro endereço. Agora, onde temos um segundo endereço, deixe-me copiá-lo e colá-lo. Então aqui nós adicionamos isso para voltar, atualizar. E como podemos ver, temos o endereço um e o endereço dois, mas talvez apenas modificá-los. Então, em vez de apenas um, podemos simplesmente escrever um exemplo de um endereço. Então, Main Street, este é o espaço reservado. E aqui podemos simplesmente adicionar o edifício e o fluxo. E como não especificamos endereços, precisamos criar nossos próprios rótulos. Então, dentro do estudioso, o rótulo será do tipo. Então, para abril e depois seguido pelo trabalho real, esse é o endereço. E, claro, deixe-me apenas copiar esta base aqui e mudar apenas para endereço, para voltar e atualizar. E como podemos ver, temos os nossos endereços. Agora, vamos adicionar a cidade, estado e CEP. E neste caso, precisamos criá-los em uma divisão e eles vão ocupar todo esse site. No entanto, precisamos dividir nosso site. E como dissemos, temos 12. Este site. Então podemos dividir este 12. Por exemplo, talvez a cidade possa levar até oito, e os outros 24, talvez cinco. Então vamos descobrir isso. Agora. Vamos voltar ao nosso código. E dentro do nosso Joe agora precisamos criar nossas colunas. Então a primeira coluna será, digamos sexo. Acho que sexo é bom. E dentro disso, vamos criar nosso conjunto M. Então o rótulo será de vidro para L1. Então isso é para rotulado. E então a gravadora seria a cidade. Em seguida, a entrada. Então tributado como de costume classe para controle e, em seguida, seguido pelo outro, o estado. E deixe-me refrescar e ver o que está acontecendo. Então esta é a nossa cidade. Levou metade da página. Ainda temos a outra metade. E neste caso, eu posso simplesmente copiar e colar de volta. No entanto, não queremos que o estado ocupe todo o resto da página que precisávamos para ocupar até quatro. Agora volte, atualize. Temos o nosso estado aqui, e finalmente seguido pelo nosso código postal. Então eu posso simplesmente copiar isso, novamente, mudança baseada, isso, atualizar, e agora temos nossa cidade, estado e CEP. Então deixe-me modificar isso. Então este é o código. Então isso é basicamente, nós também podemos modificar alguns dos elementos aqui. Então, por exemplo, se soubermos o número exato dos estados e os nomes exatos, podemos simplesmente adicionar a opção aqui. E, em seguida, sempre que o usuário apenas pressionar esta opção, todas as opções aparecem e ele pode escolher entre elas. E ele sempre pode escrever algo aqui. No entanto, como dissemos, sempre que escrevermos algo, nada acontecerá. E uma vez que não adicionamos nenhuma ação para esta forma, e eu acho que isso é suficiente. Podemos sempre adicionar um botão simples aqui, por exemplo, para enviar nosso formulário. E eu acho que este é o fim para este site. Vamos criar outro simplesmente modificando alguns dos elementos aqui. Então, por exemplo, talvez precisemos do e-mail e da senha, e então precisamos verificar algumas das opções. Então deixe-me deletar tudo isso. E dentro do nosso sorteio temos senha de e-mail e acho que não precisamos de tudo isso. Esta é a versão. Esta é a segunda divisão. Isto é lá no fundo. E agora podemos criar outro, entrar na palha. Nós vamos ter a primeira coluna e vai levar até dois dentro deste, vamos tentar algo tão span, como de costume são talvez vamos criar um rótulo. A coisa fica melhor. E a aula seria para a gravadora. Em seguida, seguido de barraca. E acho que é o suficiente por enquanto. Temos aqui o nosso cheque, deixe-me ajustar. Então, dentro da nossa coluna, sinto muito, dentro da nossa linha, vou adicionar talvez MD5. E como podemos ver, temos estes cinco. Deixe-me fazer isso de todos os lados. Agora temos o nosso cheque aqui. E, claro, vamos criar a outra coluna. E vai levar até todo o resto da página. E dentro desta coluna podemos criar algumas opções. Então vamos criar nossa caixa de bate-papo. E podemos simplesmente digitar entrada, digite caixa de seleção. E, claro, temos várias classes para adicionar. Um deles é para entrada de verificação e este é o mais importante. Volte para o fresco, temos nossa caixa de bate-papo agora. Então esta é a nossa classe e esta é a nossa opinião. Podemos sempre adicioná-lo a uma divisão e a uma classe para barracas. E então esta é a nossa divisão. E se quisermos escrever algo, por exemplo, em casa. E como podem ver, esta é a nossa primeira entrada. Pode sempre adicionar várias entradas aqui. Então, para verificá-los. E, finalmente, adicione o botão aqui, por exemplo, inscreva-se ou algo assim. E eu acho que isso é suficiente por enquanto. Você sempre pode jogar com esses elementos. Por exemplo, você pode colocá-los todos na mesma linha, ou usando os formulários embutidos. Ou você pode colocá-los, cada elemento e uma linha. E isso depende de você, como você deseja que seu site se pareça e de diferentes tipos de páginas. Dito isso, este é o fim deste vídeo. Vejo-te no próximo. 12. Componentes: Olá e bem-vindo de volta. E neste vídeo, vamos discutir alguns componentes no Bootstrap. O primeiro será o acordeão. Então deixe-me criar um para que você entenda melhor que acordeão. Então, antes de tudo, para criá-lo, como de costume, precisamos criar uma divisão. Dentro desta divisão, o vidro será o guardião. E deixe-me dar-lhe uma identificação. Então isso é acordeão. Também dentro desta divisão, vamos criar um item de acordeão. Então esse item de acordeão, esta é outra divisão. Dentro desta divisão, podemos criar o nosso acordeão. Então este é o item acordeão. Consiste em um cabeçalho e um botão. Então, para criar o headless, crie um cabeçalho H2. A turma será acordeão Hadoop. E podemos simplesmente digitar algo aqui. Então este é o item um, então seguido pelo botão e a classe, e este botão será o botão acordeão. O tipo como de costume será o botão. E então, claro, já que vamos usar o acordeão, vamos dizer algo aqui. Por exemplo, este é um item de iene frio um. E deixe-me colocá-lo aqui. Claro, exclua este item um já que acabamos de adicioná-lo ao nosso botão. Agora, se eu voltar e me refrescar, então este é o nosso acordeão. Agora, sempre que adicionarmos algo a este acordeão e pressioná-lo, ele aparecerá aqui. Então vamos criar, depois de criar o cabeçalho, vamos adicionar a divisão. Esta é a segunda divisão dentro do item. E então esta divisão, vamos dar-lhe uma classe de laboratórios de acordeão. E então, claro, deixe-me apenas criar o amigo. Então aqui a divisão será de um acordeão de classe. Mas dentro desta divisão, vamos criar o parágrafo. A Lauren. Talvez. Volte, atualize. E este é o nosso parágrafo. Agora, vamos começar a adicionar algumas idéias, já que não podemos usá-las para agora podemos fazer este parágrafo desaparecer. Então, para fazer isso, precisamos adicionar duas coisas aqui. Então dados, BS alternar para colapsar e o alvo VS. E eu dei-lhe o colapso só para adicioná-lo dentro da segunda divisão. Agora. Então aqui, dentro de nossa segunda divisão, vamos criar nosso colapso de identificação. Um, é claro. E vamos modificar isso. Aqui. Temos o ID de divisão recolher uma classe e precisamos também para escrever dados BS, pai. E neste caso, será o acordeão, que é este antes. Então esta banda será igual a. Agora. Se eu pressionar isso, ele desaparecerá. E se eu pressionar mais uma vez, ele vai apelar. E podemos fazer a mesma coisa para vários acordeões. Então podemos copiar isso mais duas vezes e jogar paga. Paga. Então deixe-me copiar. E acho que vamos voltar, refrescar-nos. Como podemos ver, temos nossos três acordeões e podemos alternar entre eles. No entanto, eles estão relacionados agora, uma vez que temos a mesma identidade e as mesmas idéias na verdade para vários itens na China dentro desses acordeão. Portanto, precisamos mudar as ideias apenas para ter certeza de que elas são completamente independentes. Então, como podem ver, se eu pressionar sobre isso, esses dois vão mudar e nós não queremos realmente que isso aconteça, então podemos simplesmente mudar essas idéias. Então, por exemplo aqui eu posso nomeá-lo de acordo com, acordo com, e então nós estamos bem. E eu acho que é isso para o acordeão. Vamos passar para os alertas. Então, o que são alertas? Na verdade, os alertas são algo que nos fornece uma mensagem de feedback para um usuário típico. Qualquer ação que realizemos. E ganhamos o usuário para receber esta mensagem. Podemos realmente fornecer-lhes esta mensagem usando a classe de alerta disponível para nós e bootstrap. E eles são na verdade um plugin JavaScript. Então as SS nazistas usam JavaScript. Então, para fazer isso, deixe-me deletar isso e começar do zero. Então vamos supor que eu queira criar um alerta. Podemos simplesmente criar nossa divisão. Dentro desta divisão, a classe que estaria alerta e outras primárias. Dentro desta divisão. Podemos tentar. A Lauren. E nós podemos realmente especificar o papel para ser o limite. Agora, vamos seguir em frente e ele aparecerá como um alerta. Agora, também podemos criar outro alerta para descartar algo. Então, por exemplo, deixe-me excluir isso e criar nossa classe que estará alerta. E dentro da nossa divisão. Vamos adicionar algumas aulas aqui. Então temos a classe de alerta, alerta e alerta dispensável. Também temos o desvanecimento e o espetáculo. Claro, o papel estará alerta. E depois de criar esta divisão, vamos criar um parágrafo. Então, dentro deste parágrafo, vou escrever Lorem sete e depois seguido pelo botão. E este será o botão X. Então digite será botão. E depois deste botão temos a classe BTN, roupas e dados, BS, demitir. Será igual a alerta. E, claro, podemos especificar o rótulo para ser igual a fechar. Agora, se voltarmos a atualizar, vamos receber este alerta de dispensa. E é JavaScript novamente, e é possível descartar qualquer alerta na linha. E assim, por exemplo, se você pressionar isso, ele desaparecerá. E assim podemos usar isso sempre que algo errado aconteceu ou o usuário acabou de inserir algo que não deve ser adicionado. Podemos apenas fazer isso aparecer e dizer, por exemplo, que isso está errado, mas apenas tente isso novamente ou tente esse método ou assim por diante. E o usuário pode pressionar o botão X e ele desaparecerá automaticamente. Então isto é para o alerta. Eu encorajo-o a ir em frente e verificá-los. Eles são legais e você pode usar tantos deles em casos diferentes. Agora, vamos passar para distintivos. Então vamos supor que temos um título. E dentro do nosso título, queremos acrescentar que este item é novo. Então suponha que eu tenha um H1 dentro deste. Temos, por exemplo, Item um, e queremos especificar que este item é nu. Uma maneira de fazer isso é ganhando o elemento span e, em seguida, adicionar a este um copo de lote. E podemos mudar a cor para que a cor de fundo seja secundária. E eu posso simplesmente adicionar novo aqui. Agora, se você voltar e atualizar, vamos ver o item um e com este novo e decidir indicar que este é um novo item. E isso é chamado de lote. Agora podemos usar, podemos usá-lo em qualquer item ou um, quaisquer elementos. Então isso é adicionar um. Você pode usá-lo para títulos de um a seis, e, claro, parágrafos, botões e assim por diante. Então deixe-me apenas demonstrar o uso dele em um botão. Então vamos supor que eu tenha um botão. Dentro deste botão. Temos o tipo aqui, é claro. E depois temos as aulas. Então btn, btn-primary. Agora podemos criar, por exemplo, vamos supor que eu queira criar o botão de notificação. Então, isso não é derrotar pacientes. E, em seguida, criar o elemento span de classe. A turma será distintivo e BG, secundário. E dentro do despacho, deixe-me acrescentar. Número específico, por exemplo, tenho nove notificações. Então volte, atualize. Nós temos essas modificações de botão. E aqui temos nosso distintivo indicando que temos nove multiplicações. Agora, também temos algumas cores de fundo que talvez queiramos mudar. Então aqui usamos o primário, temos também o sucesso secundário, perigo, advertência e, em seguida, para a luz e escuridão. Então, finalmente, nós ainda temos os crachás de pílula e eles geralmente são arredondados. Então, como podemos ver aqui, eles são EBIT aterrado, então não totalmente quadrados, mas talvez queiram como um cinto. Podemos simplesmente usar o copo de pílula baixado aqui. Então, deixa-me a ideia soar. Classe, volte e atualize. E como podemos ver, agora está contado. Então deixe-me ajustar isso só para que você possa ver mais claramente. Então este é o nosso elemento de classe span, sinto muito, modo que a classe será aterrada e o plano de fundo será primário. Agora, vamos tentar algo aqui. Então isso é primário. E volte a refrescar-se. E como podem ver, temos o nosso arredondado. Mas este é o fim para os distintivos. Agora, já que estamos usando alguns botões aqui, vamos apenas falar sobre botões. Será mais. Então. Por exemplo, este é um botão. Então, como dissemos, o tipo deve ser botão. E então as aulas que vamos usar. O btn é essencial e DBD e escolher as cores. Então eu vou escolher o primário. Então este é um botão, um, atualizar. Então este é o nosso primeiro botão. Como dissemos, temos vários tipos e vários outros. Então, por exemplo, se eu quisesse ser cavado, eu poderia simplesmente adicionar escuro aqui, atualizar. Estou pegando esse botão escuro. Agora. Suponha que eu não quero que este botão seja outro fundo, Doug, eu queria ser transparente. E neste caso eu posso usar os botões de contorno que eu já implementei antes, mas é melhor apenas dizê-lo quando estamos indo, estávamos discutindo o elemento botão. Então, neste caso, podemos usar o contorno iniciado, delineado, primário e voltar atualização. Como podemos ver, as bordas do botão estão agora azuis. No entanto, dentro é branco. E sempre que passarmos sobre ele, podemos ver que este é o efeito. Isso nos dá o efeito de um botão comum. E isto é para o botão externo. Nós também temos tamanhos. Podemos escolher o tamanho da nossa manteiga. Então, se eu voltar aqui e BTN, grande, você está de volta e atualizar. Podemos ver que o nosso botão ficou maior e também temos os óculos pequenos e capazes. E eu não vou usá-los já que eles são iguais. E eu acho que isso é suficiente sobre botões. Temos vários elementos e várias características, várias classes que podemos usar um botão. E eu aconselho você a amarrá-los sozinho e ficar realmente bom para eles para que você não precisa mais ir para a documentação. Você pode simplesmente usá-los sempre que quiser. Dito isto, este é o fim deste vídeo. Vejo-te no próximo. 13. Cartões: Olá e bem-vindo de volta. E neste vídeo vamos falar sobre cartões. Então vamos personalizar nossas próprias partes usando classes Bootstrap. E temos tantas características e tantas classes que podemos usar. Então vamos em frente e começar com o nosso primeiro. Então a primeira coisa que vamos fazer é criar nossa classe de divisão. E dentro desta divisão, a classe será uma carta já que estamos criando um guarda. E deixe-me ajustar a largura disto. Tem que ser 18 RER. E agora podemos trabalhar com descarte. Então vamos criar uma imagem. Então a imagem será imagens segundo porco. E, claro, eu posso adicionar uma alternativa, então segunda foto. E agora, se eu voltar e atualizar, você pode ver que a imagem é muito longa e precisamos ajustar isso. E, na verdade, temos uma aula em Bootstrap que nos ajudará em Deus. E esta é uma imagem atual. E agora vamos voltar e atualizar lá como podemos ver, considerar nossa imagem. E parece legal. Agora podemos adicionar algum texto aqui. Por exemplo, podemos adicionar um título e, em seguida, seguido por um parágrafo que descreve a imagem. E você pode fazer isso criando, nós podemos criar uma divisão. Dentro desta divisão, temos o título, então um e, em seguida, parágrafo, nem ele oito. E como podemos ver agora, se voltarmos e atualizarmos, teremos nosso guia chamado Lorem Ipsum, e este é o nosso parágrafo. E no entanto, nós também temos uma classe em Bootstrap para nos ajudar e fez tipo Bali e este é um cartão, mas a classe chamado amigo. Agora, se voltarmos e nos atualizarmos, podemos notar a diferença. Temos algum preenchimento da esquerda para a direita e inferior e superior. E, claro, também temos algumas aulas dentro do corpo. E um deles é o título e o outro texto do cartão SD. Então lembre-se de que você pode ignorá-los, mas se voltarmos e atualizar, você pode ver que eles ficam melhores sempre que você usa esse tipo de classes, chamado título do carro corpo e contextos. E finalmente, deixe-me adicionar talvez um link aqui. E neste link, a classe deve ser um botão, botão primário. E, claro, deixe-me tentar ir. Se atualizarmos, temos agora a nossa corrente completa. Temos a foto lá dentro. Temos o cabeçalho do parágrafo do corpo e o botão. Então este é S. Então este é o primeiro exemplo. E vamos voltar atrás e criar outro exemplo apenas para entendê-lo melhor. Talvez o nosso cartão não precise de uma imagem. Então deixe-me deletar isso. E vamos manter o corpo atual. No entanto, se não tivermos uma imagem, talvez seja uma boa escolha criar nosso cabeçalho. Então deixe-me criar o código da divisão Hadoop. E dentro disso, eu simplesmente escrevo qualquer coisa. Deixe-me ler. Este é o cabeçalho. Agora, se voltarmos e nos atualizarmos, podemos ver que não temos mais nossa imagem. No entanto, temos algo. E parece assim, o cabeçalho do nosso código. E você pode concordar que isso é muito mais agradável do que simplesmente escrever diretriz e, em seguida, escrever nossos parágrafos, agora podemos excluir nosso cartão um. E nós temos o cabeçalho aqui e o parágrafo no corpo. Agora, se voltarmos ao nosso site, podemos ver que todos os elementos de Hadar, título e parágrafo e também o botão no lado esquerdo do nosso guia. Talvez queiramos que eles estejam do lado certo ou assim. Uma maneira de lidar com isso é criar dentro do nosso título ou talvez da nossa divisão. Então aqui temos o nosso Deus. Podemos adicionar o centro de texto. E agora, se você voltar e atualizar, podemos ver que todos os elementos estão agora centralizados. E se quisermos que eles estejam no final, podemos simplesmente usar o texto e a atualização da classe. E agora estão do lado direito dos nossos carros. Agora, isso é para o básico. Como podemos criar algo mais complicado ou um pouco mais complexo? Por exemplo, se queremos criar uma navegação dentro de nossa corrente, deixe-me ir em frente e excluir isso e começar do zero. Então a primeira coisa que vamos fazer é criar nossa divisão atual. E eu vou adicionar a ele o centro de texto mais. E agora vamos criar nosso carrinho Hadoop, assim chamado. Qualquer um. Dentro do nosso cabeçalho de código, vou criar a nossa lista desordenada. Então aqui vamos criar um pequeno número. No entanto, vamos discutir isso em detalhes nos próximos vídeos. Mas, por enquanto, vamos criar nossa lista desordenada. Dentro desta lista, temos o nosso item de lista. Dentro deste item da lista temos o nosso comprimento. E este item de lista terá o item de navegação de classe. A lista não ordenada terá a classe de navegação e agora abs. Mas qualquer um dos abas. E todas essas são classes em bootstrap. E, claro, nosso comprimento, precisamos adicionar algumas aulas. Então a classe será nav link e, em seguida, este é o primeiro item da lista. Então o ferro o torna ativo. E, claro, deixe-me digitar algo anos, então em casa. E agora, se você voltar e atualizar, podemos ver que temos o nosso guia e é e toda a página. E nós temos nosso botão ou nosso primeiro item de lista de elementos aqui e ele está ativo, é chamado de casa. Agora vamos voltar e copiar este item da lista mais duas vezes. Aqui e aqui. Deixe-me mudar essa casa, talvez Missão e depois produto. Agora vamos voltar e refrescar-nos. E como podem ver, temos três itens. No entanto, não queremos que eles estejam ativos. Então deixe-me deletar isso daqui e aqui. E acho que podemos voltar e nos refrescar. E como você pode ver, este é o primeiro elemento da lista e está ativo. No entanto, todos eles ainda não estão ativos. Agora, se não queremos que a nossa guarda esteja tomando todo o nosso site, podemos adicionar o estilo e a largura será, será 18 RAM RAM. Agora vamos voltar e refrescar-nos. E este é o nosso guia. Agora, devemos adicionar algum título ou título, ano e o corpo. E, claro, você pode ajustar este pássaro como quiser. Por exemplo, se você quisesse, por exemplo, na metade da página, você pode ajustar a largura dos caras daqui. E agora vamos voltar e adicionar. Então este é o nosso cabeçalho e termina aqui. Podemos criar outra divisão chamada corpo dentro da saia amigo. Vamos criar o nosso título. Este é o pastoreio de e, em seguida, alguns parágrafo Lorem seis. Agora vamos adicionar algumas aulas aqui. Então, mais o título atual e o texto do parágrafo. Agora, se você voltar atualizar, temos o nosso código completo e este texto centrado, temos o produto de máquina doméstica. Isto está dirigindo o cartão e o gráfico de pizza que queremos. Agora, se você notar, se eu pressionar esses botões, nada acontecerá, já que não adicionamos qualquer JavaScript que possa alternar entre os átomos de cada elemento. Mas, por enquanto, temos isso como ativo e todos esses como elementos normais. Agora, temos algo que é chamado de sobreposições de imagem. E vamos em frente e criar um desses só para ver a diferença entre eles e nossa corrente normal. Então a primeira coisa que vamos fazer é criar nosso código. E fazemos isso simplesmente criando nossa divisão. E a classe seria incorrido e a cor de fundo será escura, e então detecta será branco. Agora, depois de terminar a divisão, vamos criar nossa imagem. Assim, a imagem será como a imagem antes do segundo peg. E, claro, precisamos adicionar a classe de imagem de culto. Então vamos criar nosso corpo. E fazer isso simplesmente criará uma nova divisão. No entanto, precisamos que este corpo esteja em nossa foto. E para fazer isso, simplesmente adicionamos a classe, essa sobreposição de imagem. Então volte e tente o que quisermos aqui. Então, por exemplo, este é um título. E se eu voltar e, claro, a classe título e o parágrafo seriam tributados mais baixar oito como de costume. Agora vamos voltar e refrescar-nos. E como podemos ver, temos nossa foto. E dentro desta foto temos o nosso título e parágrafo. Agora podemos sempre ajustar a largura de uma imagem simplesmente adicionando o estilo aqui. A largura para ser 18 RAM por enquanto. Agora vamos voltar e refrescar-nos. E como podemos ver, temos nossa foto e dentro dessa foto temos nosso título e parágrafo, e eles estão em cima um do outro. Agora, temos tantos outros elementos e características que podemos adicionar ao nosso guia e vamos descobri-los. E o próximo vídeo. 14. Cartões 2: Agora vamos passar para outra estrutura. E é o corte horizontal. E é feito usando uma combinação de classes de grão e utilidade. Então vamos em frente e excluir isso e começar com a criação de nosso cartão de divisão de classe de divisão. E por dentro, deixe-me dar-lhe uma margem, talvez três. E como de costume, podemos especificar a largura ao longo deste tempo. Vou usar a propriedade de largura máxima. E isso é para indicar que a largura máxima permitida é de 540 pixels. E agora podemos começar com a nossa guarda. Então a primeira coisa que vamos fazer é criar a linha dentro do nosso trabalho. Como de costume, usamos a coluna e vamos precisar dividir realmente nosso corte em duas divisões. Então deixe-me voltar aqui. E vamos supor que este é o nosso código. Vamos dividi-lo como esta área é para a nossa imagem e esta área para o nosso corpo que inclui o nosso cabeçalho e parágrafo. E para fazer isso, talvez possamos escolher dividi-lo como 48 folhas para a imagem e ajudar para todo o parágrafo, título e corpo em janeiro. Então, para fazer isso, podemos simplesmente usar a folha de coluna e adicionar nossa imagem aqui. Então imagens, segunda foto. E agora vamos criar a segunda divisão e será oito. E esta divisão incluirá o título. Esta é a atualização. E depois o parágrafo. E, claro, podemos adicionar algumas aulas aqui, como título. E, em seguida, aqui uma mensagem. Agora, acho que podemos salvar, voltar. E como podemos ver, considere esta imagem. E vamos voltar. Aqui. Esquecemo-nos da nossa aula. Então a aula será imagem, Deus danificado. E agora, se voltarmos, atualizamos, temos essa imagem e seguimos por isso, mas também esquecemos de adicionar a divisão aqui. Uma classe chamada corpo. Parece mais agradável. E, claro, vamos adicionar uma lágrima. E agora considere, vá em frente e atualize. E como podemos ver agora, se eu quiser diminuir o tamanho, nada acontecerá. No entanto, queríamos ser horizontais sempre que quiséssemos. Um emaranhado entre os tamanhos. Então aqui temos uma tela de tamanho grande. No entanto, se tivermos um tamanho médio ou menor, precisávamos que esta imagem fosse grande e o título, título e parágrafo estão abaixo dela. Então, uma maneira de fazer isso é simplesmente especificar que sempre que tivermos aqui médio e acima, isso se aplicará. E caso contrário, precisamos que nossa foto esteja no topo e, em seguida, seguido pelo título e parágrafo da cabeça. Agora, como você pode ver, se o tamanho da tela, ele se tornará horizontal. E isso é para a horizontal. Vamos em frente e começar com nossas cores de fundo. Assim, por exemplo, podemos criar nosso cartão com um fundo azul. Como podemos ver. Vamos apagar isso e começar a desenhar o álcool. Então a primeira coisa que vamos precisar é criar o código. As aulas serão tributadas de branco. Porque eu vou escolher a primária de fundo, que é principalmente azul. E, claro, vamos dar algum orçamento e desabotoado. E vamos escolher esta largura de azulejo de 18. Rem. Agora estamos bem. Podemos começar a projetar nossos cartões para que o cabeçalho cartões e retorna simplesmente direita, principal. E então dentro do cartão amigo, podemos criar o nosso título. E uma maneira de criar nossa contratação e nossas aulas ao mesmo tempo é simplesmente secar nossa posição H5 e, em seguida, pressionar sobre isso. E então seguido por b, uma classe, que é chamado Título VI tinha entrado. Ele será criado automaticamente. E eu posso simplesmente escrever aperte o parágrafo cinco. E eu esqueci de adicionar aqui o teste de aula. Agora, se eu voltar e atualizar, nós temos nosso cartão, que é azul na primária, e este é o título e o parágrafo. E nós também podemos sempre mudar isso. Então nós temos tantas cores como você sabe, nós usamos a maioria delas. E este é o escuro. E temos, como dissemos, sucesso, perigo, aviso, NFO, secundário e leve. Agora também podemos querer fazer com que apenas a borda descobrisse a cor escura. E não queremos que o pano de fundo seja lentilha só precisava ser transparente. Então, uma maneira de fazer isso é simplesmente e modificar isso para que não queiramos o plano de fundo, só precisamos que o evitado seja escuro. Volte para o fresco. Como podemos ver, temos nossa dieta na fronteira. No entanto, o nosso texto é branco e podemos vê-lo agora. Então deixe-me deletar isso. E refresque-se. E este é o nosso carrinho agora. Então isso é basicamente para as cores. Vamos passar para outro tópico, que são os cartões do Grid. Então, por exemplo, vamos supor que eu queira colocar tantos cartões no meu site. Eu posso escolher colocar 123 cartas no mesmo nível e, em seguida, seguido por três cartas ou talvez quatro cartas e, em seguida, quatro. Então, isso depende de nós. Vamos voltar e apagar e começar a criar nossas vidas. Vamos supor que eu quero que meu site tenha previsões. Então 1234. E vamos começar com isso criando nossa sonda. Então a primeira coisa que vamos fazer é criar a linha. E então dentro desta aula eu vou dar a linha um e dois, e vamos discuti-los intermitentes. Então estas são as classes e a primeira classe dentro para fora rho é coluna d. E temos o nosso código. Então esta é a divisão do cartão. Podemos adicionar nossa imagem aqui como um muito adicional. Então, dentro do nosso código, podemos adicionar o nosso guarda Buddy. Eu simplesmente adiciono o título simples. Então eu acho, e eu acho bom, bom para agora neste código, deixe-me apenas voltar, atualizar. Como podemos ver, temos isso e deixe-me apenas ajustado usando o topo da imagem. Volte, atualize. E esta é a nossa corrente até agora. Vamos adicionar outro. E simplesmente copiando essa linha inteira, coluna, sinto muito. E se eu voltar agora, tenho duas cartas. Vamos mudar a imagem. Então esta será a primeira foto. E como podemos ver, desculpe, vamos escolher outra foto. Então, talvez o terceiro. E acho que estamos bem agora. Voltamos e nos atualizamos. Temos as duas fotos. Agora, se quisermos adicionar algumas outras imagens, por exemplo, posso copiar e colar ds. Se eu refrescar. Para obter essas fotos, no entanto, deixe-me apenas voltar. Vamos ver. Então, para a coluna e isso, OK, Então este é o problema. Adicionamos uma divisão por engano aqui. E aqui. E acho que agora vamos ser maus clássicos. Eu sinto muito. Vamos deletar isso também. - Sim. Tudo bem, então agora estamos bem. Refresque. E é isso. Temos as nossas quatro cartas em 1234. E isso é tudo para as grandes cartas. Você sempre pode adicionar alguns elementos às saias de, por exemplo, aqui acabei de adicionar o título. Você pode adicionar o parágrafo e a mesma coisa vale para todos os outros cartões. E isso é basicamente o, na verdade, a última coisa que vou cobrir é o rodapé. Então, por exemplo, se eu tiver uma corrente e eu quiser adicionar um rodapé, eu posso simplesmente adicionar o copo e adicionar qualquer coisa que eu quiser. Deixe-me entrar em pequeno. Então, a classe deve ser taxada silenciada. E este é o rodapé. E eu acabei de adicionar na última foto, então eu não vou vê-lo em nenhuma dessas raízes aqui. Este é o rodapé e parece um rodapé real. E isso é basicamente para o cartão. Dito isso, este é o fim deste vídeo. Vejo-te no próximo. 15. Carrossel: Olá e bem-vindo de volta. Neste vídeo, vamos falar sobre carrossel. E estes são os slides que você pode, que você vê. Normalmente, quando você tem um site, por exemplo, um site de compras. E há tantos produtos, eles geralmente usam carrossel. E esta é a foto. E isso pode ser mudado. E você pode ir para a direita ou para a esquerda. E também muda automaticamente. E para criar isso, deixe-me deletar isso e começar. Então a primeira coisa que vamos fazer é criar nossa divisão. E será em nossas classes carrossel e tipos de terrorismo e slide. E este é um, vamos criar dentro do nosso carrossel, o carrossel. Então, há energia. É isto. E antes de esquecer, precisamos adicionar os dados BS, certo? E isso é para indicar que este é um guarda-sol. E, claro, dentro do nosso carrossel, precisamos criar os itens. Assim, o primeiro item será do item de carrossel de classe. E eu vou dar-lhe o tipo de ativo. Uma vez que este é o primeiro e será principalmente uma imagem a ser de imagens. Vou escolher crianças desta vez. Então o primeiro seria bom. E, claro, vamos adicionar algumas aulas aqui. A primeira classe será a sorte, e a segunda será quatro largura 100, apenas para torná-lo bonito. E então vamos copiar isso e colá-lo algumas vezes. E talvez você apenas três vezes faltando peças o suficiente. Agora, vamos mudar isso de ativo para normal. E isso de crianças querem ter 32. E agora acho que devemos voltar a refrescar-nos. E este é o nosso carrossel. E como podemos ver, se esperarmos um pouco, isso mudará drasticamente. E como podemos ver, mudou para a segunda imagem. E se esperarmos mais tempo, vamos conseguir o terceiro dez. Volte para o primeiro filme. Por enquanto, vamos voltar ao nosso código e ver como podemos modificar isso. Então nós realmente temos os controles. E estas são as flechas que vêm e a direita e a esquerda. E podemos adicioná-los ao nosso carrossel. E para fazer isso, podemos simplesmente adicionar dentro de nossa divisão. Então, depois de terminar a partir do nosso enter, podemos adicionar o link. E este link será. Óculos, controle de carrossel. Próximo. E, claro, o rolo será um botão e dados BS slide. E este slide será do tipo anterior, então d igual ao anterior. Então aqui temos a nossa ligação. E neste caso, vamos criar algum espaço. Então o primeiro seria carrossel controlado ícone Rebus. Este é o ícone do anterior. E, claro, deixe-me apenas dizer que a área escondida será igual a verdadeira. E depois de criar o span que cria o segundo, neste caso será o botão Anterior. No entanto, eu faço isso visualmente escondido, por isso está aqui, mas podemos vê-lo agora. Tão visualmente. E agora, para que façamos essas flechas aparecerem, precisamos vinculá-las ao nosso carrossel. E para fazer isso, simplesmente precisamos criar uma ID aqui. Então deixe-me chamá-lo de guarda-sol e talvez controles de carrossel. E, claro, precisamos vincular isso ao carrossel e aos profissionais também. E acho que podemos. No entanto, aqui nós adicionamos um ícone anterior e aqui nós o especificamos para um X. Então vamos apenas ajustar isso. Então este é um anterior também. Agora vamos voltar a refrescar. E como podemos ver, temos este botão aqui. Se eu pressionar, volto e volto mais uma vez. Agora vamos fazer a mesma coisa para a próxima. Aqui temos os controles do carrossel. E, em seguida, as classes serão uma classe realmente controle carrossel. E em seguida, a função é botão e dados, BS, slides, e será o próximo. E eu acho que agora estamos bem com apenas a necessidade de adicionar o nosso espaço. A turma será carrossel. Controle. Próximo ícone. Então, aqui estamos adicionando o próximo ícone do item. E o pedal da área também será verdadeiro. E vamos criar a segunda classe span, que visualmente tinha feito mais. E isso indicará que este é o próximo aqui. Agora, se voltarmos a atualizar, como podem ver, temos os dois. Temos o próximo e o anterior. No entanto aqui, o próximo é cometido um erro aqui, e eu vou voltar, atualizar. E agora estamos bem. Temos a direita e a esquerda. E você pode alternar entre eles. Podemos escolher ir para a direita e para a esquerda ou podemos esperar. E ele vai se alternar. E este é o fim para o carrossel. Também temos o indicador. E isso é algo que vem no final da tela. E nós podemos escolher, talvez, se tivermos talvez três fotos, ele terá três linhas aqui e podemos escolher a linha que queremos. Então vamos em frente e implementá-lo. E para fazer isso, precisamos voltar para a nossa divisão. Antes de criar o carrossel digite. Nós realmente precisamos criar a lista ordenada. E dentro disso, vamos ter os indicadores de classe Darussalam, odiadores. E acho que estamos bem. E agora vamos criar nosso item de lista. O primeiro item da lista temos os dados BS, alvo. E isso indicará para o carrossel, a identificação do carrossel. Então os controles do carrossel. E, em seguida, dados VS slide. E isso vai deslizar para o primeiro, será o slide 0, e eu vou dar-lhe a classe de ativo. E o segundo, deixe-me copiar isto e colá-lo aqui. E mais uma vez. Assim, o primeiro indicará 0, o segundo e o terceiro 22. E claro, o primeiro que só teremos será o único que tem a classe ativa. Agora, se eu voltar e atualizar, como você pode ver, nós temos essas pequenas linhas aqui. Se eu pressionar um deles para me levar automaticamente para a foto. Então, se eu pressionar aqui, eu volto para o primeiro filme. E sempre que você cria um carrossel, você só precisa de um desses. Então, ou são os controles ou os indicadores lá em baixo. E isso é para os indicadores do carrossel. Agora, vamos supor que eu precise dirigir algo aqui, talvez uma legenda. Então vamos voltar ao nosso código. Depois de criar a imagem, podemos adicionar cada item de carrossel, a legenda do carrossel, e que criamos usando a legenda do carrossel. E eu vou adicionar a classe, o nenhum e o bloco médio. Então, agora, se eu digitar algo aqui e baixo, então Parágrafo seis, se eu voltar agora e atualizar. Como pode ver, temos algo aqui. No entanto, se eu minimizar, a imagem desaparecerá. E isso é por causa dessa classe que eu adicionei aqui. Tão preto do DMD. Isso significa que isso será aplicado para qualquer coisa maior do que médio. No entanto, se chegarmos a um ponto em que temos tamanho médio, pequeno x pequeno, tamanhos de tela e 12 desaparecem automaticamente. E é isso. Podemos copiar isso e colado em itens diferentes e ele vai funcionar muito bem. Então, agora, se eu voltar e me refrescar, eu posso vê-lo aqui. Talvez mudasse o Kynar cada vez. Então talvez aqui possamos adicionar o texto escuro. Vamos voltar e refrescar-nos. E como você pode ver aqui, nós temos nossos textos na cor escura, e este é o fim para a legenda. E eu acho que isso é suficiente informação sobre carrossel já que vamos usá-lo sempre que criarmos um projeto. E com isso dito, este é o fim deste vídeo. Vejo-te no próximo. 16. Navbar: Olá e bem-vindo de volta. Neste vídeo, vamos falar sobre cochilos e abas. Nós já usamos e implementamos alguns deles nos vídeos anteriores. No entanto, neste vamos cavar mais fundo e vamos entrar nos detalhes de como criar e usar. Então, primeiro de tudo, vamos excluir tudo isso e começar. Então a primeira coisa que precisamos fazer é criar a lista não ordenada. E a turma será. Então u l dot. E esta é a nossa lista desordenada. Agora podemos criar alguns elementos de lista dentro de modo que o item nav, de modo que a classe seria nav item dentro desta classe, vamos dar-lhe um link. Dentro desta longa classe será nav item ou nav link. E este primeiro estaria ativo. E podemos adicionar isso. Então isso é atual e será igual a página. E, claro, isso é, precisamos dar um nome e esta será a página inicial ou o item inicial. Agora vamos voltar aqui. Viu o que criamos? Então, criamos esta casa. Agora, vamos criar alguns outros itens da lista. Então, no segundo será mencionado. Então. Marcas, talvez. Agora, se voltarmos e nos atualizarmos, isso é o que teremos. Então é isso para os itens de link. Podemos sempre adicionar, por exemplo, a classe desabilitada aqui. E isso é para tornar o item da lista desativado para que possamos pressioná-lo. E comparado a isso, posso pressionar marcas de casa e missão. Podemos pressionar isso. Então vamos voltar e agora vamos falar sobre o alinhamento horizontal. E uma maneira de lidar com isso, se você não quiser estar no lado esquerdo, é usar o conteúdo justify centrado. E esta é uma classe que é geralmente usada para a lista não ordenada quando você cria uma barra de navegação. Então justifique o Centro de conteúdo. Volte, atualize. E agora temos nossos elementos no centro da página. Se você quiser que eles estejam no final, eu posso simplesmente mudar isso para e voltar e atualizar. E como podemos ver agora eles estão no final. Temos também o alinhamento vertical. E neste caso, deixe-me voltar aqui. E vamos usar a aula de colarinho flexível. Então bandeiras coluna. Agora volte, atualize. E como podemos ver, agora, eles são todos verticais, então os elementos são verticais e nós também temos as abas. E isso é usado. Usando as guias de navegação de classe. Então nav guias. E se voltarmos e atualizarmos, vamos pegar as guias. E isso está desativado, já que o desativamos usando o deficiente aqui. E claro que também temos os comprimidos. E como o nome indica, precisamos usar os comprimidos de navegação. Se eu voltar e me refrescar, teremos o pulso assim. E deixa-me apagar o actor desta vez. Então vemos a diferença, atualizar. E como você pode ver, isso é ativo, isso é normal, e isso é habilitado. Agora, vamos usar o menu suspenso em nossa barra de navegação. E neste caso, temos bandas de Mission em casa. Vamos adicionar aqui, ele caiu e adicionar algumas opções. Então a primeira coisa que vamos fazer é copiar esta base aqui. E esta deve ser a lista suspensa. Caia para baixo. E, claro, sempre que criamos nosso menu suspenso, precisamos criar algumas opções. E para fazer isso, simplesmente criamos uma lista não ordenada. E a classe seria menu suspenso. Já implementamos isso antes, mas vamos incrementá-lo mais uma vez. E neste caso, vamos implementá-lo aqui e na barra de navegação. Então temos o lado do item da lista, este item, temos um link de classe e este link aponta para nada. A classe será item suspenso. E este é o item um. Então deixe-me copiar isso. Talvez duas ou três vezes 123. Então este é o item para o item três, item para e este é para a lista não ordenada. E, claro, precisamos adicionar algumas classes ao nosso link. Para mim, temos o link de navegação e a opção suspensa. Então, desligue o botão. E, finalmente, para o item da lista como um todo, precisamos adicionar a classe suspensa. E acho que estamos bem. Se eu voltar e atualizar, você vai ter este menu suspenso é eu pressioná-lo. Acho que vai acontecer. Talvez tenhamos feito um erro de digitação. Então temos uma ampulheta jogando dropdowns que eu poderia. Esquecemos de adicionar os dados. Alterne para UDL. Seja o que for que pressionamos, isso caiu. E agora podemos nos refrescar. E é isso. Nós temos nossos itens, mas eu vou pressionar na lista suspensa. Eles aparecem e mais uma vez desapareceram. Agora, uma vez que temos algumas informações sobre drop-down e barra de navegação, vamos criar um mapa completo que podemos usar em nosso site. Então a primeira coisa que vamos fazer é criar nossa divisão. E ele irá conter a barra de navegação classe e Navbar expandir em telas grandes. Tão barato. E acho que estamos bem por enquanto. Dentro da nossa turma, vamos criar o fluido do contêiner e discutiremos isso mais tarde. Mas, por enquanto, vamos escrever. Temos a ligação. E neste caso, a classe será marca navbar. E isto é Navbar. Então vamos voltar e refrescar-nos. E como podemos ver, temos nosso primeiro item em nosso primeiro elemento dentro da direita, e está aqui. Agora vamos voltar para a nossa divisão. Dentro desta divisão, vamos criar um botão. E neste caso, o botão será do tipo botão. E as aulas seriam suficientes, mas alternadas, alternadas. E, claro, temos alternância de dados. E será do tipo colapso. E agora depois de criar isso, ainda temos os dados BS e alvo. E é isso. E isto é para atingir os dados. E sempre que pressionamos, então vamos dar um nome como o conteúdo da barra de navegação. E acho que agora estamos bem. Se eu voltar aqui. Então este é o nosso botão. Vamos criar o nosso spanned. Então, dentro da nossa divisão, temos esta banda. Esta banda seria de navbar classe, ícone de borda dupla. Agora que fizemos com nossa primeira divisão ou nosso primeiro botão, vamos em frente e criar a segunda divisão. E estes serão os elementos da barra de navegação. Então deixe-me dar-lhe a classe de colapso e colapso de navbar. E Enter. Claro, precisamos adicionar o ID que usamos aqui. Então dissemos que os dados são, devemos direcionar o conteúdo da barra de navegação. Então, precisamos adicionar o conteúdo da barra de navegação ID. E, claro, dentro de nossa divisão, precisamos criar nossa lista desordenada como antes. A turma será navbar, nav. E o carro. Vamos dar alguma margem. Então MV2 e ser grande 0. Então isso é margin-bottom para telas grandes é igual a 0. E agora podemos abrir nosso item de lista, o primeiro item de lista, como item de navegação de classe usual. E dentro do nosso item da lista podemos criar o nosso comprimento. Neste caso, a área atual será igual a página. E, claro, as aulas serão link nav e o primeiro estará ativo. E esta é a nossa casa. Agora vamos copiar este par de vezes. Então este é o primeiro 1, segundo, terceiro, quarto. Então casa Missão, produto e contacte-nos. Então vamos voltar e refrescar-nos. Podemos ver que temos nossos botões aqui. E se quisermos, podemos adicionar o botão suspenso. Sempre que, como fizemos antes, sempre que pressionamos algo, algumas opções aparecem. Mas não vamos fazer isso por causa do tempo. Mas, por enquanto, acho que isso é bom. Agora vamos voltar e adicionar a pesquisa. Então, depois de terminarmos com nossas listas não ordenadas, podemos criar nosso telefone sem qualquer ação. E a classe será os atrasos. Claro, dentro da nossa forma, temos a entrada. A entrada será de pesquisa de tipo neste caso. E, claro, precisamos adicionar algumas aulas como de costume. Assim, a primeira classe será para controle e o espaço reservado. Podemos adicionar um espaço reservado para ser pesquisa via rótulo. Pesquise também. E eu acho que estamos bem com a entrada. Podemos adicionar o botão. E este botão será de classes btn, PTEN, sucesso. E o tipo será Enviar. E é claro que precisamos adicionar a pesquisa de palavras. Agora, se eu voltar e atualizar, como podemos ver, temos o nosso botão de busca e podemos Social qualquer coisa daqui. No entanto, se digitarmos qualquer coisa e pesquisa precedente, nada acontecerá, já que não adicionamos nenhuma Fontenelle ou qualquer ação. Então é isso para a barra de navegação. Você pode usar qualquer coisa que aprendemos até agora com talvez palavras, distintivos, alertas, cartões. Você pode colocar qualquer coisa dentro desta rede. E, claro, você pode dividi-los como fizemos antes. E como podem ver aqui, decidimos colocar isto no final. Se removermos a classe de defletos e voltamos a atualizar, podemos ver que não parece agradável. Temos algumas malas aqui. E esse desvio nos ajuda a manipular melhor nossa barra de navegação. Então isso é basicamente para a barra de navegação. Você pode ir em frente e tentar sozinho. Talvez você possa mudar a cor. Deixe-me só mudar a cor uma vez. Podemos decidir ou escolher a cor daqui. Então estaremos entre o escuro. Se voltarmos e nos refrescarmos. Esta é a nossa barra de navegação escura. Também podemos alterar o texto a ser alinhado. E podemos fazer isso usando o atributo escuro navbar ou vidro. Tão naff, mas escuro. E assim podemos ver a máquina caseira navbar ficou branca. Como Bootstrap sabe que estamos usando um fundo escuro, ele automaticamente transformará essas palavras em um modo branco. Agora, se voltarmos e torná-lo um pouco melhor, podemos remover o btn-success daqui, atualizar e talvez apenas escolher o btn Light. Acho que vai ser bom, fresco e parece melhor agora. Estamos usando a escuridão e a luz dentro de nossa rede. Então isso é basicamente para a barra de navegação. Você pode ir em frente e modificar, alterar qualquer coisa que você quiser, e escolher sua barra de navegação. Dito isso, este é o fim deste vídeo. Vejo você na próxima. 17. Site de Bootstrap : Navbar: Olá e bem-vindo de volta. Neste vídeo, vamos começar a construir nosso primeiro site bootstrap. E este site será completamente construído usando Bootstrap. E no final podemos adicionar alguns efeitos e alguns estilizados usando CSS. Mas, por enquanto, vamos construí-lo usando Bootstrap Andi. Então, antes de começarmos, precisamos ir ao Google e procurar Font. Incrível. E este é um site que nos permitirá usar os ícones. Então você vá em frente e se inscreva gratuitamente, crie seu primeiro get e, em seguida, vá para seus filhos a partir de sua conta e pressione sobre isso no primeiro. E depois de obter as habilidades, basta copiar o código e colá-lo dentro do seu site. E isso é tudo que você precisa fazer basicamente, agora, podemos trabalhar com fontes incríveis como quisermos, e vamos ver como podemos usar esses ícones dentro do nosso site. Então a primeira coisa que vamos criar é a barra de navegação. Permitam-me, portanto, avançar e criar um comentário. E é assim que podemos criar um momento usando HTML e número limite. E então, e agora podemos começar. A primeira coisa que vamos criar é o NADPH. E podemos criá-lo usando o elemento nav. E as aulas serão navbar, barra navegação, expandir HAT meio. E talvez usemos o fundo escuro, então VG escuro. E, claro, se vamos usar o fundo escuro, precisamos ter os decks de slides de texto ou a luz Navbar neste caso. E agora dissemos que podemos ir em frente e começar com a nossa rede. A primeira coisa que vamos criar é um ícone. Então, para fazer isso, vamos criar o link. E este link não apontaria nada até agora a classe será navbar marca. E dentro deste link podemos criar nosso ícone. E aqui precisamos dar algumas aulas. Então aqui precisamos usar alguns ícones de Font Awesome. Se voltarmos para o nosso e também página e ir para ícones, podemos procurar por mais de 7 mil ícones. Se rolarmos um pouco para baixo, encontraríamos alguns ícones disponíveis. Estes são para profissionais e você precisa de uma licença para tê-los. Então vamos usar o que está disponível para nós. E isso parece, então pressione sobre ele para tomar, para nos levar a isso. E como você pode ver, podemos usá-lo. E como um B e um Microsoft. Então vamos voltar ao nosso código e desenhado aqui f a, b, f a. E, claro, precisamos que o texto seja alerta tenso, estamos usando um fundo escuro. E vamos dar algumas aulas. Então, para dois atos, precisávamos de 2x vezes. E, claro, vamos dar alguma margem e no máximo três talvez. Então vamos voltar e atualizar nossa página. Como podemos ver, temos o nosso ícone aqui no início da nossa barra de navegação. Então, este é o fim para o ícone. Agora, vamos continuar com a nossa barra de navegação. Depois de criar nosso link, podemos criar nosso botão. Então este é o botão que será do tipo botão. E temos de lhe dar uns copos. Então barra de navegação, tabular e o fundo será leve. E também podemos adicionar a alternância de dados. E será do tempo decorrido. Claro, não queremos estragar o alvo de dados. E isso será alvo e algo que vamos criar mais tarde, mas deixe-me dar-lhe o ID nav. Agora, depois de criar o botão, podemos criar nossa expansão. E dentro do espaço. Nós vamos dar-lhe algumas classes, tais como navbar, ícone tabular, e carregado para visualizar o HTML do site. Enquanto dirigia nosso código. Vou baixar esta extensão e é um servidor ao vivo. Pode ir em frente e baixá-lo. Então, quando terminar, você pode pressionar Go Live. E o total anexa automaticamente a página Bootstrap em nosso site e ele mudará e será modificado automaticamente sempre que mudarmos alguma coisa. Então deixe-me ajustar esta página e eu acho que agora estamos bem. Então, por exemplo, se eu demorei este ícone e salvar isso, ele será automaticamente removido daqui. Mas, por enquanto, deixe-me salvá-lo novamente. Assim podemos ver que temos o nosso retorno. Então, vamos continuar. Estamos indo para a nossa primeira divisão e será do tipo suficiente ou a idéia, deixe-me apenas nomear o ID desde que nomeamos aqui dentro de nosso nervo alvo de dados. Então, vamos atacar esta divisão. E a idéia será, agora vamos adicionar algumas aulas, mas deixe-me aparecer aqui e os óculos serão o primeiro é colapso. Para entrar em colapso. E alertas Navbar. Temos também de acrescentar o justificado. Então, entre nós e estamos vendo, vamos ver o que isso vai fazer em um minuto. Mas, por enquanto, vamos adicioná-lo. E, claro, sempre que criamos nossa barra de navegação, precisamos adicionar a lista desordenada. A lista não ordenada será da classe navbar nav, e os elementos da lista serão do tipo nav itens. Então item de navegação de classe. E então abrimos uma lista desordenada, item de lista dentro. Temos o comprimento. E este comprimento será de óculos. Agora, o comprimento eo texto será fonte de luz. Ou talvez me deixe fazê-las em maiúsculas. Então texto em maiúsculas. E nós vamos adicionar o B X três só para nos dar um pouco de preenchimento. E, claro, precisamos adicionar algo no meio. Então, a primeira coisa que vamos estar em casa por clique em Salvar. E agora não podemos ver, já que temos isso. Então, se eu aumentar o tamanho, podemos ver que temos nossa casa aqui. Então vamos voltar e continuar. Vamos copiar isso um par de vezes. Então, em casa. E acho que agora com o bem, se eu mudar isso, primeira coisa que vamos acrescentar é depois do Lar ser o contato conosco ou talvez a nossa missão. E, em seguida, a última coisa que podemos adicionar SP, entre em contato conosco. E podemos adicionar aqui o nosso produto. E acho que estamos bem. Como podemos ver, temos nossos produtos de máquina doméstica e contato. Deixe-me diminuir o tamanho disso. E também isto. E agora estamos bem. Terminamos o primeiro passo da nossa barra de navegação. Então agora podemos querer adicionar o botão de pesquisa que vem aqui ou a entrada de pesquisa. E para isso, precisamos criar uma nova reforma. E sem qualquer ação, a classe será igual a quatro. Check in line. E eu estou no três. E agora, se formos e começarmos, podemos criar nossa divisão e será um grupo de entrada. E dentro de nossa divisão, podemos criar nossa primeira entrada. E os três são do tipo texto. A classe será controlada para ou controle de formulário como de costume. E o espaço reservado será simples. Apenas procure por qualquer coisa. E agora, se eu voltar e aumentar o tamanho, podemos ver que temos nossa entrada de pesquisa. Agora podemos adicionar o botão para gerar a pesquisa. Adicione-o aqui mesmo após a nossa entrada. Então esta é a divisão, e podemos adicionar uma nova divisão dentro da antiga. E D2 será texto de grupo de entrada. Então agora podemos criar nosso botão. Ele tipo será botão. Como de costume. A classe será simples, apenas btn. E dentro deste botão, podemos adicionar nossa pesquisa. Eu consigo, podemos ir do Font. Incrível. Então, se eu voltar e procurar o ícone de busca, como podemos ver, isso é surto e pressione enter. Vamos fazer essa busca. Vamos pressionar sobre isso. E este é o ícone de pesquisa. Se quisermos usá-lo, simplesmente escrevemos F a S de uma pesquisa. Então, dentro do nosso botão, precisamos criar o ícone. As aulas serão um a como uma busca. E vamos dar uma cor do texto silenciado. E se voltarmos, aumentarmos o tamanho, vamos conseguir essa busca. Então esta é basicamente, esta é a nossa barra de navegação, nosso primeiro elemento do nosso site. No próximo vídeo, vamos continuar construindo os próximos elementos, formulários e tentando mesclar as coisas para criar um site de bootstrap completo. Vejo vocês no próximo vídeo. 18. Casa e missão: Bem-vinda de volta. E neste vídeo vamos começar a criar a nossa casa e a nossa missão. Então, casa é a primeira coisa que o usuário vai ver sempre que ele entrar em nosso site. E estou pensando em algo muito simples, que é uma carta de boas-vindas. E vamos fazer isso simplesmente saindo da barra de navegação, criando a casa, uma espécie de casa e casa. Então, dentro de nossa casa, precisamos criar uma nova seção inteira. Dentro da seção temos o fluido do contêiner da divisão. Então fluido de contêiner. Dentro desta divisão, temos a nossa primeira fila. Então a linha será, vamos adicionar algumas classes para jogar. O primeiro é justificar o Benton Center. Isso é simplesmente adicionar todo o conteúdo no centro do nosso site e alinhar itens, centros. E isso para alinhar os itens no centro. E vamos dar-lhe uma altura de 100. Acho que vai ser bom. E agora vamos começar com a nossa divisão. Então a primeira coisa que vamos criar é a coluna dez. E dentro desta coluna vamos criar o cabeçalho da exibição da classe também. E, claro, o imposto deve ser capitalizado. Então eu vou usar a capitalização de impostos. E dentro de nossa direção temos nossa extensão. E deixe-me acrescentar. Olá e bem-vindo ao meu site. Se eu pressionar Salvar, vai gerar algo assim. Então, como podemos ver, este é o Bem-vindo ao nosso site. No entanto, podemos modificá-lo um pouco. Então, dentro de nosso espaço, podemos realmente adicionar a classe. E esse é o texto. Talvez vamos tentar o escuro. E este é o escuro. Então talvez imaginando, já que estamos usando o amarelo aqui, talvez usá-lo aqui. Então mensagens de aviso, eu acho que parece legal. Agora, após o aviso de texto, podemos adicionar o após o título, podemos adicionar o texto. Então parágrafo. Dentro deste parágrafo, vamos escrever algumas Lauren e algumas aulas aqui. A primeira aula vai ser texto. O texto do Clyde? - Não. Então eu acho que o escuro é bom. Então, obrigado. O Doug. E eu acho que isso é muito largo. Talvez adicionar o slide de texto. E é a mesma coisa na verdade, mas se você pode notar, vai dar um pouco de escuridão. É mais entre o branco e o cinza. E isso é basicamente para o bem-vindo por isso é muito simples. Você pode ir em frente e modificá-lo e trabalhar com ele. Mas, na verdade, eu só vou manter as coisas simples para que você possa me acompanhar. E então sempre que você teve uma chance, apenas modifique e melhore. E isto. Então, na verdade, esta é uma casa de 20. Vamos em frente e começar a criar nossa missão. Então, depois do lar, temos a missão. E depois o fim desta missão e missão. E agora vamos começar. Então a primeira coisa que precisamos fazer é criar nossa seção. E esta seção será uma missão de classe mais Michigan. E deixe-me começar com a criação da nossa primeira divisão. E esse é o fluido do recipiente. Vamos adicionar os textos secundários da classe apenas para vê-lo e visualizá-lo. E vamos adicionar algumas linhas aqui. Então BR vezes dez, atualize. E este é o segundo. Daqui. Deixe-me adicionar o, desculpe aqui precisamos adicionar o fundo. Então BG secundário. E se eu atualizar salvar, vou pegar este cinza aqui. E isto indica o fluido do contentor ou a secção da nossa missão. Então vamos começar aqui, excluir tudo isso, e começar com a criação da primeira linha. E este será o nosso título, na verdade. Então deixe-me apenas dizer que nós temos aqui o título e, e título dentro do nosso título. Podemos criar a linha. E deixe-me ajustar isso. Dentro da nossa fileira. Podemos criar a coluna. E, claro, dentro desta coluna, temos a missão. E como podemos ver, temos nossa missão aqui, mas precisamos ajustá-la. Então, dentro da nossa turma aqui temos a exibição. E, claro, precisamos que o texto seja branco. Então imposto Branco e centro de texto para estar no centro que podemos ver estamos reunidos aqui. Agora podemos escolher a cor cinza ou talvez a cor escura. Vamos tentar o escuro e depois vamos ver se precisamos trocar. Então, para fazer isso, nós simplesmente adicionamos aqui. E em vez de secundário. O texto escuro. E aqui vamos nós. Temos o nosso texto agora e o fundo, que é escuro. Agora terminando com nossa divisão. E talvez possamos adicionar algum preenchimento aqui ou margem. Então módulo três, eu acho que vai ser bom. E depois de terminar a primeira divisão, podemos adicionar nossa segunda. E este seria o parágrafo. Então, dentro desta divisão, temos o parágrafo que é de chumbo de vidro e será basicamente Lauren 25. Notei que este é um monte de Lorin, mas acho que vai fazer com que pareça bom. E isso é basicamente para o título, nós temos nossa missão e então seguido por algumas informações sobre ele. E é isso. Se eu aumentar o tamanho, acho que vai ficar bom. E agora vamos em frente e continuar criando o melhor da nossa missão. Então este é o fim do nosso título e o início da nossa missão. Então a primeira coisa que vamos criar a linha, dentro desta linha, temos a coluna talvez depois do meio será combatido e texto centrado de metas. Isto, vamos criar o nosso primeiro ícone. E, e eu não vou ir e voltar de Font Awesome e copiar o ícone, então ajustar, preparou-os antes. Assim, o primeiro será FACS um transporte rápido. Um 5X para fazer um 105 vezes maior, detecta será perigo ou talvez querer. Vamos ver. A margem inferior será para. Agora, se voltarmos e conseguirmos este transporte. Agora, depois de terminar com isso, talvez eu adicione algum texto aqui. Então, Hum será de vidro. Deixe-me dar-lhe alguma margem que o botão, e será entrega rápida. E alguns parágrafos oito. E se eu voltar ao parágrafo, vamos adicionar o texto da classe silenciado. E vamos ver, podemos ver que temos o nosso primeiro. Agora, o segundo seria a mesma coisa. Então deixe-me copiar isto e colá-lo. Então, 12. E é claro que precisamos mudar os ícones e os títulos. Então o primeiro item que eu posso ouvir é MAS, uma mão segurando USD. Então aqui F a, S, F a e segurando USD. E em vez de entrega rápida, vamos mudá-lo para os melhores preços. E, finalmente, o último será FAR FAA seta alfa, subir e qualidade superior. Então isto é basicamente, e como podem ver, esta é a nossa missão. Se formos em frente e torná-lo maior, temos nossos três ícones e três parágrafos na mesma linha. E temos a missão e o parágrafo falando sobre isso antes deles. E como você pode ver, não estamos vendo a entrega rápida, os melhores preços e a qualidade superior. Talvez precisemos fazer algo sobre eles. Então volte aqui e vejamos. Então este é o nosso H1, talvez torná-lo texto branco. E isso é entrega rápida. E faremos a mesma coisa para o outro subtexto, Branco e Branco. Agora volte, faça com que seja maior. E como podemos ver, temos a nossa missão. E estes são os nossos três ícones. Como você pode ver aqui, há pouco espaço entre os ícones e este parágrafo. Então vamos ajustar simplesmente indo para o parágrafo que acabamos de criar e simplesmente adicionar o BY restante. E se eu voltar, acho que é melhor, mas é boa ideia torná-lo maior cinco. E agora acho que estamos bem. E isso é basicamente, temos o nosso parágrafo missão, entrega rápida, melhores preços e qualidade superior. Então, isso é tudo para a missão e para a página inicial. E com isso sendo dito, este é o fim deste vídeo. Vejo-te no próximo. 19. Produtos: Agora que terminamos com nossa seção de casa e missão, podemos começar com nossa seção de produtos. Então, primeiro de tudo, deixe-me ir até o fim. E este é o fim da nossa missão. Podemos começar com a criação de um comentário. E o comentário apenas dirá que esta é a seção do produto. E então terminaremos com outro governo e produto. E agora podemos começar com a criação da nossa sessão. Então esta é a seção com o vidro, mas estofamento cinco. E dentro da seção, como de costume, começamos criando nosso recipiente, e este é o fluido contínuo. E dentro desta divisão, podemos começar criando nosso arco. E vamos dar uma olhada neste site. Eu quero que minha seção seja dividida em quatro colunas, e eu tenho quatro produtos, por exemplo. Então este é o primeiro 1, segundo, terceiro, quarto. Então, para fazer isso, vamos voltar. E dentro do nosso sorteio, podemos começar criando, em primeiro lugar, vamos começar criando o título e algumas informações, e então dividi-lo em quatro colunas. Então, dentro da primeira fila, temos o pólen. E, claro, quero que meu texto seja centralizado, então usaremos o texto centrado e a margem inferior três. Então, agora dentro do nosso padrão, vamos criar nosso rumo. Como de costume. A classe do título. As tags podem ser um aviso. Vamos ver agora. E esse é o espírito também. Certo? Produtos. E agora vamos voltar e ver. Então, este é o nosso produto apertar. E como de costume, se você quiser algum parágrafo, podemos sempre escrever alguns carregá-los. Talvez 15. E a turma será líder, texto e talvez secundária. Vamos dar uma olhada. E se salvarmos, como podemos ver, parece bom. Então agora, depois de criar a primeira parte, que é o título e o parágrafo, vamos em frente e criar a segunda parte que irá conter nossos produtos reais. Então agora isto é para o ETO. Podemos começar criando outra linha aqui. E esta linha será realmente dividida em quatro produtos. Então, são quatro colunas. E neste caso, eu simplesmente adiciono três. Uma vez que já dissemos que o nosso site é composto por 12. E se quisermos quatro partes, podemos dividir 12 por quatro. Vamos pegar três. É por isso que temos este número três aqui. Dentro disso, vamos usar as imagens das imagens. Vamos tomar primeiro BEC. E a alternativa seria projeto ou produto um. E estas não são imagens de produtos reais. Produtos. Nós já temos algumas fotos aqui para Getz e algumas fotos aleatórias. Então eu vou usá-los. Mas, por enquanto, isso é por enquanto, se você quiser criar este projeto real, você precisa mudar essas imagens. Então, isso é quanto à foto, deixe-me adicionar algumas aulas. A primeira classe será na miniatura da imagem. E eu queria ser arredondado. E agora, se começar com o nosso parágrafo, posso escolher as aulas. Vamos escolher a classe de texto silenciado. E alguns aprendem, aprendem Sx igual. Bom. Agora, volte e como podemos ver, temos nossa foto aqui com a abaixo dela. No entanto, como podemos ver, esta imagem parece muito pequena e parece boa quando abrimos a página, quando temos uma página inteira. No entanto, se estivermos usando um dispositivo, um dispositivo móvel, ele ficará assim e parece pequeno. Então precisamos lidar com isso. Uma maneira de lidar com isso é especificar que sempre que estamos usando uma tela pequena, só precisamos de duas imagens na mesma linha. E uma maneira de fazer isso é simplesmente especificar que a coluna três será apenas para telas grandes. E sempre que temos um pequeno, vamos usar uma coluna SpaceX. E isso indica que só queremos uma foto no DES. E se eu voltar para o meio, pode caber duas fotos. E sempre que eu for grande, ele vai caber para fotos. Então é isso. Agora, vamos copiar isso quatro vezes. Então isso é 1234. Mude as fotos. Então aqui temos o segundo, terceiro. E a ICANN. Escolha a imagem como a primeira. Novamente. Assim podemos ver aqui temos nossas quatro fotos. E se eu fiz a foto ou a tela maior, eles teremos duas fotos na mesma linha. E, em seguida, se eu torná-lo uma tela cheia, estaremos tendo imagens padrão ou guias padrão na mesma linha. Então, como podemos ver, criamos um site completo até agora. Temos a nossa casa Michigan produtos e contato. Esta é a página inicial, esta é a missão. E nós temos esses produtos. Você pode mudar essas fotos como você disse, para o que quiser. E no próximo vídeo vamos criar o Fale Conosco. E é claro que podemos adicionar algumas outras coisas que ajudarão você a criar um site melhor. E tenha em mente que todos estes são bootstrap pura pode ser no final, vamos adicionar algumas modificações e usando CSS ou JavaScript. Então vamos ver, mas por enquanto, vamos construir todo o nosso site a partir do bootstrap. Então, basicamente, para este vídeo, vejo você no próximo. 20. Marcas: Olá e bem-vindo de volta. E no último vídeo, terminamos de criar nossa seção de produtos. E eu estava pensando que já que temos alguns produtos, por que criar, por que não criar a parte da marca? E nesta parte da marca vamos criar alguns cartões. E vamos em frente e começar a classificá-los. Então eu vou começar por escrever o comentário, que é marca. E claro, e Rand. E agora começamos com a criação da nossa seção. E vamos dar-lhe algumas aulas. Vamos escurecer por enquanto. Então VGA escuro e algum preenchimento e o eixo y. Agora abra, comece com nosso fluido de contêiner. Como de costume. Dentro desta divisão, vamos começar criando o título. Então este é o nosso título. E este é o E e o título. E, claro, dentro deste título, temos um retirado. E vamos, já que tornamos nosso fundo escuro, vamos deixar nosso texto branco. E, claro, o título deve ser centrado dentro disso. Vamos criar nossa coluna e alguma margem. E, claro, este é o nosso título de exibição de vidro para e, em seguida, alguma margem no botão. Agora podemos escrever qualquer coisa em que marcas do que algum parágrafo. E dentro deste parágrafo, vou criar a divisão e colocar este parágrafo dentro da divisão. E a divisão terá d m antes e as classes subjacentes. O parágrafo será de vidro, chumbo e Sundaram. Agora, se voltarmos, como podemos ver, temos nossas marcas e alguns parágrafos que descrevem quais são as marcas que temos. E, claro, depois de terminar com o título, podemos começar com a criação de nossos cartões reais que manterão nossas marcas. Então, por enquanto, vamos criar a linha e, em seguida, criar a coluna. E como dissemos, se queremos que nossas colunas sejam responsivas, precisamos especificar para as telas grandes, telas o que vai acontecer. Então eu estava pensando em ter três cartas quando temos tela grande. Então, se temos essa tela grande, temos 3123. E no total Dia serão seis cartas. Neste caso, temos duas colunas e cada coluna, desculpe, duas linhas e cada linha temos três colunas. E sempre que tivermos a tela e o tamanho médio, teremos três linhas. E em cada linha vamos ter duas colunas como esta. Então vamos em frente e começar pelo Harlem. Em geral, serão quatro e em médio e maior do que pequeno para ser sexo. Então, MY F5, e eu acho que nós temos por agora dentro desta divisão, nós vamos criar nossa divisão vai estar segurando nossas cartas. Então corta. Vou adicionar a sombra atual da classe. E, claro, eu não quero nenhuma borda, então o ponteiro será 0. Então vamos em frente e criar. Nossa primeira imagem será de imagens adulto escolher a mesma imagem para todos os cartões, mas você pode alterá-lo, é claro. Então esta é a primeira classe de imagem como de costume, imagem ou dimensão atual. E então sempre que criamos nossa imagem e queremos algum texto nesta imagem, precisamos usar a classe de sobreposição. Então nossa nova divisão será sobreposição de imagem de cartão. E, em seguida, coloque o nosso parágrafo aqui. Então eu vou usar a adição de cinco. A classe será tributada em branco e texto em maiúsculas. E talvez um pouco de brotamento. E acho que estamos bem. Então esta é a primeira marca. Talvez eu simplesmente escreva primeiro Rand. E, claro, se eu for aqui, como podemos ver, temos nossa primeira marca. No entanto, não é tão visual, então podemos adicionar o fundo aqui. Podemos adicionar para o título, um fundo de secundário. E como podemos ver , agora está mais claro. E, claro, sempre que terminarmos, podemos copiar isto. Este é o nosso guia e precisamos copiar todas as nossas colunas. Então esta é a coluna 123. Agora este é o segundo e este é o terceiro. E como podemos ver, sempre que temos uma tela de tamanho médio, temos um dois na mesma linha. E se eu aumentar, vou ter três ao mesmo tempo. E, claro, se eu tiver uma tela de tamanho pequeno, Eu vou ter apenas 11 cartão. E vamos agora ir em frente e copiar isso algumas vezes. Então isso é e acho que estamos bem. Este é o quarto, quinto, sexto. E agora eu, mas tela cheia, podemos ver que temos nossos seis cartões. E estas representam as seis marcas que vendemos ou que temos. E, claro, você pode mudar as fotos e talvez mudar o lado do cartão. O parágrafo, como detecta secundário, desculpe, o fundo. E você pode fazer muitas coisas e modificar o que quiser nesses cartões. 21. Clientes: Agora que estamos feitos com o nosso produto, podemos começar com a nossa seção de clientes e a seção que vamos escrever alguns clientes devem ver. Então vamos em frente e acrescentar um novo comentário aqui. Clientes e, e clientes. Então, dentro desses comentários, dentro desses comentários, podemos começar criando nossa seção de clientes. E novamente, simplesmente abra como uma divisão. E clientes. Nós também temos algum preenchimento, então p5. E dentro da seção do cliente, podemos começar criando a carga do contêiner. E como de costume, temos o nosso título. E isso será, deixe-me apenas abrir uma nova fronteira e título. Como de costume, começamos por colocar nossa linha dentro do DO, deixe-me torná-lo um texto branco. E, claro, x, centro e divisão anexada. Dentro desta divisão, vamos criar a coluna e alguma margem. Claro, dentro desta divisão, começamos criando a classe, mas nossa exibição de cabeçalho para a margem inferior quatro. E estes são os clientes. E talvez adicionar algum texto. Então classe e abaixe-os. Talvez 14. Acho que estamos bem. Se eu voltar agora, como podemos ver, temos nossa seção de clientes, no entanto, é ampla e não podemos ver nada desde que adicionamos o texto largo. Então deixe-me lidar com isso simplesmente aplicando o escuro aqui que podemos ver que nossa seção de clientes. Agora não parece muito bom depois desta terceira seção, seção, já que ambos são Doug. Então talvez possamos mudar o texto escuro e mantê-lo branco, se quiser. Mas por enquanto, eu vou trabalhar com ele como escuro já que esta página será apenas no final. E provavelmente descartar a página um B na mesma página deste. Então este é o site inteiro. Você pode mover alguns dos elementos ou algumas das seções que criamos e para outras páginas. Por exemplo, se eu clicar na missão ou nos produtos, ele deve me levar para a missão, toda a seção de produtos. Mas, por enquanto, temos todos na mesma página. Se você acha que pode criar. E cada um deles na Página diferente e, em seguida, ligá-los juntos. Está tudo bem também. Então isso é basicamente para o título. Vamos voltar aqui. E agora vamos criar nosso carrossel que manterá a revisão de nossos clientes. Então, a primeira coisa que vamos fazer é criar os indicadores. E, claro, vamos começar realmente a criar a linha e coluna como sempre coluna e esses sexo. E eu queria estar no meio. Então eu estou usando o umax auto. E então vamos abrir. Claro, precisamos criar o carrossel. Então, antes de tudo, Teresa e eu precisávamos deslizar. E, claro, eu preciso de dados, tentou ser igual ao caráter. E já implementamos isso antes. Mas é bom lembrar disso. Vou dar-lhe uma identificação de aerossol ou cliente. Há. E acho que estamos bem. Podemos começar criando nossa própria lista de indicadores. Então isso é, e nós vamos dar algumas aulas. E estes são os indicadores do carrossel. E, claro, o item da lista será o alvo disso. Seria carrossel de clientes. Fizemos o que demos a isto. Então deixe-me só isso rapidinho. E demos personagens do elenco. Então vamos escrever hashtag. E então precisamos de dados deslize dois. E isso vai deslizar para 0. Sempre que pressionamos. E vou dar-lhe um copo de ativo. E acho que estamos bem. Então deixe-me copiar isso e colá-lo algumas vezes. Então 123. O que aconteceu? Então deixe-me voltar. Então temos um, temos o segundo e o terceiro. E é claro que eu preciso mudar alguns Eu preciso fazer alguns ajustes para que ele veja L12 eo segundo terço não precisa nós não precisamos torná-los tão ativos. E acho que estamos bem agora. Temos os nossos indicadores. Então vamos voltar e começar com o nosso aerossol entrar. Então, carrossel entra. Dentro disso, vamos criar nosso item de carrossel e o primeiro item será como de costume ativo. Então item carrossel que ativo e será. Centro de agradecimentos Então é isso. Agora temos o nosso item. Dentro deste item, vou postar uma imagem simples e será arredondada. Então eu já tenho algumas imagens sobre alguns bebês. Eu os uso para que a imagem seja imagens, é uma. E as aulas serão fluidas. E é claro que arredondamos círculo. E a margem será de cinco. E eu adicionarei a largura para ser de 150 pixels. Agora, vamos voltar aqui e ver. Como podemos ver aqui, temos nossos clientes, o parágrafo e a imagem com os indicadores. No entanto, ainda não temos nenhuma imagem seguinte ou anterior. Então vamos esperar. E é claro que precisamos escrever a entrevista real. E eu vou colocá-lo em um código de bloqueio. Então o código do bloco seria ter o código do blog da classe. E, claro, em textos será branco e nós temos a classe e dar-lhe uma margem, inferior cinco e alguns cordeiro advogado, lombo, talvez 20. Agora acho que temos algum texto e a imagem. E agora vamos voltar aqui e copiar esta divisão e colado algumas vezes. Então aqui temos a nossa divisão. Ou talvez antes de copiá-lo, talvez adicionar alguns estilos aqui para torná-lo melhor. Então, para fazer isso, basta digitar o nome da pessoa e seguido pelo namoro. De modo que simplesmente adicionado aqui, talvez um e H para a classe será textos luz. Vamos ver, X, maiúsculas já que é o nome. E margin-bottom três, será, digamos. E agora vamos criar nossa lista não ordenada. E será uma lista de turmas e uma linha já que precisamos que nossos alunos estejam na mesma linha. Então lista na linha e alguma margem. Agora vai precisar criar nosso item de lista, lista, item, lista e item de linha. E, claro, temos nossos ícones aqui. E o ícone da nossa estrela é como um começo, e será uma estrela amarela. Então vamos usar o aviso de texto. E agora eu penso, bom, bom. Então vamos esperar e temos o nosso nome, Hadi e uma estrela. Então deixe-me copiar isso quatro vezes. Então, isto é: “Sinto muito”. Deixe-me copiar e colar. 1234. Agora salve, como você pode ver, temos nossas 5 estrelas aqui, meu nome, e o que eu escrevi? Então isso não é basicamente para nossa primeira revisão. Agora precisamos copiar tudo isso e colar mais duas vezes. Então este é o nosso carrossel entrar. Vamos copiar até eu checar. Então isso é para o carro, talvez isso agora volte. Esta é a divisão que precisamos copiar. Então eu colei três vezes. E este é o único. Eu fico com dois e três. E isso é, isso agora está funcionando. E como você pode ver, cinco imprensa na mesa. Vou levar dois dias para chegar ao cliente ou dois. E este é o terceiro cliente. E se eu mantê-lo em reprodução automática, ele continuará automaticamente até que eu aceite meu site. Então isso é basicamente para o nosso guarda-sol e a seção de clientes. Dito isto, este é o fim desta secção. Vejo você no próximo vídeo. 22. Entre em contato e Footer: Olá e bem-vindo de volta. Neste vídeo, vamos continuar construindo nosso site e vamos construir nossa seção de contato. Então, para fazer isso, deixe-me ir em frente e começar uma nova seção. E este é o contato. Contato. E, e contato. Claro, começamos criando nossa seção. E dentro desta seção da classe será preenchimento cinco e será apreciado. Assim, o fundo será principalmente leve. Claro, começamos criando nosso fluido de contêiner. E como de costume, d rho dentro da linha, temos a coluna. E precisamos que o nosso texto seja centralizado. Então vamos usar o centro técnico. E assim margem no botão. Agora, depois de criar nossa coluna, podemos começar com a criação do nosso título. Isso é contato como. Então a classe seria tributada. Aviso e exibição seriam dois. E vamos simplesmente dizer entre em contato conosco. Claro que temos algum parágrafo e será chumbo e textos secundários. Então já conhecemos a maioria dessas aulas, então não há necessidade de parar em cada uma delas. Vou simplesmente escrevê-los como estou fazendo agora. E este é o nosso parágrafo. Agora, se voltarmos aqui, temos nosso contato conosco, temos algum parágrafo e terminamos com o título. Podemos começar uma nova divisão agora. Então esta divisão será depois da coluna. Então esta é a coluna e agora, ou talvez você possa iniciá-la depois do papel também. Então esta é uma nova linha. E, claro, eu quero que o conteúdo seja centrado para que eu usá-lo centro de contato justificado. Temos uma coluna e será para sexo grande e médio. Os dois oito e para os pequenos dez. Então deixe-me abri-lo e nós temos a divisão que vai tomar um centro de texto e, às vezes, anexo secundário. Então, os títulos serão perguntas. E então talvez parágrafo. Por exemplo. Pergunte-nos. E agora depois de criar esta divisão, podemos começar com a criação do nosso telefone que incluirá as entradas do usuário. Então, o telefone será de texto silenciado tipo arpanet. E não temos ação agora. Agora, dentro de nossos quatro, podemos começar com a criação do rótulo. E o rótulo será para o nosso nome. Desculpe, pelo nome de usuário. E entrada será do tipo texto para controle e nome de id. Agora, depois de criar isso, estes são o nosso rótulo e entrada. No entanto, esquecemos de adicioná-los a uma divisão. Então a divisão será de classe para grupo. E esses rótulos e entradas, eu poderia apenas copiá-los e colá-los dentro disso. E agora estamos bem. Esta é a nossa divisão para o grupo e temos o nosso nome e a entrada. E, claro, criamos outro grupo de formulários. E isso conterá o e-mail, assim rotulado para e-mail. E ele vai realmente incluir o e-mail do usuário, entrada, texto, formulário, controle e ID e-mail. Agora nós temos, nós ainda temos a última divisão e como de costume para o grupo, e isso será para a mensagem e mensagem. E agora não precisamos de uma entrada, precisamos de uma área de texto. Então eu vou usar a área de texto. Ele vai nomear, eu não preciso do nome. O ID seria a mensagem. Lanços da Bélgica. Eu realmente não preciso deles. Basta dar-lhes e a classe seria para o controle. E aqui temos nossa área de texto. Como financiamento desta divisão, precisamos adicionar o botão Submissão para que a classe seja btn. Btn. O esboço deste seria advertência e sorte BTN. E eu acho que agora nós ainda temos que fazer os tipos de reunião e submissão. Agora, se eu voltar aqui e como você pode ver, nós criamos nossos quatro, nós temos perguntas. Pergunte-nos, o usuário pode digitar este nome e, em seguida, é e-mail seguido pela mensagem. E, em seguida, esta patente que para apresentar sempre que ele pressiona este botão e ação deve ser realizada. Mas já que não sabemos qualquer JavaScript ou de volta e vamos ficar com o conhecimento que sabemos até agora. Então isso é basicamente para o. Seção de contato, que ainda tem a última seção que é o rodapé. Então vamos em frente e fazê-lo agora. Então vamos acrescentar rodapé. E assim para criar um rodapé, temos realmente a tag rodapé em HTML. E precisamos adicionar algumas classes de bootstrap para que o fundo deve ser cavado e temos algum preenchimento. No eixo X. Podemos criar nosso fluido de contêiner. E, em seguida, começar com a criação da nossa linha. E o imposto seria realmente leve com algum preenchimento no eixo y. Agora, dentro disso, podemos criar nossa coluna. E isso será para, para grande e seis para pequeno e acima. Dentro deste vai escrever o nosso título. E será sobre nós ou talvez sobre nós. Acho que é bom. Esta é a primeira parte do nosso rodapé e o texto será pequeno. Tão pequeno. E algumas Lauren, Lauren 20. Acho que poderíamos F Agora, se rolarmos para baixo, podemos ver que temos a seção sobre nós. E se eu torná-lo maior, ele estará aqui. Agora, vamos voltar. Acho que temos tantas mensagens aqui. Deixe-me apenas torná-lo menor. E agora vamos para a primeira parte da nossa divisão ou rodapé. Agora, já que terminamos nossa primeira coluna, podemos começar com a segunda. E eu quero que este seja para namorar apenas dois de 12. Isto levou quatro. Vou fazer esta fita muito grande também. E para este pequeno, será o mesmo problema que m seis. Abra lá dentro. Este será o primeiro que se dirigiria e a sarja dirá: “Visite-nos”. E então temos uma lista desordenada. E a classe será lista sem estilo. Assim, para ser movido os pontos de bala. E agora temos o item da lista. Dentro do item da lista terá um link. Aponta no mapeamento. A classe será link de rodapé. E depois temos casa. Vamos copiar isto. E talvez eu simplesmente tenha criado mais uma vez. E a classe será link de rodapé. E nós temos a missão. E finalmente, deixe-me adicionar mais um desses. E ele irá conter o, talvez os produtos. Então link rodapé e os produtos. Agora, se eu rolar para baixo, posso encontrar produtos de máquina da Casa do Visitante. Se eu fizer maior, teremos assim. E agora ainda temos metade da praia desde que consumimos papel alumínio. Aqui. E dois aqui. Então vamos voltar para baixo. E agora vamos criar a seção de ajuda. E vai levar também para definir coluna em grande também e em pequenos seis open-end H5. E isso não seria preciso de ajuda. Então preciso de ajuda. E então podemos começar com a criação da nossa lista não ordenada. A classe deve ser como de costume, lista sem estilo, sem estilo. E então podemos criar nosso item da lista como antes. Temos o nosso link de rodapé de referência e detecta será realmente maiúscula. E este é o serviço ao cliente. E então vamos copiar isso e baseá-lo algumas vezes. Então temos o serviço ao cliente, temos o suporte, e temos a condutância E. Acho que agora conseguiríamos, se descermos, temos tudo isso. E como você pode ver, temos a cerca de nós visitar-nos, precisamos de ajuda. Agora vamos fazer um pouco menor e voltar para a última seção. E nesta seção, vamos pedir ao usuário para inserir seu e-mail para permanecer conectado. Então anexe uma nova divisão. E isso levaria a última folha. Então GNL FOLDOC para pequena ferramenta dizendo seis arpanet H5. Fique conectado. E, claro, o pequeno parágrafo. Dentro deste parágrafo, temos que inserir seu e-mail para ficar conectado conosco. E então podemos criar nosso próximo telefone. E nesta forma, vamos ser um grupo de entrada D. Então, sem qualquer ação, a classe será a margem inferior três. E claro que temos nossa divisão, que é um grupo de entrada. Dentro desta divisão. Temos o texto do tipo de entrada. Então temos a classe para controle e lugar de e-mail titular. E, em seguida, temos outra divisão que irá conter a adição do grupo de entrada mais. E depois temos o botão. E o tipo será botão. Classes seria Botão BT, perigo e detecta também seria branco. E agora podemos adicionar dentro deste botão, ver você ou eu ou algo assim. Então vejo você. E agora, se eu voltar, como podemos ver, temos o nosso botão aqui. E isso é basicamente que temos sobre nós com a tarefa precisa de ajuda, ficar conectado. E o usuário pode entrar é e-mail aqui e pressione, e ele vai ficar conectado com a gente. Também podemos adicionar alguns links ou alguns ícones para a página do Facebook ou para a página do Instagram, até mesmo YouTube. Então você pode procurá-los no ícone, Fonte, ícones impressionantes, e você pode usá-los. Talvez depois do e-mail aqui. Talvez adicioná-los aqui, e então você está bem. Então isso é basicamente para o nosso projeto. Espero que goste. E eu encorajo você a ir e verificar por si mesmo e talvez modificar ou trabalhar nele. Dito isso, este é o fim deste vídeo. Vejo você. 23. Projeto: Olá e bem-vindo à seção do projeto. E nós já implementamos muitos dos formulários e componentes que estão disponíveis para nós no bootstrap. E seu projeto será realmente construir outros projetos semelhantes a este, você pode usar qualquer componente Bootstrap ou qualquer classe bootstrap que você pode achar útil e, claro, rápido para baixo. Na seção do projeto, vou fornecer-lhe isso. E este será realmente o modelo, o modelo inicial com alguns links de objetivos. No entanto, este link não estará disponível, uma vez que cada um de vocês deve ter o seu próprio bem. E este é o link para Font Awesome. Como dissemos, você deve se inscrever gratuitamente, em seguida, obter isso, obter, usá-lo em seu site. Então isso é que basicamente você deve ser capaz de fazer a maioria deles por conta própria. No entanto, se você não sentir, se sentir que você sente falta de algo, você sempre pode voltar para as palestras de vídeo e conferi-las novamente. Então, isso é basicamente, espero que você tenha gostado desta seção. E, claro, boa sorte no seu projeto. E não se esqueça de adicionar à seção do projeto que eu possa dar uma olhada nele e dar-lhe minha avaliação. Então é isso. Espero que tenha gostado de toda a aula e te veja.