Navigation Bar (Navbar)는 Bootstrap의 독립적 인 구성 요소이며 Bootstrap의 NAVBAR (Navigation Bar)과 NAV (Navigation)간에 명확한 차이가 있습니다. 내비게이션 바 (NAVBAR)에는 배경색이 있으며 내비게이션 바는 순수한 링크, 양식, 양식 및 내비게이션과 같은 다양한 형태 일 수 있습니다.
1. 레벨 2 메뉴와 양식이있는 실용적인 전투 1 자극 바
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 탐색 바 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1/css/boottrap.min. 바디 {마진 : 30px; 패딩 : 30px;} </style> </head> <body> <div role = "navigation"> <!-제목은 "navbar-header"및 "navbar-brand"-> <div> <a href = "##"> title </a> <ul> <li> <a href = "##"> href = "##"> href = <a href = "##"data-toggle = "dropdown"> blog <span> </span> </a> <!-두 번째 메뉴-> <ul> <li> <a href = "##"> 두 번째 메뉴 </a> </li> </li> <li> <a href = "##"> 포럼 </li> </ul> <#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<#<<#</li>. rol = "검색"> <div> <입력 유형 = "text"placeholder = "키워드를 입력하십시오"/> </div> <버튼 유형 = "제출"> 검색 </button "> 검색 </button> </form> </div> <!-페이지가 빨리로드하려면 문서의 끝에 배치합니다. src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-부트 스트랩의 모든 JS 플러그인 또는 필요에 따라 사용할 수있는 JS 플러그인을 포함하여-> <Script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>렌더링은 다음과 같습니다.
Navbar-Brand 및 Navbar-Nav의 UL 및 Navbar 형태의 A 요소를 사용하는 것 외에도 Bootstrap의 내비게이션 바에서 다른 요소를 사용할 수 있습니다.
1) 내비게이션 바 Navbar-Btn의 버튼
2) 내비게이션 바 Navbar의 텍스트
3) 내비게이션 바 Navbar-Link의 일반 링크
2. 실제 전투 2 고정 내비게이션 바
<!-최고 탐색 바-> <div role = "navigation"> <div> <a href = "##"> title </a> </a> </div> <ul> <li> <a href = "##"> home </a> </a> </li> <li> <a href = "##"> 블로그 </a> <li> <a href = "#</a>"> </ul> </div> <!-하단 내비게이션 바-> <div 역할 = "내비게이션"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> </li> <a href = "##"> 블로그 </a> <li> <a> <a. href = "##"> 포럼 </a> </li> </ul> </ul> </div> <!-텍스트 내용-> <div> 웹 페이지 텍스트 내용 </div>
렌더링은 다음과 같습니다.
3. 실용적인 3 회 반응 내비게이션 바
<div role = "navigation"> <div> <!-.navbar-toggle 스타일은 토글을 수축시키는 내용, 즉 Nav-Collapse 붕괴 스타일이 위치한 요소-> <button type = "button"data-toggle = "data-target =". navbar-responsive-collapse "> </span> </span> </span> </span> </span> </span> <span> </span> <!-Navbar-Brand가 넓고 좁은 화면에 표시되어 있는지 확인하십시오 .-> <a href = "##"> title </a> </div> <!-화면 너비가 768px 미만인 경우 Div.navbar responsive-collapse 컨테이너의 내용이 숨겨지고 Icon-bar icon이 표시됩니다. 아이콘 바 아이콘을 클릭하면 다시 확장하십시오. 화면이 768px보다 큰 경우 기본적으로 표시됩니다. -> <div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> 포럼 </a> </li> </ul> </div>
렌더링은 다음과 같습니다.
때로는 색상을 뒤집을 필요가 있습니다. Bootstrap은이를 위해 역 네비게이션 바를 제공하지만 Navbar-Deafult 클래스 이름을 Navbar 방향으로 바꾸면 네비게이션 막대의 배경색과 텍스트 색상이 수정됩니다.
4. 실용적 4- 약성 내비게이션
1) 페이지 번호가 포함 된 Pagination Navigation
<!-Pagination : 정상 크기의 페이지 매김 -LG : Pagination Napination Make Paglination Paglination-SM : Paglination을 작게 만들 수 있습니다-> <ul> <li> <#">«home </a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> href = "#"> 3 </a> </a> <li> <a href = "#"> 4 </a> </a> </a> </li> <li> <a href = "#"> 5 </a> </li> <!-비활성화 상태-> <li> <a href = "#"> 마지막 페이지»</a> </li> </ul>
렌더링은 다음과 같습니다.
2) 페이지 회전 및 페이지 매김 내비게이션
<ul> <li> <a href = "#">«이전 페이지 </a> </li> <!-비활성화 상태-> <li> <#"> 다음 페이지»</a> </li> </ul> <!-왼쪽과 오른쪽-> <li> <a href ="#"> 이전 페이지 </li> <a href = <a href = <a href = <a href =" 페이지»</a> </li> </ul>
렌더링은 다음과 같습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.