부트스트랩이 매일 배워야 하는 네비게이션_javascript 기술

1. 내비게이션(기본 스타일)

내비게이션은 프런트 엔드 담당자에게 낯선 것이 아닙니다. 네비게이션은 웹사이트의 중요한 요소이자 구성요소 중 하나로, 사용자가 웹사이트에서 제공하는 다양한 기능적 서비스를 쉽게 찾을 수 있도록 해준다고 할 수 있습니다. 내비게이션을 만드는 방법도 온갖 낯설고 다양합니다. 이번 섹션에서는 Bootstrap 프레임워크를 사용하여 다양한 탐색을 만드는 방법을 소개합니다.

부트스트랩 프레임워크에서는 탐색이 여러 버전에 따라 탐색 구성 요소로 분리되어 있으며 해당 소스 코드를 찾을 수 있습니다.

🙌 LESS 버전: 해당 소스 파일은 navs.less

🙌 Sass 버전: 해당 소스 파일은 _navs.scss

🙌 컴파일된 버전: 해당 소스 코드는 bootstrap.css 파일의 3450~3641번째 줄입니다.

내비게이션 기본 스타일

Bootstrap 프레임워크에서 탐색 모음을 만들 때는 주로 ".nav" 스타일을 사용합니다. 기본 ".nav" 스타일은 기본 탐색 스타일을 제공하지 않으며 "nav-tabs", "nav-pills" 등과 같은 다른 스타일을 첨부해야 효과적입니다. 예를 들어 탭 탐색 모음의 경우 구현 방법은 ul 태그에 .nav 및 nav-tabs라는 두 가지 클래스 스타일을 추가하는 것입니다.

<ul class="nav nav-tabs">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li><a href="##">Responsive</a></li>
</ul>

/소스코드는 bootstrap.css 파일의 3450~3493라인을 참고하세요/

.nav {
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav> li {
 position: relative;
 display: block;
}
.nav> li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
 background-color: #eee;
 border-color: #428bca;
}
.nav .nav-divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.nav> li > a >img {
 max-width: none;
}

2. 탐색(탭 탐색)

탭 탐색이라고도 하는 라벨 모양 탐색입니다. 특히 많은 콘텐츠가 블록으로 표시되는 경우 이러한 종류의 탭을 사용하여 그룹화하는 것이 매우 적합합니다.

탭 모양 탐색은 'nav-tabs' 스타일을 통해 구현됩니다. 레이블 모양 탐색을 만들 때 원래 탐색 "nav"에 다음과 같은 이름을 추가해야 합니다.

<ul class="nav nav-tabs">
   <li><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

런닝 효과는 다음과 같습니다.

구현 원리는 매우 간단합니다. 메뉴 항목(li)을 블록으로 표시하고 동일한 레벨에 정렬한 다음 강조 표시되지 않은 메뉴의 스타일과 마우스 호버 효과를 정의합니다. 코드는 다음과 같습니다.

/소스코드는 bootstrap.css 파일의 3494~3509행을 참고하세요/

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

사실 위 예시의 효과는 우리가 일반적으로 보는 탭 효과와 일치하지 않습니다. 일반적으로 탭교회에는 현재 선택된 항목이 하나 있습니다. 실제로 Bootstrap 프레임워크도 그에 따라 이를 제공합니다. "Home" 항목을 현재 선택된 항목으로 지정하려면 해당 레이블에 클래스 이름 "class="active""만 추가하면 됩니다.

<ul class="nav nav-tabs">
  <li class="active"><a href="##">Home</a></li>
  …
</ul>

작동 효과는 다음과 같습니다.

해당 스타일 코드는 다음과 같습니다.

/소스코드는 bootstrap.css 파일의 3510~3518라인을 참고하세요/

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
 color: #555;
 cursor: default;
 background-color: #fff;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

현재 항목 외에도 일부 탭에도 비활성화된 상태가 있습니다. 이 효과를 얻으려면 레이블 항목에 "class="disabled""를 추가하기만 하면 됩니다.

<ul class="nav nav-tabs">
   <li class="active"><a href="##">Home</a></li>
   …
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

작동 효과는 다음과 같습니다.

이 효과를 얻기 위한 스타일은 기본 스타일 ".nav"에 포함되어 있습니다.

/소스코드는 bootstrap.css 파일의 3469~3478라인을 확인해주세요/

.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

참고: 우리가 보는 탭 효과의 경우 메뉴 항목을 클릭하여 내용을 전환할 수 있습니다. 이 효과를 얻으려면 js 플러그인과 협력해야 합니다. 이 부분은 나중에 소개하겠습니다. 블로그.

3. 내비게이션(캡슐형(알약) 내비게이션)

캡슐 모양(알약) 내비게이션은 모양이 약간 캡슐처럼 보이기 때문에 다소 어색하게 들립니다. 하지만 우리가 일반적으로 보는 대중적인 내비게이션과 더 비슷합니다. 현재 항목은 둥근 모서리로 강조 표시됩니다. 구현 방법은 "nav-tabs"와 유사합니다. 동일한 구조를 사용하면 클래스 이름 "nav-tabs"를 "nav-pills"로 바꾸면 됩니다.

<ul class="nav nav-pills">
   <li class="active"><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

효과 스타일을 구현하는 코드:

/소스코드는 bootstrap.css 파일의 3563~3577라인을 참고하세요/

.nav-pills > li {
 float: left;
}
.nav-pills > li > a {
 border-radius: 4px;
}
.nav-pills > li + li {
 margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
 background-color: #428bca;
}

4. 내비게이션(세로 스택형 내비게이션)

실제 응용에서는 앞서 소개한 버튼의 수직 배열과 마찬가지로 수평 탐색 외에도 수직 탐색도 있습니다. 수직 스택 탐색을 만들려면 "nav-pills"(스택은 힙을 의미)를 기반으로 "nav-stacked" 클래스 이름만 추가하면 됩니다.

<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下：

垂直堆叠导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距：

/源码请查阅bootstrap.css文件第3578行～第3584行/

.nav-stacked > li {
 float: none;
}
.nav-stacked > li + li {
 margin-top: 2px;
 margin-left: 0;
}

大家是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“fb75b957dfbba076c236b53c0f93301fbed06894275b65c1ab86501b08a632eb”即可：

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li class="nav-divider"></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下：

实现样式：

/源码请查阅bootstrap.css文件第3485行～3490行/

.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

或许你会问，如果我在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本将这个效果取消了，可能作者觉得垂直选择项并不太常见，也不美观吧。

4、自适应导航（使用）

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：

<ul class="nav nav-tabs nav-justified">
   <li class="active"><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

运行效果如下：

自适应导航（实现原理）

实现原理并不难，列表（ff6d136ddc5fdfeffaf53ff6ee95f185）上设置宽度为“100%”，然后每个菜单项(25edfb22a4f469ecb59f1190150159c6)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示：

/源码请查阅bootstrap.css文件第3585行～第3607行/

.nav-justified {
 width: 100%;
}
.nav-justified > li {
 float: none;
}
.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-justified > li {
 display: table-cell;
 width: 1%;
 }
 .nav-justified > li > a {
 margin-bottom: 0;
 }
}

这里有一个媒体查询条件：“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候，将会按下图的风格展示：

从上图效果可以得知，“nav-tabs”和“nav-justified”配合在一起使用，也就是自适应选项卡导航，浏览器视窗宽度小于768px时，在样式上做了另外的处理。

/源码请查阅bootstrap.css文件第3519行～第3562行/

.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
 }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
 }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
 }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
 }
}

5、导航加下拉菜单（二级导航）

前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以：

<ul class="nav nav-pills">
   <li class="active"><a href="##">首页</a></li>
   <li class="dropdown">
    <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="##">CSS3</a></li>
      …
    </ul>
   </li>
   <li><a href="##">关于我们</a></li>
</ul>

运行效果如下：

通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名：

简单点来说，就是依靠这个类名来控制二级导航显示与否，并且设置了背景色和边框：

/源码查看bootstrap.css文件第3479行～3484行/

.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}

大家回忆一下，在制作下拉菜单时，可以用分隔线，那么在二级导航中是否可以呢？我们一起来看看：

不用再说太多，只需要添加“fb75b957dfbba076c236b53c0f93301fbed06894275b65c1ab86501b08a632eb”这样的一个空标签就可以了。

运行效果如下：

/源码请查看bootstrap.css文件第3485行～第3490行/

.nav .nav-divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}

6、面包屑式导航

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件：

• LESS版本：对应源文件breadcrumbs.less
• Sass版本：对应源文件_breadcrumbs.scss
• 编译出来的版本：源码对应bootstrap.css文件第4112行～第4129行

使用方法：

使用方式就很简单，为ol加入breadcrumb类：

<ol class="breadcrumb">
 <li><a href="#">首页</a></li>
 <li><a href="#">我的书</a></li>
 <li class="active">《图解CSS3》</li>
</ol>

想想看，当前菜单项是不需要链接的，所以也就不用a标签了。

实现原理：

看来不错吧！作者是使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本就惨了（不支持）。

/源码查看bootstrap.css文件第4112行～第4129行/

.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}

.breadcrumb> li {
display: inline-block;
}

 以上就是本文的全部内容，希望对大家的学习有所帮助。