O que é o Bootstrap?

O Bootstrap é um framework front-end open-source desenvolvido para facilitar o desenvolvimento de websites e aplicações web responsivas e modernas. Ele oferece um conjunto de ferramentas que incluem: layout flexível com um sistema de grid responsivo, componentes prontos, estilos padronizados e funcionalidades JavaScript integradas.

Sistema de Grid Responsivo

O sistema de grid do Bootstrap é a base para a criação de layouts responsivos. Ele usa uma estrutura de 12 colunas para criar designs flexíveis. As classes são atribuídas de acordo com o tamanho da tela, como `col-sm-4` para telas pequenas ou `col-md-6` para telas médias.

Coluna 1 (6 colunas em telas médias)
Coluna 2 (6 colunas em telas médias)

Componentes do Bootstrap

O Bootstrap oferece uma série de componentes prontos para uso que ajudam a acelerar o desenvolvimento de interfaces. Alguns dos componentes incluem botões, carrosséis, modais, cartões, entre outros.

Exemplo de Botão

Exemplo de Cartão

Imagem do Cartão
Título do Cartão

Este é um exemplo simples de um componente de cartão do Bootstrap.

Saiba Mais

Responsividade no Bootstrap

O Bootstrap usa uma abordagem "mobile-first", o que significa que os layouts são criados com dispositivos móveis em mente e depois se ajustam conforme o tamanho da tela aumenta. Isso é feito usando as classes de grid que se adaptam automaticamente. Por exemplo:

  • col-sm- para telas pequenas
  • col-md- para telas médias
  • col-lg- para telas grandes
Cartão responsivo
Cartão responsivo
Cartão responsivo

Funcionalidades JavaScript no Bootstrap

O Bootstrap também inclui componentes interativos que requerem JavaScript para funcionar. Isso inclui modais, carrosséis, tooltips, entre outros. Para usar essas funcionalidades, você deve incluir o arquivo JavaScript do Bootstrap.