Ir ao conteúdo
Regras do Clube do Hardware

CSS CSS e JAVASCRIPT do Material Design não estão sendo aplicados na página Web

G_Andrade

Por G_Andrade
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por GabrielSennaMs,

Posts recomendados

G_Andrade
 

G_Andrade

Postado
Postado

Boa noite, estou tentando usar o Material Design, porém o ccs e o javascript dele não estão sendo aplicadas no meu  form da minha página Web. Poderiam me ajudar a solucionar este problema?

 

envieUmEmail.php 

<!DOCTYPE html>
<html>
    <head>
        <meta lang="pt-br">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=0.55, user-scalable=0"/>
        <title>Minas Leak</title>
 		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
        <link rel="icon" href="resources/somenteLogoMlIco.ico">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link href="bs/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    </head>
    <body>
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white navTamanho">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="resources/logoComNome.png" width="150" height="100" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class=" collapse navbar-collapse justify-content-right" id="navbarNav">
                    <ul class="nav  nav-tabs nav-pills flex-sm-row">
                        <li class="nav-item">
                            <a class="nav-link textoNormal" href="index.php" style="color: black">Lorem Inpsum</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active textoNormal" href="envieUmEmail.php" style="color: black">Lorem Inpsum</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mao textoNormal" data-toggle="modal" data-target="#model" href="#" style="color: black">Quem somos</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--  Modal -->
        <div class="modal fade" id="model" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="" style="margin: 0;width: 98%;">
                            <h5 class="modal-title w3-center" id="exampleModalLongTitle"><img src="resources/somenteLogoComNome256px.png"></h5>
                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="textoNormal">Lorem Inpsum.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary textoNormal" data-dismiss="modal">Lorem Inpsum</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fim do Modal -->
        <!-- conteudo do site -->
        <div class="container" style="margin-bottom: 150px">
            <div class="row" style="margin-top: 115px;">
                <div class="col-sm-12 col-md-12">
                    <div class="thumbnail" style="height: 350px; color: #0066ff; margin-top: 10px;">
                        <div class="w3-center">
                            <a class="estiloTitulo" style="color: black"><b>Lorem Inpsum</b></a>
                            <br>
                            <div class="w3-center">
                                <img src="resources/infoContato.png" style="width: 530px;">
                            </div>
                        </div>
                        <div class="container w3-center" style="width: 600px; height: 300px;">

                        </div>
                    </div>
                    <hr>
                </div>
                <div class="col-sm-12 col-md-12" style="margin-bottom: 100px;">
                    <div class="thumbnail" style="height: 510px; color: #0066ff; margin-top: 10px;">
                        <div class="w3-center" style="margin-top: 1px; margin-bottom: 20px;">
                            <a class="estiloTitulo" style="color:black"><b>Lorem Inpsum</b></a>
                        </div> 
                        <form>
  							<div class="form-group">
   								<label for="teste" class="bmd-label-floating">Lorem Inpsum</label>
   								<input type="email" class="form-control" id="teste">
    							<span class="bmd-help">Lorem Inpsum.</span>
 						 	</div>
  							<div class="form-group">
    							<label for="teste" class="bmd-label-floating">Lorem Inpsum</label>
   							 	<input type="password" class="form-control" id="teste">
  							</div>
  							<div class="form-group">
    							<label for="teste" class="bmd-label-floating">Lorem Inpsum</label>
    							<select class="form-control" id="teste">
      								<option>1</option>
      								<option>2</option>
     	 							<option>3</option>
      								<option>4</option>
        							<option>5</option>
    							</select>
  							</div>
  							<div class="form-group">
    							<label for="teste" class="bmd-label-floating">Lorem Inpsum</label>
    							<select multiple class="form-control" id="teste">
      								<option>1</option>
      								<option>2</option>
     				 				<option>3</option>
      								<option>4</option>
      								<option>5</option>
    							</select>
  							</div>
  							<div class="form-group">
    							<label for="teste" class="bmd-label-floating">Lorem Inpsum</label>
    							<textarea class="form-control" id="teste" rows="3"></textarea>
  							</div>
  							<div class="form-group">
    							<label for="lorem" class="bmd-label-floating">Lorem Inpsum</label>
    							<input type="file" class="form-control-file" id="lorem">
    							<small class="text-muted">Lorem Inpsum.</small>
  							</div>
  							<button class="btn btn-default">Lorem Inpsum</button>
  							<button type="submit" class="btn btn-primary btn-raised">Lorem Inpsum</button>
						</form>
                    </div>
                </div>
            </div>
        </div>

        <a href="https://api.whatsapp.com/send?l=pt&phone=9999999999999" target="_blank"><img src="resources/fabWhatsapp.png" style="height:80px; position:fixed; bottom: 25px; right: 25px; z-index:100;" data-selector="img"></a>
        <!-- Footer -->
        <footer class="container-fluid">
            <div class="container">
                <hr>
                <div class="row">
                    <div class="w3-center centro">
                        <a href="https://www.instagram.com/LoremInpsum/?hl=pt-br" target="_blank"><img src="resources/instagram.png"></a>
                    </div> 
                    <div class="w3-center centro">
                        <a class="textoNormal">@LoremInpsum</a>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="w3-center centro">
                        <p class="textoNormal"><b>Lorem: </b>Lorem Inpsum</p>
                        <p class="textoNormal"><b>Inpsum: </b>(99) 9999-9999 | (99) 99999-9999</p>
                    </div>
                </div>
                <div class="row">
                    <div class="w3-center centro">
                        <p class="textoNormal"><b>© 2019 Lorem Inpsum | Lorem Inpsum.</b></p>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/style.js" type="text/javascript"></script>
        <script src="bs/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="bs/js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

    </footer>
    <!-- fim do conteudo do site -->
</body>
</html>

 

 

GabrielSennaMs
 

GabrielSennaMs

Postado
Postado

Bom o problema é que você colocou muita biblioteca, muita ferramenta de desenvolvimento HTML, CSS.

 

Por qual motivo você quer usar o Bootstrap com w3.css e o Material design, isso obviamente não vai funcionar porque vai acontecer conflitos em CSS, e vai deixa sua página mais pesada.

 

Você também adicionou novamente a biblioteca do Jquery, bootstrap.min no final da página, sendo que você já havia adicionado ela no cabeçalho da página.

 

Recomendo a você só trabalhar com uma ferramenta de desenvolvimento HTML, CSS, também recomendo a você mudar a posição do jquery no cabeçalho, coloca ele para ser o primeiro da lista de script, isso vai evitar erros no console.

G_Andrade
 

G_Andrade

Postado
  • Autor
Postado

@GabrielSennaMs fiz as alterações que você sugeriu, mas mesmo assim não esta funcionando! Segue o código modificado abaixo:

 

envieUmEmail.php 


<!DOCTYPE html>
<html>
    <head>
        <meta lang="pt-br">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=0.55, user-scalable=0"/>
        <title>Lorem Inpsum</title>
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
		<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
		<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
        <link rel="icon" href="resources/somenteLogoMlIco.ico">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
		<link href="bs/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 


    </head>
    <body>
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white navTamanho">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="resources/logoComNome.png" width="150" height="100" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class=" collapse navbar-collapse justify-content-right" id="navbarNav">
                    <ul class="nav  nav-tabs nav-pills flex-sm-row">
                        <li class="nav-item">
                            <a class="nav-link textoNormal" href="index.php" style="color: black">Lorem Inpsum</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active textoNormal" href="envieUmEmail.php" style="color: black">Lorem Inpsum</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mao textoNormal" data-toggle="modal" data-target="#model" href="#" style="color: black">Lorem Inpsum</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--  Modal -->
        <div class="modal fade" id="model" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="" style="margin: 0;width: 98%;">
                            <h5 class="modal-title w3-center" id="exampleModalLongTitle"><img src="resources/somenteLogoComNome256px.png"></h5>
                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="textoNormal">Lorem Inpsum</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary textoNormal" data-dismiss="modal">Lorem Inpsum</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fim do Modal -->
        <!-- conteudo do site -->
        <div class="container" style="margin-bottom: 150px">
            <div class="row" style="margin-top: 115px;">
                <div class="col-sm-12 col-md-12">
                    <div class="thumbnail" style="height: 350px; color: #0066ff; margin-top: 10px;">
                        <div class="w3-center">
                            <a class="estiloTitulo" style="color: black"><b>Lorem Inpsum</b></a>
                            <br>
                            <div class="w3-center">
                                <img src="resources/infoContato.png" style="width: 530px;">
                            </div>
                        </div>
                        <div class="container w3-center" style="width: 600px; height: 300px;">

                        </div>
                    </div>
                    <hr>
                </div>
                <div class="col-sm-12 col-md-12" style="margin-bottom: 100px;">
                    <div class="thumbnail" style="height: 510px; color: #0066ff; margin-top: 10px;">
                        <div class="w3-center" style="margin-top: 1px; margin-bottom: 20px;">
                            <a class="estiloTitulo" style="color:black"><b>Lorem Inpsum</b></a>
                        </div> 
                        <form>
  							<div class="form-group">
   								<label for="exampleInputEmail1" class="bmd-label-floating">Lorem Inpsum</label>
   								<input type="email" class="form-control" id="exampleInputEmail1">
    							<span class="bmd-help">Lorem Inpsum</span>
 						 	</div>
  							<div class="form-group">
    							<label for="exampleInputPassword1" class="bmd-label-floating">Lorem Inpsum</label>
   							 	<input type="password" class="form-control" id="exampleInputPassword1">
  							</div>
  							<div class="form-group">
    							<label for="exampleSelect1" class="bmd-label-floating">Lorem Inpsum</label>
    							<select class="form-control" id="exampleSelect1">
      								<option>1</option>
      								<option>2</option>
     	 							<option>3</option>
      								<option>4</option>
        							<option>5</option>
    							</select>
  							</div>
  							<div class="form-group">
    							<label for="exampleSelect2" class="bmd-label-floating">Lorem Inpsum</label>
    							<select multiple class="form-control" id="exampleSelect2">
      								<option>1</option>
      								<option>2</option>
     				 				<option>3</option>
      								<option>4</option>
      								<option>5</option>
    							</select>
  							</div>
  							<div class="form-group">
    							<label for="exampleTextarea" class="bmd-label-floating">Lorem Inpsum</label>
    							<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  							</div>
  							<div class="form-group">
    							<label for="exampleInputFile" class="bmd-label-floating">Lorem Inpsum</label>
    							<input type="file" class="form-control-file" id="exampleInputFile">
    							<small class="text-muted">Lorem Inpsum.</small>
  							</div>
  							<button class="btn btn-default">Lorem Inpsum</button>
  							<button type="submit" class="btn btn-primary btn-raised">Lorem Inpsum</button>
						</form>
                    </div>
                </div>
            </div>
        </div>

        <a href="https://api.whatsapp.com/send?l=pt&amp;phone=9999999999999" target="_blank"><img src="resources/fabWhatsapp.png" style="height:80px; position:fixed; bottom: 25px; right: 25px; z-index:100;" data-selector="img"></a>
        <!-- Footer -->
        <footer class="container-fluid">
            <div class="container">
                <hr>
                <div class="row">
                    <div class="w3-center centro">
                        <a href="https://www.instagram.com/LoremInpsum/?hl=pt-br" target="_blank"><img src="resources/instagram.png"></a>
                    </div> 
                    <div class="w3-center centro">
                        <a class="textoNormal">@LoremInpsum</a>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="w3-center centro">
                        <p class="textoNormal"><b>Lorem Inpsum: </b>Lorem Inpsum</p>
                        <p class="textoNormal"><b>Lorem Inpsum: </b>(99) 9999-9999 | (99) 99999-9999</p>
                    </div>
                </div>
                <div class="row">
                    <div class="w3-center centro">
                        <p class="textoNormal"><b>© 2019 Lorem Inpsum | Lorem Inpsum.</b></p>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/style.js" type="text/javascript"></script>
       	<script src="bs/js/bootstrap.min.js"></script>
    </footer>
    <!-- fim do conteudo do site -->
</body>
</html>

 

  • Solução
GabrielSennaMs
 

GabrielSennaMs

Postado
  • Solução
Postado

Bom utilizando o código HTML que você passo, eu consegui de boa usar os componentes do material design.

Como eu havia comentado antes se você utiliza a ferramenta de desenvolvimento Boostrap, pro qual motivo você vai usar o material design.

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!