Jump to content
Luccas Gaulia

Classes de acordo com a resolução

Recommended Posts

Ola Pessoal,

 

Estou organizando o css e queria que a classe que fica no index (exemplo: se-include) utilizando uma classe do Bootstrap, mas de acordo com a resolução...

Assim, ele colocaria a class de acordo com a resolução seria o tamanho do Bootstrap....

 

Não esta funcionando, então poderiam me ajudar?

 

/** Smarthphones no formato "retrato" **/
@media screen and (min-width: 480px) and (orientation:landscape){
  html{
    font-size: 14px;
  }
  .btn{ font-size: 12px; }
  .se-include, .col-md-12{ }
}

/** Tablets e Smarthphones de segunda geração **/
@media screen and (max-width: 780px) and (orientation:portrait){
  html{
    font-size: 14px;
  }  
  .se-include, .col-md-12{ }
}

/** Desktops, Laptops e TVs. **/
@media screen and (min-width: 780px){
  html{
    font-size: 16px;
  }
  .se-include, .col-md-8, .col-md-offset-2 {  }
}

 

Share this post


Link to post
Share on other sites

Uma dica: Não precisa dessa "gabiarra" para passar media basta executar @media (TIPO)

 

Vamos lá: CSS não pode adicionar/remover dados na página, somente pode manipular.

Para que isso funcione .se-include, .col-md-8, .col-md-offset-2

 

A div deve possuir umas dessas class. Assim sendo se for min-width 780 qualquer resolução acima disso a div portadora dessa class assume suas propriedades.

 

Agora se for o caso de se-include somente aparecer com essa resolução em uma div qualquer. Isso deve ser feito por intermédio de javascript

Share this post


Link to post
Share on other sites

Então... o Seguinte...

 

Eu preciso que a resolução mude de acordo com o aparelho utilizado, por isso estou usando @media... até ae tudo bem...

 

Só que, preciso que ao uso em aparelhos de Desktop, Notes e etc... fique com 80% da Resolução, não precisa esticar tudo...

O restante, fique 100%...

 

Por isso, a ideia seria utilizar a classe "se-include" e ela puxar as outras classes para ela, assim funcionaria do jeito que quero...

 

Então, na realidade, como eu determino uma classe "pegue" todas as atribuições de outra classe? Nesta caso, Boostrap...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Usleydocarmo
      Estou com o seguinte erro:
      Ao acessar o meu site na pagina principal tudo ok. Porém quando acesso em um menu que vai carregar um arquivo que está em uma pasta e não na pasta raiz, ai o arquivo css não é carregado.
       
      <a href="usuarios"> home</a> chamo o arquivo funcionarios na mesma pasta onde está o arquivo index.php -funciona
      <a href="usuarios/usuarios"> home</a>  Pasta 'usuarios' e dentro dela chamo o arquivo 'usuarios' - ai não funciona
       
      Descobri que quando entro na pasta usuários fica assim, com a basta no diretório do arquivo. Como corrigir?
      <link rel="stylesheet" href="http://localhost/keiri/admin/usuarios/plugins/fontawesome-free/css/all.min.css&nbsp;">
       
      Meu htaccess
      RewriteRule ^([a-z]+)\/?$ dashboard.php?arquivo=$1 [NC,L]
      RewriteRule ^([a-z]+)\/([a-z]+)$ dashboard.php?pasta=$1&arquivo=$2 [NC,L]
      RewriteRule ^([a-z]+)\/([a-z]+)\/([0-9]+)$ dashboard.php?pasta=$1&arquivo=$2&item=$3 [NC,L]
    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By Matheus Bispo
      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>
    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By joelsonoliveirasouza
      Boa noite pessoal, estou com um problema no momento de buscar os itens dos pedidos, estou utilizando o carregamento de templates Smarty onde no arquivo TPL tenho uma pagina chamada clientes_pedidos.tpl onde contem {foreach from=$PEDIDOS item=P} buscando os dados do pedido e dentro desse foreach preciso ter outro foreach para que possa buscar os itens do pedido para apresentar na pagina clientes_pedidos.tpl, vou anexar algumas imagens. quando insiro foreach dentro do outro ele mostra somente o primeiro dados buscado do banco (ele mostra o mesmo dado em todos os pedidos). Desde já agradeço pela atenção de todos.
       
      Arquivo: clientes_pedidos.tpl
       
      <div class="main-panel" >
          <div class="content">
          {foreach from=$PEDIDOS item=P}
              <div class="container-fluid" style="background: white;">
                  <section class="invoice">
                <!-- title row -->
                <div class="row">
                  <div class="col-xs-12">
                    <h2 class="page-header">
                      <i class="fa fa-globe"></i><i>
                          {if $P.ped_pag_status == 'NAO'} 
                           <td style="width: 15%"><span class="label label-danger">{$P.ped_pag_status}</span></td>
                          {elseif $P.ped_pag_status == 'Pago'}
                            <td style="width: 15%"><span class="label label-success">{$P.ped_pag_status}</span></td>
                          {elseif $P.ped_pag_status == ''}
                            <td style="width: 15%"><span class="label label-danger">Erro no pagamento</span></td>
                          {else}                      
                            <td style="width: 15%"><span class="label label-info">{$P.ped_pag_status}</span></td>
                          {/if}
                      </i>
                      <small class="pull-right">Data: {$P.ped_data}</small>
                    </h2>
                  </div><!-- /.col -->
                </div>
                <!-- info row -->
                <div class="row invoice-info">
                  <div class="col-sm-4 invoice-col">
                    <b>Informações</b><br/>
                    <br/>
                    <b>Codigo Pedido:</b> {$P.ped_id}<br/>
                    <b>Forma Pagamento:</b> {$P.ped_pag_forma}<br/>
                    <b>Nota Fiscal: </b> <a>Baixar</a>
                  </div>
                  <div class="col-sm-4 invoice-col">
                    <b>Dados Entrega</b><br/>
                    <br/>
                      Rua Hebreus, 849, Canaã<br>
                      Ipatinga-Mg, 35.164-170<br>
                  </div><!-- /.col -->
                  <div class="col-sm-4 invoice-col">
                      <b>Dados Contato</b><br/>
                    <br/>
                      Contato: (31) 9 9964-2340<br/>
                      Email: essence@hotmail.com.br<br>
                  </div><!-- /.col -->
                  
                </div><!-- /.row -->
                <br>
                <!-- Table row -->
                <div class="row">
                  <div class="col-xs-12 table-responsive">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>IMAGEM</th>
                          <th>ITEM</th>
                          <th>QUANTIDADE</th>
                          <th>VALOR</th>
                          <th>DETALHES</th>
                        </tr>
                      </thead>
                      <tbody>                
                          {foreach from=$ITENSPEDIDO item=I}
                            <tr>
                                <td>{$I.1.ped_cod}</td>
                                <td>Call of Duty</td>
                                <td>3</td>
                                <td>R$ 64,50</td>
                                <form name="itens" method="post" action="{$PAG_ITENS}">
                                  <input type="hidden" name="cod_pedido" id="cod_pedido" value="{$P.ped_cod}">
                                  <td><button>Detalhes</button></td>
                                </form>
                            </tr>
                          {/foreach}
                      </tbody>
                    </table>
                  </div><!-- /.col -->
                </div><!-- /.row -->
                <div class="row">
                  <!-- accepted payments column -->
                  <div class="col-xs-6">
                      <br>
                    <p class="lead">Informações Adicionais</p>
                    <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
                      Todos os produtos essence são devidamentes embalados, adotando todas as medidas de segurança que seu produto chegue com 100% de sua integridade.
                    </p>
                  </div><!-- /.col -->
                  <div class="col-xs-6">
                      <br>
                    <p class="lead">Data do Pedido 20/06/2020</p>
                    <div class="table-responsive">
                      <table class="table">
                        <tr>
                          <th style="width:50%">Subtotal:</th>
                          <td>R$250,30</td>
                        </tr>
                        <tr>
                          <th>Frete</th>
                          <td>R$10,34</td>
                        </tr>
                        <tr>
                          <th>Desconto</th>
                          <td>R$3,00</td>
                        </tr>
                        <tr>
                          <th>Total:</th>
                          <td>R$363,64</td>
                        </tr>
                      </table>
                    </div>
                  </div><!-- /.col -->
                </div><!-- /.row -->
                <!-- this row will not appear when printing -->
                <div class="row no-print">
                  <div class="col-xs-12">
                    <a href="invoice-print.html" target="_blank" class="btn btn-default"><i class="fa fa-print"></i> TROCA OU DEVOLUÇÃO</a>
                    <button class="btn btn-success pull-right"><i class="fa fa-credit-card"></i> CONFIRMAR RECEBIMENTO</button>
                    <button class="btn btn-primary pull-right" style="margin-right: 5px;"><i class="fa fa-download"></i> AJUDA</button>
                  </div>
                </div>
              </section>
              </div>  
              <div style="width: 100%; height: 20px; background: transparent;"></div>
              {/foreach}
          </div>
      </div>
      </div>
       
      Arquivo: clientes_pedidos.php
       
      <?php 
      $smarty = new Template();
      Login::MenuCliente();
      $pedidos = new Pedidos();
      $pedidos->GetPedidosCliente($_SESSION['CLI']['cli_id']);
      $smarty->assign('PEDIDOS', $pedidos->GetItens());
      $smarty->assign('PAG_ITENS', Rotas::pag_ClienteItens());
      $arrayNumeroPedido = $pedidos->GetItens();
      foreach ($arrayNumeroPedido as $key) {
          $itens = new Itens();
          $pedido = filter_var($key['ped_cod'], FILTER_SANITIZE_STRING);
          $itens->GetItensPedido($pedido);
          $array = array($itens->GetItens());
          $smarty->assign('ITENSPEDIDO', $array);
          
          $smarty->assign('TOTAL', $itens->GetTotal());
      }
      $smarty->display('clientes_pedidos.tpl');
       ?>


×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.