wiki:bootstrap:bootstrap_note:bs_buttons

차이

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

차이 보기로 링크

--- wiki:bootstrap:bootstrap_note:bs_buttons [2021/03/25 12:06]
emblim98 만듦
+++ wiki:bootstrap:bootstrap_note:bs_buttons [2023/01/13 18:44] (현재)
@@ 줄 44: / 줄 44: @@
 ====예제====
 <HTML>
+<body>
+    <div class="container">
+        <h2>Button Tags</h2>
+        <a href="#" class="btn btn-info" role="button">Link Button</a>
+        <button type="button" class="btn btn-info">Button</button>
+        <input type="button" class="btn btn-info" value="Input Button">
+        <input type="submit" class="btn btn-info" value="Submit Button">
+    </div>
+</body>
+</HTML>
+\\
+**링크의 href 속성에 #을 입력하는 이유는 무엇입니까?**
+\\
+링크할 페이지가 없고 "404" 메시지를 받고 싶지 않기 때문에, 예제에서 #을 링크로 넣었습니다.\\
+특정 페이지에 대한 실제 URL를 href 속성에 입력해야 합니다.\\
+\\
+=====Button Sizes=====
+Bootstrap은 4가지 버튼 크기를 제공합니다:\\
+다른 크기를 정의하는 클래스는 다음과 같습니다:\\
+  * ''%%.btn-lg%%''
+  * ''%%.btn-sm%%''
+  * ''%%.btn-xs%%''
+\\
+하기 예제는 다양한 버튼 크기에 대한 코드를 보여줍니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Button Sizes</h2>
+        <button type="button" class="btn btn-primary btn-lg">Large Button</button>
+        <button type="button" class="btn btn-primary btn-md">Normal Button</button>
+        <button type="button" class="btn btn-primary btn-sm">Small Button</button>
+        <button type="button" class="btn btn-primary btn-xs">XSmall Button</button>
+    </div>
+</body>
 </HTML>
+\\
+=====Block Level Buttons=====
+블록 레벨 버튼은 부모 요소의 전체 너비에 걸쳐 있습니다.\\
+\\
+''%%.btn-block%%'' 클래스를 추가하여 블록 레벨 버튼을 만듭니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Block Level Buttons</h2>
+        <button type="button" class="btn btn-primary btn-block">Button 1</button>
+        <button type="button" class="btn btn-default btn-block">Button 2</button>
+        <h2>Large Block Level Buttons</h2>
+        <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
+        <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>
+        <h2>Small Block Level Buttons</h2>
+        <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
+        <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
+    </div>
+</body>
+</HTML>
+\\
+=====Active/Disabled Buttons(활성/비활성 버튼)=====
+버튼은 활성(누른 것처럼 보임) 또는 비활성화(클릭 할 수 없음) 상태로 설정할 수 있습니다.\\
+\\
+''%%.active%%'' 클래스는 버튼이 눌린 것처럼 보이게 하고 ''%%.disabled%%'' 클래스는 버튼을 클릭 할 수 없게 만듭니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Button States</h2>
+        <button type="button" class="btn btn-primary">Primary Button</button>
+        <button type="button" class="btn btn-primary active">Active Primary</button>
+        <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
+    </div>
+</body>
+</HTML>

/var/services/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_buttons.1616641562.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)