Na estrutura do bootstrap, a navegação é independente como um componente de navegação. De acordo com versões diferentes, o código -fonte correspondente pode ser encontrado:
Menos: Navs.less
Sass: _navs.scss
Navegação em forma de tag, também conhecida como navegação de guia
A navegação em forma de tag é implementada através do estilo .nav-tabs. Ao fazer navegação em forma de tag, você precisa anexar o nome da classe .nav-tabs ao contêiner com o nome da classe de navegação original .nav
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation Título 5 </a> </li> </ul>
princípio:
Exibir itens de menu Li em blocos e organize-os no mesmo nível, depois defina o efeito do estilo e da suspensão do mouse dos menus não-highlight
.nav-tabs {borda-fundo: 1px sólido #ddd;}. Nav-tabs> li {float: esquerda; margin-bottom: -1px;}. Nav-tabs> li> a {margin-right: 2px; line-hight: 1.42857143; borda: 1px Solid Solid: > A: Hover {Border-Color: #eee #eee #ddd;}Geralmente, a guia tem um item atualmente selecionado, você só precisa adicionar o nome da classe.Active à sua tag (LI).
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation Título 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: mouse, .nav-tabs> li.active> a: focus {color: #555; Cursor: padrão; Background-Color: #FFF; Fronteira: 1px sólido #DDD; cor-cor de fronteira: transparente;}Além das opções atuais, algumas guias também têm um estado deficiente. Para alcançar esse efeito, basta adicionar o nome da classe desativado no item de tag.
.nav> li.disabled> a {color: #999;}. Nav> li.disabled> a: pairar, .nav> li.disabled> a: focus {color: #999; Decoração de texto: Nenhum; Cursor: não superado; Background-Color: transparente;}Se você deseja alcançar o efeito de clicar no item de menu para alternar o conteúdo, você precisa cooperar com o plug-in js
Navegação da cápsula (pílulas)
Atualmente destacado com efeito de canto arredondado, seu método de implementação é semelhante à navegação de guias e, com a mesma estrutura, você só precisa substituir o nome da classe .nav-tabs pelo nome da classe .nav-pills
.nav-pills> li {float: esquerda;}. Nav-pills> li> a {radio de fronteira: 4px;}. Nav-pills> li + li {margin-left: 2px;}. nav-pills> li.active> a: hover, .nav-pills> li.active> a: focal {color: #fff: #fff: Background-Color: #428BCA;}Navegação empilhada vertical
Além da navegação horizontal, também há navegação vertical. Para criar navegação empilhada vertical, você só precisa adicionar o nome da classe .Nav empilhado com base em .nav-pills.
Comparado com a navegação da cápsula, o principal é impedir que os itens de navegação flutuem, organizem -os verticalmente e deixar um certo espaçamento para itens de navegação adjacentes.
.nav empilhado> li {float: Nenhum;}. NAV empilhado> li + li {margin-top: 2px; margin-left: 0;} <ul> <li> <a href = "#"> título de navegação 0 </a> </li> <li> <a href = "#"> título de navegação 1 </a> </li> <li> <a href = "#"> título de navegação 2 </a> </li> <li> href = "#"> título de navegação 4 </a> </li> <li> <a href = "#"> título de navegação 5 </a> </li> </ul>A navegação de empilhamento vertical é como uma linha dividida entre o grupo de menu suspenso e o grupo, e também há uma linha de divisão entre os itens de navegação. Basta adicionar <li class = "divider"> </li> entre os itens de navegação.
<ul> <li> <a href = "#"> título de navegação 0 </a> </li> <li> <a href = "#"> título de navegação 1 </a> </li> <li> <a href = "#"> título 2 </a> </li> <li> </li) <li> <a- href = " href = "#"> título de navegação 4 </a> </li> <li> <a href = "#"> título de navegação 5 </a> </li> </ul>
.nav .nav-divider {altura: 1px; margem: 9px 0; estouro: hidden; cor de fundo: #e5e5e5;}Navegação adaptativa
A navegação adaptativa refere -se à navegação que ocupa toda a largura do contêiner, e os itens do menu podem se adaptar à largura das células da tabela. A navegação adaptativa é a mesma que o componente de botão adaptável fabricado pelo .Btn-Group-justificado mencionado anteriormente, mas ao fazer navegação adaptativa, o nome da classe .nav-justificado deve ser usado com .nav-tabs ou .nav-pills.
princípio:
Defina a largura como 100% na lista UL e defina exibição: Cell para cada item de menu Li, para que a lista simula a forma de uma célula de tabela;
.nav-justificado {width: 100%;}. Nav-justificado> li {float: nenhum;}. Nav-justificado> li> a {margem-bottom: 5px; ALIGN: CENTRO;}. Esquerda: Auto;}@Media (Min-Width: 768px) {.Nav-Justified> Li {Display: Table-Cell; largura: 1%; } .nav-justificado> li> a {margem-bottom: 0; }}Há uma condição de consulta de mídia acima: @media (largura min: 768px) {...} significa que a navegação adaptativa só pode ser exibida no estilo acima se a largura da janela do navegador for maior que 768px, mas quando a largura da janela do navegador for menor que 768px, será exibida no estilo abaixo.
.nav-tabs e .nav-justificados são usados juntos, o que significa navegação de guias adaptativa. Quando a largura da janela do navegador é inferior a 768px, o processamento adicional é feito no estilo.
.nav-tabs.nav-justificado {largura: 100%; Bottom: 0;}. Nav-tabs.nav-justificado> li {float: Nenhum;}. Nav-tabs.nav-justificado> li> a {margin-Bottom: 5px; Texto-alinhamento: Centro;}. Nav-tabs.nav-justificado> .Dropdown .Dropdown-Menu {Top: Auto; Esquerda: Auto;}@Media (Min-Width: 768px) {.nav-tabs.nav-justificada> li {display: tabela-célula; Largura: .Active> A: Passe o mouse, .nav-tabs.nav-justificado> .Active> A: Passe, .nav-tabs.nav-justificado> .Active> a: focus {borda: 1px Solid #ddd;}@mídia (min-width: 768 a) {.nav-tabs.nav-sjustiFLUFLUSFLEMLE (Li> Width: 768 A) {.nav-tabs.nav-justiFl. Radio de fronteira: 4px 4px 0 0; } .nav-tabs.nav-justificou> .Active> a, .nav-tabs.nav-justificado> .Active> a: pairar, .nav-tabs.nav-justificado> .Active> a: foco {borda-cortom-cor: #fff; }}Navegação mais menu suspenso (navegação secundária)
Para criar navegação secundária, você só precisa usar o LI como contêiner pai, use o nome da classe.Dropdown e aninhe outra lista UL em Li
<ul> <li><a href="#">Navigation Menu1</a></li> <li><a href="#">Navigation Menu2</a></li> <li><a href="#">Navigation Menu3</a></li> <li><a href="#">Navigation Menu4</a></li> <li><a href="#">Navigation Menu4 </a> </li> <li> <adata-toggle = "suspenso"> menu de navegação5 </span> </a> <ul> <li> <a href = "#"> suspenso menu 1 </a> </li> <li> <a hre = "#"> menu MENU3 </a> </li> <li> <a href = "#"> suspenso menu
Navegação de pão
As migalhas são geralmente usadas para navegação, e sua principal função é dizer ao usuário o local atual da página. A farinha de pão também é um componente de módulo independente na estrutura de bootstrap.
Menos: farinha de rosca
Sass: _breadcrumbs.scss
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> meu livro </a> </li> <li> CSS ilustrado </li> </ol>
.Breadcrumb {preenchimento: 8px 15px; margem-bottom: 20px; estilo de lista: nenhum; cor de fundo: #f5f5f5; Radio de fronteira: 4px;}. BreadCrumb> li {display: block inline;}. Breadcrumb> li: Li: Antes {Padding: 0Px; "// 00A0";}.O acima usa Li+Li: Antes de implementar o separador entre Li e Li. Esta solução não é suportada na versão inferior do IE.
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.