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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Dropdowns======
<WRAP left notice 80%>
  * description : Bootstrap Panels
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-26
</WRAP>
<WRAP clear></WRAP>
\\
=====Basic Dropdown=====
드롭다운 메뉴는 사용자가 사전 정의된 목록에서 하나의 값을 선택할 수 있는 토글가능한(toggleable) 메뉴입니다.\\
====예제====
<HTML>
    <!-- .container>h2+(p*3)+div.dropdown>(button>span.caret)+ul>(li>a)*3 -->
    <div class="container">
        <h2>Dropdowns</h2>
        <p>The .dropdown class is used to indicate a dropdown menu.</p>
        <p>Use the .dropdown-menu class to atually build the dropdown menu.</p>
        <p>
            To open the dropdwon menu, use a button or a link whti a class of .dropdown-toggle and data-toggle="dropdown".
        </p>

        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dropdowns.png?600|}}\\
====예제 설명====
''%%.dropdown%%'' 클래스는 드롭다운 메뉴를 나타냅니다.\\
\\
드롭 다운 메뉴를 열려면 ''%%.dropdown-toggle%%'' 클래스와 ''%%data-toggle = "dropdown"%%'' 속성이 있는 버튼 또는 링크를 사용합니다.\\
\\
''%%.caret%%'' 클래스는 버튼이 드롭다운임을 나타내는 캐럿 화살표 아이콘을 만듭니다.\\
\\
드롭다운 메뉴를 실제로 빌드하려면 ''%%.dropdown-menu%%'' 클래스를 ''%%<ul>%%'' 요소에 추가하십시오.\\
\\
=====Dropdown Divider=====
''%%.divider%%'' 클래스는 얇은 가로 테두리로 드롭다운 메뉴 내의 링크를 분리하는 데 사용됩니다:\\
====예제====
<HTML>
<body>
    <!-- .container>h2+p+div.dropdown>(button.class>span)+(ul>(li>a)*5) -->
    <div class="container">
        <h2>Dropdowns</h2>
        <p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavScript</a></li>
                <li class="divider"></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>
</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dropdown-divider.png?600|}}\\
\\
=====Dropdown Header=====
드롭다운 메뉴 내부에 헤더를 추가하기 위해 ''%%.dropdown-header%%'' 클래스를 사용합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Dropdowns</h2>
        <p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tutorials<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Dropdown Header 01</li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdown Header 02</li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dropdown-header.png?600|}}\\
\\
=====Disable and Active items=====
''%%.active%%'' 클래스로 특정 드롭다운 항목을 강조 표시 합니다(파란색 배경색 추가).\\
\\
드롭다운 메뉴에서 항목을 비활성화 하려면 ''%%.disabled%%'' 클래스를 사용합니다(마우스 오버 시 밝은 회색 텍스트 색상과 "주차 금지"아이콘이 표시됨):\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Dropdowns</h2>
        <p>the .active class adds a blue background color to the active link.</p>
        <p>The .disabled class disables a dropdown item (grey text color).</p>
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tutorials<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Normal</a></li>
                <li class="disabled"><a href="#">Disabled</a></li>
                <li class="active"><a href="#">Active</a></li>
                <li><a href="#">Normal</a></li>
            </ul>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dropdown-active-disable.png?600|}}\\
\\
=====Dropdown Position=====
드롭다운을 오른쪽 정렬하려면 ''%%.dropdown-menu%%''를 가진 요소에 ''%%.dropdown-menu-right%%'' 클래스를 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Dropdowns</h2>
        <p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:</p>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dropdown-menu-right.png?600|}}\\
\\
=====Dropup=====
드롭다운 메뉴를 아래쪽이 아닌 위쪽으로 확장하려면, %%class = "dropdown"%%이 있는 %%<div>%% 요소를''%%"dropup"%%''으로 변경합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Dropdowns</h2>
        <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

</body>
</HTML>
=====Dropdown Accessibility=====
스크린 리더를 사용하는 사람들의 접근성을 높이려면,\\ 
드롭다운 메뉴를 만들 때 ''role'' 및 ''%%aria- *%%'' 속성을 포함해야 합니다.
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Dropdowns</h2>
        <p>The .dropup class is used to indicate a dropdown menu.</p>
        <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials<span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentaation"><a role="menuitem" tableindex="-1" href="#">HTML</a></li>
                <li role="presentaation"><a role="menuitem" tableindex="-1" href="#">CSS</a></li>
                <li role="presentaation"><a role="menuitem" tableindex="-1" href="#">JavaScript</a></li>
                <li role="presentaation" class="divider"></li>
                <li role="presentaation"><a role="menuitem" tableindex="-1" href="#">About Us</a></li>
            </ul>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:dropsown-menu-cloass.png?600|}}\\





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

사용자 도구

사이트 도구

문서 도구
