Uma das maiores diferenças Blocs V5 em comparação com Blocs V2 é o fato Blocs não cria mais sites usando Bootstrap 3 e em vez disso usa o novo e melhorado Bootstrap 4 framework.
Ferramenta de Migração
Projetos criados em Blocs V2 usa o Bootstrap 3 framework o que obviamente não é o ideal, já que o Bootstrap 3 e 4 são bem diferentes. Contudo, Blocs O V5 vem com uma ferramenta de migração integrada projetada para ajudar a converter Blocs Projetos V2 (Bootstrap 3) em Blocs Projetos V5 (Bootstrap 4) com o mínimo de transtorno possível.
Ao migrar um Blocs projeto V2 (Bootstrap 3) para um Blocs Projeto V5 (Bootstrap 4), você certamente notará que vários aspectos do seu site podem exigir mais atenção, isso se deve a uma série de fatores que iremos expandir ao longo deste post.
Lembre-se também Blocs V2 pode ser executado ao lado Blocs V5, portanto, se você tiver grandes sites ou projetos com prazos, evite migrá-los, a menos que tenha tempo para fazer alterações manuais substanciais que possam ser necessárias.
O Processo de Migração
Quando você abre um Blocs Projeto V2 em Blocs V5, Blocs irá perguntar se você gostaria de migrar o projeto para Blocs V5. É importante neste ponto ter certeza de ter um backup de seu projeto para que você possa facilmente reverter para Blocs 2 se sua migração exigir muito mais trabalho do que você imaginou inicialmente.
Quando Blocs migra um projeto para o Bootstrap 4, verifica o HTML do projeto em busca de referências a classes antigas do Bootstrap 3 e também verifica a estrutura HTML fazendo alterações quando necessário. É importante lembrar Blocs não altera nenhuma classe personalizada, portanto, quaisquer problemas de estilo visual causados por classes personalizadas precisarão ser corrigidos manualmente.
Diferenças visuais naturais
Há uma série de fatores que farão com que seu site tenha uma aparência diferente em Blocs V5 em comparação com Blocs V2. Os itens a seguir são normais e causados por alterações importantes na estrutura do Bootstrap.
O texto é maior
Após a migração, a alteração mais comum que você notará é que o texto pode parecer maior. Isso ocorre porque o Bootstrap 4 agora usa tamanhos de fonte maiores em todo o seu estilo de tipografia central. A referência abaixo ilustra as diferenças entre os tamanhos de fonte do Bootstrap 3 e 4 para as tags de título.
Bootstrap 3
H1 = 36 px
H2 = 30 px
H3 = 24 px
H4 = 18 px
H5 = 14 px
H6 = 12 px
Bootstrap 4
H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25 rem
H6 = 1 rem
Alternar estilo de símbolo
Outro problema visual comum durante a migração são os problemas com o estilo do símbolo de alternância. Isso ocorre porque, no Bootstrap 4, o símbolo de alternância do navegador agora é uma imagem SVG. Isso significa que não é mais possível personalizar o símbolo de alternância com subclasses antigas de Blocs V2. Para alterar a cor do símbolo de alternância em Blocs V5 para fundos claros ou escuros, você precisará definir a navegação pai Brics estilo do tema.
Problemas de cache
Quando você migra um projeto para o Bootstrap 4 e o exporta, é muito provável que o cache do servidor faça com que o seu site pareça inicialmente danificado depois de hospedado. Isso pode ser facilmente corrigido limpando o cache do navegador. Você pode ler mais sobre como resolver problemas de cache do navegador aqui.
Font Incríveis
In Blocs V5, o conjunto de ícones Font Awesome foi atualizado para V5. Blocs tentará migrar todas as classes de ícones antigas do Font Awesome V4 para as novas classes necessárias para o V5. No entanto, se você adicionou suas próprias implementações de código personalizado dos ícones Font Awesome, eles precisarão ser atualizados manualmente.
Você pode ler sobre quais classes foram alteradas no Font Awesome V5 e como migrar manualmente as classes aqui.
Ícones de carrossel, caixa de luz e rolar para cima
In Blocs V5, o carrossel, a caixa de luz e o botão de rolagem para cima usam ícones SVG em vez de fontes de ícones, isso significa que as subclasses antigas que eram usadas em Blocs O V3 para definir a cor dos ícones não funcionará mais. tem novas subclasses que têm como alvo esses ícones SVG.
Observe que você não usará mais a cor da fonte para definir a cor do ícone, em vez disso, use o Cor do traço SVG controles de estilo no Editor de classes.
Fundo de paralaxe
A forma como a paralaxe funciona mudou em Blocs V5, anteriormente usado essa técnica que aplica a regra da classe background-attachment: fixed;
. No entanto, essa abordagem tem uma grande desvantagem: ela não funciona em dispositivos móveis.
In Blocs V5, paralaxe agora é alimentado por um Solução Javascript o que significa que funciona muito bem em área de trabalho e móvel. Existem algumas desvantagens neste novo método de paralaxe, sendo a principal delas que os planos de fundo não se repetem mais perfeitamente se você tiver vários Blocs empilhados com a mesma imagem de fundo. Uma solução alternativa para isso é simplesmente realocar as linhas principais que contêm o Bloc conteúdo de cada indivíduo Bloc e colocá-los em um único Bloc com o efeito de fundo de paralaxe ativado.
Se você realmente precisa do clássico Blocs Efeito de paralaxe V3 em Blocs V5, este guia irá guiá-lo através do processo de criação manual.
Ícone Menu
In Blocs V5 o ícone do menu de alternância agora é um SVG inline. Isso significa que ele pode ser facilmente estilizado e personalizado usando classes personalizadas. No entanto, se você usou anteriormente um Bric personalizado, como o Easy Burger, para personalizar o menu do seu site, você pode encontrar alguns problemas. Recomendamos construir seu menu novamente e remover qualquer Brics que manipulam o menu, se você encontrar problemas.
Margem
Blocs V5 não tem mais controles de margem pré-definidos limitados para texto e imagens, em vez disso Blocs tem acesso total ao Utilitários de espaçamento de inicialização que oferecem uma experiência muito maior. Isso permite que você aplique margem e preenchimento predefinidos para qualquer borda em qualquer elemento. No entanto, ao usar o espaçamento, você pode descobrir que os controles não surtem efeito. Para liberar elementos, margem ou preenchimento, mantenha pressionada a tecla de opção e clique no pequeno X no controle segmentado de borda relevante que você gostaria de limpar. Depois disso, você pode aplicar um novo valor de margem/preenchimento a essa borda.
Cores
Blocs O V5 possui um sistema de cores totalmente novo com muitos benefícios excelentes. No entanto, devido a uma mudança tão grande, você pode encontrar algumas amostras globais que podem não funcionar corretamente em Blocs V5, quando você tenta atribuí-los a um elemento. Basta clicar com o botão direito na amostra problemática no Swatch Manager e duplicá-la, agora remova o original e use a versão duplicada.
utilização Blocs V2 e V5 lado a lado
É possível correr Blocs V2 e V5 no mesmo sistema, pois ambos usam recursos de suporte a aplicativos dedicados à versão. No entanto, os seguintes pontos devem ser considerados.
- Ambas as versões Blocs compartilham o mesmo nome, isso significa que é impossível para os dois aplicativos ocuparem o mesmo espaço dentro da pasta de aplicativos do MacOS. Para evitar esse problema, simplesmente renomeie o Blocs Aplicação V2 de Blocs para Blocs V2. Isso permitirá que ambos os aplicativos sejam colocados na pasta de aplicativos do MacOS.
- Blocs V2 e V5 têm tipos de arquivo diferentes. Isso significa que uma vez que um arquivo é salvo em Blocs V5 não pode ser aberto em Blocs V2. Com isso em mente, recomendamos que você mantenha várias cópias de seus projetos, para evitar ser forçado a usá-los em uma versão específica do Blocs.