[Bootstrap] CSS - Button (버튼 디자인 하기)

Bootstrap 의 Button CSS 입니다.

CSS 몇개의 추가로 버튼을 디자인 할 수 있습니다.

<a> , <input> , <button> 해당 태그에 버튼 CSS를 사용 할 수 있습니다.

 

<div class="container show-grid" style="width: 700px;"> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> </div>

Link

색상도 기본 제공되는 class 로 바꿀 수 있습니다.

<!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button>

사이즈도 class 를 추가해주면 원하는 크기로 바꿀 수 있습니다.

<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p><p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p><p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p><p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>

버튼도 다양하게 변경이 가능하며 자세한 예제는 아래의 URL에서 확인이 가능합니다.

http://getbootstrap.com/css/#buttons