집 > 기사 > 웹 프론트엔드 > 부트스트랩은 기본 탐색 모음 effect_javascript 기술을 구현합니다.

부트스트랩은 기본 탐색 모음 effect_javascript 기술을 구현합니다.

WBOY원래의: 2016-05-16 15:23:061441검색

내비게이션 바는 Bootstrap 웹사이트의 훌륭한 기능이자 눈에 띄는 기능입니다. 네비게이션 바는 애플리케이션이나 웹사이트의 네비게이션 헤더 역할을 하는 반응형 메타 컴포넌트입니다. 탐색 표시줄은 모바일 뷰포트에서 축소되고 사용 가능한 뷰포트 너비가 증가함에 따라 수평으로 확장됩니다. 핵심적으로 Bootstrap 탐색 모음에는 사이트 이름 및 기본 탐색에 대한 스타일 정의가 포함되어 있습니다.
기본 탐색 모음을 만드는 단계는 다음과 같습니다.

c787b9a589a3ece771e842a6176cf8e9 태그에 .navbar, .navbar-default(흰색 배경에 검정색 텍스트), navbar-inverse(검은색 배경에 흰색 텍스트) 클래스를 추가합니다.
접근성을 높이려면 위 요소에 role="navigation"을 추가하세요.
navbar-brand 클래스가 있는 3499910bf9dac5ae3c52d5ede7383485 요소가 포함된 dc6dce4a544fdca2df29d5ac0ea9906b 요소에 헤더 클래스 .navbar-header를 추가합니다. 이렇게 하면 텍스트가 더 크게 표시됩니다.

탐색 모음에 링크를 추가하려면 클래스 .nav, .navbar-nav를 사용하여 순서가 지정되지 않은 목록을 추가하면 됩니다.

다음 예에서는 이를 보여줍니다.

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 默认的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 <div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此～</a> 
 </div> 
 <div> 
 <ul class="nav navbar-nav"> 
  <li class="active"><a href="#">导航一</a></li> 
  <li><a href="#">导航二</a></li> 
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  下拉菜单 
  <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">我是谁呢？</a></li> 
  <li><a href="#">我也不知道</a></li> 
  <li><a href="#">你是谁呢？</a></li> 
  <li class="divider"></li> 
  <li><a href="#">分离的链接</a></li> 
  <li class="divider"></li> 
  <li><a href="#">另一个分离的链接</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div> 
</nav> 
</body> 
</html>

효과는 다음과 같습니다.

넣어

<nav class="navbar navbar-inverse" role="navigation">

이
으로 변경되었습니다.

<nav class="navbar navbar-default" role="navigation">

효과는 다음과 같습니다.

위는 기본 네비게이션 바 효과를 구현하기 위한 부트스트랩의 코드입니다. 모두의 학습에 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript 모방 Alipay 비밀번호 입력 box_javascript 기술다음 기사：JavaScript 모방 Alipay 비밀번호 입력 box_javascript 기술

부트스트랩은 기본 탐색 모음 effect_javascript 기술을 구현합니다.

관련 기사