부트 스트랩의 스피너 구성 요소를 사용하여 로딩 상태를 나타내는 방법은 무엇입니까?

부트 스트랩의 스피너 구성 요소를 사용하여 로딩 상태를 나타내는 방법은 무엇입니까?

Bootstrap의 스피너 구성 요소는 웹 응용 프로그램의 로딩 상태를 나타내는 효과적인 방법입니다. 스피너를 사용하려면 먼저 프로젝트에 부트 스트랩을 포함해야합니다. HTML 문서의 섹션에서 Bootstrap의 CSS 파일에 링크하여이를 수행 할 수 있습니다.

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"></code>

부트 스트랩이 포함되면 적절한 HTML 마크 업을 사용하여 페이지에 스피너를 추가 할 수 있습니다. 다음은 Border Spinner를 사용하는 방법의 기본 예입니다.

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

spinner-border 클래스는 테두리가있는 스피너를 만듭니다. 스피너 내부의 <span></span> 은 접근성을위한 것이므로 스크린 리더가 로딩 상태를 발표 할 수 있습니다.

대신 성장하는 스피너가 필요한 경우 spinner-grow 클래스를 사용할 수 있습니다.

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

스피너를 다양한 방식으로 배치하여 페이지에 중심을 세우거나 버튼이나 양식에 포함시키는 것과 같은 로딩 상태를 표시 할 수 있습니다. 예를 들어, 페이지의 스피너를 중앙에 있으려면 Flex 유틸리티를 사용할 수 있습니다.

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

부트 스트랩에서 사용할 수있는 다양한 유형의 스피너는 무엇이며 어떻게 다릅니 까?

Bootstrap은 spinner-border 과 spinner-grow 의 두 가지 주요 스피너 유형을 제공합니다. 다음은 각 유형과 다른 방법에 대한 자세한 내용입니다.

1. 스피너 국경 :

   • 이 스피너는 원 주위를 돌리는 테두리가있어 회전 효과를 만듭니다.
   • spinner-border 클래스를 사용하여 만들어졌습니다.
   • 회전 테두리는 색상과 크기로 사용자 정의 할 수 있습니다.

   예:

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

2. 스피너-재배 :

   • 이 스피너는 성장하고 축소되는 맥동 효과를 사용합니다.
   • 그것은 spinner-grow 클래스를 사용하여 만들어졌습니다.
   • Border Spinner와 유사하게 색상과 크기로 사용자 정의 할 수 있습니다.

   예:

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

이 두 유형의 주요 차이점은 시각적 외관과 애니메이션 스타일입니다. spinner-border 더 전통적이고 널리 사용되는 원형 회전을 제공하는 반면, spinner-grow 일부 사용자에게 더 시각적으로 참여할 수있는 맥동 애니메이션을 제공합니다.

웹 사이트 디자인에 맞게 부트 스트랩 스피너의 모양을 사용자 정의하려면 어떻게해야합니까?

웹 사이트 디자인에 맞게 부트 스트랩 스피너의 모양을 사용자 정의하려면 크기, 색상 및 배치를 수정하는 것이 포함됩니다. 다음은이를 달성하는 몇 가지 방법입니다.

1. 색상 변경 :
   Bootstrap의 텍스트 색상 클래스 또는 사용자 정의 CSS를 사용하여 스피너의 색상을 변경할 수 있습니다. 예를 들어 색상을 1 차로 변경합니다.

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

   사용자 정의 CSS를 사용하여 특정 색상을 설정할 수도 있습니다.

    <code class="html"><style> .custom-spinner { color: #ff0000; /* Red color */ } </style> <div class="spinner-border custom-spinner" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

2. 크기 조정 :
   Bootstrap의 사이징 유틸리티 또는 맞춤형 CSS를 사용하여 스피너를 크기로 조정할 수 있습니다. 크기를 높이려면 :

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

   사용자 정의 크기의 경우 CSS를 사용할 수 있습니다.

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

3. 배치 및 포지셔닝 :
   Bootstrap의 Flex 및 Grid Utilities 또는 Custom CSS를 사용하여 스피너를 배치 할 수 있습니다. 예를 들어, 컨테이너 내의 스피너를 중앙으로 사용하려면 다음과 같습니다.

    <code class="html"><div class="d-flex justify-content-center align-items-center" style="height: 200px;"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div></code>

다른 프레임 워크 나 라이브러리와 함께 부트 스트랩 스피너를 사용할 수 있습니까? 그렇다면 어떻게해야합니까?

예, 다른 프레임 워크 또는 라이브러리와 함께 부트 스트랩 스피너를 사용할 수 있습니다. 다음은 통합하는 방법입니다.

1. 반응 :

   • 먼저 NPM 또는 원사를 통해 설치하여 React 프로젝트에 부트 스트랩을 포함시킵니다.

      <code class="bash">npm install bootstrap</code>

   • React 구성 요소 또는 Main index.js 파일에서 부트 스트랩 CS를 가져옵니다.

      <code class="javascript">import 'bootstrap/dist/css/bootstrap.min.css';</code>

   • 그런 다음 JSX에서 직접 스피너를 사용할 수 있습니다.

      <code class="jsx">function Loading() { return ( <div classname="d-flex justify-content-center"> <div classname="spinner-border" role="status"> <span classname="visually-hidden">Loading...</span> </div> </div> ); }</code>

2. vue.js와 함께 :

   • React와 유사하게 설치 부트 스트랩 :

      <code class="bash">npm install bootstrap</code>

   • main.js 파일에서 CSS 가져 오기 :

      <code class="javascript">import 'bootstrap/dist/css/bootstrap.min.css';</code>

   • VUE 구성 요소에서 스피너를 사용하십시오.

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

3. 각도 :

   • NPM을 사용하여 부트 스트랩을 설치하십시오.

      <code class="bash">npm install bootstrap</code>

   • styles 배열의 angular.json 파일에 CSS를 추가하십시오.

      <code class="json">"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],</code>

   • 각도 구성 요소 템플릿에서 스피너를 사용하십시오.

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

4. jQuery와 함께 :

   • Bootstrap은 원래 jQuery와 잘 작동하도록 제작되었으므로 통합은 간단합니다. HTML에 부트 스트랩 CSS와 jQuery를 포함시킨 후에는 앞에서 볼 수 있듯이 스피너 마크 업을 사용할 수 있습니다.

이러한 모든 프레임 워크의 경우 이전 섹션에 설명 된 방법을 사용하여 스피너를 추가로 사용자 정의하여 프로젝트의 설계 및 기능에 완벽하게 맞도록 할 수 있습니다.

위 내용은 부트 스트랩의 스피너 구성 요소를 사용하여 로딩 상태를 나타내는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!