Neste post vamos começar fazendo um site com Bootstrap, a estrutura de código aberto que torna mais fácil para nós torná-lo responsivo e fornecer alguma interatividade. É um template básico gerado automaticamente por um plugin de ambiente de desenvolvimento que recomendamos antes e que teremos que modificar.
No artigo anterior Você encontrará as instruções para instalar o VS Codium, traduzir sua interface de usuário para o espanhol e instalar o plugin Bootstrap.
Duas coisas para manter em mente:
- Os comandos que usamos são atalhos de teclado, você precisa digitá-los. Copiar/colar não funciona.
- Nosso gerenciador de conteúdo não me permite exibir o código HTML, então tenho que usar capturas de tela. Para que você tenha acesso ao código dos exemplos que eu carreguei para o GitHub.
Como clonar um repositório GitHub
O que separa os grandes do resto de nós é a maneira como eles reagem aos problemas. Richard Stallman não gostou do driver de sua impressora e como eles não o deixaram mudar, ele começou o movimento do software livre. Linus Torvalds não foi convencido por nenhuma das plataformas de compartilhamento de código e criou a sua própria. git.
Ao contrário dos sistemas tradicionais de distribuição de software em que a única interação do usuário permitida é o download, com o Git você pode acompanhar a evolução do projeto ao longo do tempo. Outras pessoas podem clonar o repositório, fazer modificações e propor que os desenvolvedores do projeto original os incorporem. Se aceito, os desenvolvedores podem fazer isso facilmente sem precisar baixar e reenviar os arquivos.
Existem vários serviços baseados em Git, eu escolhi o GitHub simplesmente porque se integra ao VS Codium.
Para baixar os arquivos de amostra para o seu computador, você só precisa instalar o pacote git seguindo as instruções da sua distribuição para instalar os pacotes no terminal.
Em seguida, digite os seguintes comandos.
Eu prefiro salvar os arquivos na pasta Documentos então mudo o diretório com
cd Documentos
Então eu clonei os arquivos com:
git clone https://github.com/dggonzalez1971/bootstrap.git
Vou lembrá-lo dessas etapas em cada um dos artigos restantes, pois dessa forma você atualizará os arquivos de exemplo à medida que forem carregados.
Para ver os arquivos basta abrir o explorador de arquivos e procurar a pasta inicialização.
Fazendo um site com Bootstrap
Caso prefira digitar o código manualmente começamos criando uma pasta na qual iremos salvar o site. Você pode colocar o nome que quiser.
Então seguimos os próximos passos:
- Vamos ao cardápio Arquivo.
- Clique em Novo arquivo de texto.
- Clique em Guarda.
- Procuramos a pasta que criamos e colocamos o nome do arquivo exemplo1.html.
- Clique em Guarda.
Às vezes, a janela do File Explorer pode ser ocultada pela do VSCodium.
Vamos fazer com que a extensão crie o modelo básico para nós. Para isso digitamos !b5-$
Isso gerará o código que você encontrará na pasta de exemplos como example1.html
Veremos o seguinte:
Este é o código gerado pela extensão Bootstrap.
Vamos fazer algumas alterações neste arquivo. Você encontrará as modificações sob o nome example2.html
- Na linha 2, alteramos o idioma substituindo eng por es. Isso indica aos motores de busca que o idioma do site é o espanhol.
- Na linha 6 alteramos o texto que está sob os rótulos título. Nós colocamos Meu primeiro site Bootstrap.
- Na linha 12 alteramos o conteúdo entre as tags h1 por Este é um site feito com Bootstrap.
A seguir, faremos algumas modificações importantes. Essas modificações têm a ver com:
- O desenvolvedor do plugin não consegue acompanhar as versões do Bootstrap e existem versões mais atuais.
- Existem muitas opções para componentes de bootstrap e estou interessado em outra.
- De acordo com a documentação oficial, as chamadas para as bibliotecas Javascript devem estar dentro das tags body.
Por exemplo 2, modificamos o conteúdo da linha 7, excluímos as linhas 8 e 9 e carregamos o conteúdo restante para manter a compatibilidade de numeração. Então clicamos no final da linha 10 para criar uma nova linha 11 e colocar o link para as bibliotecas Javascript.
Não se preocupe se você não entender o código. Explicarei a função de cada linha no próximo artigo.