O que é o Bootstrap?

512

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.
Панайот Толев
fonte
Esta pergunta está bem respondida . Pense duas vezes em postar novas respostas, especialmente se você pretende copiar e colar sua resposta de outro lugar.
meagar
Com todo o respeito, @meagar, a pergunta parece estar pedindo uma resposta muito específica e precisa, e a resposta aceita evita-a com elegância. O que significa que, tecnicamente, não é bem respondido. Depois de ler cada resposta (incluindo as excluídas), adicionei a minha, que, espero, explica o que é o Bootstrap, em termos gerais e fáceis de entender, em grande parte destinado a diminuir a confusão de iniciantes (que é como eu entendo essa pergunta).
tao

Respostas:

271

É 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.

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 ."

hutchonoid
fonte
2
@ hutchonoid: o bootply é sempre grátis? qual é a diferença entre o Joomla e o bootply? qual é o melhor ?
Logan
9
@logan Joomla e Bootply não são comparáveis. O Joomla é um sistema de gerenciamento de conteúdo construído em PHP e SQL, enquanto o Bootply é um site usado para experimentar a estrutura do Bootstrap (completamente diferente). Pense no Bootply como um JSFiddle especificamente para o Bootstrap. E sim, o Bootply é sempre gratuito.
APAD1
15
Eu acho que o mais relevante para responder a essa pergunta seria seguir o link "Exemplos" fornecido na resposta acima. Copiar / colar a definição de Bootstrap de seu site é obviamente inútil, uma vez que o usuário que postou a pergunta mencionou claramente ter consultado o site de bootstrap. Eu não acho que ver o mesmo texto em seu site faria mais sentido simplesmente porque está escrito em negrito agora.
21315 Mihaela
13
@hutchonoid Pode ser uma definição clara para você, porque você está usando o Bootstrap por um longo tempo, mas confie em mim, essa definição no site deles é a razão pela qual procurei por essa resposta - não entendi o que isso significava. Então, eu concordo plenamente com Mihaela sobre isso. Se eu procurar uma resposta para essa pergunta, não quero que seja a mesma citação do site, apenas em fonte maior. Sua explicação não faz sentido, porque os usuários que perguntaram isso no passado não precisam mais da resposta no momento atual e qualquer pessoa no presente certamente verá primeiro a descrição no site.
Anderson
2
Talvez alguma menção aos projetos mais adequados? (Ou seja, sites temporários, aplicativos pequenos da web, micro sites, etc?) #
Chuck Le Butt
94

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

GowriShankar
fonte
16
Parece-me mais uma coleção de componentes ou widgets do que uma "estrutura". Você pode esclarecer o que exatamente constitui uma "estrutura" e quando uma biblioteca de componentes deixa de ser uma biblioteca de componentes e começa a ser uma "estrutura"? Tem algo a ver com o "sistema de grade"?
Kirby L. Wallace
25

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.

Blitz
fonte
10
Na verdade, o bootstrap é muito mais do que apenas um 'arquivo css'.
Receita
1
eu concordo com o @Recipe não é apenas sobre o arquivo CSS
Sujay sreedhar
1
Pessoalmente, concordo com Blitz. Não que ele tenha uma lista abrangente de recursos do Bootstrap, mas que, em minhas lojas complexas, uso principalmente a codificação purista e o Bootstrap para os recursos css mais básicos. Esse é o tipo de núcleo de seus pontos fortes.
Suamere
1
Essa é uma resposta muito ruim que explica mal o que o CSS (e somente o CSS) faz. Votado. Basicamente, simplesmente explica que você pode usar CSS e, em seguida, referenciar as classes para modificar sua interface do usuário. Nada a ver com o bootstrap sobre outros recursos empacotados.
RichieHH
22

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.

gauravparmar
fonte
18

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.

tecido de valor
fonte
4

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:

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.

Multihunter
fonte
3

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

Dey-Dey
fonte
1

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/

Saanvi Sen
fonte
1

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:

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.

tao
fonte