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

사용자 도구

사이트 도구

현재 위치: start » wiki » bootstrap » bootstrap_note » bs_navbars
wiki:bootstrap:bootstrap_note:bs_navbars

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:bootstrap:bootstrap_note:bs_navbars [2021/03/29 14:31]
emblim98 		wiki:bootstrap:bootstrap_note:bs_navbars [2023/01/13 18:44] (현재)
줄 173: 줄 173:
 \\ \\
 =====Navbar Forms===== =====Navbar Forms=====
 +{{:wiki:bootstrap:bootstrap_note:anvbar-form.png?600|}}\\
 navbar 내부에 양식 요소(form element)를 추가하려면,\\  navbar 내부에 양식 요소(form element)를 추가하려면,\\ 
 ''%%.navbar-form%%'' 클래스를 양식 요소에 추가하고 입력(input)을 추가하십시오.\\ ''%%.navbar-form%%'' 클래스를 양식 요소에 추가하고 입력(input)을 추가하십시오.\\
줄 184: 줄 185:
 ====예제==== ====예제====
 <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> </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}} {{tag>오션 Bootstrap Navbar, Navigation bar}}
/volume1/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_navbars.1616995902.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki