부트스트랩은 반응형 탐색 모음 effect_javascript 기술을 구현합니다.
- WBOY원래의
- 2016-05-16 15:22:591686검색
navbar에 반응형 기능을 추가하려면 축소하려는 콘텐츠를 .collapse, .navbar-collapse 클래스가 있는 dc6dce4a544fdca2df29d5ac0ea9906b로 묶어야 합니다. 축소된 탐색 모음은 실제로 .navbar-toggle 클래스와 두 개의 데이터 요소가 있는 버튼입니다. 첫 번째는 버튼으로 무엇을 해야 하는지 JavaScript에 알려주는 data-toggle이고, 두 번째는 전환할 요소를 나타내는 data-target입니다. .icon-bar 클래스가 있는 세 개의 45a2772a6b6107b401db3c9b82c049c2은 소위 햄버거 버튼을 생성합니다. 이는 .nav-collapse dc6dce4a544fdca2df29d5ac0ea9906b의 요소로 전환됩니다. 이러한 기능을 사용하려면 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>
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.