부트스트랩이 매일 배워야 하는 네비게이션 바 (2)

부트스트랩이 매일 배워야 하는 네비게이션 바 (2)_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:12:45

원래의

1241명이 탐색했습니다.

1. 기본 네비게이션 바

기본 네비게이션 바를 만들 때 주로 다음과 같은 단계를 거치게 됩니다.

1단계: 먼저 탐색 목록(

2단계: 목록 외부에 컨테이너(div)를 추가하고 "navbar" 및 "navbar-default" 클래스 이름을 사용합니다.

<div class="navbar navbar-default">
 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>
 <!-- 基础导航条-->
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

로그인 후 복사

1. 웹페이지 제작시 메뉴 앞에 제목이 있는 경우가 많습니다(텍스트 크기가 다른 텍스트보다 약간 큼). 이는 "navbar-header" 및 "navbar-brand"를 통해 구현됩니다.

 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>

로그인 후 복사

2. 보조 메뉴는

 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>

로그인 후 복사

3. Bootstrap 프레임워크에는 "navbar-form"이 제공됩니다. 사용 방법은 매우 간단합니다. navbar 컨테이너에 navbar-form 클래스 이름을 포함하는 양식을 배치합니다.

"navbar-left"는 양식을 왼쪽에 띄우고 "navbar-right" 스타일은 탐색 모음에서 요소를 오른쪽에 정렬합니다.

 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>

로그인 후 복사

2. 반전된 네비게이션 바

역 탐색 모음은 실제로 Bootstrap 프레임워크에서 제공하는 탐색 모음의 두 번째 스타일입니다. "navbar-deafult" 클래스 이름을 "navbar-inverse"로 대체합니다.

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="">首页</a></li>
 <li><a href="">教程</a></li>
 <li><a href="">关于我们</a></li>
 </ul>
</div>

로그인 후 복사

3. 고정된 탐색바

디자이너가 내비게이션 바를 브라우저 상단이나 하단에 고정하기를 원하는 여러 상황 중 하나입니다.

Bootstrap 프레임워크는 탐색 모음을 수정하는 두 가지 방법을 제공합니다.

　√ .navbar-fixed-top: 탐색 표시줄이 브라우저 창 상단에 고정됩니다

　plain .navbar-fixed-bottom: 네비게이션 바가 브라우저 창 하단에 고정됩니다

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

<!--导航条固定在浏览器窗口顶部-->
<div class="navbar navbar-default navbar-fixed-top">
 　…
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
 　…
</div>

로그인 후 복사

4. 반응형 탐색바

<div class="navbar navbar-default">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse" id="demo">
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 </div>
</div>

로그인 후 복사

와이드스크린 모드에서:

좁은 화면 모드에서:

사용법:

1. 좁은 화면에서 접어야 하는 콘텐츠가 반드시 div로 래핑되어야 하는지 확인하고 이 div에 Collapse 및 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"을 추가하세요

부트스트랩에 대해 더 알고 싶은 친구들은 "부트스트랩 학습 튜토리얼"을 클릭해 자세히 알아볼 수 있습니다.

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

"매일 배워야 하는 부트스트랩 네비게이션 바"를 결합하여 학습할 수도 있습니다.