Fundamentos de Bootstrap 4

📖Projeto

Para todos aqueles que estão iniciando a caminhada no meio Dev e sentem dificuldade de entender o conteúdo ou o que cada coisa faz.

Ao clonar esse repositório tenha a curiosidade de ir mudando algumas coisas como os containers, resoluções e elementos.

🔧Pré-requisitos

Visual Studio Code
Bootstrap << download opcional, possui tudo o que precisamos no site

💻Instalação, execução e desenvolvimento

Visual Studio Code:

Após baixar o Visual Studio realize as seguintes etapas:

Abra o Folder onde salvou esse projeto

Bootstrap

Essa parte já esstá feita mas deixarei o processo caso queira tentar tambem!

✍Processo

Como eu fiz para adicionar o bootstrap:

<!DOCTYPE html> 

<html> 

<head> 

    <title>Bootstrap Fundamentos</title> 

    <!-- AQUI ADD A PARTE DO CSS DO BOOTSTRAP --> 

</head> 

<body> 

    <p>Bem-vindo ao Fundamentos via CDN (Content Delivery Network)</p> 

    <!-- AQUI ADD A PARTE DE JS DO BOOTSTRAP --> 

 </body> 

</html>

No site do bootstrap possui os sripts que deve copiar: https://getbootstrap.com/docs/4.4/getting-started/introduction/

Observação: Você deve colocar os scripts js por último por "n" motivos, um deles é porque o browser não vai renderizar a página enquanto ele não baixar o css & o script do js deve estar na ordem exata, se não, não irá funcionar.

Resumindo só segue o modelo (padrão).

📝Estruturas & Definições

As estruturas precisam estar dentro de um container

Containers:

É um elemento que vai conter dentro todos os outros elementos. Ele armazena as “div’s”.

O sistema de Grid (grade em português) no Bootstrap ajuda a alinhar o texto lado a lado e usa uma série de contêineres, linhas e colunas. O sistema Grid no Bootstrap usa ems e rems para definir a maioria dos tamanhos, enquanto os pxs são usados para pontos de interrupção da grade e larguras de contêiner. O sistema de grade de inicialização permite até 12 colunas na página.

Ele literalmente tem a forma de um container ^^

Existem principalmente cinco classes no sistema de grade que estão listadas abaixo:

Tambem chamados de Breakpoints.

.col- Extra Small ( < 576 px ) .col-sm- Small ( >= 576 px ) .col-md- Medium ( >= 768 px ) .col-lg- Large ( >= 992 px ) .col-xl- Extra Large ( >= 1200 px )

Essa formatação é diferente em mobile!

🏃‍♀️Alguns atalhos interessantes:

Para comentar >> SHIFT + ALT + A

Para formatar documento(a visualização do código organizada em tela) >> SHIFT + ALT + F ou CTRL + ;

💁‍♀️Agradecimentos:

Por proporcionarem alguns cursos gratuitos: (https://www.treinaweb.com.br/)

Por publicar um conteúdo interessante: (https://www.geeksforgeeks.org/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap/)

Feito com 💜 by Soonas

Soonas/bootstrapfundamentos