부트스트랩 4 버튼
버튼 스타일
Bootstrap 4는 다양한 스타일의 버튼을 제공합니다.
예시
<button type="button" class="btn">Basic</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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
버튼 클래스는 , 또는 요소에서 사용할 <a>수 <button>있습니다
<input>.
예시
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
링크의 href 속성에 #을 넣는 이유는 무엇입니까?
링크할 페이지가 없고 "404" 메시지를 받고 싶지 않기 때문에 #을 링크로 넣습니다. 실제로는 "검색" 페이지에 대한 실제 URL이어야 합니다.
버튼 개요
Bootstrap 4는 8개의 아웃라인/테두리 버튼을 제공합니다.
예시
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
버튼 크기
.btn-lg큰 버튼에는 클래스를 사용하고 .btn-sm작은 버튼에는 클래스를 사용합니다.
예시
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
블록 레벨 버튼
클래스 .btn-block를 추가하여 상위 요소의 전체 너비에 걸쳐 있는 블록 수준 버튼을 만듭니다.
예시
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
활성/비활성화 버튼
버튼은 활성(눌린 상태로 표시) 또는 비활성화(클릭 불가) 상태로 설정할 수 있습니다.
클래스 .active는 버튼이 눌린 것처럼 보이게 하고 disabled속성은 버튼을 클릭할 수 없도록 만듭니다. <a> 요소는 disabled 속성을 지원하지 않으므로 .disabled시각적으로 비활성화된 것처럼 보이도록 클래스를 사용해야 합니다.
예시
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
스피너 버튼
버튼에 "스피너"를 추가할 수도 있습니다. 이에 대한 자세한 내용은 BS4 Spinners Tutorial :
예시
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>