Faça parte da comunidade Bootstrap Brasil no Slack
B

Blog Bootstrap Brasil

Tradução do Blog Bootstrap Oficial pela comunidade Bootstrap Brasil.

Bootstrap 4 Alpha 3

Alpha 3 pousou! Nós temos o sistema de grid reformulado, controles de formulários atualizados, um novo acervo de fonte, toneladas de correções de bugs, e muito mais. Tem sido vários meses desde a nossa última atualização, mas o tamanho dessa atualização deve ajudar-nos de volta aos trilhos.

Os trabalhos sobre Alpha 3 iniciou bastante amplo, abordando correções de bugs e atualizações de docs de todas as formas e tamanhos, mas terminou com um foco estreito em nossos controles de formulário e sistema de grid. Se você seguiu o desenvolvimento no nosso branch v4-dev, você já deve estar familiarizado com algumas destas mudanças maiores.

Ir para o site da docs do alpha atualizada, or continue lendo para mais destaques.

Sistema de grid

O sistema de grid foi revisado com três grandes pull requests—#19099, #20349, e #20361. Esses grandes PRs foram voltada para as seguintes mudanças:

  • Nossas classes de grid (containers e columns) estão agora atrás de uma variável Sass, que significa classes de grid pode ser facilmente desativada através do Sass. Atualize a variável booleana $enable-grid-classes e recompile para então removê-los.

  • As classes modificadoras do Grid estão mais simples e não requerem mais o prefixo col-. Por exemplo, ao invés de .col-offset-*-*, .col-push-*-*, e .col-pull-*-*, nós temos .offset-*-*, .push-*-*, e .pull-*-*.

  • Mixins foram alterados, e depois mudou de novo, um esforço para manter as classes geradas simples e cooperativa entre os modos standard e flexbox. Nossos dois mixins primário de coluna agora são make-col-ready, que abriga o position, padding-*s, e min-height (para evitar o colapso de colunas vazias), e make-col e configurando o float e width.

  • ** Adicionado uma seção de personalização de grid no docs** para exemplicar como alterar o número de colunas, pontos de interrupção da linha de grid, larguras de container, e muito mais.

Estas alterações estão disponíveis em nosso standard grid, assim como a nosso flexbox grid. Mais sobre isso abaixo.

Flexbox

Flexbox auto-layout

O modo flexbox foi atualizado no Alpha 3, a partir do sistema de grid (ele usa a mesma variável e os mixins Sass atualizados) e movendo-se através dos nossos serviços públicos e componentes.

-. Novo docs flexbox grid Além do docs standard grid, agora temos uma página no docs dedicado para nosso flexbox grid como ele se comporta de forma ligeiramente diferente do que o standard grid. Esta nova página inclui detalhes e maneira sobre como esse grid funciona, assim como exemplos de código adicionais.

  • Largura da coluna automática com novas classes .col-{breakpoint}. Por exemplo, para o breakpoint de três colunas de largura iguais xs, você criar três colunas com cada uma com apenas .col-xs.

  • Novas classes utilitárias de alinhamento flexbox para a distribuição dos itens verticalmente e horizontalmente. Funciona com nosso flexbox grid, bem como apenas sobre qualquer outro componente personalizado.

Formulários

Form validation states

Formulários tiveram várias alterações durante o início do desenvolvimento do Alpha 3. Documentação, nomes de classe, opções de layout e estilos de validação têm sido drasticamente melhorada.

  • Novas classes para checkboxes, radios, tamanhos de input e legends. Embora não seja 100% finais, todos os nossos controles de formulário estão nomeados de forma mais clara e consistente em toda a sua CSS.

  • Substituido as imagens de fundo PNG base64 com inline SVGs para seus controles de formulários personalizados e estados de validação. Dimensione esses controles de formulário para o conteúdo do seu coração!

  • Falando de estados de validação, temos a nova identidade de validação dos formulários com opções de texto de ajuda. Estados de validação podem agora ser aplicada em uma base (com .form-control-{state}) e opcionalmente com feedback de validação pode ser mostrado com .form-control-feedback. Agora o texto do formulário de ajuda independente pode ser controlada com a nova classe .form-text.

<div class="form-group has-success">
  <label class="col-form-label" for="inputSuccess1">
    Input with success
  </label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">
    Success! You've done it.
  </div>
  <small class="form-text text-muted">
    Example help text that remains unchanged.
  </small>
</div>
  • Corrigido alguns bugs relacionados com formulário, como o preenchimento da label horizontal #17498, uso indevido de <fieldset>s para formar grupos, classes de tamanho não aplicados nos <select>s, e muito mais.

  • Documentação para formulários foi revisada. Temos exemplos mais simples de nossos controles de formulários disponíveis, orientações mais claras sobre os estados de validação (e quando usar cada um), e muito mais.

Sistema de fonts

Nós substituímos as velha familia de font Helvetica/Arial por fontes do sistema, utilizadas mais hoje em dia, mais legível, e fonts mais poderosas que empresas como a Apple, Google e Microsoft têm projetado especificamente para dispositivos de hoje.

Originalmente isso foi planejado afetar os usuários do Linux, mas esse tipo de suporte é um pouco inconsistente. Por essa razão, não há nenhuma mudança de fonts destinado a pessoas que usam Linux.

E muito mais …

Haviam cerca de 1.200 commits no Alpha 3 e este post mal pouco fala de todas as mudanças. Temos dezenas de outros bugs corrigidos e outras coisas melhoradas, como tambem nossa documentação.

Para mais detalhes sobre as mudanças desse lançamento, visite nossa lista de issue Alpha 3, como tambem as milestone já fechadas do Alpha 3.

Ancioso para experimentar? Então visite nossa docs v4 alpha!

Certifique-se de se juntar a nossa sala no Slack! (Em Português) ou tambem na sala no Slack! (Em Inglês) e mergulhe em nossas novidades e relatórios de bugs, perguntas e receba nosso feedback geral sempre que possível.

Qual é a próxima etapa?

Mais exploração, mais correções de bugs, mais atualizações de docs, e, o melhor de tudo, mais alphas. O trabalho diário nos mantém super ocupado estes dias, mas vamos fazer o nosso melhor para manter o ritmo. Fique ligado!

<3,
@mdo & team

Tradução: @adammacias

Lançado Bootstrap 3.3.7

Bootstrap 3.3.7 está vivo! Nós tivemos mais de 220 commits, 80 issues resolvidas e pull requests de quase 30 contribuidores desde o último lançamento. Woohoo!

Alguns destaques são:

  • Adicionado suporte para jQuery 3.
  • Adicionado código inline source em arquivos dentro sourcemap eliminando os erros 4xx no CDN.
  • Atualizado vários devDependencies e gems.
  • Removido vendor prefixes sem suporte para @viewport.

Para mais detalhes, leia o release changelog e o v3.3.7 milestone.

Download Bootstrap

Download do último código-fonte lançado, assets compilados, e documentação em um arquivo ZIP direto do GitHub:

Download Bootstrap 3.3.7

Visite o repositório do projeto ou respositório Sass para mais opções. Lembre-se, estamos disponível via npm tambem.

Bootstrap CDN

Depois de analisar o changelog, atualize seus links CDN para apontar para os arquivos v3.3.7:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<3,

@cvrebert & team

Tradução: @adammacias

Novo Bootstrap 4 alpha

Bootstrap 4 alpha 2 já está disponível. Desde nossa última versão, quase 100 pessoas fizeram envios em mais de 900 commits para a v4 e nós fechamos mais de 400 issues e pull requests. Esses números são exorbitantemente impressionantes de se ver, e ainda temos uma tonelada de trabalho pela frente neste ano para a v4.

Como mensionado em nosso último post, o plano geral de desenvolvimento da v4 começa com uns poucos lançamentos alpha. Nós estamos um pouco atrás nisso, mas deve ser recuperado conforme os ventos do ano cairem. Espere um alpha ou dois neste mês para realmente ser lançado.

Aqui está um pouco das mudanças desde nosso último alpha:

  • Revisado espaçamento de utilitários para usar uma hierarquização numérica (para evitar confusão com camadas de grids).
  • Continuado esforços de refatoramento para substituir seletores de marcações específicas com classes através de vários componentes (includindo paginação, listas, e mais). Ainda mais para fazer aqui com componentes adicionais.
  • Reverter media queries e containers de grid de rems para pixels porque viewports não são afetadas por font-size. Veja #17403 para detalhes. Nós temos uma tonelada de trabalho de grid, também. Sinta-se livre para seguir junto com #18471.
  • Revertido .0625rem com bordas para 1px para maior consistência de bordas de componentes que evitam zoom e bugs de font-size entre os navegadores.
  • Renomeado .img-responsive para .img-fluid para evitar futuras confusões nas várias soluções de imagem responsiva fora essas.
  • Substituído ZeroClipboard com clipboard.js para a cópia botões independente em Flash.
  • Entradas e botões atualmente compartilham a mesma variável de borda para assegurar que os componentes tenham sempre tamanhos similares.
  • Atualizados todos os seletores pseudo-elementos para usar as especificações preferidas de duplo dois pontos (ex.:, ::before como oposto para :before).
  • Cartões agora têm variação de contorno e mixins para apoiar extenções de classes base adicionais.
  • Classes utilitárias para para floats e alinhamento de texto agora tem variações responsivas. Isso significa que nós temos largado as classes não responsivas para evitar duplicação.
  • Adicionado suporte para jQuery 2.
  • E mais centenas de melhorias Sass, correções de bugs, atualização da documentação, e mais.

Nós altamente encorajamos pessoas a folhear através da segunda milestone no GitHub para uma ideia melhor do que foi mudado sobre o projeto. Você pode também seguir junto com outros esforços da v4 com a etiqueta v4 em nossa rastreadora de issue.

Pronto pra mergulhar? Então, caia de cabeça na documentação aplha v4!

Certifique-se de juntar-se a nossa sala oficial no Slack! e mergulhe em nossa rastreadora de issue com relatório de bugs, questões, e comentários geral sempre que possivel.

<3,

@mdo, @fat, & team

Tradução: @flaviacs

New Bootstrap 4 alpha

Bootstrap 4 alpha 2 is now available. Since our last release, nearly 100 people have pushed over 900 commits to v4 and we’ve closed over 400 issues and pull requests. Those numbers are outrageously awesome to see, and we’ve still got a ton of work ahead of us this year for v4.

As mentioned in our last post, the general plan for v4’s development starts with a few alpha releases. We’re a little behind on that, but should be getting caught up as the year winds down. Expect another alpha or two this month to really round things out.

Here’s a look at a handful of the changes since our last alpha:

  • Overhauled spacing utilities to use a numerical tiering (to avoid confusion with grid tiers).
  • Continued refactoring efforts to replace markup-specific selectors with classes across several components (including pagination, lists, and more). Still more to do here with additional components.
  • Reverted media queries and grid containers from rems to pixels as viewports are not affected by font-size. See #17403 for details. We’ve got a ton of grid work left, too. Feel free to follow along with #18471.
  • Reverted .0625rem width borders to 1px for more consistent component borders that avoid zoom and font-size bugs across browsers.
  • Renamed .img-responsive to .img-fluid to avoid future confusion on the various responsive image solutions out there.
  • Replaced ZeroClipboard with clipboard.js for Flash-independent copy buttons.
  • Inputs and buttons now share the same border variable to ensure components are always sized similarly.
  • Updated all pseudo-element selectors to use the spec’s preferred double colon (e.g., ::before as opposed to :before).
  • Cards now have outline variants and mixins to support extending base classes further.
  • Utility classes for floats and text alignment now have responsive ranges. This means we’ve dropped the non-responsive classes to avoid duplication.
  • Added support for jQuery 2.
  • And hundreds more Sass improvements, bug fixes, documentation updates, and more.

We highly encourage folks to skim through the second alpha’s milestone on GitHub for a better idea of what’s changed across the board. You can also follow along with other v4 efforts with the v4 label on our issue tracker.

Ready to dive in? Then head to the v4 alpha docs!

Be sure to join our official Slack room! and dive into our issue tracker with bug reports, questions, and general feedback whenever possible.

<3,

@mdo & team

Lançado Bootstrap 3.3.6

Bootstrap 3.3.6 chegou! Esta é uma versão muito esperada que trás dezenas de correções de bugs CSS e atualizações na documentação. Nós tivemos mais de 180 commits, 100 issues fechadas e pull requests de quase 30 contribuidores desde nossa última versão. Woohoo!

Aqui estão alguns dos destaques:

  • Adicionado suporte para o pacote NuGet oficial (Sim, isso é o velho, mas o pessoal ainda usa isso!).
  • Mapa de fonte habilitada para nosso CSS minificado compilado.
  • Atualizado mais de uma dúzia bugs de entrada em navegadores conforme os navegadores continuam a corrigir bugs (aww yeah!).
  • Atualizado várias documentações de plugin JavaScript para esclarecer o uso.
  • Criada documentação local de desenvolvimento mais fácil com plano alternativo de jQuery local.

Para um colapso completo, leia a mudança de versão e a mileston v3.3.6.

Download Bootstrap

Baixe a última versão — código fonte, recursos compilados e documentação — como arquivo ZIP diretamente do GitHub:

Download Bootstrap 3.3.6

Visite o repositório do projeto ou repositório Sass para mais opções. Além disso, lembre que nós estamos disponíveis no npm, também.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<3,

@mdo, @fat, & team

Tradução: @flaviacs