Pesquisar na Comunidade
Mostrando resultados para as tags ''bootstrap''.
Encontrado 175 registros
-
Olá amigos do imasters, sou novo por aqui então se eu postei em uma área errada desculpem. Sou Front-end mas tem pouco tempo que comecei a mexer com Bootstrap, queria uma avaliação para ver o que vocês acham Link: http://brunohenrique.esy.es/movie/ esse é um dos meus primeiros projetos, criticas construtivas serão bem-vindas PS: não está 100% responsivo.
-
bootstrap Como usar o Bootstrap de forma customizada e consistente?
Joao_Lucaas postou um tópico no fórum HTML e CSS
Estou estudando o framework mencionado e tenho dificuldade de encontrar conteúdos que ensinem como usá-lo de forma customizada e consistente. Nesse sentido, cheguei a ler alguns livros, mas eles sempre abordam o assunto de forma rasa. Ainda assim, consegui aprender alguns princípios, como importar somente os partials necessários. No entanto, nem sempre eu uso todo código de um partial. Assim, sempre acaba sendo importado algum trecho desnecessário. Devido a isso, me pego questionando se isso é normal ou, mesmo, se estou usando todo o poder do Sass. Dado isso gostaria do esclarecimento de vocês, quanto ao seguinte: É comum "sobrar" CSS, importando um partial Bootstrap? Se sim: Então, devo usar alguma ferramenta como o UnCSS? Se não: O que posso estar fazendo errado? Conhecem algum conteúdo voltado a ensinar de forma ampla, como usar Bootstrap e seus partials? -
Bom dia amigos. Estou desenvolvendo um site para um cliente e estou fazendo uso do bootstrap para tal. Utilizo a versão 3.3.7 (e gostaria de mantê-la). Bom, o problema é que não consigo mudar a cor dessa div. O trecho abaixo é da div <nav> <nav class="navbar navbar-default navbar fixed-top navbar-height navbar-zindex"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#bona-navbar"></button> <a class="navbar-brand" href="index.php"><img class="navbar-brand-" src="image/logo.jpg" alt="" /></a> </div> <ul id="bona-navbar" class="nav navbar-nav navbar-right collapse navbar-collapse navbar-zindex" data-toggle="collapse" data-target="#bona-navbar"> <li><a class="navbar-link" href="empresa.php">Empresa</a></li> <li><a class="navbar-link" href="servicos.php">Serviços</a></li> <li><a class="navbar-link" href="links.php">Links Úteis</a></li> <li><a class="navbar-link" href="orcamento.php">Orçamento</a></li> <li><a class="navbar-link" href="contato.php">Contato</a></li> <li><a class="navbar-link" href="localizacao.php">Localização</a></li> </ul> </div> </nav> Agora o css: .navbar-brand-{ height: 80px; } .navbar-height{ height: 110px; } .navbar-zindex{ z-index: 99; background: #f8f8f8; } .navbar-link{ font-family: 'Poppins', sans-serif; font-size: 18px; margin-top: 45px; } .navbar-link:hover{ font-size: 18px; background: #007cc2; } li:hover{ background: #e57716; height: 10px } E por fim, como fica no site: Gostaria de saber se alguém consegue me ajudar nessa? Ah, tbm não consigo mudar a cor dos links quando passo o mouse; do jeito que está não é como eu quero. Qualquer ajuda é bem vinda amigos. Obrigado a todos desde já, um grande abraço e até mais. Att.
-
gostaria de posicionar a divs, igual está na imagem, estou usando html, css e bootstrap. oq eu quero fazer é colocar um video(o bloco maior) e video menores(blocos menores).
-
Não consigo colocar o usuario e senha incorretos no formulário
Richard Bastos postou um tópico no fórum PHP
Não estou conseguindo adicionar o usuario ou senha incorretos no formulário. Não aparece. Codigo html <!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="Pagina de login "> <meta name="author" content="RXCad"> <link rel="icon" href="images/favicon.ico"> <title>RXCad - Login</title> <!-- AREA DE BOOTSTRAP --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--AREA DE CSS --> <link href="css/style.css" rel="stylesheet"> </head> <body class="text-center"> <!-- Fim container --> <form class="form-signin" method="POST" action="valida_login.php"> <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">Área restrita</h1> <!-- CAMPO DE USUARIO--> <label for="inputEmail" class="sr-only">Usuario</label> <input type="text" id="inputEmail" name="usuario" class="form-control" placeholder="Digite seu usuário" required autofocus> <!-- CAMPO DE SENHA--> <label for="inputPassword" class="sr-only">Senha</label> <input type="password" id="inputPassword" name="senha" class="form-control" placeholder="Digite sua senha" required> <!-- CAMPO DE LEMBRAR - ME--> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Lembrar-me </label> <!--USUARIO OU SENHA INCORRETOS --> <p class="text-center text-danger"> <?php if(isset($_SESSION['loginErro'])){ echo $_SESSION['loginErro']; unset($_SESSION['loginErro']); } ?> </p> </div> <!-- BOTAO DE LOGIN--> <button class="btn btn-lg btn-primary btn-block" type="submit">Acessar</button> <p class="mt-5 mb-3 text-muted">© 2018-2029</p> </form><!-- Fim container--> </body> </html> PHP PARA VALIDAÇÃO DE DADOS <?php session_start(); $usuariot = $_POST['usuario']; //capta o usuario $senhat = $_POST['senha']; // capta senha //echo $usuariot." - ".$senhat; include_once("conexao.php"); $result = mysqli_query($conectar,"SELECT * FROM usuarios WHERE login = '$usuariot' AND senha = '$senhat' LIMIT 1" ); $resultado = mysqli_fetch_assoc($result); // echo $resultado['nome']; // tras o nome do usuario if(empty($resultado)){ //Mensagem de Erro $_SESSION['loginErro'] = "Usuário ou senha Inválido";// variavel global //Manda o usuario para a tela de login header("Location: login.php"); } ?> PHP DE CONEXÃO <?php $conectar = mysqli_connect("localhost","root","","rxcad") or die ("Erro de conexão"); mysqli_select_db($conectar,"rxcad") or die ("Base de dados não encontrada"); ?> -
Boa tarde galera. Alguém sabe me dizer como faço para o input range aparecer como a imagem? Preciso criar uma busca com intervalos de valores, gostaria de utilizar essa barra. Já procurei varios materiais na internet e não encontrei nada. Lembrando que estou utilizando Bootstrap.
-
<!DOCTYPE html> <head> <meta charset="utf-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form name="form" action="" method="post" data-toggle="validator" role="form"> <div class="row"> <div class="help-block with-errors"></div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <input type="text" placeholder="CPF" name="CPF" data-error="Por favor, informe seu CPF." required> </div> <input type="submit" value="Cadastrar" /> </div> </form> <!--jQuery--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!--Bootstrap--> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!--validator--> <script src="js/validator.min.js"></script> </body> </html>
-
[resolvido]Imagem fixa e responsiva com link no bootstrap
Rafael_Ferreira postou uma questão Perguntas e respostas rápidas
Eu precisava de implementar um link para o possível cliente entrar diretamente no meu whatsapp. Eu queria colocar uma imagem "fixa", quando o cliente rolar a barra de rolagem a imagem continua aparecendo no monitor, no canto inferior direito mas eu gostaria que esta imagem fosse responsiva usando o bootstrap. -
framework Estou com problema para usar o bootstrap4.1 em meu site, porem quando utilizo a versão3.3.7 ele funciona normalmente.
Amanda Morales postou um tópico no fórum HTML e CSS
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="curso de bootstrap 3"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <title>3° site com bootstrap tabelas</title> <style> .table-striped > tbody > tr{ background-color:red; } .table-hover > tbody >tr:hover{ background-color:blue; color:white; } </style> </head> <body> <div class="container-fluid"> <h3 class="text-center">Tabelas</h3> </div> <div class="row"> <div class="col-md-6"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr > <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0001-00</td> </tr> <tr > <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td class="success">0001</td> <!--linhas decoradas--> <td class="danger">Bootstrap essencial - ME</td> <td class="warning">00.000.000/0001-00</td> </tr> <tr class="success"> <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr class="warning"> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr class="active"> <td>0005</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0005-00</td> </tr> <tr class="info"> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </table> </div> <!--tabela responsiva--> </div> </div> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html> acima site usando a versão antiga <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="curso de bootstrap 3"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <title>3° site com bootstrap tabelas</title> <style> .table-striped > tbody > tr{ background-color:red; } .table-hover > tbody >tr:hover{ background-color:blue; color:white; } </style> </head> <body> <div class="container-fluid"> <h3 class="text-center">Tabelas</h3> </div> <div class="row"> <div class="col-md-6"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr > <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0001-00</td> </tr> <tr > <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td class="success">0001</td> <!--linhas decoradas--> <td class="danger">Bootstrap essencial - ME</td> <td class="warning">00.000.000/0001-00</td> </tr> <tr class="success"> <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr class="warning"> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr class="active"> <td>0005</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0005-00</td> </tr> <tr class="info"> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </table> </div> <!--tabela responsiva--> </div> </div> <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </body> </html> o que denunciou a falha do framework foi a table-striped não ter funcionado e o estados nas linhas da tabela. -
Como fica o arquivo cabeçalho do BootStrap 4 ?
Vicente Paulo Maciel postou um tópico no fórum HTML e CSS
<head> <meta charset="utf-8"> <title>Currículo</title> <meta http-equiv="Content-Language" content="pt-br"> <meta charset="utf-8"> <meta name="author" content="Vicente Paulo Maciel"> <meta name="description" content="Site de recrutamento on-line, divulgar vagas de emprego e cadastro de currículos"> <meta name="keywords" content="emprego,vaga,trabalho,currículo,rh,recursos humanos,curriculum vitae,cadastro de currículo"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/> <script src="<?= base_url('assets/bootstrap/css/bootstrap-theme.min.css') ?>"></script> <script src="<?= base_url('assets/bootstrap/js/jquery.js') ?>"></script> <script src="<?= base_url('assets/bootstrap/js/bootstrap.js') ?>"></script> <script src="<?= base_url('assets/js/js.js') ?>"></script> <script src="<?= base_url('assets/js/javascript.js') ?>"></script> <link rel="stylesheet" href="<?= base_url('assets/bootstrap/css/bootstrap.css') ?>"> <link rel="stylesheet" href="<?= base_url('assets/css/estilo.css') ?>"> <link rel="icon" type="image/jpg" href="<?= base_url('assets/img/favicon.ico') ?>"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> Este é um exemplo com BootStrap 3.Quero saber como fica com BootStrap 4.Com o aquivo do BootStrap 4 baixado no computador. -
Olá amigos Gostaria de diminuir o espaçamento entre linhas no bootstrap, porém não está funcionando. Tentei da seguinte forma: .form_cad form{ margin: 0!important; padding: 0!important;} .form_cad h3{ margin: 0!important; padding: 0!important;} .form_cad row { margin: 0!important; padding: 0!important;} .form_cad form-group{ margin: 0!important; padding: 0!important;} .form_cad input-group{ margin: 0!important; padding: 0!important;} .form_cad select{ text-align: left; margin: 0!important; padding: 0!important;} .form_cad label{ margin: 0!important; padding: 0!important;} .form_cad a{ margin: 0!important; padding: 0!important;} .form_cad button{ margin: 0!important; padding: 0!important;} Meu formulário: <div class="container-fluid"> div class="row-fluid"> <div class="col-md-10"> <h3 class="page-header">Meu Form</h3> <div class="row"> <form id="cadastro" class="form_cad" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <div class="row"> <div class="form-group col-md-3 col-md-offset-2"> <label>Data Solicitação</label> <div class="form-group"> <div class='input-group date' id='cal'> <input class="form-control form_input_recebe_foco" type="text" id="data_solicitacao" name="data_solicitacao" required autofocus maxlength="10" value="" placeholder="(Obrigatório)"> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </div> </div> <!-- /row --> <div class="row"> <div class="form-group col-md-3 col-md-offset-2"> <label for="qdade_horas">Quantidade Horas</label> <input class="form-control form_input_recebe_foco" type="text" id="qdade_horas_dec" name="qdade_horas" maxlength="5" required autocomplete="off" value=""> </div> </div> <!-- /row --> .......... O estilo css não está funcionando em relação a diminuir o espaçamento entre as linhas do formulário. O que preciso fazer?
-
Bom dia galera, tenho um selectpicker multiple que alimento dinamicamente. Utilizo ele em um filtro de pesquisa. Tudo está ok, porém, o único problema que estou tendo é que quando dou submit no formulário, ele não guarda os itens que selecionei, ficando sem nada selecionado. Alguém sabe me dizer como consigo alimentar este selectpicker com os dados que selecionei antes do submit?
-
Novo Erro do Ícone animado “x” para o botão de alternância da barra de navegação do Bootstrap
Gilberto Jr postou um tópico no fórum HTML e CSS
Boa madruga Pessoal; Seguinte, eu criei o menu bootstrap segue o código abaixo. Quando eu estou vendo o site pelo celular, o menu vira um HAMBURGUER. Só que eu quero quando clicar no HAMBURGUER ele vira um X. E quando eu clicar no link ele voltar para o HAMBURGUER. <style type="text/css"> .navbar-toggle { border: none; background: transparent !important; } .navbar-toggle:hover { background: transparent !important; } .navbar-toggle .icon-bar { width: 22px; transition: all 0.2s; } .navbar-toggle .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); } </style> <!--INICIO NAV BAR ONDE FICA OS DADOS DO MENU--> <nav class="navbar navbar-default navbar-fixed-top" style="border-bottom: 3px solid #ff330d;"> <!--INICIO DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES--> <div class="container-fluid containertop" id="topoinicio"> <div class="navbar-header"> <!--INICIO CONFIGURAÇÃO MENU HAMBERGUER--> <button type="button" class="navbar-toggle menuHamburguer collapsed" data-toggle="collapse" data-target="#menu-navegacao"> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <!--FIM CONFIGURAÇÃO MENU HAMBERGUER--> <!--INICIO LOGO MARCA--> <!--<a class="navbar-brand" href="#page-top"> <span class="iden">Iden</span> <span class="techonology">Technology</span> </a>--> <ol class="nav"> <ol class="menu" style="border:none;"> <a href="#home"> <img src="img/ico.png" class="img-responsive img-rounded imgLogo"> </a> </ol> </ol> <!--FIM LOGO MARCA--> </div> <!--INICIO MENU LINK--> <div class="collapse navbar-collapse menu-navegacao" id="menu-navegacao"> <ul class="nav navbar-nav navbar-right"> <li class="menu"> <a href="#home">HOME</a> </li> <li class="menu"> <a href="">FRUTAS EXÓTICAS</a> </li> <li class="menu"> <a href="">FRUTAS FRESCAS</a> </li> <li class="dropdown menu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">EMBALADOS</a> <ul class="dropdown-menu"> <!--<div class="clearfix"></div>--> <div id="sazonalidade" class="sazonalidade" style="margin-left:18px;"> <div href="letraE" class="sim">J</div> <div class="sim">F</div> <div class="sim">M</div> <div class="sim"><a href="#letraB">B</a></div> <div class="sim">M</div> <div class="sim"><a href="#letraC">C</a></div> <div class="sim">J</div> <div class="sim"><a href="#letraA">A</a></div> <div class="sim">S</div> <div class="sim"><a href="#letraE">E</a></div> <div class="sim">N</div> <div class="sim"><a href="#letraD">D</a></div> </div> </ul> </li> <li class="dropdown menu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">FAMÍLIAS<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a familia="5">Kiwis</a></li><br/> <li><a familia="1">Maçãs</a></li><br/> <li><a familia="2">Mangas</a></li><br/> <li><a familia="3">Melões</a></li><br/> <li><a familia="7">Pêras</a></li><br/> <li><a familia="4">Pimentões</a></li><br/> <li><a familia="8">Uvas</a></li><br/> </ul> </li> <!--<li class="menu"> <a href="#localizacao">LOCALIZAÇÃO</a> </li> --> <li class="menu"> <a href="#contato">CONTATO</a> </li> </ul> </div> <!--FIM MENU LINK--> </div> <!--FIM DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES--> </nav> <!--FIM NAV BAR ONDE FICA OS DADOS DO MENU--> Nesse outro artigo, foi so colocar a classe collapsed no buttom e deu certo. Mas nesse aqui não deu certo. O que poderia ser? Segue o link Erro Menu Hamburguer -
javascript Adicionar campo dinâmico - problema com selectpicker
AndersonWS postou um tópico no fórum Javascript
Tenho um código que adaptei daqui mesmo do fórum para adicionar campos dinâmicos. Meu problema é que ao adicionar um campo "select" que usa o "selectpicker bootstrap" ele não funciona. Não sei se é um problema de javascript ou de css então me desculpem se postei no local errado. Segue o código: //<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> function mais_vinculos(){ var quantidade = $('.vinculo').size(); var div_qnt = parseInt(quantidade)+1; $('.mostrando_vinculos').append('<div class="form-group vinculo vinc'+div_qnt+'">\ <label class="col-md-9 control-label"><h4>Vinculo '+div_qnt+'</h4>\ <div class="form-group">\ <select name="vinculo[]" class="form-control selectpicker" data-live-search="true" title="Selecione vinculo...">\ <option value="1">Vinculo 1</option>\ <option value="2">Vinculo 2</option>\ <option value="3">Vinculo 3</option>\ <option value="4">Vinculo 4</option>\ <option value="5">Vinculo 5</option>\ </select>\ </div>\ <div class="form-group">\ <input name="nome[]" placeholder="Digite o nome..." class="form-control input-md" type="text"/>\ </div>\ </label>\ <div class="col-md-3">\ <a href="javascript: menos_vinculos(\'vinc'+div_qnt+'\')" class="btn btn-info pull-right">X</a>\ </div>\ </div><br/>\ '); } function menos_vinculos(classe){ $("."+classe).remove(); } <div class="mostrando_vinculos col-md-12"> </div> <div class="col-md-12"> <a href="javascript: mais_vinculos();" style="width:100%;" class="btn btn-md btn-default"> Adicionar vinculos </a> </div> O campo "input" aparece normal porém o select não é mostrado A classe fica assim: select.bs-select-hidden, select.selectpicker { display: none !important; } Mas se eu mudar ela o selectpicker bootstrap não funciona e aparece um select normal. O que eu posso fazer para resolver isso? Preciso usar o selectpicker bootstrap pois irão ter muitos resultados e a busca do selectpicker bootstrap facilita para meu caso. *Caso seja um CSS ou PHP e não javascript favor mover o tópico. Grato. -
Olá pessoal boa tarde estou corrigindo algumas falhas no site http://dev.maples.com.br/sardenberg/. logo no inicio do site , temos a apresentação de 3 posts. Um que pega 8 colunas e outros 2 que pegam o tamanho de 4 colunas cada. os menores devem ficar um abaixo do outro e ao lado esquerdo do maior, de forma alinhada. por alguma razão esses dois estão como se estivessem na mesma row, só que preciso que um fique abaixo do outro e os dois alinhados ao lado do post maior. se eu fizer uma outra row entre eles este segundo não irá para baixo do bloco? preciso de uma orientação abraços
-
Site usando Bootstrap correto no inspetor e errado no celular
ment0r postou um tópico no fórum HTML e CSS
Boa tarde à todos. Resolvi tirar minha defasagem em relação à criação de sites responsivo e resolvi estudar Bootstrap. Fiz um site de teste pra implementar as técnicas do BS e no inspetor do Firefox e do Chrome, o site se ajudar ao redimensionamento e ficou Ok, porém quando foi visualizá-lo no meu celular, o mesmo fica como sendo visto no PC. Redimensionando a tela nos inspetores, aparece aquele menu hambúrguer; os elementos, imagens e fontes mudam de tamanho e o alinhamento fica vertical; no celular não. Se alguém puder me ajudar, o link para o teste é http://dcginfo.com/develop/mhf/ Agradeço aos amigos desde já pela ajuda. Grande abraço. -
Pessoal, boa noite; Seguinte, eu tenho esse site que estou quase finalizando pra entregar. Iden Technology Quando eu estou vendo o site responsivo dai o menu muda. Vira aquela hamburguer. E eu queria que quando eu clicasse no HAMBURGUER e abre o menu, quando clicar no menu, ele fechar o menu que foi aberto. Como eu resolveria essa questão? Att; Gilberto Jr
-
Pessoal, boa noite; Seguinte, eu tenho esse site que estou quase finalizando pra entregar. Iden Technology Quando eu estou vendo o site responsivo dai o menu muda. Vira aquela hamburguer. E eu queria que quando eu clicasse no HAMBURGUER e abre o menu, quando clicar no menu, ele fechar o menu que foi aberto. Como eu resolveria essa questão? Att; Gilberto Jr
-
Bom dia, Estou tendo um problema com as rotas e não estou conseguindo entender esse problema, pois esse problema só acontece com algumas rotas e somente na rota com "/". Trecho do código na route-web: Route::prefix('cliente-fornecedor')->group(function () { Route::get('/', 'Mock\\ClienteFornecedorController@listar')->name('cliente-fornecedor'); Route::get('cadastrar', 'Mock\\ClienteFornecedorControllers@form')->name('cliente-fornecedor.cadastrar'); }); Controller: <?php namespace App\Http\Controllers\Mock; use Illuminate\Http\Request; use App\Http\Controllers\Controller; class ClienteFornecedorController extends Controller { public function form(Request $request) { return view('pages.cliente-fornecedor.form'); } public function listar(Request $request) { return view('pages.cliente-fornecedor.listar'); } } Problema: Alguém poderia me ajudar?
-
Tabela bootstrap responsiva - Não aumentar a altura dentro da TR
Luis Felipe Rebecca postou um tópico no fórum HTML e CSS
Bom dia, Estou fazendo uma tabela em Bootstrap e quero que ela fique com a barra de rolagem horizontal;Certo!! Eu coloquei a barra de rolagem, porem a tabela não fica totalmente responsiva, alguns campos pular para a linha de baixo dentro do tr e eu queria que todos ficassem em somente uma linha.Segue imagem do problema relatado:Segue o código: <div class="table-responsive"> <table class="table table-sm table-striped table-bordered table-hover" style="width: 99.99%" > <thead> <tr> <th scope="col" style="text-align: center;">Identificação</th> <th scope="col" style="text-align: center;">Endereço</th> <th scope="col" style="text-align: center;">Bairro</th> <th scope="col" style="text-align: center;">Cidade</th> <th scope="col" style="text-align: center;">Estado</th> <th scope="col" style="text-align: center;">Cep</th> <th scope="col" style="text-align: center;">Cnpj/Cpf</th> <th scope="col" style="text-align: center;">Ins. Estadual</th> <th scope="col" style="text-align: center;">Restrições</th> <th scope="col" style="text-align: center;">Ações</th> </tr> </thead> <tbody> <tr> <td>Tecmaf</td> <td>Rua xxxxxxxxxxx,2024</td> <td>Residencial Nardini</td> <td>Americana</td> <td>SP</td> <td>154765488-25</td> <td>475214874545</td> <td>4144634627723</td> <td>08:00 ÀS 11:30 </td> <td class="text-nowrap" style="text-align: center"><a href="#" data-original-title="editar"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a> <a href="#" data-original-title="editar"> <i class="fa fa-trash text-inverse m-r-10"></i> </a> </td> </tr> <tr> <td>Tecmaf</td> <td>Rua xxxxxxxxxxx,2024</td> <td>Residencial Nardini</td> <td>Americana</td> <td>SP</td> <td>154765488-25</td> <td>475214874545</td> <td>4144634627723</td> <td>08:00 ÀS 11:30</td> <td class="text-nowrap" style="text-align: center"><a href="#" data-original-title="editar"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a> <a href="#" data-original-title="editar"> <i class="fa fa-trash text-inverse m-r-10"></i> </a> </td> </tr> <tr> <td>Tecmaf</td> <td>Rua xxxxxxxxxxx,2024</td> <td>Residencial Nardini</td> <td>Americana</td> <td>SP</td> <td>154765488-25</td> <td>475214874545</td> <td>4144634627723</td> <td>08:00 ÀS 11:30</td> <td class="text-nowrap" style="text-align: center"><a href="#" data-original-title="editar"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a> <a href="#" data-original-title="editar"> <i class="fa fa-trash text-inverse m-r-10"></i> </a> </td> </tr> <tr> <td>Tecmaf</td> <td>Rua xxxxxxxxxxx,2024</td> <td>Residencial Nardini</td> <td>Americana</td> <td>SP</td> <td>154765488-25</td> <td>475214874545</td> <td>4144634627723</td> <td>08:00 ÀS 11:30 </td> <td class="text-nowrap" style="text-align: center"><a href="#" data-original-title="editar"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a> <a href="#" data-original-title="editar"> <i class="fa fa-trash text-inverse m-r-10"></i> </a> </td> </tr> </tbody> </table> </div> Resumindo... preciso que ela fique totalmente em uma linha só e o usuário só consiga ver os dados se ele rolar a barra para a direita. -
Slider horizontal e Hover com elementos
Rodrigo Vieira E da Silva postou um tópico no fórum HTML e CSS
Boa noite a todos, tudo bem com vocês? A minha dúvida é a seguinte, eu estou utilizando o Bootstrap 4 e o design, fez um layout do site utilizando um slider horizontal de fotos, e quando passa o mouse sobre a foto o hover dessa foto é diferente pois será adicionado mais informações eu gostaria de saber como eu consigo produzir isso. É somente isso. Obrigado a todos. Abraços. -
Boa tarde, Alguem conhece bem de front end? porque estou começando. Meu organograma em css está quebrando, queria deixar ele continuo, sem quebrar, ja tentei colocar overflow-x: auto, e coisas do tipo, mas mesmo assim ele quebra conforme imagem. Estou usando dentro do container-fluid do bootstrap 4, alguem sabe como solucionar? Meu css: <style> /*#region Organizational Chart*/ .tree * { margin: auto; padding: 0px; } .tree ul { padding-top: 20px; position: relative; -transition: all 0.s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 0px; -transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #696969; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border-left: 2px solid #696969; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child{ padding-top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before{ border-right: 2px solid #696969; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #696969; width: 0; height: 20px; } .tree li a{ height: auto; width: auto; padding: 5px 10px; text-decoration: none; background-color: white; color: #8b8b8b; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); -transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #cbcbcb; color: #000; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border-color: #94a0b4; } .center { margin: auto; width: 50%; padding: 80px; } /*#endregion*/ </style> Um trecho do meu html: <div class="tree"> <ul> <li style="padding: 20px 202px 10px 201px !important"> </a> <br> <br> <a href="#"> <div class="container-fluid"> <div class="flex-row"> <?php $status = 4; try { $listaSquad=new Organograma(); $listaSquad->status=$status; $resultado=$listaSquad->listarOrganograma($status); } catch ( Exception $e ) { Erro::trataErro( $e ); } ?> PRODUTO </div> <div class="row" style="margin-top: 35px;"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> </div> </a> <ul> <li style="padding: 20px 202px 10px 201px !important"> <a href="#"> <div class="container-fluid"> <div class="flex-row"> DESENVOLVIMENTO </div> <div class="row" style="margin-top: 35px;"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> <?php $status = 15; try { $listaSquad=new Organograma(); $listaSquad->status=$status; $resultado=$listaSquad->listarSeresOrganograma($status); } catch ( Exception $e ) { Erro::trataErro( $e ); } ?> </div> </div> </a> </li> </ul> </li> </ul> </div> se alguem puder ajudar, agradeço. valeu
-
Olá amigos, estou desenvolvendo um site com bootstrap para uma associação sem fins lucrativos, mas não estou conseguindo alinhar o dropdown menu, pois quando clico em cima do botão as diversas opções aparecem mais à esquerda do botão; se encostar os outros botões a listagem fica alinhada mas não fica bem esteticamente. Junto uma imagem para melhor esclarecimento. A imagem da esquerda é como fica e a direita é como pretendo que fique mas com os botões separados. Muito obrigado-
-
Pessoal sou novo com bootstrap e gostaria de um exemplo de um menu com submenu lateral responsivel fixo eu quero eu menu fique fixo e conteúdo role somente para baixo
-
Poderiam me dizer se existe alguma forma de fazer a orientação em landscape utilizar as classes do padrão sm do Bootstrap ao invés de xs? Obrigado.
