Maneiras simples de instalar o bootstrap: 10 etapas (com imagens)

Índice:

Maneiras simples de instalar o bootstrap: 10 etapas (com imagens)
Maneiras simples de instalar o bootstrap: 10 etapas (com imagens)

Vídeo: Maneiras simples de instalar o bootstrap: 10 etapas (com imagens)

Vídeo: Maneiras simples de instalar o bootstrap: 10 etapas (com imagens)
Vídeo: 🟣 Como SALVAR um VÍDEO do TIKTOK no CELULAR (Android e iPhone) 2024, Maio
Anonim

Este wikiHow ensina como baixar os arquivos do Bootstrap para o seu computador e vinculá-los aos seus textos HTML para usar os elementos do Bootstrap no seu código. Depois de baixar e vincular os arquivos Bootstrap, você pode começar a usar todas as folhas de estilo e elementos JavaScript do Bootstrap em seu web design.

Passos

Etapa 1 de instalação do Bootstrap
Etapa 1 de instalação do Bootstrap

Etapa 1. Abra o site do Bootstrap em seu navegador de internet

Digite https://getbootstrap.com na barra de endereço e pressione ↵ Enter ou ⏎ Return no teclado.

Etapa 2 de instalação do Bootstrap
Etapa 2 de instalação do Bootstrap

Etapa 2. Clique no botão Download

Isso abrirá a página "Download".

Etapa 3 de instalação do Bootstrap
Etapa 3 de instalação do Bootstrap

Etapa 3. Clique no botão Download abaixo de "CSS e JS compilados

" Isso fará o download dos arquivos Bootstrap completos para o seu computador como um arquivo ZIP.

Se for solicitado, selecione um local para salvar o ZIP do Bootstrap

Etapa 4 de instalação do Bootstrap
Etapa 4 de instalação do Bootstrap

Etapa 4. Extraia os arquivos do arquivo ZIP

Encontre o arquivo ZIP que você acabou de baixar e clique duas vezes nele para extrair todos os arquivos nele para a mesma pasta.

  • Isso irá extrair duas pastas chamadas " css" e " js."
  • Se seu aplicativo descompactador não extrair os arquivos automaticamente, consulte este artigo para ver todas as maneiras de exportar um arquivo ZIP.
Etapa 5 de instalação do Bootstrap
Etapa 5 de instalação do Bootstrap

Etapa 5. Mova as pastas extraídas para a mesma pasta dos arquivos HTML do seu site

Abra a pasta que contém todos os arquivos HTML do seu site e arraste o botão " css" e " js"pastas aqui para movê-los para a mesma pasta dos documentos do seu site.

Agora você pode vincular os arquivos aos seus arquivos HTML e começar a usar o Bootstrap em seu código

Etapa 6 de instalação do Bootstrap
Etapa 6 de instalação do Bootstrap

Etapa 6. Clique com o botão direito do mouse no arquivo HTML que deseja usar com o Bootstrap

Você pode usar o Bootstrap em apenas um de seus arquivos HTML ou em todos eles.

Etapa 7 de instalação do Bootstrap
Etapa 7 de instalação do Bootstrap

Etapa 7. Passe o mouse sobre Abrir com no menu do botão direito

Um submenu aparecerá com aplicativos compatíveis.

Etapa 8 de instalação do bootstrap
Etapa 8 de instalação do bootstrap

Etapa 8. Selecione seu programa de edição de texto

Isso abrirá o arquivo HTML selecionado em seu editor de texto.

Você pode usar um editor de texto simples como Bloco de anotações ou TextEdit bem como um editor de código dedicado como Átomo (https://atom.io) ou Coda (https://panic.com/coda).

Etapa 9 de instalação do Bootstrap
Etapa 9 de instalação do Bootstrap

Etapa 9. Adicione os links do Bootstrap ao cabeçalho do arquivo HTML

Antes de usar o código Bootstrap em seu HTML, você terá que digitar ou colar as linhas abaixo no cabeçalho do seu código:

Se você deseja vincular e usar alguns dos outros arquivos das pastas css e js, basta adicionar novas linhas ao cabeçalho e substituir as partes css / bootstrap.css e js / bootstrap.js pelos nomes dos arquivos que você deseja para vincular

Etapa 10 de instalação do Bootstrap
Etapa 10 de instalação do Bootstrap

Etapa 10. Verifique o posicionamento dos links do Bootstrap no código

No cabeçalho do HTML, ambas as linhas devem estar localizadas entre as linhas e a linha.

  • Depois de adicionar essas linhas ao cabeçalho, você pode começar a usar os elementos do Bootstrap neste arquivo HTML.
  • Você pode encontrar uma lista completa de todos os elementos do Bootstrap em https://getbootstrap.com/docs/4.3/getting-started/introduction. Basta clicar em qualquer categoria como Layout ou Componentes no menu esquerdo.
  • Depois de instalar o Bootstrap, você pode inserir ou copiar / colar qualquer parte do código daqui em seu próprio código.

Recomendado: