부트스트랩에서 진행률 표시줄을 설정하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩에서 진행률 표시줄을 설정하는 방법

1. 구현 방법은 다음과 같습니다. 🎜🎜#

(1) 부트랩 파일을 소개합니다:

 <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

로그인 후 복사

(2)

;

#🎜🎜 추가 #(3)

<div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">

로그인 후 복사

aria-valuenow="40"을

에 추가하세요. 진행 표시줄

aria-valuemax="100" - 최대 진행률 값입니다.

aria-valuemin="0" - 최소 진행 값.

style="width:40%;" - 진행률 표시줄이 40% 위치를 가리키도록 합니다.

완전한 코드는 다음과 같습니다:




    
    进度条
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">



    默认的进度条

로그인 후 복사

위는 기본 진행률 표시줄을 구현하는 것으로, 배경색은 회색, 진행색은 파란색입니다. 을 기반으로 하는 기본 진행률 표시줄, 다양한 스타일을 추가하여 다채로운 진행률 표시줄을 얻을 수 있습니다.

2. 색상을 지정하세요.

progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

<div class="progress">
    <div class="progress-bar progress-bar-success"style="width: 90%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 30%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 20%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 10%;">
    </div>
</div>

로그인 후 복사

# 🎜🎜#

3. 루트 div에 진행 줄무늬를 추가하면 줄무늬 모양을 얻을 수 있습니다. 부트스트랩에서 진행률 표시줄을 설정하는 방법

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 90%;">
    </div>
   </div>

로그인 후 복사

4. 애니메이션 진행률 표시줄을 달성했습니다.

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" 
         style="width: 40%;">
    </div>
  </div>

로그인 후 복사

권장:

부트스트랩 진입 튜토리얼

위 내용은 부트스트랩에서 진행률 표시줄을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

bootstrap 进度条

원천：php.cn

이전 기사：부트스트랩에서 페이징 기술을 구현하는 방법 다음 기사：부트스트랩에서 적응형 높이를 구현하는 방법

본 웹사이트의 성명

저자별 최신 기사

PHP+redis는 잠금 및 잠금 해제 작업을 구현합니다.

2020-06-20 16:55:06
redis 명령을 추가하는 방법

2020-06-20 16:40:40
Redis 캐시를 SpringBoot와 통합하는 방법 소개

2020-06-20 16:30:28
Layui에서 체크박스 선택 상태를 동적으로 설정하는 방법 소개

2020-06-20 16:12:34
'사전'이 비어 있는지 확인하는 JavaScript 방법

2020-06-20 13:30:41
Go 언어로 패키지를 사용자 정의하는 방법

2020-06-19 17:51:14
Go 언어의 구조와 방법에 대한 자세한 설명

2020-06-19 17:44:19
자바 배열에 일반적으로 사용되는 10가지 메소드

2020-06-19 17:28:02
파이썬에서 문자열을 연결하는 5가지 방법

2020-06-19 17:18:44
파이썬에서 숫자 목록을 만드는 방법

2020-06-19 17:10:59

에서 2024-04-06 21:58:04

800

CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...

에서 2024-04-06 20:22:15

454

CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...

에서 2024-04-06 12:53:11

376

웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

에서 2024-04-05 08:45:39

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

1450