1

Resumo Bootstrap

#HTML #Bootstrap #CSS
Rosemeire Deconti
Rosemeire Deconti

Aqui estão as minhas anotações e percepções da utilização do Bootstrap que é mais um item para a minha caixinha de ferramentas.


Estou criando minha página pessoal no GitHub Pages e o Bootstrap tem me ajudado bastante. Minha página ainda está em construção, mas, em breve estará disponível. Ganhei em produtividade e posso focar no conteúdo.


Claro que continuo também desenvolvendo páginas com CSS puro e Media Query. Ainda estou em fase de aprendizagem e não quero esquecer de todos os conceitos.


Muitos dos textos abaixo eu capturei dos cursos que fiz e de sites da internet (mencionei os sites no final deste documento):


Características do Bootstrap

  1. Framework front-end: Framework é, de forma básica, um facilitador. Ele traz diversas soluções já pré-definidas, que descomplicam o trabalho dos profissionais no desenvolvimento de aplicativos e outros projetos digitais.
  2. Objetivo de criar aplicação responsiva: Design responsivo faz com que as páginas sejam bem renderizadas em uma variedade de dispositivos e tamanhos de janelas ou telas.
  3.  Alinhado com a filosofia mobile-first: conceito aplicado em projetos web onde o foco inicial da arquitetura e desenvolvimento é direcionado aos dispositivos móveis.
  4. Pode ser baixado e utilizado de forma gratuita.

 

Como referenciar o Bootstrap na sua aplicação:

Baixar os arquivos do site getbootstrap.com e incluir as devidas referências no HTML ou incluir as referências diretamente no HEAD:

  1. Incluir a referência dos arquivos Bootstrap (CSS compilado e reduzido): <link rel="stylesheet"ref="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  2. Incluir o arquivo JavaScript referente à biblioteca jQuery,: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  3. Incluir o arquivo JavaScript referente à biblioteca Popper: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  4. Incluir o arquivo JavaScript específico do Bootstrap: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  5. Para permitir a responsividade não esquecer de incluir: <meta name="viewport" content="width=device-width, initial-scale=1">

 

Como utilizar o Bootstrap na sua aplicação:

  1. Bootstrap requer um container para que o conteúdo da página seja responsivo e exibido adequadamente;
  2. O container pode ser definido utilizando um <div> e uma classe CSS do framework, que pode ser .container ou .container-fluid.
  3. Com a opção container, a página aparecerá centralizada (com margens nas laterais) em dispositivos com telas grandes;


As facilidades do Bootstrap:

  1. Cores Contextuais: existem classes para prover melhor significado ao texto através de cores;
  2. Tabelas: diversas classes possibilitam formatar rapidamente as tabelas HTML com estilos pré-definidos;
  3. Botões: classes definem a aparência de botões de acordo com o seu propósito;
  4. Alertas: classes para criar caixas de mensagens informativas;
  5. Ícones: utilizo a coleção Font Awesome com a classe “.fa” correspondente para que o ícone também seja responsivo;
  6. Formulários verticais e horizontais: coleção de classes para que formulários HTML sejam exibidos de maneira elegante e responsiva;
  7. Sistema de grade: organiza os elementos da página em linhas e colunas, de maneira responsiva;
  8. Janela modal: janela que exibida em cima das outras para apresentação ou coleta de informações de maneira conveniente, sem que o usuário seja redirecionado para uma nova página;
  9. Barra de navegação: classes facilitam a criação de barras de navegação.


Aguardo um feedback de vocês! Bons estudos a todos!


Referências


Documentação oficial

Introduction · Bootstrap (getbootstrap.com)


Tutorial

Bootstrap 4 Tutorial (w3schools.com)


Links muito úteis

O que é Bootstrap: Tudo sobre este Framework | Homehost

Framework front-end: o que são e os 5 melhores (mundodevops.com)

Introdução aos Sistemas de Informações (ufu.br)

MDN Web Docs (mozilla.org)

2
26

Comentários (2)

0
Rosemeire Deconti

Rosemeire Deconti

24/03/2021 11:19

Ricardo! Que bom que foi útil o artigo! No primeiro contato com Bootstrap eu pensei "é só isto?" ..... agora estou utilizando e gostei muito .... bons estudos!

1
Ricardo Ribeiro

Ricardo Ribeiro

24/03/2021 10:53

Boas dicas e ótimas orientações, estava precisando de referencias sobre o BootStrap

Apaixonada por tecnologia e informação. Na área desde 1.984 e sem previsão de parar.

Brasil