Primeiras aulas do curso Bootstrap 4: Criando uma landing page responsiva

Bootstrap 4: Criando uma landing page responsiva

Instalando o bootstrap e implementando a navbar - Introdução

Olá, sou a Juliana e acompanharei vocês neste curso introdutório de Bootstrap 4, uma ferramenta maravilhosa que nos ajuda a desenvolver de forma mais rápida, além de melhorar a funcionalidade da responsividade. Todos os sites, e tudo que temos em um aplicativo, por exemplo, ficam com aspecto visual similar, sem que tenhamos que nos preocupar muito com CSS puro.

Neste curso, faremos várias partes da Landing page, partindo de um modelo PNG para outro, já implementado. Começaremos pela navbar com o modal de contato, o formulário, o carrossel de imagens, cards alinhados, e o melhor de tudo é que tudo será responsivo, funcionando tanto no browser do desktop quanto no celular.

Não só aprenderemos a utilizar o Bootstrap, como iremos estilizá-lo e, sobretudo entender como ele realmente funciona. Vamos lá?

Instalando o bootstrap e implementando a navbar - Instalando o Bootstrap

Para começarmos o projeto, vamos verificar o que a cliente nos solicitou — temos um arquivo PNG com um layout de como ela gostaria que ficasse a página dela, uma Landing page. Estas páginas normalmente são mais simples, estáticas, voltadas para a apresentação de produtos, então neste caso o Bootstrap nos serve muito bem para desenvolvermos de forma ágil.

No arquivo index.html temos as informações que nos foram enviadas por ela: título, imagens, alguns parágrafos, por enquanto sem nenhum estilo. O código do Bootstrap, assim como de qualquer framework, não vem com o código base do HTML ou CSS, então precisamos instalar todas as ferramentas, bibliotecas e frameworks que queremos utilizar em nosso projeto.

Para isso, acessaremos o site oficial e clicaremos no botão "Get started" e, na introdução da documentação, há alguns scripts de HTML e CSS, os quais iremos copiar e incluir em nosso código, entre as tags <head>. Para o Bootstrap funcionar corretamente, ele possui alguns componentes que fazem uso do JavaScript, então também copiaremos estes scripts, que são bibliotecas JS, entre elas o jQuery e o arquivo bootstrap.min.js. Desta vez, incluiremos este trecho copiado onde normalmente colocamos as tags de scripts JS, antes de fecharmos a <body>.

Assim, em vez de baixarmos todos estes arquivos e colocá-los na pasta "src" local, trazemos diretamente da internet. E no fim conseguiremos utilizá-los da mesma forma. Esta é a forma mais rápida de instalarmos o Bootstrap. Em seguida iremos verificar se houve alguma mudança em nossa página.

A fonte utilizada é outra, a margem também foi alterada. Veremos melhor o que aconteceu a seguir!

Instalando o bootstrap e implementando a navbar - Adicionando a navbar

Vimos que algumas mudanças ocorreram após adicionarmos o Bootstrap ao projeto, como a fonte, por exemplo, que foi trocada por um conjunto de fontes padrão do Bootstrap. Na parte de CSS, adicionamos o arquivo bootstrap.min.css, e isto traz vários estilos predefinidos de componentes (cores, botões, navbar e por aí vai).

Mais adiante veremos como substitui-los, caso queiramos; por enquanto, o importante é que o Bootstrap está instalado e funcionando. Seguindo o layout enviado pela cliente, precisaremos incluir uma navbar, uma barra de navegação no topo, contendo apenas o nome "fruta&fruto", e quatro links posicionados à direita.

A cliente quer que o site seja responsivo, então a nossa navbar também precisa ser. A documentação do Bootstrap nos traz alguns modelos prontos, bastando copiar o código de acordo com o que queremos. No caso, escolheremos a navbar mais próxima da solicitação da cliente, com um nome e quatro botões.

Copiaremos o código e o colaremos logo após a abertura da tag <body>, já que a navbar aparece no topo da página. Assim, dentro da <body> temos a <nav>, e dentro dela temos um link, o botão, e uma <div>, que contém outra <div> com links, que são os itens do menu.

Atenção para a indentação do código!

Antes de realizarmos qualquer tipo de modificação, vamos recarregar o nosso site para verificar o que houve. Temos uma navbar, ainda não exatamente igual ao que queremos, mas agora basta trocar algumas informações.

Antes disso, estávamos comentando sobre como o site precisa ser responsivo, assim como a navbar. O que acontece se alterarmos a largura do nosso site, diminuindo-a?

O Bootstrap nos traz uma navbar preparada para isso, isto é, que já é responsiva por padrão, e isso irá nos ajudar bastante. Vamos fazer melhor, e simular a visualização do site em um celular por meio das ferramentas de inspeção de elementos.

Na página, clicamos com o lado direito do mouse e em "Inspecionar Elemento", e então no ícone com dispositivos, referente a "Responsive Design Mode", que traz a visualização no modo mobile. Podemos inclusive selecionar o modelo do celular, no canto superior esquerdo da tela.

A seguir personalizaremos a navbar para deixá-la como queremos.

Sobre o curso Bootstrap 4: Criando uma landing page responsiva

O curso Bootstrap 4: Criando uma landing page responsiva possui 170 minutos de vídeos, em um total de 57 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas