문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Navigation Bar======
<WRAP left notice 80%>
  * description : Bootstrap Navigation Bar
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-29
</WRAP>
<WRAP clear></WRAP>
\\
=====Navigation Bars=====
네비게이션 바는 페이지의 상단에 배치된 네비게이션 헤더입니다.\\
\\
{{:wiki:bootstrap:bootstrap_note:basic-navbar-exmaple.png?600|}}\\
Bootstrap을 사용하면, 화면 크기에 따라 네비게이션 바를 확장 또는 접을 수 있습니다.\\
\\
표준 네비게이션 바는 ''%%<nav class = "navbar navbar-default">%%''로 생성됩니다.\\
\\
하기 예제는 페이지 상단에 네비게이션 바를 추가하는 방법을 보여줍니다.\\
====예제====
<HTML>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Web Site Name</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <h3>Basic Navbar Example</h3>
        <p>A navigation bar is a mavigation header that is placed at the top of the page.</p>
    </div>
</body>
</HTML>
\\
**Note:**\\
이 페이지의 모든 예제는 작은 화면에서 너무 많은 공간을 차지하는 내비게이션 바를 표시합니다.\\ 
(그러나 내비게이션 바는 부트스트랩이 반응형이기 때문에, 큰 화면에서는 한 줄에 표시됩니다).\\ 
이 문제 (작은 화면 포함)는 본 페이지의 마지막 예제에서 해결됩니다.\\
\\
=====Inverted navigation Bar=====
기본 네비게이션 바 스타일이 마음에 들지 않으면, Bootstrap은 대안인 검정색 navbar를 제공합니다.\\
\\
''%%.navbar-default%%'' 클래스를 ''%%navbar-inverse%%''로 변경하세요\\
====예제====
<HTML>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Web Site Name</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <h3>Basic Navbar Example</h3>
        <p>A navigation bar is a mavigation header that is placed at the top of the page.</p>
    </div>
</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:basic-navbar-inverse-exmaple.png?600|}}\\
\\
=====Navigation Bar With Dropdown=====
{{:wiki:bootstrap:bootstrap_note:navbarwithdropdown.png?600|}}\\
네비게이션 바에는 드롭다운 메뉴도 포함될 수 있습니다.\\
\\
하기 예제는 "페이지 1" 버튼에 대한 드롭다운 메뉴를 추가합니다.\\
====예제====
<HTML>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 1<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h3>Navbar With Dropdown</h3>
        <jp>This exmmple add a dropdown menu for the "Page 1<" button in the navigation bar./jp>
    </div>
</body>
</HTML>
\\
=====Right Aligned Navigation Bar=====
{{:wiki:bootstrap:bootstrap_note:rightalignednavbar.png?600|}}\\
''%%.navbar-right%%'' 클래스는 네비게이션 바 버튼을 오른쪽 정렬하는 데 사용됩니다.\\
\\
다음 예제에서는, 네비게이션 바 오른쪽에 "등록(Sign Up)" 버튼과 "로그인(Login)" 버튼을 삽입합니다.\\ 
또한 두 개의 새로운 버튼 각각에 글리피콘(glyphicon)을 추가합니다.\\
<HTML>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 1<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h3>Right Aligned Navbar</h3>
        <p>The .navbar-right class is used to right-align navigation bar buttons.</p>
    </div>
</body>
</HTML>
\\
=====Navbar Buttons=====
{{:wiki:bootstrap:bootstrap_note:navbar-button.png?600|}}\\
네비게이션 바 내부에 버튼을 추가하기 위해, ''%%.navbar-btn%%'' 클래스를 부트스트랩 버튼에 추가합니다.\\
<HTML>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link01</a></li>
                <li><a href="#">Link02</a></li>
            </ul>
            <button class="btn btn-danger navbar-btn">Button</button>
        </div>
    </nav>
    <div class="container">
        <h2>Navbar Button</h2>
        <p>Use the Navbar-btn class on a button to vertically align (same padding as links) it inside the navbar.</p>
    </div>
</body>
</HTML>
\\
=====Navbar Forms=====
{{:wiki:bootstrap:bootstrap_note:anvbar-form.png?600|}}\\
navbar 내부에 양식 요소(form element)를 추가하려면,\\ 
''%%.navbar-form%%'' 클래스를 양식 요소에 추가하고 입력(input)을 추가하십시오.\\
입력을 보유하는 %%div%% 컨테이너에 ''%%.form-group%%'' 클래스를 추가했습니다.\\ 
이렇게 하면 입력이 두 개 이상인 경우 적절한 패딩이 추가됩니다.\\
====예제====
<HTML>

</HTML>
\\
====예제====
<HTML>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 01</a></li>
      <li><a href="#">Page 02</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" name="search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>
<div class="container">
  <h3>Navbar Forms</h3>
  <p> Use the .navbar-form class to vertically align form elements (same padding as links) 
      insdie the navbar.</p>
</div>

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

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
            </ul>
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="search">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </nav>
    <div class="container">
        <h3>Navbar Forms</h3>
        <p>Use the .navbar-form class to vertically align form elements ( same padding as links) insdie the navba</p>
        <p>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".</p>
        <p>The .input-group-btn class attaches a button to an input field. This ks often used as a search bar;</p>
    </div>
</body>
</HTML>
\\
===Result===
{{:wiki:bootstrap:bootstrap_note:navbar-forms.png?600|}}\\
\\
=====Navbar Text=====
''%%.navbar-text%%'' 클래스를 사용하여, 링크가 아닌 navbar 내부의 모든 요소를 수직 정렬합니다.\\
(적절한 패딩 및 텍스트 색상 보장).\\
====예제====
<HTML>
<body>

<nav class="navbar navbar-inverse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <p class="navbar-text">Some text</p>
</nav>
    
<div class="container">
  <h3>Navbar Text</h3>
  <p>Use the .navbar-text class to vertical align any elements insdie the navbar that are not links.(ensures proper padding).</p> 
</div>

</body>
</HTML>
\\
===Result===
{{:wiki:bootstrap:bootstrap_note:navbar-text.png?600|}}\\
\\
=====Fixed Navigation Bar=====
네비게이션 바는 페이지 상단이나 하단에 고정할 수도 있습니다.\\
\\
고정 네베게이션 바는 페이지 스크롤과 관계없이 고정된 위치 (상단 또는 하단)에 계속 표시됩니다.\\
\\
{{:wiki:bootstrap:bootstrap_note:navbar-fixed-top.png?600|}}\\
''%%.navbar-fixed-top%%'' 클래스는 상단에 네비게이션 바가 고정되게 합니다.\\
====예제====
<HTML>
<body style="height:1500px;">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">page 3</a></li>
            </ul>
            <!-- Search Box -->
            <div class="nav navbar-nav navbar-left">
                <form class="navbar-form" action="/action_page.php">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="search">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <div class="container" style="margin-top: 50px;">
        <h3>Fixed Navbar</h3>
        <div clas="row">
            <div class="col-md-4">
                <p>A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.</p>
                <p>A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.</p>
            </div>
            <div class="col-md-4">
                <p>A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.</p>
                <p>A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.</p>
            </div>
            <div class="col-md-4">
                <p>A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.</p>
                <p>A fixed navigation bar style visible in a fixed position (top or bottom) independent of the page scroll.</p>
            </div>
        </div>
        <h2>Scroll this page to see the effect</h2>
    </div>
</body>
</HTML>
\\
''%%.navbar-fixed-bottom%%'' 클래스는 네비게이션 바를 하단에 고정되게 합니다.\\
====예제====
<HTML>
<body>

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Fixed Bottom Navbar </h3>
    <div class="row">
      <div class="col-md-3">
        <p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
      </div>
      <div class="col-md-3">
        <p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
      </div>
      <div class="col-md-3">
        <p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
      </div>
      <div class="col-md-3">
        <p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
      </div>
      <div class="clearfix visible-lg"></div>
    </div>
</div>
</body>
</HTML>
\\
=====Collapsing The Navigation Bar=====
네비게이션 바는 작은 화면에서 때로는 너무 많은 공간을 차지합니다.\\
\\
네비게이션 바를 숨기고, 필요할 경우에만 보이게 합니다.\\
\\
하기 예제에서, 네비게이션 바는 상단 우측 모서리의 버튼으로 대체됩니다.\\
버튼을 클릭할 때에만, 네비게이션 바가 표시됣니다.\\
{{:wiki:bootstrap:bootstrap_note:collapsiblenavbar.png?600|}}\\
====예제====
<HTML>
<body>

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Page 1-1</a></li>
                            <li><a href="#">Page 1-2</a></li>
                            <li><a href="#">Page 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <h3>Collapsible Navbar</h3>
        <p>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).</p>
        <p>Only when the button is clicked, the navigation bar will be displayed.</p>
    </div>

</body>
</HTML>





{{tag>오션 Bootstrap Navbar, Navigation bar}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
