부트스트랩 동적 진행률 표시줄을 만드는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩 동적 진행률 표시줄을 만드는 방법

(*-*)浩

풀어 주다： 2019-07-11 13:52:06

원래의

4423명이 탐색했습니다.

이 튜토리얼에서는 부트스트랩을 사용하여 로드, 리디렉션 또는 작업 상태에 대한 진행률 표시줄을 만드는 방법을 보여줍니다.

부트스트랩 동적 진행률 표시줄을 만드는 방법

Bootstrap 진행률 표시줄은 CSS3 전환 및 애니메이션을 사용하여 이 효과를 얻습니다. Internet Explorer 9 및 이전 버전의 Firefox는 이 기능을 지원하지 않으며 Opera 12는 애니메이션을 지원하지 않습니다. (권장 학습: 부트스트랩 비디오 튜토리얼)

애니메이션 진행률 표시줄

애니메이션 진행률 표시줄을 만드는 단계는 다음과 같습니다.

클래스 .progress 및 .progress-striped와 함께

또한 .active 클래스를 추가하세요.

다음으로, 위의

안에 .progress-bar 클래스가 있는 빈

를 추가합니다.

백분율로 표시되는 너비를 가진 스타일 속성을 추가합니다. 예를 들어 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>

로그인 후 복사

더 많은 Bootstrap 관련 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

위 내용은 부트스트랩 동적 진행률 표시줄을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!