Ir para conteúdo
Joao_Lucaas

Como usar o Bootstrap de forma customizada e consistente?

Recommended Posts

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:

 

  1. É comum "sobrar" CSS, importando um partial Bootstrap?
    1. Se sim:
      1. Então, devo usar alguma ferramenta como o UnCSS?
    2. Se não:
      1. O que posso estar fazendo errado?
  2. Conhecem algum conteúdo voltado a ensinar de forma ampla, como usar Bootstrap e seus partials?

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi João, tudo bem?

 

Respondendo a sua pergunta, é normal sobrar CSS  em partial.

 

A verdade é que o partial de qualquer framework é uma tentativa de minimizar o velho problema (e muito negativo ao meu ver) dos códigos desnecessários.

 

Minha opinião sobre o uso do Bootstrap:

 

Eu não uso porque prezo muito por um código organizado e otimizado. Além disso, eu consigo reproduzir qualquer estilo/funcionalidade que ele poderia me oferecer. Gosto de fazer as coisas do meu jeito e sofro menos para dar manutenção.

 

Não acho que ele seja ruim, pelo contrário, é um ótimo framework e equipes com prazos de desenvolvimento muito reduzidos ou até mesmo sem um desenvolvedor front-end à disposição vão tirar muito proveito dele.

 

Aconselho conhecer seu potencial e saber dar manutenção à sites que o utilizam, afinal, não sabemos quando trabalharemos numa equipe que use esse framework ou quando uma vaga pedirá necessariamente experiência com ele.

 

Abraços, Doug.

 

 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiquei pensando o que tu usa para melhorar a produtividade. Nesse sentido, apesar de não usar o BS, imagino que algum framework você tem que usar, pra evitar repetição no desenvolvimento, certo?! =)

 

Assim, tu usa quais frameworks em teu workflow?

Compartilhar este post


Link para o post
Compartilhar em outros sites

João, utilizar framework ajuda e muito no desenvolvimento, mas se não souber como ele funciona pode dar mais dor de cabeça do que ajudar, se desejar desenvolvemos vídeos que mostram a base para o desenvolvimento para Design Web Responsivo que é justamente o que o Bootstrap faz, claro que ele tem mais recursos, mas se souber a base de como ele funciona pode ajudar e muito a tirar o máximo de proveito dele ou de qualquer outro framework baseado em Responsividade

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 24/03/2018 at 10:44, Joao_Lucaas disse:

Assim, tu usa quais frameworks em teu workflow?

 

O que eu venho fazendo há alguns anos, é criar um repositório próprio de elementos estilizados. Por exemplo, quando vou começar um novo projeto, já importo esse "pseudo framework" e vou utilizando os estilos. Eu até criei uma documentação para facilitar outros colegas do setor.

 

Como é uma solução para a empresa onde trabalho, nem posso colocar no github :/ 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá pessoal!

 

Utilizo o Boostrap desde o seu lançamento e posso dizer que facilita sim mas ao mesmo tempo te força a utilizar recursos desnecessários na maioria dos casos. Hoje em dia devemos considerar cada kb que podemos economizar, assim como nosso amigo dougtop mencionou, já a algum tempo venho tentando o https://purecss.io para personalizar somente o essencial em cada projeto. Vale a pena conhecerem..

 

Forte abraço,

Willian

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por amenum
      Pessoal, tudo bem? Fiquei parado da programação um bom tempo, e agora que retornei, queria dar manutenção nas minhas aplicações web que estão em vb.net webforms. Comprei um template de bootstrap (https://seantheme.com/color-admin-v4.2/admin/html/index_v2.html) e queria controlar os elementos via code behind in vb.net, mas estou sofrendo aqui por conta do meu limitado conhecimento.
       
      Alguém poderia me dar uma luz em base neste link:
      https://seantheme.com/color-admin-v4.2/admin/html/ui_modal_notification.html
       
      Ao clicar na maioria dos botões dessa página, abre um modal ou alert. Pois bem, eu gostaria de simular essa abertura a partir de uma lógica no code behind, por exemplo, em um formulário, caso alguma regra não esteja sendo cumprida. Simples assim.
       
      No código original, temos:
      Chamada:
      <a href="#modal-dialog" class="btn btn-sm btn-success" data-toggle="modal">Demo</a>
       
      Div do modal
      <div class="modal fade" id="modal-dialog" runat="server">
                                      <div class="modal-dialog">
                                          <div class="modal-content">
                                              <div class="modal-header">
                                                  <h4 class="modal-title">Modal Dialog</h4>
                                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                              </div>
                                              <div class="modal-body">
                                                  <p>
                                                      Modal body content here...
                                                  </p>
                                              </div>
                                              <div class="modal-footer">
                                                  <a href="javascript:;" class="btn btn-white" data-dismiss="modal">Close</a>
                                                  <a href="javascript:;" class="btn btn-success">Action</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
       
      o que eu preciso?
      No code behind
       
       Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            try
                if verificaCampos() = false then ABRE O MODAL DIV COM A MENSAGEM DE ERRO          
           Catch ex As Exception
                     Throw ex
            end try
          End Sub
       
      Alguém pode me ajudar?
       
      muito obrigado.
       
    • Por ghlevin
      Estou fazendo modificações no site de um cliente, tornando-o responsivo. Tive que fazer várias mudanças de layout que me foram enviadas por um fornecedor e, por causa dessas mudanças, algumas funções Javascript e PHP que eu tinha não funcionam no layout novo.
      Em uma delas, eu tenho dois filtros de data e local (unidade ou empresa). O de data é uma INPUT e o de unidades é um SELECT. Vou colocar o código da view abaixo:
      <form class="rd-mailform text-left" data-form-output="form-output-global" data-form-type="contact" method="post" novalidate="novalidate"> <p class="mobile-hide">Selecione abaixo os par&acirc;metros para visualiza&ccedil;&atilde;o.&nbsp;Se desejar salvar,&nbsp;enviar por e-mail ou imprimir,&nbsp;clique em&nbsp;'Gerar PDF'&nbsp;ou&nbsp;'Gerar Excel'.</p> <!--<div class="range range-xs-center" style="margin: 0px !important;">--> <div class="cell-sm-6"> <div class="form-group form-group-label-outside"> <label class="form-label form-label-outside text-dark rd-input-label" for="data-relatorio">Data</label> <input class="form-control form-control-last-child" id="data-relatorio" type="text" name="first-name" > </div> </div> <div class="cell-sm-6 offset-top-20 offset-sm-top-0"> <div class="form-group form-group-label-outside"> <label class="form-label form-label-outside text-dark rd-input-label" for="comboUnidades"> Unidade </label> <select id="comboUnidades" class="form-control select2-multiple" data-minimum-results-for-search="Infinity"> </select> </div> </div> <div style="width: 100%"> <div style="position: relative; float: left; padding: 5px" onclick="montaPDF()"><a class="btn btn-ellipse btn-java" href="#">GERAR PDF</a></div> <div style="position: relative; float: left; padding: 5px" onclick="montaExcel()" class="mobile-hide"><a class="btn btn-ellipse btn-java" href="#">GERAR EXCEL</a></div> </div> </form> Abaixo parte do código do arquivo JS que mostra como eram carregados esses filtros. O de data usa originalmente uma função datepicker, que não funciona no layout atual. E o das unidades usa uma função AJAX pra colocar todas as opções que vem do banco MySQL do site dentro do select comboUnidades:
      $(document).ready(function(){ showLoading(); var d = new Date(); d.setDate(d.getDate() - 1); $('#data-relatorio').datepicker({ dateFormat: "dd/mm/yy", maxDate: d }); $("#data-relatorio").datepicker('setDate',d); var param = location.href.split("?")[1]; if(typeof param != "undefined" ) { var unidade = param.split('=')[1]; } $.ajax({ async: false, url: '[:raiz]acompanhamentoDiario/getUnidades', dataType: 'json', success: function(data) { if (data.length > 0){ var retorno = ""; for(var i = 0;i < data.length; i++){ retorno += "<option value='"+data[i]['id']+"'>"+data[i]['newnome']+"</option>"; } $('#comboUnidades').html(retorno); if(typeof param != "undefined" ) { $('#comboUnidades option[value='+unidade+']').attr('selected', 'selected'); $('#comboUnidades').trigger('change'); } } else { } } }); $('#data-relatorio').change(function(){ montaTabela(); }); $('#comboUnidades').change(function(){ montaTabela(); }); var d = new Date(); $('#divTabela').hide(); montaTabela(); hideLoading(); }); Essa função chamada no AJAX se encontra num arquivo de Controller:
      public function getUnidades() { $acompanhamento = new AcompanhamentoDiario(); $retorno = $acompanhamento->getUnidadesUsuario(); echo json_encode($retorno); } Por sua vez, essa função do controller chama uma função em PHP que se encontra num arquivo da minha pasta Model do site. Ele traz as unidades do select dependendo do login do usuário:
      public function getUnidadesUsuario() { $idUser = Login::retornaIdUser(); $perfilAcesso = Login::retornaPerfilAcesso(); if(($perfilAcesso == 1) || ($perfilAcesso == 6)) { // Colocado o perfil 6 do Usuário de Demonstração /* se perfil de usuairo = 1*/ $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome"; $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id"; $sql .= " join usuario_unidade uu on (uu.id_unidade = u.id)"; $sql .= " WHERE u.ind_unidade_ativa = 1 AND u.ind_predio_novo = 0"; $sql .= " and uu.id_usuario = $idUser and lower(uu.ind_tipo_investidor) != 'c' ORDER BY newnome ASC"; } elseif($perfilAcesso == 2) { /* se perfil de usuairo = 2*/ $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome"; $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id"; $sql .= " join administrador adm on (adm.id_unidade = u.id)"; $sql .= " WHERE u.ind_predio_novo = 0"; $sql .= " and adm.id_usuario = $idUser and adm.id_usuario NOT IN (3124,4378)"; $sql .= " ORDER BY newnome ASC"; } else { /* se perfil de usuario = 3*/ $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome"; $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id"; $sql .= " WHERE u.ind_predio_novo = 0 ORDER BY newnome ASC"; } $res = parent::executaQuery($sql); return $res; } A função montaTabela(), por ora, ainda não quero modificar, por isso não vou mostrar como ela é. Ela é executada na página dependendo da mudança dos filtros. Por ora, eu só queria saber como "popular" o select comboUnidades e como funcionar o filtro de data data-relatorio de forma semelhante ao datePicker.
    • Por marcelocardoso
      Olá Colegas....

      Tenho o código abaixo que funciona perfeitamente, fiz algumas modificações no CSS e também no JQUERY, segue abaixo...
      O PROBLEMA é que ao dar um refresh na página, F5 no brownser, ele como DEFAULT se perde o background, ficando TRANSPARENT.

      1) Que é o modo que ele deve começar;
      2) Mas como ele muda após se o window for maior >=20, no jquery;
      3) Ao dar refresh, dependendo do lugar da página, ele deveria ficar o mesmo, mas fica sempre transparente;

      CODIGO HTML
      <nav class="navbar navbar-light navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false"> <span class="fa fa-bars"></span> </button> <a href="http://" class="navbar-brand brand-centered"> <img src="img/logo.png" class="img-responsive"> </a> </div> <div class="collapse navbar-collapse" id="navbar_menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#mn_empresa">EMPRESA</a></li> <li><a href="#mn_clientes">CLIENTES</a></li> <li><a href="#mn_formulario">CONTATO</a></li> </ul> </div> </div> </nav>
      CODIGO CSS
      /* NAVBAR */ .navbar { padding-top: 5px; padding-bottom: 12px; background-color: transparent; margin: 0px; color: #333; transition: all 0.3s; z-index: 9999; -webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); } /* NAVBAR - efeito simples dos itens do menu */ .navbar-nav a, .navbar-nav a.active { color: #00224b !important; background-color: transparent; font-size: 15px; font-weight: 600; width: 100%; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: white; font-weight: 600; width: 100%; } /* NAVBAR - toggle button */ .navbar-light .navbar-toggle { border: none; border-radius: 40px; width: 40px; height: 40px; font-size: 20px; z-index: 12; background-color: dodgerblue; color: white; cursor: pointer; -moz-transition: all .8s; -o-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; } .navbar-light .navbar-toggle:hover { background-color: #f6761c; border-radius: 40px 0px 40px 40px; color: white; } /* NAVBAR - mudanças jquery */ .navbar-brand.nav_corlogo { height: auto; filter: brightness(0) invert(1) !important; } .navbar-nav.nav_cormenu a, .navbar-nav.nav_cormenu a.active { color: white !important; } .navbar-nav.nav_cormenu li a:hover, .navbar-nav.nav_cormenu li.active a { color: #ff9326 !important; background-color: transparent; } .navbar.nav_sombra { -webkit-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); -moz-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); border-bottom: 2px solid rgba(118, 0, 191, 0.56); } .navbar.nav_comprime { padding-top: 10px; padding-bottom: 10px; background: #002a5c; color: white; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .navbar.nav_slide { background-color: transparent !important; } /* NAVBAR - config do logotipo imagem e logo texto */ .navbar-brand { padding: 4px; position: absolute; font-size: 1.25rem; white-space: nowrap; } .navbar-brand>img { padding: 0px; width: 16%; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none; color: white }
      CODIGO JQUERY
       
      $(function () { $(window).on('scroll', function () { if ($(this).scrollTop() >= 20) { $('.navbar').addClass('nav_comprime'); $('.navbar').addClass('nav_sombra'); $('.navbar-nav').addClass('nav_cormenu'); $('.navbar-brand').addClass('nav_corlogo'); } else { $('.navbar').removeClass('nav_comprime'); $('.navbar').removeClass('nav_sombra'); $('.navbar-nav').removeClass('nav_cormenu'); $('.navbar-brand').removeClass('nav_corlogo'); } }); $('.navbar a').on('click', function () { if (window.innerWidth <= 768) { $('.navbar-toggle').trigger("click"); } }); //função que troca em resoluções menores o logotipo $(window).resize(function () { if ($(window).width() < 481) { $('#logotipo').attr('src', '../site/img/simbolo.png'); } else { $('#logotipo').attr('src', '../site/img/logo_-_original.png'); } }); $(".navbar a, footer a[href='#wrapper']").on("click", function (event) { event.preventDefault(); var hash = this.hash; $("html, body").animate({ scrollTop: $(hash).offset().top }, 800, function () { window.location.hash = hash; }); }); }); Se conseguirem me dar uma luz, agradeço.
      Posso estar errando no CSS ou JQUERY.
      Obrigado.


       
    • Por wellingtonmelo
      Olá turma, beleza?
       
      Tenho bom conhecimento em HTML, CSS, mas não sei fazer coisas dinâmicas com javascript, jquary etc.
       
      Eu estou montando um projeto, estou responsável pelo design e um amigo pela programação.
       
      A página do produto vende em grosso, ao invés de adicionar 1 produto ao carrinho, adiciona 12.
       
      Desses 12, precisa definir os tamanhos das sandálias, são 3 tamanhos disponíveis.
      35/36
      37/38
      39/40
      Dai o usuário precisa dizer quantos pares de cada tamanho ele deseja, precisa fechar em 12.
      Montei o HTML com bootstrap, ficou assim:
       
      O usuário insere a quantidade e o campo QNT DISPONIVEL subtrai o valor do 12, exemplo:
      QNT DISPONIVEL: 9
      35/36 = 3
      37/38 =
      39/40 =
       
      QNT DISPONIVEL: 4
      35/36 = 3
      37/38 = 5
      39/40 =
       
      QNT DISPONIVEL: 0
      35/36 = 3
      37/38 = 5
      39/40 = 4
       
      E se não for pedir demais, alguma limitação para o usuário não poder inserir um valor maior que o permitido. Algum ninja do javascript ou outra linguagem consegue me dar uma dica sobre isso? Realmente não sei javascript.
       

       
      Segue o código que estou utilizando:
      <div class="form-contato"> <form action="" method="post" name="formcontato" onSubmit="return validar();" class="form-horizontal"> <script language="JavaScript" src="javascripts/cadastro.js" type="text/javascript"></script> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">QNT. DISPONÍVEL</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_nome2" value="12" name="cad_nome" size="2" disabled> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 35/36</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 37/38</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 39/40</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> </form> <br><br> <div class="btn-group"> <div class="adicionar-ao-carrinho"> {botao} </div> </div> </div>  
      Gratidão!!!
    • Por gilbertjuniors
      Estou desenvolvendo um site Onepage com bootstrap.
      Implementei este Collapse Menu
              <nav class="navbar navbar-expand-sm bg-nav navbar-dark fixed-top">       <a class="navbar-brand" href="#">         <img class="logo" src="images/logo.jpg" alt="logo">       </a>       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">         <span class="navbar-toggler-icon"></span>       </button>       <div class="collapse navbar-collapse" id="collapsibleNavbar">         <ul class="navbar-nav">           <li class="nav-item">             <a class="nav-link" href="#">Home</a>           </li>           <li class="nav-item">             <a class="nav-link" href="#section2">Quem Somos</a>           </li>           <li class="nav-item">             <a class="nav-link" href="#section3">Nossos Serviços</a>           </li>           <li class="nav-item">             <a class="nav-link" href="#section4">Nossos Clientes</a>           </li>           <li class="nav-item">             <a class="nav-link" href="#section5">Contatos</a>           </li>         </ul>       </div>     </nav>  
      O CSS e Javascript são estes:
      <head> <title>Meu Site.</title> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <style> body {height: 100%;width: 100%;} html {height: 100%;width: 100%;} form{height: 100%;padding-bottom: 250px;} .bg-nav{background-color:#077877!important} @media (max-width:667px) { img.logo{width: auto; height: 40px;} .desfault-section{padding-top: 65px;padding-bottom: 20px;} } @media (min-width:668px) { img.logo{width: auto; height: 60px;} .desfault-section{padding-top: 90px;padding-bottom: 20px;} } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head>  
      Quando é exibido em tela de celular, o menu abre ao clicar nas 3 barras, porém, 
      ao escolher um item do menu, o mesmo deveria recolher automaticamente sem ter que clicar nas 3 barras e, isto não está acontecendo.
       
      Alguém me dá uma luz de como resolver?
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.