Search the Community

criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro. A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While? Código: <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>

Boa noite galera! Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma. Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento. Não sei se fui bem claro mas, como eu arrumaria isso? Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado

Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique. se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido. estou usando o accordion padrão do bootstrap 4+ Clique neste: Exemplo

Bom dia Após selecionar a Pessoa em um formulário, tenho um botão para editar os dados desta pessoa em um Modal: <span class="input-group-addon"><a href="#" id="btn_editar" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modal_edit_pessoa_red"></a></span> Busco os dados no BD e preencho os inputs do modal: <script type="text/javascript"> $(document).ready(function () { $('#btn_editar').click(function () { var id = $("#id_cont_hid").val(); var id_cont= JSON.stringify(id); $.ajax({ type: "POST", url: "minha_busca_bd?id=" + id, cache: false, data: "{'id':'" + id_cont + "'}", dataType: 'json', }).done(function(retorno){ if (retorno.inserido == true) { $('#md_edit_pes_cpf').val(retorno.dados.cpf); // Atualizo valor campo cpf $("#md_edit_pes_cpf").mask("999.999.999-99"); // Adiciono máscara cpf } .......... Em relação aos dados está funcionando corretamente. O problema é em relação às máscaras de entrada dos campos (cpf) que na primeira vez que for alterar os dados está vindo corretamente, porém, caso tente alterar novamente os dados da mesma pessoa, a máscara não funciona (não vem formatado corretamente). Outro detalhe é que o modal não está sendo resetado (limpo), principalmente após tentativa de edição e ser mostrada mensagem do arquivo PHP que faz a validação dos dados inseridos, uma vez que ao fechar o modal e ao reabri-lo novamente continua mostrando a mensagem de validação, o que eu não gostaria que acontecesse, mas que cada vez que o modal fosse fechado ou finalizado, limpassem os seus dados, para novamente serem carregados após clicar no botão de edição. Partes do código que faço a validação do modal: var serialize_dados = $('#form_mod_pes_edit_red').serialize(); $.ajax({ type: "POST", url: "arquivo_validar.php", data: serialize_dados, dataType: 'json', encode: true, cache: false, }).done(function(retorno){ if (retorno.inserido == true) { $("#mensagem_edit_pes_red").html("Cadastro alterado com sucesso!"); //auto.trigger('click'); $('#form_mod_pes_edit_red').each (function(){ // Limpar campos do Form this.reset(); $('#mensagem_edit_pes_red').html(""); $('#form_mod_pes_edit_red')[0].reset(); }); setTimeout(function () { //$('#modal_edit_pessoa_red').on("hidden.bs.modal", function(){ $(this).removeData(); }); $('#mensagem_edit_pes_red').html(""); // Limpa mensagens $('#modal_edit_pessoa_red').modal('hide') //$('#form_mod_pes_edit_red').on('hidden.bs.modal', function () { //$('#modal_edit_pessoa_red').on('hidden.bs.modal', function(){ $(this).find('form')[0].reset(); }); }, 2000); // 2seg $('#obs_ped').val("Endereço: "+ retorno.dados.endereco+ " Telefone: "+ retorno.dados.telefone); } else{ if (retorno.erros){ $('#mensagem_edit_pes_red').html(""); for(var i=0;i<retorno.erros.length;i++) { $('#mensagem_edit_pes_red').append(retorno.erros[i] + "<br>"); } } else{ $("#mensagem_edit_pes_red").html("Não foi possível completar o cadastro. Tente novamente!"); } } }); Já tentei de várias maneiras, porém não consigo encontrar a solução. No botão fechar do modal também inseri vários códigos para tentar limpar o modal ao sair, porém não obtive sucesso. Se alguém tiver alguma dica, agradeço.

Boa noite pessoal, estou aprendendo web e estou passando trabalho com uma janela modal. na versão desktop para que o modal apareça direito preciso colocar varios <br> antes do footer se não ele fica perdido no meio do modal, ja na versão mobile ele fica com um espação antes do footer devido aos <br> se eu tiro ele acerta o mobile mas da problema no desktop. alguém pode me ajudar? abaixo o modal <!-- Modal Cadastrar--> <div class="modal fade" id="novo_cadastro" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Novo Associado</h4> </div> <div class="modal-body"> <div class="col-md-2"> <label for="c_id">ID</label> <input type="text" class="form-control cadastro" id="c_id" placeholder="*" disabled=""> <br> </div> <div class="col-md-10"> <label for="c_empresa">Empresa</label> <input type="text" class="form-control cadastro" id="c_empresa" name="c_empresa" placeholder="Empresa" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_cnpj">CNPJ</label> <input type="text" class="form-control cadastro" id="c_cnpj" name="c_cnpj" onkeypress="$(this).mask('00.000.000/0000-00');" placeholder="Ex.: 00.000.000/0001-00" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_ie">I.E</label> <input type="text" class="form-control cadastro" id="c_ie" name="c_ie" onkeypress="$(this).mask('0.000.000');" placeholder="Ex.: 000.000.000" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_ass">Contato</label> <input type="text" class="form-control cadastro" id="c_nome" name="c_nome" placeholder="Nome" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_segmento">Segmento</label> <select id="c_segmento" name="c_segmento" class="form-control input-md cadastro"> <option value='1'>ALIMENTAÇÃO</option> <option value='0'>COMÉRCIO</option> </select> <br> </div> <div class="col-md-3"> <label for="c_telefone">Telefone</label> <input type="text" class="form-control cadastro" id="c_telefone" name="c_telefone" onkeypress="$(this).mask('(00) 0000-00009')" placeholder="(XX) XXXXX-XXXX" autocomplete="off" required> <br> </div> <div class="col-md-5"> <label for="c_email">E-mail</label> <input type="email" class="form-control cadastro" id="c_email" name="c_email" placeholder="XXX@XXX.com.XX" style="text-transform:lowercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_status">Status</label> <select id="c_status" name="c_status" class="form-control input-md cadastro"> <option value='1'>ATIVO</option> <option value='0'>INATIVO</option> </select> <br> </div> <div class="col-md-2"> </div> <div class="col-md-6"> <label for="c_endereco">Endereço</label> <input type="text" class="form-control cadastro" id="c_endereco" name="c_endereco" placeholder="Endereço" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_nro">Nro</label> <input type="number" class="form-control cadastro" id="c_nro" name="c_nro" placeholder="NRO" onkeypress="$(this).mask('00000')" required> <br> </div> <div class="col-md-4"> <label for="c_bairro">Bairro</label> <input type="text" class="form-control cadastro" id="c_bairro" name="c_bairro" placeholder="Bairro" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_complemento">Complemento</label> <input type="text" class="form-control cadastro" id="c_complemento" name="c_complemento" placeholder="Complemento" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_municipio">Município</label> <input type="text" class="form-control cadastro" id="c_municipio" name="c_municipio" placeholder="Município" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_cep">Cep</label> <input type="text" class="form-control cadastro" id="c_cep" name="c_cep" placeholder="CEP" onkeypress="$(this).mask('00000-000')" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_uf">UF</label> <select id="c_uf" name="c_uf" class="form-control input-md cadastro"> <option value="">Selecione</option> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapá</option> <option value="AM">Amazonas</option> <option value="BA">Bahia</option> <option value="CE">Ceará</option> <option value="DF">Distrito Federal</option> <option value="ES">Espirito Santo</option> <option value="GO">Goiás</option> <option value="MA">Maranhão</option> <option value="MS">Mato Grosso do Sul</option> <option value="MT">Mato Grosso</option> <option value="MG">Minas Gerais</option> <option value="PA">Pará</option> <option value="PB">Paraíba</option> <option value="PR">Paraná</option> <option value="PE">Pernambuco</option> <option value="PI">Piauí</option> <option value="RJ">Rio de Janeiro</option> <option value="RN">Rio Grande do Norte</option> <option value="RS">Rio Grande do Sul</option> <option value="RO">Rondônia</option> <option value="RR">Roraima</option> <option value="SC">Santa Catarina</option> <option value="SP">São Paulo</option> <option value="SE">Sergipe</option> <option value="TO">Tocantins</option> </select> <br> </div> <div class="col-md-12"> <label for="c_descricao">Descrição</label> <textarea class="form-control" id="c_descricao" name="descricao" rows="4" cols="130"></textarea> <br> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="cadastrar">Cadastrar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> </div> </div> </div> </div>

Boa tarde pessoal, Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo: echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV: //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html). O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa. Será que alguém já passou por isso?

Olá galera, Tenho um código que abre uma janela modal clicando num botão . Como faço para adaptar esse código para abrir usando um <input type="image" ... ? Abraço !!! <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

olá pessoal. Estou disponibilizando um script para paginação de noticias, ele funciona, porém, ao adaptar codigo usado da internet, não encontrei maneiras de LIMITAR os REGISTROS. Se alguém quiser contribuir, na parte da paginação, agradeço. preciso limitar os registros em 10 em 10 a paginação primeiro < 1 2 3 4 5 6 7 8 9 10 > ultimo <section class="container-fluid"> <div class="row mb-5"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5"> <h1 class="text-center"> Informações e noticias </h1> <h3 class="text-center"> Atualizações diárias de conteúdos advocatícios e judiciais </h3> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-xs-12 mt-2 p-5" style="height: auto;"> <% IF IsEmpty(Request.QueryString("idnot")) OR IsNull(Request.QueryString("idnot")) THEN SQL1 = "SELECT * FROM dbluz_noticias ORDER BY id DESC LIMIT 1" ELSE SQL1 = "SELECT * FROM dbluz_noticias WHERE id = "& Request.QueryString("idnot") &" ORDER BY id DESC LIMIT 1" END IF SET strNoticias = Server.CreateObject("ADODB.Recordset") strNoticias.Open SQL1, conexao, 3, 3 IF strNoticias.EOF THEN %> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;"> Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado. </h4> </div> <% ELSE DO WHILE NOT strNoticias.EOF %> <div class="box-noticias-data"> <%=strNoticias("dbluz_data")%> </div> <div class="box-noticias-subtitulo"> <%=strNoticias("dbluz_subtitulo")%> </div> <div class="box-noticias-titulo mt-4"> <%=strNoticias("dbluz_titulo")%> </div> <div class="box-noticias-descricao mt-5 text-justify"> <%=strNoticias("dbluz_descricao")%> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right box-noticias-fonte line-dotted-top mt-3 mb-5 p-2"> <span class="mb-5 mt-2 p-2 bg-success"> <a href="index.asp?idnot=<%=strNoticias("id")%>" role="button" class="btn btn-clean"> <span class="fa fa-print fa-1x font-color-var1"></span> </a> </span> </div> <% strNoticias.MoveNext Loop SET strNoticias = Nothing %> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mt-5 p-0"> <% SQL2 = "SELECT * FROM dbluz_noticias " SET strNoticiasBlocos = Server.CreateObject("ADODB.Recordset") strNoticiasBlocos.Open SQL2, conexao, 3, 3 IF strNoticiasBlocos.EOF THEN %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;">Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado.</h4> </div> </div> <% ELSE ItensExibidos = 1 'Qtde de Itens' NumeroDaPagina = Request.QueryString("pg") IF NumeroDaPagina = "" THEN NumeroDaPagina = 1 TotalDeRegistros = UBound(strNoticiasBlocos.GetRows,2)+1 InicioDaPagina = ((ItensExibidos*NumeroDaPagina)-ItensExibidos) FinalDaPagina = ItensExibidos IF TotalDeRegistros <= ItensExibidos THEN PaginaTotal = 1 ELSEIF (TotalDeRegistros MOD ItensExibidos = 0) THEN PaginaTotal = (TotalDeRegistros/ItensExibidos) ELSE PaginaTotal = (TotalDeRegistros/ItensExibidos) + 1 PaginaTotal = Cint(PaginaTotal) END IF strNoticiasBlocos.close SQL3 = SQL2 & "WHERE id != (SELECT max(id) FROM dbluz_noticias) ORDER BY id DESC LIMIT "& InicioDaPagina &" , "& FinalDaPagina &"" strNoticiasBlocos.Open SQL3, conexao, 3, 3 %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2"> <% DO WHILE NOT strNoticiasBlocos.EOF %> <div class="box-noticias-data-min"><%= strNoticiasBlocos("dbluz_data")%></div> <div class="box-noticias-titulo-min mt-1 mb-1"> <a href="index.asp?idnot=<%=strNoticiasBlocos("id")%>" class=""> <%= strNoticiasBlocos("dbluz_titulo")%> </a> </div> <div class="box-noticias-descricao-min hidden-sm hidden-xs mb-4 line-dotted-top"> <%= LEFT(strNoticiasBlocos("dbluz_descricao"),200)%> </div> <% strNoticiasBlocos.MoveNext Loop %> </div> <% END IF END IF %> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) THEN %> <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> </ul> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <div class="text-right p-1" style="font-size: 10px;"> Navegando na página <b id="barra_numero"><%= NumeroDaPagina %></b> de <b id="barra_total"><%= PaginaTotal %></b> </div> <div class="text-right p-1" style="font-size: 10px; color: dimgray;"> TOTAL DE <b id="barra_registro"><%= TotalDeRegistros %></b> REGISTROS </div> </div> </div> </div> </section> CODIGO DA PAGINACAO EXTRAIDO DA PARTE DE CIMA, a parte que preciso ajustar.... <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) THEN %> <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> Desde já obrigado...

Saudação a todos. Eu preciso fazer uma tabela dinâmica que puxe o seu conteúdo do banco de dados, porém no caso dessa estou tento dificuldade principalmente com o erro em "Call to undefined method PDO::fetch_assoc() " que diz que está faltando um parâmetro. Então resolvi refazer try e catch, mas ainda está dando erros. Agradeço desde de já a todos que se compadecerem do meu caso. Segue o código abaixo. <div class="w-100"></div> <!--TABELA PARA EXCLUSÃO--> <?php require 'conexao.php'; ?> <table class="table table-striped" id="excluir"> <thead> <tr> <th>ID</th> <th>Título da Postagem</th> </tr> </thead> <tbody> <?php //REALIZANDO CONSULTA try { $consulta = $cone->query("SELECT id,titulo FROM postagens;"); while($dado = $cone->fetch_assoc(PDO::FETCH_ASSOC)){?> <tr> <td ><?php echo utf8_encode($dado["id"]);?></td> <td> <?php echo utf8_encode($dado["titulo"]);?> </td> <?php );} catch(PDOException $e) { echo 'Error: ' . $e->getMessage(); }?> </tbody>

estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php Segue o código: <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar.

Olá! Tenho um carousel em Bootstrap que se ajusta automaticamente à página, porém no modo mobile fica muito pequeno. O carousel está direto no <body>. Segue o código. O resultado pode ser visualizado em: http://equipenovainfo.com.br/_portifolio/br_informatica_tec/ <!-- CAROUSEL --> <div id="carousel_slide" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active bg-primary" data-target="#carousel_slide" data-slide-to="0"></li> <li class="bg-primary" data-target="#carousel_slide" data-slide-to="1"></li> <li class="bg-primary" data-slide-to="#carousel_slide" data-target-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" src="_imagens/_slide/foto01.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição I</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto02.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição II</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto03.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição III</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel_slide" role="button" data-slide="prev"> <span class="carousel-control-prev-icon"></span> <span class="sr-only">Anterior</span> </a> <a class="carousel-control-next" role="button" data-slide="next" href="#carousel_slide"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Avançar</span> </a> </div>

Boa tarde gente, Recebi uma proposta de estagio que me pede para criar um aplicativo com os seguintes requisitos: 1) Desenvolva um aplicativo MVC com: Tela de Login (usuário e senha) Cadastro de usuário (usuário, senha, e-mail, ativo/inativo) --> Deve ter listagem --> Deve ter ativa e desativa usuário na lista --> Deve ter edição --> Utilizar BootStrap E como nao conheco muito sobre bootstrap e nem de mvc gostaria de saber se alguem poderia me ajudar. Obrigado.

Prezados, bom dia. Estou tendo dificuldades para criar uma interface usando o Bootstrap. Tenho uma listagem com o seguinte código: <div class="row"> <div class="col col-sm-12 col-md-12"> <table class="table table-responsive table-hover"> </table> </div> </div> Minha dúvida é a seguinte: No meu monitor essa tabela fica certinha, com tamanho de fontes legais, toda a linha ocupando a parte central da tela. Em outros monitores de mesmo tamanho mas com resolução diferente, essa mesma linha fica horrível, as fontes ficam grandes, a última coluna, onde tenho 3 botões, os botões ficam um em baixo do outro, sendo que os mesmos deveriam ficar um ao lado do outro, como ficam no meu monitor. Como trabalhar com resoluções diferentes usando o bootstrap, fazer com que meu design seja realmente responsivo? Agradeço ajudas ....

Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP. Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery. Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos. Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar. Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso. Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs. Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs. Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP? Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs. Grato...

Olá estou tendo problemas para compilar e instalar o bootstrap em minhas paginas web, sei que no site do próprio framework existe uma versão já compilada nos arquivos para download, já tenho ela baixada e descompactada na pasta do site e com os devidos links para chamar o css e javascript para a pagina a ser carregada mas ainda sim o botstrap não aplicado a pagina. <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/css/bootstrap.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> Segue uma imagem com o caminho até o arquivo bootstrap.css dentro da pasta css na pasta do site. O caminho esta correto mesmo assim ele não atribui o arquivo a pagina subsequentemente não a estiliza. O mesmo ocorre quando chamo o javascript que baixei já compilado mas nessa versão deixei o do CDN apenas para ver se funcionava esta rodando apena do CDN. Compilei eu mesmo usando aplicativos de compilação de sass mesmo assim ele não atribui a estilização a pagina poderia me dizer se este código BASE esta errado ou desponibilizar algum exemplo de um arquivo em que a ligação do bootstrap a uma pagina web esta feita corretamente. Agradeço desde já a quem puder ajudar!

olá pessoal. tentando criar paginação, moderna, busquei varios artigos na internet, porém, não consegui adaptar este.... que por sinal, fica joia, simples, rapido e objetivo, além de funcional para os tempos de hoje, jquery + bootstrap. trata-se do BOOTPAG ou TWBS Pagination: <nav aria-label="Page navigation"> <ul class="pagination" id="pagination"></ul> </nav> <div id="pagination_pag">Page 1</div> <script type="text/javascript"> $('#pagination').twbsPagination({ totalPages: 35, visiblePages: 2, onPageClick: function (event, page) { $("#pagination_pag").text('Page ' + page); } }); </script> Alguém já usou ele com ASP, ou PHP, onde posso utilizar junto com dados vindo de banco de dados???? Se alguem tiver exemplo e quiser postar, ou tiver dicas de como fazer, também, agradeço. Via AJAX no script, procurei no STACK OVERFLOW, também nada... Desde já agradeço.

Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem. Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma imagem para a direita me ajudem por favor. Codigo CSS abaixo: *{ padding: 0px; margin: 0px; } a{ text-decoration:none; color:#999; } body{ font-family: arial; color:#eaeeef; background-color: #36454f; /*Fundo Escur0*/ margin-left: -100px; margin-top: -16px; } .font400{ font-size: 4em; } .font350{ font-size: 3.5em; } .font300 { font-size: 3em; } .font200 { font-size: 2em; } .font180 { font-size: 1.8em; } .font12{ font-size:12px; } .font10{ font-size:10px; } .font18{ font-stretch: 18px; } .branca{ color:#FFFFFF } .cinza { color: #CBCCCD; } .vermelho_1{ color:#ff0000; } ul{ list-style:none; } /*Imagem do Menu*/ img{ width:35px; margin-left: 100px; margin-top: 10px; } input[type="checkbox"] { display:none; } nav { background-color: rgba(16,16,16,.5); width:150px; height:100%; left: -150px; position: absolute; transition: all .5s; } input[type="checkbox"]:checked ~ nav { transform: translateX(150px); } ul{ top:80px; position:absolute; width: 100%; } a{ background: block; padding:10px 5px; color: white; } a:hover{ background-color: rgba(); color: black; } label{ padding: 15px; position: absolute; z-index:1; /*icone*/ } /* Formatação de chamada principal da imagem em destaque*/ .chamada{ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg); background-position: center center; /* Centraliza a imagem no centro da tela*/ background-repeat: no-repeat;/* Não repete a imagem*/ background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/ background-attachment: fixed; height: 100vh; /*100% do view height*/ display: flex; } .area_chamada { margin: auto; margin-bottom:150px; text-align: center; } h2 { margin: 0px; } .titulo{ font-family: 'Open Sans', sans-serif; text-transform: uppercase; line-height: 1.1em; font-weight: 400; text-shadow: 2px 3px 0px rgba(0,0,0,.8); color: #CBCCCD; } .subtitulo{ font-family: 'Open Sans', sans-serif; text-transform: uppercase; line-height: 1.1em; font-weight: 400; text-shadow: 2px 3px 0px rgba(0,0,0,.8); height: 80px; } .parte_superior{ /*banner de 280px na largura e 120px*/ width: 100vw; height: 0px; display: flex; align-items: center; margin-top: 17px; margin-left: 50px; } /*imagem do logo*/ .logo> img { width:250px; margin-top: 0px ; margin: 160px; } .pesquisa { width:500px; height:40px; margin:200px auto; display: flex; margin-top: 80px; margin-left: 40px; border-bottom-width: 2px; } #texto { width:520px; height:50px; float:left; font-family:Arial, Helvetica, sans-serif ; font-size:18px; background: #151515; border: #151515; border-radius: 6px 0px 0px 6px; display: flex; color: white; justify-content: space-around; } #texto:focus { border: solid 2px #1f1f1f; } .btn { height:34px; width:17px; background:#ff0000; padding:6px 8px; cursor:pointer; display: flex; margin-top: -10px; border: solid 0px #ff0000; border-radius: 0px ; margin-left: 0px; } button{ padding: 12px; border-width: 0px; border-radius: 0px 6px 6px 0px; height: 50px; background: #ff0000; width: 60px; } /*Move todo o Slide*/ .miniaturas{ height: 290px; width: 180px; display: flex; padding: 0px 2%; margin-top: -250px; margin-left: 90px; margin-top: -100px; } /*Move todo o menu do slide*/ .horizontal{ display: flex; justify-content: center ; margin-left: 70px; justify-content: space-around; width: 200px; color: dimgrey; margin-top: 450px; } .ativo{ margin:0px; color:white; } .black_clover> img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .black_clover > img:hover{ opacity: 0.2; } .one_punch_man> img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .one_punch_man > img:hover{ opacity: 0.2; } .Dororo> img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .Dororo > img:hover{ opacity: 0.2; } .shingek_3>img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .shingek_3 > img:hover{ opacity: 0.2; } .Mob>img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .Mob > img:hover{ opacity: 0.2; } .kimetsu_no_yaiba>img{ height: 290px; width: 180px; display: flex; margin:10px; position: relative; z-index: 1; transition: all 0.5s linear; } .Kimetsu_no_yaiba > img:hover{ opacity: 0.2; } .figuras { display: flex; margin-left: 50px; justify-content: space-between; padding: 4%; height: 290px; width: 180px; } figure { margin: 0px; display: flex; } figcaption{ width: 180px; height: 290px; background-color: black; display: flex; min-height:290px; margin: 10px; margin-top: -300px; } .grana{ display: flex; } .baner{ padding-top: 100px; display: flex; } /*move o banner e a primeira coluna de animes*/ .bittube>a>img{ display: flex; width: 400px; margin: 0px 580px; margin-top: 20px; } .posts{ margin-top: 100px; padding: 0px -400px; display: flex; margin-left: 180px; } .primeira{ display: flex; } .primeira > ul > li{ display:inline-block; margin-top: 1220px; margin-left: 20px; } .One_Piece>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .One_Piece> img:hover{ opacity: 0.2; } .tate_no_yusha>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .tate_no_yusha> img:hover{ opacity: 0.2; } .naruto_shippuden>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .naruto_shippuden> img:hover{ opacity: 0.2; } .Nanatsu_no_taizai>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Nanatsu_no_taizai> img:hover{ opacity: 0.2; } .dragon_ball_super>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .dragon_ball_super> img:hover{ opacity: 0.2; } .boku_no_hero_academia>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .boku_no_hero_academia> img:hover{ opacity: 0.2; } /*Move toda a segunda coluna de animes*/ .coluna{ margin-top: 50px ; margin-left: 180px; display: flex; } .segunda{ display: flex; } .boruto>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .boruto> img:hover{ opacity: 0.2; } .isekai_maou>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .isekai_maou> img:hover{ opacity: 0.2; } .bleach>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .bleach> img:hover{ opacity: 0.2; } .fairy_tail>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .fairy_tail> img:hover{ opacity: 0.2; } .tensei_shitara>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .tensei_shitara> img:hover{ opacity: 0.2; } .Tokyo_Ghoul>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Tokyo_Ghoul> img:hover{ opacity: 0.2; } /*Move toda a coluna de séries*/ .coluna_series{ margin-top: 120px ; margin-left: 180px; display: flex; } .primeira_series{ display: flex; } .primeira_series > ul > li{ display:inline-block; margin-top: 2020px; margin-left: 20px; } .Atirador>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Atirador> img:hover{ opacity: 0.2; } .Game_of_thrones>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Game_of_thrones> img:hover{ opacity: 0.2; } .La_casa_de_papel>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .La_casa_de_papel> img:hover{ opacity: 0.2; } .lucifer>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .lucifer> img:hover{ opacity: 0.2; } .sons_of_anarchy>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .sons_of_anarchy> img:hover{ opacity: 0.2; } .vikings>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .vikings> img:hover{ opacity: 0.2; } /*Move toda a coluna de séries*/ .coluna_series2{ margin-top: 50px ; margin-left: 180px; display: flex; } .segunda_series2{ display: flex; } .segunda_series2 > ul > li{ display:inline-block; margin-top: 2020px; margin-left: 20px; } .The_purge>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .The_purge> img:hover{ opacity: 0.2; } .titans>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .titans> img:hover{ opacity: 0.2; } .the_big_bang_theory>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .the_big_bang_theory> img:hover{ opacity: 0.2; } .o_último_guardião>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .o_último_guardião> img:hover{ opacity: 0.2; } .legends_of_tomorrow>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .legends_of_tomorrow> img:hover{ opacity: 0.2; } .chernobyl>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .chernobyl> img:hover{ opacity: 0.2; } /*Move toda a coluna de séries*/ .coluna_fimes{ margin-top: 120px ; margin-left: 180px; display: flex; } .segunda_filmes{ display: flex; } .segunda_filmes > ul > li{ display:inline-block; margin-top: 2820px; margin-left: 20px; } .avangers_Age>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .avangers_Age> img:hover{ opacity: 0.2; } .capitan_marvel>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .capitan_marvel> img:hover{ opacity: 0.2; } .capitao_america>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .capitao_america> img:hover{ opacity: 0.2; } .guerra_civil>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .guerra_civil> img:hover{ opacity: 0.2; } .doutor_estranho>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .doutor_estranho> img:hover{ opacity: 0.2; } .hulk_o_inacreditavel>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .hulk_o_inacreditavel> img:hover{ opacity: 0.2; } .coluna_fimes1{ margin-top: 50px ; margin-left: 180px; display: flex; } .segunda_filmes1{ display: flex; } .segunda_filmes1> ul > li{ display:inline-block; margin-top: 2820px; margin-left: 20px; } .iron_man>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .iron_man> img:hover{ opacity: 0.2; } .thor>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .thor> img:hover{ opacity: 0.2; } .a_lenda_do_golem>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .a_lenda_do_golem> img:hover{ opacity: 0.2; } .maligno>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .maligno> img:hover{ opacity: 0.2; } .as_trapaceiras>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .as_trapaceiras> img:hover{ opacity: 0.2; } .homem_de_ferro2>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .homem_de_ferro2> img:hover{ opacity: 0.2; } .rodape{ padding: 25px; color: white font-size:1.5em; display: flex; padding-top: 3600px; padding-left: 350px; } .rodape li{ margin-right:20px; padding-top: 50px; } .parceria{ display: flex; padding-top: 3600px; padding-left: 350px; } .parceria li{ margin:-20px 10px; display:flex; <<<<<<<<Codigo Html abaixo>>>>>>>>

Datetimepicker do Bootstrap fica português só fora da internet testando no Wampserver passando para um domínio o datetimepicker funciona só que fica em inglês. Código: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap-combined.min.css" rel="stylesheet"/> <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <script src="js/bootstrap-datetimepicker.min.js"></script> <script src="js/bootstrap-datetimepicker.pt-BR"></script> <body> </head> <div class="container"> <div class="row justify-content-center"> <table class="table"> <thead> <th>&nbsp;ID_Cliente</th> <th>Preço</th> <th>Quantidade</th> <th>Total dos Serviços</th> <th>Forma de Pagamento</th> <th>Data</th> <th Colspan="9">Ação </th> </thead> <button type="button" class="btn btn-dark">Cliente</button> <button type="button" class="btn btn-secondary">Caixa</button> <button type="button" class="btn btn-primary">Relatorio1</button> <button type="button" class="btn btn-success">Relatorio2</button> <tbody> <tr> <td>&nbsp;1</td> <td>148,00</td> <td>1,0</td> <td>188,0</td> <td>Dinheiro a vista</td> <td>2011-08-19-13:45:00</td> <td> <button type="button" class="btn btn-info">Edit</button> <button type="button" class="btn btn-danger">Delete</button> </td> </tr> <tr> <td>&nbsp;2</td> <td>308,00</td> <td>1,0</td> <td>399,23</td> <td>Débito no cartão</td> <td>2011-08-20-22:45:00</td> <td> <button type="button" class="btn btn-info">Edit</button> <button type="button" class="btn btn-danger">Delete</button> </td> </tr> </table> </div> <BR> <BR> <BR> <div class="row justify-content-center"> <form action="" method="POST"> <div class="form-group row"> <div class="col-xs-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Serviços</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Escolha</option> <option value="1">Corte</option> <option value="2">Hidratação</option> <option value="3">Coloração</option> <option value="4">Relaxamento</option> <option value="5">Progressiva</option> <option value="6">Escova</option> </select> </div> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="cod">ID_Cliente:</label> <input type="text" class="form-control" id="cod" aria-describedby="name" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="preco">Preço:</label> <input type="text" class="form-control" id="preco" aria-describedby="name" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="Quantidade">Quantidade:</label> <input type="text" class="form-control" id="quantidade" aria-describedby="quantidade" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="totaldeserv">Total dos Serviços:</label> <input type="text" class="form-control" id="totaldeserv" aria-describedby="totaldeserv" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Forma de Pagamento:</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Escolha</option> <option value="1">Cartão de crédito</option> <option value="2">Cartão de débito</option> <option value="3">Dinheiro</option> </select> </div> </div> </div> <div id="datetimepicker" class="input-append date"> <label for="totaldeserv">Data_Horário</label> <input type="text"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> <div class="form-group row"> <div class="col-xs-8"> <button type="submit" name="save" class="btn btn-primary">Salvar</button> </div> </div> </div> </form> </div> </div> <script type="text/javascript"> $('#datetimepicker').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss', language: 'pt-BR' }); </script> </body> </html> ---------------------------------------------------------------------------------------------- /** * Brazilian translation for bootstrap-datetimepicker * Cauan Cabral <cauan@radig.com.br> */;(function($){$.fn.datetimepicker.dates['pt-BR'] = {days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "---", "Sáb", "Dom"],daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],today: "Hoje"};}(jQuery));

Bom dia! Teria como alguém me ajudar? Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo... Preciso criar um contêiner dentro de outro contêiner igual a imagem 1. Só que ele está ficando igual a imagem 2. Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente!

pessoal estou na busca de exemplos de paginação feitas em bootstrap e ASP, alguém possui exemplos para contribuir? links, códigos.....

Boa tarde, Estou atentar implementar bootstrap numa página estática no blogger. No entanto, quando coloco a biblioteca: href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” A página fica totalmente alterada. Alguem me consegue ajudar a cancelar os efeitos da biblioteca no que não quero. Alguem me consegue ajudar? Muito obrigado,

Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso? print 1: (modo mobile do inspecionar) no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato! http://prntscr.com/mvj3ed Grato desde já!

Boa tarde pessoal, tenho uma tabela que busca os valores no meu MYSQL. Tenho um id ( 199917 ) por exemplo. Ele aparece 10x no meu banco de dados 1 - 199917 data1 peso1 2 - 199917 data2 peso2 3 - 199917 data3 peso3 ..... etc Precisaria retornar da seguinte forma minha tabela 199917 - data1 peso1 data2 peso2 data3 peso3 199939 - data1 peso1 data2 peso2 data3 peso3 em anexo está as imagens, ficaria grato se puderem ajudar, dei uma pesquisada vi que tem rowspan, mas não faço ideia de como agrupar. Tabela 1 como está, tabela 2 como gostaria que ela fica-se meu Código: <div class="linha"></div> <div class="container"> <table class="table table-striped"> <thead class="thead-dark"> <tr> <th rowspan="1">Brinco</th> <th scope="col">Peso</th> <th scope="col">Data</th> <tr> </thead> @foreach($listagem as $lista) <tbody> <tr> <td rowspan="1">{{$lista->brinco_id }}</td> <td>{{$lista->peso }}</td> <td>{{ \Carbon\Carbon::parse($lista->data)->format('d/m/Y') }}</td> </tr> </tbody> @endforeach </table> </div>

Tenho uma tabela com muitas linha e uma dessas linha e muito grande, ja tentei varias coisas para arrumar mas nenhuma delas deu jeito nisso segue a tabela <div class='wrapper-modal-editor'> <div class='block my-4'> <div class='d-flex justify-content-center'> </div> </div> <table id='dtBasicExample' class='table table-striped table-bordered table-responsive'> <thead> <tr> <th class='th-sm'>Id Link </th> <th class='th-sm'>Link </th> <th class='th-sm'>Data Inicio </th> <th class='th-sm'>Data Fim </th> <th class='th-sm'>Ação </th> <th class='th-sm'>Dominio </th> <th class='th-sm'>Seleção </th> </tr> </thead> <div> <script src='../js/jquery-3.2.1.min.js'></script> <script src='../js/popper.min.js'></script> <script src='../js/bootstrap-4.0.0.js'></script> </div> </div> <tbody> <tr> <td>27</td> <td>c.apple.com/r?v=2&amp;la=pt&amp;lc=bra&amp;a=z2%2Bnb8HWCoHziyJtbRYNxDd%2FkgyZjZvGSC81JOPXnypgazdDEpi9VZFGWHLJPWmuLtv6bjDTIDHd4zoATogPVtQ0TnXoWLHI2XQ1aVDI5YpHS0D4qfYHYB09Aq0qVHjRe8TR8%2Fo56d7spUwxrFdNL9jusvKWFiLfJBTgZkKsbI4pWRAyzrFaNxkIWNXu%2Fakj&amp;ct=aI3g7L0A3k</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> </table>

Olá, estou tendo dificuldades em um site onde preciso desenvolver um modal ao clicar no botão X para excluir uma despesa, porém, o botão X foi criado no arquivo .js : //botão de excluir: let btn = document.createElement("button") btn.className = 'btn btn-danger' btn.innerHTML = '<i class="fas fa-times"></i>' btn.id = `id_despesa_${d.id}` btn.onclick = function(){ let id = this.id.replace('id_despesa_', ''); bd.remover(id) window.location.reload() } linha.insertCell(4).append(btn) console.log(d) Toda despesa criada, automaticamente é adicionado o botão X ao lado da despesa. Como poderia fazer aparecer um modal ao clicar nele, para saber se o usuário quer cancelar ou excluir a despesa?