Search the Community
Showing results for tags 'bootstrap'.
Found 14 results
-
Como colocar um spinner do bootstrap antes do carregamento da query com o codeigniter.
clovis.sardinha posted a topic in Javascript
Como fazer para colocar um spinner antes de carregar os dados do bd? Eu clico no link e entra na função do controle e só vai para a página da views quando já está pronto a query. Vi uns exemplos de colocação de spinner, mas se a página ainda não apareceu como faço? Vou anexar a função que chama a página para facilitar. public function inativos() { $session = \Config\Services::session(); $pager = \Config\Services::pager(); $usuarios=$this->usuarios->getInativos();//faz a query no bd. $dados=[ 'usuarios'=>$usuarios, 'pager'=>$this->usuarios->pager, ]; echo view('Admin/Relatorios/listaInativos',$dados); } -
Gostaria de centralizar o card 1,2 e 3 e colocar o 4 e 5 em baixo, que tipo de alteração faço algo como na img Cards Projeto (codepen.io) <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"> <script defer src="js/jquery.js"></script> <script defer src="js/script.js"></script> <script defer src="js/script-form-list.js"></script> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <link rel="stylesheet" href="./css/style.css"> <title>TITULO</title> </head> <body> <!--cabeçalho:logo,menu,login--> <header> <div class="logo"> <i><img src="" alt="Image" height="460" width="520"></i> </div> <div> <nav id='menu'> <nav class="cabeçalho-link"> <a href='item1.html'><button>Base</button></a> <a href='item1.html'><button>Sobre</button></a> <a href='item1.html'><button>Contatos</button></a> <a href='item1.html'><button>Planos</button></a> <div class="icones"> <a id='iconLogin' class="fa-sharp fa-solid fa-users-line"></a> </div> <section id='login'> campo login <a id='fecharLogin'>X</a> </section> </nav> </div> </header> <main> <section class="main-content"> <div class="container"> <h1 class="page-title text-center">Equipe<b></b></h1> <div class="row"> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME1</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME2</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME3</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME4</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME5</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> </section> </main> <div id='muleta'></div> <footer class="w-100 py-4 flex-shrink-0"> <div class="container py-4"> <div class="row gy-4 gx-5"> <div class="col-lg-4 col-md-6"> <h5 class="h1 text-white">PS</h5> <p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <p class="small text-muted mb-0">© Copyrights. All rights reserved. <a class="text-primary" href="#">Bootstrap</a></p> </div> <div class="col-lg-2 col-md-6"> <h5 class="text-white mb-3">Informações</h5> <ul class="list-unstyled text-muted"> <li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Planos</a></li> </ul> </div> <div class="col-lg-2 col-md-6"> <h5 class="text-white mb-3">Categorias</h5> <ul class="list-unstyled text-muted"> <li><a href="#">Home</a></li> <li><a href="#">Contato</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">#</a></li> </ul> </div> <div class="col-lg-4 col-md-6"> <h5 class="text-white mb-3">Newsletter</h5> <p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <form action="#"> <div class="input-group mb-3"> <input class="form-control" type="text" placeholder="Email" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-primary" id="button-addon2" type="button"><i class="fas fa-paper-plane"></i></button> </div> </form> </div> </div> </div> </footer> </div> </body> </html> * { padding: 0; margin: 0; } header { width: 100%; height: 120px; background-color: #010138; position: absolute; } header .logo { color: black; font-size: 1px; font-weight: bolder; } header .logo i { color: black; } header div { width: 70%; left: 0; right: 0; margin: auto; } /* este é o cabeçalho todas as configurações de posições das opções para os usuarios estão aqui*/ header .logo { color: black; font-size: 1px; font-weight: bolder; } header .logo i { color: black; } header .cabeçalho-link { padding-left: 100px; cursor: pointer; gap: 3rem; display: flex; padding-top: 20px; font-weight: 500; border-radius: 5rem; color: aliceblue; } header .cabeçalho-link a { color: rgb(255, 255, 255); font-size: 20px; border-radius: 4rem; font-size: 1.7rem; } button { background-color: #FFCC15; color: rgb(0, 0, 0); padding: 5px; width: 150px; border-radius: 15px; font-size: 15px; cursor: pointer; } /* margem e bordas modificadas, para possuir um formato mais oval, incluindo aqui também a cor preta para as letras*/ button:hover { background-color: rgb(99, 78, 0); color: #FFCC15; } /* quando o usuario passar o cursor em cima de cada opção, ele mudará de cor*/ .logo { /*para pode adicionar a logo do meu site*/ height: 100px; width: 60px; padding-top: 49px; padding-left: 720px; padding-right: 220px; display: inline-flex; justify-content: center; text-align: center; align-items: center; cursor: pointer; } .icones { height: 100px; cursor: pointer; gap: 1rem; display: flex; border-radius: 5rem; } header .icones i, header .icones a { cursor: pointer; height: 4.5rem; width: 4.5rem; text-align: center; font-size: 40px; border-radius: 50%; padding: 5rem, 1.5rem; line-height: 4.5rem; } header .icones i:hover, header .icones a:hover { transform: rotate(360deg); border-radius: 20px; transition: 0.5s all; } .sobre .row .content .icones-container .icones span { font-size: 1.5rem; color: var(black); } #iconLogin { float: right; color: white; background: #0D0A97; } #login { display: none; position: fixed; background: white; top: 70px; right: 15%; width: 100px; height: 100px; } /* CARDS */ .main-content { margin: 50px auto; margin-top: 0; padding: 80px; max-width: 1350px; background: #fff; -webkit-box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1); } .page-title { font-size: 45px; margin: 0 auto 80px auto; margin-top: 150px; } .page-title:after { content: ""; width: 110px; height: 4px; background: #F39745; display: block; margin: 15px auto 0 auto; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .card { background: #fff; -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); text-align: center; margin-bottom: 30px; border-radius: 10px; } .card .card_cover { height: 130px; overflow: hidden; background-color: #27408B; } .card .card_padding { padding: 25px; position: relative; margin-top: -85px; } .card .card_image { width: 125px; height: 125px; border-radius: 125px; overflow: hidden; border: 4px solid #FFCC15; margin: 0 auto 15px auto; -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); } .card .card_image img { width: 125px; height: 125px; -o-object-fit: cover; object-fit: cover; } .card .card_details h3 { font-size: 21px; } .card .card_details p { font-size: 16px; margin-bottom: 15px; } .card .card_social { text-align: center; } .card .card_social a { display: inline-block; } .card .card_social img { width: 33px; margin: 5px 10px; } /* SLIDE CARD */ /* FOOTER */ #muleta { clear: both; } footer { background-color: #010138; } footer a { color: black; text-decoration: none; transition: all 0.3s; } .form-control { background: #212529; border-color: #545454; } .form-control:focus { background: #212529; } @media (max-width:768px) { header .cabeçalho-link { display: list-item; } header .icones { display: list-item; } header .logo { display: auto; max-width: 200px; margin: auto; } header .backgroundFoto { max-width: 200px; margin: auto; } }
-
Olá pessoal Migrei recentemente para um novo provedor e não consigo carregar o BOOTSTRAP de forma interna. Só consigo carregar através do link externo. Assim não consigo carregar: <link rel="stylesheet" href="https://www.meusite.com/assets/bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Assim eu consigo: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Alguém já passou por isso? O caminho interno está correto; o arquivo está onde deveria estar; em outro provedor estava funcionando normalmente. Atualmente precisei migrar o site para o provedor HostGator e agora me apresentou esse problema. Se alguém já tiver passado por isso e tiver uma solução eu agradeço.
-
Salve galera. Tenho uma página com vários box deste abaixo com a descrição de uma TV que temos na empresa onde mostram os status de diversos processos. Ainda não coloquei o link para o direcionamento porém antes da pessoa clicar eu gostaria que quando posicionasse o mouse em cima do botão aparecesse uma miniatura do site destino. é Possivel isso?? eu tentei o mouseover mas não carregou, <div class="col-lg-3 col-xs-6"> <div class="small-box bg-blue-gradient" style="border-radius: 05px 05px;"> <div class="inner"> <h3 align="center"><?=$qtd_veiculos?></h3> <p align="center">VEÍCULOS EM TRÂNSITO</p> </div> </div> </div>
-
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-->
