Bootstrap4 기본 강의

Bootstrap4 진행 표시줄

진행 표시줄은 사용자에게 작업이나 연산의 진행 상황을 표시할 수 있습니다. 다음 예제에서는 수직 변화를 가진 간단한 진행 표시줄을 생성하는 방법을 보여드리겠습니다.

진행 표시줄은 사용자의 작업 완료 과정을 표시할 수 있습니다.

기본 진행 표시줄을 생성하는 단계는 다음과 같습니다：

추가하십시오 .progress 클래스의 <div>.
그런 다음, 위의 <div> 내에 class를 추가하십시오 .progress-bar 의 빈 <div>.
빈 <div>에 style 속성을 추가하여 너비를 퍼센트로 설정할 수 있습니다. 예를 들어 style="width:70%"은 진행 표시줄이 70% 위치.

示例

!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>
　　<p>기본 진행 표시줄을 생성하려면, 컨테이너 요소에 .progress 클래스를 추가하고, 자식 요소에 progress-bar 클래스를 설정하고 진행 표시줄의 진행 상황을：</p>
　　<div class="progress">
　　　　<div class="progress-bar"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

진행 표시줄 높이

进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：

示例

!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>
　　<p>进度条高度默认为　16px。我们可以使用　CSS　的　height　属性来修改他：</p>　
　　<div　class="progress"　style="height:10px;">
　　　　<div class="progress-bar"　style="width:40%;"></div>
　　</div>
　　<br>
　　<div　class="progress"　style="height:20px;">
　　　　<div class="progress-bar"　style="width:50%;"></div>
　　</div>
　　<br>
　　<div　class="progress"　style="height:30px;">
　　　　<div class="progress-bar"　style="width:60%;"></div>
　　</div>
</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>
　　<div class="progress">
　　　　<div class="progress-bar"　style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

不同颜色的进度条

默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条：

示例

!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>
　　<p>Bootstrap4　提供了以下几种进度条颜色:</p>　
　　<div class="progress">
　　　　<div class="progress-bar"　style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info"　style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

条纹的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条：

示例

!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>
　　<p>可以使用　.progress-bar-striped　类来设置条纹进度条：</p>　
　　<div class="progress">
　　　　<div class="progress-bar　progress-bar-striped"　style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success　progress-bar-striped"　style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info　progress-bar-striped"　style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning　progress-bar-striped"　style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger　progress-bar-striped"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

动画进度条

使用 .progress-bar-animated 类可以为进度条添加动画：

示例

!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>
　　<p>使用　.progress-bar-animated　类可以为进度条添加动画：</p>　
　　<div class="progress">
　　　　<div class="progress-bar　progress-bar-striped　progress-bar-animated"　style="width:40%"></div>
　　</div>
</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>
　　<p>프로세스 바는 여러 가지 색상을 설정할 수 있습니다:</p>　
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%">
　　　　　　FREE SPACE
　　　　</div>
　　　　<div class="progress-bar bg-warning" style="width:10%">
　　　　　　WARNING
　　　　</div>
　　　　<div class="progress-bar bg-danger" style="width:20%">
　　　　　　DANGER
　　　　</div>
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

Bootstrap4 페이지네이션 Bootstrap4 메달