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- 반응 형 내비게이션 바
렌더링은 다음과 같습니다.
때로는 색상을 뒤집을 필요가 있습니다. 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>
렌더링은 다음과 같습니다.
5. 실용적인 5 개의 태그
일부 웹 페이지에서는 태그가 종종 사용자에게 다음과 같은 추가 정보를 알려줍니다.
이 효과는 부트 스트랩에서 레이블 구성 요소로 추출되어 ".label"스타일로 강조 표시됩니다. 버튼 요소 버튼과 마찬가지로 레이블 스타일은 주로 이러한 클래스 이름을 통해 다양한 색상을 제공하여 배경색과 텍스트 색상을 수정합니다.
렌더링은 다음과 같습니다.
6. 실제 전투 6- 배지
배지는 주로 읽지 않은 메시지 수를 상기시키는 데 주로 사용됩니다. 부트 스트랩에서 "배지"스타일은 배지 효과를 달성하는 데 사용됩니다.
<!-Navbar-Default Navigation Bar Medal-> <div role = "Navigation"> <liv> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> </li> <a href = "##"> 블로그 </a> <li> <li> <a. href = "##"> 포럼 <Span> 10 </span> </a> </li> <li> <a href = "##"> 피드백 </a> </li> </ul> </div>
렌더링은 다음과 같습니다.
7. 실용적인 7- 애니메이션 전환을 유도하는 팝업 박스
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 애니메이션 전환 팝업 박스 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1.1.csss/bootstrap.min.cssssssssssssssssssssssssssssstrap.min. <tyle> body {margin : 30px; padding : 30px;} </style> </head> <body> <body> <body <button type = "button"> 클릭 </button> <div id = "mymodal"> <div> <div> <div> <버튼 유형 = "button"data-disms = "modal"> <true "> </span> </span> </span> </span> <H4> 팝트 업 제목 </h4> </div> <div> <p> 팝트 업 신체 내용 </p> </div> <div> <버튼 유형 = "버튼"data-dismiss = "modal"> close </div> </div> <!-/.modal-content-> </div> <!-/.modal-dialog-> </. modal-dialog->-/. 문서의 끝에서 페이지를 더 빨리로드 할 수 있도록-> <!-bootstrap의 JS 플러그인을 사용하려면 먼저 jQuery를 호출해야합니다.> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> <! -> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <cript> $ (function () {$ ( ". btn"). click (function () {$ ( "#mymodal")); }); </script> </body> </html>렌더링은 다음과 같습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼