A estrutura CSS chamada Bootstrap é uma das estruturas amplamente usadas para criar e projetar aplicativos da Web. Possui estilos HTML, CSS e alguns componentes de design JavaScript para formas, botões, navegação e outros módulos de interface. Antes de usar o bootstrap, é preciso adicionar os links CSS, JavaScript e JQuery necessários.

Este artigo descreverá os métodos sobre como adicionar Bootstrap a um projeto.

Como adicionar Bootstrap a um projeto?

Existem duas maneiras de adicionar Bootstrap a um projeto:

• • Baixar Bootstrap
  • Adicionando bootstrap de um CDN

Método 1: Download de bootstrap

Se você deseja hospedar Bootstrap em seu site, faça o download do Bootstrap em seu site oficial e siga as instruções.

Método 2: Adicionando Bootstrap de um CDN

Uma rede global chamada CDN ou rede de entrega de conteúdo armazena em cache o recurso estático para um site em todo o mundo. Os recursos incluem imagens, vídeos, CSS e muito mais. Ele torna o tempo de carregamento do site mais rápido, carregando os arquivos estáticos do servidor CDN relativamente próximo. Maxcdn oferece suporte para CDN para JavaScript e CSS da Bootstrap. jQuery também deve ser incluído.

Vamos implementar um exemplo para criar uma página da web usando o bootstrap.

Exemplo: Crie uma página da web usando o bootstrap

Para criar uma página da web com bootstrap, experimente as seguintes etapas:

Etapa 1: Crie um arquivo HTML

Primeiro, crie um arquivo html e nomeie -o com a extensão “.html”. No nosso caso, nomeamos o arquivo HTML “índice.html”. Depois de criá -lo, adicione os elementos necessários como mostrado abaixo:

Etapa 2: Adicione o link de bootstrap CSS necessário

Agora, adicione o link CSS de bootstrap necessário dentro do elemento "":

Vamos supor que estamos usando o Bootstrap 4, então visite o site oficial do Bootstrap 4 e copie o link CSS para a seção HTML Head.

Bootstrap CSS

Etapa 3: Adicione as tags de script necessárias

Existem vários componentes do bootstrap que precisam de JavaScript para funcionar corretamente. Mais especificamente, eles precisam de plugins JQuery, Popper e JavaScript. Para adicioná -los ao seu projeto, use o “”Tags, logo antes do“”Tag de fechamento:

Nota importante: A sequência das tags "" não deve ser alterada, como o jQuery deve ser colocado primeiro, JS e terceiro Popper.JS.

Dica de bônus

Existe uma maneira simples e mais fácil de incluir Bootstrap em seu projeto. O modelo de partida pode ser copiado do site oficial do Bootstrap e colado em seu projeto.

Etapa 4: Adicione elementos HTML

Adicionamos com sucesso os links de bootstrap necessários. Agora, adicione os elementos HTML para criar uma página da web. Por exemplo, no exemplo em andamento, adicione os elementos html dentro do “”Elemento como mencionado abaixo:

• • Primeiro, adicione um “”Elemento para criar uma área para os elementos. Atribua o “Centro de texto" e "BG-Info" Aulas.
  • Dentro do "", adicione o "

    ”Tag com a classe“envergonhamento de texto”Para especificar um título em cor amarela.

  • Em seguida, inclua algum conteúdo de texto usando o “

    " elemento.

Html

Linuxhint

Linuxhint fornece os melhores artigos e vídeos para fins educacionais!

As classes de bootstrap usadas no exemplo acima mencionado são explicadas abaixo:

• • O "Centro de texto”Centro de classe alinha o texto.
  • ““BG-Info”Adiciona uma cor azul.
  • ““BG-caules”Aplica a cor amarela ao texto.

Salve o código e inicie -o no navegador. A página da web ficará assim:

É assim que você pode adicionar Bootstrap ao seu projeto.

Conclusão

Para adicionar Bootstrap ao seu projeto, “Baixe o bootstrap" ou "Use Bootstrap CDN”São as duas opções. Para baixar o bootstrap, visite o site oficial e siga o guia e, se você não quiser baixá -lo, use -o através do CDN. Para fazer isso, adicione o link CSS dentro do “Seção do HTML e adicione as tags de jQuery, JavaScript e Popper.JS perto do fechamento “" marcação. Em seguida, inclua os elementos HTML após a tag de início do “" elemento. Este artigo explicou como adicionar Bootstrap a um projeto com um exemplo.