Bootstrap 4 para iniciantes: programe belos sites responsivos rapidamente

1. Introdução: Ao construir sites ou aplicativos, Bootstrap é uma daquelas ferramentas que podem realmente ajudar não só iniciantes, mas desenvolvedores de todos os níveis de habilidade para começar a funcionar muito rápido. Só conhecemos um pouco de CSS e HTML. Você pode realmente criar algum projeto de aparência incrível apenas adicionando algumas classes simples para o seu HTML. Não só seus sites ficarão ótimos, também haverá totalmente responsivo, significa que não será otimizado para todos os tamanhos de tela diferentes. Quem sou eu? Meu nome é Chris e sou um desenvolvedor web e estou envolvido na construção de sites há 20 anos. Eu também tenho ensinado essas habilidades por mais de cinco anos e ativamente envolvido usando o Bootstrap desde as primeiras versões. Bootstrap é uma ótima ferramenta para iniciantes que querem bater no chão correndo, permitindo que você construa uma ótima aparência sites, que também são realmente personalizáveis. Bootstrap não é apenas sobre a aparência agora, também podemos adicionar recursos como menus suspensos, carrosséis de imagem, também a capacidade de mostrar e ocultar conteúdo e muito mais, tudo sem precisar saber sobre JavaScript. Ao longo deste curso, você aprenderá todos os conceitos-chave necessários para usar o Bootstrap. Começamos por decidir sobre seu feixe de projeto. Assim, podemos construir algo que é totalmente personalizado para você e refletir seus hobbies ou interesses. Em seguida, passar a olhar para todos os recursos essenciais do Bootstrap, que tem o sistema de grade, pontos de interrupção, utilitários, componentes e trabalhar com bibliotecas de terceiros, os ícones adicionar. Você não precisa ser um especialista em HTML, CSS ou JavaScript para começar. Tudo o que você precisa é uma compreensão básica de HTML e CSS para começar. No final desta aula, você terá todas as habilidades e conhecimentos que você precisa para construir sites de grande aparência e responsivo. Obrigado por se interessar e vamos começar com esta aula. 2. Por que usar o Bootstrap?: Talvez você tenha feito este curso e não um 100% de certeza do que é Bootstrap. Ou talvez você já tenha ouvido falar dele antes, mas não entenda completamente o papel que ele desempenha em um projeto web. Bem, agora vou dar-lhe uma visão geral do que Bootstrap pode fazer. Não vamos muito fundo no momento, já que acho que algumas coisas são melhor demonstradas à medida que vamos. Mas podemos, pelo menos, ter um entendimento básico. Quando começamos com algo novo, geralmente, a primeira coisa que queremos saber é o que exatamente é e como isso pode beneficiar nossos projetos? Com o Bootstrap, que está atualmente na versão quatro. Você pode pensar nisso como um kit de ferramentas para criar projetos HTML, CSS e JavaScript. Podemos construir sites e aplicativos usando nossas habilidades HTML e CSS existentes. Na verdade, nem precisamos saber o JavaScript antecipadamente para começar e aproveitar os recursos do Bootstrap. Com o Bootstrap, não precisamos aprender uma nova linguagem de programação. Não é uma estrutura complicada ou algo assim. É simplesmente construir sobre nossas habilidades existentes e adiciona alguns recursos agradáveis, geralmente adicionando algumas classes CSS. Assim, poderíamos pensar no Bootstrap como uma ajuda para nossos sites ou aplicativos. Podemos simplesmente colocá-la em nossos projetos e descobriremos como fazer isso muito em breve. Outra grande característica do Bootstrap é que ele é totalmente responsivo por padrão. O que significa que ficará ótimo em todos os tamanhos de tela. Então, se estamos usando um dispositivo móvel pequeno, como vemos aqui, geralmente teremos o conteúdo empilhado de cima para baixo ou verticalmente em toda a largura da tela. Assim que tivermos mais espaço disponível na tela, como um tablet ou uma área de trabalho, poderemos ter o conteúdo empilhado lado a lado, já que você tem mais largura disponível. Outra grande característica do Bootstrap é que nos permite desenvolver a um ritmo muito mais rápido. Ele faz isso nos fornecendo uma base CSS e JavaScript, que podemos deixar cair em nosso projeto e usar como um ótimo ponto de partida. O CSS base fornece alguns padrões sensatos que podemos precisar, como algum espaçamento, alguns preenchimentos e margens, e algumas cores e fontes padrão. Tudo o que usamos a partir dos arquivos CSS base e JavaScript também pode ser totalmente personalizado. Isso ocorre porque não queremos que todos os projetos Bootstrap, os que criamos, ou outras pessoas criem também, pareçam exatamente iguais. Assim, o Bootstrap nos dá a flexibilidade de modificar cada estilo ou classe que aplicamos ao nosso projeto e torná-lo completamente nosso. Outra coisa boa sobre Bootstrap é que é amigável para iniciantes. Tudo o que precisamos saber de antemão é um HTML básico e CSS. Podemos então gradualmente implementar bootstrap em nosso projeto quando precisamos dele. Na verdade, não precisamos saber qualquer JavaScript para começar com o Bootstrap, o Mobile First Styling em, e coisas como um menu suspenso, carrosséis, modais ou spinners de progresso são todos muito simples de adicionar ao nosso projeto . Nós não precisamos saber qualquer JavaScript antes de usá-lo. Então, esta é uma visão geral básica do que é Bootstrap. Claro, vai mergulhar muito mais fundo ao longo deste curso. Estou atualmente na página inicial do Bootstrap, que é getbootstrap.com. Dentro da barra de navegação na parte superior, podemos ver que estamos atualmente na versão quatro e também há referências à versão dois e três. Com a versão três ainda sendo ativamente mantida e usada em muitos lugares. Mas para este curso, vamos nos concentrar na versão quatro. Uma vez que você conhece uma versão principal, no entanto, para ser honesto, não é muito difícil usar uma versão mais recente se você precisa trabalhar em um projeto antigo. A maioria dos conceitos principais são os mesmos e a documentação é muito boa também. Também na navegação é um link de exemplos. Se nos dirigirmos para aqui, podemos ver muitos exemplos como um álbum, preços, uma página de checkout, uma página de produto e um carrossel, por exemplo, e se quisermos aproveitar qualquer um desses modelos iniciais, tudo o que precisamos fazer é clicar no exemplo. Podemos, em seguida, clicar com o botão direito do mouse e, em seguida, ir para Exibir página fonte e isso vai abrir em uma nova guia. Podemos então pegar todo o código daqui copiando e colando e levando isso para o nosso próprio projeto. Este é um arranque útil para muitos tipos de páginas e você também livre para editar conforme necessário. Se voltarmos para os modelos, podemos ver um exemplo de alguns dos componentes Bootstrap. Temos uma navegação superior com os nossos links e também a nossa caixa de pesquisa no topo. Este é um pré-construído componentes usando Bootstrap e há também muitas de nossas variedades também. Abaixo disso temos um carrossel rotativo onde podemos adicionar diferentes imagens e também texto. Podemos rolar entre eles usando esses botões esquerdo e direito. Na página anterior mostra muitos exemplos do que o Bootstrap pode fazer. Eu também vou usar muitos desses componentes enquanto passamos pelo curso. Então esta é uma aparência visual do que Bootstrap pode fazer. Mas como funciona o Bootstrap? Começamos com HTML normal. Portanto, não há novas línguas ou habilidades para aprender. A maior parte é apenas um caso de adicionar algumas classes CSS. Aqui neste slide está apenas uma lista HTML não ordenada regular com alguns itens de lista dentro. Mesmo quando se usa o Bootstrap, começamos com o mesmo HTML normal. Na parte inferior, vemos o que é exibido dentro do navegador por este HTML por padrão. Temos cinco itens da lista parecendo bastante simples e com algumas balas para cada item. Aqui está o mesmo código HTML. Mas desta vez com algumas classes Bootstrap adicionadas, a lista não ordenada tem duas classes de list-group e list-group-flush juntamente com os itens de lista que têm uma classe de list-group-item. Novamente, na parte inferior, vemos qual será a saída no navegador. Este imediato parece melhor. Temos um bom espaçamento, uma linha no meio, e também as balas foram removidas. Este é apenas um ponto de partida, portanto, se não gostarmos de algo sobre o design, ainda podemos sobrescrever qualquer parte dele com nosso próprio estilo personalizado. Bootstrap apenas nos leva a ir com alguns estilos padrão e melhores práticas, que geralmente ficam bem em todos os tamanhos de tela. Mas o que essas aulas estão fazendo exatamente? Bem, a resposta não é nada de especial. Assim como quando escrevemos uma classe de nós mesmos, isso apenas aponta para algum código CSS. Na parte inferior esquerda deste slide está o CSS Bootstrap ou a classe list-group-item. Ele apenas adicionar alguns valores para a posição, a exibição, adição, cor de fundo e borda. Novamente, podemos sempre sobrescrever qualquer coisa que não gostamos. Nós também vemos o efeito que bootstrap tem, esta é a versão final do meu projeto. Se formos clicar com o botão direito do mouse e inspecionar, isso abrirá as ferramentas do desenvolvedor. Podemos ver quando esticamos o navegador e também encolhemos. Que sem a caixa Bootstrap é totalmente responsivo. No entanto, se entrarmos na seção de cabeça e removermos o link para o CSS Bootstrap. Vou apagar este elemento. Podemos ver imediatamente que Bootstrap está sendo removido, perdemos todo o estilo e layout e também toda a capacidade de resposta que vem com Bootstrap e se recarregar, podemos ver que Bootstrap está sendo reaplicado. Então é isso que Bootstrap é e por que o usamos. Em seguida, vamos começar o nosso projeto escolhendo o seu tema. 3. Escolha o tema do seu projeto: Este projeto abrange muitas das características e componentes essenciais que o Bootstrap tem para oferecer, tais como barras de navegação, listas, uso de formulários, cartões, imagens e muito mais, tudo isso ao mesmo tempo em que começa a lidar com o sistema de grade Bootstrap e como podemos exibem nosso conteúdo para ser totalmente responsivo e ficar ótimo em todos os tamanhos de tela. Então esta é a página inicial para a versão final, que eu vou incorporar. No topo também temos uma página de preços, que aproveitará os cartões Bootstrap, juntamente com uma página de contato conosco para descobrir como podemos usar formulários no Bootstrap. Esta é apenas a minha versão do site. Você pode seguir com o mesmo projeto que eu estou construindo, que é perfeitamente bom se você só quer aprender o que Bootstrap tem para oferecer, ou em vez disso, se você tem uma certa idéia para se preocupar ou apenas se sentir um pouco criativo, você pode mudar completamente o tema e torná-lo seu próprio enquanto vamos. Tudo o que você vai precisar, além de suas idéias, são algumas imagens para usar. Se descermos até a seção, aqui agora as quatro imagens que usarei. Estes também foram fornecidos para uso com este curso. Se escolher o seu próprio tema ou design, você também pode ir em frente e encontrar algumas imagens que você deseja usar para substituir estes quatro. Se rolarmos para cima, também temos alguns ícones em uma seção e estes são fornecidos pela biblioteca de ícones Font Awesome, que vamos adicionar em breve. Você também pode facilmente alterar esses ícones para qualquer um destes que se adequarão aos seus projetos. Você também pode alterar qualquer outra coisa neste site usando um componente ou utilitário diferente, e veremos como fazer isso em breve. Então, uma vez que você tenha escolhido seu tema e tenha qualquer imagem que você gostaria de usar, podemos então passar para o próximo vídeo onde vamos começar a definir um Bootstrap em nosso editor de texto. 4. Configurando um projeto no Bootstrap 4: Como acontece com qualquer projeto de site, você precisará de um editor de texto para começar. Vou usar o Visual Studio Code, que é um ótimo editor e o que eu uso diariamente. Ele está disponível para download para Mac, Windows e Linux, e também é gratuito para usar também. Você pode baixá-lo a partir deste link aqui se você precisar ou você pode usar qualquer uma das alternativas se você preferir. Para começar a incluir Bootstrap em nosso projeto, há várias opções que podemos fundir. Temos uma CDN, podemos auto-hospedar arquivos dentro de nossos projetos, ou podemos usar um gerenciador de pacotes como yarn ou mpm. Este é provavelmente o caminho a seguir se estiver usando um nó projetos ou Ruby on Rails, ou algo que aproveite um gerenciador de pacotes. No entanto, isso não vai ser algo que vamos cobrir neste curso inicial. Em vez disso, vamos nos concentrar na opção CDN, que significa Content Delivery Network. Bootstrap nos tem coberto para usar isso realmente facilmente. Ele fornece no site do Bootstrap com um link para os arquivos JavaScript e CSS, que podemos facilmente inserir em nosso projeto. Ele tem vários benefícios para o nosso usuário final, principalmente relacionados à velocidade. Desde que o Bootstrap CDN está localizado em vários datacenters em todo o mundo. Isso significa que nossos arquivos e pastas serão enviados mais rapidamente para o usuário final porque provavelmente será um datacenter em algum lugar próximo. Isso também tem o benefício de que o datacenter também pode ter uma versão em cache dos arquivos para resultar em um desempenho ainda mais rápido. Vários datacenters também significam que nossos arquivos geralmente estarão mais disponíveis, pois, se um datacenter estiver inativo, haverá vários locais para onde voltar. Os Provedores de Entrega de Conteúdo também adicionam frequentemente algumas medidas de segurança, além de possivelmente adicionar algum balanceamento de carga para sites de alto desempenho. Outra opção é ir auto hospedado. Isso basicamente significa que baixamos uma cópia de todos os arquivos JavaScript e CSS necessários do Bootstrap. Então podemos hospedá-los dentro do nosso próprio projeto. Fazemos isso da mesma forma que faríamos com qualquer outro arquivo JavaScript ou CSS, vamos baixá-los, incluí-los dentro do diretório do nosso projeto e, em seguida, vinculá-los dentro de nossos arquivos HTML. Isso tem o benefício de nos dar o controle total de nossos arquivos e pastas e como gostaríamos de estruturá-los, onde gostaríamos de salvá-los e salvá-los em nossos próprios datacenters ou serviço. Esta é uma maneira muito rápida e fácil de começar. Bootstrap também fornece isso como um simples uso de download para cair dentro de nossos projetos. Outro benefício também, é se o nosso aplicativo se destina a ser usado offline, ainda teremos acesso a esses arquivos quando precisarmos deles. De volta à página inicial do Bootstrap, que é obter Bootstrapped.com. Agora vou começar com o Bootstrap clicando no link “Documentação”, na navegação e depois na seção “Introdução”. Este quickstart envolve os links CDN para ambos os arquivos CSS e também JavaScript que são necessários. Como alternativa, também podemos baixar Bootstrap e colocá-lo em nosso projeto também, assim como procuramos antes. Isso envolve pegar os arquivos CSS e JavaScript, colocando-os em nossa pasta do projeto e, em seguida, vinculá-los usando estilo agradável e tags de script , assim como faríamos se nós ligássemos nele para nossos próprios arquivos CSS e JavaScript. Há apenas um arquivo CSS necessário, mas como você pode ver, há três arquivos JavaScript diferentes, que precisamos incluir. Bootstrap usa JavaScript para determinados componentes e se você clicar neste menu suspenso, que é apenas aqui, podemos ver exatamente quais componentes exigem esses arquivos JavaScript. Então isso nos permitirá deixar de fora certos arquivos JavaScript se não estamos usando nenhum desses componentes aqui, agora podemos ir para incluir todos os arquivos. De alguma forma, uso completo de todos os componentes. Podemos criar nossa própria página de índice e copiar sobre todos esses links ou se rolarmos para baixo, podemos copiar o modelo iniciado a partir de baixo. Então, clique nisso. Esta é apenas uma página de índice básico onde temos nossos links para o nosso CSS e também nosso final gratuito surpreendido para incluir nosso JavaScript. Então, vamos apenas copiar. Agora vou para a área de trabalho e criar uma nova pasta para todos os projetos e, claro, você pode armazenar isso em qualquer lugar do seu sistema. Vou chamar meu projeto de “produtividade Bootstrap”. Em seguida, abra-o no Visual Studio Code arrastando sobre a pasta. O primeiro arquivo que precisamos será o nosso index.html. Vamos criar um novo nome de arquivo este index.html e, em seguida, podemos colar neste dados de antes. A primeira coisa que queremos fazer é mudar o título para ser produtividade Bootstrap ou o título de sua escolha e então podemos abrir isso dentro do navegador. A maneira como podemos fazer isso é entrar em nossa pasta do projeto e clicar duas vezes na página de índice ou no Visual Studio Code, podemos clicar com o botão direito do mouse no título e, em seguida, ir para “Copiar caminho” e, em seguida, colá-lo como uma nova guia no navegador. Tudo o que temos aqui é um cabeçalho HTML regular colocar nosso projeto agora está configurado e pronto para ir. No próximo vídeo, onde vamos descobrir como Bootstrap usa contêineres e linhas. 5. Contêineres e pontos de interrupção: Antes de olharmos para contêineres e linhas, quero ter certeza de que você tenha uma compreensão sobre pontos de interrupção e como eles podem alterar o layout e o estilo para dispositivos de tamanhos diferentes. Isso não só vai ser importante para aprender Bootstrap, mas também para entender os contêineres que vamos olhar. Vê-los em ação, podemos passar para a página inicial do bootstrap, que temos aberto aqui, e, em seguida, reduzir o navegador para baixo para uma pequena largura. Simule como o site ficaria em um pequeno dispositivo móvel. Como vemos aqui, o conteúdo geralmente é empilhado verticalmente. Somente seções ocupam toda a largura da tela. Se formos em frente e tornarmos o navegador um pouco mais amplo e assim o conteúdo muda, assim como nós os temos lá, esse salto repentino no conteúdo é chamado de pontos de quebra. Alguns dos conteúdos que vemos agora estão lado a lado. Temos o texto no lado esquerdo, no ícone à direita, agora temos mais espaço disponível na tela. Se esticarmos ainda mais o navegador, simular uma visualização da área de trabalho. De vez em quando, veremos um salto no conteúdo e esses pontos de interrupção nos permitem aplicar diferentes estilos e layouts a diferentes dispositivos de tela. Os pontos de interrupção são criados em CSS usando uma consulta de mídia. Uma consulta de mídia é basicamente uma maneira de agrupar regras CSS. O Bootstrap aplicará essas regras de estilo quando o navegador tiver uma certa largura. Bootstrap também tem uma primeira abordagem móvel, que significa que é geralmente projetado para tela pequena primeiro. Podemos então alterar as regras CSS à medida que a largura do dispositivo aumenta. Bootstrap também tem oversize para que ele usa como pontos de interrupção e que esses pontos de interrupção padrão fazer bootstrap responsivo fora da caixa. Como podemos ver aqui, Bootstrap aplicará regras CSS para diferentes dispositivos como eles se tornam uma largura mínima de 576 pixels, 768, 992 e 1200 pixels e acima. Nós também livre para antodies ou criar nossos próprios tamanhos breakpoints para. Observe para que não há nenhuma consulta de mídia para os tamanhos de dispositivo de zero a 576 pixels. Este tamanho não é necessário uma vez que este é o padrão Bootstraps qualquer maneira e, em seguida, podemos construir sobre ele com quaisquer consultas de mídia maiores, daí o nome móvel primeiro. Compreender esses pontos de interrupção também nos ajudará a entender que o sistema de grade, que vamos usar, começando com contêineres. Como um requisito quando usado com grades, adicionamos um conteúdo dentro de um recipiente. Um recipiente pode ser qualquer elemento HTML, como uma div ou uma seção, mas iria nomeá-lo classe recipiente. Podemos usar este recipiente como um invólucro principal, para que possamos controlar o conteúdo dentro adicionando coisas como preenchimento e alinhamento. Ao trabalhar com o Bootstrap versão quatro, há três tipos diferentes de contêineres que podemos usar. Podemos adicionar um recipiente como um nome de classe para qualquer elemento HTML, como uma div circundante ou uma tag seção. O nome da primeira classe, que vamos olhar é simplesmente contêiner, e um contêiner é usado para adicionar um wrapper de largura fixa ao nosso conteúdo. Por exemplo, se temos uma página web que se parece com esta, geralmente queremos dividir nossa página da Web em várias seções, então podemos querer uma seção de cabeçalho na parte superior e, em seguida, algumas ações de conteúdo logo abaixo. Usamos a classe contêiner para adicionar uma largura fixa adequada a todo o conteúdo, assim como vemos aqui. Nesta largura fixa depende dos pontos de interrupção atuais, deixando algum espaço em branco no lado esquerdo e direito. No entanto, agora se quiséssemos adicionar um recipiente que é a largura total da página, nós então fazer uso de uma classe chamada container-fluido, então este é um contêiner fluidos. Então, independentemente do tamanho da tela, se este fosse um dispositivo móvel ou um desktop ou um tablet, o contêiner sempre teria a largura total da tela, esticando para ser uma porcentagem de 100 em todos os tamanhos verdes. Há também um terceiro tipo de recipiente que podemos usar no Bootstrap também, e esta é uma mistura entre estes dois. Podemos fazer isso adicionando uma classe de contêiner combinada com um ponto de interrupção, então teríamos contêiner e, em seguida, traço, e então vamos adicionar um ponto de interrupção como sm ou md. Por exemplo, com container-md teria uma página da Web como antes. Para o menor tamanho de tela disponível, que é o acesso, o contêiner seria 100 por cento da largura total. Basicamente, para começar, seria parecido com este aqui, seria a largura total. Então, uma vez que a tela atingiu os pontos de interrupção do dispositivo de tamanho médio, ele mudaria para ter algum espaço em ambos os lados, que ele se parecesse com o contêiner normal. É assim que os contêineres funcionam em teoria, e agora vamos dar uma olhada em como podemos adicioná-los aos nossos projetos. Se voltarmos ao nosso editor de texto onde configuramos nossa página de índice, eu vou excluir o título do nível um de Olá, mundo e, em seguida, adicionar algum conteúdo inicial para trabalhar com. Vou adicionar uma seção como nosso invólucro. Aqui dentro podemos adicionar um título de nível um e eu vou dizer a lista para ser o conteúdo para a minha versão final. O texto Eu vou adicionar a solução de produtividade completa e, claro, você pode alterá-lo para se adequar aos seus projetos específicos. Em seguida, por baixo eu vou adicionar algum texto de recuperar o controle com nossas ferramentas eficazes, em uma interface simples de usar, personalizável. Finalmente, podemos terminar esta seção com um link para um botão Começar. Se agora darmos a este arquivo um salvamento e passar para o projeto no navegador, se recarregarmos, agora podemos ver o conteúdo que podemos apenas adicioná-lo. A primeira coisa que eu vou fazer é adicionar um recipiente para nossa seção wrapper e podemos fazer isso adicionando uma classe regular. O nome da classe é um quente que vincula ao nosso CSS Bootstrap, e este é o nome da classe do recipiente. Se dermos a este arquivo um salvamento e agora verificar isso no navegador recarregando, ainda temos o texto que foram adicionados antes, mas é difícil ver exatamente qual o efeito que o contêiner tem no momento, então eu vou adicionar um cor de fundo temporária. Podemos fazer isso novamente com uma classe Bootstrap de bg-dark, e isso nos dará uma cor de fundo escuro. Este fundo escuro nos dá a oportunidade de ver o recipiente de fundo com mais detalhes. Vemos à esquerda e à direita temos este ritmo branco, então este recipiente é uma largura fixa. Se reduzirmos o navegador, veremos que os pontos de interrupção farão com que o tamanho do contêiner mude para se ajustar ao espaço disponível. Nós também podemos adicionar o contêiner fluido e ver como isso parece na prática também. Recarregue o navegador e, como vimos antes no quadro branco, isso se estenderá até a largura total disponível, independentemente do tamanho da tela. O terceiro tipo de contêiner que analisamos é um link para pontos de interrupção. Se tivermos um contêiner md, isso mudará nosso tipo de contêiner em dispositivos médios, que é 768 pixels e acima. lodo encolhe o navegador para o tamanho pequeno. Podemos ver que temos um recipiente de largura total, e uma vez que chegamos aos dispositivos de tamanho médio, isso vai deixar que ele mude para ser um contêiner regular. Eu vou reintegrar isso para ser um contêiner fluido já que este é um que eu vou usar no meu projeto, mas você pode escolher o recipiente que melhor se adapte ao seu projeto. Além disso, agora entendemos o que o contêiner está fazendo. Eu também vou mudar as cores de fundo para ser leve. Tudo o que precisamos fazer é mudá-lo para ser bg-light, deixando-nos com uma cor de fundo clara como esperado. O próximo a descobrir duas partes mais importantes da grade, e é assim que usar linhas e colunas. 6. Linhas e colunas: As próximas partes do sistema de grade Bootstrap para chegar à largura das grades está usando as linhas e colunas. Ambas as linhas e colunas são adicionadas dentro de nossos contêineres, que acabamos de olhar e usado para layout de um conteúdo. Vamos começar por dar uma olhada em como podemos usar linhas dentro de nossos contêineres. No último vídeo, olhamos para os principais tipos de contêiner que podemos usar. Aqui temos uma classe de contêiner e, em seguida, abaixo disso, um fluido de contêiner aninhado dentro desses contêineres, podemos dividir nosso conteúdo em linhas. Estas são áreas de conteúdo que se estendem por toda a página. Podemos ter tantas linhas aninhadas dentro quanto quisermos. Podemos fazer isso tanto no recipiente e também o fluido traço recipiente juntamente com o recipiente usando um breakpoints padrão. Se dermos uma olhada em nossas linhas com mais detalhes, no lado direito, podemos então dividir nossas linhas em colunas. Esta é uma forma de declarar a amplitude que queremos que o nosso conteúdo esteja dentro da nossa linha. Bootstrap usa um sistema de grade de 12 colunas, o que significa que a largura da página é dividida em 12 seções. Se quisermos que o conteúdo gere a largura total disponível, declaramos que queremos que esta seja de 12 colunas de largura. Se quiséssemos dividir nossa linha em duas seções iguais, a maneira como faríamos isso se tivéssemos uma área de conteúdo à esquerda. Tem um div e depois um à direita. Podemos definir estes dois para ter seis colunas de largura, igualando 12 partes. Se quiséssemos quebrar uma linha de bolha em três partes iguais, nós configuraríamos isso para ter quatro colunas de largura. Adicione uma linha separada logo abaixo disso. Por exemplo, uma div no lado esquerdo, uma no centro e depois uma à direita. Vamos definir isso para ser quatro colunas cada. Lembre-se no início do curso, dissemos que Bootstrap por padrão é móvel primeiro e isso também se aplica a colunas também. Ao lidar com um dispositivo móvel que tem uma tela estreita como esta. Para começar, as colunas serão sempre a largura total da página. Eles sempre vão abranger toda a largura da porta de visualização. Então, depois de alguns pontos de quebra, então precisamos dizer ao Bootstrap quando sair e, em seguida, dividir-se nessas colunas assim. A maneira como fazemos isso é aplicar algumas classes Bootstrap aos seus elementos HTML, assim como fizemos com os contêineres. O que vamos fazer isso agora colocando isso em prática dentro de nossos projetos. Se dermos uma olhada no contêiner que criamos no último vídeo, temos nosso conteúdo dentro, mas não temos linhas ou colunas para estruturar esses conteúdos. Se removermos isto da nossa secção, vou agora adicionar dentro da nossa primeira linha. Podemos adicionar isso como uma classe a qualquer elemento, como um div. Podemos pedir a classe de linha, e isso vai ser um wrapper para nossas colunas para dar a todas as nossas seções algum espaçamento no meio, então eles não estão tocando um ao outro em toda a página. Aninhado dentro desta linha, agora podemos criar várias seções ocupando partes de nossa grade de 12 colunas. Se quiséssemos que isso fosse metade da largura da página, poderíamos adicionar uma classe que começa nós col, vez que estamos usando colunas, então ele declarou uma consulta de mídia, que você deseja que isso se aplique, como um dispositivo de tamanho médio. Em seguida, o número de colunas que queremos que as seções de aceitação. Nós dissemos antes que Bootstrap é projetado para ser móvel em primeiro lugar, o que significa que todas as nossas seções seria o total 12 colunas de largura por padrão. O que estamos dizendo aqui adicionando esta classe é basicamente a tela 1c está oculta. Um dispositivo de tamanho médio [inaudível] muda para ter apenas seis colunas de largura. Em seguida, aninhado dentro, podemos adicionar o conteúdo que acabamos de remover antes. Salve isso e vá para o navegador. Agora vemos que nosso conteúdo ocupa metade da largura da página. Se reduzirmos isso para ser um tamanho móvel, ele agora se torna a largura total da tela. De volta ao dispositivo de tamanho médio. Isso agora ocupará seis colunas da tela. Geralmente o conteúdo começa como a largura total. Desde que o Bootstrap é móvel primeiro, até que o vendamos de outra forma, poderíamos, naturalmente, mudar este MD no nome da classe para ser um dispositivo pequeno ou grande se quiséssemos mudar para seis colunas em um momento diferente. Agora, o topo aqui é como temos nossa seção atualmente. Está alinhado à esquerda. Estou deixando espaço no lado direito para mais seis colunas. Mas uma vez que queríamos que este conteúdo permanecesse metade da largura da tela, empurrado para o meio. Existem várias maneiras de fazer isso no Bootstrap. Algumas maneiras comuns de usar o CSS Flexbox, ou podemos usar um deslocamento, como vemos na parte inferior. Se você empurrar isso por três colunas, ele irá centralizar o conteúdo. Novamente, podemos ajustar o ponto de interrupção também. Vamos ao editor de texto e antes disso. Podemos adicionar um deslocamento. Novamente em dispositivos de tamanho médio, o muito de três colunas. Isso significará que nosso conteúdo ainda está ocupando metade do espaço, e as outras três colunas, um distribuído antes e depois. Salve e recarregue. Agora nosso conteúdo está centrado no meio da página. Novamente, se reduzirmos o navegador abaixo de dispositivos de tamanho médio, esta será sempre a largura total da página. Ainda há alguns ajustes mais finos para lidar com esta seção. Voltaremos para onde vamos olhar para as classes de utilidade. Esta é uma introdução ao uso de linhas e também colunas dentro de nossos projetos de bootstrap. Vamos praticar muito mais neste curso. Em seguida, vamos passar a dar uma olhada no uso de listas e grupos de listas. 7. Listas e grupos de listas: Agora temos uma ideia melhor de como podemos fazer uso do sistema de grade Bootstrap, agora vamos passar a adicionar mais conteúdo aos nossos projetos e, mais especificamente, vamos dar uma olhada em como podemos usar listas. Adicionar uma lista é exatamente o mesmo que qualquer outro elemento HTML regular, nós apenas adicionar nossos elementos como nós normalmente fazer, e então nós podemos melhorá-lo adicionando algumas classes bootstrap. Eu vou para a versão final que está aberta aqui. Esta é a área que adicionamos pouco antes, e vamos fazer com que pareça um pouco mais agradável assim , adicionando alguns utilitários bootstrap mais tarde. Mas agora nós vamos rolar para baixo para a próxima seção que é esta parte apenas aqui. À esquerda, vamos ter um texto e uma lista no lado direito. Nós já sabemos como criar este layout, será duas seções iguais, ambas com seis colunas de largura e como sempre, ele vai ser aninhado dentro de uma linha e um contêiner circundante. Claro, se você estiver criando sua própria versão disso, você pode adicionar conteúdo diferente ou seções de tamanhos diferentes, se preferir. Vamos empurrar e criar este grupo de lista, se você quiser saber mais sobre listas usando bootstrap e os diferentes tipos, podemos ir até a documentação e isso está disponível dentro dos Componentes. Então, se selecionarmos o grupo Lista, isso nos dará alguns exemplos como listas com bordas, lista com cores diferentes, lista sem bordas, você também pode obter horizontais e estes são úteis para barras de navegação. Mas agora eu vou para o projeto e começar criando uma nova seção logo abaixo da última. Esta seção vai ter a classe de contêiner, por isso é um tamanho fixo. Então aqui dentro eu vou criar uma div, que vai ser a nossa linha, que é o wrapper para nossas colunas. Isto vai ter duas seções ambas estas com uma classe que se torna igual à criatividade COL-MD-6. Eles aparecem lado a lado assim, novamente, apenas para recapitular, ambas as seções seriam a largura total da página em um pequeno dispositivo. Então, quando isso atinge o dispositivo de tamanho médio, ele vai então ele caiu para ser seis colunas de largura. Começando com a primeira seção, que é o texto no lado esquerdo. Vou adicionar isso dentro de um p elementos com a classe de chumbo. Lead é uma classe bootstrap que simplesmente faz o parágrafo destacar-se compromete-se, que eu vou adicionar é todos esses recursos, incluídos em todos os planos. Esta é uma seção bem simples. A próxima no lado direito da página será a seção da nossa lista. Como sempre, com o bootstrap, começamos criando nossa marcação HTML padrão. Nossa lista não ordenada e, em seguida, dentro podemos criar nossos itens de lista. Para o wrapper que é a lista não ordenada, vai receber uma classe de grupo de lista, que vamos definir a nossa lista desordenada para passar o tipo de exibição de flex, flex-direção para ser coluna. Estes são empilhados verticalmente e também irá redefinir qualquer preenchimento e margem, até o nosso item da lista. Nós vamos adicionar uma classe dentro daqui para cada item individual e este é list-grupo-item. Isso vai adicionar um pouco de borda e espaço para cada um dos nossos itens de lista. O primeiro vai ter o texto de centenas de modelos pré-construídos. Claro, personalize isso para suas necessidades também e eu vou copiar isso e colar isso em tempos antigos. O segundo teremos o texto do calendário e da programação. O terceiro será para lembretes e alertas. O quarto item da lista, que eu vou escolher vai ser listas ilimitadas e fazer páginas e, finalmente, o último vai ser o texto de rótulos personalizados ímpares para suas tarefas. Antes de irmos mais longe, vamos salvar isso e verificar isso no navegador, nos dá uma atualização. À esquerda, temos o nosso texto com a classe de chumbo e, em seguida, a seção direita, que é o nosso grupo de lista. Se clicar com o botão direito do mouse e inspecionar para ir para as ferramentas de desenvolvedor, podemos verificar as classes que tinham sido aplicadas à nossa lista. Primeiro de tudo, vamos usar inspector para passar o mouse sobre a nossa lista, vá para selecionar a lista não ordenada com a classe de grupo de listas. Como mencionado antes, este tipo de exibição ansi de flex, ele define o flex-direção e também o nosso preenchimento e margem. Se formos para baixo para o nosso item de grupo de lista, clicando sobre isso irá revelar todo o CSS que foi aplicado aos nossos itens de lista. Podemos ver o efeito se desmarcarmos essas caixas e podemos ver o efeito que tem, como também vimos antes na documentação bootstrap, a direção da coluna também pode ser alterada para uma linha se quisermos que isso seja uma horizontal menu. Vamos voltar para a nossa lista não ordenada onde podemos aplicar isso logo após este grupo. Também podemos alterar isso para ser lista de grupo horizontal e isso é útil para coisas como barras de navegação. Parece um pouco estranho porque temos alguns itens de lista longa aqui, mas é assim que podemos atualizar horizontalmente em toda a página. Se queremos remover as bordas e também esses cantos arredondados, podemos alterar isso para ser listado grupo flush. Refresque e eu vou deixar esta aula no lugar para meu projeto já que isso é algo que eu pessoalmente antes. Mas lembre-se de que depende de você como deseja estilizar seu projeto. Em seguida, vou adicionar um carrapato ao lado de cada item da lista. Assim como vemos se formos para a versão final apenas no lado esquerdo aqui, vamos adicionar isso em nossos itens de lista usando um span. O espanhol vai conter um código de entidade HTML por isso não é nada específico para bootstrap, é apenas HTML normal. Dentro de nosso item de lista, pouco antes de nosso imposto, vai adicionar um span e o código de entidade HTML é o comercial, o áspero que um valor de um, três zero quatro, e então um ponto e vírgula. Vou pegar isto e colá-lo no resto dos itens da nossa lista. Temos o tick ao lado de cada um dos nossos itens de lista no navegador. Se você quiser alterações em um ícone diferente, ou você precisa fazer é fazer uma pesquisa por códigos de entidade HTML e você não terá certeza de ter opções para escolher. Para parar também nos fornece algumas cores de fundo que você pode escolher para fazer esses itens da lista se destacam. Por exemplo, poderíamos adicionar uma segunda classe ao nosso item de lista de list-grupo-item primário. Este é um dos economistas fornecidos pelo bootstrap, e esta é uma sombra azul. Se atualizarmos o navegador e esta é uma das cores predefinidas definidas pelo bootstrap. Há também mais perto de, como perigo para vermelho, sucesso para verde, e não confira documentação do bootstrap para obter mais cores disponíveis. Incluir cores de fundo claras e escuras necessárias, que olhou mais cedo ao trabalhar com contêineres. Agora vou remover essas cores, uma vez que isso não é necessário para projetos. Podemos, é claro, incluir isto, se preferir. Então eu gostaria de encorajá-lo a ter um jogo ao redor com essas classes bootstrap, adicionando e removendo diferentes para ver exatamente o que é possível usando bootstrap. Você também pode verificar a documentação do bootstrap e ver a ampla gama de todas as classes que está disponível. Eu também encorajaria você a mergulhar nas ferramentas de desenvolvedor ao adicionar e remover classes e, em seguida, você pode ver exatamente o que está acontecendo nos bastidores. Com classes CSS foram adicionados ou removidos para aplicar o desejado e aparência. Em seguida, vamos dar uma olhada no uso de classes de utilidade, então eu vou vê-lo lá. 8. Introdução aos utilitários: Agora passamos para utilitários Bootstrap que basicamente nos ajuda a adicionar rapidamente CSS aos nossos elementos. Aqui, se clicarmos na Documentação no Bootstrap Homepage e, em seguida, ir até os utilitários dentro da barra lateral. Esta é a seção onde vamos encontrar todas as classes de utilitários que Bootstrap tem para oferecer. Estes são usados para adicionar facilmente estilo CSS comum. Se olharmos para a barra lateral, podemos usá-los para adicionar coisas como bordas, caixa flexível, posicionamento, sombras, espaçamento e muito mais. A maioria deles são auto-explicativos se você já conhece algum CSS. Por exemplo, se formos para as fronteiras, tudo o que precisamos fazer é adicionar algumas das classes Bootstrap, como a fronteira, colocar uma borda em todos os nossos elementos. Podemos adicionar bordas a um lado particular, como a parte superior ou inferior. Podemos remover bordas de certos lados e também brincar com as cores e o raio também. Como você pode ver, o Bootstrap geralmente nos fornece algumas imagens. Veja exatamente o que essas aulas estão fazendo. Também podemos clicar nas cores, e isso é exatamente o que vimos no último vídeo. Usamos a cor primária, e isso também está disponível para uso com texto também. Também temos a luz e a cor escura que olhamos anteriormente para os fundos dos nossos recipientes. Muitos desses utilitários podem ser usados em diferentes elementos também. Portanto, não estamos restritos a aprender coisas diferentes ou elementos diferentes. Nós também podemos fazer uso do CSS flexbox no Bootstrap. Podemos facilmente adicionar flexbox aos nossos elementos com o nome da classe do flex, que significa tipo de exibição de flexbox. Rolando para baixo, podemos definir as direções. Temos as colunas e linhas usuais, bem como o inverso. Também podemos justificar o nosso conteúdo. Alinhe nossos itens, e acesse qualquer uma das propriedades de caixa flexível que temos com CSS regular, ou adicionando um nome de classe a todos os elementos. Nós também temos dimensionamento se clicarmos sobre isso, onde podemos definir a altura e a largura de nossos elementos. Então, por exemplo, se quiséssemos que nosso elemento fosse de 50 por cento de largura, usaria a classe de W-50. Podemos substituir o W por um H para altura, e isso irá definir a altura do elemento para ser 50 por cento também. Também temos outras opções, como 100 por cento e 25 por cento, e vamos fazer uso de mais dessas ao longo deste curso. Como você pode ver, a maioria desses nomes se relacionam com o CSS que eles aplicam e são bastante auto-explicativos, como texto esquerdo e borda superior. Mas há um que eu quero mostrar mais detalhadamente, e este é o espaço e a utilidade. Espaço e utilitários são margem e preenchimento, e precisamos construir um nome de classe em três ou quatro partes. Então vamos dar uma olhada em como podemos fazer isso agora. Podemos aplicar utilitários de espaçamento usando Bootstrap construindo nome de classe opaco. Fazemos isso com até quatro propriedades diferentes que podemos combinar para fazer nomes de classes opacas adicionados aos nossos elementos. Então a primeira coisa que precisamos fazer é decidir se queremos adicionar espaçamento por uma margem ou preenchimento. Fazemos isso adicionando um M para a margem ou P no início do nome da nossa classe. A próxima coisa que precisamos fazer é decidir em que lado do elemento queremos aplicar o espaço. Podemos aplicá-lo ao topo do elemento, ao fundo, à esquerda, à direita, como podemos ver aqui. Ou também temos o x no eixo y. Se aplicarmos ao x, isso aplicará o espaçamento em ambos à esquerda no lado direito. O eixo y é vertical, então aplicaremos esse espaço na parte superior e inferior. Lembre-se, o Bootstrap foi construído e projetado para ser móvel primeiro. Assim, qualquer margem ou preenchimento que adicionamos por padrão, será automaticamente aplicado aos dispositivos extra pequenos sob ambos. Podemos então adicionar em um ponto de quebra opcional, como pequeno, médio, grande ou extra grande, onde queremos alterar a configuração para a margem ou preenchimento. A parte padrão é adicionar um tamanho de 0, 1, 2, 3, 4 ou 5 ou auto. Zero redefinirá qualquer margem e preenchimento e removerá isso de nossos elementos. Temos o número 3, que está no meio. Isso aplicará um espaçamento de uma RAM. Se formos mais baixos do que isso, isso é metade de uma RAM, e então o número 1 aplica um quarto da nossa RAM. O valor de quatro é igual a 1,5 RAMs e, em seguida, o valor de cinco é igual a três RAM. Temos também a opção de auto 2. Assim como CSS regular, esta é a maneira onde podemos aplicar uma margem zero auto por exemplo, e podemos fazer uso disso. Então, para o primeiro exemplo no topo aqui temos uma seção bastante padrão com um div aninhado dentro. A parte laranja do topo representa alguma margem. Então, como vemos aqui, se quiséssemos adicionar alguma margem para a div linha superior, poderíamos fazer isso construindo classe opaca. Podemos começar selecionando M porque queremos que a margem seja aplicada. Depois disso, selecionamos fora. Então, um é aplicá-lo ao topo de nossos elementos, e então podemos escolher os pontos de interrupção opcionais, ou podemos deixar isso em branco se você quiser que isso se aplique a todos os tamanhos de tela. Depois disso, selecionamos o espaçamento que queremos no final. Se queremos uma RAM, vamos para um valor de três. Para o próximo exemplo, temos uma mesma div, eu vou aplicar alguma margem para o topo e o fundo também. Assim como antes, isso é margem, então aplicamos o valor de M. Queremos que isso se aplique tanto ao topo quanto ao fundo. Então eu posso fazer uso do eixo y aqui dentro. Novamente, não vamos usar nenhum ponto de interrupção específico. Então, em vez disso, podemos adicionar um valor, você coisas para isso. Para o exemplo adicional, temos algum preenchimento que é representado pelo verde. Agora, uma vez que o preenchimento é adicionado ao interior dos elementos, nós adicionaríamos isso ao invólucro principal em vez do div, porque isso iria então aplicar o interior de nossos elementos div. Então, para este exemplo, vamos escolher P. Uma vez que estamos agora lidando com estofamento. Vamos então adicionar este o lado direito para nos cobrir aqui. Em seguida, qualquer valor que você deseja escolher. Vamos para cinco neste caso. Logo abaixo, temos algum preenchimento, mas também queremos aplicar isso no lado esquerdo e direito. Então, ao invés de escrever duas regras separadas, podemos fazer uso do preenchimento no eixo x. Então este exemplo seria preenchimento no x. novamente, podemos adicionar qualquer valor dentro aqui. Poderíamos também alterar isso para incluir pontos de interrupção. Então, se quiséssemos que o preenchimento se aplicasse apenas em dispositivos de tamanho médio e acima, poderíamos fazê-lo adicionando um terceiro argumento opcional. Assim, ele pode adicionar preenchimento no eixo x e, em seguida, traço em um ponto de ruptura de MD, e, em seguida, o valor de quatro. Na parte inferior, temos o nosso quarto exemplo, que é centralizar e elementos no meio da nossa div. A maneira que podemos fazer isso é aproveitando a propriedade auto, assim como faríamos, por exemplo, em CSS regular. Se aplicarmos a margem zero auto. Como podemos fazer isso, podemos centralizar isso no meio do eixo x com o valor de M e, em seguida, x. seguida, definir o valor para ser auto. Assim como com CSS regular ao usar a propriedade auto, precisamos estar cientes de que o tipo de exibição deve ser definido para bloquear, e devemos ter uma largura já definida, caso contrário isso não se aplicará. Então esta é a teoria por trás do uso de name-space e utilitários. Em seguida, vamos ao nosso projeto e colocar isso em prática. 9. Utilitários na prática: Voltando ao nosso projeto, a primeira coisa que vou fazer na primeira seção no topo é centralizar todo esse texto no meio. Podemos fazer isso com uma aula simples. Se voltarmos para a nossa primeira seção, dentro do wrapper, tudo o que precisamos fazer aqui é adicionar a classe all text-center. Isso empurrará todo o texto para o centro da nossa seção. Além disso, se você se lembrar de anteriormente, alinhamos a seção no meio fornecendo um deslocamento de três colunas no lado esquerdo. Isso é bom e perfeitamente bom de usar, mas agora vou mostrar-lhe uma alternativa, usando Flexbox. Se removermos o deslocamento de mais cedo, isso significa que nossa seção ainda é a mesma, seis colunas de largura, mas temos isso agora no lado esquerdo. Se esticarmos isso até o tamanho menor, esta será, naturalmente, a largura total em dispositivos menores ou médios. Vamos empurrar isso de volta para o centro adicionando a Flexbox a um contêiner. O contêiner é a linha. Podemos definir o tipo de exibição para ser flexível e também adicionar a propriedade de justificar conteúdo no centro. Salve isso e, como esperado, não vemos nenhuma alteração na tela pequena. Mas se esticarmos isso para os dispositivos de tamanho médio, isso está agora no centro de nossa seção para dar algum espaçamento. Também podemos adicionar alguma margem e preenchimento, que acabamos de olhar. Começando com a margem, nós construímos isso com m para margem, o eixo y só desaparece na parte superior e inferior e o valor de cinco, sobre o navegador. Isso se aplicará em todos os tamanhos de tela. Assim que chegarmos à visualização de tela maior, assim como aqui, na maioria das vezes vamos adicionar algum preenchimento para tornar isso um pouco maior. Isso se aplicará somente nos pontos de interrupção maiores no eixo y. Então lg, o valor de cinco. Agora, para baixo para o nosso texto, que é o elemento p. Vamos usar a classe de chumbo que você já olhou. Isso fará com que o texto do parágrafo se destaque onde você só precisa do tamanho da fonte e também do peso da fonte. Bootstrap também tem muitas classes de utilidade para botões. Podemos adicionar isso ao nosso link. A classe base que adicionamos a todos os botões é btn. Em seguida, podemos definir que tipo de botão queremos usar, juntamente com a cor. A cor é definida com os utilitários de cores que já vimos antes, como primário, secundário, perigo e sucesso. Vou usar a classe de informação, que é para uma cor azul. Podemos aplicar esta cor como uma cor de fundo sólido ou um contorno de botão. Primeiro de tudo, temos a cor sólida, que é btn, seguido pelo nome da cor da informação, deixando-nos com a cor de fundo sólida. Se quiséssemos que isso fosse apenas a cor no contorno, tudo o que precisa fazer é mudar isso para ser btn outline, seguido pela cor logo depois. Podemos então vincular esses botões à nossa página de preços, que criaremos muito em breve. Deslocar-se para baixo até a nossa próxima secção. Também podemos adicionar alguns utilitários a esta seção. Isso é suficiente com o recipiente, podemos adicionar a margem na parte superior e inferior como um valor de quatro e, em seguida, um valor de preenchimento de dois. Isso dará à nossa seção com a lista um pouco de espaçamento. A próxima coisa que eu quero fazer é alinhar esses textos verticalmente dentro desta seção. Podemos fazer isso adicionando o CSS Flexbox, o contêiner. Podemos adicionar o tipo de exibição de flex, assim como fizemos acima. Em seguida, a propriedade CSS de align-item-center, e isso agora deve empurrar nosso texto para o meio da div. Verifique isso, também parece bem na tela pequena. Agora o espaçamento foi aplicado. Esta é apenas uma primeira olhada no uso dos utilitários Bootstrap e como podemos usá-los para fazer nosso site parecer realmente bom e também ser totalmente responsivo. Também faremos uso de muito mais utilitários bootstrap à medida que progredimos com nosso projeto. 10. Adicionando ícones com o Font Awesome: Em algum momento ao construir um projeto, um site ou aplicativo, você pode sentir a necessidade de adicionar alguns ícones para torná-lo mais atraente visualmente. No passado, eu construí meus próprios ícones para projetos, mas eu não sou um designer. Então, para mim e pode ser muito mais conveniente entrar em contato uma biblioteca de terceiros para fornecer esses ícones para nós usarmos. O Bootstrap não tem sua própria biblioteca de ícones de fonte embutida na versão 4. Vou mostrar agora como podemos integrar nosso projeto com Font Awesome. Para o meu projeto, eu vou estar usando Font Awesome, que está disponível em fontawesome.com. Isso tem milhares de ícones disponíveis para nós usar e também é um plano gratuito também, que eu vou usar. Podemos começar clicando em “Iniciar gratuitamente”. Você precisa de uma conta para começar, então você precisará adicionar seu endereço de e-mail dentro desta caixa e, em seguida, clicar em “Criar” no lado direito. Já estou registrado, então não vou passar pelo processo. Tudo o que você precisa fazer é adicionar seu e-mail e você também receberá uma confirmação por e-mail. Depois de confirmar este e-mail e configurar sua conta, você será levado para uma página que se parece com esta. Uma vez configurado, isso nos dará acesso a um script que podemos copiar e adicionar isso em nosso próprio projeto. Vamos pegar isso e ir para o nosso index.html. Olhando para isso no topo da página na seção de cabeça, então eu vou apenas adicionar isso acima do CSS Bootstrap e esta é toda a configuração que precisamos fazer. Agora nós incluímos ícones em nosso projeto, nós adicionamos isso em como um elemento HTML. Voltamos para o site Font Awesome e, em seguida, clique em “Ícones” na navegação. Podemos conferir alguns dos ícones disponíveis e também clicar neles para descobrir como incluí-los. Com os planos gratuitos, há as versões sólidas e regulares de cada ícone juntamente com o código HTML que precisamos incluir em nossos projetos. Se vemos uma fonte que gostamos, tudo o que precisamos fazer é copiar o HTML e, em seguida, colar isso em nossa página de índice. Tudo o que temos aqui é elemento AI com um nome de classe. Primeiro de tudo, temos FAR, que é para Font Awesome Regular. Se escolhermos esta opção sólida, esta será FAS seguido pelo nosso nome de ícone, que é atualmente o livro de endereços. Este é o nome que precisamos mudar para cada ícone. Agora que sabemos como usar isso, vou ao nosso projeto e começar. Esta é a seção que eu vou estar criando agora usando Font Awesome. Claro, você pode alterar esses ícones para se adequar ao seu tema específico. Vamos começar com um contêiner e, em seguida, configurar nossas linhas e colunas. Na parte inferior, logo acima do nosso JavaScript, vamos criar nossa seção. Vamos ter um fluido de contêiner. Nós também vamos definir o texto para estar no centro. Se dissermos cor de fundo claro com bg-light e também definir alguma margem na parte superior e inferior, e também algum pódio. Vamos começar com um título de nível três, que vai ser o texto de Power up com um plano pago. O próximo passo é criar uma div com a linha de classe, que vai ser o recipiente para nossas seções, também alguma margem na parte superior e inferior com um valor de quatro. Então podemos ir em frente e criar nossas seções individuais. Na minha versão final, vou ter cinco seções lado a lado. Em vez de incluir nossas seções com o número de colunas, também podemos simplesmente adicionar a classe de col. Esta é uma alternativa simples que vamos usar quando queremos todas as seções sejam iguais em dispositivos de todos os tamanhos. Dentro aqui, podemos adicionar o elemento i que acabamos de ver na fonte impressionante. Podemos começar com o nome da classe para fazer o sólido do FAS. O ícone que vou usar para começar é fa_users. Outra classe que está disponível usando Font Awesome é o dimensionamento. Podemos acessar o dimensionamento com fa e, em seguida, multiplicar isso por cinco com 5x. Isso é igual a 5m e esse tamanho também está disponível até 10x. Cada uma das minhas seções também tem alguns textos logo abaixo. O primeiro é Múltiplos usuários, que eu vou adicionar em um elemento p. Em seguida, algum espaço dentro ou algum preenchimento na parte superior e inferior do nosso ícone para separar isso do nosso texto. Agora esta primeira seção está concluída. Vamos para o navegador e recarregar. Agora, já que só temos uma seção col, isso agora é colocado no centro. Quando adicionamos mais seções, todas elas ocuparão o mesmo espaço disponível. Vamos fazer isto. Agora temos mais quatro seções para adicionar. Eu vou copiar esta seção col, colar isso logo abaixo. O ícone que vou usar é a paleta com o texto da temática avançada. Isso agora deve ocupar a mesma quantidade de espaço que o primeiro. Agora só precisamos adicionar mais três. Cole outro. O terceiro ícone vai ser para o globo e o texto que está logo abaixo vai ser suporte multi-idioma. O próximo ícone será para a sincronização. Este é S-Y-N-C e o texto de sincronização em todos os dispositivos. Então, finalmente, o último será para modelos personalizáveis. Este vai ter o ícone do arquivo Alt. Vamos checar isso no navegador. Temos nossas cinco colunas iguais. Se reduzirmos isso, seções iguais tentarão manter um espaçamento igual em todos os dispositivos de tela, menos que não haja espaço suficiente disponível na tela onde elas cairão em uma nova linha. Você também pode notar uma diferença na cor do ícone para minha versão final e isso é algo que podemos definir em nossa própria folha de estilo. Assim como com qualquer final no Bootstrap, podemos aplicar nossa própria folha de estilo para substituir qualquer uma das classes. Em nosso projeto, vou criar um novo arquivo chamado como styles.css. Então, em nossa página de índice, podemos vincular isso na seção principal. Adicione nosso link abaixo do CSS Bootstrap. O caminho do arquivo é simplesmente styles.css. Podemos então abrir isto. Então tudo o que precisamos fazer é direcionar nossos ícones que é o elemento i, e então definir a cor. A cor que eu vou escolher é 40b7ad dando-nos a cor verde assim como a versão final. Adicionar ícones para um projeto ou aplicativo pode causar um grande impacto visualmente, e não precisamos ser um designer ou gastar muito dinheiro para torná-los bonitos também. Em seguida, no próximo vídeo, vamos continuar com o nosso projeto olhando para adicionar imagens e utilitários de imagem. 11. Trabalhando com imagens: Se você entendeu tudo o que fizemos até agora durante este curso, este vídeo não deve chocá-lo ou causar problemas. Vamos criar uma nova seção, mas desta vez focado em adicionar imagens. Assim como com o resto das seções de bootstrap que olhamos. Vamos começar adicionando em nosso HTML e, em seguida, podemos integrar bootstrap adicionando algumas classes CSS. No Bootstrap também podemos adicionar algum JavaScript em segundo plano também. Antes de começar a olhar para as imagens, precisamos adicionar algum pequeno projeto para trabalhar. Fornecido com este curso é uma pasta de imagens, que você está livre para usar. Ou você pode baixar o seu próprio, se preferir. Esta pasta de imagens está na minha área de trabalho e eu quero arrastar isso para a nossa pasta do projeto. Se voltarmos para a versão final e darmos uma olhada nisso. Esta é a seção de ícones que acabamos de criar. Logo abaixo, esta é a seção que vamos criar agora. Todas essas quatro imagens são fornecidas com o curso juntamente com um sample.jpg real de chamada. Isso não será incluído no projeto final, mas sim para experimentar algumas novas classes que podemos usar em imagens e podemos dar uma olhada nisso agora. Então, para o projeto, em primeiro lugar no ciber-temos nossas quatro imagens e, em seguida, temos o nosso sample.jpg. Podemos verificar isso em nosso index.html. Então vamos incluir isso em qualquer lugar na parte inferior da página. Podemos incluir uma tag HTML padrão, então isso é armazenado na pasta Imagens e, em seguida, o sample.jpg. Se agora formos para o nosso projeto, recarregar, esta é a imagem de exemplo. Se reduzirmos o navegador para um tamanho menor, você notará que a imagem desaparece da borda do navegador. Isto geralmente não é algo que queremos ver. Queremos que a imagem seja 100% da largura disponível. Podemos fazer isso adicionando uma classe bootstrap chamada fluido de imagem, que vai nos ajudar. Então, vamos adicionar isso aos nossos elementos de imagem. Então fluidos img-e agora, quando recarregamos o navegador, a imagem deve agora ser reduzida, ajustar o tamanho da tela disponível. Não vemos mais a imagem desaparecendo da borda do navegador e também há mais algumas classes que eu quero mostrar a vocês. Muitos deles não são nem específicos para imagens com o trabalho bem com imagens de qualquer maneira, como definir a largura de um elemento como uma porcentagem e isso é algo que nós olhamos antes nos utilitários. Então, podemos adicionar a largura da imagem, largura w e, em seguida, traço e como uma porcentagem e queremos experimentar o número 25. Recarregue o navegador e isso agora tem 25 por cento de largura. Nós também podemos alterar isso para overvalue, como 50,75.100, e auto. Junto com a mudança do w para ser um h2 e isso afetará a altura de um elemento. Em seguida, vou copiar e colar esta linha e, em seguida, dar uma olhada na classe arredondada. Esta classe arredondada irá aplicar cantos arredondados à nossa imagem e vamos apenas fazer isso um pouco maior, para que possamos ver mais claramente. Isso aplica o raio em todos os quatro lados. Se quiséssemos aplicar isso apenas para a parte superior, direita, inferior ou esquerda. Nós também poderíamos mudar nossa classe para ser arredondado superior, arredondado à direita, e assim por diante. Se quiséssemos que os cantos fossem totalmente arredondados, mais como um círculo, poderíamos mudar isso para ser arredondado, -círculo. Isso será mais parecido com um círculo se a imagem tiver a mesma largura e altura, mas como a imagem é mais larga, ela parecerá mais esticada. Outra opção que temos que é semelhante ao círculo é a pílula. Isso aplicará cantos arredondados e também deixará uma parte superior e inferior plana. Então vamos dar uma olhada nisso em ação, atualizar e isso nos dá a forma de uma pílula. Outro utilitário de imagem que podemos usar é a miniatura da imagem. Então isso é img-miniatura e isso irá aplicar uma borda em torno da imagem. Vamos fazer isso um pouco maior que pode ser difícil de ver. Se ampliarmos, podemos ver que a imagem tem uma borda em torno de todos os quatro lados, juntamente com um canto arredondado. Também podemos usar float com imagens também e isso também se aplica a outros elementos. Então, por exemplo, se dissemos flutuar-direito. Esta imagem agora fluirá para a direita do resto do conteúdo. Então isso é apenas um gostinho do que podemos fazer com imagens. Como mencionado anteriormente, algumas dessas classes, juntamente com outras, se aplicam a muitos elementos diferentes, então não estamos restritos a usá-las apenas com imagens. Agora vamos colocar isso em prática dentro de nossos projetos construindo uma nova seção. Vamos remover essas imagens de exemplo e como sempre vamos começar com uma seção que vai ter uma classe. Desta vez eu vou apenas usar a classe recipiente, então não é o tamanho do fluido e, em seguida, também alinhar o texto no centro. Além disso, como com as outras seções, sinta-se livre para fazer isso que você possui e incluir qualquer imagem ou texto diferente que você preferir. Aninhados dentro temos a nossa fileira. Esta linha vai ser dividida em duas seções iguais em dispositivos médios. Vamos em frente e adicionar nossos nomes de classe col-md-6 e podemos duplicar isso dentro de nossa primeira linha. Vamos começar a trabalhar com a primeira seção. Então, isso estará no lado esquerdo em dispositivos médios e acima. Um título de nível dois, que é para o texto do calendário multi-view. Então este vai ser o título para a nossa primeira imagem de no site acabado. Este é o texto que você vê aqui, seguido de elementos AP e, em seguida, nossa imagem. Isso também é o mesmo nos tamanhos de tela mais largos. Mas em vez disso, temos estes lado a lado. Então, após o nosso cabeçalho, podemos adicionar um elemento p com uma classe que usamos antes de chumbo. Isso fará com que o nosso texto se destaque e um texto de nunca mais perca um encontro. Na parte inferior, podemos adicionar a nossa imagem, que é armazenada na pasta de imagens. No primeiro que eu vou usar é o calendar.png, o texto antigo do ícone do calendário e, em seguida, o nome da classe vai ser w 50, para fazer 50 por cento de largura. Então esta é a nossa primeira seção, então eu vou copiar o nosso cabeçalho, nosso parágrafo e também a nossa imagem e, em seguida, descer para a nossa segunda seção, neste final. O texto neste é flexível para fazer listas e eu vou apenas fazer isso um capital, a tag principal vai ser: tarefas claras como um profissional. A imagem, desta vez vai ser para a nossa lista e não se esqueça de mudar o texto antigo também. Então, antes de irmos mais longe com a nossa linha, vamos verificar se tudo parece bem e esta é a nossa primeira linha, agora completa. Voltando ao nosso editor de texto, vamos criar uma segunda linha. Vamos começar pegando nosso primeiro, já que a estrutura será a mesma. Podemos colar isso em, ainda dentro de nossa seção e como antes, tudo o que precisamos fazer é mudar nosso texto e a imagem. Assim, o texto é colaborar e, em seguida, trabalhar com todos os membros da equipe. A imagem é para o bate-papo e também alterar o texto antigo também, as aulas podem permanecer as mesmas e o para telefone, nível dois título é tomar nota. O texto principal é tomar notas em movimento e a imagem é nota junto com os textos antigos também. Então tudo isso parece bom, agora temos nossas duas seções dentro de nossas fileiras. Vamos para o navegador e ver como isso está parecendo. Então isso parece bom nas telas maiores. Vamos encolher isso. Isso está ótimo, talvez apenas um estofamento na parte superior e inferior de nossas seções. Podemos fazer isso em nossas divs circundantes logo após call-md-6 pudim y. vamos para um valor de quatro e podemos fazer isso igual em todas as quatro de nossas seções. pudim y4 e também o último também, atualizar e estas são as nossas imagens agora adicionadas ao nosso projeto. Ótimo, então agora você sabe como aplicar estilo a imagens com Bootstrap. Uma das grandes coisas também, assim como muitas das aulas que acabamos aprender também se aplicarão a outros elementos também. Não estamos restritos a usá-los apenas com imagens. Finalmente, não se sinta como se precisasse memorizar todas essas aulas à medida que avançamos. Se você ficar preso, tudo o que você precisa fazer é usar a documentação do Bootstrap como referência. 12. Linhas aninhadas e citações de blocos: Ao trabalhar com nossos projetos até agora, temos olhado para uma estrutura como esta. Adicionamos linhas dentro de nossos projetos. Então dividimos nossas linhas em números de colunas. Por exemplo, tivemos uma seção de seis partes à esquerda e também seis colunas à direita. Nós dividimos nossa linha em duas partes iguais. E se tivéssemos uma situação em que também quiséssemos dividir uma dessas seções? Se tivéssemos uma briga como esta. Em seguida, nossa seção de seis colunas no lado esquerdo. Às vezes temos um caso em que queremos dividir esta seção e também fazer uso do nosso sistema de grade aqui dentro. Os quatro primeiros seriam quase exatamente os mesmos de antes. Poderíamos adicionar seis colunas à direita e depois seis colunas à esquerda dentro de uma div. Bem, não é assim que devemos fazer isso no Bootstrap. Isso ocorre porque o Bootstrap exige que nossas colunas sejam apenas um filho direto de uma linha. A maneira correta de abordar isso seria criar uma nova linha aninhada dentro de nossas colunas. Por exemplo, teríamos isso assim. Onde vamos criar uma nova div ou novos elementos com a classe de linha. Então isso nos permitirá fazer uso do sistema de grade de 12 colunas mais uma vez. Agora podemos dividir esta linha em quantas seções gostaríamos. Se quiséssemos aplicar três seções diferentes à nossa linha, poderíamos aplicar nossas colunas. Isso pode ser quatro partes, quatro partes no centro, e depois quatro partes no lado direito. Esta é a maneira correta de abordar linhas e colunas aninhadas dentro do Bootstrap. Na versão final, podemos fazer uso desta configuração de linha aninhada aqui na parte inferior. Eu restringi esta seção externa para ter apenas oito colunas de largura em vez da largura total de 12 colunas. Como estamos usando colunas para conseguir isso, não podemos aninhar diretamente esses depoimentos dentro como espaços de coluna iguais. Mas em vez disso, é exatamente como descobrimos antes, podemos criar uma segunda linha aninhada dentro e então temos acesso ao nosso sistema completo de grade de 12 colunas, mais uma vez dentro desta linha. Mesmo que este wrapper externo tenha oito colunas de largura, a linha aninhada interna ainda terá as 12 colunas completas disponíveis. Vamos para o projeto e criar isso na parte inferior da nossa página de índice. Então, pouco antes do nosso JavaScript, criamos nossa seção. Eu vou dar a isso um contêiner fluido, alguma margem na parte superior e inferior, algum preenchimento na parte superior e inferior também. Preciso de uma cor de fundo clara. O próximo passo é adicionar uma linha aqui dentro. Esta vai ser a nossa linha inicial, que vai conter a div inicial, que tem oito colunas de largura. Isso vai estar nos dispositivos de tamanho médio. Então usamos a classe de col-MD-8 para manter isso no centro. Nós também podemos fornecer um deslocamento em dispositivos médios também, no valor de 2. Finalmente, o centro de texto, para alinhar nosso texto no meio de nossa seção. Tudo isso vai estar aqui dentro é um nível três cabeçalho e isso vai ter a classe de py dash 3, para dar-lhe algum espaçamento na parte superior e inferior. O texto, como podemos ver se vamos para a versão final, vai ser o que os nossos utilizadores têm a dizer. Vamos adicionar isso em nosso cabeçalho, salvar isso, e verificar isso no navegador. Na parte inferior da nossa página, uma parte inferior não pode ver isso por causa do plano de fundo. Esta seção tem oito colunas de largura. Agora, para criar nossas duas seções dentro, precisamos criar uma linha aninhada. Vamos voltar ao nosso projeto. Nós vamos adicionar isso logo após nosso título nível três. Então, uma div com a classe de linha. Dentro daqui podemos acessar o sistema completo de 12 colunas. No entanto, vamos manter isso mais estreito. Vou criar duas seções, que são cinco colunas cada. Podemos fazer isso e, em seguida, compensar o resto do conteúdo com a flexbox. Então, primeiro de tudo, podemos adicionar uma div e podemos adicionar uma classe de simplesmente col-5. Isso definirá a seção para ter sempre cinco colunas de largura, independentemente dos pontos de interrupção. Eu vou duplicar isso para adicionar nossas duas seções dentro de nossa linha aninhada e então nós podemos espaçar estes, nós justificar o conteúdo ao redor. Isso irá adicionar espaçamento igual em torno de ambas as seções. Uma vez que temos uma cor de fundo cinza claro, eu também vou compensar estes com uma cor diferente. Podemos usar bg branco ou nossas duas seções aninhadas, e também algum preenchimento ao redor, que vai ser um valor de 4. Vou copiar estes dois e também adicioná-los à nossa segunda seção. Dentro da primeira seção do lado esquerdo, vamos adicionar algumas críticas ou algumas citações. Assim como podemos ver aqui, vamos adicionar algum texto de exemplo e, em seguida, podemos adicionar um usuário que citou logo abaixo. Podemos fazer isso com um blockquote, que é um elemento HTML padrão. Mas também podemos adicionar uma classe bootstrap de blockquote dentro daqui também. Aninhado dentro como um elemento p. Eu também vou adicionar algum texto Lorem Ipsum é digitando lorem e, em seguida, pressione Tab. Podemos fazer isso no Visual Studio Code. Se você não tiver isso disponível, basta digitar qualquer texto de amostra ou uma citação de sua escolha. Ainda quando usamos blockquote, também podemos adicionar um rodapé, que vai ser a parte inferior da nossa seção de cotações e Bootstrap também tem uma classe disponível para isso, que é simplesmente blockquote-footer. Esta vai ser a fonte de nossas citações. Eu vou dizer “usuário plano livre” e, em seguida, podemos usar os elementos do site, que é HTML, para citar um usuário. Vou dizer “Capitão Anónimo”. Vamos até o navegador e verificar isso. Lá vamos nós. Há nossas duas seções aninhadas dentro de nossa fileira. Só precisamos duplicar isso para o lado direito. Então já temos nossa div circundante para esta seção. Vamos pegar o blockquote e fazer uso dessas mesmas classes. Eu só vou mudar isso para ser um usuário do plano Pro. Dentro desta seção de rodapé, temos uma nova classe de rodapé blockquote. Isso é geralmente usado para identificar a origem da cotação e muitas vezes combinado com os elementos do site, que é usado como um wrapper para o nome do código-fonte. Agora vamos salvar isso e ver como isso parece. Agora temos as nossas duas citações, lado a lado. É assim que podemos aninhar linhas usando Bootstrap. Podemos criar tantas colunas ou tantas linhas aninhadas como gostaríamos. Mas lembre-se sempre que ao criar novas colunas, precisamos sempre de um rapper pai como uma linha. Em seguida, vamos nos concentrar em como criar uma navegação responsiva, que vamos incluir no topo do nosso projeto. 13. Navbars e alternâncias: Agora vamos nos concentrar em um dos fatores mais importantes em qualquer site, e esta é a navegação. Para tornar o nosso site totalmente responsivo ao lidar com navegações, precisamos de uma maneira de garantir que nossos links de navegação não só tenham boa aparência, os livros também sejam totalmente acessíveis e responsivos também. É nisso que vamos nos concentrar neste vídeo, vamos mergulhar e dar uma olhada. Ao lidar com navegações em sites gerais, uma abordagem comum que você pode ver seria algo parecido com isso. À esquerda, aqui temos uma visão típica da área de trabalho onde teríamos uma navegação, um logotipo de um lado e, em seguida, nossos links de navegação do outro. Ao lidar com suas telas menores de tamanho móvel, muitas vezes precisamos de uma abordagem diferente porque há menos espaço disponível na tela. O que normalmente vemos no topo é uma navegação, onde temos um botão que fornecemos alguns links quando clicamos nele, é muitas vezes os mesmos links que temos na visualização completa da área de trabalho, mas apenas escondidos até clicarmos na parte inferior . Como abordamos isso usando o Bootstrap? Bem, a maneira como isso funciona é que basicamente criamos duas seções. Temos uma seção para todos os itens da lista, e então temos uma segunda seção para o nosso botão. Em seguida, criamos um link entre eles através de uma ID, e vamos dar uma olhada em como fazer isso a seguir. Nós fornecemos este link com o nosso ID, nos bastidores, Bootstrap também irá lidar com o JavaScript para tudo isso para trabalhar pontos separados. Vamos agora para o nosso projeto, onde podemos agora aplicar nossa navegação. Fazendo um bom progresso com nossos projetos e agora vamos voltar ao topo do nosso projeto e criar a navegação. Se você for para a versão final, vamos criar algo parecido com isso. Nós teremos o logotipo no lado esquerdo, nós também teremos nossos links gratuitos no lado direito para navegação. Se deslocarmos para baixo até uma tela pequena, obtemos um botão suspenso, que quando clicado para revelar nossos links nos tamanhos menores de celular e tablet, que fique muito melhor em telas menores. Vamos agora criar projeto SNR do topo da nossa seção de corpo. Voltar para a página de índice, role até o nosso corpo. Vamos olhar para o interior aberto, que é apenas aqui. Vamos começar com um wrapper de barra de navegação, que vai ter um título do site e um logotipo. Vou usar o elemento de navegação para fazer isso. Esta armadilha também nos fornece algumas classes que podemos usar para navegação, a primeira é simplesmente navbar, que vamos adicionar flexbox, estou posicionando junto com algum preenchimento. Em seguida, vou adicionar navbar, expande, - LG. Este é o conteúdo BD visão de largura total em nossas telas grandes. Claro, podemos mudar o ponto de ruptura para ser qualquer outra coisa, como MD Se preferirmos e, finalmente, adicionar um pouco de cloro por assistir as luzes navbar. Aninhado dentro de nossos elementos de navegação, vamos adicionar um link, que é para o título do nosso site, ou podemos ter um logotipo dentro do, se você preferir. Vou começar com um nome de classe. A classe que precisamos adicionar é a marca navbar, que você vai adicionar nosso CSS para espaçamento e tamanho no título do site. Podemos adicionar o nome da produtividade de bootstrap ou o nome de sua escolha. Agora, sob o título do nosso site, podemos adicionar nossas duas seções que mencionamos antes, que são os links e também o botão, os links togglese abertos e fechados. Vamos começar com o nosso botão básico, que vai ter um tipo de botão. Isto vai controlar os nossos links, que podemos adicionar dentro desta div. Vamos apenas criar uma lista desordenada por enquanto. Em seguida, podemos dizer bootstrap que este botão é para controlar esses itens da lista, adicionando primeiro um ID. Vamos adicionar o ID a todos os links. Dentro daqui eu vou adicionar o ID como navbar-nav, e então podemos passar isso para o botão como atributos de destino de dados. Dentro da tag de abertura, adicionamos os alvos de dados e definimos isso igual ao nosso ID, então usamos isso como um seletor CSS. Usamos o hash uma vez que este é um ID e, em seguida, o nome ID de navbar-nav. Este botão agora controla nossos itens de lista, e podemos dizer-lhe para mostrar e ocultar o conteúdo definindo data-toggle, collapse. Mais uma vez dentro do botão, configuramos nossa alternância de dados e definimos isso igual para colapsar. Com isso agora ligado, o próximo passo é basicamente adicionar as classes Bootstrap necessárias e também alguns atributos de acessibilidade para terminar as coisas. Começando com o botão, também podemos adicioná-los ao online para que seja mais legível. O próximo atributo será para a nossa classe, e o nome da classe será navbar-toggle, que irá adicionar algum preenchimento, dimensionamento e também uma borda. Da próxima vez, vamos adicionar alguns atributos para tornar nosso site mais acessível. Isso é para pessoas que usam leitores de tela ou com deficiência. Tornar o nosso site o mais acessível possível. O primeiro atributo que vamos adicionar são os controles ária, e definir isso igual ao nosso ID, que é navbar-nav. Certificando-se de que este é o mesmo nome que damos ao ID logo abaixo, que ele corresponda aos nossos links. Precisamos entender onde botão está visando um elemento dobrável, ou seja, nossa lista. Em seguida, temos ária expandida. Vou definir isso para ser um valor de falso. Isso irá dizer aos leitores de tela se nossa lista é expandida ou recolhida em qualquer momento, e nós definimos isso para ser falso se o elemento dobrável vai ser fechado por padrão, que é porque nossos links não vão ser expandidos até que um usuário clique neste botão. O último que precisamos adicionar é o rótulo aria, que será definido para alternar a navegação. Este rótulo pode ser qualquer nome de nossa escolha, e este é um texto que fornece ao usuário um nome reconhecível. A peça final deste botão é adicionar as três linhas. Todos estes ícones gratuitos que você vê na vista de tela pequena. Estes podem ser adicionados usando um span elementos com uma classe Bootstrap. Vamos adicionar esses elementos span entre o botão de abertura e fechamento tag. Não é necessário adicionar qualquer conteúdo entre o nosso espaço. Tudo o que precisamos fazer é adicionar a classe de navbar ícone toggler. Agora, se darmos isso um salvamento e passar para o navegador para todos os projetos, ele recarrega, com o nosso botão e também o título do nosso site. Em seguida, precisamos adicionar em nossos links. Vamos voltar para nossa navegação e procurar nossa lista não ordenada, onde vamos começar adicionando uma classe a este wrapper. O nome da classe vai ser navbar-nav, que vai controlar quaisquer margens e perdão, e também remover a lista padrão [inaudível]. Isso também faz uso do flexbox também. Em seguida, podemos criar nossos itens de lista e novamente, estes vão ter uma classe Bootstrap e isso vai ser nav item com um elemento aninhado dentro. Isso também tem uma classe também, o nome da classe para os links vai ser nav link, que vai remover qualquer cloro link padrão, e também define qualquer margem necessária e preenchimento. Isso só vai vincular a nossa página de índice, que possamos adicionar no index.html. Uma vez que este vai ser o link inicial, vamos pegar este item da lista, já que vamos incluir isso mais duas vezes. A segunda ligação vai ser para os preços. Ainda não criamos esta página. Para isso, você vai vincular ao pricing.html. Só estrague isso, nosso terceiro e último elo será para empreiteiros. Novamente, não criamos uma página contact.html, mas vamos criar isso muito em breve. Vamos salvar este arquivo agora e verificar isso no navegador, aperte recarregar. Em uma tela pequena, vemos todo o conteúdo. Vemos o botão e também os links. Se formos para o botão de visualização de tela grande está sendo removido, e só vemos os links. Podemos corrigir isso e ocultar esses links na visualização de tela menor, adicionando classes necessidade de colapso e que colapso barra de navegação para a div circundante. De volta à nossa navegação, precisamos olhar para o nosso div que envolve nossos links com a idéia de navbar-nav, e precisamos adicionar uma classe de colapso e também navbar-colapso também. Vamos até o navegador e ver se isso corrige nosso problema. Isso está ficando melhor em telas pequenas. Se expandirmos isso, veremos que o botão foi removido e os links aparecem. Podemos tentar expandir isso clicando no botão, e obtemos nossos links na exibição de tela pequena. A última coisa a fazer é mover nossos links para o lado direito na tela grande. Em vez de sermos contra o título do site, queremo-los do lado direito. Podemos facilmente fazer isso com a caixa flexível CSS adicionando a classe de justificar conteúdo final no mesmo negócio que antes, que envolve os links. Podemos adicionar isso aqui. É agora empurra nossos links para o lado direito da navegação. Mesmo que você faria um menu de navegação suspenso totalmente responsivo e acessível. 14. Cards, grupos de cards e decks: Estamos agora vamos dar uma olhada no uso de cartões no Bootstrap, e você pode pensar em um cartão como um recipiente para algumas informações. Um caso de uso típico poderia ser uma listagem de produtos em uma loja de comércio eletrônico exatamente como vemos aqui. Podemos começar nossa listagem pública com uma classe de wrapper de código e também fazer uso de muitas das classes, que Bootstrap fornece para layout nosso conteúdo. Dentro do nosso invólucro, poderíamos ter uma imagem de cartão e, em seguida, abaixo disso, também podemos ter um corpo de cartão para embrulhar todo o resto do conteúdo. Dependendo do caso de uso para o corpo do cartão, também pode conter um cabeçalho e uma seção de rodapé. Todo o resto das informações do nosso produto, tais como um título de cartão, uma legenda e também o contexto da nossa descrição. Além disso, também podemos fornecer qualquer marcação HTML, que você pode precisar, como o botão “compre agora”. Podemos fazer isso parecer e sentir exatamente como queremos. Agora vamos passar para o nosso projeto e aplicar esta estrutura de cartão à nossa página de preços do produto. Mencionado para ao criar nossos links de navegação, agora precisamos criar uma página de preços e entre em contato conosco. Vamos começar a trabalhar agora na página de preços e introduziu cartões Bootstrap. Esta é a aparência da página de preços final. Nós vamos fazer uso dos cartões para criar este layout, que vai conter nossas seções de preços gratuitos usando algumas das classes que acabamos de procurar antes. Se você também quiser saber mais sobre cartões Bootstrap, podemos ir para a documentação, e podemos encontrar isso localizado no link de componentes. Claro, sinta-se livre para dar uma olhada na documentação do cartão que eu vou saltar para o projeto e começar a trabalhar com essas seções de preços. Vamos começar criando nosso novo arquivo para nossa página de preços dentro das raízes do nosso diretório. Queremos chamar esse preço de HTML, já que este é um arquivo HTML. Mais uma vez, precisamos trazer todos os links de reforço. Nós também vamos estar usando o mesmo cabeçalho para ser consistente também. Vou começar a avançar indo para a página de índice, selecionando tudo agarrando e colando isso em nossa página de preços. Logo acima do nosso JavaScript, podemos remover as seções desnecessárias, então não precisamos da seção inferior com a linha aninhada. Não precisamos das quatro imagens para que possamos removê-las, não precisamos da seção com os ícones, isso também pode ir, e finalmente, não precisamos dos itens do grupo da lista. Vamos salvar este arquivo, e se formos para o navegador, vamos clicar no link de preços, e ficamos com a mesma seção de navegação e cabeçalho superior. A próxima coisa a fazer é mudar o título do site, abrir a cabeça. No final disso, vou adicionar preços, já que esta é a página de preços. Agora vamos rolar para baixo e podemos criar nossa nova seção para todos os cartões. Na parte inferior da seção do corpo, logo acima do nosso JavaScript, podemos adicionar nossa nova seção. Isso vai ter a classe de contêiner, então é um tamanho fixo aninhado aqui dentro. Eu vou criar um div, que vai ser um wrapper para as seções de cartão livre. Isto vai ter uma classe que vai ser igual ao baralho de cartas. Vamos dar uma olhada nisso com mais detalhes quando tivermos alguns cartões para trabalhar. Por enquanto podemos adicionar um valor de margem de três na parte superior e inferior e também alinhar o texto no centro. Agora podemos ir em frente e criar nosso primeiro cartão. Isso vai ter um div como um invólucro com a classe de cartão. A classe de cartão irá definir a posição, o tipo de exibição para ser linho, a palavra cair sobre as cores gerais e bordas. Então aqui dentro eu vou criar algumas novas seções. Vamos criar o cabeçalho do cartão e também o corpo do cartão. Vamos começar com a seção de cabeçalho no topo, este é o cabeçalho do cartão. Aqui dentro, isto vai ter um nível quatro, com o preço do plano. O nível quatro título eo primeiro preço vai ser livre, isso também leva em uma classe Bootstrap de font-weight normal. Que outros sons, vamos definir os telefones para ter um peso de normal, e isso é aninhado dentro de nossa seção de cabeçalho. Esta classe de cabeçalho de cartão vai adicionar um raio para o topo do cartão, algum espaçamento e também todas as cores. Logo após esta seção de cabeçalho, podemos criar nossa seção de corpo. Como esperado, isso vai ter a classe de corpo do cartão que vai definir o flexbox crescer e diminuir valores juntamente com espaçamento e dimensionamento. Aqui dentro, nosso nível dois, que terá o preço do plano. Uma classe de título do cartão, que irá adicionar algumas margens à caixa do nosso título. Este é um plano livre, então o preço vai ser zero seguido pelas pequenas etiquetas onde vamos ter a barra e depois mês. Isso também tem uma classe que é fornecida pelo Bootstrap e isso vai ser texto silenciado. Se dissermos isto, podemos ver exactamente o que esta turma está a fazer. Vamos recarregar nossa página de preços, e isso a torna menor e uma cor diferente. Após o título de nível dois, podemos adicionar o texto do cartão dentro de um p elementos. Esta classe de texto de cartão quando você usa um Bootstrap é usado para a maior parte de nossos textos no cartão, como uma descrição do produto, e nossa descrição será “experimentá-lo gratuitamente para sempre”. Abaixo disso, podemos criar nossa própria lista de pedidos. A lista não ordenada terá alguns recursos sobre esse plano de preços. O que exatamente está incluído na lista não ordenada tem uma classe Bootstrap de lista em estilos. Isso removerá todas as listas de entrada de estilo. Podemos adicionar alguma margem na parte superior e inferior como um valor de quatro e, em seguida, criar nossos itens de lista dentro. O primeiro recurso para o plano gratuito, vou adicionar um terabyte de armazenamento, e podemos duplicar isso cinco vezes mais, diminuir mais recursos. É x para o segundo vai ser centenas de temas pré-construídos. Como vou em frente e adicionar qualquer texto que você gostaria dentro deste para torná-lo seu próprio. Vou adicionar o próximo calendário e agendamento. Se todo o ponto vai ser lembretes e alertas, segundo a último vai ser lista ilimitada e páginas. Então, finalmente, rótulos personalizados. Lembre-se que também dissemos antes que ao usar um cartão, estamos livres para adicionar qualquer outro HTML personalizado que gostamos, não estamos restritos a usar as classes de cartão e o layout que Bootstrap sugere. Na lista não ordenada, também podemos adicionar coisas como botões, e isso vai ser um link para começar. Este botão também vai ter o tipo de botão. A base coloca na classe de btn, em seguida, btn bloco, o que fará com que esta seja a largura total da página. Podemos ver isso se salvarmos isso e atualizar, isso fará com que o botão esticar toda a largura cheia de cartão. Podemos ver isso mais claro se adicionarmos um contorno de botão. Vou adicionar isso como a informação do contorno do botão, e lá vamos nós. Como Bootstrap é móvel primeiro, esta é a largura total da página, já que temos apenas um cartão. Mas agora eu vou continuar e repetir isso para o cartão número 2, e 3 e podemos ver o efeito que isso terá. Vamos pegar nosso cartão, o div circundante. Podemos copiar isto, certificando-se de que mantemos a div circundante com a classe do baralho de cartas. Podemos colar isso mais duas vezes. Para o meio, vou mudar isso para ser o plano Pro, em vez de gratuito. Podemos mudá-lo para ser profissional. Seu preço pode ser de US $10 por mês. O texto do cartão atualiza recursos de acesso Pro. Eu não vou ir em frente e mudar todos esses itens de lista porque ele vai fazer para um vídeo muito chato. Mas é claro, vá em frente e altere estes se você quiser ver seus projetos. Tudo o que vou fazer a seguir é mudar o botão de “Começar” para “Atualizar”. O terceiro, isso pode ser para o negócio. Podemos alterar o preço mais uma vez, vamos para 29, o texto, usuários ilimitados, e armazenamento extra, e, em seguida, mudar o botão no final para uma pequena atualização b. Uma vez que estes são ambos planos pagos no segundo e terceiro, eu também vou mudar o botão para ser um pouco diferente. Ao invés de usar o contorno do botão, eu vou mudar isso para ser simplesmente informação do botão. Aqui estava uma cor de fundo sólida. Este vai ser no último, e também no do meio. Recarregue e agora tenha nossos cartões gratuitos lado a lado na visão maior. Se reduzirmos isso para um dispositivo móvel, tudo isso agora empilhado verticalmente. Você notará na área de trabalho, esses cartões têm algum espaço entre eles. Isto é por causa do invólucro de cartão. No início, adicionamos este invólucro de cartas e a classe de baralho de cartas. Se dermos uma olhada nisso, esta classe fornece a margem em torno das cartas que vemos. Se quiséssemos remover isso e não temos espaço entre eles, poderíamos mudar isso para ser grupo de cartas em vez disso, e ir para o navegador. Isso agora removerá todo o espaço entre nossas cartas, aproximando-as. Esta é outra opção, mas eu vou restabelecer o baralho de cartas do espaço entre estes, e, em seguida, para terminar esta seção e também esta página, Eu vou adicionar um cabeçalho logo acima desta seção de cartas. Voltar para todos os contêineres de cartão, precisamos adicionar isso logo acima do nosso contêiner. Vamos apenas adicioná-lo. Vamos adicionar uma div, a classe de preenchimento com um valor de 3 para adicionar algum espaçamento todas as rodadas, e também a classe do centro de tecnologia. Dentro desta div, podemos adicionar um cabeçalho de nível 2 de preços, e também alguns textos logo abaixo de livre para usar para a maioria dos usuários ou atualizar seu plano para acessar recursos profissionais. Também podemos destacar isso adicionando qualquer classe de lead ao nosso texto, que já analisamos anteriormente neste projeto. Para a nossa página de preços, [inaudível] seção de preços muito bonita para nossos projetos. É assim que podemos usar cartões Bootstrap para colocar rapidamente o nosso conteúdo. O verdadeiro útil para casos de uso como este. [ inaudível] coisas como listagens de produtos como olhamos anteriormente. Este é agora para cartões e eu vou vê-lo no próximo vídeo onde vamos dar uma olhada usando os formulários Bootstrap. 15. Formulários e inputs: Formulários e entradas são algo que usamos o tempo todo ao visitar sites ou usar aplicativos. Eles usam para capturar informações ou dados como nosso nome, nosso e-mail, senhas ou até mesmo uma mensagem. Que isto é o que vamos ver neste vídeo. Terminamos agora a nossa página de preços, agora temos este link Fale Conosco para agora link para uma nova página. Vamos construir algo que se pareça com isso. Se formos para a versão final, ele vai compartilhar a mesma seção de navegação e cabeça. Em seguida, vamos criar um formulário logo abaixo usando bootstrap. Isso vai ser criado usando marcação HTML e um servidor, vamos estar usando algumas classes Bootstrap para nos dar um bom tempo espaço para trabalhar com. Após o projeto, podemos criar um novo arquivo na barra lateral. Mais uma vez, isso vai estar nas raízes dos nossos projetos. É o contato do nosso HTML. Como vamos estar compartilhando a mesma navegação e também a seção de cabeçalho, eu vou copiar o arquivo pricing.HTML. Vamos copiar tudo isso e colar isso em nossos contatos. Claro que não precisamos dessas seções que acabamos de criar no último vídeo. Não precisamos da seção de cartões. Estou rolando para cima ainda mais. Também não precisamos da seção de preços. Tudo o que temos é o JavaScript lá embaixo. Então eu vou para a seção no topo. Podemos alterar o título da página e diremos entre em contato conosco. Agora vamos trabalhar no nosso formulário. Logo abaixo da nossa seção de cabeçalho. Acima do JavaScript queremos criar um formulário elementos. Este elemento de formulário vai ter uma classe Bootstrap. Sob este nível, podemos ir para a documentação do Bootstrap. Isto está dentro dos componentes. Então vamos até a seção de formulários para obter mais informações. Há muitos tipos diferentes de formulários que podemos usar, todos relativos às entradas em que estamos usando. Mas a maioria deles geralmente tem um grupo de formulários como um wrapper. Em seguida, dentro colocamos nossos rótulos e entradas, juntamente com algumas opções diferentes para definir nossos formulários, incluindo um layout em linha também. Vamos voltar aos nossos projetos. Podemos começar dentro da nossa forma. Vamos adicionar uma classe de recipiente ao nosso formulário e, em seguida, dar-lhe alguma margem no topo com um valor de quatro. Então aqui dentro vamos embrulhar cada rótulo e entradas dentro de uma div. Esta div vai ter a classe bootstrap de form-group. Este grupo de formulários clássico vai nos dar o espaço necessário entre cada uma das nossas entradas. Então dentro vamos começar adicionando um rótulo, que será para o nosso nome detectar dentro do seu nome. Depois disso, mas ainda quando dentro do nosso grupo de formulários, podemos adicionar nossa primeira entrada. Novamente, este é apenas HTML regular com algumas classes Bootstrap. Isso vai ter o tipo de entrada de texto. A classe bootstrap de controle de formulário, que vai controlar o tamanho no preenchimento, as cores na borda. Junto com uma transição agradável para dentro e para fora. Deixe-me clicar nas entradas. Depois disso, vamos criar um segundo grupo de formulários. Este vai ser bem parecido. Bem, este vai ser para o nosso e-mail. A classe circundante ou grupo de formulário, Eu vou rotular ninho dentro. Este é o rótulo para o e-mail e o texto do endereço de e-mail. Em seguida, a entrada com o tipo de e-mail. Assim como ambos serão adicionados à classe de controle de formulário para o elemento de entrada, o id de e-mails. Isto combina com a nossa gravadora. Isto é assim, quando o usuário clica no texto do endereço de e-mail, a entrada se tornará ativa para que ele possa digitar nele. Também precisamos fazer isso logo acima. O ID do nome para que isso corresponda com o nosso Rótulo de Nome. Depois disso, podemos adicionar o texto de espaço reservado de digitar seu e-mail para responder. Antes de prosseguirmos, vamos verificar se isso está funcionando bem no navegador. Vamos verificar se nossos links estão lá. Temos nosso link na página de preços para o contacts.html. Vamos conferir a página de índice e abrir a navegação superior. Temos nosso link de contato funcionando também. Para o navegador e para o projeto. Clique no botão de contato. Agora temos o nosso nome e também o nosso endereço. Você pode ver o efeito de transição quando isso é clicado. Nós também podemos adicionar algum texto de espaço reservado para o nosso nome também. Vamos voltar ao nosso formulário de contato. Podemos adicionar isso em nossa entrada. Vamos texto de digitar seu nome. Agora temos os nossos dois grupos de formulários. O próximo vai ser um seleto entradas. Isso vai ser para que possamos clicar sobre isso e selecionar qual plano o usuário está no momento. Isto mais uma vez, tem a div com uma classe de grupo de formulário. Aninhados dentro, começamos com a nossa etiqueta. Isto vai ser para a identificação do plano. Apenas toma de qual plano você está usando. Em seguida, adicionamos nossas entradas selecionadas. Isso também vai ter a classe de controle de formulário. Assim como as outras entradas. O ID vai ser planejado. Isso corresponde à nossa etiqueta logo acima. Em seguida, aninhado dentro de nossos elementos selecionados, podemos pedir nossas opções para escolher. O primeiro vai ser de graça. Podemos adicionar o texto de graça aqui dentro. Podemos adicionar opções de outono. Este segundo vai ser pro com o texto de pro. O terceiro é um negócio e o último é para um inquérito geral se você não está inscrito. Vamos dizer pergunta não geral. Vamos ver como isso está olhando dentro de nossos projetos, atualizar. Há também uma seleção de entrada com nossas quatro opções. A próxima entrada será para a área de mensagem ou para a área de texto. Fora do nosso grupo de formulários, vamos adicionar uma nova div. Desta vez, novamente a classe ou grupo de formulários. O rótulo, que vai ser para todas as mensagens, apenas mensagem de texto também. Em seguida, podemos adicionar uma área de texto com várias linhas. Podemos adicionar nossos elementos de área de texto. A classe vai ser forma de controlar o id da mensagem para coincidir com o nosso rótulo. Podemos definir o número de colunas, se quisermos. Mas eu vou definir o número de linhas para cinco. A última parte deste formulário é adicionar um botão de envio. Você tem que ter o tipo de enviar e, em seguida, algumas classes Bootstrap. O estilo básico do botão e, em seguida, a cor das informações do botão, e um texto de enviar mensagem. Vamos testar isso no navegador. Temos agora uma área de mensagens que também podemos expandir. Vou enviar o botão de mensagem também. O tipo de curso, sinta-se livre para personalizar este formulário para atender às suas necessidades. Podemos criar formulários em linha, podemos criar configurações mais complexas como esta, onde podemos incluir botões de opção, caixas de seleção, campos de endereço e muito mais. Como você pode ver, formulários têm muitas opções e variedades diferentes e Bootstrap tem coberto para a maioria de nossas necessidades. No entanto, embora fôssemos formulários ou quaisquer outros componentes que usamos em, se precisarmos personalizá-los para se adequar ao nosso projeto? Bem, isso é o que vamos ver no próximo vídeo. 16. Substituindo o estilo padrão do Bootstrap: Bootstrap, por padrão, destina-se a dar-nos uma boa aparência estilos e características fora da caixa. Mas há algumas vezes quando podemos precisar substituir esses padrões, não só para fazer nosso site parecer mais como queremos, mas também para que nosso site não pareça o mesmo que todos os projetos Bootstrap lá fora. Isso é muito fácil de fazer e não mais difícil. Agora, eu vou me inscrever em um CSS regular. Se formos para o nosso projeto, já temos nosso próprio arquivo styles.css personalizado, que criamos anteriormente. Eu também vou ter várias opções quando se trata de personalizar os padrões do Bootstrap. Se formos para o nosso index.html e, em seguida, até a seção de cabeça superior. Uma coisa importante a observar aqui é, nosso link para nossas folhas de estilo personalizadas. Isso sempre precisa ser colocado como o último arquivo CSS abaixo de qualquer um dos arquivos Bootstrap e qualquer um dos arquivos CSS que você pode ter de bibliotecas de terceiros. Isso garante que seu último carregado e, portanto, o conteúdo irá substituir qualquer estilo de ambos os arquivos. Então, uma maneira de personalizar isso é usar uma classe personalizada. Por exemplo, se você quisesse mudar a barra de navegação, poderíamos simplesmente adicionar nossa própria classe personalizada dentro daqui. Vamos para a navegação de produtividade. Podemos pegar essa aula e podemos levar isso para nossos estilos personalizados. Então salve nosso arquivo de índice. Abra o nosso styles.css. Uma vez que é uma classe, precisamos do ponto. Podemos então segmentar nossa classe personalizada com quaisquer propriedades CSS que gostaríamos. Como exemplo, podemos simplesmente mudar o plano de fundo para ser um valor. Vamos para o DDD. Salve isso, adicione ao navegador, vá para a página inicial e agora podemos ver nossa cor de fundo personalizada. Outra maneira de substituir qualquer estilo Bootstraps é simplesmente direcionar o nome do elemento, ou uma abordagem mais geral. Por exemplo, em vez de adicionar uma classe, podemos usar alguns CSS regular direcionando qualquer um desses elementos HTML. Se quisermos aplicar um plano de fundo personalizado a qualquer um dos nossos desenvolvedores na página. Poderíamos simplesmente adicionar um seletor de desenvolvimento para um campo personalizado, recarregar o navegador, e isso agora é aplicado a todos os desenvolvedores em nosso site. Então este não é um ótimo exemplo, mas é uma maneira que podemos substituir qualquer um dos padrões, e outra maneira de fazer isso é usar qualquer uma das classes Bootstrap existentes e, em seguida, podemos adicionar ou substituir. Por exemplo, se formos para o nosso contacts.html, todas as entradas que adicionamos tiveram essa classe de controle de formulário. Em seguida, pegue isso e use isso dentro de nosso próprio styles.css. Vamos remover isso, em seguida, alvo na classe de controle de forma de Bootstrap. Ao fazer isso, todos os estilos de controle de formulário existentes ainda serão aplicados, já que estamos usando as folhas de estilo Bootstrap. Mas uma vez que a nossa folha de estilo está incluída por último, qualquer coisa que adicionamos dentro daqui irá adicionar ou substituir qualquer um desses padrões Bootstrap. Por exemplo, se todas as nossas entradas de formulário precisassem de algum preenchimento extra, poderíamos adicionar 30 pixels à parte superior e inferior e zero à esquerda e à direita, e também podemos querer remover todos os raios de borda em nosso e poderíamos facilmente fazer isso definindo isso para ser um valor de zero. Salve esta adição em nossa página Fale Conosco. Agora temos os cantos quadrados afiados em nossas entradas e pequeno estofamento na parte superior e inferior. Se entrarmos nas ferramentas do desenvolvedor, clicaremos com o botão direito do mouse e inspecionaremos. É como uma das nossas entradas. Podemos ver o nosso styles.css personalizado tem o nosso estofamento e border-raio aplicado na parte superior. Além disso, o controle de formulário, que é aplicado pelas folhas de estilo Bootstrap, ainda tem todas essas propriedades em vigor. No entanto, se olharmos para o preenchimento e também o raio de fronteira ambas as propriedades foram riscadas desde que agora estamos usando agora um estilos personalizados logo acima. Isso significa que, embora estejamos usando o Bootstrap como base para o nosso projeto, não estamos limitados por ele. Nós também podemos criar quaisquer recursos personalizados e também uma aparência totalmente personalizada. 17. Considerações finais: Parabéns por chegar ao fim desta aula. Eu espero que você tenha gostado de fazer este curso tanto quanto eu gostei de construí-lo também. Mal posso esperar para ver o que vocês criaram. Espero que você compartilhe seu projeto na área do projeto para que todos possam ver. Espero que você possa usar suas novas habilidades Bootstrap encontradas. Coloque isso em prática, construindo alguns projetos futuros. Obrigado por fazer esta aula e espero que eu o veja novamente no futuro.