O projeto está inativo

Hotsite com Bootstrap e jQuery

Neste exemplo veremos como criar o layout de um hotsite no modelo One Page (uma única página). Na construção deste exemplo utilizaremos HTML, CSS, Bootstrap e jQuery, além do iframe do Google Maps.

1 - 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:

Ficou com alguma dúvida?