Há muitas perguntas aqui relacionadas ao Bootstrap. Eu vejo muitas pessoas usando. Então, tentei pesquisar e encontrei o site oficial do Bootstrap , mas havia apenas uma seção de download e algumas palavras depois disso. Nada que explique para que serve ... Acabei de entender que é um auxiliar de front-end. Eu tentei encontrar algo pesquisando no Google, mas não encontrei nada específico. Tudo o que encontrei está relacionado à definição de ciência da computação.

Então, minhas perguntas são:

• O que é o Bootstrap?
• Para que é usado e como ajuda no desenvolvimento de front-end?
• Eu também gostaria de mais alguns detalhes explicando isso.

É uma estrutura de código-fonte HTML, CSS e JavaScript (inicialmente criada pelo Twitter) que você pode usar como base para criar sites ou aplicativos.

• Mais informações e links para download

• Começando

• Exemplos

• Temas

• Bootply - Editor e Construtor de Bootstrap

Atualizar

O site oficial de inicialização é atualizado e inclui uma definição clara.

"O Bootstrap é a estrutura HTML, CSS e JS mais popular para o desenvolvimento de primeiros projetos móveis e responsivos na web."

"Projetado e construído com todo o amor do mundo por @mdo e @fat ."

O Bootstrap é um framework Javascript de código aberto desenvolvido pela equipe do Twitter. É uma combinação de códigos HTML, CSS e Javascript projetados para ajudar a criar componentes da interface do usuário. O Bootstrap também foi programado para suportar HTML5 e CSS3.

Também é chamado de estrutura de front-end.

O Bootstrap é uma coleção gratuita de ferramentas para a criação de sites e aplicativos da web.

Ele contém modelos de design baseados em HTML e CSS para tipografia, formulários, botões, navegação e outros componentes da interface, além de extensões JavaScript opcionais.

Alguns motivos para os programadores preferirem o Bootstrap Framework

1. Fácil de começar

2. Great grid system

3. Estilo básico para a maioria dos elementos HTML (tipografia, código, tabelas, formulários, botões, imagens, ícones)

4. Lista extensa de componentes

5. Plug-ins Javascript incluídos

Retirado de Sobre o Bootstrap Framework

Bootstrap, como eu o conheço, é um CSS bem definido. Apesar de usar o Bootstrap, você também pode usar JavaScript, jQuery etc. Mas a principal diferença é que, usando o Bootstrap, você pode simplesmente chamar o nome da classe e obter a saída no formulário HTML. por exemplo. coloração de botões, modelagem de texto, usando layouts. Por tudo isso, você não precisa escrever um arquivo CSS, basta usar o nome de classe correto para moldar seu formulário HTML.

Em palavras mais simples, você pode entender o Bootstrap como uma estrutura da Web front-end criada pelo Twitter para criar mais rapidamente aplicativos da Web responsivos a dispositivos. O Bootstrap também pode ser entendido principalmente como uma coleção de classes CSS definidas nele, que podem ser simplesmente usadas diretamente. Ele utiliza CSS, javascript, jQuery etc. em segundo plano para criar o estilo, os efeitos e as ações dos elementos do Bootstrap.

Você deve saber que usamos CSS para estilizar elementos da página da Web, criar classes e atribuir classes a elementos da página da Web para aplicar o estilo a eles. O Bootstrap aqui torna o design mais simples, pois precisamos incluir apenas os arquivos do Bootstrap e mencionar os nomes de classe predefinidos do Bootstrap para os elementos da nossa página da Web, e eles serão estilizados automaticamente através do Bootstrap. Com isso, nos livramos de escrever nossas próprias classes CSS para estilizar elementos de páginas da web. Mais importante ainda, o Bootstrap foi desenvolvido de maneira a tornar o dispositivo do site responsivo e esse é o principal objetivo dele. Outras alternativas para o Bootstrap podem ser - estruturas de fundação , materialização etc.

O Bootstrap o libera de escrever muito código CSS e também economiza seu tempo gasto na criação de páginas da web.

O Bootstrap é um framework JavaScript de código-fonte aberto, desenvolvido originalmente para o aplicativo do twitter pela equipe de designers e desenvolvedores do twitter. Então eles o lançaram para código aberto. Sendo um usuário de longa data do twitter bootstrap, acho que é um dos melhores para projetar sites responsivos prontos para dispositivos móveis. Muitos plug-ins CSS e Javascript estão disponíveis para criar seu site rapidamente. É uma espécie de estrutura rápida de design de modelo. Algumas pessoas reclamam que os arquivos CSS de inicialização são pesados ​​e demoram para carregar, mas essas afirmações são feitas por pessoas preguiçosas. Você não precisa manter o bootstrap.css completo no seu site. Você sempre tem a opção de remover os estilos dos componentes que você não precisa para o seu site. Por exemplo, se você estiver usando apenas componentes básicos, como formulários e botões, poderá remover outros componentes, como acordeões, etc. do arquivo CSS principal. Para começar a se interessar pelo bootstrap, você pode baixar os modelos e componentes básicos emsite getbootstrap e deixe a mágica acontecer.

Isenção de responsabilidade: Eu usei o bootstrap no passado, mas nunca realmente apreciei o que realmente é antes. Essa descrição vem de eu ter chegado hoje à minha própria definição. E eu sei que o bootstrap v4 acabou, mas achei a documentação do bootstrap v3 muito mais clara, então usei isso. A biblioteca não vai mudar fundamentalmente o que fornece.

Brevemente

O Bootstrap é uma coleção de arquivos CSS e javascript que fornece um estilo padrão bonito para elementos html padrão e alguns objetos comuns de conteúdo da web que não são elementos html padrão.

Para fazer uma analogia, é como aplicar um tema no powerpoint, mas para o seu site: faz as coisas parecerem bem legais sem muito esforço inicial.

Em que consiste?

A documentação oficial da v3 divide-a em três seções:

• CSS
• Componentes
• Javascript

Eles correspondem aproximadamente às três coisas principais que o Bootstrap fornece:

• Arquivos CSS simples que denominam elementos html padrão. Portanto, o Bootstrap torna seus elementos padrão mais bonitos. por exemplo, html:<input class="btn btn-default" type="button" value="Input">Click me</button>
• Arquivos CSS que usam estilo em elementos html padrão para transformá-los em algo que não é um elemento html padrão, mas é um elemento Bootstrap padrão (por exemplo, https://getbootstrap.com/docs/3.3/components/#progress ). Dessa maneira, o Bootstrap estende a lista de elementos da Web "padrão" de uma maneira visualmente consistente. por exemplo, html:<span class="glyphicon glyphicon-align-left"></span>
• As classes CSS são projetadas com o jQuery em mente. Internamente, o Bootstrap usa seletores jQuery para modificar os estilos rapidamente e interagir com o DOM e, assim, fornece ao usuário a mesma capacidade. Eu acredito que isso requer mais explicações, então ...

Usando Javascript / jQuery

O Bootstrap estende bastante o jQuery . Se olharmos para o código-fonte, podemos ver que ele usa jQuery para fazer coisas como: configurar ouvintes para o evento de pressionamento de tecla para interagir com os menus suspensos . Ele faz toda essa configuração do jQuery quando você o importa na sua <script>tag, portanto, é necessário garantir que o jQuery seja carregado antes do Bootstrap.

Além disso, vincula o javascript ao DOM com mais força do que o jQuery comum, fornecendo uma interface de classe javascript . por exemplo, alternar um botão programaticamente . Lembre-se de que o CSS apenas define a aparência de uma coisa; portanto, o principal trabalho dessas operações tende a modificar quais classes de CSS se aplicam ao elemento naquele momento. Esse tipo de alteração, com base na entrada do usuário, não pode ser feito com CSS simples.

Existem outras interações padrão com um usuário que os habitantes da Internet estão acostumados e que não são cobertos pelo CSS. Por exemplo, clicar em um link que percorre uma página em vez de mudar de página. Uma das coisas que o Bootstrap fornece é uma maneira fácil de implementar esse comportamento em seu próprio site.

Padrões

Mencionei muito a palavra "padrão" aqui, e por boas razões. Eu acho que a melhor coisa que o Bootstrap fornece é um conjunto de padrões de boa aparência. Você pode modificar o tema padrão o quanto quiser, mas é uma linha de base melhor do que o HTML, CSS e JS brutos. E é por isso que é chamado de "framework".

Navegadores da web diferentes têm estilos padrão diferentes e podem agir de maneira diferente, e precisam de prefixos CSS diferentes e coisas assim. Um grande benefício do Bootstrap é que ele é muito mais confiável do que escrever todo esse material entre navegadores (você ainda terá problemas, tenho certeza, mas é mais fácil).

Eu acho que o Bootstrap era o preferido mais quando gulp e babel não eram tão populares. Olhando para o Bootstrap, parece que vem de um tempo antes de todos compilarem seu javascript. Ainda é relevante, mas você pode obter alguns dos benefícios de outras fontes agora.

_{Versões mais recentes do CSS permitiram definir transições entre essas listas estáticas conforme elas mudam. A versão original do Bootstrap realmente antecede a adoção generalizada desse recurso nos navegadores, portanto eles ainda têm suas próprias classes de animação. Existem alguns bits do Bootstrap que são assim: outras coisas surgiram e o tornaram um pouco redundante.}

O Bootstrap é uma estrutura HTML, CSS, JS com muitos componentes que permitem criar sites da Web bonitos e modernos ou aplicativos da Web muito rapidamente.

Os sites a seguir contêm exemplos, elementos e componentes reutilizáveis ​​que você pode integrar ao seu projeto usando a estrutura de inicialização

bootsnipp.com

startbootstrap.com

bootdey.com

O Bootstrap é a estrutura de código-fonte aberto mais popular e amplamente usada no mundo para desenvolvimento em HTML, CSS e JS. É uma estrutura front-end de HTML. O Bootstrap ajuda a criar sites ou aplicativos da Web responsivos e um sistema de grade de 12 colunas que ajuda a ajustar dinamicamente o site a uma resolução de tela adequada. A versão atual do bootstrap é 4.3.1 e a equipe de bootstrap também anunciou oficialmente a versão do Bootstrap 5 e alterações como a remoção do jquery do bootstrap. Algumas das razões cruciais pelas quais a estrutura de inicialização é mais preferível são

• É fácil de usar
• O Bootstrap tem um grande suporte da comunidade
• As personalizações podem ser feitas facilmente
• Aumenta a velocidade de desenvolvimento

• Responsividade

  Para mais detalhes, você pode conferir o site oficial: https://getbootstrap.com/

Fonte: https://vmokshagroup.com/blog/bootstrap-advantages/

Pelos padrões atuais e terminologia da Web, eu diria que o Bootstrap não é realmente uma estrutura , embora seja o que o site afirma. A maioria dos desenvolvedores considera estruturas Angular, Vue e React, enquanto o Bootstrap é geralmente chamado de " biblioteca " ".

Mas, para ser exato e correto, o Bootstrap é uma coleção de código aberto e móvel para utilitários de design de CSS, JavaScript e HTML objetivo de fornecer meios para desenvolver elementos da Web comumente usados ​​consideravelmente mais rápido (e mais inteligente) do que ter que codificá-los do zero .

Alguns princípios fundamentais que contribuíram para o sucesso do Bootstrap:

• é reutilizável
• é flexível (ou seja: permite sistemas de grade personalizados, alterando pontos de interrupção de resposta, tamanhos de calhas de colunas ou cores de estado com facilidade; como regra geral, a maioria das configurações é controlada por variáveis ​​globais)
• é intuitivo
• é modular (JavaScript e (S) CSS usam uma abordagem modular; é possível encontrar facilmente tutoriais sobre como criar builds personalizadas do Bootstrap, para incluir apenas as partes necessárias)
• tem compatibilidade acima da média entre navegadores
• acessibilidade da Web pronta para uso (pronto para leitor de tela)
• está razoavelmente bem documentado

Ele contém modelos e funcionalidades de design para: layout, tipografia, formulários, navegação, menus (incluindo menus suspensos), botões, painéis, emblemas, modais, alertas, guias, dobráveis, acordeões, carrosséis, listas, tabelas, paginação, utilitários de mídia (incluindo incorporações, imagens e substituição de imagens), utilitários de responsividade, utilitários baseados em cores (primário, secundário, perigo, aviso, informações, claro, escuro, sem som, branco), outros utilitários (posição, margem, preenchimento, dimensionamento, espaçamento, espaçamento, alinhamento, visibilidade), scrollspy, afixo, dicas de ferramenta, popovers.

Por padrão, ele se baseia no jQuery, mas você encontrará variantes gratuitas do jQuery fornecidas por cada uma das estruturas JavaScript progressivas populares modernas:

• React-Bootstrap - Bootstrap ativado por reação
• BootrapVue - Bootstrap alimentado por Vue
• ng-bootstrap - Bootstrap com alimentação angular

O trabalho com o Bootstrap depende muito da aplicação de determinadas classes (ou, dependendo da estrutura JS: diretivas, métodos ou atributos / props) e do uso de estruturas de marcação específicas.

A documentação geralmente contém exemplos genéricos que podem ser facilmente copiados e usados ​​como modelos iniciais.

Outra vantagem do desenvolvimento com o Bootstrap é sua comunidade vibrante, traduzida em uma abundância de temas, modelos e plugins disponíveis, a maioria dos quais de código aberto (por exemplo: calendários, selecionadores de data / hora, plugins para gerenciamento de conteúdo tabular, como bem como bibliotecas / coleções de componentes criadas sobre o Bootstrap, como MDB, modelos de portfólio, modelos de administração, etc.)

Por último, mas não menos importante, o Bootstrap tem sido bem mantido ao longo dos anos, o que o torna uma escolha sólida para aplicativos / sites prontos para produção.