홈구성요소 Global Styles레이아웃테마색상SNS색상토스트 메시지 v11.21.0.5 관리자 레이아웃버튼알림 스킨 웹폰트설정로고메뉴바메인구성하단자동박스탭박스기사리스트기사뷰버튼페이징뉴스레터SASS 아이콘 NDfontsNDcon 플러그인 웹 접근성AOSSwiperValidateCodeMirror
버튼 관리자버튼은 사용자와 분리된 형태로 구성됩니다. 사용자는 Foundation의 버튼을 참고해주십시오. Default Primary Secondary Success Danger Warning Info Dark <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-dark">Dark</button> Outline Primary Secondary Success Danger Warning Info Dark <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-dark">Dark</button> Sizes Small Medium Large <button type="button" class="btn btn-sm btn-primary">Small</button> <button type="button" class="btn btn-primary">Medium</button> <button type="button" class="btn btn-lg btn-primary">Large</button> Custom Admin Table Table Primary Table Select Confirm Remove Toggler Go to <button type="button" class="btn btn-adm">Admin</button> <button type="button" class="btn btn-tb">Table</button> <button type="button" class="btn btn-tb-primary">Table Primary</button> <button type="button" class="btn btn-tb-select">Table Select</button> <button type="button" class="btn btn-primary btn-confirm">Confirm</button> <button type="button" class="btn btn-outline-primary btn-remove">Remove</button> <button type="button" class="btn btn-outline-primary toggler">Toggler</button> <button type="button" class="btn btn-outline-primary goto">Go to</button> Custom Functions .btn --nd-btn-padding-x: 0.75rem; --nd-btn-padding-y: 0.375rem --nd-btn-font-family: inherit; --nd-btn-font-size: 0.875rem; --nd-btn-font-weight: 400; --nd-btn-line-height: 1.5; --nd-btn-letter-spacing: -0.5px; --nd-btn-color: #6c757d; --nd-btn-bg: transparent; --nd-btn-border-width: 1px; --nd-btn-border-style: solid; --nd-btn-border-color: transparent; --nd-btn-border-radius: 0.25rem; /* hover */ --nd-btn-hover-color: #000; --nd-btn-hover-bg: transparent; --nd-btn-hover-border-color: transparent; /* active */ --nd-btn-active-color: #000; --nd-btn-active-bg: transparent; --nd-btn-active-border-color: transparent; DefaultOutlineSizesCustom선택자 변수
Default Primary Secondary Success Danger Warning Info Dark <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-dark">Dark</button>
Outline Primary Secondary Success Danger Warning Info Dark <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-dark">Dark</button>
Sizes Small Medium Large <button type="button" class="btn btn-sm btn-primary">Small</button> <button type="button" class="btn btn-primary">Medium</button> <button type="button" class="btn btn-lg btn-primary">Large</button>
Custom Admin Table Table Primary Table Select Confirm Remove Toggler Go to <button type="button" class="btn btn-adm">Admin</button> <button type="button" class="btn btn-tb">Table</button> <button type="button" class="btn btn-tb-primary">Table Primary</button> <button type="button" class="btn btn-tb-select">Table Select</button> <button type="button" class="btn btn-primary btn-confirm">Confirm</button> <button type="button" class="btn btn-outline-primary btn-remove">Remove</button> <button type="button" class="btn btn-outline-primary toggler">Toggler</button> <button type="button" class="btn btn-outline-primary goto">Go to</button>
Custom Functions .btn --nd-btn-padding-x: 0.75rem; --nd-btn-padding-y: 0.375rem --nd-btn-font-family: inherit; --nd-btn-font-size: 0.875rem; --nd-btn-font-weight: 400; --nd-btn-line-height: 1.5; --nd-btn-letter-spacing: -0.5px; --nd-btn-color: #6c757d; --nd-btn-bg: transparent; --nd-btn-border-width: 1px; --nd-btn-border-style: solid; --nd-btn-border-color: transparent; --nd-btn-border-radius: 0.25rem; /* hover */ --nd-btn-hover-color: #000; --nd-btn-hover-bg: transparent; --nd-btn-hover-border-color: transparent; /* active */ --nd-btn-active-color: #000; --nd-btn-active-bg: transparent; --nd-btn-active-border-color: transparent;
.btn --nd-btn-padding-x: 0.75rem; --nd-btn-padding-y: 0.375rem --nd-btn-font-family: inherit; --nd-btn-font-size: 0.875rem; --nd-btn-font-weight: 400; --nd-btn-line-height: 1.5; --nd-btn-letter-spacing: -0.5px; --nd-btn-color: #6c757d; --nd-btn-bg: transparent; --nd-btn-border-width: 1px; --nd-btn-border-style: solid; --nd-btn-border-color: transparent; --nd-btn-border-radius: 0.25rem; /* hover */ --nd-btn-hover-color: #000; --nd-btn-hover-bg: transparent; --nd-btn-hover-border-color: transparent; /* active */ --nd-btn-active-color: #000; --nd-btn-active-bg: transparent; --nd-btn-active-border-color: transparent;