, [Bootstrap]Button

[Bootstrap]Button

2020. 11. 3. 22:51
반응형

Bootstarp Button

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-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

 

Button btn-outline

<button type="button" class="btn btn-outlint-default">Default</button>
<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>
<button type="button" class="btn btn-outline-link">Link</button>

 

Button btn-lg

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

 

Button btn-sm

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

 

Button btn-xs


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

 

728x90
LIST

'TIP&TECH > Web' 카테고리의 다른 글

[Mariadb]Mariadb utf8mb4  (0) 2020.11.06
[Bootstrap]Card  (0) 2020.11.04
RGB <-> #COLOR  (0) 2020.10.30
[Script] Rainbow Effect Box  (0) 2020.10.28
[Script]Rainbow Text  (0) 2020.10.27

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band