Bootstrap é um framework open-source para a criação de sites e aplicações responsivas, ideal para sites móveis. Ele pode ajudar os desenvolvedores, mesmo iniciantes, a criarem seus projetos de maneira muito fácil. Mas muitas novos usuários Bootstrap têm problemas com menus fixos – cabeçalhos de navegação – tornar os menus em telas menores e para centralizar o nome ou logotipo de um site.
Bootstrap é um dos HTML, CSS e frameworks mais populares JavaScript para o desenvolvimento de páginas web responsivas. Milhares de sites usam Bootstrap. Ele também pode ser usado em combinação com a maioria das plataformas de comércio eletrônico, de modo que temas Shopify ou temas WooCommerce, como exemplos, podem ser construídos com Bootstrap.
Por padrão, navbars em Bootstrap coloca o logotipo ou marca o nome de um site na esquerda; rola para cima com a página e não entra em colapso. Neste artigo, vou descrever como superar essas limitações, de modo que o logotipo é centrado, a barra de navegação pode conseguir uma posição fixa, e o menu pode recolher para telas menores.
Carregando Dependências
Este projeto requer o arquivo CSS Bootstrap, o arquivo Bootstrap JavaScript e jQuery (acima da versão 1.1.9 e abaixo da versão 3).
Há muitas maneiras de incluir Bootstrap em seu projeto, mas um dos mais simples é chamar os arquivos necessários a partir de uma rede de distribuição de conteúdo. Se você escolher esta abordagem, coloque o arquivo CSS Bootstrap na seção head do seu arquivo HTML.
<Head> ...
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel = "stylesheet" integridade = "sha384-1q8mTJOASx8j1Au + a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin = "anonymous" >
</ Head>
O arquivo Bootstrap JavaScript e jQuery pode ser referenciada na parte inferior do seu documento HTML, pouco antes da tag do corpo de fechamento. Desde Bootstrap depende jQuery, você precisará incluir jQuery em primeiro lugar.
<script src = "https://code.jquery.com/jquery-2.2.2.min.js" integridade = "sha256-36cp2Co + / + 62rEAAYHLmRCPIych47CvdM uTBJwSzWjI =" crossorigin = "anonymous" > </ Script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" = "integridade" sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS crossorigin = "anonymous" > </ Script> </ Body>
Responsive Bootstrap Navbar
A primeira característica vai se concentrar em colapso ou, se quiser, expandindo a barra de navegação Bootstrap. A ideia é simples: Quando a página é exibida em uma tela móvel, queremos itens de navegação individuais a serem consolidadas sob um único botão, que é às vezes chamado de um menu de hambúrguer.
Tocando ou clicando no menu do Hamburger exibe os itens de navegação.
Quando a mesma página é exibida em uma tela maior (mais de 768 pixels de largura) da barra de navegação se expandirá para mostrar os itens individuais separadamente.
Este recurso é mostrado muito claramente na documentação Bootstrap , mas na hora de escrever não foi chamado ou especificamente identificada como uma barra de navegação em colapso. Pelo contrário, é simplesmente incluídos como parte de uma descrição de muitas capacidades navbar diferentes.
Esta barra de navegação em colapso tem duas partes envolvidas em um elemento nav e um recipiente Bootstrap. Em Bootstrap, cada um desses invólucros tem significado em propriedades de estilo.
<Class nav = "navbar navbar-inversa fixo-navbar-top">
<Div class = "container">
...
</ Div> <! - Recipiente final ->
</ Nav>
Estamos aplicando três classes Bootstrap CSS para o nav elemento:navbar , navbar-inversos , e navbar-fixo-top .
O primeiro destes diz Bootstrap que esta é uma barra de navegação e aplica-se uma série de cores para fazer o elemento parecido com um elemento de navegação. A segunda classe, navbar-inversa, diz Bootstrap que queremos uma barra de navegação de cor escura com texto de cor clara. A terceira classe, Navbar-top fixo , fará com que a estadia barra de navegação no topo da tela, mesmo quando a página rola para baixo (mais sobre isso depois).
A primeira parte da barra de navegação dobrável define o menu do Hamburger (as três linhas horizontais) e inclui a marca do site, que neste caso é de texto simples.
<Div class = "navbar-header"> <button type = "button" class = "navbar-toggle colapso" Dados-toggle = "colapso" data-target = "# expandir-nav" aria-expandida = "false" > <Span class = "sr-only"> navegação de alternância </ span> <Span class = "icon-bar"> </ span> <Span class = "icon-bar"> </ span> <Span class = "icon-bar"> </ span> </ Button> <a class="navbar-brand" href="#"> Melhor </a> loja </ Div>
Grande parte deste código pode ser copiado como é e usado em praticamente qualquer projeto. A chave para notar é a do botão deestabelecimento de metas de dados . Esta propriedade informa o Bootstrap JavaScript o id da div que contém os itens navbar que queremos entrar em colapso.
Aqui está a segunda parte da barra de navegação desmontável.
<Div class = "colapso navbar-colapso" id = "expandir-nav"> <Ul class = "nav navbar-nav navbar-left"> <Li> <a href="#"> Homens </a> </ li> <Li> <a href="#"> Mulheres </a> </ li> <Li> <a href="#"> bagagem </a> </ li> </ Ul> <Ul class = "nav navbar-nav navbar-right"> <Li> <a href="#"> Relógios </a> </ li> <Li> <a href="#"> Armas </a> </ li> <Li> <a href="#"> Home & amp; Acampamento </a> </ li> </ Ul> </ Div>
Esta seção descreve os itens da lista reais. Observe que a propriedade id do div corresponde propriedade-alvo os dados do botão discutido acima. Para além das classes de bootstrap CSS colocados no div e ul elementos, isto é um simples par de listas.
Observe que cada uma das listas não ordenadas (UL) tem uma barra de navegação esquerdo e navbar direito classe. Essas classes irá trazer-nos para a segunda coisa que queria realizar neste artigo: centrar o texto marca ou logotipo.
Centralizar a marca em um Bootstrap Navbar
No exemplo da barra de navegação expandido mostrado acima, a marca, a melhor loja, é mostrada no meio com ligações de ambos os lados. Mas se você executou o código mostrado na última seção do artigo, a marca seria realmente à esquerda.
Para centralizar a marca em uma barra de navegação Bootstrap, eu vou usar uma consulta de mídia e apenas um pouco de CSS. Este CSS pode ser incluído no documento HTML dentro de um elemento de estilo ou incluídos em uma folha de estilo externa ligada. Neste exemplo, ele é mostrado como uma folha de estilo interna envolto em marcas de estilo.
<Style>
@media (min-width: 768px) {
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
}
</ Style>
Bootstrap utiliza consultas de mídia para aplicar estilos específicos quando a página é exibida em telas de reunião alguma exigência.Neste caso, o CSS acima só é aplicada sobre telas que são, pelo menos, 768 pixels de largura ( min-largura ).
Assim, quando a navegação está em colapso, a marca será exibida na esquerda com o menu do Hamburger sobre o direito, mas quando a navegação é expandido a marca está centrada.
Colocar uma mensagem acima de um Bootstrap Navbar fixo
A terceira característica que vamos construir em nossa barra de navegação Bootstrap já foi mostrado nos exemplos acima. Você deve ter notado que, acima da barra de navegação Bootstrap há uma pequena seção com uma oferta de frete grátis – “frete grátis para pedidos acima $ 200.”
Este cabeçalho pré-navegação é um padrão de design popular no momento, mas normalmente não funcionará com um de posição fixa, navbar Bootstrap, uma vez que a barra de navegação quer, se você vai, para estar no topo da página.
Para alcançá-lo, primeiro você precisa adicionar o cabeçalho acima de sua barra de navegação Bootstrap.
<Div class = "nav-top">
<Div class = "container">
<Div class = "linha">
<Div class = "col-xs-12">
<a href="#"> frete grátis nos pedidos acima de $ 200 </a>
</ Div>
</ Div>
</ Div>
</ Div>
Os contentores , linha e col-XS-12 aulas fazem parte do sistema de rede de Bootstrap. Estes dão o cabeçalho características de estilo particulares.
O nav-top classe é uma classe personalizada que eu usei para fazer referência a este cabeçalho. Aqui estão os estilos usados para posicionar e decorar o cabeçalho.
.nav-top {
width: 100%;
height: 40px;
background: # 000;
cor branca;
text-transform: maiúsculas;
text-align: center;
position: fixed;
overflow: hidden;
}
.nav-top a {color: white; }
.nav-top a: hover {text-decoration: underline; }
.nav-top div.row {padding: 10px 0; }
Note-se que o cabeçalho é dada uma posição fixa, que o mantém no topo da página. Ele é definido para preencher toda a tela na horizontal, e ocupará 40 pixels de espaço vertical.
Em seguida, adicionei uma classe, cabeça-room , e um id, -nav geral, a barra de navegação Bootstrap.
<Nav class = "navbar quarto cabeça navbar-inversa fixo-navbar-top" id = "general-nav">
A classe me permitiu adicionar uma margem acima da barra de navegação para abrir espaço para o cabeçalho.
.head quarto {margin-top: 40px; }
Se parássemos agora, você teria um cabeçalho fixo logo acima da sua barra de navegação Bootstrap fixo.
Para isso, eu gostaria de adicionar um pouco de animação. Quando o usuário rola para baixo, eu quero que a barra de navegação para mover-se lentamente para cima e cobrir o cabeçalho, dando ao usuário mais espaço para se concentrar no conteúdo. Este é um outro padrão de design popular no momento.
O efeito tem duas partes, começando com uma transição CSS.
.navbar-fixo-top {transição: todos os 3s facilidade; }
Esta declaração de estilo diz que se os estilos associado a um elemento que tem o fixo-navbar-top mudança de classe, tome três segundos a transição para os novos estilos.
A segunda parte do efeito é um pouco de JavaScript jQuery potência.Este script deve ser incluído no documento HTML depois jQuery, uma vez que se baseia em seletores e métodos do jQuery.
<Script>
$ (Janela) .scroll (function () {
if ($ (this) .scrollTop ()> 10) {
$ ( 'Navbar-top fixo.') RemoveClass ( "head-room. ');
} outro {
$ ( '. Navbar-top fixo') addClass ( "head-room. ');
}
});
</ Script>
Este código relógios, se quiser, a tela. Quando o usuário rola, ele chama uma função.
$ (Janela) .scroll (function () {...}
Se o usuário tiver rolado para baixo a página de pelo menos 10 pixels, o script remove o quarto cabeça classe a partir da barra de navegação Bootstrap. Você vai se lembrar que o quarto cabeçaclasse adicionada 40 pixels de margem superior. Sem o quarto cabeça classe barra de navegação Bootstrap será posicionado na parte superior da página.
if ($ (this) .scrollTop ()> 10) {
$ ( 'Navbar-top fixo.') RemoveClass ( "head-room. ');
}
Se a tela é menos de 10 pixels a partir do topo, o script adiciona a classe quarto cabeça.
outro {
$ ( '. Navbar-top fixo') addClass ( "head-room. ');
}
Existe um problema potencial. A barra de navegação Bootstrap fixo pode cobrir um pouco do seu conteúdo da página. Então lembre-se de adicionar um pouco de margem superior extra para o resto do conteúdo.
Aplicar o seu deslizamento, fixo Bootstrap Navbar
agora você deve saber como criar um colapso, de posição fixa navbar Bootstrap com um pouco de espaço extra para um cabeçalho em cima.
Esta barra de navegação pode ser integrado em praticamente qualquer plataforma ou tema. Então, se você está criando um tema para Shopify, LemonStand, Bigcommerce, ou apenas sobre qualquer outro sistema de comércio eletrônico, você deve ser capaz de usar Bootstrap.
Dicas de Criacão de Sites 