Next.js com Bootstrap – Aula 002 – Curso 2021

Aula de Next.js com Bootstrap completa, gratuita, fácil e rápida. Aprenda o básico para começar a desenvolver sua primeira página utilizando Next, Bootstrap, Github e Versel.

Exemplo:

https://github.com/vercel/next.js/tree/canary/examples/with-react-bootstrap

Lista de comando utilizados:

GITHUB:

– git remote add origin https://github.com/webdeveloperbrasil/next-aula-002
– git branch -M main
– git push -u origin main
– git status
– git clone
– git add .
– git commit -am
– git commit origin main

NPM:

– npx create-next-app –example with-react-bootstrap with-react-bootstrap-app
– npm run dev

ARQUIVOS EXTRAS:

– components/Menu.js
– pages/about.js
– pages/contact.js

shoelace.io – ferramenta de aprendizado Bootstrap

O que Shoelace? Para que serve Shoelace?

Shoelace é um construtor de grade Bootstrap. Super simples, fácil de usar e não tenta ser uma ferramenta WYSIWYG. Na verdade, o oposto.

Ele tinha 3 propósitos:

  1. Construir o HTML de grade, para mostrar como ele vai funcionar e mudar responsivamente
  2. Ensinar-lhe como Bootstrap funciona, tornando impossível fazer grades quebradas ou não conformes
  3. Descobrir como sua grade se relaciona com o original

como usar shoelace

Ficou claro que o Shoelace pode ser uma grande ferramenta pública para projetar e aprender como funciona o Bootstrap responsivo. O desenvolvedor se esforça para ele ser infalível e não contribuir para a confusão, mas torná-lo cristalino sobre o que está acontecendo em uma página html responsiva.

shoelace-4

shoelace-3