지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

Bootstrap의 다양한 진행률 표시줄 예

零下一度
풀어 주다： 2017-07-18 16:43:30
원래의
1487명이 탐색했습니다.

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

Bootstrap 진행률 표시줄은 CSS3 전환 및 애니메이션을 사용하여 이 효과를 얻습니다. Internet Explorer 9 및 이전 버전의 Firefox는 이 기능을 지원하지 않으며 Opera 12는 애니메이션을 지원하지 않습니다.

기본 진행률 표시줄

기본 진행률 표시줄을 만드는 단계는 다음과 같습니다.

클래스 .progress를 사용하여

를 추가합니다.

다음으로 위의

안에 .progress-bar 클래스가 있는 빈
를 추가합니다.

너비가 백분율로 표시되는 스타일 속성을 추가합니다. 예를 들어 style="60%"는 진행률 표시줄이 60% 위치에 있음을 의미합니다.

다음 예를 살펴보겠습니다.

예제

<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>
로그인 후 복사

기본 스타일

Bootstrap 프레임워크는 진행률 표시줄의 기본 스타일, 100% 너비의 배경색, 그리고 다음을 나타내는 강조 색상을 제공합니다. 완료 진행 . 실제로 이러한 진행률 표시줄을 만드는 것은 매우 쉽습니다. 일반적으로 두 개의 컨테이너가 사용되며, 외부 컨테이너는 특정 너비를 가지며 하위 요소는 너비를 설정합니다. % (즉, 상위 컨테이너의 너비 비율), 강조 배경색을 설정합니다

Bootstrap 프레임워크도 이러한 방식으로 구현됩니다. 외부 컨테이너는 "진행" 스타일을 사용합니다. , 하위 컨테이너는 "진행률 표시줄" 스타일을 사용합니다. 그 중 진행률은 진행률 표시줄의 컨테이너 스타일을 설정하는 데 사용되며 진행률 표시줄은 진행률 표시줄의 진행률을 제한하는 데 사용됩니다. 

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;  transition: width .6s ease;
}
로그인 후 복사
<div class="progress">   <div class="progress-bar" style="width:40%"></div></div>
로그인 후 복사

접근성을 작성하는 더 좋은 방법은 다음과 같습니다 

<div class="progress"><div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></div></div>
로그인 후 복사

역할 속성은 검색 엔진에 이 div를 알려줍니다. 함수는 진행률 표시줄입니다. aria-valuenow="40" 속성은 현재 진행률 표시줄에 진행률이 40%임을 알려줍니다. 진행률 표시줄의 최소값은 0%입니다. aria-valuemax="100" 속성은 진행률 표시줄의 최대값이 100%임을 알립니다


색상 진행률 표시줄

부트스트랩의 진행률 표시줄 프레임워크는 사용자에게 더 나은 경험을 제공하기 위해 경고 메시지 상자와 동일하며 다양한 상태에 따라 구성됩니다. 여기서는 컬러 진행 표시줄이라고 하며 주로 다음 네 가지 유형을 포함합니다.

　xml Progress-bar-info: 정보 진행 표시줄을 나타내며 진행 표시줄의 색상은 파란색입니다.

　xml Progress-bar-success: 표시 성공적인 진행 바, 진행 바의 색상은 녹색입니다

　xml Progress-bar-warning: 경고 진행 바를 나타냅니다. 진행 바의 색상은 노란색입니다

　xml Progress-bar-danger: 오류 진행 바를 나타냅니다. , 진행 표시줄 색상이 빨간색입니다

　 구체적인 사용법은 매우 간단합니다. 기본 진행 표시줄에 해당 클래스 이름을 추가하면 됩니다. 기본 진행 표시줄과 비교하면 진행 표시줄 색상이 a로 변경되었습니다. 어느 정도

.progress-bar-success {
  background-color: #5cb85c;
}.progress-bar-info {
  background-color: #5bc0de;
}.progress-bar-warning {
  background-color: #f0ad4e;
}.progress-bar-danger {
  background-color: #d9534f;
}
로그인 후 복사
<div class="progress"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>
로그인 후 복사

스트라이프 진행률 표시줄

부트스트랩 프레임워크에서는 컬러 진행률 표시줄을 제공하는 것 외에도 그림을 사용하지 않고 CSS3 선형 그래디언트를 사용하여 구현되는 줄무늬 진행률 표시줄도 제공합니다. 부트스트랩 프레임워크에서 줄무늬 진행률 표시줄을 사용하려면 진행률 표시줄의 컨테이너 "progress"에 클래스 이름 "progress-striped"만 추가하면 됩니다. 물론 진행률 표시줄 줄무늬에 색상 효과를 적용하려는 경우입니다. 컬러 진행과 마찬가지로 진행률 표시줄 컨테이너에 클래스 이름 "progress-striped"만 추가하면 됩니다. 해당 색상 클래스 이름을 표시줄에 추가하세요

　　[참고] 그라데이션을 통해 진행률 표시줄에 줄무늬 효과를 만들 수 있습니다. IE9-browser

.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
로그인 후 복사
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
로그인 후 복사
<div class="progress progress-striped"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>
로그인 후 복사


동적 줄무늬

　스트라이프 진행률 표시줄을 이동하기 위해 Bootstrap 프레임워크는 동적 스트라이프 진행률 표시줄도 제공합니다. 구현 원리는 주로 CSS3의 애니메이션을 통해 이루어집니다. 먼저 @keyframes를 통해 진행률 표시줄 애니메이션이 생성됩니다. 이 애니메이션은 주로 배경 이미지의 위치를 ​​변경하는 작업, 즉 background-position 값을 변경합니다. 스트라이프 진행바는 CSS3의 선형 그래디언트를 통해 만들어지고, Linear-gradient는 해당 배경에 배경 이미지를 구현하기 때문입니다

　　[참고] IE9-browser는 지원하지 않습니다

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}
로그인 후 복사

　Bootstrap 프레임워크에서는 Add를 통해 진행률 표시줄 컨테이너 "progress"에 클래스 이름 "active"를 적용하고 문서가 로드될 때 "진행률 표시줄" 애니메이션이 적용되도록 하여 오른쪽에서 왼쪽으로 이동하는 애니메이션 효과를 보여줍니다

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;  animation: progress-bar-stripes 2s linear infinite;
}
로그인 후 복사
<div class="progress progress-striped active"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>
로그인 후 복사


계단식 진행률 표시줄

　 위에서 언급한 진행률 표시줄 외에도 Bootstrap 프레임워크는 계단식 진행률 표시줄도 제공합니다. 계단식 진행률 표시줄은 서로 다른 상태의 진행률 표시줄을 함께 배치하고 수평으로 배열할 수 있습니다.

여러 개의 진행률 표시줄을 동일한 .progress에 넣어 누적된 것처럼 보이도록 

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"><span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span>
  </div></div>
로그인 후 복사


[참고] 계단식 진행률 표시줄의 합은 다음과 같을 수 없습니다. 100%보다 큼

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 40%"></div></div>
로그인 후 복사


提示标签

　　在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div></div>
로그인 후 복사


　　在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性 

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div></div>
로그인 후 복사


 

위 내용은 Bootstrap의 다양한 진행률 표시줄 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap 일정
원천：php.cn
이전 기사：랜딩 페이지 디자인에 대한 예제 튜토리얼 다음 기사：Bootstrap 썸네일에 대한 자세한 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
에서 2024-04-05 08:45:39
0
1
3443
Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
에서 2024-04-04 22:16:18
0
1
1450
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿