작업 완료를 나타내는 Bootstrap의 Progress Bar 구성 요소를 어떻게 사용합니까?-부트스트랩 튜토리얼-php.cn

작업 완료를 나타내는 Bootstrap의 Progress Bar 구성 요소를 어떻게 사용합니까?

부트 스트랩의 진행률 표시 줄 구성 요소를 사용하여 작업 완료를 나타내려면 다음을 수행해야합니다.

부트 스트랩 포함 : 프로젝트에 부트 스트랩이 포함되어 있는지 확인하십시오. 부트 스트랩 CSS 및 JavaScript 파일을 프로젝트에 추가하거나 CDN을 사용하여이를 수행 할 수 있습니다.

HTML 구조 : 기본 진행률 표시 줄에 다음 HTML 구조를 사용하십시오.

 <code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div></code>

로그인 후 복사

진행 상황 설정 : 진행 상황을 설정하려면 .progress-bar 의 width 조정하고 aria-valuenow 속성을 업데이트해야합니다. 예를 들어 작업이 50% 완료되면 HTML이 다음과 같습니다.
```
 <code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
```
로그인 후 복사

선택적 레이블 : 진행률 표시 줄 내부의 백분율을 표시하기 위해 레이블을 추가 할 수도 있습니다.

 <code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div></code>

로그인 후 복사

이 단계를 수행하면 부트 스트랩의 진행률 표시 줄을 사용하여 작업의 완료 상태를 시각적으로 표시 할 수 있습니다.

Bootstrap의 진행률 표시 줄에 사용할 수있는 다양한 사용자 정의 옵션은 무엇입니까?

Bootstrap의 Progress Bar 구성 요소는 다양한 요구에 맞는 몇 가지 사용자 정의 옵션을 제공합니다.

색상 : .bg-success , .bg-info , .bg-warning 또는 .bg-danger 와 같은 상황에 맞는 클래스를 추가하여 진행률 표시 줄의 색상을 변경할 수 있습니다.

 <code class="html"><div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>

로그인 후 복사

스트라이프 : .progress-bar-striped 클래스를 포함하여 진행률 표시 줄에 줄무늬 효과를 추가하십시오.

 <code class="html"><div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>

로그인 후 복사

애니메이션 줄무늬 : 줄무늬를 애니메이션하기 위해 .progress-bar .progress-bar-striped .progress-bar-animated 클래스를 추가하십시오.

 <code class="html"><div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>

로그인 후 복사

높이 : .progress 컨테이너의 height 속성을 수정하여 진행률 막대의 높이를 조정할 수 있습니다.

 <code class="html"><div class="progress" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 50%; height: 20px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>

로그인 후 복사

다중 막대 : 단일 .progress 컨테이너 내에 여러 개의 진행 막대를 표시하여 여러 진행 상황 상태를 동시에 나타낼 수 있습니다.

 <code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div></code>

로그인 후 복사

이러한 사용자 정의 옵션을 사용하면 특정 요구 사항에 맞게 부트 스트랩 진행률 표시 줄의 모양과 기능을 조정할 수 있습니다.

실시간 업데이트를 표시하기 위해 Bootstrap의 진행률 표시 줄을 어떻게 애니메이션 할 수 있습니까?

부트 스트랩의 진행률 표시 줄을 애니메이션하기 위해 실시간 업데이트를 표시하려면 JavaScript를 사용하여 .progress-bar 의 width 동적으로 업데이트 할 수 있습니다. 다음은이 작업을 수행하는 방법의 예입니다.

HTML 구조 : 기본 진행률 막대 구조로 시작하십시오.

 <code class="html"><div class="progress" id="myProgress"> <div class="progress-bar" role="progressbar" id="myBar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div></code>

로그인 후 복사

JavaScript 코드 : JavaScript를 사용하여 진행률 표시 줄을 애니메이션하십시오. 다음 예는 0%에서 100%로 원활한 전환을 보여줍니다.

 <code class="javascript">let progressBar = document.getElementById("myBar"); let width = 0; let interval = setInterval(frame, 50); function frame() { if (width >= 100) { clearInterval(interval); } else { width ; progressBar.style.width = width "%"; progressBar.setAttribute("aria-valuenow", width); progressBar.innerHTML = width "%"; } }</code>

로그인 후 복사

CSS 전환 : 애니메이션을 부드럽게 만들려면 .progress-bar 에 CSS 전환을 추가 할 수 있습니다.
```
 <code class="css">.progress-bar { transition: width 0.5s ease-in-out; }</code>
```
로그인 후 복사

이 JavaScript 코드는 50 밀리 초마다 진행률 표시 줄의 폭을 점차 증가시켜 실시간 업데이트가 나타납니다. 특정 요구에 맞게 interval 및 width 증분을 조정할 수 있습니다.

부트 스트랩의 진행률 표시 줄을 사용하여 여러 진행 상황을 동시에 표시 할 수 있습니까?

예, Bootstrap의 진행률 표시 줄을 사용하여 단일 .progress 컨테이너에 여러 .progress-bar 요소를 배치하여 여러 진행 상황 상태를 동시에 표시 할 수 있습니다. 다음은 다음과 같은 방법입니다.

HTML 구조 : .progress 컨테이너를 생성하고 그 안에 여러 .progress-bar 요소를 추가하십시오.

 <code class="html"><div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div> </div></code>

로그인 후 복사