English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 버튼

이 장은 Bootstrap 버튼을 사용하는 방법에 대한 예제를 통해 설명합니다. class가 포함된 어떤 요소도 .btn 요소는 모두 둥글고 회색 버튼의 기본 외관을 상속받습니다. 하지만 Bootstrap는 버튼 스타일을 정의하기 위한 몇 가지 옵션을 제공합니다. 구체적인 내용은 다음 표에 나와 있습니다：

다음 스타일은 <a>, <button>, 또는 <input> 요소에 사용할 수 있습니다：

class설명示例
.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비활성 버튼시도해 보세요

아래 예제는 위에 나열된 모든 버튼 class을 보여줍니다:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼 옵션/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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을 나열합니다:

Class설명
.btn-lg이는 버튼이 크게 보이도록 합니다.
.btn-sm이는 버튼이 작게 보이도록 합니다.
.btn-xs이는 버튼이 특히 작게 보이도록 합니다.
.btn-block이는 부모 요소 전체 너비를 가로채는 블록형 버튼을 생성합니다.

아래 예제는 위에 나열된 모든 버튼 class을 보여줍니다:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼 크기/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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는 활성화, 비활성화 등 버튼 상태의 class을 제공하며, 아래에서 자세히 설명합니다.

활성화 상태

버튼이 활성화 상태일 때는 눌린 모습으로 표시됩니다(다크 배경, 다크 경계선, 그림자).

아래 표는 버튼 요소와 앵커 요소를 활성화 상태로 만드는 class을 나열합니다:

요소Class
버튼 요소추가 .active class을 추가하여 활성화 상태를 표시합니다.
ancilla 요소추가 .active class을 <a> 버튼에 추가하여 활성화 상태를 표시합니다.

다음 예제에서 이 점을 보여줍니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼 활성화 상태/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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%， 그리고 변화를 잃습니다.

아래 표는 버튼 요소와 ancilla 요소를 비활성화 상태로 만드는 클래스를 나열합니다：

요소Class
버튼 요소추가 disabled 속성 button> 버튼으로
ancilla 요소추가 disabled class a> 버튼으로

다음 예제에서 이 점을 보여줍니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼 비활성화 상태/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
테스트 보기 ‹/›

결과는 다음과 같습니다：

버튼 태그

a>、<button> 또는 <input> 요소에서 버튼 클래스를 사용할 수 있습니다. 그러나 <button> 요소에서 버튼 클래스를 사용하는 것이 좋습니다. 크로스 브라우저 불일치 문제를 피하기 위해서입니다.

다음 예제에서 이 점을 보여줍니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼 태그/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
테스트 보기 ‹/›

결과는 다음과 같습니다：

버튼 그룹

div에서 직접 .btn-group을 사용하여 버튼 그룹을 생성할 수 있습니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼(버튼) 플러그인 단일 선택 버튼/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>버튼 그룹/h2>
　　<p>.btn-group 클래스를 사용합니다：</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

버튼 그룹을 생성하기 위해 .btn-group-lg|sm|xs를 사용하여 버튼 그룹 크기를 제어합니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　버튼 그룹/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>버튼 그룹　-　버튼 크기를 설정합니다/h2>
　　<p>버튼 크기를 설정하려면 .btn-group-*　버튼 크기를 제어하기 위해 클래스를 사용합니다./p>
　　<h2>대형 버튼:</h2>
　　<div　class="btn-group　btn-group-lg">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>기본 크기 버튼:</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>소형 버튼:</h2>
　　<div　class="btn-group　btn-group-sm">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>超级小按钮:</h2>
　　<div　class="btn-group　btn-group-xs">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>垂直按钮组</h2>
　　<p>如果要设置垂直方向的按钮可以通过　.btn-group-vertical　类来设置：</p>
　　<div　class="btn-group-vertical">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

自适应大小的按钮组

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

以下示例使用 a 标签来展示：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>自适应按钮组</h2>
　　<p>以通过　.btn-group-justified　类来设置自适应大小的按钮组。</p>
　　<div　class="btn-group　btn-group-justified">
　　　　<a　href="#"　class="btn　btn-primary">Apple</a>
　　　　<a　href="#"　class="btn　btn-primary">Samsung</a>
　　　　<a　href="#"　class="btn　btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

注意: 如果是 <button> 元素, 你需要在外层使用 .btn-group 类来包裹:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>自适应按钮组</h2>
　　<div　class="btn-group　btn-group-justified">
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

内嵌下拉菜单的按钮组

按钮组内嵌的按钮可以设置下拉菜单，如下示例：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>内嵌按钮组</h2>
　　<p>内嵌按钮组创建下拉菜单：</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　Sony　<span　class="caret"></span></button>
　　　　　　<ul　class="dropdown-menu"　role="menu">
　　　　　　　　<li><a　href="#">태블릿</a></li>
　　　　　　　　<li><a　href="#">스마트폰</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

分割按钮

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>分隔按钮</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<ul　class="dropdown-menu"　role="menu">
　　　　　　<li><a　href="#">태블릿</a></li>
　　　　　　<li><a　href="#">스마트폰</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›
Bootstrap 이미지Bootstrap 양식