Bootstrap4 기본 가이드

Bootstrap4 버튼

버튼은 웹사이트와 애플리케이션의 구성 요소입니다. 다양한 목적을 위해 사용되며, 예를 들어 HTML 양식을 제출하거나 초기화하거나, 상호작용을 수행하는 데 사용됩니다. 예를 들어, 버튼을 클릭하면 웹 페이지에서 특정 내용을 표시하거나 숨기거나, 사용자를 다른 페이지로 이동시키는 것 등입니다. Bootstrap는 버튼을 생성하고 사용자 정의하는 데 빠르고 간편한 방법을 제공합니다.

Bootstrap 4 다양한 스타일의 버튼을 제공합니다。

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>버튼 스타일</h2>
　　<button　type="button"　class="btn">기본 버튼</button>
　　<button type="button" class="btn btn-primary">주요 버튼</button>
　　<button type="button" class="btn btn-secondary">보조 버튼</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-dark">검은 색상</button>
　　<button type="button" class="btn btn-light">밝은 색상</button>
　　<button type="button" class="btn btn-link">링크</button>　　　　　　
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

버튼 클래스는 <a>, <button>, 또는 <input> 요소에:

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>버튼 요소</h2>
　　<a href="#" class="btn btn-info"　role="button">링크 버튼</a>
　　<button type="button" class="btn btn-info">버튼</button>
　　<input　type="button"　class="btn　btn-info"　value="입력 필드 버튼">
　　<input　type="submit"　class="btn　btn-info"　value="제출 버튼">　
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

버튼 경계 설정

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>버튼 경계 설정</h2>
　　<button type="button" class="btn btn-outline-primary">주요 버튼</button>
　　<button type="button" class="btn btn-outline-secondary">보조 버튼</button>
　　<button type="button" class="btn btn-outline-success">성공</button>
　　<button type="button" class="btn btn-outline-info">정보</button>
　　<button type="button" class="btn btn-outline-warning">경고</button>
　　<button type="button" class="btn btn-outline-danger">위험</button>
　　<button type="button" class="btn btn-outline-dark">검은 색상</button>
　　<button type="button" class="btn btn-outline-light　text-dark">밝은 색상</button>
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

다양한 크기의 버튼

Bootstrap 4 버튼 크기를 설정할 수 있습니다：

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>다양한 크기의 버튼</h2>
　　<button type="button" class="btn btn-primary　btn-lg">대형 버튼</button>
　　<button type="button" class="btn btn-primary">기본 버튼</button>
　　<button type="button" class="btn btn-primary　btn-sm">소형 버튼</button>
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

블록 버튼

btn 클래스를 추가하여-block 클래스는 블록 버튼을 설정할 수 있습니다：

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>블록 버튼</h2>
　　<button type="button" class="btn btn-primary　btn-block">버튼　1</button>
　　<button type="button" class="btn btn-default　btn-block">버튼　2</button>
　　<h2>큰 블록 버튼</h2>
　　<button type="button" class="btn btn-primary　btn-lg　btn-block">버튼　1</button>
　　<button type="button" class="btn btn-default　btn-lg　btn-block">버튼　2</button>
　　<h2>작은 블록 버튼</h2>
　　<button type="button" class="btn btn-primary　btn-sm　btn-block">버튼　1</button>
　　<button type="button" class="btn btn-default　btn-sm　btn-block">버튼　2</button>
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

활성화와 비활성화 버튼

버튼은 활성화 또는 클릭 금지 상태로 설정할 수 있습니다.

.active 클래스는 버튼을 사용가능하게 설정하며, disabled 속성은 버튼을 클릭 불가능하게 설정합니다. disabled 속성을 지원하지 않습니다. 속성을 추가하여 링크를 클릭 금지할 수 있습니다. .disabled 클래스를 추가하면 됩니다.

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>버튼 상태</h2>
　　<button type="button" class="btn btn-primary">주요 버튼</button>
　　<button type="button" class="btn btn-primary active">클릭된 버튼</button>
　　<button type="button" class="btn btn-primary disabled">클릭 금지된 버튼</button>
　　<a href="#" class="btn btn-primary disabled">클릭 금지된 링크</a>
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

Bootstrap4 버튼 그룹 Bootstrap4 정보 팝업