이 기사는 Bootstrap의 탐색 모음 및 페이지 탐색을 배우는 데 도움이 될 것입니다.

이 글은 Bootstrap의 탐색 표시줄과 페이징 탐색을 안내하고 라벨과 배지도 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

1. 네비게이션 바 기본

앞서 소개한 네비게이션 바(navbar)와 네비게이션(nav)은 "bar"라는 단어가 추가되어 한 단어만 다릅니다. 실제로 Bootstrap 프레임워크에서는 여전히 분명히 다릅니다. 내비게이션 바(navbar)에는 배경색이 있으며, 내비게이션 바는 순수 링크(내비게이션과 유사), 양식 또는 양식과 내비게이션의 조합일 수 있습니다. [관련 추천사항: "부트스트랩 튜토리얼"]

2. 기본 네비게이션 바

부트스트랩 박스에서 네비게이션 바와 외관은 크게 다르지 않지만, 실제로 사용해보면 네비게이션 바가 더 복잡합니다. 내비게이션보다 훨씬 더요.

사용 방법:

기본 네비게이션 바를 만들 때 주로 다음 단계를 따릅니다.

1단계: 먼저 네비게이션 목록을 기반으로 클래스 이름 "navbar-nav"를 추가합니다(5ee4df65e32a20a82cfe4957b45b77c8). 2단계: 목록 외부에 컨테이너(div)를 추가하고 클래스 이름 "navbar" 및 "navbar-default"를 사용합니다.

원리 분석:

내비게이션 바의 색상은 모두 ".navbar-default"를 통해 이루어집니다. "를 제어합니다.

3. 네비게이션 바에 제목, 보조 메뉴, 상태 추가

웹 페이지 제작에서는 메뉴 앞에 제목이 있는 경우가 많습니다(사실 텍스트 크기가 약간 더 큽니다). Bootstrap 프레임워크에서도 이 부분을 고려하여 "navbar-header"와 "navbar-brand"를 통해 구현했습니다. 이 기능은 주로 알림 기능으로 사용됩니다. 물론 개선 후에는 일종의 알림 기능이라고 볼 수도 있습니다. 로고(여기서는 자세히 설명하지 않음) 기본 스타일은 글꼴 설정을 늘리고 최대 너비를 설정하는 것입니다. 또한 기본 탐색 모음(navbar-default) 아래에도 navbar-brand가 색상 처리되어 있으며, 마찬가지로 기본 탐색 모음에도 메뉴가 제공됩니다. , 비활성화된 상태, 일시 중지된 상태 및 기타 효과가 있으며 보조 메뉴가 있는 탐색 모음도 있을 수 있습니다.

4. 양식이 있는 탐색 모음

은 Bootstrap 프레임워크에서 "navbar-form"을 제공합니다. 사용 방법은 매우 간단합니다. Framework는 탐색 모음에서 요소를 오른쪽에 정렬하기 위한 "navbar-right" 스타일도 제공합니다. 여기에는 브라우저 창 너비가 768px보다 큰 경우에만 적용되는 조건이 있습니다.

5. 탐색 모음의 버튼, 텍스트 및 링크

navbar-brand의 a 요소와 navbar-nav의 ul 및 navbar-form 외에도 다른 요소도 탐색 모음에서 사용할 수 있습니다. Bootstrap 프레임워크의 . 프레임워크는 세 가지 다른 스타일을 제공합니다:

1) navbar의 버튼 navbar-btn

2) navbar의 텍스트 navbar-text

3) navbar의 일반 링크 navbar-link

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

6. 고정 내비게이션 바

디자이너가 내비게이션 바를 브라우저 상단이나 하단에 고정하기를 원하는 상황 중 하나는 모바일 개발에서 이 고정 내비게이션 바를 적용하는 것이 더 일반적입니다. 부트스트랩 프레임워크는 탐색 모음을 수정하는 두 가지 방법을 제공합니다.

🙌 .navbar-fixed-top: 탐색 모음은 브라우저 창 상단에 고정됩니다.

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

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7. 반응형 네비게이션 바

요즘에는 웹 페이지 탐색용 터미널이 더 이상 동일하지 않습니다. 이전 예에서 구현된 네비게이션 바는 대형 화면 브라우저에만 적용할 수 있지만 브라우저 화면이 변경되면 어렸을 때는 적합하지 않았습니다. 그래서 반응형 디자인이 따라옵니다. 따라서 반응형 웹 페이지에서는 반응형 탐색 모음이 매우 중요합니다.

사용법:

1) 좁은 화면에서 접어야 하는 콘텐츠가 div에 래핑되어야 하는지 확인하고 이 div에 클래스 이름 붕괴 및 navbar-collapse 두 개를 추가합니다. 마지막으로 이 div에 클래스 이름이나 ID 이름을 추가합니다.

2) 좁은 화면에 표시될 아이콘 스타일 확인(고정된 작성 방법):

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3) 그리고 버튼에 data-target=".class name/#id name"을 추가하고, 클래스 이름 또는 ID 이름 모직옷? 접어야 하는 div에 따라 결정됩니다.

접혀야 하는 div 코드 세그먼트:

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以这么写，需要折叠的div代码段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。 

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：  

☑   带页码的分页导航  

☑   带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

위 내용은 이 기사는 Bootstrap의 탐색 모음 및 페이지 탐색을 배우는 데 도움이 될 것입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!