Como estilizar o modal de bootstrap

A janela pop-up refere-se à pequena janela na tela da janela existente. É utilizado para exibir informações adicionais ou novas em qualquer aplicativo. Às vezes, também é conhecido como um anúncio. O Bootstrap oferece muitas classes que ajudam a criar janelas modais facilmente. No entanto, usando CSS, a janela modal pode ser projetada de acordo com seus gostos.

Este artigo descreverá como estilizar o modal do bootstrap.

Como estilizar o modal de bootstrap?

Para aprender a estilizar o modal de bootstrap, siga as etapas abaixo.

Etapa 1: Crie um arquivo HTML

Primeiro, crie um modal seguindo as instruções abaixo:

• Criar uma "“Contêiner e atribua uma classe“contador principal-modal”.
• Em seguida, adicione um botão que acionará a janela modal. Atribua o “btn","Btn-Primary", e "show-modal" Aulas. Defina os atributos de dados “Data-Toggle"Com o valor"modal" e a "alvo de dados" com o "#mymodal" valor. Este ID está apontando para o ID da janela modal.
• Em seguida, crie a janela modal. Para fazer isso, adicione um “”Elemento e atribui -lo“modal" e "desaparecer”Aulas e defina o ID.
• Adicione um “”Para a caixa de diálogo do modal e atribua -o a“modal-dialog" aula.
• Em seguida, especifique o conteúdo do modal em um "" e atribua a classe "conteúdo modal”.
• Faça um botão de fechar com a aula “fechar”. O "Data-Dismiss”O atributo é utilizado para fechar a janela modal.
• Em seguida, especifique o corpo modal com as classes “corpo modal" e "linha”. Dentro dele, pegue uma coluna de 6 grades para a imagem e 6 para o conteúdo.
• A imagem está incorporada usando o “" marcação.
• Então, dentro do “”Elemento com o“contente”Classe, adicione o título, a legenda e a descrição.
• Depois disso, coloque um botão com o bootstrap “btn","BTN Danger", e "P-2" Aulas:

Ver modal




×

Oferta especial

20% de desconto em viagem e entrega

Camisas de melhor qualidade. Todo tamanho está disponível. Facilmente lavável.

VEJA MAIS

Etapa 2: estilo "Main-modal-container" classe

O contêiner inteiro é estilizado com o CSS “família de fontes" propriedade:

.contador principal-modal
Fonte-família: 'Poppins', sem serrif;

Etapa 3: Classe de estilo “Show-Modal”

O "show-modal”A classe é declarada com as seguintes propriedades:

.contador principal-modal .show-modal
Cor: #FFF;
Background-Color: #3A97C9;
TRANSFORMA DE TEXTO: capitalizar;
preenchimento: 10px 15px;
margem: 80px auto 0;
exibição: bloco;

Aqui:

• ““cor”Define a cor da fonte.
• ““cor de fundo”Define a cor de fundo do elemento.
• ““transformação de texto”Capitaliza o texto.
• ““preenchimento”Ajusta o espaço em torno do conteúdo do elemento.
• ““margem”Produz espaço ao redor do elemento.
• ““mostrar"Com o valor"bloquear”Define a largura do elemento para 100%.

Etapa 4: estilo de "modal-dialog" em Fade

.modal.desaparecer .modal-dialog
Transformar: escala (0);
Transição: todos os 450ms cubic-bezier (.47, 1.64, .41, .8);

Quando os modais desaparecem, as seguintes propriedades CSS são aplicadas ao “modal-dialog" aula:

• ““transformar”Propriedade com a“escala()”O valor aumenta ou diminui o tamanho do elemento vertical ou horizontalmente.
• ““transição”Gradualmente move o elemento. O "cúbico-bezier ()”A função aplica a curva cúbica de Bezier. É determinado por quatro pontos.

Etapa 5: estilo de estilo “modal-dialog” em exibição

.modal.mostrar .modal-dialog
Transformar: escala (1);

O CSS “transformar”Propriedade com o valor“Escala (1)”Aumenta o tamanho da caixa de diálogo.

Etapa 6: Classe de estilo “Modal-Content”

.contador principal-modal .modal-dialog .conteúdo modal
Radio de fronteira: 30px;
fronteira: nenhuma;
estouro: oculto;

O "conteúdo modal”Está decorado com as seguintes propriedades:

• ““Radio de fronteira”Roups as bordas do elemento.
• ““fronteira"Com o valor"nenhum”Esconde a fronteira.
• ““transbordar”Controla o fluxo do conteúdo.

Etapa 7: estilo "Fechar" aula

.contador principal-modal .modal-dialog .conteúdo modal .fechar
Cor: #747474;
Background-Color: RGBA (255, 255, 255, 0.5);
Altura: 27px;
Largura: 27px;
preenchimento: 0;
opacidade: 1;
estouro: oculto;
Posição: Absoluto;
Direita: 15px;
topo: 15px;
Z-Index: 2;

Aqui:

• ““opacidade”Define o nível de transparência do elemento.
• ““posição"Com o valor"absoluto”Define a posição do elemento em relação à posição dos pais.
• ““certo" e "principal”Defina o espaço na direita e no topo do botão de fechar.
• ““Z-Index”Especifica a ordem de pilha do elemento. A ordem de pilha maior traz o elemento para a frente.

Etapa 8: Classe de estilo “Modal-Body”

.contador principal-modal .modal-dialog .conteúdo modal .corpo modal
preenchimento: 0 !importante;

Espaço ao redor de todo o corpo modal é ajustado pelo CSS “preenchimento" propriedade. Além disso, o “!importante”A palavra -chave é utilizada para definir a importância do elemento.

Etapa 9: estilo "IMG" elemento

.contador principal-modal .modal-dialog .conteúdo modal .corpo modal .img de imagem modal
Altura: 100%;
largura: 100%;

Etapa 10: estilo a classe "Conteúdo"

.contador principal-modal .modal-dialog .conteúdo modal .corpo modal .contente
preenchimento: 35px 30px;

Usando o “preenchimento”Propriedade, o espaço é adicionado em torno do“contente"Conteúdo da classe.

Etapa 11: estilo "título" da classe

.contador principal-modal .modal-dialog .conteúdo modal .corpo modal .título
Cor: #fb3640;
Fonte-família: 'Sacramento', cursiva;
Size da fonte: 35px;

Aqui:

• ““família de fontes”Define o estilo da fonte.
• ““tamanho da fonte”Define o tamanho da fonte.

Etapa 12: Classe de estilo “subtítulo”

.contador principal-modal .modal-dialog .conteúdo modal .corpo modal .legenda
peso-fonte: 600;
TRANSFORMA DE TEXTO: OUPERCASE;
margem: 0 0 20px;
exibição: bloco;

De acordo com o snippet de código fornecido:

• ““espessura da fonte”Define a espessura da fonte.
• ““transformação de texto”Define o caso da fonte.

Saída

É assim que você pode estilizar o modal de bootstrap.

Conclusão

Para estilizar a janela modal de bootstrap, primeiro, adicione o botão que acionará o modal. Em seguida, faça a janela modal usando elementos HTML. Depois disso, adicione várias propriedades do CSS, incluindo “preenchimento","margem","cor","transição”, E muito mais para estilizar a janela modal. Mais especificamente, o “cúbico-bezier”A função é usada para aplicar o efeito de transição em uma curva de quatro pontos na janela modal. Este post explicou o procedimento para estilizar o modal de bootstrap.