Bootstrap4 기본 튜토리얼

Bootstrap4 엠블럼

엠블럼은 웹 페이지에서 중요한 제목, 경고 메시지, 알림 카운터 등 유용한 정보를 표시하는 데 사용됩니다. 엠블럼(Badges)은 새로운 또는 읽지 않은 항목을 강조하는 데 주로 사용됩니다. 엠블럼을 사용하려면 .badge 클래스와 특정 의미를 가진 색상 클래스(예: .badge-secondary)을 <span> 요소에 추가하면 됩니다. 엠블럼은 부모 요소의 크기 변화에 따라 변할 수 있습니다:

예제

!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>
<h1>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h1>
<h2>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h2>
<h3>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h3>
<h4>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h4>
<h5>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h5>
<h6>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h6>
</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>
　　<span　class="badge　badge-primary">주요</span>
　　<span　class="badge　badge-secondary">보조</span>
　　<span　class="badge　badge-success">성공</span>
　　<span　class="badge　badge-danger">위험</span>
　　<span　class="badge　badge-warning">경고</span>
　　<span　class="badge　badge-info">정보</span>
　　<span　class="badge　badge-light">반짝이는</span>
　　<span　class="badge　badge-dark">어둡은</span>
</div>
</body>
</html>

테스트를 보세요.‹/›

약간 모양의 엠블럼

.badge를 사용하여-pill 클래스를 사용하여 약간 모양의 엠블럼을 설정합니다:

예제

!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>
　　<span　class="badge　badge-pill　badge-default">기본</span>
　　<span　class="badge　badge-pill　badge-primary">주요</span>
　　<span　class="badge　badge-pill　badge-success">성공</span>
　　<span　class="badge　badge-pill　badge-info">정보</span>
　　<span　class="badge　badge-pill　badge-warning">경고</span>
　　<span　class="badge　badge-pill　badge-danger">위험</span>
</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-primary">
　　　　Messages　<span　class="badge　badge-light">4</span>
　　</button>
　　<button　type="button"　class="btn　btn-danger">
　　　　Notifications　<span　class="badge　badge-light">7</span>
　　</button>
</div>
</body>
</html>

테스트를 보세요.‹/›

Bootstrap4 진행 표시줄 Bootstrap4 버튼 그룹