O projeto está inativo

Hotsite com Bootstrap e jQuery

Crie um layout de um hotsite no modelo One Page (uma única página) utilizando HTML, CSS, Bootstrap e jQuery, além do iframe do Google Maps.

Como criar um Hotsite com Bootstrap e jQuery

Layout One Page com Bootstrap

Neste exemplo criaremos um Hotsite no layout One Page utilizando, além de HTML e CSS, os frameworks Bootstrap e jQuery. E ainda nesse exemplo iremos incorporar o iframe do Google Maps para exibir a nossa localização.

O layout One Page é um conceito de web design, que visa a exibição de todo o conteúdo do site em uma única página, removendo a necessidade de navegar entre múltiplas páginas, o que é excelente para sites de pequenos ou médio porte.

Esse modelo de layout difere do modelo Single Page, que também trabalha com uma única página, mas tem o seu conteúdo carregado dinamicamente, de acordo com a interação do usuário. No modelo One Page o conteúdo completo do site já está disponível desde o carregamento da página.

Na criação do layout utilizaremos os seguintes componentes do Bootstrap:

  • Navbar;
  • Tabs;
  • List Group;
  • Thumbnail;
  • Input Group;
  • Modal.

Além dos plugins nativos do framework:

  • Affix;
  • ScrollSpy;
  • Tooltip.

O resultado final do nosso exemplo pode ser visto a seguir:

Hotsite Bootstrap

Sugestão de conteúdo

Se você quiser aprofundar os seus estudos, recomendamos os seguintes posts:

Links úteis:

Suporte ao aluno - Deixe a sua dúvida.
FAÇA PARTE DESSE TIME
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinámica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
Teste Grátis
  • Guias de Tecnologia
  • Cursos
  • Exercícios
  • Projetos completos
  • DevCasts
  • Artigos
  • Suporte em tempo real

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar