부트스트랩 버튼
이 장에서는 예제를 통해 부트스트랩 버튼을 사용하는 방법을 설명합니다. 클래스가 .btn인 모든 요소는 둥근 회색 버튼의 기본 모양을 상속받습니다. 그러나 Bootstrap은 다음 표와 같이 버튼 스타일을 정의하는 몇 가지 옵션을 제공합니다.
다음 스타일은 <a>, <button> 또는 <input> 요소에 사용할 수 있습니다.
| 클래스 | 설명 | Instance |
|---|---|---|
| .btn | 버튼에 기본 스타일 추가 | 사용해보기 |
| .btn-default | 기본/표준 버튼 | 사용해보기 |
| .btn -primary | 원래 버튼 스타일(작동하지 않음) | 사용해 보세요 |
| .btn-success | 는 성공적인 작업을 나타냅니다. | 사용해 보세요 |
| .btn-info | 이 스타일은 다음 용도로 사용할 수 있습니다. 정보를 팝업하고 싶은 버튼 | 사용해 보세요 |
| .btn-warning | 주의해서 작동해야 함을 나타내는 버튼 | 사용해 보세요 |
| .btn-danger | 위험한 동작을 나타냅니다 | 해 보세요 |
| .btn- link | 버튼을 링크처럼 보이게 만드세요(버튼 동작은 그대로 유지하세요) | 해 보세요 |
| .btn-lg | 큰 버튼을 만들어 보세요 | 사용해 보세요 |
| .btn-sm | 작은 단추 하나 만들어 보세요 | 사용해 보세요 |
| .btn-xs | 초소형 단추 만들어 보세요 | 사용해 보세요 |
| .btn- block | 블록 수준 버튼(상위 요소 너비 100%까지 확장) | 사용해보기 |
| .active | 버튼 클릭 | 사용해 보기 |
| .disabled | 사용 안 함 버튼 | T RY |
다음 예에서는 위의 모든 버튼 클래스를 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 按钮选项</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <!-- 信息警告消息的上下文按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎采取的动作 --> <button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 --> <button type="button" class="btn btn-danger">危险按钮</button> <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --> <button type="button" class="btn btn-link">链接按钮</button> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
버튼 크기
다음 표에는 다양한 크기의 버튼을 가져오는 클래스가 나열되어 있습니다.
| Class | Description |
|---|---|
| .btn-lg | 이렇게 하면 버튼이 더 크게 보입니다. |
| .btn-sm | 이렇게 하면 버튼이 더 작아 보이게 됩니다. |
| .btn-xs | 이렇게 하면 버튼이 매우 작게 보입니다. |
| .btn-block | 이렇게 하면 상위 요소의 전체 너비에 걸쳐 있는 블록 수준 버튼이 생성됩니다. |
다음 예에서는 위의 모든 버튼 클래스를 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 按钮大小</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-primary btn-lg"> 大的原始按钮 </button> <button type="button" class="btn btn-default btn-lg"> 大的按钮 </button> </p> <p> <button type="button" class="btn btn-primary"> 默认大小的原始按钮 </button> <button type="button" class="btn btn-default"> 默认大小的按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-sm"> 小的原始按钮 </button> <button type="button" class="btn btn-default btn-sm"> 小的按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-xs"> 特别小的原始按钮 </button> <button type="button" class="btn btn-default btn-xs"> 特别小的按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block"> 块级的原始按钮 </button> <button type="button" class="btn btn-default btn-lg btn-block"> 块级的按钮 </button> </p> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
버튼 상태
Bootstrap은 활성화 및 비활성화 버튼 상태에 대한 클래스는 아래에서 자세히 설명하겠습니다.
활성화 상태
버튼이 활성화되면 누른 모양(어두운 배경, 어두운 테두리, 그림자)이 나타납니다.
다음 표에는 버튼 요소와 앵커 요소를 활성화하는 클래스가 나열되어 있습니다.
| Element | Class |
|---|---|
| 버튼 요소 | .active 클래스를 추가하여 활성화되었음을 표시합니다. |
| Anchor 요소 | <a> 버튼에 .active 클래스를 추가하여 활성 상태임을 표시합니다. |
다음 예에서는 이를 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 按钮激活状态</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-default btn-lg "> 默认按钮 </button> <button type="button" class="btn btn-default btn-lg active"> 激活按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-lg "> 原始按钮 </button> <button type="button" class="btn btn-primary btn-lg active"> 激活的原始按钮 </button> </p> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
비활성화 상태
언제 버튼이 비활성화되면 색상이 50% 더 밝아지고 그라데이션이 손실됩니다.
다음 표에는 버튼 요소와 앵커 요소를 비활성화하는 클래스가 나열되어 있습니다.
| element | Class |
|---|---|
| Button 요소 | disabled 속성을 <button> 버튼에 추가하세요. |
| anchor 요소 | <a> 버튼에 disabled class를 추가하세요. 참고: 이 클래스는 기능이 아닌 <a>의 모양만 변경합니다. 여기에서 링크를 비활성화하려면 사용자 정의 JavaScript를 사용해야 합니다. |
instance
下面的实例演示了这点： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 按钮禁用状态</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-default btn-lg"> 默认按钮 </button> <button type="button" class="btn btn-default btn-lg" disabled="disabled"> 禁用按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-lg "> 原始按钮 </button> <button type="button" class="btn btn-primary btn-lg" disabled="disabled"> 禁用的原始按钮 </button> </p> <p> <a href="#" class="btn btn-default btn-lg" role="button"> 链接 </a> <a href="#" class="btn btn-default btn-lg disabled" role="button"> 禁用链接 </a> </p> <p> <a href="#" class="btn btn-primary btn-lg" role="button"> 原始链接 </a> <a href="#" class="btn btn-primary btn-lg disabled" role="button"> 禁用的原始链接 </a> </p> </body> </html>
run 인스턴스»
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 按钮标签</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <a class="btn btn-default" href="#" role="button">链接</a> <button class="btn btn-default" type="submit">按钮</button> <input class="btn btn-default" type="button" value="输入"> <input class="btn btn-default" type="submit" value="提交"> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
