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

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

青灯夜游
풀어 주다： 2021-04-08 19:57:14
앞으로
2889명이 탐색했습니다.

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

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%로 알려줍니다

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

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 프레임워크의 줄무늬 진행률 표시줄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의 진행률 표시줄 구성 요소에 대한 자세한 설명

스트라이프 진행률 표시줄을 이동하기 위해 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의 진행률 표시줄 구성 요소에 대한 자세한 설명 계단식 진행률 표시줄

위에서 언급한 진행률 표시줄을 제공하는 것 외에도 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%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>
로그인 후 복사
로그인 후 복사

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

提示标签

在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，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>
로그인 후 복사

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

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 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의 진행률 표시줄 구성 요소에 대한 자세한 설명

更多编程相关知识，请访问：编程视频！！

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

관련 라벨：
bootstrap 进度条
원천：cnblogs.com
이전 기사：부트스트랩에서 측면 탐색 모음을 사용자 정의하는 방법에 대한 자세한 설명 다음 기사：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
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿