Bootstrap3는 자체 내비게이션 바를 만듭니다

내비게이션 바는 좋은 기능이며 Bootstrap 웹 사이트의 두드러진 기능입니다. 내비게이션 바는 응용 프로그램 또는 웹 사이트의 탐색 제목 역할을하는 응답 형 메타 구성 요소입니다. 모바일 장치의 모습에서 내비게이션 막대가 무너지고 사용 가능한 뷰포트 너비가 증가함에 따라 내비게이션 바가 수평으로 확장됩니다. Bootstrap Navigation Bar의 핵심에 내비게이션 바에는 사이트 이름의 스타일 정의 및 기본 탐색이 포함되어 있습니다.

기본 탐색 표시 줄을 생성하는 단계는 다음과 같습니다.

• 클래스 .navbar, .navbar-default (흰색의 검은 글자), <avbar inverse (검은 색) <avbar inverse (검은 색 문자)에 <avbar-default (검은 색 문자)를 추가하십시오.
• 위의 요소에 Role = "Navigation"을 추가하면 접근성을 높이는 데 도움이됩니다.
• 클래스 Navbar-Brand의 <a> 요소가 포함 된 <div> 요소에 제목 클래스 .Navbar-Header를 추가하십시오. 텍스트가 더 크게 보일 것입니다.

탐색 표시 줄에 링크를 추가하려면 클래스 .nav, .navbar-nav와 함께 정렬되지 않은 목록을 추가하십시오.

다음 예제는 bootstrap3을 사용하여 만든 내비게이션 바를 공유합니다. 특정 내용은 다음과 같습니다

예를 들어

Google

와이보

그러한 편리한 구성 요소를 작성하는 방법

bootstrap3를 사용하십시오!

직접 알려주세요

일반적으로 내비게이션은 다음 구조로 배치됩니다.

 <nav rober = "navigation"> <div> <div> <a href = "#"> <img src = "..."> </a> </div> </div> </nav>

1. NAV 태그

첫 번째 클래스에서는 Navbar가 필요합니다. 다른 속성은 선택 사항입니다.

Navbar-Default를 추가하면 가장 기본적인 탐색이 생성되며 색상이 투명한 곳에서는 고정되지 않습니다.

검은 색으로 돌려서 Navbar Inverse 클래스의 색상을 추가하십시오.

상단에 고정하려면 Navbar-Fixed-Top을 추가하고 Navbar Fixed-Bottom을 추가하여 바닥에 고정하십시오.

Navbar-Static-Top을 추가하는 효과는 다음과 같습니다

<div>

예를 들어 웹 사이트 로그, 홈페이지를 클릭하거나 웹 사이트 이름을 클릭하십시오.

효과는 위와 같습니다

여기에서 텍스트로 변경할 수 있다면 효과가 더 좋을 것 같습니다.

2. 양식

검색, 로그인 등과 같은 내비게이션에 양식 추가가 일반적입니다.

예를 들어, 위의 검색

 <양식 역할 = "검색"> <div> <입력 유형 = "텍스트"자리 표시기 = "검색"> </div> <버튼 유형 = "제출"> 검색 </button> </form>

Navbar-Left 클래스 가이 양식을 왼쪽에 위치시킬 것이라고 설명합니다.

물론 Navbar Right 클래스도 있습니다

마찬가지로 버튼을 다음과 같이 추가 할 수 있습니다

<버튼 유형 = "버튼"> 로그인 </button>

텍스트를 다음과 같이 추가 할 수 있습니다

<p> Mark Otto로 사인

이렇게 링크를 추가 할 수 있습니다

<p> <a href = "#"> Mark Otto </a> </a>로 서명했습니다

이런 식으로 Navbar Right 또는 Navbar-Left 클래스를 추가 할 수 있습니다.

내 탐색

 <!-navigation-> <div> <div id = "navcontainer"> <nav 역할 = "navigation"> <div> <div> a href = "#"> xiansheng library </a> </div> <form 역할 = "search"> <div> <입력 유형 = "text"search "> <버튼 유형 = <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>. <li> <a data-toggle = "modal"data-target = "#register"> 레지스터 </a> </li> <li> <data-toggle = "modal"data-target = "#signin"> login </a> </li> </ul> </div> </div> </div> </div> </div>

효과는 다음과 같습니다

자세한 내용은 학습에 대한 기사를 참조하십시오.

부트 스트랩은 기본 탐색 막대 효과를 구현합니다

부트 스트랩은 매일 배워야합니다 (ii)

부트 스트랩은 매일 추가 내비게이션 (affix) 플러그인을 배워야합니다

부트 스트랩에 대한 더 많은 내용은 특별 주제에서도 찾을 수 있습니다 : "Bootstrap Learning Tutorial"

위는 Bootstrap3을 사용하여 만든 탐색 막대입니다. 모든 사람의 학습에 도움이되기를 바랍니다.