Bootstrap의 알림을 사용하여 알림을 표시하려면 어떻게합니까?

Bootstrap의 알림을 사용하여 알림을 표시하려면 어떻게합니까?

Bootstrap의 알림은 사용자에게 알림을 표시하는 환상적인 도구입니다. 통합하고 사용자 정의하기 쉽습니다. 부트 스트랩 경고를 사용하려면 HTML에 경고 구성 요소를 추가하여 시작할 수 있습니다. 다음은 경고를 만드는 방법의 기본 예입니다.

 <code class="html"><div class="alert alert-primary" role="alert"> This is an alert message! </div></code>

위의 예에서 alert 클래스를 사용하여 요소를 경고로 만들고 Bootstrap의 기본 색상을 기반으로 색 구성표를 제공하는 alert-primary 제공했습니다. role="alert" 속성을 통해 스크린 리더가 요소를 발표하여 접근성을 향상시킵니다.

경고 내의 버튼이나 링크와 같은 추가 컨텐츠를 추가하려면 경고의 <div> 요소 내에서 자유롭게 수행 할 수 있습니다.<pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt; &lt;h4 class=&quot;alert-heading&quot;&gt;Warning!&lt;/h4&gt; &lt;p&gt;Better check yourself, you're not looking too good.&lt;/p&gt; &lt;hr&gt; &lt;p class=&quot;mb-0&quot;&gt;Need more information? &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;Click here&lt;/a&gt;&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre> <p> 알림이 올바르게 표시 되려면 프로젝트에 부트 스트랩의 CSS가 포함되어 있어야합니다. CDN의 부트 스트랩을 포함하거나 다운로드하여 직접 호스팅 할 수 있습니다.</p> <h3> 부트 스트랩에서 사용할 수있는 다양한 유형의 경고는 무엇입니까?</h3> <p> Bootstrap은 전달하려는 메시지를 차별화하는 데 사용할 수있는 몇 가지 사전 스타일 알림 유형을 제공합니다. 각각 특정 색 구성표가있는 사용 가능한 유형은 다음과 같습니다.</p> <ul> <li> <strong>1 차 ( <code>alert-primary ) : 정보 메시지에 유용합니다.

보조 ( alert-secondary ) : 종종 덜 두드러진 메시지에 사용됩니다.

성공 ( alert-success ) : 성공적이거나 긍정적 인 행동을 나타냅니다.

위험 ( alert-danger ) : 오류 또는 위험한 행동을 나타냅니다.

경고 ( alert-warning ) : 잠재적 인 문제에 대해 사용자에게주의를 기울이는 데 사용됩니다.

정보 ( alert-info ) : 특히 시급하지 않은 일반 정보를 전달합니다.

빛 ( alert-light ) : 가볍고 중립적 인 경고.

어두운 ( alert-dark ) : 어두운 중립 경보.

이러한 유형을 사용하려면 각 클래스를 Alert div 에 추가하십시오. 예를 들어, 성공 경보 :

 <code class="html"><div class="alert alert-success" role="alert"> Your submission was successful! </div></code>

부트 스트랩 알림 모양을 어떻게 사용자 정의 할 수 있습니까?

부트 스트랩 경고는 사용자 정의 가능합니다. CSS를 수정하거나 추가 클래스를 추가하여 외관을 조정할 수 있습니다. 알림을 사용자 정의하는 몇 가지 방법은 다음과 같습니다.

1. 색상 변경 : 기본 색 구성표가 마음에 들지 않으면 사용자 정의 CSS로 무시할 수 있습니다. 예를 들어, 1 차 경고의 배경색을 변경하려면 다음과 같습니다.

 <code class="css">.alert-primary { background-color: #your-custom-color; border-color: #another-custom-color; color: #text-color; }</code>

2. 아이콘 추가 : 알림에 아이콘을 포함하여 더 시각적으로 매력적으로 만들 수 있습니다. Font Awesome과 같은 글꼴 아이콘 라이브러리를 사용하고 있다고 가정하면 다음과 같이 보일 수 있습니다.

 <code class="html"><div class="alert alert-success" role="alert"> <i class="fas fa-check-circle"></i> Your submission was successful! </div></code>

3. 크기 및 패딩 변경 : 부트 스트랩에서 제공하는 유틸리티 클래스를 사용하여 경고의 패딩과 크기를 조정할 수 있습니다. 예를 들어, 경고를보다 두드러지게합니다.

 <code class="html"><div class="alert alert-danger p-4" role="alert"> A critical error has occurred! </div></code>

4. 추가 클래스 사용 : Bootstrap에는 알림 내에서 스타일링 링크를위한 alert-link 와 같은 유틸리티 클래스가 포함됩니다. 자신의 스타일 요구에 맞는 맞춤형 클래스를 만들 수도 있습니다.

프로그래밍 방식으로 부트 스트랩 경고를 어떻게 해제합니까?

Bootstrap Alerts를 프로그래밍 방식으로 기각하려면 JavaScript를 사용할 수 있습니다. 부트 스트랩에는이 프로세스를 간단하게 만드는 플러그인이 포함되어 있습니다. 구현 방법은 다음과 같습니다.

1. HTML 설정 : 먼저, data-bs-dismiss="alert" 속성을 알림 내에서 링크에 추가하십시오.

 <code class="html"><div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div></code>

2. JavaScript 해고 : 프로그래밍 방식으로 경보를 해산하려면 다음 JavaScript 코드를 사용할 수 있습니다.

 <code class="javascript">// Assuming you have a reference to the alert element var alertElement = document.querySelector('.alert'); // Create an instance of the Alert plugin var alert = bootstrap.Alert.getInstance(alertElement); // Call the close method alert.close();</code>

위의 예에서는 bootstrap.Alert.getInstance(alertElement) 경고 요소와 관련된 경고 인스턴스를 검색하고 alert.close() 경고를 무시합니다.

이 기능이 작동하기 위해 부트 스트랩 자바 스크립트가 프로젝트에 포함되어 있는지 확인하십시오. 모듈 시스템이나 번들러를 사용하는 경우 필요한 구성 요소를 가져 오십시오.

이러한 방법은 경고를 무시하는 방법과시기에 대한 유연성과 제어를 제공하여 동적 및 대화식 사용자 경험을 허용합니다.