차이

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

--- wiki:bootstrap:bootstrap_note:bs_dropdowns [2021/03/26 12:10]
emblim98 만듦
+++ wiki:bootstrap:bootstrap_note:bs_dropdowns [2023/01/13 18:44] (현재)
@@ 줄 12: / 줄 12: @@
 ====예제====
 <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|}}\\

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

사용자 도구

사이트 도구

차이

문서 도구