부트스트랩이 매일 배워야 하는 버튼 (1)_자바스크립트 기술

이 글에서는 주로 버튼 스타일에 대해 설명합니다.
1.옵션
2. 사이즈
3.활동현황
4. 비활성화 상태
5. 버튼으로 사용할 수 있는 HTML 태그

옵션

위에 나열된 클래스를 사용하면 스타일이 지정된 버튼을 빠르게 만들 수 있습니다.

 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</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-link">链接</button>

사이즈
버튼의 크기가 달라야 합니까? 다양한 크기의 버튼을 얻으려면 .btn-lg, .btn-sm, .btn-xs를 사용하세요.

<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>

버튼에 .btn-block을 추가하면 상위 노드 너비의 100%를 채울 수 있으며 버튼도 블록 요소가 됩니다.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

활동현황
버튼이 활성화되면 누른 것처럼 보입니다(배경이 어두워지고 테두리가 어두워지고 그림자가 내장됨). B 요소의 경우:active를 통해 구현됩니다. 요소의 경우 .active를 통해 구현됩니다. 그러나 .active를 과 함께 사용하여 프로그래밍 방식으로 활성화할 수도 있습니다.
버튼 요소
:active는 의사(pseudo) 상태이므로 추가할 필요가 없지만, 동일한 모습을 보여주고 싶을 때 .active를 추가하면 됩니다.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

링크 요소
에 .active 클래스를 추가할 수 있습니다.

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

위 버튼과 비교해보실 수 있습니다.

비활성 상태
버튼의 배경색을 50% 희미하게 하면 클릭할 수 없는 효과를 만들 수 있습니다.
버튼 요소
<버튼>에 비활성화된 속성을 추가합니다.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

버튼에 마우스를 올려놓고 클릭하시면 효과를 보실 수 있습니다.
브라우저 간 호환성

<버튼>에 비활성화된 속성을 추가하면 Internet Explorer 9 이하 버전의 브라우저에서는 역겨운 그림자와 함께 버튼에 텍스트가 회색으로 그려집니다. 현재로서는 해결책이 없습니다.
링크 요소
에 .disabled 클래스를 추가합니다.

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

위 버튼과의 비교입니다.
.active 클래스와 마찬가지로 .disabled를 도구 클래스로 사용하므로 접두사를 추가할 필요가 없습니다.
링크 기능은 영향을 받지 않습니다

위에 언급된 클래스는 의 모양만 변경하며 기능에는 영향을 주지 않습니다. 이 문서에서는 JavaScript 코드를 통한 링크의 기본 기능을 비활성화했습니다.

버튼으로 사용할 수 있는 HTML 태그
,

또는 요소에 버튼 클래스를 추가할 수 있습니다.

 <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">

크로스 브라우저 성능

브라우저 전반에 걸쳐 일관된 스타일을 보장하기 위해 가능하면

요소를 사용하는 것이 가장 좋습니다.

다른 이유로 인해 이 Firefox 버그로 인해 태그를 기반으로 버튼의 줄 높이를 설정할 수 없으며 이로 인해 높이가 Firefox의 다른 버튼과 일치하지 않게 됩니다.
이 섹션의 주요 내용은 버튼 스타일입니다. 이러한 스타일을 유연하게 실행하여 학습에 도움이 되기를 바랍니다.