집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

青灯夜游앞으로: 2021-12-10 19:18:184326검색

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 읽기 아이콘(Spinners) 구성 요소의 사용법을 소개하고 구성 요소 로딩 상태를 나타내는 아이콘을 읽는 방법을 알아보겠습니다.

1 단순 읽기 아이콘

구성 요소 로딩 상태를 나타내는 읽기 아이콘에는 Bootstrap을 사용합니다. 이러한 읽기 아이콘은 JavaScript를 사용하지 않고 HTML과 CSS를 완전히 사용합니다. 모양, 정렬 및 크기는 일반 클래스를 통해 사용자 정의할 수 있지만 표시를 전환하려면 여전히 사용자 정의 JavaScript가 필요합니다. [관련 추천: "부트스트랩 튜토리얼"]

다음은 간단한 읽기 아이콘입니다

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>读取图标</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <div role="status">
            <span>Loading...</span>
        </div>

      </div>
  </body>
</html>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

2 Color

테두리 읽기 아이콘은 현재Color를 테두리 색상으로 사용하므로 텍스트 색상을 사용할 수 있습니다. 색상을 사용자 정의할 수 있는 일반 카테고리입니다. 표준 읽기 아이콘에는 모든 공통 카테고리의 색상을 사용할 수 있습니다.

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

3 그라데이션 읽기 아이콘

테두리 읽기 아이콘이 마음에 들지 않으면 그라데이션 읽기 아이콘으로 전환할 수 있습니다. 기술적으로는 회전하지 않지만 계속해서 희미해집니다! 그라데이션 아이콘은 다양한 색상도 지원합니다.

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

위와 마찬가지로 이 읽기 아이콘도 currentColor를 사용하므로 텍스트 색상 범용 카테고리를 사용하여 모양을 쉽게 변경할 수 있습니다. 여기에 파란색이 있고 파란색이 지원하는 색상 변형이 있습니다.

<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

4 여백

여백 유틸리티를 사용하여 m-5처럼 간격을 늘리세요.

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

5 정렬

플렉스박스 범용 카테고리, 부동 범용 카테고리 또는 텍스트 레이아웃을 사용하여 어떤 경우에도 필요한 위치에 읽기 아이콘을 정확하게 배치하세요.

5.1 Flex

다음은 가운데 정렬

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

오른쪽 정렬

<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

5.2 Float

오른쪽 정렬입니다.

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

5.3 텍스트 일반 class

텍스트 일반 클래스는 중앙 정렬을 구현합니다.

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

6 크기

spinner-border-sm 및 spinner-grow-sm을 추가하여 다른 위치에 표시할 수 있도록 더 작은 읽기 아이콘을 만듭니다. 구성 요소는 다음과 같습니다. 빨리 사용됨.

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

더 큰 아이콘 표시

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>

1Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

7개 버튼

버튼 내 읽기 아이콘을 사용한다는 것은 현재 처리 중이거나 작업이 진행 중이라는 의미입니다. 버튼 텍스트를 사용하여 필요에 따라 읽기 아이콘의 텍스트를 변경할 수도 있습니다.

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

1Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

1Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기

부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !

위 내용은 Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css bootstrap html Float margin border flex

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：개발 속도를 향상시키기 위해 15개의 무료 Bootstrap5 사용자 정의 구성 요소 생성기를 공유하세요!다음 기사：개발 속도를 향상시키기 위해 15개의 무료 Bootstrap5 사용자 정의 구성 요소 생성기를 공유하세요!