부트스트랩이 매일 배워야 하는 버튼 (1)_자바스크립트 기술
- WBOY원래의
- 2016-05-16 15:30:131204검색
이 글에서는 주로 버튼 스타일에 대해 설명합니다.
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
<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>
링크 요소
3499910bf9dac5ae3c52d5ede7383485에 .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% 희미하게 하면 클릭할 수 없는 효과를 만들 수 있습니다.
버튼 요소
b367242f19a18128711072e7b7cdbd4c에 비활성화된 속성을 추가합니다.
<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>
버튼에 마우스를 올려놓고 클릭하시면 효과를 보실 수 있습니다.
브라우저 간 호환성
b367242f19a18128711072e7b7cdbd4c에 비활성화된 속성을 추가하면 Internet Explorer 9 이하 버전의 브라우저에서는 역겨운 그림자와 함께 버튼에 텍스트가 회색으로 그려집니다. 현재로서는 해결책이 없습니다.
링크 요소
3499910bf9dac5ae3c52d5ede7383485에 .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를 도구 클래스로 사용하므로 접두사를 추가할 필요가 없습니다.
링크 기능은 영향을 받지 않습니다
위에 언급된 클래스는 3499910bf9dac5ae3c52d5ede7383485의 모양만 변경하며 기능에는 영향을 주지 않습니다. 이 문서에서는 JavaScript 코드를 통한 링크의 기본 기능을 비활성화했습니다.
버튼으로 사용할 수 있는 HTML 태그
3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 또는 d5fd7aea971a85678ba271703566ebfd 요소에 버튼 클래스를 추가할 수 있습니다.
<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">
크로스 브라우저 성능
브라우저 전반에 걸쳐 일관된 스타일을 보장하기 위해 가능하면 bb9345e55eb71822850ff156dfde57c8 요소를 사용하는 것이 가장 좋습니다.
다른 이유로 인해 이 Firefox 버그로 인해 d5fd7aea971a85678ba271703566ebfd 태그를 기반으로 버튼의 줄 높이를 설정할 수 없으며 이로 인해 높이가 Firefox의 다른 버튼과 일치하지 않게 됩니다.
이 섹션의 주요 내용은 버튼 스타일입니다. 이러한 스타일을 유연하게 실행하여 학습에 도움이 되기를 바랍니다.