Como instalar o Bootstrap
O Bootstrap é uma estrutura da web de código aberto. É usado principalmente para desenvolvimento front-end. É gratuito. O Bootstrap foi desenvolvido pelo Bootstrap Core Team. O Bootstrap foi criado originalmente por Mark Otto e Jacob Thornton. Foi lançado inicialmente no ano de 2011. Foi escrito em HTML, CSS e JavaScript.
Pacote Bootstrap
Este pacote contém os seguintes itens:
- CSS : é chamada de folha de estilos em cascata usada para estilizar os elementos HTML.
- Componentes : No pacote Bootstrap, existem muitos componentes reutilizáveis para menus suspensos, iconografia, alertas, navegação etc.
- Personalizar : no pacote Bootstrap, os componentes podem ser personalizados, menos variáveis e plugins Jquery para obter o estilo.
- Andaimes : em um pacote de inicialização, ele fornece a estrutura básica com o sistema de grade, estilo de link e plano de fundo.
- JavaScript : em um pacote de inicialização, haverá plug-ins de javascript.
Etapas para instalar o Bootstrap
Vamos discutir as etapas necessárias para instalar o Bootstrap.
Etapa 1: use o link abaixo para baixar o bootstrap. Clique em Download, o pacote de inicialização será baixado em uma pasta Zip. Esta pasta contém a pasta CSS e JS.
https://getbootstrap.com/docs/4.0/getting-started/download/
O pacote de auto-inicialização baixado está pronto para usar o código compilado e pode ser facilmente integrado ao projeto. Consiste em pacotes CSS compilados e minificados e Plug-ins Javascript.
Etapa 2: Arquivo de origem : o Bootstrap pode ser compilado com o próprio pipeline de ativos com a ajuda de arquivos javascript, sass e documentação.
Clique em Download Source para obter os arquivos baixados. Ele contém js, CSS e outros arquivos.
Etapa 3: Gerenciadores de pacotes: O Bootstrap pode ser instalado nos arquivos ou aplicativos com tecnologia Node.js.
$ npm install bootstrap
Etapa 4: para aplicativos Node.js., o bootstrap também pode ser instalado com a ajuda do pacote yarn.
$ yarn add bootstrap
Etapa 5: se o usuário quiser instalar o bootstrap para aplicativos ruby gems
- Usando o bundler :
gem 'bootstrap', '~> 4.0.0' - Sem o empacotador :
$ gem install bootstrap –v 4.0.0
Etapa 6: o compositor pode ser usado para instalar e gerenciar o bootstraps sass e javascript
$ Composer require twbs/bootstrap: 4.0.0
Etapa 7: Usando o NuGet, você pode instalar e gerenciar aplicativos CSS de inicialização e sass e javascript para.Net.
- Bootstrap do pacote de instalação
- Pacote de instalação bootstrap.sass
Etapa 8: o Jquery também está sendo usado com arquivos de inicialização ou pasta de instalação. O Jquery precisa ser baixado e coloque o arquivo Jquery na pasta raiz do Bootstrap para experimentar a melhor interface do usuário e, o mais importante, o Jquery aprimora os recursos do bootstrap que proporcionam uma aparência mais atraente e responsiva.
Etapa 9: depois de executar as etapas acima, o desenvolvedor pode escrever o código HTML para vincular todos os arquivos da página HTML e pode abrir o arquivo HTML para verificar a resposta.
Navegadores suportados
O bootstrap suporta principalmente a versão mais recente e estável de todo o navegador e plataforma. O navegador de dispositivos móveis foi compatível com a plataforma Android e IOS. Os navegadores da área de trabalho para diferentes plataformas, como Mac e Windows, também são suportados pelo bootstrap.
Estrutura do arquivo de inicialização
- O bootstrap foi pré-compilado, a versão compilada do bootstrap é baixada e extrai o arquivo Zip e a seguinte estrutura de arquivo que você verá:
A figura acima inclui também os arquivos da pasta de fontes, se o desenvolvedor exigir fontes extras para tornar a interface do usuário de acordo com os requisitos, pode incluir os arquivos disponíveis no pacote de origem do bootstrap. O código fonte do bootstrap terá uma estrutura de arquivo mais detalhada.
Bootstrap 4
Existem mudanças significativas que são feitas no Bootstrap 4, como reescrever o código majoritariamente, suporte a tamanho flexível de CSS, opções de personalização de navegação foram adicionadas, utilitários de espaçamento de resposta e dimensionamento, aumento do tamanho da fonte global de 14px para 16px, número de utilitários são adicionadas classes, botão de estilo, menus suspensos, objetos de mídia e classes de imagem. Ele também suporta a versão mais recente dos navegadores.
A principal característica do Bootstrap é simplificar o desenvolvimento de páginas da web. O principal motivo para usar a inicialização é a escolha da cor, tamanho, fonte e layout para projetar. Ele fornece definições básicas de estilo para elementos HTML. Os plug-ins do Jquery e os componentes Javascript fornecem alguns elementos adicionais que podem ser usados para a interface do usuário, como caixas de diálogo, dicas de ferramentas etc. Os componentes de auto-inicialização também consistem em elementos de HTML, declarações CSS e código Javascript. Ele também possui o recurso de estender os elementos da interface existentes.
O outro componente principal do bootstrap são seus componentes de layout. O componente de layout básico é chamado de contêiner no qual todos os elementos da página são colocados nele. O contêiner é colocado na página da Web e outros componentes de layout, como o CSS, podem ser definidos por meio de linhas e colunas. Depende do desenvolvedor escolher qual contêiner de largura fixa ou de largura de fluido para projetar a página da web. O primeiro usa as quatro larguras predefinidas, mas depois os preenchimentos dependem do tamanho da tela na qual a página da web está sendo visualizada.
Uso do bootstrap
O bootstrap é muito fácil de usar e, com a ajuda do bootstrap, os desenvolvedores costumavam desenvolver sites responsivos. O Bootstrap também é usado, pois suporta muitos navegadores como Google Chrome, Mozilla Firefox, Internet Explorer, safari, ópera etc. O Bootstrap é fácil de começar e criar um sistema de grade responsivo. Ele incluiu plug-ins de javascript e há uma lista de empresas para usar. Possui boa documentação para iniciar e é capaz de trabalhar rapidamente. O Bootstrap mostrou um design responsivo e a primeira abordagem móvel. É de código aberto e gratuito. Economiza muito esforço e tempo. É personalizável. O uso importante do bootstrap é o design responsivo da web, que ajuda a ajustar o site de acordo com o tamanho da tela de todos os dispositivos, como laptop, desktop, telefone celular e tablet.
Conclusão - Como instalar o Bootstrap
O Bootstrap está usando amplamente como uma estrutura da web front-end. Ele suporta muitas linguagens de programação e plataformas independentes também. Possui excelente suporte da comunidade on-line para ajudar os iniciantes e a documentação também é boa no site oficial, onde todas as atualizações sobre o lançamento de uma nova versão e os recursos avançados foram publicados e documentados adequadamente. Tornou-se a estrutura da web popular para criar ferramentas diferentes e integrar-se a outra linguagem de script.
Artigos recomendados
Este foi um guia sobre como instalar o Bootstrap. Aqui discutimos as etapas para instalar o bootstrap e também o conceito básico do Bootstrap 4 e o uso do Bootstrap. Você também pode consultar os seguintes artigos para saber mais -
- Como usar comandos de inicialização
- Perguntas da entrevista do Bootstrap com respostas
- Comparações de Bootstrap e WordPress
- Instalação do WordPress