Desenvolvimento

9 jan, 2017

Alpha 6 do Bootstrap 4 chega com diversas mudanças

Publicidade

Foi lançado o Bootstrap 4 Alpha 6, um dos maiores até o momento. Todo o grid system e a maioria dos componentes no flexbox foram reescritos. No total, foram 700 commits desde a última versão.

Veja abaixo os destaques deste release. Você pode ver a ship list aqui e os milestones aqui para um maior detalhamento das mudanças.

Flexbox

O Flexbox se torna default no Bootstrap 4. A ferramenta de layout oferece uma enorme flexibilidade e controle para o grid system e core components. Com o novo padrão, Bootstrap não mais oferece suporte ao IE9.

flexbox

Utilidades responsivas e infixos

A suite de utilidades do Bootstrap está completamente responsiva – inclusive classes para display, float, flexbox e mais. Para manter os nomes de classes o mais próximo de seu escopo, também foram feitas duas importantes mudanças no esquema de nomeação.

Primeiro, foi retirado o -xs do infixo do menor breakpoint (extra small). Xs não é um breakpoint tão responsivo como sm, md, lg e xl, ele simplesmente é aplicável a qualquer coisa, já que não há limitação com media query.

Em segundo lugar, várias classes foram renomeadas de forma que articulem melhor seus property-values emparelhados. Ao invés de pull, agora é float. Ao invés de criar vários names para todas as propriedades do Flexbox, agora será começado com o nome da propriedade. Isso levará a classes como .com-6, .d-none, .float-right, d-md-flex, .justify-content-end e .text-lg-left. Essas novas classes trazem um grande poder de personalização para os usuários de Bootstrap, além de facilitar a vida de quem está migrando da versão 3 com clearer mappings para class names legados.

Melhorias no grid

Sim, ainda mais melhorias no grid. Dessa vez, foram melhoras as colunas responsivas e mais opções de container padding. Altere qualquer número da classe .com-* que eles serão automaticamente iguais na largura.

O padding para containers de grids agora pode ser configurado usando os breakpoints com o mapa Sass $grid-gutter-widths. Além disso, é possível remover gutters das linhas de grid e nas colunas com o .no-gutters modifier.

Update na barra de navegação (navbar)

A barra de navegação foi completamente reescrita para oferecer um comportamento melhor e um layout customizado, graças ao flexbox.

alpha6-navbar

Veja a documentação da navbar para detalhes

 

A equipe de desenvolvimento do Bootstrap já está trabalhando na versão beta. É possível enviar report de bugs e pull requests para ajudar a aprimorar o próximo release.

Você pode ver a ship list aqui e os milestones aqui para um maior detalhamento das mudanças.

 

Com informações de https://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/