이 기사에는 참조를위한 Bootstrap Navigation Bar의 기본 사용 방법이 포함되어 있습니다. 특정 내용은 다음과 같습니다
1. 부트 스트랩 기본 내비게이션 스타일
내비게이션 바는 주로 ".NAV"스타일을 통해 부트 스트랩 프레임 워크에서 만들어집니다. 기본 ".NAV"스타일은 기본 탐색 스타일을 제공하지 않습니다. "Nav-Tabs", "Nav-Pills"등과 같이 다른 스타일이 효과적이어야합니다. 예를 들어, 오른쪽의 코드 편집기에 탭 내비게이션 표시 줄의 예가 있습니다. 그의 구현 방법은 UL Tag.nav 및 Nav-Tabs에 두 가지 클래스 스타일을 추가하는 것입니다.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li>. href = "##"> Responsive </a> </li> </ul>
2. 부트 스트랩 기본 내비게이션 바
기본 탐색 표시 줄을 만들 때 주로 다음 단계가 포함됩니다.
1 단계 : 먼저 내비게이션 목록을 기반으로 클래스 이름 "Navbar-Nav"를 추가합니다 (<ul class = "nav">)
2 단계 : 목록 외부에 컨테이너 (div)를 추가하고 클래스 이름 "Navbar"및 "Navbar-Default"를 사용하십시오.
".navbar"스타일의 주요 기능은 왼쪽 및 오른쪽 패딩 및 둥근 모서리의 효과를 설정하는 것이지만 색상과 관련된 스타일은 어떤 식 으로든 설정되지 않습니다.
<div role = "navigation"> <ul> <li> <a href = "##"> 홈 페이지 </a> </a> </li> <li> <## "> 일련의 튜토리얼 </a> </li> <li> <a href ="## "> 유명한 선생님 소개 </a> <li> <a href ="#</> cases </i> <li> <a href = "##"> 우리에 대해 </a> </li> </ul> </div>
3. 부트 스트랩 내비게이션 바에 제목을 추가하십시오
웹 페이지 제작에는 종종 메뉴 앞에 제목이 있습니다 (텍스트 크기는 다른 텍스트보다 약간 큽니다). 실제로 부트 스트랩 프레임 워크는 "Navbar-Header"및 "Navbar-Brand"를 통해 구현되는 모든 사람을 고려해 보았습니다.
<div role = "navigation"> <div> <a href = "##"> 탐색 바 </a> </div> <ul> <li> <ahref = "##"> homepage </a> </li> <li> <a href = "##"> 일련의 자습서 </a> <li> <a href = "#</li <a href =. <li> <a href = "##"> 성공적인 사례 </a> </li> <li> <a href = "##"> 우리 정보 </a> </li> </ul> </div>
4. 부트 스트랩 네비게이션 바 2 차 메뉴
네비게이션 바에 보조 메뉴를 추가하는 것도 매우 쉽습니다.
<div role = "navigation"> <div> <a href = "##"> 탐색 막대 </a> </div> <ul> <li> <## "> 홈페이지 </a> </li> <li> <a href ="## "> data-toggle ="dropdown "> series of tutorials </span> href = "##"> css3 </a >> </li> <li> <a href = "##"> javaScript </a >> </li> <li> <a href = "##"> php </a> </li> </li> </li> <li> <a href = "##"> href = "##"> 성공적인 사례 </a> </li> <li> <a href = "##"> 우리 정보 </a> </li> </ul> </div>
5. 양식이있는 부트 스트랩 탐색 표시 줄
일부 내비게이션 막대에는 검색 양식이 포함되어 있으며 부트 스트랩 프레임 워크에 "Navbar-Form"이 제공됩니다. 이 방법은 사용하기가 매우 간단합니다. Navbar 컨테이너에 Navbar-Form 클래스 이름이있는 양식을 배치하십시오. Navbar-Left”는 양식이 왼쪽에 떠 다니기 위해 정렬을 더 잘 달성 할 수 있도록합니다. 부트 스트랩 프레임 워크에서는 "Navbar-Right"스타일도 제공되어 요소가 네비게이션 막대에서 오른쪽에 정렬 될 수 있도록 제공됩니다.
<div role = "navigation"> <div> <a href = "##"> bootstrap </a> </a> </div> <ul> <li> <a href = "##"> 홈페이지 </a> </li> <li> <a href = "##"> data-toggle = "dropdown"> series </span> </span> href = "##"> css3 </a> </li> <li> <a href = "##"> javaScript </a >> </li> <a href = "##"> php </a> </li> </li> </li> <li> <a href = "##"> </li> </li> </li>> </li> </li> </li> </li> </li> </li> </li> </li> href = "##"> 유명한 교사들에 대한 소개 </a> </a> </li> <li> <a href = "##"> 성공적인 사례 </a> </a> </li> <a href = "##"> 우리 정보 </a> </li> </ul> <form action = "##"rol = "검색"> div> <input type = "텍스트"placehold " <버튼 유형 = "제출"> 검색 </button> </form> </div>
6. 부트 스트랩 내비게이션 바의 버튼, 텍스트 및 링크
Navbar-Brand 및 Navbar-Nav의 UL 및 Navbar 형태의 A 요소를 사용하는 것 외에도 다른 요소는 Bootstrap 프레임 워크의 내비게이션 막대에 사용될 수 있습니다. 프레임 워크는 세 가지 다른 스타일을 제공합니다.
1). 내비게이션 바에 버튼 Navbar-Btn
2). 내비게이션 바 Navbar의 텍스트
3) 네비게이션 막대의 Navbar-link
그러나이 세 가지 스타일은 프레임 워크에 사용될 때 특정 제한 사항이 적용되며 Navbar-Brand 및 Navbar-Nav와 함께 사용해야합니다. 또한 수량에 대한 특정 제한이 있습니다. 일반적으로 1-2 개를 사용할 때는 아무런 문제가 없으며 2를 초과하면 문제가 발생합니다.
<div role = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> navbar text </a> </li> <li> <a href = "##"> navbar text </a> <li> <a href = "##"##"#" <li> <a href = "##"> navbar text </a> </li> </ul> </div> <div role = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <div> <a href = "##"> navbar text </a> <a navbar "avbar"a navbar "avbar"a navbar "a navbar href = "##"> navbar text </a> </div> </div>
7. 부트 스트랩 고정 내비게이션 바
많은 경우에, 디자이너는 내비게이션 바가 브라우저의 상단 또는 하단에 고정되기를 원 하며이 고정 내비게이션 막대의 적용은 모바일 개발에서 더 일반적입니다. 부트 스트랩 프레임 워크는 내비게이션 막대를 수정하는 두 가지 방법을 제공합니다.
.navbar-fixed-top : 내비게이션 바가 브라우저 창의 상단에 고정되어 있습니다.
.navbar-fixed-bottom : 내비게이션 막대는 브라우저 창의 하단에 고정되어 있습니다.
<div role = "Navigation">…… </div> <div> 나는 내용입니다 </div> <div 역할 = "Navigation">… </div>
8. 부트 스트랩 페이지 매김 내비게이션
페이지 번호가 매겨진 페이지 매김 내비게이션은 가장 일반적인 Pagination Navigation 일 수 있습니다. 특히 목록 페이지에 많은 내용이있을 때는 사용자에게 Pagination Navigation 방법을 제공합니다. 일반적으로 많은 학생들은 Div> a 및 div> span 구조를 사용하여 PAGED Navigation을 작성하는 것을 좋아합니다. 그러나 부트 스트랩 프레임 워크에서는 ul> a> a와 같은 구조가 사용되며 Pagination 메소드가 UL 태그에 추가됩니다.
<ul> <li> <a href = "#">«</a> </li> <li> <a href = "#"> 1 </a> </li> <li> <a href = "#"> 2 </a> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"3 </>>> </>> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </a> <li> <a href = "#">»»</a> </li> </ul>
부트 스트랩 프레임 워크에서 여러 가지 상황에서 Pagination 버튼 크기를 설정할 수도 있습니다.
1). "Pagination-LG"를 통해 Pagination Navigation을 더 크게 만듭니다.
2). "Pagination-SM"을 통해 Pagination Navigation을 작게 만드십시오.
<ul>… </ul> <ul>… </ul> <ul>… </ul> <ul>… </ul>
페이지 번호가있는 페이지 탐색을 제공하는 것 외에도 부트 스트랩 프레임 워크는 페이지 회전 탐색을 제공합니다. 이러한 종류의 Pagination Navigation은 종종 개인 블로그, 잡지 웹 사이트 등과 같은 일부 간단한 웹 사이트에서 볼 수 있습니다. 이러한 종류의 Pagination Navigation은 특정 페이지 번호가 표시되지 않으며 "이전 페이지"및 "다음 페이지"버튼 만 제공합니다.
실제로 사용하면 페이지 전환 페이지 매김 내비게이션은 페이지로 코딩 된 페이지 매김 내비게이션과 유사하며 UL 태그에 호출기 클래스를 추가합니다.
<ul> <li> <a href = "#">«이전 페이지 </a> </li> <li> <a href = "#"> 다음 페이지»</a> </li> </ul>
기본적으로 페이지 전환 페이징 내비게이션이 중앙에 표시되지만 때로는 왼쪽에 있고 다른 하나는 오른쪽에 있어야합니다. 부트 스트랩 프레임 워크는 두 가지 스타일을 제공합니다
이전 : "이전"버튼을 남겨 두게하십시오
다음 : 오른쪽에있는 "다음"버튼을 두십시오
<ul> <li> <a href = "#">«이전 페이지 </a> </li> <li> <a href = "#"> 다음 페이지»</a> </li> </ul>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은 부트 스트랩 내비게이션 바에 관한 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.