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.
Mudanças Importantes
A Blocs recurso de migração automatizada irá apenas migrar código que Blocs criou, ele não migrará nenhum código personalizado que tenha sido adicionado a um projeto por meio de anexos, 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.
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 alternância de dados em vez de alternância de dados. 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.
- alternância de dados > alternância de dados
- colocação de dados > data-bs-posicionamento
- pai de dados > dados-bs-pai
- dispensar dados > data-bs-dispensar
- passeio de dados > data-bs-passeio
- slide de dados > dados-bs-slide
- dados-slide-to > dados-bs-deslizar para
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
- interruptor personalizado > troca de forma
- entrada de controle personalizado > entrada de verificação de formulário
- rótulo de controle personalizado > formulário-check-label
Incorporações responsivas
- incorporar-responsivo > relação
- incorporar-responsivo-16by9 > proporção-16 × 9
- incorporar-responsivo-4by3 > proporção-4 × 3
- incorporar-responsivo-4by4 > proporção-4 × 4
- incorporar-responsivo-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 > partida flutuante
- 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
Gerais
- somente sr > visualmente oculto
- sem sarjetas > g-0
- btn-block > w-100