부트스트랩은 기본 탐색 모음 effect_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:23:06

원래의

1434명이 탐색했습니다.

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

태그에 .navbar, .navbar-default(흰색 배경에 검정색 텍스트), navbar-inverse(검은색 배경에 흰색 텍스트) 클래스를 추가합니다.
접근성을 높이려면 위 요소에 role="navigation"을 추가하세요.
navbar-brand 클래스가 있는 요소가 포함된
요소에 헤더 클래스 .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">

로그인 후 복사

효과는 다음과 같습니다.

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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