6.0 KiB
| title | localeTitle |
|---|---|
| Bootstrap | Bootstrap |
Bootstrap
Bootstrap é uma estrutura de front-end popular para desenvolvimento web. Ele contém componentes pré-construídos e elementos de design para estilizar o conteúdo HTML. Os navegadores modernos, como Chrome, Firefox, Opera, Safari e Internet Explorer, suportam o Bootstrap.
O Bootstrap inclui um sistema de grade responsivo para layouts variados. É um excelente ponto de partida para a criação de um website compatível com dispositivos móveis. Também inclui funcionalidades opcionais de JavaScript, como conteúdo recolhível, carrosséis e modais.
Histórico de versões
O Twitter desenvolveu originalmente o framework Bootstrap como uma ferramenta interna. Eles lançaram isso como um projeto de código aberto em agosto de 2011.
O Bootstrap 2 foi lançado em janeiro de 2012. Uma das principais características foi a introdução do sistema de grade responsivo de 12 colunas. O Bootstrap 3 surgiu em agosto de 2013, mudando para um design plano e uma abordagem mobile-first. O Bootstrap 4 está disponível em versão beta a partir de agosto de 2017 e agora inclui Sass e Flexbox.
O Bootstrap 4 estava em desenvolvimento por dois anos antes de lançar algumas versões beta durante 2017, enquanto o primeiro lançamento estável foi lançado em janeiro de 2018. Algumas mudanças notáveis incluem:
- Movido de Less para Sass;
- Movido para o Flexbox e sistema de grade melhorado;
- Cartões adicionados (substituindo poços, miniaturas e painéis);
- E muito mais!
No momento da escrita, o último lançamento do Bootstrap é [4.1.3] (http://blog.getbootstrap.com/2018/07/24/bootstrap-4-1-3/ ). Se você gostaria de acompanhar todas as novidades de anúncios, siga-as aqui .
Instalação
Existem duas opções principais para adicionar o Bootstrap ao seu projeto da web. Você pode vincular-se a fontes disponíveis publicamente ou baixar a estrutura diretamente.
Vinculando a outra fonte
Você pode adicionar CSS Bootstrap usando um elemento <link> dentro da <head> da sua página da Web que faz referência a uma Content Delivery Network (CDN):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Adicionar os elementos JavaScript do Bootstrap é semelhante aos elementos <script> normalmente colocados na parte inferior do seu ' tag. Você pode precisar incluir algumas dependências primeiro. Preste atenção especial ao pedido listado:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Nota: Estes são apenas exemplos e podem ser alterados sem aviso prévio. Por favor, consulte um CDN para links atuais para incluir em seu projeto.
Download / Instalação
Você pode baixar e instalar os arquivos de código-fonte do Bootstrap com Bower, Composer, Meteor ou npm. Isso permite maior controle e a opção de incluir ou excluir módulos conforme necessário.
npm install bootstrap
gem 'bootstrap', '~> 4.1.3'
Nota: Estes são apenas exemplos e podem ser alterados sem aviso prévio. Por favor, consulte o site Bootstrap para os links mais atualizados.
O sistema de grade de inicialização
O sistema de grade é um sistema de flexbox para dispositivos móveis, para criar rapidamente layouts de todas as formas e tamanhos adequados em todos os dispositivos. Ele é baseado em um layout de 12 colunas e tem vários níveis, um para cada intervalo de consulta de mídia.
O Bootstrap vem com classes de grade predefinidas para seu uso na marcação. Veja mais detalhes e exemplos em https://getbootstrap.com/docs/4.1/layout/grid/
Recursos do Boostrap
-
O Bootstrap 3 suporta as versões mais recentes do Google Chrome, Firefox, Internet Explorer, Opera e Safari (exceto no Windows). Ele também suporta o IE8 e o mais recente ESR (Firefox Extended Support Release). [12]
-
Desde o 2.0, o Bootstrap suporta design web responsivo. Isso significa que o layout das páginas da web se ajusta dinamicamente, levando em conta as características do dispositivo usado (desktop, tablet, celular).
-
Começando com a versão 3.0, o Bootstrap adotou uma filosofia de design móvel, enfatizando o design responsivo por padrão.
-
A versão 4.0 adicionou suporte ao Sass e flexbox
Mais Informações:
O Bootstrap tem uma documentação completa com muitos exemplos e um modelo HTML para começar (este modelo só tem script incluído; ele não contém uma configuração do sistema de grade, se é isso que você está procurando).
Além disso, você pode encontrar tanto gratuitos quanto pagos temas que se baseiam no framework Bootstrap para fornecer uma aparência mais personalizada e elegante.