지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 부트스트랩은 반응형 탐색 모음 effect_javascript 기술을 구현합니다.

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

WBOY
풀어 주다： 2016-05-16 15:22:59
원래의
1704명이 탐색했습니다.

navbar에 반응형 기능을 추가하려면 축소하려는 콘텐츠를 .collapse, .navbar-collapse 클래스가 있는

로 묶어야 합니다. 축소된 탐색 모음은 실제로 .navbar-toggle 클래스와 두 개의 데이터 요소가 있는 버튼입니다. 첫 번째는 버튼으로 무엇을 해야 하는지 JavaScript에 알려주는 data-toggle이고, 두 번째는 전환할 요소를 나타내는 data-target입니다. .icon-bar 클래스가 있는 세 개의 은 소위 햄버거 버튼을 생성합니다. 이는 .nav-collapse
의 요소로 전환됩니다. 이러한 기능을 사용하려면 Bootstrap Collapse 플러그인을 포함해야 합니다.
렌더링:

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

<!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-default" role="navigation"> 
 <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">fgghh</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    Java <b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">vgghhr</a></li> 
    <li><a href="#">dg</a></li> 
    <li><a href="#">sfg</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>
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

관련 라벨：
bootstrap 항해
원천：php.cn
이전 기사：js가 소수 연산을 올바르게 처리할 수 없는 이유는 무엇입니까? _자바스크립트 기술 다음 기사：소스 코드 download_jquery를 사용하여 jQuery 기반의 월 선택 플러그인 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 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
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿