지역 사회 배우다 도구 라이브러리 여가

한국어

집 > 웹 프론트엔드 > JS 튜토리얼 > 부트스트랩이 매일 배워야 하는 네비게이션 바_javascript 기술

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

WBOY

풀어 주다： 2016-05-16 15:29:27

원래의

1565명이 탐색했습니다.

1. 네비게이션 바

이전 섹션에서 소개한 내비게이션 바(navbar)와 내비게이션(nav)의 차이점은 "bar"라는 단어가 추가된 단 한 단어입니다. 실제로 Bootstrap 프레임워크에서는 여전히 분명히 다릅니다. 내비게이션 바(navbar)에는 배경색이 있고(디스플레이가 더 눈에 띕니다), 내비게이션 바는 순수 링크(내비게이션과 유사), 양식 또는 양식과 내비게이션의 조합일 수 있습니다. 이 섹션에서는 Bootstrap 프레임워크에서 탐색 모음을 사용하는 방법에 대해 설명합니다.

탐색 표시줄은 탐색과 마찬가지로 Bootstrap 프레임워크의 독립적인 구성 요소이므로 필요에 따라 다른 버전을 사용할 수도 있습니다.

LESS 버전: 해당 소스 파일 navbar.less
Sass 버전: 해당 소스 파일 _navbar.scss
컴파일된 버전: bootstrap.css 파일의 3642~4111행을 확인합니다(여기에 언급된 Bootstrap 버전은 3.1.1이고 다른 버전의 위치는 일치하지 않습니다).

2. 기본 탐색바

부트스트랩 박스에서는 내비게이션 바와 내비게이션의 생김새가 크게 다르지 않지만, 실제 사용에서는 내비게이션보다 내비게이션이 훨씬 더 복잡합니다. 먼저 탐색 모음 중 가장 기본적인 것인 기본 탐색 모음을 살펴보겠습니다.

1), 사용법:

기본 네비게이션 바를 만들 때 주로 다음과 같은 단계를 거치게 됩니다.

1단계: 먼저 탐색 목록(
- 2단계: 목록 외부에 컨테이너(div)를 추가하고 클래스 이름 "navbar" 및 "navbar-default"를 사용합니다.
```
<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
로그인 후 복사
".navbar" 스타일의 주요 기능은 왼쪽 및 오른쪽 패딩, 둥근 모서리 등의 효과를 설정하는 것이지만 색상 스타일과 관련된 설정은 없습니다. 주요 소스코드는 다음과 같습니다.

/소스코드 보기 bootstrap.css 파일 3642행~3647행/
```
.navbar {
 position: relative;
 min-height: 50px;
 margin-bottom: 20px;
 border: 1px solid transparent;
}
```
로그인 후 복사
2) 원리분석 :

탐색 모음의 색상은 ".navbar-default"를 통해 제어됩니다.

/소스코드 보기 bootstrap.css 파일 3940행~3943행/
```
.navbar-default {
 background-color: #f8f8f8;
 border-color: #e7e7e7;
}
```
로그인 후 복사
navbar-nav 스타일은 Navigation.nav를 기반으로 메뉴 항목의 부동 여백과 내부 및 외부 여백을 다시 조정합니다. 또한 색상 및 기타 스타일 설정은 포함되어 있지 않습니다. 소스 코드는 bootstrap.css 파일의 3785~3830번째 줄을 참조하세요. 코드를 추출하여 오른쪽의 bootstrap.css에 넣습니다.

색상 및 기타 스타일은 상위 컨테이너 "navbar-default"와 함께 구현됩니다.

/소스코드는 bootstrap.css 파일의 3955~3974라인을 참고하세요/
```
.navbar-default .navbar-nav> li > a {
 color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
 color: #333;
 background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
 color: #555;
 background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
 color: #ccc;
 background-color: transparent;
}
```
로그인 후 복사
3. 탐색 표시줄에 제목, 보조 메뉴 및 상태를 추가합니다.

1) 네비게이션 바 제목 추가

웹 페이지 제작에서는 메뉴 앞에 제목이 있는 경우가 많습니다(텍스트 크기가 다른 텍스트보다 약간 큽니다). 실제로 Bootstrap 프레임워크에서도 이러한 측면을 모두 고려하여 "navbar-header"를 사용합니다. " 및 "navbar-brand"를 달성합니다.
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
로그인 후 복사
2) 원리분석 :

이 기능은 주로 알림 기능으로 사용됩니다. 물론 개선되면 로고로 활용도 가능합니다(여기서 자세히 설명하지 않겠습니다). 스타일은 주로 글꼴 설정을 늘리고 최대 너비를 설정합니다.

/소스코드 보기 bootstrap.css 파일 3739행~3755행/
```
.navbar-brand {
 float: left;
 height: 50px;
 padding: 15px 15px;
 font-size: 18px;
 line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
 text-decoration: none;
}
@media (min-width: 768px) {
 .navbar> .container .navbar-brand,
 .navbar> .container-fluid .navbar-brand {
 margin-left: -15px;
 }
}
```
로그인 후 복사
또한 기본 탐색 모음(navbar-default) 아래에서 navbar 브랜드도 색상으로 표시됩니다.

/소스코드는 bootstrap.css 파일의 3947~3951라인을 확인해주세요/
```
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
```
로그인 후 복사
3) 네비게이션 바 상태, 보조 메뉴

마찬가지로 기본 탐색 모음에는 현재 상태, 비활성화 상태, 일시 중지 상태 및 기타 효과가 포함된 메뉴가 제공되며 보조 메뉴가 포함된 탐색 모음이 있을 수도 있습니다.
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
  </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
로그인 후 복사
效果图如下：

4、带表单的导航条

有的导航条中会带有搜索表单，比如新浪微博的导航条：

在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
  </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
  <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
```
로그인 후 복사
实现导航条+表单的样式代码源码请查看bootstrap.css文件第3839行～第3904行.

在上面的示例中，大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。

/源码请查看bootstrap.css文件第3831行～第3838行/
```
@media (min-width: 768px) {
 .navbar-left {
 float: left !important;
}
.navbar-right {
 float: right !important;
 }
}
```
로그인 후 복사
注意：这里有一个条件，只有当浏览器视窗宽度大于768px生效。

5、导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：
- 1、导航条中的按钮navbar-btn
- 2、导航条中的文本navbar-text
- 3、导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

先来看看这三种样式对应的源码：

/源码请查看bootstrap.css文件第3914行～第3939行/
```
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
 }
.navbar-text.navbar-right:last-child {
margin-right: 0;
 }

}
/bootstrap.css文件第3952行～第3954行/

.navbar-default .navbar-text {
 color: #777;
}

/bootstrap.css文件第4035行～第4037行/

.navbar-inverse .navbar-text {
color: #999;
}

/boostrap.css文件第4017行～第4022行/

.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}

/bootstrap.css文件第4106行～第4111行/

.navbar-inverse .navbar-link {
color: #999;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}
```
로그인 후 복사
navbar-btn和navbar-link在上一小节已经讲过，现在我们来看一下navbar-text的一个简单应用
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 </ul>
</div>
```
로그인 후 복사
在结果窗口中查看效果，可以看出明显的存在问题.

通过浏览器调试工具，可以看到a标签有margin-top和margin-bottom的值为15px，欲将其对齐，我们将上面的结构做一定的调整. 将

관련 라벨：

bootstrap 导航条

원천：php.cn

이전 기사：일반적으로 사용되는 jQuery 애니메이션 이벤트 및 애니메이션 기능 공유_jquery 다음 기사：JS_javascript 기술로 구현된 모방 Taobao 거래 카운트다운 효과

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

NullPointerException은 무엇이며 어떻게 해결합니까?

2024-10-22 09:46:29
초보자에서 코더까지: C 기초로 시작되는 여정

2024-10-13 13:53:41
PHP로 웹 개발 잠금 해제: 초보자 가이드

2024-10-12 12:15:51
C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길

2024-10-11 22:47:31
코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍

2024-10-11 19:36:51
내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C

2024-10-11 15:50:41
C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구

2024-10-11 15:07:41
PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계

2024-10-11 14:21:21
Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드

2024-10-11 12:59:11
코딩의 핵심: 초보자를 위한 Python의 힘 활용

2024-10-11 12:17:31

최신 이슈

페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...

에서 2024-04-06 21:58:04

0

1

800

CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...

에서 2024-04-06 20:22:15

0

1

454

CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...

에서 2024-04-06 12:53:11

0

1

376

웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

에서 2024-04-05 08:45:39

0

1

3443

Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...

에서 2024-04-04 22:16:18

0

1

1450

관련 주제

더>

인기 추천

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿