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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Buttons======
<WRAP left notice 80%>
  * description : Bootstrap Buttons
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-25
</WRAP>
<WRAP clear></WRAP>
\\
=====Button Styles=====
Bootstrap은 다양한 스타일의 버튼을 제공합니다.\\
{{:wiki:bootstrap:bootstrap_note:button-styles.png?600|}}\\
출처: [[https://www.w3schools.com/bootstrap/bootstrap_buttons.asp|W3Schools.com - Bootstrap Buttons]]\\
\\
상기 스타일의 버튼을 얻기 위해, Bootstrap에는 다음과 같은 클래스가 있습니다.\\
  * ''.btn''
  * ''.btn-default''
  * ''.btn-primary''
  * ''.btn-info''
  * ''.btn-warning''
  * ''.btn-danger''
  * ''.btn-link''
하기 예제에서 다양한 버튼 스타일에 대한 코드를 확인하겠습니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Button Styles</h2>
        <button type="button" class="btn">Basic</button>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
    </div>

</body>
</HTML>
\\
button 클래스는 ''%%<a>%%'', ''%%<button>%%'' 또는 ''%%<input>%%'' 요소에서 사용할 수 있습니다:\\
====예제====
<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> 








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

사용자 도구

사이트 도구

문서 도구
