부트 스트랩 프레임 워크에서 내비게이션은 내비게이션 구성 요소로 독립적입니다. 다른 버전에 따르면 해당 소스 코드를 찾을 수 있습니다.
덜 : Navs.less
Sass : _navs.scss
탭 탐색이라고도하는 태그 모양의 탐색
태그 모양의 탐색은 .NAV-TABS 스타일을 통해 구현됩니다. 태그 모양의 내비게이션을 만들 때 원래 탐색 클래스 이름 .nav로 클래스 이름 .NAV-TAB를 컨테이너에 추가해야합니다.
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation 제목 5 </a> </li> </ul>
원칙:
디스플레이 메뉴 항목은 블록에 li를 켜고 같은 수준으로 배열 한 다음 비 높은 조명 메뉴의 스타일 및 마우스 서스펜션 효과를 정의하십시오.
.nav-tabs {border-bottom : 1px solid #ddd;}. nav-tabs> li {float : left; 마진-바닥 : -1px;}. nav-tabs> a {margin-right : 2px; line-height : 1.42857143; Border : 1px solid transparent; rether : 4px 4px 0;}. > A : 호버 {Border-Color : #eee #eee #ddd;}일반적으로 탭에는 현재 선택된 항목이 있으므로 클래스 이름을 추가하면 (LI) 태그에 Active를 추가하면됩니다.
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation 제목 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.Active> a : 호버, .nav-tabs> li.Active> a : focus {color : #555; 커서 : 기본값; 배경색 : #fff; 국경 : 1px Solid #ddd; 국경-바닥 색조 : 투명한;}현재 옵션 외에도 일부 탭에는 장애인 상태도 있습니다. 이 효과를 달성하려면 태그 항목에 비활성화 된 클래스 이름을 추가하십시오.
.nav> li.disabled> a {color : #999;}. nav> li.disabled> a : hover, .nav> li.disabled> a : focus {color : #999; 텍스트 결정 : 없음; 커서 : 말도 안됩니다. 배경색 : 투명;}컨텐츠를 전환하려면 메뉴 항목을 클릭하는 효과를 얻으려면 JS 플러그인과 협력해야합니다.
캡슐 (알약) 내비게이션
현재 둥근 코너 효과로 강조 표시되며 구현 방법은 탭 내비게이션과 유사하며 동일한 구조로 클래스 이름 .nav-tabs를 클래스 이름 .nav-pills로 바꾸면됩니다.
.nav-pills> li {float : left;}. nav-pills> a {border-radius : 4px;}. nav-pills> li + li {margin-left : 2px;}. nav-pills> li.active> a : hover, .nav-pills> li.active> a : focus {color : #fff; 배경색 : #428BCA;}수직 스택 내비게이션
수평 내비게이션 외에도 수직 내비게이션도 있습니다. 수직 스택 내비게이션을 만들려면 .nav-pills를 기준으로 클래스 이름 .nav 스택 된 클래스 이름 만 추가하면됩니다.
캡슐 내비게이션과 비교할 때, 가장 중요한 것은 내비게이션 항목을 떠 다니지 않고 수직으로 정리 한 다음 인접한 내비게이션 항목에 대한 특정 간격을 남기는 것입니다.
.nav-stacked> li {float : none;}. nav-stacked> li + li {margin-top : 2px; Margin-Left : 0;} <ul> <li> <a href = "#"> 탐색 제목 0 </a> </a> </li> <li> a href = "#"> 내비게이션 제목 1 </a> </li> <li> <a href = "#"> 탐색 제목 2 </a> <li> <a href = "#"#"#"#"avigation 3 </a> </a> </a> </a> </li> href = "#"> 탐색 제목 4 </a> </li> <li> <a href = "#"> 탐색 제목 5 </a> </li> </ul>수직 스태킹 내비게이션은 드롭 다운 메뉴 그룹과 그룹 사이의 분할 라인과 같으며 탐색 항목 사이에 분할 라인도 있습니다. 내비게이션 항목 사이에 <li class = "divider"> </li>를 추가하십시오.
<ul> <li> <a href = "#"> 내비게이션 제목 0 </a> </li> <li> <a href = "#"> 내비게이션 제목 1 </a> </li> <li> <a href = "#"> 탐색 제목 2 </a> </li> <li> </li> <li> <a href = "#"> 내비게이션 3 </a> </a> </a> "#" href = "#"> 탐색 제목 4 </a> </li> <li> <a href = "#"> 탐색 제목 5 </a> </li> </ul>
.nav .nav-divider {높이 : 1px; 마진 : 9px 0; 오버플로 : 숨겨진; 배경색 : #e5e5e5;}적응 형 내비게이션
적응 형 내비게이션은 컨테이너의 전체 너비를 차지하는 내비게이션을 말하며 메뉴 항목은 테이블 셀의 너비에 적응할 수 있습니다. 적응 형 내비게이션은 앞에서 언급 한 .btn-group-Justified의 적응 형 버튼 구성 요소와 동일하지만 적응 형 탐색을 만들 때 .nav-Justified 클래스 이름은 .nav-tab 또는 .nav-pills와 함께 사용해야합니다.
원칙:
목록 UL에서 너비를 100%로 설정 한 다음 디스플레이를 설정하십시오. 각 메뉴 항목의 테이블 세포 Li를 설정하여 목록이 테이블 셀의 형태를 시뮬레이션합니다.
.nav-Justified {너비 : 100%;}. Nav-Justified> li {float : none;}. nav-Justified> a {margin-bottom : 5px; Text-Align : Center;}. Nav-Justified> .Dropdown .Dropdown-Menu {Top : Auto; 왼쪽 : auto;}@media (min-width : 768px) {.nav-Justified> li {display : table-cell; 너비 : 1%; } .nav-Justified> li> a {마진 바닥 : 0; }}위의 미디어 쿼리 조건이 있습니다. @Media (min-width : 768px) {... ...}는 브라우저 창 너비가 768px보다 큰 경우에만 적응 형 내비게이션을 위의 스타일에만 표시 할 수 있지만 브라우저 창 너비가 768px 미만인 경우 아래 스타일로 표시됩니다.
.nav-tabs와 .nav-Justified가 함께 사용되므로 적응 형 탭 탐색을 의미합니다. 브라우저 창 너비가 768px 미만인 경우 스타일로 추가 처리가 수행됩니다.
.nav-tabs.nav-Justified {너비 : 100%; Border-Bottom : 0;}. nav-tabs.nav-Justified> li {float : none;}. nav-tabs.nav-Justified> a {margin-bottom : 5px; Text-Align : Center;}. nav-tabs.nav-Justified> .Dropdown .dropdown-menu {top : auto; 왼쪽 : auto;}@media (min-width : 768px) {.nav-tabs.nav-Justified> li {display : table-cell; 너비 : .active> a : hover, .nav-tabs.nav-Justified> .active> a : hover, .nav-tabs.nav-Justified> a : focus {border : 1px solid #ddd;}@media (minwidth : 768px) {.nav-tabs.nav-justified> a a a a a a a a a a a a a a a a a a minwidth : 768px)}; Border-Radius : 4px 4px 0 0; } .nav-tabs.nav-Justified> .active> a, .nav-tabs.nav-Justified> .active> a : hover, .nav-tabs.nav-Justified> .active> a : Focus {Border-Bottom-Color : #fff; }}내비게이션 플러스 풀다운 메뉴 (보조 탐색)
보조 탐색을 만들려면 Li를 모 컨테이너로만 사용하면 클래스 이름을 사용하고 Li의 다른 UL 목록을 중첩하십시오.
<ul> <li> <a href = "#"> 탐색 메뉴1 </a> </li> <li> <a href = "#"> 탐색 메뉴 2 </a> </li> <li> <a href = "#"> 탐색 메뉴 3 </a> </li> <li> <avigation menu4 </li> <li> <a avigation 메뉴 4 </a> </li> <li> <adata-toggle = "dropdown"> 탐색 메뉴 5 <Span> </span> </a> <ul> <li> <a href = "#"> 드롭 다운 메뉴 1 </a> <li> <a href = "#"> 드롭 다운 메뉴 2 </li> <li> <li> <a href = "#"> 드롭 다운 메뉴 4 </a> </li> </li> </li> <li> <a href = "#"> 탐색 메뉴 6 </a> </li> </ul>
Breadcrumb Navigation
빵 부스러기는 일반적으로 내비게이션에 사용되며 주요 기능은 사용자에게 페이지의 현재 위치를 알려주는 것입니다. Breadcrumbs는 또한 부트 스트랩 프레임 워크의 독립적 인 모듈 구성 요소입니다.
덜 : 빵 부스러기
Sass : _breadcrumbs.scss
<ol> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> 내 책 </a> </li> <li> 그림 CSS </li> </ol>
.Breadcrumb {패딩 : 8px 15px; 마진-바닥 : 20px; 목록 스타일 : 없음; 없음; 배경 색 : #f5f5f5; Border-Radius : 4px;}. Breadcrumb> li {display : inline-block;}. Breadcrumb> li + li : 0 패드 : 0 5px;}; .Active {색상 : #999;}위의 Li+Li : Li+Li : Li와 Li 사이의 분리기를 구현하기 전에. 이 솔루션은 IE의 하위 버전에서 지원되지 않습니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.