버튼 요소는 사용자가 페이지와 상호 작용할 수 있도록 한다는 점에서 보다 유용한 HTML(Hypertext Markup Language) 요소 중 하나입니다.
로그인, 구독, 삭제 또는 열기, 메뉴 표시, 색상 테마 변경은 버튼으로 수행되는 작업입니다.
기본 브라우저 버튼 스타일은 가장 잘 보이지도 않고 현대적이지도 않습니다.
모든 프로젝트에서 스타일을 사용자 지정하여 동일한 결과에 대해 동일한 코드를 여러 번 반복합니다.
다시 말하지만, 부트스트랩은 우리를 강압합니다. Bootstrap 버튼으로 가능한 일을 살펴보세요.
컬러 버튼
<button class="btn btn-primary">button 1</button>
<button class="btn btn-secondary">button 2</button>
<button class="btn btn-info">button 3</button>
<button class="btn btn-warning">button 4</button>
<button class="btn btn-danger">button 5</button>
<button class="btn btn-success">button 6</button>
<button class="btn btn-light">button 7</button>
<button class="btn btn-dark">button 8</button>
<button class="btn btn-link">button 9</button>
색상과 관련하여 모든 Bootstrap의 사전 정의된 색상과 BTN-LINK 옵션을 사용하여 링크에 Bootstrap의 스타일을 적용할 수 있습니다.
모든 색상 옵션은 균일한 패딩을 제공하고 커서를 가져가면 약간 더 어두운 음영으로 빠르게 색상이 전환됩니다. 링크에 마우스 오버 시 밑줄이 있습니다.
BTN 클래스만 선언하면 Bootstrap은 기본 브라우저 스타일만 제거합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
<button>Without Bootstrap</button> <button class="btn">With Bootstrap</button>
여기에서 볼 수 있듯이:
개요 버튼
동일한 색상을 사용하여 윤곽선만 있는 버튼을 만들 수 있습니다.
<button class="btn btn-outline-primary">button 1</button>
<button class="btn btn-outline-secondary">button 2</button>
<button class="btn btn-outline-info">button 3</button>
<button class="btn btn-outline-warning">button 4</button>
<button class="btn btn-outline-danger">button 5</button>
<button class="btn btn-outline-success">button 6</button>
<button class="btn btn-outline-light">button 7</button>
<button class="btn btn-outline-dark">button 8</button>
<button class="btn btn-outline-link">button 9</button>
윤곽선과 동일한 배경색을 가지며 대비에 따라 텍스트가 흰색 또는 검정색이 됩니다. 빛과 노란색(경고)은 검은색 텍스트를 가져옵니다. 단, 링크 버전은 이 옵션을 지원하지 않습니다.
크기 조정
부트스트랩은 버튼에 대해 small, regular 및 large의 세 가지 크기를 지원합니다.
다음과 같이 크기를 선택하기 위해 다른 클래스를 추가합니다.
<div class="m-5">
<button class="btn btn-primary btn-sm">small button 1</button>
<button class="btn btn-warning btn-sm">small button 2</button>
<button class="btn btn-primary btn-sm">small button 3</button>
</div>
<div class="m-5">
<button class="btn btn-primary">regular button 1</button>
<button class="btn btn-warning">regular button 2</button>
<button class="btn btn-danger">regular button 3</button>
</div>
<div class="m-5">
<button class="btn btn-primary btn-lg">large button 1</button>
<button class="btn btn-warning btn-lg">large button 2</button>
<button class="btn btn-danger btn-lg">large button 3</button>
</div>
각 크기의 단추 3개가 만들어지고, 간격을 띄우기 위해 약간의 여백을 주기 위해 클래스 M-5가 있는 div에 각 크기를 감쌉니다.
차단 레벨 버튼
포함하는 요소의 전체 너비인 버튼을 원하면 BTN-BLOCK 클래스를 추가합니다. 이 방법의 일반적인 경우인 간단한 양식을 만들어 보겠습니다.
<div class="form-group">
<label for="username">username</label>
<input type="text" class="form-control" />
<div class="form-group"></div>
<label for="email">Email</label>
<input type="email" class="form-control" />
</div>
<button class="btn btn-lg btn-block btn-primary">
Block Level Button
</button>
<button class="btn btn-lg btn-secondary my-2">Regular button</button>
</form>
부트스트랩 양식 클래스에 대해서는 자세히 설명하지 않겠습니다.
우리는 사용자 이름과 이메일을 허용하고 하나의 블록 수준 버튼과 하나의 일반 버튼이 있는 간단한 양식을 만들었습니다.
MT-2는 다시 두 개의 버튼을 분리하기 위해 추가된 여백(상단)입니다.
그리고 여기에서 차이점을 볼 수 있습니다.
버튼 상태
다른 많은 부트스트랩 구성 요소와 마찬가지로 ACTIVE 또는 DISABLED 상태 클래스를 사용하여 버튼의 모양을 변경할 수 있습니다.
활성 상태
활성 버튼은 배경, 테두리 및 그림자가 약간 더 어둡습니다.
<button class="btn btn-primary">Regular</button>
<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary">Regular</button> 
비활성 상태
대조적으로 비활성화된 버튼은 동일한 속성에 대해 더 밝은 음영을 사용합니다. DISABLED 클래스를 추가하면 버튼에 더 밝은 색상만 제공됩니다. 실제로 비활성화하려면 버튼 속성으로 선언해야 합니다.
<button class="btn btn-primary disabled">Disabled Looking</button>
<button class="btn btn-primary" disabled>Truly Disabled</button> 
DISABLED 클래스가 있는 항목은 여전히 클릭할 수 있으며, 있는 경우 작업을 수행합니다.
보조 기술의 경우 화면 판독기 사용자가 화면에 비활성화된 버튼이 있음을 알 수 있도록 ARIA-DISABLED=“TRUE” 속성도 포함해야 합니다.
또한 현재 요소는 DISABLED 속성을 지원하지 않으므로 비활성화된 모양을 얻으려면 클래스를 포함해야 합니다.
<a class="btn btn-danger" disabled>Attribute Not Supported</a>
<a href="#" class="btn btn-danger disabled">Disabled Look</a>
태그의 경우 DISABLED 클래스는 마우스 클릭을 비활성화하는 CSS 규칙 POINTER-EVENTS:NONE을 추가합니다.
그러나 이것은 모든 웹 브라우저에서 아직 완전히 지원되지 않으며 지원되는 브라우저에서도 키보드를 통해 링크에 계속 액세스할 수 있습니다.
기능이 완전히 비활성화되었는지 확인하려면 TABINDEX=“-1” 속성을 추가하여 키보드로도 포커스를 받을 수 없도록 해야 합니다.
어쨌든 태그를 버튼으로 사용해서는 안 되지만 알아두는 것이 좋습니다.
버튼 그룹
Bootstrap의 CARDS <(작성 시 게시)와 마찬가지로 GROUP 클래스를 사용하여 버튼을 시각적으로 단일 요소로 융합할 수 있습니다.
<div class="btn-group">
<button class="btn btn-primary">button 1</button>
<button class="btn btn-warning">button 2</button>
<button class="btn btn-info">button 3</button>
<button class="btn btn-danger">button 4</button>
</div>
BTN-GROUP 클래스를 사용하여 div에 간단히 래핑하면 끝입니다!
동작은 정확히 동일하지만 이제 서로 바로 옆에 있고 바깥쪽 모서리가 멋지게 둥글게 되었습니다.
요약하기
버튼은 거의 모든 웹사이트에서 찾을 수 있으며 온라인 경험에서 매우 중요한 부분입니다. 우리는 계정에 로그인하거나, 온라인으로 무언가를 주문하거나, 뉴스레터를 구독하거나, 버튼을 사용하여 받은 편지함에 들어오는 모든 스팸을 차단할 수 있습니다. 그것들이 없다면 웹사이트는 디지털 명함이 될 것입니다. Bootstrap을 통해 버튼을 사이트의 아름다운 구성 요소로 만들 수도 있습니다.