Este artigo irá descrever como estilizar o modal Bootstrap.
Como estilizar o modal Bootstrap?
Para aprender a estilizar o modal Bootstrap, siga os passos abaixo.
Etapa 1: criar um arquivo HTML
Primeiro, crie um modal seguindo as instruções abaixo:
- Criar uma ' ” contêiner e atribua a ele uma classe “ contêiner-modal principal ”.
- Em seguida, adicione um botão que acionará a janela modal. Atribua a ele o “ btn ”, “ btn-primário ', e ' mostrar-modal ' Aulas. Defina os atributos de dados “ alternância de dados ” com o valor “ modal ' e a ' alvo de dados ' com o ' #meuModal ' valor. Este id está apontando para o id da janela modal.
- Em seguida, crie a janela modal. Para fazer isso, adicione um “
” elemento e atribuí-lo “ modal ' e ' desaparecer ” e defina o id.- Adicione um “
” para a caixa de diálogo do modal e atribua a ele o “ diálogo modal ' aula.- Em seguida, especifique o conteúdo do modal em um “
” e atribua a ele a classe “ conteúdo modal ”.- Faça um botão Fechar com a classe “ fechar ”. O ' dispensar dados ” é utilizado para fechar a janela modal.
- Em seguida, especifique o corpo modal com as classes “ corpo modal ' e ' linha ”. Dentro dela, pegue uma coluna de 6 grades para a imagem e 6 para o conteúdo.
- A imagem é incorporada usando o “
' marcação.
- Então, dentro do “
” elemento com o “ contente ” class, adicione o título, o subtítulo e a descrição.- Depois disso, coloque um botão com o Bootstrap “ btn ”, “ btn-perigo ', e ' p-2 ' Aulas:
< div aula = 'contêiner-modal principal' >
< botão aula = 'btn btn-primary show-modal' alternância de dados = 'modal' dados- alvo = '#meuModal' > ver modal < / botão >
< div aula = 'desvanecimento modal' eu ia = 'meuModal' >
< div aula = 'diálogo modal' >
< div aula = 'conteúdo modal' >
< botão aula = 'fechar' dispensar dados = 'modal' >
< período > × < / período >< / botão >
< div aula = 'linha de corpo modal' >
< div aula = 'imagem modal col-sm-6' >< img origem = '/img/roupas.jpg' >< / div >
< div aula = 'conteúdo col-sm-6' >
< h3 aula = 'título' > Oferta especial < / h3 >
< período aula = 'legenda' > 20% de desconto para retirada e entrega < / período >
< p aula = 'descrição' > Camisas da melhor qualidade. Cada tamanho está disponível. Facilmente lavável. < / p >
< botão aula = 'btn btn-perigo p-2' > VEJA MAIS < / botão >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Passo 2: Estilize a classe “main-modal-container”
Todo o contêiner é estilizado com o CSS “ família de fontes ' propriedade:
.main-modal-container {
família de fontes : 'Poppins' , sem serifa ;
}Passo 3: Estilizar Classe “show-modal”
O ' mostrar-modal ” é declarada com as seguintes propriedades:
.main-modal-container .show-modal {
cor : #fff ;
cor de fundo : #3a97c9 ;
transformação de texto : capitalizar ;
preenchimento : 10px 15px ;
margem : 80px auto 0 ;
mostrar : bloquear ;
}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 ao redor 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%.
Passo 4: Estilize a classe “modal-dialog” no Fade
.modal .desaparecer .modal-dialog {
transformar : escala ( 0 ) ;
transição : todos 450ms cúbico-bezier ( .47 , 1,64 , .41 , .8 ) ;
}Quando o modal desaparece, as seguintes propriedades CSS são aplicadas ao “ diálogo modal ' aula:
- “ transformar ” propriedade com o “ escala() ” aumenta ou diminui o tamanho do elemento vertical ou horizontalmente.
- “ transição ” move gradualmente o elemento. O ' cubic-bezier() ” aplica a curva cúbica de Bezier. É determinado por quatro pontos.
Etapa 5: Estilizar classe “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.
Passo 6: Estilize a Classe “modal-content”
.main-modal-container .modal-dialog .modal-content {
raio da borda : 30px ;
fronteira : nenhum ;
transbordar : escondido ;
}O ' conteúdo modal ” é decorado com as seguintes propriedades:
- “ raio da borda ” arredonda as bordas do elemento.
- “ fronteira ” com o valor “ nenhum ” esconde a borda.
- “ transbordar ” controla o fluxo do conteúdo.
Etapa 7: Estilizar classe 'fechar'
.main-modal-container .modal-dialog .modal-content .fechar {
cor : #747474 ;
cor de fundo : rgba ( 255 , 255 , 255 , 0,5 ) ;
altura : 27px ;
largura : 27px ;
preenchimento : 0 ;
opacidade : 1 ;
transbordar : escondido ;
posição : absoluto ;
certo : 15px ;
principal : 15px ;
índice z : 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 à sua posição pai.
- “ certo ' e ' principal ” defina o espaço à direita e na parte superior do botão Fechar.
- “ índice z ” especifica a ordem da pilha do elemento. A ordem maior da pilha traz o elemento para a frente.
Passo 8: Estilize a Classe “modal-body”
.main-modal-container .modal-dialog .modal-content .modal-body {
preenchimento : 0 !importante ;
}O espaço ao redor de todo o corpo modal é ajustado por CSS “ preenchimento ' propriedade. Além disso, o “ !importante ” é utilizada para definir a importância do elemento.
Etapa 9: Estilize o elemento “img”
.main-modal-container .modal-dialog .modal-content .modal-body .modal-image img {
altura : 100% ;
largura : 100% ;
}Etapa 10: estilize a classe 'conteúdo'
.main-modal-container .modal-dialog .modal-content .modal-body .contente {
preenchimento : 35px 30px ;
}Ao usar o “ preenchimento ” propriedade, o espaço é adicionado ao redor do “ contente ” conteúdo da aula.
Etapa 11: Estilize a classe “título”
.main-modal-container .modal-dialog .modal-content .modal-body .título {
cor : #fb3640 ;
família de fontes : 'Sacramento' , cursiva ;
tamanho da fonte : 35px ;
}Aqui:
- “ família de fontes ” define o estilo da fonte.
- “ tamanho da fonte ” define o tamanho da fonte.
Etapa 12: Estilize a classe “subtítulo”
.main-modal-container .modal-dialog .modal-content .modal-body .legenda {
espessura da fonte : 600 ;
transformação de texto : maiúsculo ;
margem : 0 0 20px ;
mostrar : bloquear ;
}De acordo com o trecho 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 Bootstrap.
Conclusão
Para estilizar a janela modal do 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 CSS, incluindo “ preenchimento ”, “ margem ”, “ cor ”, “ transição ”, e muito mais para estilizar a janela modal. Mais especificamente, o “ cúbico-bezier ” é 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 Bootstrap.