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>
'개발 > Web Programming' 카테고리의 다른 글
웹프로그래밍 하면서 너무 화나는 점. (1) | 2019.03.06 |
---|---|
[Bootstrap] Float (0) | 2019.03.05 |
[Bootstrap] table정리 (0) | 2019.03.05 |
[Bootstrap] Spacing- Margin,Padding Utility (0) | 2019.03.03 |
[Bootstrap] sr-only는 뭘까? (what is sr-only) (2) | 2019.03.03 |