Pesquisar na Comunidade
Mostrando resultados para as tags ''bootstrap''.
Encontrado 32 registros
-
Como colocar um spinner do bootstrap antes do carregamento da query com o codeigniter.
clovis.sardinha postou um tópico no fórum 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>
-
Icone da pagina não aparece na busca mobile
leonardorafaeldev postou um tópico no fórum Desenvolvimento frontend
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>
-
[Resolvido] Erro de formataçao web to mobile
Matheus B. Siqueira postou um tópico no fórum Desenvolvimento frontend
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 postou um tópico no fórum Desenvolvimento frontend
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 postou um tópico no fórum Desenvolvimento frontend
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á !
-
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>
-
Adminnlte3 Bootstrap Formulario com Tabs
Rafael Castelhano postou um tópico no fórum Desenvolvimento frontend
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?
