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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Tabs and Pills======
<WRAP left notice 80%>
  * description : Bootstrap Tabs and Pills
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-29
</WRAP>
<WRAP clear></WRAP>
\\
=====Menus=====
대부분의 웹 페이지에는 일종의 메뉴가 있습니다.\\
\\
%%HTML%%에서, 메뉴는 종종 아래와 같이 정렬되지 않은 목록 ''%%<ul>%%''(그리고 나중에 스타일이 지정됨)에서 정의됩니다.\\
\\
<HTML>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</HTML>
\\
상기 목록의 가로 메뉴를 만들고 싶은 경우, ''%%<ul>%%''에 ''%%.list-inline%%'' 클래스를 추가하세요.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Inline List</h3>
        <ul class="list-inline">
            <li><a href="#">>Home</a></li>
            <li><a href="#">>menu 1</a></li>
            <li><a href="#">>Menu 2</a></li>
            <li><a href="#">>Menu 3</a></li>
        </ul>
    </div>
</body>
</HTML>
\\
또는 Bootstraps의 Tabs 및 Pills을 사용하여 위의 메뉴를 표시할 수 있습니다 (아래 참조).\\
\\
**Note:**\\
Tabs와 Pill을 토글/동적(toggleable/dynamic)으로 만드는 방법을 알아 보려면 이 페이지의 마지막 예를 참조하십시오.\\
\\
=====Tabs=====
{{:wiki:bootstrap:bootstrap_note:tabs.png?600|}}\\
탭은 ''%%<ul class = "nav nav-tabs">%%''으로 생성됩니다.\\
\\
**Tips:** 또한 ''%%<li class = "active">%%''으로 현재 페이지를  표시하십시오.\\
\\
다음 예제는 네비게이션 탭(Navigation Tabs)을 만듭니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Tabs</h3>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</body>
<HTML>
\\
=====Tabs With Dropdown Menu=====
Tabs는 드롭다운 메뉴를 포함할 수도 있습니다.\\
\\
다음 예제는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Tabs With Dropdown Menu</h3>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Submenu 1-1</a></li>
                    <li><a href="#">Submenu 1-1</a></li>
                    <li><a href="#">Submenu 1-1</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:tabs-with-dropdown-menu.png?600|}}\\
=====Pills=====
{{:wiki:bootstrap:bootstrap_note:pills.png?600|}}\\
Pills는 ''%%<ul class = "nav nav-pills">%%''으로 생성됩니다. 또한 현재 페이지를 ''%%<li class = "active">%%''로 표시합니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Pills</h3>
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</body>
</HTML>
\\
=====Vertical Pills=====
{{:wiki:bootstrap:bootstrap_note:verticalpills.png?600|}}\\
Pills를 세로로 표시할 수도 있습니다. ''%%.nav-stacked%%'' 클래스만 추가하면 됩니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Vertical Pills</h3>
        <p>Use the .nav-stacked class to vertically stack pills:</p>
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</body>
</HTML>
\\
=====Vertical Pills in a Row=====
{{:wiki:bootstrap:bootstrap_note:verticalpill.png?600|}}\\
하기 예제에서는 마지막 컬럼 안에 세로 pill 메뉴를 배치합니다. 따라서 큰 화면에서는 메뉴가 오른쪽에 표시됩니다.\\
그러나 작은 화면에서는 콘텐츠가 자동으로 단일 컬럼 레이아웃으로 조정됩니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Vertival Pills</h3>
        <div class="row">
            <div class="col-md-3">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae itaque, repellendus ducimus excepturi molestias laudantium.</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nemo doloribus dolor? Laborum?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, tempore labore.</p>
            </div>
            <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">Nome</a></li>
                    <li><a href="#">Menu 1</a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</HTML>
\\
=====Pills With Dropdown Menu=====
{{:wiki:bootstrap:bootstrap_note:pillswithdropdownmenu.png?600|}}\\
Pills는 드롭다운 메뉴를 포함 할 수도 있습니다.\\
\\
다음 예제는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Pills With Dropdown Menu</h3>
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Submenu 1-1</a></li>
                    <li><a href="#">Submenu 1-2</a></li>
                    <li><a href="#">Submenu 1-3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</body>
</HTML>
\\
=====Centered Tabs and Pills=====
{{:wiki:bootstrap:bootstrap_note:centeredtabs.png?600|}}\\
tabs와 pills을 중앙/정렬하려면 ''%%.nav-justified%%'' 클래스를 사용하십시오.\\
\\
768px보다 작은 화면에서는, 목록 항목이 누적됩니다 (콘텐츠는 중앙에 유지됨).\\
====예제====
<HTML>
<body>
    <div class="container">
        <h3>Centered Tabs</h3>
        <p>To center/justify the tabs and pills, use the .nav-justified class. Note that on screens that are smaller than 768px, the list items are stacked (content will remain centered).</p>
        <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
        <br>
        <h3>Centered Pills</h3>
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</body>
</HTML>
\\
=====Toggleable / Dynamic Tabs=====
{{:wiki:bootstrap:bootstrap_note:dynamictabs.png?600|}}\\
탭을 토글 가능하게 하려면, 각 링크에 ''%%data-toggle = "tab"%%'' 속성을 추가하십시오.\\
그런 다음 모든 탭에 대해서 고유 ID가 있는 ''%%.tab-pane%%'' 클래스를 추가하고\\ 
''%%.tab-content%%'' 클래스를 사용하여 <div> 요소 내부에서 tabs을 감쌉니다.\\
\\
tabs를 클릭할 때 tabs이 페이드 인(fade in) 및 페이드 아웃(fade out) 되도록 하려면,\\
''%%.tab-pane%%''에 ''%%.fade%%'' 클래스를 추가하십시오.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h2>Dynamic Tabs</h2>
        <p>
            To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class
            .tab-content.
        </p>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
            <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>HOME</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, unde.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, explicabo.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, enim.</p>
            </div>
        </div>
    </div>
</body>
</HTML>
\\
=====Toggleable / Dynamic Pills=====
pills에도 동일한 코드가 적용됩니다. data-toggle 속성만 ''%%data-toggle = "pill"%%''로 변경하십시오.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h2>Dynamic Pills</h2>
        <p>
            To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class
            .tab-content.
        </p>
        <ul class="nav nav-pills">
            <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
            <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
            <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>HOME</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, unde.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, explicabo.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, enim.</p>
            </div>
        </div>
    </div>
</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dynamicpill.png?600|}}\\




{{tag>오션 Bootstrap Tabs and Pills}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
