Search the Community
Showing results for tags 'bootstrap'.
Found 214 results
-
Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim <!-- icones --> <link href="icones/favicon.ico" rel="icon"> <link href="icones/favicon.ico" rel="shortcut icon"> <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="icones/android-icon-192x192.png" > <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png"> <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png"> <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png"> <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png"> <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png"> <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png"> <link rel="manifest" href="icones/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
Pessoal, estou com um problema em um menu (nav) que possui 2 níveis Peguei esse código "pronto" porém está com algo que não consigo entender O link do segundo nível quando clica não redireciona para a página desejada , porém se eu clicar e pedir para abrir em nova guia dai ele funciona.. Vou colocar o código aqui (tentei deixar o mais simples possível, com apenas os itens a serem testados) Fico no aguardo <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); }); </script> <style> .navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } } </style> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">#####</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Testar</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" ><a href="http://www.google.com">Google</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>
-
Olá povo do código, eu confesso que estou sem saber o pq de algumas propriedades do Bootstrap 4.2.1 como por exemplo: .img-fluid { max-width:100%; height: auto } não funcionar em outra folha de style, que não seja Bootstrap, a propriedade não esta dentro de @media, essa propriedade eu imaginava ser de uso geral. Vejamos que a Página continua linkando para o bootstrap, apenas algumas propriedades não terem efeito em outra folha de styles.
-
Como mudar o cor da letra de um active em um menu no boostrtrap <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <img src="icone.png" height="60px" alt="Logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;"> <ul class="navbar-nav" > <li class="nav-item active" > <a class="nav-link" href="#">Inicio</a> </li> <li class="nav-item" > <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Aluno</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Professor</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fale Conosco</a> </li> </ul> </div> </div> </nav>
-
Olá, estou criando um modal para o usuário preencher alguns dados. Realizei a formatação em colunas com o bootstrap em web, porém, ao passar para mobile, a formatação muda tudo. Gostaria de sugestões de como poderia solucionar o problema. Não manjo muito da responsividade. Segue abaixo as imagens mobile e web, respectivamente, junto ao código do modal; <div class="modal fade" id="modalAutentMonitor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Autenticar monitor</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body text-md-center"> <!--SEÇÃO--> <div class="form-row"> <div class="form-group"> <div class="col-12 col-md-12"> <input type="password" class="form-control" id="codigo_monitor" name="codigo_monitor" placeholder="Código:"> <br> </div> </div> <div id="botoes_monitor" class="col-6 col-md-8 offset-md-2"> <button type="submit" name="btnAutentMonitor" id="btnAutentMonitor" class="btn btn-outline-warning">Enviar</button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSelecionar" data-dismiss="modal">Voltar</button> </div> </div> <h6 class="text-center" id="resposta_c_r"></h6> <div id="correto" class="d-none"><i class='iconize fas fa-thumbs-up'></i></div> <div id="incorreto" class="d-none"><i class='iconize fas fa-thumbs-down'></i></div> </div> </div> </div> </div>
-
Boa tarde colegas programadores, estou com uma dúvida tremenda. Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado? Segue abaixo o meu código: <!DOCTYPE html> <html> <head> <title>Clientes</title> <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" /> <form name="formulario" method="POST" action=""> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> <link href="../assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../assets/js/bootstrap.min.js"></script> <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script> <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script> <script type="text/javascript"> function Ir(pagina){ document.formulario.action = pagina document.formulario.submit(); } </script> </head> <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false" onMouseOver="window.status='..message perso .. '; return true;"> <div class="container"> <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center> <br /> <?php if(!empty($Dados["btnNovoCad"])): $NovoCad = new CreateCliente(); unset($Dados["btnNovoCad"]); $Dados["cli_garagem"] = $_SESSION["id-garagem"]; $NovoCad->exeCreate('clientes', $Dados); echo $NovoCad->getMsg(); endif; ?> <div class="table-responsive"> <table id="employee_data" class="table table-striped table-bordered"> <thead> <tr> <td>ID</td> <td>Nome</td> <td>Ações</td> </tr> </thead> <?php $ChamarLeitura = new ReadCliente(); $ChamarLeitura->LerClientes(); foreach($ChamarLeitura->getResultado() as $clientes){ extract($clientes); echo ' <tr> <td>'.intval($cli_id).'</td> <td>'.utf8_decode($cli_nome).'</td> ';?> <td> <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button> </td> </tr> <?php } ?> </table> </div> </div><br> <center> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button> <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br> </center> <!-- Inicio Modal Novo Cadastro --> <div class="modal fade" data-backdrop="static" id="myModalNovo"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3> </div> <div class="modal-body"> <form name="formularioB" method="POST" action=""> <div style="text-align: left;"> Nome:* <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br> *Campos obrigatórios </div> <div class="modal-footer"> <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> </div> </form> </div> </div> </div> </div> <!-- Fim Modal --> <!-- Inicio Modal Editar Cadastro --> <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3> </div> <div class="modal-body"> <form name="formularioB" method="POST" action=""> <div style="text-align: left;"> Nome:* <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br> </div> <div class="modal-footer"> <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> <input type="hidden" name="id-cliente" id="id-cliente" value=""> </div> </form> </div> </div> </div> </div> <!-- Fim Modal --> <script type="text/javascript"> $('#myModalEdit').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var recipient = button.data('whatever') var recipientnome = button.data('whatevernome') var modal = $(this) modal.find('.modal-title').text('Editar Cliente') modal.find('#id-cliente').val(recipient) modal.find('#cli_nome').val(recipientnome) }) </script> </form> </body> </html> <script> $(document).ready(function(){ $('#employee_data').DataTable(); }); </script>
-
Olá boa tarde, estou apredendo bootstrap e gostaria de tirar uma duvida se possível. Existem class especificas do bootstrap que eu acharia melhor fazer de maneira não padronizada mas não sei se isso teria impacto no final. Exemplo: margin-top no bootstrap é mt, e são predefinidos 0 a 5 os niveis. Mas se eu quiser usar uma margem diferente da apresentada nesses niveis usando margin-top: 30% por exemplo, vai mudar alguma coisa? Obg. Talvez essa duvida seja besta mas estou no começo do bootstrap
-
Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar. Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando. Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes. Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc. Agradeço a quem puder ajudar.
-
Hi, Many of you want Bootstrap website templates. In this way, you have to develop a wonderful website. As this is the cheapest and fastest way to reach over the world. If you are interested in making a website by using Bootstrap website templates, then here I am sharing a website link that provides free website designs as Bootstrap website templates. If you are interested in then you can visit the site and use the best quality of Bootstrap website templates. Please visit: Bootstrap Website Templates
-
Bom dia. Estou fazendo uma tela a qual trará "blocos" que representarão minhas OBRAS, e dentro dessas OBRAS eu tenho os EQUIPAMENTOS que estou usando nela, estou tentando fazer para trazer todas em uma tela mas não consigo. Os blocos que representam as OBRAS ok, aparecem corretamente, mas seus EQUIPAMENTOS não consigo "amarrar" a CHAVE daquele bloco para a pesquisa. Se alguem puder me ajudar agradeço. <div class="row"><!--INICIO BLOCO DA OBRA--> <?php $procura = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento as equip, fr_obras.nome as obra, fr_obras.cod_obra as codobra FROM fr_movimentacao,fr_obras, fr_equipamentos WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip GROUP BY fr_obras.id" ) or die (mysqli_error($procura)); while($row = mysqli_fetch_array($procura)){ $cod_obra = $row['codobra']; ?> <div class="col-md-4"><!--col md 12--> <div class="card card-widget widget-user-2"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-gradient-secondary"> <div class="widget-user-image"> <img class="img-circle elevation-3" src="dist/img/icon-obra.png" alt="Obra"> </div> <!-- /.widget-user-image --> <h3 class="widget-user-username"><strong><?php echo $row['codobra'];?></strong></h3> <h6 class="widget-user-desc"><?php echo $row['obra'];?></h6> </div> <table class="table table-striped table-sm"> <thead> <tr> <th style="text-align: center;">Cod</th> <th style="text-align: center;">Equipamento</th> <th style="text-align: center;">Operador</th> <th style="text-align: center;">Ações</th> </tr> </thead> <tbody> <tr> <?php $procura2 = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento FROM fr_obras, fr_equipamentos, fr_movimentacao WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip AND fr_movimentacao.cod_obra = '".$cod_obra."' GROUP BY fr_equipamentos.cod_equip" ) or die (mysqli_error($procura2)); while($row2 = mysqli_fetch_array($procura2)){ ?> <td><?php echo $row2['codequip'];?></td> <td>RETRO</td> <td>José Silva</td> <td> <button type="button" class="btn btn-block bg-gradient-info">Movimentar</button> </td> <?php }?> </tr> </tbody> </table> </div> </div><!--col md 3--> <?php } ?> </div><!--FIM BLOCO DA OBRA-->
-
Bom dia, Tenho um exemplo de gráfico e gostaria de saber como eu passo valores vindo do banco para as variaveis do grafico (elas estao inseridas manualmente no arquivo) e eu gostaria de forma dinamica via PHP pegando do meu banco MySQL. já pesquisei mas o que fiz não consegui puxar os valores, ate tentei colocar em session mas ai trouxe somente o ultimo valor e nao todos. var $visitorsChart = $('#movimentacao') var visitorsChart = new Chart($visitorsChart, { data : { labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], datasets: [{ type : 'line', data : [100, 120, 170, 167, 180, 177, 160], backgroundColor : 'transparent', borderColor : '#007bff', pointBorderColor : '#007bff', pointBackgroundColor: '#007bff', fill : false // pointHoverBackgroundColor: '#007bff', // pointHoverBorderColor : '#007bff' }, { type : 'line', data : [60, 80, 70, 67, 80, 77, 100], backgroundColor : 'tansparent', borderColor : '#ced4da', pointBorderColor : '#ced4da', pointBackgroundColor: '#ced4da', fill : false // pointHoverBackgroundColor: '#ced4da', // pointHoverBorderColor : '#ced4da' }] }, meu PHP esta assim: $busca = mysqli_query($con,"SELECT EXTRACT(MONTH FROM DATA) mes, SUM(quantidade) AS qtd FROM dosagem_usina WHERE operacao='saida' GROUP BY mes");
-
Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço. <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>
-
galera, criei esse menu drop down usando o BootStrap, ocorre que ao clicar a primeira vez ele se expande normal, mas quando clico novamente o bicho não retrai. Outro problema que não consigo resolver e que o campo BUSCAR não era para ficar ai mas sim na lateral direita. Como resolvo esses dois problemas ????? Me ajuda ai pessoal. Olha ai o meu html <!doctype html> <head> <title>Componentes</title> <meta charset="utf-8"> <!-- CSS --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar fixed-top bg-danger navbar-dark"> <button class="btn dropdown-toggler" type="button" data-toggle="dropdown" data-target="#menu"> <span class="navbar-toggler-icon"></span> </button> <a href="#" class="navbar-brand">LOGO</a> <!-- links --> <div id="menu" class="dropdown-menu"> <a class="dropdown-item" href="#">Home</a> <a class="dropdown-item" href="#">Quem somos</a> <a class="dropdown-item" href="#">Serviços</a> <a class="dropdown-itm" href="#" id="menu_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sites</a> <div class="dropdown-menu2"> <a href="http://meumundo.com" class="dropdown-item">meumundo</a> <a href="http://M!dium.com.br" class="dropdown-item">M!dium</a> </div> <a class="nav-link" href="#">Fale conosco</a> <form class="form-inline"> <div class="input-group"> <input type="text" placeholder="Buscar" name="buscar" class="form-control input-group-prepend"> <input type="submit" class="btn btn-success input-group-append"> </div> </form> </div> </nav> <footer> <!-- JS --> <script src="public/js/jquery.js"></script> <script src="public/js/bootstrap.bundle.min.js"></script> </footer> </body> </html> Valeu
-
Boa tarde! Fiz um menu vertical de navegação usando Bootstrap 4, conforme código abaixo: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-light"> <h4>CATEGORIAS</h4> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-column" id="conteudoNavbarSuportado"> <h4>FRIGORÍFICO</h4> <ul class="navbar-nav mr-auto"> <li class="" style="display: block;"><a class="nav-link ml-2 py-1 link-subcategoria" href="">TOUCAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CAMISAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CAMISETAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">BLUSAS</a></li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CALÇAS</a></li> <h4 class="mt-2 px-2 py-0" href="" style="font-weight: 700">PROTEÇÃO</h4> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> Está funcionando em partes. Preciso que, quando o site é carregado em telas grandes, o menu apareça expandido, e quando for aberto em telas menores (mobile), o menu fosse recolhido. Mas importante: o menu deverá estar sempre na vertical. Se alguém puder ajudar, fico grato.
-
Estou usando o bootstrap 4, tenho um script que abre a página de impressão: <script> window.onload = function () { var imprimir = document.querySelector("#imprimir"); imprimir.onclick = function () { var usuario = document.querySelector("#usuario"); var menu = document.querySelector("#menu"); var imprime_escala = document.querySelector("#imprime_escala") imprimir.style.display = 'none'; usuario.style.display = 'none'; menu.style.display = 'none'; imprime_escala.style.display = 'none'; window.print(); var time = window.setTimeout(function () { imprimir.style.display = 'block'; usuario.style.display = 'block'; menu.style.display = 'block'; imprime_escala.style.display = 'block'; }, 1000); } } </script> e notei que antes de atualizar para o bootstrap 4, a página de impressão que se abria para impressão de pdf, tinha a aba para escolher entre paisagem ou retrato, e agora não aparece, alguém já passou por isso e conseguiu resolver?
-
Galera gostaria de transformar o template desse meu web site de uma so Sidebar Widgets Column para duas tipo ficaria postagem no meio das duas Sidebar Widgets. Como posso fazer isso? Site que quero fazer isso: https://linkatorrents.net/
-
Ajuda para linhar um botão e um título numa tela de login em asp.net com bootstrap
frlopes posted a topic in HTML e CSS
Boa tarde, pessoal... Tenho o código abaixo e gostaria de saber como faço para alinhar o botão e o título "Login do Sistema" da mesma forma que estão alinhados os inputs... Tentei colocar style="align-items:center" em tudo, rsrsrs e não alinhou. Se alguém puder me ajudar, agradeço. <div class="container"> <div class="form-login"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">Login do Sistema</div> </div> <div style="padding-top:30px" class="panel-body"> <div style="display:none" id="result" class="alert alert-danger col-sm-12"></div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "E-mail", autofocus = true } }) @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" }) </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> @Html.EditorFor(model => model.SENHA, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "Senha" } }) @Html.ValidationMessageFor(model => model.SENHA, "", new { @class = "text-danger" }) </div> <div style="margin-top:10px; align-items:center" class="form-group"> <div class="col-sm-12 controls" style="align-items:center"> <input type="submit" value="Acessar" style="align-items:center" class="btn primary btn-lg" /> </div> </div> </div> </div> </div> </div> Resultado abaixo: -
Ajuda para linhar um botão e um título numa tela de login em asp.net com bootstrap
frlopes posted a topic in HTML e CSS
Boa tarde, pessoal... Tenho o código abaixo e gostaria de saber como faço para alinhar o botão e o título "Login do Sistema" da mesma forma que estão alinhados os inputs... Tentei colocar style="align-items:center" em tudo, rsrsrs e não alinhou. Se alguém puder me ajudar, agradeço. <div class="container"> <div class="form-login"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">Login do Sistema</div> </div> <div style="padding-top:30px" class="panel-body"> <div style="display:none" id="result" class="alert alert-danger col-sm-12"></div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "E-mail", autofocus = true } }) @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" }) </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> @Html.EditorFor(model => model.SENHA, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "Senha" } }) @Html.ValidationMessageFor(model => model.SENHA, "", new { @class = "text-danger" }) </div> <div style="margin-top:10px; align-items:center" class="form-group"> <div class="col-sm-12 controls" style="align-items:center"> <input type="submit" value="Acessar" style="align-items:center" class="btn primary btn-lg" /> </div> </div> </div> </div> </div> </div> Resultado abaixo: -
Caros amigos, Sou novo na área e estou cursando técnico Para treinar resolvi atualizar um site de um jogo antigo. ( 2007 ). Primeiramente modifiquei banner's mudei algumas partes do layout's. E comecei configurar algumas coisas novas no site. A Ideia era adicionar um modal de cadastro porém quando adiciono o bootstrap a pagina fica inteira desconfigurada. Sem bootstrap inserido: https://imgur.com/d6Q65iA Com bootstrap inserido: https://imgur.com/HSUc628 Alguém tem ideia do que poderia ser ? Grato, desde já !
-
Boa tarde meus amigos, utilizei o modal bootstrap do link modal bootstrap para efetuar edição de um campo texto, consigo fazer o mesmo sem problemas, porém o q ocorre é que já possuo uma tabela onde este campo texto contem em alguns deles cadastros feitos com aspas, aí esta me ocorrendo o problema, pois no caso deste tipo de edição o mesmo carrega o textarea até onde vem uma aspas, depois não completa o texto, tipo, vamos dizer que eu tenho o texto: Imasters é um dos melhores fóruns que temos, merce "um prêmio " bla bla bla bla só esta carregando no textarea para edição: imasters é um dos melhores fóruns que temos, merce Desde já agradeço qq ajuda.
-
Uso o Wampserver, meus sistemas funcionam corretamente e este exemplo não mostra os menus: Inicial | Manutenção | Sobre | Área restrita <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Navbar Bootstrap</title> <!-- Principal CSS do Bootstrap --> <link href="https://getbootstrap.com.br/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome-all.js"></script> <!-- Estilos customizados para este template --> <link href="https://getbootstrap.com.br/docs/4.1/examples/album/album.css" rel="stylesheet"> </head> <body> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">Sobre</h4> <p class="text-muted">Adicione algumas informações aqui abaixo.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">Contato</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Me siga no Twitter</a></li> <li><a href="#" class="text-white">Curta no Facebook</a></li> <li><a href="#" class="text-white">Me envie um e-mail</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark shadow-sm"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <strong> Navbar</strong> </a> <!-- div navbar-collapse --> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-home"></i> Inicial |</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-database"></i> Manutenção |</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-list"></i> Sobre |</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-lock"></i> Área restrita</a> </li> </ul> </div><!-- fecha div navbar-collapse --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> <main role="main"> <section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">Exemplo Navbar Menus Bootstrap</h1> <p class="lead text-muted">Algo curto e direto, sobre a coleção abaixo (conteúdo, criador e etc). Faça com que seja curto e legal, mas não tão curto ao ponto de as pessoas pularem ele.</p> <p> <a href="#" class="btn btn-primary my-2">Call-to-action principal</a> <a href="#" class="btn btn-secondary my-2">Call-to-action secundário</a> </p> </div> </section> <div class="album py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Ver</button> <button type="button" class="btn btn-sm btn-outline-secondary">Editar</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Ver</button> <button type="button" class="btn btn-sm btn-outline-secondary">Editar</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap"> <div class="card-body"> <p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">Ver</button> <button type="button" class="btn btn-sm btn-outline-secondary">Editar</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Voltar ao topo</a> </p> <p>Este exemplo de álbum é © Bootstrap, mas, por favor, baixe e customize por conta própria.</p> <p>Novo no Bootstrap? <a href="../../">Visite a página principal</a> ou leia nosso guia <a href="../../getting-started/">getting started</a>.</p> </div> </footer> <!-- Principal JavaScript do Bootstrap ================================================== --> <!-- Foi colocado no final para a página carregar mais rápido --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/popper.min.js"></script> <script src="https://getbootstrap.com.br/docs/4.1/dist/js/bootstrap.min.js"></script> <script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/holder.min.js"></script> </body> </html>
-
Ola, estou usando o admin lte3 (baseado no bootstrap4) e quero montar um formulário com vários campos e pretendo dividir em abas (conforme imagem) estou separando os campos com o form-group row, porém quando o conteúdo é exibido em outra aba ele inicia verticalmente onde a anterior parou, como eu acerto isso?
-
Tenho a página pedidos.php, que recebe todos os pedidos que foram feitos no site nessa página tem informações com ID do pedido, ID do usuário, Endereço etc. Fiz um botão `Produtos` para que quando o ADM clique, abra uma modal vinda de outra página `modalbox.php`, com os produtos pedidos referentes aquele pedido. Por exemplo Pedido nº 833 ao lado dele terá um botão `Produtos` e quero que quando abrir a modal venha somente os produtos pedidos pelo 833. Com o código que tenho até o momento a modal abre, mas não mostra os produtos. pedidos.php <!-------------------------------- PEDIDOS -------------------------> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="9"> <h4 class="text-center text-info m-0">Pedidos realizados</h4> </td> </tr> <tr> <th class="text-center">ID do pedido</th> <th class="text-center">Nome do cliente</th> <th class="text-center">E-mail</th> <th class="text-center">Endereço</th> <th class="text-center">Número da casa</th> <th class="text-center">Valor</th> <th class="text-center">ID cliente</th> <th class="text-center">Situação</th> <th class="text-center">Produtos</th> </tr> </thead> <tbody> <?php require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders"); $stmt->execute(); $result = $stmt->get_result(); while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?></td> <!-- ID do pedido --> <td> <?= $row['order_name'] ?></td> </td> <td><?= $row['order_email'] ?> </td> <td> <?= $row['order_endereco'] ?> </td> <td> <?= $row['order_numero'] ?> </td> <td>R$<?= $row['valor_total'] ?></td> <td><?= $row['id_usuario'] ?> </td> <!---- BOTÃO PARA ABRIR MODAL COM OS PRODUTOS ----> <td> <a class="btn btn-danger pull-right" data-toggle="modal" href="#myModal" id="modellink" data-client="<?= $row['order_id'] ?>">Produtos</a> <div class="modal-container"></div> <!----FIM BOTÃO PARA ABRIR MODAL COM OS PRODUTOS ----> </tr> <?php endwhile; ?> </tbody> </table> </div> <!----- JQUERY PARA ABRIR MODAL -----> <script type="text/javascript"> $(document).ready(function(){ var order_id = $(this).attr("data-client"); var url = "modalbox.php?order_id=" + order_id; $_post(url,{ order_id = order_id, }, jQuery('#modellink').click(function(e) { $('.modal-container').load(url,function(result){ $('#myModal').modal({show:true}); }); }); }); </script> modalbox.php <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="8"> <h4 class="text-center text-info m-0">Produtos dos pedidos</h4> </td> </tr> <tr> <th>ID do pedido</th> <th>ID cliente</th> <th>ID produto</th> <th>Quantidade</th> </tr> </thead> <tbody> <?php extract($order_id); if (isset($_GET['order_id'])) { $order_id = $_GET['order_id']; } else { die("ERRO: ID não definido."); } require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders_items WHERE order_id = '$order_id'"); $stmt->execute(); $result = $stmt->get_result(); while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?> </td> <td> <?= $row['id_usuario'] ?></td> </td> <td> <?= $row['product_id'] ?> </td> <td> <?= $row['quantity'] ?> </td> <!------- FIM ITEM REMOVER DO CARRINHO -------> </tr> <?php endwhile; ?> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div>
-
Boa tarde Gostaria de colocar o valor de um campo bootstrap/vue.js em uma variável php, porém não estou conseguindo. É a primeira vez que estou trabalhando com vue. O campo está trazendo o valor correto: <section class="scans"> <h2>Scans</h2> <ul v-if="scans.length === 0"> <li class="empty">No scans yet</li> </ul> <transition-group name="scans" tag="ul"> <li v-for="scan in scans" key="scan.date" title="scan.content">{{ scan.content }}</li> </transition-group> </section> var app = new Vue({ el: '#app', data: { scanner: null, activeCameraId: null, cameras: [], scans: [] }, mounted: function () { var self = this; self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 }); self.scanner.addListener('scan', function (content, image) { var element = document.getElementById('valor'); element.innerHTML = content self.scans.unshift({ date: +(Date.now()), content: content }); }); Instascan.Camera.getCameras().then(function (cameras) { self.cameras = cameras; if (cameras.length > 0) { self.activeCameraId = cameras[1].id; self.scanner.start(cameras[1]); } else { console.error('Nenhuma Câmera conectada. Verifique!'); } }).catch(function (e) { console.error(e); }); }, methods: { formatName: function (name) { return name || '(unknown)'; }, selectCamera: function (camera) { this.activeCameraId = camera.id; this.scanner.start(camera); } } }); Preciso pegar o valor escaneado constante no campo, para passar para próximo formulário. No aguardo.
-
Pessoal e o seguinte estou com uma lista no banco de dados lista de nomes, gostaria que fosse exibido essas listas em duas colunas do bootstrap, só consigo exibir em uma unica coluna usando o while, como faço para dividir em duas colunas usando o bootstrap e php. obrigado
