Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap 진행 표시줄

이 장에서는 Bootstrap 진행 표시줄을 설명합니다. 이 튜토리얼에서는 Bootstrap를 사용하여 로드, 리디렉션 또는 액션 상태의 진행 표시줄을 만드는 방법을 보여줍니다.

Bootstrap 진행 표시줄은 CSS를 사용합니다3 트랜지션과 애니메이션을 사용하여 이 효과를 얻습니다. Internet Explorer 9 및 이전 버전과 오래된 Firefox는 이 기능을 지원하지 않으며, Opera 12 애니메이션을 지원하지 않습니다。

기본적인 진행 표시줄

기본적인 진행 표시줄을 만드는 단계는 다음과 같습니다：

를 추가합니다. .progress 의 <div>를 추가합니다.
그런 다음, 위의 <div> 내에 class .progress-bar 의 비어 있는 <div>.
백분율을 표시하는 스타일 속성을 추가하십시오. 예를 들어 style="width: 60%";은 진행 표시가 60%의 위치.

아래 예제를 보겠습니다:

온라인 예제

예제

!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="progress">
	<div　class="progress-bar"　role="progressbar"　aria-valuenow="60"
		　aria-valuemin="0" aria-valuemax="100"　style="width:　40%;">
		<span class="sr-only">40%　완료</span>
	</div>
</div>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

대체 진행 표시줄

다른 스타일의 진행 표시줄을 만드는 단계는 다음과 같습니다：

를 추가합니다. .progress 의 <div>를 추가합니다.
그런 다음, 위의 <div> 내에 class .progress-bar 와 class progress-bar-* 의 비어 있는 <div>에서,* 가 될 수 있습니다. success、info、warning、danger를 추가합니다.
추가하려면 style 속성에 비율을 추가할 수 있습니다. 예를 들어 style="60%";은 진행 표시가 60%의 위치.

아래 예제를 보겠습니다:

온라인 예제

예제

!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="progress">
	<div　class="progress-bar　progress-bar-success"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　90%;">
		<span class="sr-only">90%　완료（성공）</span>
	</div>
</div>
<div　class="progress">
	<div　class="progress-bar　progress-bar-info"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　30%;">
		<span class="sr-only">30%　완료（정보）</span>
	</div>
</div>
<div　class="progress">
	<div　class="progress-bar　progress-bar-warning"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　20%;">
		<span class="sr-only">20% 완료(경고)</span>
	</div>
</div>
<div　class="progress">
	<div　class="progress-bar　progress-bar-danger"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　10;">
		<span class="sr-only">10%　완료（위험）</span>
	</div>
</div>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

스트립트 진행 표시

스트립트 진행 표시를 만드는 단계는 다음과 같습니다：

를 추가합니다. .progress 와 .progress-striped 의 <div>를 추가합니다.
그런 다음, 위의 <div> 내에 class .progress-bar 와 class progress-bar-* 의 비어 있는 <div>에서,* 가 될 수 있습니다. success、info、warning、danger를 추가합니다.
추가하려면 style 속성에 비율을 추가할 수 있습니다. 예를 들어 style="60%";은 진행 표시가 60%의 위치.

아래 예제를 보겠습니다:

온라인 예제

예제

!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="progress　progress-striped">
　　　　<div　class="progress-bar　progress-bar-success"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width:　90%;">
　　　　　　　　<span class="sr-only">90%　완료（성공）</span>
　　　　</div>
</div>
<div　class="progress　progress-striped">
　　　　<div　class="progress-bar　progress-bar-info"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width:　30%;">
　　　　　　　　<span class="sr-only">30%　완료（정보）</span>
　　　　</div>
</div>
<div　class="progress　progress-striped">
　　　　<div　class="progress-bar　progress-bar-warning"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width:　20%;">
　　　　　　　　<span class="sr-only">20% 완료(경고)</span>
　　　　</div>
</div>
<div　class="progress　progress-striped">
　　　　<div　class="progress-bar　progress-bar-danger"　role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width:　10;">
　　　　　　　　<span class="sr-only">10%　완료（위험）</span>
　　　　</div>
</div>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

애니메이션 진행 표시

애니메이션 진행 표시를 만드는 단계는 다음과 같습니다：

를 추가합니다. .progress 와 .progress-striped 를 추가합니다. 또한 class .active를 추가합니다.
그런 다음, 위의 <div> 내에 class .progress-bar 의 비어 있는 <div>.
추가하려면 style 속성에 비율을 추가할 수 있습니다. 예를 들어 style="60%";은 진행 표시가 60%의 위치.

이는 가로선이 우측에서 좌측으로 움직이는 효과를 줍니다.

아래 예제를 보겠습니다:

온라인 예제

예제

!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="progress　progress-striped　active">
	<div　class="progress-bar　progress-bar-success"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　40%;">
		<span class="sr-only">40%　완료</span>
	</div>
</div>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

단계별 진행 표시

여러 개의 진행 표시를 쌓을 수 있습니다. 여러 개의 진행 표시를 같은 .progress 에서 단계별로 진행이 가능합니다. 아래 예제와 같이:

온라인 예제

예제

!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="progress">
	<div　class="progress-bar　progress-bar-success"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　40%;">
		<span class="sr-only">40%　완료</span>
	</div>
	<div　class="progress-bar　progress-bar-info"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　30%;">
		<span class="sr-only">30%　완료（정보）</span>
	</div>
	<div　class="progress-bar　progress-bar-warning"　role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width:　20%;">
		<span class="sr-only">20% 완료(경고)</span>
	</div>
</div>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 멀티미디어 객체 Bootstrap 경고