Como criar um site simples com o Bootstrap 4 | Robin Haney | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Como criar um site simples com o Bootstrap 4

teacher avatar Robin Haney, Web Developer and Online Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

6 aulas (31 min)
    • 1. Introdução ao curso

      0:40
    • 2. Como configurar e instalar o Bootstrap 4

      5:47
    • 3. Trabalhar com o componente de Bootstrap 4 Jumbotron

      7:34
    • 4. Como adicionar botões e formulários

      7:18
    • 5. Como adicionar nossos sites informações de direitos autorais

      2:08
    • 6. Toques finais para o nosso site

      7:12
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

418

Estudantes

--

Sobre este curso

Neste mini-curso rápido, você vai aprender a criar um modelo de página simples usando o Bootstrap de estrutura front-end 4. Este curso vai ensinar a você como instalar e configurar Bootstrap 4 corretamente, bem como apresentar os elementos, componentes e cursos comuns que você pode usar para criar seu site.

Este curso deve levar você cerca de 15-20 min para passar e construir seu site. Assim que você for configurado com o Bootstrap 4, você pode criar uma página da Web semelhante a essa em apenas 5 minutos!

Estou ansioso para vê-lo na coruja!


Sinceramente,

Robin Haney

Conheça seu professor

Teacher Profile Image

Robin Haney

Web Developer and Online Instructor

Professor

Hello,

My name is Robin Haney and I am an instructor here at Skillshare. I primarily teach web developing and programming tutorials. 

You can check out my blog here - www.robinhaney.com 

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução ao curso: Oi. Meu nome é Robin. E neste curso curto, eu vou mostrar a vocês como projetar um site muito simples usando o bootstrap para web desenvolvimento framework front-end. Ao longo deste curso, você aprenderá a instalar e trabalhar com o framework bootstrap quatro. Esta é a versão final do site que vamos construir e você vai descobrir que você pode construir este site muito rapidamente. Isto não vai demorar mais do que 15 a 20 minutos para construir. E isso é assumindo que você não tem conhecimento e bootstrap quatro. Então, se você é completamente novo ou você só precisa de uma atualização no bootstrapped para neste curso é perfeito para você. Tudo bem, vamos começar. Vamos construir um site com bootstrap para 2. Como configurar e instalar o Bootstrap 4: agora, antes que possamos realmente começar a construir nosso site, a primeira coisa que precisamos fazer é instalar o impulso até quatro para que possamos usá-lo para começar a construir nosso site agora Bush F ou tornou isso muito fácil para nós fazê-lo. Vamos passar para as etapas de inicialização para documentação e olhar para as diferentes maneiras que podemos instalar bootstrapped para o nosso site. Então, a fim de começar com o Bootstrap, para a primeira coisa que precisamos fazer é visitar o site Bootstrap for Documentation para que possamos encontrar o site da Documentação digitando em bootstrapped quatro no Google e clicando em este primeiro link que aparece. Ou você pode copiar o URL na parte superior aqui e digitá-lo e você vai chegar ao bootstrap para documentação. Certifique-se de que você está no bootstrap para documentação e não a documentação de bootstrap poucos , pois há uma diferença. Então, a maneira mais fácil de começar com Gustav é instalado o bootstrap cdn e podemos fazer isso adicionando esses links em nosso documento. Então vamos começar nosso site. Eu criei um novo completo para aqui na minha área de trabalho, que eram uma loja ou um site arquivos em. Vamos começar criando nossa equipe A. Documento L. Só vou abrir um arquivo sem pat aqui e salvá-lo como um arquivo html index dot. Lá vamos nós. Podemos excluir nosso arquivo de bloco de notas antigo. Também vou adicionar uma pasta para armazenar nosso CSS. Nós estaremos usando um pouco de CSS personalizado no final deste curso para apimentar nossa página web. Então aqui temos nosso arquivo de índice aberto em. O nosso editor que vamos fazer aqui é instalar o Bootstrap. A maneira mais fácil de chegar direto em boost up para sua Volte para a documentação e vamos clicar neste modelo inicial. Este modelo estrela terá tudo o que precisamos fazer para começar com a criação sites. Com Bootstrap. Ele terá o cdn bootstrap, toda a consulta JavaScript e J e todos os estilos CSS que bootstrap precisa no trabalho de ordem. Nós também temos um modelo HTML básico, então isso é muito legal também. Vamos copiar todos nós para a nossa palavra clipe e vamos para um novo arquivo de índice aqui e colar em nosso modelo iniciado. Então é assim que sua página web deve parecer quando você terminar. Vamos salvar o arquivo e abri-lo e apenas verificar se tudo está funcionando corretamente. Tenha em mente ao usar o cdn de bootstrap para conectar, você realmente precisa estar conectado à Internet. E aqui podemos ver que o estilo de parada de inicialização está realmente sendo aplicado, e boost up está funcionando. Legal. Isso foi fácil, certo? Antes de terminarmos aqui, , há mais uma coisa que te queria. Eu quero realmente pegar um componente de bootstrap e apenas colar algum código. E só mais uma vez para ter certeza de que tudo está funcionando corretamente com nossa instalação bootstrap , eu vou clicar em componentes que eu vou pegar um botão aqui. E este é o nosso estilo de botão diferente que temos. Eu só vou copiar este trecho de código entrar em cada html aqui, e eu vou fazer um pouco de espaço aqui em baixo, assim como em excluí-lo. Realmente? Normalmente, depois de colar aqui Sierra arquivo e se tudo está funcionando corretamente, devemos ver um monte de botões em nossa página web. Eles estão atrás incríveis. Podemos ver que tudo está funcionando corretamente. Aqui está a nossa lista de botões diferentes. Então, nosso bootstrap está tudo ligado e estamos prontos para começar a projetar nossa página simples do site. Vamos voltar aqui e apagar isso muito rápido já que não precisamos mais dele. Uma última coisa que vou fazer antes de você terminar. Esta lição é que precisamos conectar nosso próprio CSS personalizado aqui. Então eu vou copiar e colar o código que precisamos para importar nosso CSS e certifique-se de colocar sua taxa CSS fora de suas bootstraps CSS em vez disso. Nosso CSS personalizado que criamos no final deste curso substituirá os estilos de bootstrap. Então aqui nós sempre um link e estamos ligando para a nossa folha de estilo CSS. E na era, se tivermos o caminho para a nossa pasta de arquivos, que é CSS, e então temos o nosso arquivo extra que vamos chamar CSS ponto personalizado. Então, quando isso é tudo bom para ir, nós realmente tem que fazer são acostumados arquivo CSS. Por isso, é dar-nos um rápido salvamento voltar ao nosso completo que temos o nosso site. Mais uma vez, vamos fazer um novo arquivo sem pad. E em vez de dar html, vamos dar a ele a extensão CSS ponto não poderia fazê-lo. Isso Oh, nenhum arquivo de estimação. E vamos abrir nosso CSS personalizado aqui. E eu vou fazer uma simples mudança de estilo em cada um dos nossos elementos. Apenas uma verificação e certifique-se de que o nosso CSS personalizado está ligado e tudo está funcionando mais uma vez corretamente. Então vamos fazer algo como mudar a cor para roxo. Certifique-se de salvar o seu índice dot html foul e seu arquivo CSS. E se abrirmos nossa página de quê, podemos ver que nosso texto está roxo agora. Então isso significa que o nosso CSS personalizado está ligado a r H d html um documento e tudo está funcionando perfeitamente. 3. Trabalhar com o componente de Bootstrap 4 Jumbotron: Agora que temos bootstraps configurados e funcionando corretamente em seu site, podemos começar a olhar para os diferentes componentes em diferentes recursos que brooch quatro pode nos oferecer para que possamos facilmente construir nosso site. Certo, então é hora de começar a construir os componentes do nosso site. Agora, site não vai evoluir muito. E nós podemos realmente usar um dos componentes de pessoas no Bootstrap para obter um bom pedaço dele começou e obter o nosso mais orgulhoso indo e no caminho. Então, o componente realmente que vamos usar está indo para a seção de componentes aqui, e vamos clicar no elemento Jumbotron. E o elemento Jumbotron é apenas uma caixa pequena agradável aqui. Isso coloca uma ênfase em um pedaço de conteúdo ou algo que você quer adicionar um monte de foco, também, também, em um site e está chegando em breve. Página da Web. Isto vai ser perfeito para o que precisamos que ele faça. Então há um trecho de código do nosso Jumbotron aqui, e há também um jumbotron fluido que seguirá uma espécie de assumir toda a página. Mas só queremos este aqui. Então, onde ele vai copiar este trecho de código aqui, entrar em nosso arquivo HTML e nós vamos colá-lo, Leia na seção de corpo do nosso site. Também podemos apagar este cada um aqui, já que o Jumbotron tem um H já colocado dentro dele. Muito bem, vamos selecionar o nosso recorde aqui. E vamos pressionar Tab algumas vezes apenas para dar um pouco de recuo. Eu também vou adicionar um pouco de espaço aqui entre o nosso corpo. Só para termos um pouco de espaço para respirar e onde você pode facilmente ver o que estamos trabalhando com Seu código e leitor. Tudo bem, isso parece muito bom. Então vamos salvar arquivo e ver como ele se parece em sua página web. Tudo bem, podemos ver sua unidade jumbotron sendo exibida aqui. Parece bom por enquanto, mas há algumas mudanças que precisamos fazer. Primeiro de tudo, vamos mudar nossa cor do texto. Não queremos ser roxos. Queríamos ser negros, pelo menos por enquanto. Podemos sempre mudá-lo mais tarde. E eu só vou comer este código 1 aqui e isso deve consertar isso. Lá vamos nós. Isso parece muito melhor. Agora. Uma coisa que eu quero é uma linha central. Todo o texto na unidade Jumbotron para o centro da página. Se você voltar para a documentação, você pode clicar em utilitários e podemos ver aqui. Há uma classe que podemos usar para alinhar o texto de um recipiente ou elemento ou qualquer coisa no bootstrap. E um aqui é você quer esta linha central que podemos ver aqui na segunda linha aqui temos o texto no centro que está alinhado à esquerda centro e depois à direita. Queremos aquele que diz texto alinhado centralmente em todos os tamanhos de porta Vieux. E este será, na verdade, o segundo parágrafo e o nosso trecho de código também. Então, se formos até o trecho de código aqui, o segundo que vai ser ele vai alinhar o texto, e nós queremos este texto X centro. Então isso vai alinhar o texto em todas as portas Vieux. Então, isso significa dispositivos móveis, tablets ou dispositivos desktop. Bem, nós podemos pegar essa classe e apenas colocá-la aqui e adicioná-la à nossa classe DIV para um Jumbotron, e o que eles devem fazer é alinhar o texto na nossa tentativa dupla. E lá vamos nós. Podemos ver que o detetive agora está facilmente alinhado com o nosso elemento. Então isso foi bem rápido, certo? Agradável e fácil. E se redimensionarmos a página, podemos ver aqui que ela é completamente móvel, responsiva, responsiva, e tudo se encaixa de forma agradável e fácil. A próxima coisa que podemos fazer para um site é adicionar um pouco de espaçamento entre alguns de nossos elementos. Se você voltar para a documentação que você pode ver aqui nas seções do utilitário, há uma pequena sinopse sobre o espaçamento, e podemos adicionar alguma margem ou tapinha no dedo do pé. São elementos usando um código curto, e esse é o que eu vou seguir aqui, o que podemos ver. É ponto m t zero. Então isso significa margem superior de zero. Também podemos ver aqui que é um para margem esquerda, e há alguns para bater. Lutando à esquerda lutando à direita, e há diferentes virgens para combinar todos os diferentes tipos juntos, ou se você quiser fazer esquerda e direita ou superior e inferior ao mesmo tempo. Mas vamos apenas mantê-lo simples e adicionar um pouco de espaço entre nossos elementos com a margem e batendo códigos curtos. Então vamos voltar ao nosso HTML e o que podemos fazer aqui é adicionar uma margem superior de vamos com algo como dois ou três. Vamos tentar três. E o que estes três significam aqui é que vão ser reinos. Então isto vai adicionar uma margem superior de três carneiros à nossa unidade Jumbotron. Então, se salvamos a página, podemos ver que são Jumbotron está sendo empurrado para baixo um pouco para o centro da página e que está parecendo muito bom. Nós meio que queríamos sentar em algum lugar no meio. Isso deve ser muito bom para nós. E podemos adicionar essas classes a qualquer presságio e nossa página muito rapidamente. Adicione algum espaçamento sem realmente trabalhar com nosso CSS. Agora, a próxima coisa que vamos fazer é adicionar um contêiner ao nosso site, nosso site em particular, nós realmente não precisamos de um contêiner porque é apenas um pequeno site e nós não estamos colocando muito na página. Mas eu vou adicionar um contêiner só para mostrar como ele fica e como podemos fazer isso com Bootstrap. Então estas são as duas classes tipos de contêineres que podemos ter. Isto está na documentação. Vou copiar o primeiro contêiner aqui. Não vamos fazer o nosso contentor fluído, por isso vou copiar esta primeira aula de div aqui, e vou enfiá-la. Provavelmente FP debaixo do corpo dela. Tome aqui. Então ele toma conta de todo o site. Você sabe, adicionar fechamento Div também. No final do nosso conteúdo, dê-nos um rápido salvamento. Então todo esse conteúdo aqui será aninhado dentro de um recipiente. E uma vez que eu salvei e vemos o site, você meio que vê o que eu quero dizer com isso. Então nós atualizamos a página que podemos ver aqui que são Jumbotron está agora aninhado dentro de um recipiente que está tipo de cercando o exterior do nosso site. E se redimensioná-lo novamente, podemos ver que o redimensionamento do contêiner é com o navegador. Então, se você já quis adicionar um contêiner ao seu site, que você deve quando você projetar sites mais complicados, você pode usar esse dedo da classe rapidamente em um contêiner no Bootstrap. No nosso caso, Nós realmente não precisamos muito dele, mas ainda é bom dedo do pé tem porque centros de tênis ou conteúdo e faz com que pareça muito, muito agradável. Então a próxima coisa que vamos fazer é mudar um pouco do texto na página dela aqui. Vamos mudar este mundo Hello e colocar um título para o nosso site. Depois disso, esta classe de exibição aqui vai determinar o tamanho do seu “h”. menor o número o maior detecta será então exibir três é meio que no meio. E se eu mudar para, por exemplo, um, isso vai fazer nosso texto muito maior e no elemento Jumbotron, se eu elevá-lo para um número maior, ele vai torná-lo menor. Então eu atualizo a página. Podemos ver que o texto é muito mais amplo e tem mais ênfase nele. E isso é ótimo para o nosso site aqui porque queremos que o título seja realmente grande e faça com que o visitante realmente perceba. E parece muito bom também. Então nós temos o básico de seu elemento Jumbotron configurado e configurado em um site. Agora podemos trabalhar na adição de um formulário de inscrição e alguns botões para o nosso site e, em seguida vamos terminar o estilo do nosso site para torná-lo tudo agradável e bonito. 4. Como adicionar botões e formulários: então antes que possamos começar com cremoso são formulário de inscrição e nossos botões para um site. Há um pequeno erro que cometi e cada um dos nossos documentos aqui. Eu coloquei o bootstrap bro, mas na verdade é suposto dizer brutos. Conferência Bootstrap. Não sei por que coloquei a Rich Amarrada Rose lá se me confundi com outra coisa . Mas nós vamos mudar na conferência por agora para ah trocado para combinar com a nossa versão final do nosso site. E a seguir, o que precisamos fazer é trocar parte do texto que mostramos a ela. Vou me livrar dessa aula de liderança para este parágrafo, por enquanto. E eu vou realmente comer todo o texto aqui e inserir o nosso próprio texto aqui que queremos para o nosso site. Vou enfiar algo na linha de que estamos construindo nosso site ou algo assim. Tudo bem, isso parece muito bom. Em seguida, vamos alterar o texto do parágrafo no próximo parágrafo novamente, vamos adicionar algo para dizer ao nosso visitante para se inscrever em nossa lista de e-mail, e então eles podem ser identificados quando nosso site está ativo na Internet. Certo? Então isso parece muito bom. Não tão ruim. E o que mais poderíamos fazer aqui? Acho que isso é muito bom. Eu acho que não é hora de adicionar nossos botões ao nosso site para o nosso formulário de areia. Então nós vamos fazer isso voltando para a documentação bootstrap, e nós vamos clicar em um botão add ons aqui porque nós vamos usar este segundo formulário de botão aqui. E a primeira coisa que temos o botão primeiro. E nisso, o campo que eles podem digitar. E eu não posso gostar disso. 2ª 1 palavra diz o botão depois e eles estão meio conectados. Acho que isso parece bem afiado. Então eu vou pegar esse trecho aqui, e eu acho que é o 2º 1 bem aqui. Então vamos encontrar o início do Tiv vai copiá-lo. E parece que há 123 Debs depois, então deve ser todo o código ali. Sim. Parece correto. Vamos dar-lhe uma cópia. Abra o nosso arquivo HTML e vamos colá-lo logo após o nosso parágrafo aqui. E isso deve parecer OK. Dê-lhe um pequeno seletor rápido e recuado um pouco. Ok, vamos salvar este arquivo e ver como ele fica em nossa tela. Ok? Podemos ver que a forma dela não está alinhada corretamente, porque o nosso, mas agora tivemos mais cedo no Jumbotron é realmente empurrá-lo para cima. Então precisamos ir para o fundo aqui e excluir o botão que tínhamos aqui na parte inferior da página HTML dela. Sim, este aqui temos de nos livrar. Então deletamos isso. Apenas apague o parágrafo tas Bem, nós não precisamos mais disso. E se salvarmos e você for o arremesso de novo, deve parecer muito melhor do que era antes da Ariel. Então, nossa forma agora é exibida com após o nosso pequeno pedaço de textura que está dizendo aos usuários descrever. E a próxima coisa que precisamos fazer é centralizar esse formulário em nosso tipo de no centro de nossa página, como fizemos com nosso texto. Podemos fazer isso compensando esta coluna que nossa busca por MSM Então, mais uma vez, vamos voltar para a documentação do bootstrap e vamos para eu acredito que está no layout e grade pode estar na seção da grade. Queremos olhar para ver se podemos encontrar uma seção sobre colunas de deslocamento. Deslocamento. Cereal calmo. Então isso está nos mostrando onde podemos adicionar essas classes diferentes também. Nossas colunas e fazê-los aparecer em diferentes pontos em uma página web. E este aqui na parte inferior é o que você quer, porque isso vai definir a calma para aparecer na seção do meio da página em sua área de trabalho. Então esta é a classe que queremos adicionar. Então vamos copiar e colar essa aula aqui. Há um trecho de código aqui. Só precisamos do nome da turma, turma, no nosso caso, então podemos copiar isto aqui. E se adicionarmos ao formulário dela, vai para o centro. Alinhe nosso tipo de botão aqui para estar no centro de nossa página na área de trabalho, e nós podemos realmente se livrar disso. Continue chamando grandes seis, e vamos ver como isso usado podemos ter que ajustar ou colunas um pouco, dependendo de como ele vai ficar em nosso navegador da Web. Por enquanto, vamos manter em seis para ver como fica, você sabe, compensá-lo por três. Ok, lá vamos nós. Não podemos ver os olhos da Miss Center no meio da página dela. Muito legal. Vamos ajustar a visualização móvel sobre o site apenas para garantir que ele permaneça no meio. Podemos ver aqui que não está bem no meio. Isso é provavelmente porque precisamos adicionar uma classe de coluna, mas está parecendo muito bom para a maior parte, então precisamos ajustar isso muito rapidamente. E vamos tentar mudar esta coluna grande para quatro. Tente mudar o nosso deslocamento também. Isso é algo que você pode ter que meio que mexer com como você está mudando o seu vamos tentar mudar, você sabe, coluna grande para quatro e são deslocados grande para quatro. E lá vamos nós. Podemos ver que agora está resumido na tela dela, e se mudarmos para mover todos vocês, ele se ajusta para caber no centro de uma tela, que fique muito bem. Estou feliz com isso, e parece muito bom antes de encerrarmos isso. Ouça aqui. Precisamos adicionar algum espaçamento entre alguns dos nossos presságios de parágrafos na página dela. Então vamos voltar aqui e temos algo para mudar seu texto aqui. Vou mudá-lo para o seu e-mail no campo de e-mail e no botão de ir. Vamos mudar isso para assinar. Ou, na verdade, é ir ser notificado. Isso soa um pouco melhor. E quanto ao momento do “Spacey nunca “, vamos para cada um dos nossos aqui no topo da nossa página web. E vamos adicionar uma margem para empurrar o conteúdo abaixo dele. Basta abaixá-lo para adicionar espaço de respiração Lobato entre o H e o parágrafo aqui. Então, há algumas maneiras de fazer isso, mas eu só vou para o nosso H um e eu vou adicionar uma margem. Então vamos margem, ser para baixo e vamos para. E vamos ver como isso parece por agora e também um top emergente de três também, apenas para adicionar um pouco de espaço entre a partir do topo da página. Então vamos ver como isso fica lá. Basta mover isso um pouco para baixo e adicionar um pouco de espaço entre ela, cada um em seu parágrafo, e isso parece muito bom por enquanto. 5. Como adicionar nossos sites informações de direitos autorais: Tudo bem, então o que está começando a tomar alguma forma aqui. Podemos ver que estamos quase completos. Só temos que fazer algumas coisas aqui. A coisa que vamos fazer nesta lição é realmente adicionar nossos sites informações de direitos autorais logo abaixo do nosso formulário e o elemento dem Ultron aqui. Então eu vou adicionar um parágrafo aqui, e eu vou apenas manter nossas informações de direitos autorais. E no nosso caso, vamos fingir que estamos ligando de volta ao site desta empresa para o qual eles querem que projetemos seu site. Então vamos enfiar isto aqui depois de escrevermos. Vocês estão todos aqui? Vamos adicionar um texto âncora logo depois daqui e vamos colocar algo ao longo das linhas do bootstrap. Na verdade, Breaux, quero dizer, supostamente são profissionais que sabem. Continuo pensando que são profissionais, mas é a prosa bootstrap que está projetando este site. Você coloca isso nas informações de direitos autorais aqui, e isso deve ser um link clicável. E vamos, uh, tentar abrir. Vamos ver como isso fica na página dela. Certo, então podemos ver aqui. É bem aqui, e precisamos de um pouco mais de espaço aqui, então eu vou realmente na margem aqui. Há duas coisas que podemos fazer. Poderíamos colocar o parágrafo fora da tendência geral se ou pudéssemos apenas adicionar uma margem aqui e eu vou adicionar uma margem já que o anarquista em nosso site, isso não faz essa grande diferença. Então eu vou para a margem superior e vamos tentar algo ao longo das linhas de três quartos, então isso deve ser suficiente para adicionar espaço suficiente para que você possa ver que ele está realmente empurrando o parágrafo aqui para o fundo fora do Jumbotron. Mas isso não vai importar no caso de nossos sites, então está parecendo muito bom aqui, e é basicamente isso para nossas informações de direitos autorais. Agora podemos começar a estilizar o nosso site ainda mais, e eu estou apenas verificando o Mobile Virgin aqui e tudo parece muito bom aqui também. 6. Toques finais para o nosso site: Tudo bem, então estamos quase terminando com nosso site bootstrap aqui. Temos apenas alguns retoques finais para fazer, e então nosso site estará completo. Então a primeira coisa que precisamos fazer é fazer uma nova pasta e vamos chamá-la de imagens, e eu vou pegar minha imagem aqui e vamos jogar na pasta. E se vocês precisam da imagem, você pode baixá-la na seção Donald para download no início do curso aqui. Vou ter a versão final com o arquivo de imagem dentro. Então eu vou copiar aqui, e eu vou colocar na nossa pasta de imagens. Você tem que se lembrar desse nome, fundo para imagem e em seguida, vamos para o nosso HTML e vamos abrir nosso arquivo CSS ponto personalizado que criamos anteriormente. Agora vamos sugerir alguns estilos CSS personalizados que vão substituir nossos estilos de bootstraps ou qualquer coisa. Queremos adicionar mais ao nosso site. Vamos ficar aqui também. A primeira coisa que vamos fazer é mudar o fundo ou um site para corresponder à imagem que coloquei na pasta de imagens dela. Então a primeira coisa que precisamos fazer é direcionar o elemento corpo de sua página, e o elemento corpo é basicamente ocupa toda a nossa página da Web. E vamos mudar o fundo para a imagem que tínhamos anteriormente. Então começamos a si mesmo com a propriedade CSS de fundo. Eu vou ficar. Vocês estão todos aqui, e eu vou declarar o caminho do arquivo para a nossa imagem. Então temos imagens e, em seguida, fundo. Esse JPEG é o nosso nome de arquivo que queremos usar para o nosso plano de fundo. Então isso irá trazer a imagem que colocamos anteriormente e usá-la como o fundo de um site. Eu também preciso ter certeza que eu adicionar este Ford corte aqui antes das imagens. Caso contrário, não funcionará corretamente. Então vamos salvar essa falta e ver se funciona. Boom, lá vamos nós. Podemos ver que suas imagens agora o fundo de um corpo. Mas o problema é que um jumbotron tem seu próprio passado também. Primeiro, eu também vou colocar a cobertura de fundo aqui em nosso elemento do corpo, e isso é isso vai esticar nossa imagem e garantir que ele tipo de se encaixa melhor no fundo, então vamos colocar a cobertura de fundo em. Nossa imagem vai mudar um pouco aqui quando você atualizar a página, que parece um pouco melhor. Mas ainda precisamos nos livrar desse fundo para nosso elemento Jumbotron. E nós podemos que você realmente facilmente, criando uma classe para o nosso Jumbotron segmentado em nosso CSS e podemos dar-lhe o valor de fundo da porca. Então, na verdade, vamos colocar isso em um jumbotron porque esse é o nome Jumbotron de John Beltran. E mais uma vez vamos para o fundo e depois vamos selecionar nenhum. E isso vai se livrar do fundo completamente e elemento fabricante transparente. E atualizamos sua página. Lá vamos nós. Podemos ver aqui que toda a nossa imagem de fundo está ocupando toda a página e nosso plano de fundo pro jumbotron agora se foi. Mas nosso texto não é muito legível aqui, então precisamos mudar a cor disso. E acredito que a cor que vamos mudar também é branca. Então, podemos apenas ir ponto jumbotron alvo o elemento de parágrafo dentro do Jumbotron e com a propriedade de cor CSS, nós apenas furar e branco para alterar o texto tudo para esperar. Eu também vou mirar o Jumbotron H um e nós vamos fazer a cor branca também . Então vamos economizar isso. Você primeiro a nossa página. Você vê que nosso texto está agora todo branco em nossa página e parece muito melhor. Você pode realmente lê-lo agora para que pareça muito bom adicionar um pouco mais de estilo ao nosso site. Vamos fazer isso ser notificado. Botão a cor azul não pode corresponder ao nosso texto na parte inferior dos nossos direitos autorais. E eles meio que vão muito bem com o fundo roxo que temos. Então vamos para o conteúdo. Vamos encontrar o texto dos botões aqui, e vamos com este botão principal aqui. Então, novamente, olhando para o trecho de código, podemos ver que esta classe é a classe de BT n traço primário. Isso mudará seu botão para azul. Então é copiar essa classe aqui, voltar para o html dela e onde está o nosso Mas perto nós nos livramos desta classe secundária botão e ir botão primário. Dê-lhe um cofre rápido e isso deve mudar o nosso botão para azul. Incrível. Isso parece muito melhor na versão final da nossa página web estão de volta na era realmente muito mais escuro. Vou mostrar-lhe algum código CS CSS que podemos usar para mudar o texto Grady do nosso fundo para ser mais brilhante ou mais escuro. E este é um comando muito legal. Você pode usar algumas coisas muito legais com ele e realmente melhorar a forma como as imagens olhar em seu site. Então vamos voltar para o nosso CSS e com a nossa propriedade de cor de fundo aqui para o nosso corpo, vamos adicionar o Grady int propriedade mais magro para ele e eu vou apenas digitar isso. E depois vamos explicar como esse código real funciona e funciona. Então primeiro temos ingrediente linear e, em seguida, temos rgb A que é basicamente o e transparente do fundo. Vamos adicionar a próxima parte para cima e para baixo e para esquerda e direita. E reparou que dei a eles um valor zero, exceto o último. Dei-lhe 10,7. Este 0.7 é o que realmente vai mudar a escuridão vindo para uma sombra mais escura ou mais clara , dependendo do valor escolhido. Então, se darmos um rápido salvamento e vamos apenas vê-lo e ver o que isso mudou. Em nosso site, podemos ver que a parte de trás na verdade ficou muito escuro aqui. Está muito, muito escuro. É um efeito legal, mas é quase um pouco escuro demais. Então o que podemos fazer para torná-lo mais escuro se você quiser, ou se você quiser torná-lo mais brilhante, podemos voltar para esta propriedade. Podemos mudar o número se mudarmos para seis em vez de 60.7. Mas isso vai fazer vai torná-lo um pouco mais brilhante apenas um pouco mais brilhante. E isso parece muito melhor. Gosta do jeito que parece. Parece bem legal. E você pode personalizá-lo como quiser. Você pode alterar os valores para ver como isso afeta, mas eu acho que isso parece muito bom para o nosso site. No nosso caso, uma coisa que precisamos consertar aqui é Adul sobre o espaço entre nosso botão. Vou adicionar uma margem superior de uma sala ao nosso grupo de entrada aqui. Isso está indo um pouco mais de espaço entre nosso botão e parágrafo lá, que parece muito bom Então lá vamos nós. Acho que o nosso site está bastante completo. Sinta-se livre para fazer quaisquer alterações personalizadas diferentes que você gosta. Mas vamos fazer uma visão rápida e verificar tudo para ter certeza que está tudo bem. Podemos ver aqui que o nosso site é totalmente funcional e vista de desktop, bem como uma visão móvel .