Coloque suas botas,
e vamos começar com Bootstrap.
Tenho certeza que seus dedos estão coçando para colocar suas mãos em volta do Bootstrap.
Então, primeiro passo, vá para
as instruções de exercícios que seguem este vídeo
na página do seu curso Bootstrap em Coursera.
E, em seguida, nas instruções,
você verá um link para este arquivo Bootstrap4-starter.zip.
Baixe o arquivo zip para o seu computador.
Além disso, as instruções passo a passo ilustradas neste vídeo
também serão dadas nas instruções de exercício que seguem este vídeo.
Lá, você terá acesso a qualquer um dos trechos de código que você precisa para este exercício.
Este seria o caso de todos os exercícios no futuro, também.
Então, se você precisar se apossar dos trechos de código,
é aí que você os encontrará.
Depois de baixar o arquivo zip,
mova esse arquivo zip para um local conveniente no computador.
Então, aqui, eu o movi para uma pasta chamada Coursera no meu computador,
e então eu tenho o arquivo zip com esse nome longo lá.
Apenas descompacte o arquivo.
Depois de descompactar o arquivo,
você encontrará uma pasta chamada Bootstrap4 criada em seu computador.
Dentro da pasta Bootstrap4,
você verá outra pasta chamada Confusion, lá.
Vá para a pasta Confusion e você veria dois arquivos lá,
index.html e package.json arquivo.
Agora, abra uma janela de comando ou
um terminal e, em seguida, mova para esta pasta em sua janela de comando ou terminal.
No prompt de comando, digite npm install.
Note que eu já tenho o arquivo package.json lá dentro.
Portanto, o arquivo package.json é configurado para que
a dependência de desenvolvimento lite-server seja instalada se eu digitar npm install.
Então, uma vez que você digitar npm install,
você verá que o lite-server será instalado em sua pasta node_modules cada.
Uma vez concluído,
abra esta pasta no seu editor favorito.
Depois de ter a pasta aberta no editor,
crie um arquivo.gitignore e, em
seguida, coloque node_modules no arquivo gitignore e salve.
Portanto, isto é para garantir que quando você faz um gitcommit,
a pasta node_modules não será confirmada.
Depois disso, é hora de ir buscar Bootstrap para uso em nosso projeto.
Antes de buscar Bootstrap,
vamos fazer um commit do estado atual do arquivo.
Então, faça git init e inicialize seu repositório git.
Então você pode verificar o status do git,
e você veria que esses arquivos precisam ser confirmados,
adicionar todos os arquivos,
gitcommit -m “Configuração Inicial”.
Então este é o ponto de partida da sua pasta neste momento.
Então, com isso, seu ponto de partida do seu projeto web foi agora comprometido com o git.
Agora você pode configurar este git para sincronizar com um repositório online,
assim como falamos nos exercícios git.
Assim, você pode configurar um repositório no Bitbucket ou no Github e, em seguida,
sincronizar este projeto com esse repositório git.
Nosso próximo passo é ir buscar Bootstrap.
Para fazer isso, adicione o tipo de prompt npm install bootstrap @4 .0.0 e também —save,
e deixe o Bootstrap ser instalado.
Uma vez que Bootstrap é instalado,
percebemos que também precisamos instalar seu peer,
que é jQuery, bem como Popper.js.
Então, vamos em frente e instalar o jQuery e o Popper.js nesta pasta do projeto.
Então, para fazer isso, adicione o tipo de prompt npm install
jquery @3 .3.1
e Popper.js @1 .12.9 —save.
Agora, sempre que instalo qualquer um dos pacotes npm,
estou especificando explicitamente a versão do pacote que você deve instalar.
A razão para isso é que eu quero ter certeza de que, à medida que você passar por este exercício,
todas as etapas funcionarão corretamente.
Então eu estou especificando a versão exata dos módulos npm a serem instalados.
Então, aqui, estamos instalando o jQuery versão 3.3.1 e Popper.js versão 1.12.9.
Posteriormente, também, especificarei as versões exatas dos módulos a serem instalados.
Então vamos em frente e instalar estes.
E uma vez que eles são instalados,
podemos ir para o próximo passo.
Voltando para a nossa pasta de projeto,
você verá que se você entrar em node_modules,
você verá uma pasta lá chamada Bootstrap.
E dentro da pasta chamada Bootstrap,
você encontrará uma pasta chamada dist.
Então, dentro da pasta dist,
você vai encontrar duas sub-pastas chamadas CSS e js.
Se você entrar na pasta CSS,
você encontrará um monte de arquivos CSS pré-compilados aqui.
O que é de interesse para nós no início é Bootstrap min.css.
Esse é o arquivo que vamos incluir em nosso
arquivo index.html para fazer uso do Bootstrap em nosso projeto.
Da mesma forma, indo para a pasta js,
você veria que há um arquivo Bootstrap min.js.
Nós vamos incluir isso também em nosso index.htm.
Então esse será o próximo passo que você me verá fazendo.
Antes de irmos para o próximo passo,
vamos iniciar nosso lite-server para que possamos ver as alterações que fazemos no
index.html imediatamente refletidas em nossa página web em tempo real.
Então vamos iniciar os servidores de lite-.
Então, digite o prompt tipo npm start
e, em seguida, que deve iniciar seu lite-server.
Agora você pode ver, na tela,
meu editor à esquerda e a versão atual da página index.html à direita.
Então, como você pode ver,
eu já configurei a página index.html com algum conteúdo.
Esta página web parece a típica página web de um professor de ciência da computação.
Vamos agora abrir a página index.html em nosso editor.
E então, na parte principal da página index.html,
logo antes do título,
vou colar um pouco de código.
Este trecho de código é dado a você nas instruções.
Então você pode simplesmente copiar e colar este trecho de código,
e eu vou orientá-lo através do que este trecho de código está tentando fazer.
Você vai notar que eu tenho três meta tags aqui.
O primeiro diz charset="utf-8".
Então este é o unicode que vai ser usado.
A segunda linha que diz meta name="viewport”,
Eu vou voltar e explicar esta linha particular para
você na próxima lição quando vamos olhar para web design responsivo.
Agora, deixe-me chamar a sua atenção para esta linha em particular que
diz link rel="stylesheet”, e depois href.
Note que estou especificando href como “node_modules/bootstrap/dist/css/bootstrap.min.css”.
Então o que eu estou especificando é que o arquivo bootstrap.min.css,
que contém as classes CSS correspondentes ao Bootstrap que nós
baixamos usando NPM para nossa pasta node_modules,
eu vou incluir isso no cabeçalho da minha página index.html.
Então você precisa incluir as classes CSS fornecidas pelo Bootstrap.
Você também precisa incluir as classes JavaScript fornecidas pelo Bootstrap, o
que vamos fazer na parte inferior desta página.
Indo para a parte inferior desta página, observe,
pouco antes da tag body de fechamento,
eu vou colar no código para incluir todos os scripts lá.
Então, para fazer isso,
eu apenas colar nas três linhas para o script incluir o jQuery
, Popper.js e também o Bootstrap min.js.
E observe a ordem em que incluí isso.
Então o Bootstrap está na parte inferior.
Então, desde Bootstrap é dependente tanto jQuery e Popper nessa ordem,
então eu vou primeiro inserir jQuery.
E depois disso, inserimos Popper e, finalmente,
Bootstrap min.js na parte inferior do arquivo index.html.
Agora, isso está incluído na parte inferior da página.
Porque quando você está carregando a página de um servidor web,
você deseja que as classes CSS sejam carregadas imediatamente para que, à medida que a página começa
a renderizar, quando
o JavaScript é buscado, o JavaScript precisa executar para fazer alterações em
sua página com o código JavaScript,
e que vai levar um pouco de tempo.
Portanto, você não deseja que o usuário esteja esperando que
a página inteira seja carregada antes que ele veja algo na janela do navegador.
Então é por isso que normalmente carregamos as classes JavaScript
para o final da nossa página html pouco antes do body tech.
Depois de fazer essas alterações,
vamos salvar o arquivo.
Agora, a razão pela qual eu estou mostrando o
arquivo index.html no meu editor e também o navegador ao lado dele é,
no momento em que você salva as alterações que você fez no arquivo index.html,
observe como a renderização do navegador desse arquivo
imediatamente atualiza e veja o Bootstrap já em ação no a página.
Neste momento, você verá que sua página está usando o Times New Roman para renderizar todo o conteúdo.
No momento em que eu salvar a página da Web,
você percebe que as fontes que estão sendo usadas em sua página da Web foram alteradas.
Agora, sua página web está configurado para fazer uso das classes Bootstrap,
e ele está usando a tipografia padrão Bootstraps para renderizar todo o conteúdo.
O Bootstrap, por padrão, usa Helvetica Neue para a fonte.
Você pode alterar a fonte padrão para bootstrap e assim por diante,
mas isso estará além do escopo de nossa discussão agora.
Então, uma vez que você configurar sua página index.html e salvá-la,
você verá imediatamente o Bootstrap entrando em ação em nossa página da web.
Então é assim que eu vou continuar ilustrando, à
medida que adicionamos várias bootstraps, classes CSS
e componentes à nossa página web,
como a renderização dele em nosso navegador vai continuar mudando.
Agora, obviamente, a renderização da página em nosso navegador ainda é terrível.
É melhor do que a típica página de professores de ciência da computação,
mas definitivamente não legível.
Precisamos agora trazer em ação as várias classes CSS e
os componentes JavaScript que
nosso framework Bootstrap web UI fornece, a fim de projetar nossa página web.
Então vamos fazer isso passo a passo à medida que passamos por este exercício.
Este pode ser um momento conveniente para você fazer um commit git
das alterações que você fez para que, no final deste exercício,
seu estado da pasta do projeto será salvo em seu repositório git.
Indo para minha pasta Confusion em outra guia da minha janela de terminal,
se eu digitar git status,
agora vejo que meu arquivo index.html e o pacote do arquivo JSON foram modificados.
Então eu vou fazer um compromisso.
Então, agora, meu status
da pasta no final deste exercício foi comprometido com meu repositório git.
Você pode sincronizar isso com seu repositório on-line para que
o estado do seu projeto seja salvo neste momento.
Com isso, completamos nosso primeiro exercício Bootstrap.
Você já viu como podemos configurar o Bootstrap para ser usado em nosso projeto web.
À medida que avançamos para os próximos exercícios,
vamos empregar as aulas Bootstrap para projetar nossas páginas web.