Após dois meses do primeiro lançamento do Bootstrap 4. Hoje estamos lançando uma atualização menor, v4.1! Nesta versão há algumas melhorias, bastante correções, atualizações na documentação, alterações de ferramentas de compilação e até mesmo alguns novos recursos novos.
Atualização do URL da documentação
Com o novo lançamento da v4, é possível acessar a nova documentação através da URL getbootstrap.com.br/docs/4.1/ e a anterior getbootstrap.com.br/docs/4./ continua funcionando.
Destaques
Veja as principais atualizações desta versão.
Adicionado novo componente personalizado range form control.
Adicionado nova modificador .carousel-fade para alterar o carousel com efeito fade.
Adicionado nova classe CSS .dropdown-item-text para texto nos itens de dropdown.
Adicionado novas classes utilitárias .flex-fill, .flex-grow-*, e .flex-shrink-*.
Adicionado nova classe modificador .table-borderless para tabelas.
Adicionado nova classe .text-monospace utilitária para texto.
Adicionado nova classes utilitárias .text-body (cor padrão do body), .text-black-50 (50% opacidade cor escura), e .text-white-50 (50% opacidade cor clara).
Adicionado nova classe utilitária .shadow-* para adicionar rapidamente sombras box-shadows.
Adicionado habilidade de desativar o posicionamento Popper’s em dropdowns.
Atualizado nossa docs de personalizaçao de tema para confirmar que você não use variaves em CSS em media queries (desculpe amigos!).
Corrigido problema antigo com o Chrome quando renderizado colunas CSS incorretamente para cards.
Depreciado .text-hide - você verá um aviso durante a compilação, já que é um recurso datado e não documentado.
Corrigido os exemplos do Dashboard e do Offcanvas no Firefox e no IE.
Os breadcrumbs agora podem usar valores não-string como divisores.
A partir de agora, estamos analisando a versão v4.1.1. Existem algumas correções de bugs para input groups, campos de formulário e mais algumas coisas que sabemos que precisamos resolver o mais rápido possível. Essas correções deveriam estar na v4.1, mas não conseguimos fazer isso acontecer a tempo.
Dois anos de fabricação, finalmente temos nossa primeira versão beta do Bootstrap 4. Naquele tempo, quebramos todas as coisas, pelo menos, vinte e sete vezes, com quase 5.000 commits, 650+ arquivos mudados, 67.000 linhas adicionadas e 82.000 linhas foram excluídas. Nós também enviamos seis principais lançamentos alfa, um trio de Temas oficiais e até um quadro de trabalho para a boa medida. Simplificando? Já estava na hora.
Beta!?
Longa história curta, enviar uma versão beta significa que acabamos de romper todas as suas coisas até nossa próxima versão principal (v5). Nós não somos perfeitos, mas estaremos fazendo o nosso melhor para manter todas as classes, recursos e URL docs como aparecem agora neste lançamento. Nós sempre podemos adicionar mais coisas, mas não podemos tirar.
Para aqueles que não estiveram usando os lançamentos alfa v4, aqui estão alguns destaques para ajudar você.
Mudou-se de Less para Sass. O Bootstrap agora compila mais rápido do que nunca graças ao Libsass, e nos juntamos a uma comunidade cada vez maior de desenvolvedores da Sass.
Flexbox e um sistema de grade melhorado. Mudamos quase tudo para a flexbox, adicionamos um novo nível de grade para melhor segmentar dispositivos móveis e revisamos completamente nossa fonte Sass com melhores variáveis, mixins e agora mapas.
Dropped wells, thumbnails e panels para cards. Os Cards são um novo componente para o Bootstrap, mas eles se sentirão super familiares, como eles fazem quase tudo bem, thumbnails e panels fez, só que melhor.
Forked Normalize.css e consolidou todas as nossas restaurações de HTML em um novo módulo CSS, Reboot. O Normalize.css tomou um caminho diferente do que preferiria, deixando alguns ajustes básicos do CSS que há muito dependemos. O Reboot leva o núcleo do Normalize.css e o expande para incluir retornos mais opcionais, como box-sizing: border-box, ajustes de margem e mais tudo em um único arquivo Sass.
Novas opções de personalização. Em vez de relegar enfeites de estilo como gradientes, transições, sombras, classes de grade e mais para uma folha de estilos separada, como a v3, movemos todas essas opções para variáveis Sass. Deseja transições padrão em tudo ou para desativar cantos arredondados? Basta atualizar uma variável e recompilar.
Abandonou o suporte IE8 e IE9, caiu versões mais antigas do navegador, e se mudou para unidades rem para o dimensionamento componente para aproveitar o suporte CSS mais recente. Além da nossa grade, os pixels foram trocados para rems e ems, quando apropriado, para tornar a tipografia responsiva e o dimensionamento de componentes ainda mais fácil. Precisa de suporte para IE8 / IE9, Safari 8-, iOS 8-, etc? Continue usando o Bootstrap 3.
Reescreveu todos os nossos plugins de JavaScript. Cada plugin foi reescrito no ES6 para tirar proveito dos mais recentes aprimoramentos de JavaScript com novos métodos de desmontagem, verificação de tipo de opção, novos métodos e muito mais.
Melhoria da auto-colocação de tooltips, popovers, e menus suspensos graças à ajuda de uma biblioteca chamada Popper.js.
Documentação redigada e melhorada. Nós redesenhamos, reescrevemos tudo no Markdown e adicionamos alguns plugins acessíveis para simplificar exemplos e trechos de código para facilitar o trabalho com nossos documentos. Nós também adicionamos um incrível novo formulário de pesquisa!
Novas ferramentas de compilação completamente reescritas em scripts npm em vez de Grunt, imensamente simplificando o processo de desenvolvimento e contribuição para o Bootstrap.
E muito mais! Controles de formulário personalizados, um carrossel redesenhado, uma barra de navegação revisada, estilos de validação de formulário HTML5, centenas de classes de utilidade responsivas, novos componentes e muito mais também foram incluídos.
Ok, então, quer aprender ainda mais? Continue lendo ou vá diretamente para esses novos documentos!
Novo Visual
O Bootstrap 4 tem um aspecto levemente atualizado ao longo de nossas versões alfa, mas não foi até recentemente que nós demos os documentos e os nossos componentes também se refrescaram.
Além de uma nova paleta de cores e fontes de novos sistemas, temos um novo layout para nossa documentação. Novo com este beta é um incrível formulário de pesquisa alimentado pela DocSearch da Algolia, um layout de página melhorado com barra lateral e barra lateral e um novo índice.
Every month, millions of developers across the world visit Bootstrap’s documentation, reading up on features, implementing components, and learning new techniques. Millions more use it daily in their projects, extending and customizing it through the massive ecosystem of themes, extensions, and tools.
Today, we’re excited to expand that ecosystem once more with an official Bootstrap Jobs board. We’re launching with job opportunities from a handful of the biggest software-driven companies out there, including Airbnb, Stripe, Lyft, Medium, and more.
Bootstrap developers come from all different backgrounds, geographic regions, and skill levels, often with domain expertise across multiple programming languages. They tend to not only write HTML, CSS, and JavaScript, but Ruby, PHP, React, iOS, and more, too. With Bootstrap Jobs, Bootstrap developers have immediate access to a brand new job board just for them from a site they visit nearly 20 million times each month. Companies all over now have a direct and efficient channel to reach this massive audience with relevant job postings.
Looking for your next job? Head on over to https://jobs.getbootstrap.com to search for jobs from some of the best companies out there.
Have a job you’d like to share with Bootstrap developers? Visit https://jobs.getbootstrap.com and click “Post a Job” to get started. Have any questions or feedback, don’t hesitate to email us at jobs@getbootstrap.com.
Alpha 6 has landed, and it’s one of our biggest ships to date. We’ve rewritten our grid system and all major components in flexbox, forging ahead with it as our default layout option as we drop IE9 support. With 700 commits since our last release, we have some catching up to do.
Read one for highlights from this release. We also recommend reviewing the ship list and milestone for a more detailed look at what’s changed.
Embracing Flexbox
Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility (hah) and control to our grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing.
If you’re unfamiliar with flexbox, here’s some of the power you can expect to utilize in Bootstrap 4:
Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
Equal height and equal width cards
Vertical and horizontal centering without hardcoding values with translate or margin
Utility classes for easily (and responsively!) changing display, direction, alignment, and more
Auto margins for easy spacing
Justified navigation and button groups
No more HTML white space or broken table-style rendering
Nearly every component now takes advantage of flexbox in place of display: table hacks and floats. That means less reliance on clearfix, more control over DOM and visual order, and fewer bugs. Navs, list groups, cards, and more all utilize flexbox. Even more complex components like the carousel have been modified to use flexbox in some places.
With Alpha 6, we’ve made Bootstrap’s extensive suite of utilities—including classes for display, float, and flexbox, and more—completely responsive. To keep these class names as approachable and representative of their scope as possible, we’ve also made two important changes to their naming scheme.
First, we’ve dropped the -xs infix from our lowest (extra small) breakpoint. xs isn’t a responsive breakpoint quite like sm, md, lg, and xl because it doesn’t start applying styles at a min-width and up. It simply applies to everything as there’s no bounding @media query.
Second, we’ve renamed several classes to better articulate their property-value pairings. Instead of pull, we use float. Instead of creating new names for the various flexbox properties, we start with the property name.
Put that all together and you end up with updated classes like .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. These new classes bring immense power and customization to folks building with Bootstrap. They also make it easier for those migrating from v3 with clearer mappings to legacy class names.
More grid improvements
We’re back at it with more grid improvements. This time we’ve added responsive autosizing columns and more container padding options. Add any number of .col-* classes and they’ll automatically be equal in width.
Padding for grid containers can now be configured across breakpoints with the new $grid-gutter-widths Sass map. In addition, you can remove gutters from grid rows and their columns with the .no-gutters modifier.
Updated navbar
As mentioned in our last release, the Alpha 5 navbar was a little half baked. This time around, we’re completely baked. No, but seriously, the navbar has been rewritten to provide better built-in responsive behaviors and improved layout customization thanks to our move to flexbox.
Here’s the rundown on what’s changed:
Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
Navbar navs no longer require the .nav base class. While it provided a starting point, these shared styles often got in the way of navbar behaviors. Now it’s just .navbar-nav and utilities for alignment.
The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse within. This allows us to provide better responsive behavior with just one class change.
The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again a child element, .navbar-toggler-icon, for improved customization. It also includes easy modifiers for absolutely aligning it to the top right or top left.
Check out the navbar docs to learn more and see it in action.
Up next, our first beta
Like you, we’re very much ready for our first beta release. Luckily, we’re in great shape to get there from this alpha. We have the fewest open issues and pulls we’ve had in easily the last 18 months, and the contributions from the community have been outstanding. As we head to our first beta, we’ll be focused on not adding anything new, ideally making as few breaking changes as possible, and emphasizing documentation quality and bug fixes.
We need your help to get there though. Please dive into this latest release and continue to report bugs and submit pull requests as you can. Every bit helps us improve the next release!
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.
Navbar atualizado
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 classes 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.
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 --><linkrel="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>
