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 5

Alpha 5 foi lançado apenas um mês depois do Alpha 4 com grandes melhorias de recursos e pacotão com correções de bugs. Nós ainda temos muito trabalho pela frente, mas estamos deixando mais estável a cada lançamento. Continue lendo para ver os destaques e planos do Alpha 6.

Novos pacotes CSS

Atualizamos nosso processo de compilação para incluir versões com todos nossos pacotes CSS. Além de adicionar o padrão de longa data compilada e pacotes minificados, que incluem arquivos CSS compilados para nosso uso do modo flexbox, sistema de grids apenas, e Reiniciar apenas pacotes. Cada pacote possui um arquivo compilado, minificado, e mapa Sass, assim como o CSS tradicional.

Grid atualizados

Nosso grid foi atualizado e está mais flexível do que nunca. Novidades no Alpha 5 são breakpoint grid gutters específicos. Isso mesmo, agora você pode personalizar a largura de gutters em cada nível e toda camada de grid, modificando o mapa Sass.

The .container behaviors have changed slightly in Alpha 5. We now set the width of each container alongside a max-width: 100%; to ensure proper rendering across browsers in both our default and flexbox modes. Similarly, we fixed a bug in our flexbox grid where columns didn’t properly collapse at lower breakpoints.

O comportamento do .container foi um pouco alterado no Alpha 5. Agora vamos definir o width para cada container ao lado de max-width: 100%; para garantir que fique o modo padrão e flexbox ambos fiquem adequado em qualquer navegador. Da mesma forma, corrigimos um bug em nosso grid flexbox onde colunas não estavam adequadas em breakpoints menores.

Por último, nós mudamos um ponto breakpoint e dimensões do container. A camada sm container agora está menor do que dimensões viewport e a camada lg foi modificada de 940px para 960px para o grid de 12 colunas fiquem mais limpo.

Revisão de Utilitários

Classes utilitárias tiveram bastante atenção em Alpha 5 e vai continuar no Alpha 6. Grandes mudanças neste lançamento são:

  • Simplificado sintaxe margin e padding (e.x., mx-auto ao invés m-x-auto).

  • Separado utilitários background e color para o estilo ficar mais explícito.

  • Renomeado utilitário image, alterado de .img-rounded e .img-circle para .rounded e .rounded-circle, respectivamente.

  • Removido o display: block; de .img-fluid pois torna-se desnecessário para criar imagens responsivas (o inline-block padrão funciona muito bem como está).

  • Adicionado novo utilitário vertical-align com .align-top, .align-middle, e mais.

Veja outras questões em aberto em Alpha 6 milestone. Há mais atualizações vindo ao utilitários para adicionar variações responsivas, nomenclatura mais consistente e muito mais.

Nós dedicamos um enorme tempo na barra de navegação para Alpha 5, mas honestamente, não está finalizado. Em vez de retornar o progresso que fizemos até Alpha 6, nós incluímos algumas coisas meia-boca.

Aqui está uma olhada no que há de novo, como ele funciona, e o que pode mudar no nosso próximo lançamento.

  • Primeiro, a barra de navegação tem uma novo brand toggler que são baseada em SVG background-image personalizável. Com o poder de variáveis Sass, que nos permite mudar facilmente a cor dos ícones do menu de hamburger.

  • Segundo, o estilo padrão para brand e navegação em grande parte foi ajustado. Estão com estilos global menos personalizados dando ênfase no posicionamento e flexibilidade.

  • Building on that, we overhauled the collapse plugin integration for responsive navbars. With the help of some utility clases and collapse classes for each grid tier, you can easily pick the breakpoint for collapsing your navbar without having to recompile your Sass. Also included is the auto restyling of dropdown menus for mobile so they no longer hide other navbar content when toggled.

  • Com base nisso, nós reformulados a integração do plugin collapse para barra de navegação responsiva. Com a ajuda de algumas classes utilitárias e collapse para cada camada de grid, você pode facilmente escolher o breakpoint para recolher a sua barra de navegação sem ter que recompilar seu Sass. Também está incluído o auto re-estilo de menus suspensos em celular para que eles não escondem outros conteúdos navbar quando alternado.

A barra de navegação é um complicado um há tanta funcionalidade e estilo que pode ir com elas. Temos próximo esboços de grandes pedaços para a barra de navegação, mas provavelmente há mais que estamos gostaríamos. Certifique-se de estar com componente atualizado antes de seu feedback.

Chegando o Alpha 6

Estamos pensando em mais um grande lançamento alpha antes de entrar nas versões beta e mais estáveis. Ainda há mais a fazer em torno de nossos principais componentes — a barra de navegação, variantes flexbox, utilitários e accessibilty — para seguirmos em frente.

Uma vez feito isso, vamos rever toda nossa documentação e atualizar todos os nossos modelos de exemplos para os mais recentes. A partir daí vamos precisar de sua ajuda para testar essas alterações e reportar bugs. Fique atento para mais atualizações na medida que nos aproximamos para que a liberação.

Até lá, fique com Alpha 5!


Para mais detalhes sobre esse lançamento, dê uma olhada na lista de issues Alpha 5, assim como a bem como a a lista de melhorias já realizadas Alpha 5. Lembre-se de participar da nossa sala no no Slack @BootstrapBrasil!.

Usando o Bootstrap CDN? Reveja as alterações e atualize seus links CDN para apontar para os arquivos mais recentes:nd update your CDN links to point to the latest files:

<!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<3,
@mdo & team

Tradução: @adammacias

Bootstrap 4 Alpha 4

Alpha 4 esta vivo (em Português) para corrigir o desagradável build, erros nos pacotes, alguns bugs CSS e inconsistências na documentação que adicionamos no nosso último lançamento.

Este é um pequeno release comparado aos nossos alphas anteriores, então aqui está o que foi atualizado:

  • Corrigido erros do package.json
  • Adicionado avisos sobre migração dos componentes
  • Corrigido utilitários flexbox na página de grid flexbox
  • Melhorias em checkbox e radio markup e os estilos de validação
  • Pequenos ajustes nos cards, alertas, utilitários, e grupo de input

No momento do lançamento, o Bootstrap CDN não havia sido atualizado para o Alpha 4. Pedimos desculpas pelo atraso, e fique atento para alguma atualização sobre quando eles estarão funcionando.

Para mais detalhes sobre esse lançamento, dê uma olhada na lista de issues Alpha 4, assim como a bem como a a lista de melhorias já realizadas Alpha 4. Lembre-se de participar da nossa sala no no Slack @BootstrapBrasil!.

Usando o Bootstrap CDN? Reveja as alterações e atualize seus links CDN para apontar para os arquivos mais recentes:

<!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">

<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

<3,
@mdo & team

Tradução: @adammacias

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