부트스트랩 입문서 (5) 네비게이션 바, 페이징 Navigation

탐색바

네비게이션 바(navbar)와 부트스트랩 입문서 - (4) 메뉴, 버튼, 네비게이션은 이전 섹션에서 소개했습니다. 내비게이션(nav)은 "bar"라는 단어가 추가되어 단 한 단어만 다릅니다. 실제로 Bootstrap 프레임워크에서는 여전히 분명히 다릅니다. 내비게이션 바(navbar)에는 배경색이 있으며, 내비게이션 바는 순수 링크(내비게이션과 유사), 양식 또는 양식과 내비게이션의 조합일 수 있습니다. 모바일 장치에서는 축소되고(열리고 닫힐 수 있음) 뷰포트 너비가 증가함에 따라 점차 수평으로 확장됩니다.

기본 네비게이션 바

사실 내비게이션 바와 내비게이션의 외관상의 차이는 그리 크지 않지만, 실제 사용에서는 내비게이션 바가 내비게이션보다 훨씬 더 복잡합니다. 기본 탐색 모음을 구현해 보겠습니다.

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

로그인 후 복사

얻을 수 있는 효과는 다음과 같습니다.

와이드스크린:

좁은 화면:

기본 네비게이션 바를 만들 때 다음 사항에 주의하세요.

1. 먼저 탐색 목록(

2. 목록 외부에 컨테이너(div)를 추가합니다. 여기서 허용되는 경우

를 사용하고 클래스 이름을 .navbar 및 .navbar-default로 사용하는 것이 좋습니다.

3. navbar 클래스의 주요 기능은 왼쪽 및 오른쪽 패딩, 둥근 모서리 등의 효과를 설정하는 것입니다. .navbar-inverse와 같은 탐색 모음의 색상을 제어합니다.

제목 있음, 보조 메뉴

웹 페이지 제작에서는 일반적으로 메뉴 앞에 제목이 표시됩니다(텍스트 크기가 다른 텍스트보다 약간 큽니다). 실제로 Bootstrap 프레임워크에서도 이를 고려하여 .navbar- 헤더 및 .navbar-brand는 다음과 같습니다.

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

로그인 후 복사

물론 중국 공식 웹사이트에 설명된 대로 로고를 만드는 데에도 사용할 수 있지만 여기서는 자세히 설명하지 않습니다.

보조 메뉴에 대해서는 이전 블로그에서 자세히 설명했습니다. 여전히 이해가 되지 않으면 다음 단락을 다시 살펴보겠습니다. 달성 가능한 효과: (여기에서는 navbar-inverse 탐색 모음이 사용됩니다.)

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>

로그인 후 복사

효과는 다음과 같습니다.

양식으로

네비게이션 바에서 Zhihu, Sina Weibo 등과 같은 검색 양식을 자주 볼 수 있습니다. 물론 Bootstrap 프레임워크에는 그러한 것이 부족할 수 없습니다. 사용 방법도 매우 간단합니다.

Bootstrap 프레임워크에는 .navbar-form이 제공됩니다. .navbar 컨테이너에 .navbar-form 클래스 이름을 가진 양식을 배치한 다음 .navbar-left를 추가하여 더 나은 정렬을 위해 양식을 왼쪽으로 이동시킵니다.

Bootstrap에서는 탐색 모음 오른쪽에 요소를 정렬하기 위해 .navbar-right 스타일도 제공됩니다.

이 코드를 코드에 복사하여 효과를 확인하세요.

<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>

로그인 후 복사

버튼, 텍스트, 링크

위의 일부 스타일 외에도 부트스트랩 프레임워크는 세 가지 다른 스타일을 제공합니다.

1. 네비게이션 바의 navbar-btn 버튼은

에 없는 버튼을 네비게이션 바의 수직 중앙에 배치합니다.

2. 탐색 모음의 텍스트 navbar-text는 일반적으로 최적의 줄 간격을 얻기 위해

3. 탐색 모음의 일반 링크 navbar-link, 비탐색 링크, 올바른 기본 색상 및 반전 색상 설정을 갖도록 이 클래스를 추가하세요

그러나 이 세 가지 스타일은 프레임워크에서 사용될 때 특정 제한 사항이 적용되며 navbar-brand 및 navbar-nav와 함께 사용해야 합니다. 수량에도 일정한 제한이 있습니다. 일반적으로 한두 개를 사용하면 문제가 없지만 두 개 이상 사용하면 문제가 발생합니다.

고정 탐색바 때때로 탐색 모음을 브라우저 상단이나 하단에 고정하고 싶을 때가 있습니다. Bootstrap은 이러한 스타일을 구현하기 위해 두 가지 클래스를 편리하게 제공합니다.

.navbar-fixed-top: 탐색 표시줄이 브라우저 창 상단에 고정됩니다.

.navbar-fixed-bottom: 탐색 모음이 브라우저 창 하단에 고정됩니다

사용 방법은 매우 간단합니다. 탐색 모음의 가장 바깥쪽 컨테이너(navbar)에 해당 클래스 이름을 추가하기만 하면 됩니다.

这个固定的导航条会遮住页面上的其它内容，除非你给元素底部设置了 padding 。提示：导航条的默认高度是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="#" class="navbar-brand">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
 </div>
</div>

로그인 후 복사

分析：

和普通导航条一样，最外层使用