부트스트랩 버튼


Bootstrap Button 플러그인

Button은 Bootstrap Button 장에서 소개되었습니다. 버튼 플러그인을 사용하면 버튼 상태 제어와 같은 일부 상호 작용을 추가하거나 다른 구성 요소(예: 도구 모음)에 대한 버튼 그룹을 생성할 수 있습니다.

이 플러그인의 기능을 별도로 참조하려면 button.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

Loading state

버튼에 로딩 상태를 추가하려면 아래 예와 같이 버튼 요소에 data-loading-text="Loading..."을 속성으로 추가하기만 하면 됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件加载状态</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
   type="button"> 加载状态
</button>
<script>
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
           // $(this).button('reset');
         });        
      });
   });  
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

단일 스위치

단일 버튼의 스위치를 활성화해야 하는 경우(예: 버튼의 일반 상태를 누른 상태, 그 반대), 다음 예와 같이 버튼 요소에 속성으로 data-toggle="button"을 추가하기만 하면 됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件单个切换</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" 
   data-toggle="button"> 单个切换
</button>

</body>
</html>

Run Instance»

"인스턴스 실행" 버튼을 클릭하세요. 온라인 예시 보기

Checkbox

체크박스 그룹을 생성하고 data-toggle="buttons" 데이터 속성을 btn-group에 추가하여 체크박스 그룹 토글을 추가할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件复选框</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 1
   </label>
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 2
   </label>
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 3
   </label>
</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

라디오 버튼(라디오)

마찬가지로 라디오 버튼 그룹을 만들어 추가할 수 있습니다. btn-group 라디오 버튼 그룹의 토글을 추가하려면 data-toggle="buttons" 데이터 속성을 추가하세요.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件单选按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option1"> 选项 1
   </label>
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option2"> 选项 2
   </label>
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> 选项 3
   </label>
</div>   

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Usage

다음과 같이 JavaScript를 통해 버튼 플러그인을 활성화할 수 있습니다.

$ ('.btn').버튼()

옵션

옵션이 없습니다.

Methods

Button 플러그인의 몇 가지 유용한 메소드는 다음과 같습니다.

Method DescriptionInstance
button('toggle')눌린 상태를 전환합니다. 버튼이 활성화된 것처럼 보이게 합니다. data-toggle 속성을 사용하면 버튼 자동 전환을 활성화할 수 있습니다. 
$().button('toggle')
.button('loading')로드할 때 버튼이 비활성화되고 텍스트는 버튼 요소의 data-loading-text 속성 값이 됩니다. 
$().button('loading')
.button('reset')버튼 상태를 재설정하고 텍스트 내용을 원래 내용으로 복원합니다. 이 방법은 버튼을 원래 상태로 되돌리려는 경우에 유용합니다. 
$().button('reset')
.button(string)이 메서드의 문자열은 사용자가 선언한 모든 문자열을 참조합니다. 이 방법을 사용하면 버튼 상태를 재설정하고 새 콘텐츠를 추가할 수 있습니다. 
$().button(string)

Instance

다음 예에서는 위 메서드의 사용법을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
   <button type="button" class="btn btn-primary">原始</button>
</div>

<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
   <button type="button" class="btn btn-primary" 
      data-loading-text="Loading...">原始
   </button>
</div>

<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
   <button type="button" class="btn btn-primary" 
      data-loading-text="Loading...">原始
   </button>
</div>

<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4" 
   data-complete-text="Loading finished">请点击我
</button>
<script type="text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
   $(function() { 
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   $(function() { 
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
   });  
   $(function() { 
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   }); 
</script> 


</body>
</html>

인스턴스 실행 »

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요