내비게이션 바는 응답 형 메타 구성 요소입니다. 앱 또는 웹 사이트에서 내비게이션 헤더 역할을합니다.
1. 기본 탐색 표시 줄
모바일 장치에서 내비게이션 바를 접고 (켜고 켜고 꺼질 수 있음) 사용 가능한 뷰포트 너비가 증가함에 따라 수평 확장 모드가됩니다.
접는 모드 및 수평 모드의 임계 값을 사용자 정의하십시오
내비게이션 바에 넣은 길이에 따라 내비게이션 막대의 임계 값을 조정하여 폴드 모드 및 수평 모드로 들어가야 할 수도 있습니다. @grid-float-breakpoint 변수의 값을 변경하거나 자신의 미디어 쿼리 CSS 코드를 추가하여 요구를 달성 할 수 있습니다.
첫 번째 단계 :
가장 바깥 쪽 컨테이너 NAV 태그 및 Nav-Bar 스타일 클래스를 추가하여 네비게이션 바에 속함을 나타냅니다.
<nav 역할 = "내비게이션"> </nav>
효과:
2 단계 : 헤더를 추가하십시오
<nav role = "navigation"> <div> <버튼 유형 = "버튼"data-toggle = "붕괴"data-target = "#bs-example-navbar-collapse-1"> <span> </span> <span> </span> <span> </span> <span> </span> </span> <a href = "a href ="#"#"#"> </nav>
버튼 레이블에는 3 개의 스팬 아이콘이 있습니다. 그런 다음 Navbar-Toggle 스타일 클래스 및 속성 붕괴 (붕괴)를 제공하면 클릭 할 때 대상이 데이터 표시입니다.
창이 어느 정도 좁아지면 오른쪽에 대한 영향이 나타납니다.
3 단계 : 중첩 드롭 다운 메뉴, 양식, 드롭 다운 메뉴.
암호:
<H1> Navigation Bar </h1> <nav 역할 = "navigation"> <div> <버튼 유형 = "버튼"데이터-토글 = "콜랩스"데이터-타겟 = "#bs-example-navbar-collapse-1"> <span> 토글 탐색 </span> <span> </span> <span> </span> </span> </span> </span> < href = "#"> brand </a> </a> </div> <div id = "bs-example-navbar-collapse-1"> <!-중첩 드롭 다운 메뉴-> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#"> 링크 </li> <li> <li> <a href = "#"data-toggle = "dropdown"> 풀다운 <b> </b> </a> <ul> <li> <a href = "#"> action </a> </a> </li> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"</li>> <li>> <li>> <li> <li> <li>> href = "#"> action </a> </a> </li> <li> <a href = "#"> action </a> </a> </a> </a> </li> <li> <a href = "#"> action </a> </a> </li> </li> </li> </ul> <!-중첩 형식-> <form action = ""div ""bulling ""텍스트 ""텍스트 "/> <div> <div> <div> <div> <div> <div> 타입 = "버튼"> 제출 </button> </form> <! -----> </div> </nav>
시사:
내비게이션 바의 접근성을 향상시킵니다
접근성을 향상 시키려면 각 탐색 표시 줄에 Role = "Navigation"을 추가하십시오.
2. 양식
.navbar-form 내에 양식을 배치하면 더 좁은 뷰포트에서 우수한 수직 정렬과 붕괴 상태가됩니다. 정렬 옵션을 사용하여 탐색 표시 줄에 나타나는 위치를 결정하십시오.
Mixin, .navbar-form 및 .form-inline을 사용하여 많은 코드가 공유됩니다.
암호
<form action = ""역할 = "검색"> <div> <입력 유형 = "텍스트"/> </div> <버튼 유형 = "버튼"> 제출 </button> </form>
입력 상자에 레이블 레이블을 추가하십시오
입력 상자에 레이블 태그를 추가하지 않으면 화면 리더에 문제가 발생합니다. 탐색 표시 줄의 양식의 경우 .SR 전용 클래스를 통해 레이블 태그를 숨길 수 있습니다.
3. 버튼
암호:
<버튼 유형 = "버튼"> 로그인 </button>
시사:
4. 텍스트
.navbar-text로 텍스트를 래핑 할 때 <p> 태그는 일반적으로 올바른 라인 간격 및 색상에 사용됩니다.
코드 스 니펫 :
<p> 텍스트 </p>
5. 비 탐색 링크
표준 탐색 구성 요소 외부에 표준 링크를 추가하고 .navbar-link 클래스를 사용하면 링크에 올바른 기본 및 역 색상을 줄 수 있습니다.
코드 스 니펫 :
다음과 같이 코드를 복사하십시오. <p> 이것은 <a href = "#"> link </a> </p>입니다.
6. 구성 요소 정렬
.navbar-left 또는 .navbar-right 도구 클래스를 사용하여 탐색 링크, 양식, 버튼 또는 텍스트를 정렬하십시오. 두 클래스 모두 특정 방향으로 CSS 플로팅 스타일을 사용합니다. 예를 들어, 내비게이션 링크를 정렬하려면 별도의 도구 클래스 <ul>에 배치해야합니다.
이 클래스는 .pull-leff 및 .pull-right의 Mixin 버전이지만 미디어 쿼리로 제한되어 다양한 크기의 화면에서 내비게이션 막대 구성 요소를보다 쉽게 처리 할 수 있습니다.
7. 상단에 고정
.navbar-fixed-top을 추가하면 내비게이션 막대가 상단에 고정 될 수 있습니다. 효과로는 충분하지 않습니다.
바디 태그에 대한 패딩을 설정해야합니다
이 고정 내비게이션 막대는 <body> 위에 패딩을 설정하지 않으면 페이지의 다른 컨텐츠를 가리킬 것입니다. 자신의 값을 사용하거나 아래에 주어진 코드를 사용하십시오. 팁 : 내비게이션 막대의 기본 높이는 50px입니다.
바디 {패딩 탑 : 70px; }
부트 스트랩 CSS의 핵심 파일에 배치해야합니다. (보도 문제)
8. 바닥에서 수정
대신 .navbar-fixed-bottom을 사용하십시오.
바디 태그의 내부 (패딩)를 설정해야합니다
이 고정 내비게이션 바는 <body> 하단에 패딩을 설정하지 않으면 페이지의 다른 컨텐츠를 모호하게합니다. 자신의 값을 사용하거나 아래에 주어진 코드를 사용하십시오. 팁 : 내비게이션 막대의 기본 높이는 50px입니다.
바디 {Padding-Bottom : 70px; }
부트 스트랩 CS의 코어를로드 한 후에는 사용하십시오.
9. 정상에 머물러라
.navbar-static-top을 추가하여 페이지가있는 탐색 표시 줄을 만듭니다. 페이지가 아래로 스크롤함에 따라 사라집니다. .navbar-fixed-* 클래스와 달리 몸에 패딩을 추가 할 필요가 없습니다.
10. 역 색상 탐색 막대
.navbar inverse 클래스를 추가하여 내비게이션 막대의 모양을 변경할 수 있습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은 부트 스트랩 내비게이션 바를 사용하는 방법에 대한 자세한 소개입니다. 모든 사람의 학습에 도움이되기를 바랍니다.