Gostaria de colocar um Logo (Brand) na sidebar ao invés da navbar para telas maiores e, quando reduzir a proporção da tela (dispositivos móveis e tablets e smarts), o logo deve ir para a navbar usando Media Queries do Bootstrap 3.
-
3Yuri, bem-vindo ao Stack Overflow em Português! Sua pergunta foi suspensa porque alguns usuários consideraram sua pergunta um pouco vaga. Irei reabri-la por enquanto, porém seria interessante você postar o seu código atual e detalhar mais o seu objetivo para que os usuários possam responder de forma mais efetiva, senão as respostas podem ser diferente do que você espera.– utluiz5/01/2015 às 12:53
-
O BootStrap é responsivo. Mas se você quer uma tela mais otimizada para dispositivos diferentes, deve identificar o dispositivo e mudar o CSS ou o proprio html. veja o artigo do link abaixo. http://www.caelum.com.br/apostila-html-css-javascript/web-para-dispositivos-moveis/#7-1-site-mobile-ou-mesmo-site– Marcelo5/01/2015 às 13:12
1 Resposta
O Bootstrap trás uma série de utilitários responsivos para ajudar a lidar com cenários desse género.
Estes utilitários são classes de CSS que visam manipular a apresentação dos elementos com base na tela do dispositivo onde o website se encontra a ser visualizado:
Responsive utilities
┌───────────────┬─────────────────────────────────────────────────────────────────────┐
│ │ Dispositivos (pixeis) │
│ ├───────────────┬────────────────┬─────────────────┬──────────────────┤
│ CSS Class │ Extra small │ Small │ Medium │ Large │
│ │ Phones (<768) │ Tablets (≥768) │ Desktops (≥992) │ Desktops (≥1200) │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-xs-* │ Visivel | Escondido | Escondido | Escondido |
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-sm-* │ Escondido │ Visivel │ Escondido │ Escondido │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-md-* │ Escondido │ Escondido │ Visivel │ Escondido │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-lg-* │ Escondido │ Escondido │ Escondido │ Visivel │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-xs │ Escondido │ Visivel │ Visivel │ Visivel │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-sm │ Visivel │ Escondido │ Visivel │ Visivel │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-md │ Visivel │ Visivel │ Escondido │ Visivel │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-lg │ Visivel │ Visivel │ Visivel │ Escondido │
└───────────────┴───────────────┴────────────────┴─────────────────┴──────────────────┘
Solução
Para o teu caso, a solução passa por ter a Brand nos dois locais desejados, aplicando na mesma as classes de CSS em cima apresentadas para que ou apareça na NavBar ou apareça na SideBar consoante o pretendido:
Ver exemplo no JSFiddle onde podes arrastar a largura da janela de preview para visualizares a Brand a aparecer ou esconder mediante a largura da tela:
NavBar
Esconder em ecrãs Desktops (≥1200) pixeis largura:
<a class="navbar-brand hidden-lg" href="#">Project name</a>
SideBar
Esconder em ecrãs Phones (<768), Tablets (≥768) e Desktops (≥992) pixeis largura:
<a class="hidden-sm hidden-xs hidden-md" href="#">Project name</a>
HTML para demonstração
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-lg" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod hendrerit mauris, eget dictum turpis pulvinar semper. Etiam finibus tortor nec mi sodales malesuada. Vestibulum sed dolor id lorem viverra dignissim. Nullam hendrerit nunc vel quam dignissim interdum ut vel nulla. Maecenas nec venenatis nibh, et vehicula odio. Nullam gravida nulla a suscipit aliquam. Vivamus porta est dolor, id tristique massa ultrices ac. Morbi aliquam risus in risus sollicitudin dapibus. Vivamus malesuada interdum neque, aliquet elementum quam porta non. Aenean ac mauris tempus, vestibulum neque id, imperdiet erat. Aliquam et nunc nec nibh convallis tempus vitae at ex. Aenean quis odio nec augue dapibus vulputate non vel lacus.
</div>
<div class="col-sm-4">
<a class="hidden-sm hidden-xs hidden-md" href="#">Project name</a>
</div>
</div>
</div>
-
Olá Muito Obrigado Zuul, A solução funcionou.. eu coloquei a logo na sidebar e na navbar e usei os comandos de "Hidden" enquanto a tela estiver grande para a nav e "Visible" quando a tela dimunuir, e fiz o contrário na sidebar (Visible enquanto a tela for de desktops, e Hidden para Tablets e Smartphones) agora funciona perfeitamente , confiram no link abaixo , (é só dar um ctrl+ e ctrl- no navegador para ver o resultado) yurifoxx.com.br/prefeituradesantaluzia 16/02/2015 às 2:27