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.
html
css
twitter-bootstrap
frontend
Панайот Толев
fonte
fonte
Respostas:
É 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 ."
fonte
Retirado de Sobre o Bootstrap Framework
fonte
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.
fonte
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.
fonte
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.
fonte
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:
<input class="btn btn-default" type="button" value="Input">Click me</button>
<span class="glyphicon glyphicon-align-left"></span>
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.
fonte
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
fonte
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
Responsividade
Para mais detalhes, você pode conferir o site oficial: https://getbootstrap.com/
Fonte: https://vmokshagroup.com/blog/bootstrap-advantages/
fonte
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:
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.
fonte