======Bootstrap Navigation Bar====== * description : Bootstrap Navigation Bar * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-29 \\ =====Navigation Bars===== 네비게이션 바는 페이지의 상단에 배치된 네비게이션 헤더입니다.\\ \\ {{:wiki:bootstrap:bootstrap_note:basic-navbar-exmaple.png?600|}}\\ Bootstrap을 사용하면, 화면 크기에 따라 네비게이션 바를 확장 또는 접을 수 있습니다.\\ \\ 표준 네비게이션 바는 ''%%

%%''로 생성됩니다.\\ \\ 하기 예제는 페이지 상단에 네비게이션 바를 추가하는 방법을 보여줍니다.\\ ====예제====

Basic Navbar Example

A navigation bar is a mavigation header that is placed at the top of the page.

\\ **Note:**\\ 이 페이지의 모든 예제는 작은 화면에서 너무 많은 공간을 차지하는 내비게이션 바를 표시합니다.\\ (그러나 내비게이션 바는 부트스트랩이 반응형이기 때문에, 큰 화면에서는 한 줄에 표시됩니다).\\ 이 문제 (작은 화면 포함)는 본 페이지의 마지막 예제에서 해결됩니다.\\ \\ =====Inverted navigation Bar===== 기본 네비게이션 바 스타일이 마음에 들지 않으면, Bootstrap은 대안인 검정색 navbar를 제공합니다.\\ \\ ''%%.navbar-default%%'' 클래스를 ''%%navbar-inverse%%''로 변경하세요\\ ====예제====

Basic Navbar Example

A navigation bar is a mavigation header that is placed at the top of the page.

===Result=== {{:wiki:bootstrap:bootstrap_note:basic-navbar-inverse-exmaple.png?600|}}\\ \\ =====Navigation Bar With Dropdown===== {{:wiki:bootstrap:bootstrap_note:navbarwithdropdown.png?600|}}\\ 네비게이션 바에는 드롭다운 메뉴도 포함될 수 있습니다.\\ \\ 하기 예제는 "페이지 1" 버튼에 대한 드롭다운 메뉴를 추가합니다.\\ ====예제====

Navbar With Dropdown

This exmmple add a dropdown menu for the "Page 1<" button in the navigation bar./jp>

\\ =====Right Aligned Navigation Bar===== {{:wiki:bootstrap:bootstrap_note:rightalignednavbar.png?600|}}\\ ''%%.navbar-right%%'' 클래스는 네비게이션 바 버튼을 오른쪽 정렬하는 데 사용됩니다.\\ \\ 다음 예제에서는, 네비게이션 바 오른쪽에 "등록(Sign Up)" 버튼과 "로그인(Login)" 버튼을 삽입합니다.\\ 또한 두 개의 새로운 버튼 각각에 글리피콘(glyphicon)을 추가합니다.\\

Right Aligned Navbar

The .navbar-right class is used to right-align navigation bar buttons.

\\ =====Navbar Buttons===== {{:wiki:bootstrap:bootstrap_note:navbar-button.png?600|}}\\ 네비게이션 바 내부에 버튼을 추가하기 위해, ''%%.navbar-btn%%'' 클래스를 부트스트랩 버튼에 추가합니다.\\

Navbar Button

Use the Navbar-btn class on a button to vertically align (same padding as links) it inside the navbar.

\\ =====Navbar Forms===== {{:wiki:bootstrap:bootstrap_note:anvbar-form.png?600|}}\\ navbar 내부에 양식 요소(form element)를 추가하려면,\\ ''%%.navbar-form%%'' 클래스를 양식 요소에 추가하고 입력(input)을 추가하십시오.\\ 입력을 보유하는 %%div%% 컨테이너에 ''%%.form-group%%'' 클래스를 추가했습니다.\\ 이렇게 하면 입력이 두 개 이상인 경우 적절한 패딩이 추가됩니다.\\ ====예제==== \\ ====예제====

Navbar Forms

Use the .navbar-form class to vertically align form elements (same padding as links) insdie the navbar.

\\ ''%%.input-group%%'' 및 ''%%.input-group-addon%%'' 클래스를 사용하여,\\ 입력 필드 옆에 아이콘이나 도움말 텍스트를 첨부할 수도 있습니다.\\ 이러한 클래스에 대한 자세한 내용은 Bootstrap Inputs 챕터에서 배울 것입니다.\\

Navbar Forms

Use the .navbar-form class to vertically align form elements ( same padding as links) insdie the navba

The .input-group class is a container to enhance an input by addng an icon, text or a button in front or behind it as a "help text".

The .input-group-btn class attaches a button to an input field. This ks often used as a search bar;

\\ ===Result=== {{:wiki:bootstrap:bootstrap_note:navbar-forms.png?600|}}\\ \\ =====Navbar Text===== ''%%.navbar-text%%'' 클래스를 사용하여, 링크가 아닌 navbar 내부의 모든 요소를 수직 정렬합니다.\\ (적절한 패딩 및 텍스트 색상 보장).\\ ====예제====

Navbar Text

Use the .navbar-text class to vertical align any elements insdie the navbar that are not links.(ensures proper padding).

\\ ===Result=== {{:wiki:bootstrap:bootstrap_note:navbar-text.png?600|}}\\ \\ =====Fixed Navigation Bar===== 네비게이션 바는 페이지 상단이나 하단에 고정할 수도 있습니다.\\ \\ 고정 네베게이션 바는 페이지 스크롤과 관계없이 고정된 위치 (상단 또는 하단)에 계속 표시됩니다.\\ \\ {{:wiki:bootstrap:bootstrap_note:navbar-fixed-top.png?600|}}\\ ''%%.navbar-fixed-top%%'' 클래스는 상단에 네비게이션 바가 고정되게 합니다.\\ ====예제====

Fixed Navbar

A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.

Scroll this page to see the effect

\\ ''%%.navbar-fixed-bottom%%'' 클래스는 네비게이션 바를 하단에 고정되게 합니다.\\ ====예제====

Fixed Bottom Navbar

The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.

\\ =====Collapsing The Navigation Bar===== 네비게이션 바는 작은 화면에서 때로는 너무 많은 공간을 차지합니다.\\ \\ 네비게이션 바를 숨기고, 필요할 경우에만 보이게 합니다.\\ \\ 하기 예제에서, 네비게이션 바는 상단 우측 모서리의 버튼으로 대체됩니다.\\ 버튼을 클릭할 때에만, 네비게이션 바가 표시됣니다.\\ {{:wiki:bootstrap:bootstrap_note:collapsiblenavbar.png?600|}}\\ ====예제====

Collapsible Navbar

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.