Bootstrap의 다양한 진행률 표시줄 예-HTML 튜토리얼-php.cn

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!