Bootstrap의 진행률 표시줄 구성 요소에 대한 자세한 설명

이 글에서는 부트스트랩의 진행률 표시줄 구성요소에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

웹 페이지에서는 로딩 상태 등 채점 시스템 등 진행률 표시줄의 효과가 흔하지 않습니다. 간단하고 유연한 진행률 표시줄을 통해 현재 작업 흐름에 대한 실시간 피드백을 제공할 수 있거나 행동. 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>

role 속성이 검색을 알려줍니다. 이 p의 기능은 진행률 표시줄입니다. -valuenow="40" 속성은 현재 진행률 표시줄의 진행률이 40%임을 알려줍니다. aria-valuemin="0" 속성은 진행률의 최소값을 알려줍니다. bar는 0%입니다. aria-valuemax="100" 속성은 진행률 표시줄의 최대값을 100%로 알려줍니다

Colored Progress Bar

Bootstrap 프레임워크의 진행률 표시줄은 다음과 같습니다. 사용자에게 더 나은 경험을 제공하기 위해 다양한 상태에 따라 다양한 진행률 표시줄 색상이 구성됩니다. 여기서는 컬러 진행률 표시줄이라고 하며 주로 다음 4가지 유형을 포함합니다.

🙌 Progress-bar-info: 정보 진행률 표시줄을 나타내며, 진행률 표시줄의 색상은 파란색입니다. 성공적인 진행률 표시줄, 진행률 표시줄 색상은 녹색입니다

🙌 Progress-bar-warning: 경고 진행률 표시줄을 나타내며 진행률 표시줄 색상은 노란색입니다

🙌 Progress-bar-danger: 오류 진행률 표시줄, 진행률 표시줄 색상은 빨간색입니다

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

.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>

Bootstrap 프레임워크의 줄무늬 진행률 표시줄

색상이 있는 진행률 표시줄을 제공하는 것 외에도 그림을 사용하지 않고 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의 선형 그래디언트를 통해 만들어지고, 선형 그래디언트는 해당 배경에 배경 이미지를 구현하기 때문입니다[참고] 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;
  }
}

를 지원하지 않습니다

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

Bootstrap 프레임워크에서는 프로그레스를 제공하여 클래스 이름 "active"를 스트립 컨테이너 "progress"로 지정하고 문서가 로드되자마자 "progress-bar-stripes" 애니메이션이 적용되도록 하여 오른쪽에서 왼쪽으로 이동하는 애니메이션 효과를 보여줍니다

<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>

<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>

계단식 진행률 표시줄

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

여러 진행률 표시줄을 동일한

에 넣어 누적된 것처럼 보이도록

<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>

.progress

[참고] 계단식 진행률 표시줄의 합은 다음보다 클 수 없습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!