Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 읽기 아이콘(Spinners) 구성 요소의 사용법을 소개하고 구성 요소 로딩 상태를 나타내는 아이콘을 읽는 방법을 알아보겠습니다.
구성 요소 로딩 상태를 나타내는 읽기 아이콘에는 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>테두리 읽기 아이콘은 현재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>
테두리 읽기 아이콘이 마음에 들지 않으면 그라데이션 읽기 아이콘으로 전환할 수 있습니다. 기술적으로는 회전하지 않지만 계속해서 희미해집니다! 그라데이션 아이콘은 다양한 색상도 지원합니다.
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
위와 마찬가지로 이 읽기 아이콘도 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>
여백 유틸리티를 사용하여 m-5처럼 간격을 늘리세요.
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
플렉스박스 범용 카테고리, 부동 범용 카테고리 또는 텍스트 레이아웃을 사용하여 어떤 경우에도 필요한 위치에 읽기 아이콘을 정확하게 배치하세요.
5.1 Flex
다음은 가운데 정렬
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
오른쪽 정렬
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
5.2 Float
오른쪽 정렬입니다.
<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
5.3 텍스트 일반 class
텍스트 일반 클래스는 중앙 정렬을 구현합니다.
<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
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>
더 큰 아이콘 표시
<div class="spinner-border" style="max-width:90%" 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>
버튼 내 읽기 아이콘을 사용한다는 것은 현재 처리 중이거나 작업이 진행 중이라는 의미입니다. 버튼 텍스트를 사용하여 필요에 따라 읽기 아이콘의 텍스트를 변경할 수도 있습니다.
<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>
<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>
부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
위 내용은 Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
 구성 요소 읽기 "163913466050885Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913466620244Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913467239610Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913467758018Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913468163927Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913468664185Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913468913696Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913469457450Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913469981221Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913470394754Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913470774160Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
 구성 요소 읽기 "163913471279683Bootstrap에서 로딩 효과를 얻는 방법은 무엇입니까? 아이콘(스피너) 구성 요소 읽기")
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
