1. Início
  2. Tips
  3. Migrar do Bootstrap 4 para o Bootstrap 5
  1. Início
  2. Migrar do Bootstrap 4 para o Bootstrap 5

Migrar do Bootstrap 4 para o Bootstrap 5

Blocs agora oferece suporte a várias versões da estrutura Bootstrap e também inclui funcionalidades adicionais integradas para migrar facilmente um projeto para a versão mais recente.

Como migrar

Para migrar um projeto para o Bootstrap 5, abra o principal Configurações do projeto e definir o quadro menu suspenso para Bootstrap 5. O processo de migração começará e notificará você quando for concluído.

design-canvas

Mudanças Importantes

A Blocs recurso de migração automatizada irá apenas migrar código aquele Blocs criou, ele não migrará nenhum código personalizado que tenha sido adicionado a um projeto por meio de anexos, pela Editor de código ou um Widget de código. Para ajudar a resolver quaisquer problemas, recomendamos que você se familiarize com o oficial Documentos de migração do Bootstrap 5.

Finalizadores

Há uma série de pequenas diferenças de estilo visual no Bootstrap 5, no entanto, a mais notável é o fato de que todos os links agora estão sublinhados por padrão, para ajudar a melhorar a acessibilidade do site.

Estrutura

Todas as barras de navegação agora têm um contêiner dentro. Isso simplifica drasticamente os requisitos de espaçamento e elimina a necessidade de extensas substituições de CSS.

Javascript

Bootstrap 5 não requer mais nem usa Jquery. Isso significa que o Jquery não está incluído nos sites do Bootstrap 5, por padrão. Essa alteração tem o potencial de quebrar o javascript personalizado adicionado a um projeto.

Na exportação, Blocs irá escanear todos os anexos javascript, inspecionando-os em busca de referências óbvias ao Jquery. Se forem encontradas referências, Blocs irá incluir Jquery com o site automaticamente.

importante

Esteja ciente de que qualquer código Jquery adicionado a um projeto por meio do editor de código não acionará a inclusão automática de Jquery.

Atributos de dados

Atributos de dados para todos os JavaScript (modais, carrosséis, dicas de ferramentas, etc.) agora têm namespaces para ajudar a distinguir a funcionalidade do Bootstrap de terceiros. Por exemplo, o Bootstrap 5 usa data-bs-toggle em vez de data-toggle. Abaixo está uma lista dos atributos de dados mais comuns que foram alterados, consulte o Documentos de migração do Bootstrap 5 para uma lista extensa.

  • data-toggle > data-bs-toggle
  • colocação de dados > data-bs-placement
  • data-parent > data-bs-parent
  • dispensar dados > data-bs-dispensar
  • passeio de dados > data-bs-passeio
  • slide de dados > data-bs-slide
  • data-slide-to > data-bs-slide-to

Classes

Existem várias mudanças nos nomes das classes no Bootstrap 5; abaixo está uma lista das classes mais comuns que foram alteradas. Por favor, consulte o Documentos de migração do Bootstrap 5 para uma lista extensa.

Formulários
  • controle personalizado > verificação de formulário
  • custom-switch > troca de forma
  • custom-control-input > form-check-input
  • custom-control-label > form-check-label
Incorporações responsivas
  • incorporar-responsivo > relação
  • embed-responsive-16by9 > proporção-16 × 9
  • embed-responsive-4by3 > proporção-4 × 3
  • embed-responsive-4by4 > proporção-4 × 4
  • embed-responsive-9by16 > proporção-9 × 16
Margem e preenchimento
  • ml-0 > ms-0
  • ml-1 > ms-1
  • ml-2 > ms-2
  • ml-3 > ms-3
  • ml-4 > ms-4
  • ml-5 > ms-5
  • ml-auto > ms-auto
  • mr-0 > me-0
  • mr-1 > me-1
  • mr-2 > me-2
  • mr-3 > me-3
  • mr-4 > me-4
  • mr-5 > me-5
  • sr-auto > eu-auto
  • pl-0 > ps-0
  • pl-1 > ps-1
  • pl-2 > ps-2
  • pl-3 > ps-3
  • pl-4 > ps-4
  • pl-5 > ps-5
  • pl-auto > ps-auto
  • pr-0 > pr-0
  • pr-1 > pe-1
  • pr-2 > pe-2
  • pr-3 > pe-3
  • pr-4 > pe-4
  • pr-5 > pe-5
  • pr-auto > pe-auto
Alinhamento
  • flutuar à esquerda > float-start
  • flutuar à direita > ponta flutuante
  • esquerda do texto > início do texto
  • texto à direita > fim do texto
Popovers e dicas de ferramentas
  • flecha > seta de dica de ferramenta
  • flecha > seta popover
Variado
  • sr-only > visualmente oculto
  • sem sarjetas > g-0
  • btn-block > w-100
Atualizado em 7 de abril de 2021

Esse artigo foi útil?

Artigos Relacionados