부트스트랩 동적 진행률 표시줄을 만드는 방법
- (*-*)浩원래의
- 2019-07-11 13:52:064365검색
이 튜토리얼에서는 부트스트랩을 사용하여 로드, 리디렉션 또는 작업 상태에 대한 진행률 표시줄을 만드는 방법을 보여줍니다.
Bootstrap 진행률 표시줄은 CSS3 전환 및 애니메이션을 사용하여 이 효과를 얻습니다. Internet Explorer 9 및 이전 버전의 Firefox는 이 기능을 지원하지 않으며 Opera 12는 애니메이션을 지원하지 않습니다. (권장 학습: 부트스트랩 비디오 튜토리얼)
애니메이션 진행률 표시줄
애니메이션 진행률 표시줄을 만드는 단계는 다음과 같습니다.
클래스 .progress 및 .progress-striped와 함께 또한 .active 클래스를 추가하세요. 다음으로, 위의 백분율로 표시되는 너비를 가진 스타일 속성을 추가합니다. 예를 들어 style="60%"는 진행률 표시줄이 60% 위치에 있음을 의미합니다. 이렇게 하면 줄무늬가 오른쪽에서 왼쪽으로 움직이는 느낌을 줄 수 있습니다. 다음 예를 살펴보겠습니다. 더 많은 Bootstrap 관련 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요! 위 내용은 부트스트랩 동적 진행률 표시줄을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<!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>