Thief of Wealth


1. 색상


버튼은 기본적으로

<button type="button" class="btn btn-primary">Primary</button>

처럼 사용하며 btn속성을 주고

색깔 속성으로는 primary, Secondary ~ Dark, Link

        

  까지 다양한 색상들이 있다.


테두리만 색상적용하려면

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

처럼 써도 된다. 커스터 마이징해도 되고...




2. 기능



만약 버튼으로 링크 또는 다른 다양한 방식의 기능을 걸고 싶으면



    
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

위와 같은 방식중 1개로 사용할 수 있다.



3. 사이즈

btn-lg
btn-sm


로 쉽게 조절이 가능하다.


btn-lg btn-block

를 쓰면 버튼이 width 만큼 길어진다.



4. 활성상태/ 비활성상태


활성 상태는 아래 코드 같이 active를 클래스에 넣어주고

aria-pressed="true" 속성을 넣어준다.(aria-pressed 속성은 토글이 가능한 버튼을 만들게 해주는 속성이라 한다. )

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>


비활성 상태는 간단히 disable 클래스를 추가해주면 된다.


5. active 상태 토글

data-toggle="button"

aria-pressed="false"

autocomplete="off"

속성 추가해주면 된다.


6. 체크 박스 라디오 버튼은 아래 코드를 보면서 이해하면 된다.

자동완성기능도 있으니 참고하자.


<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> 라디오 1 (기본선택)
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> 라디오 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> 라디오 3
  </label>
</div>






profile on loading

Loading...