Bootstrap 경고 상자에 대한 자세한 소개

Alert메시지는 최종 사용자에게 경고나 확인 메시지와 같은 정보를 표시하는 데 주로 사용됩니다. 경고 플러그인을 사용하면 모든 경고 메시지에 해제 기능을 추가할 수 있습니다.

Usage

다음 두 가지 방법으로 경고 상자의 해제 기능을 활성화할 수 있습니다.

data 속성을 통해: Data API(Data API)를 통해 해제 기능을 추가하고, 닫기 버튼에 data-dismiss를 추가하면 됩니다. ="alert"는 경고 상자에 닫기 기능을 자동으로 추가합니다.

기본 사용법

　경고 상자 구성 요소는 유연하게 사전 정의된 메시지를 제공하여 일반적인 사용자 작업에 대한 피드백 메시지를 제공합니다.

　경고 상자는 텍스트와 선택적 닫기 버튼을 결합하여 구성할 수 있습니다..alert 类是必须要设置的，另外还提供了有特殊意义的4个类（例如，.alert-success), 다양한 경고 메시지를 나타냅니다

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}.alert h4 {
  margin-top: 0;
  color: inherit;
}.alert .alert-link {
  font-weight: bold;
}.alert > p,
.alert > ul {
  margin-bottom: 0;
}.alert > p + p {
  margin-top: 5px;
}

　경고 상자에는 기본 클래스가 없고 기본 클래스와 수정 클래스만 있습니다. 기본 회색 경고 상자는 큰 의미가 없습니다. 따라서 의미가 있는 경고 클래스를 사용합니다. 현재 성공, 메시지, 경고, 위험이 제공됩니다.

1. 성공 경고 상자: 작업이 성공했음을 사용자에게 알리고, "alert" 스타일을 기반으로 "alert-success" 스타일을 추가하는 것이 구체적입니다. 배경, 테두리 및 텍스트는 모두 녹색입니다;

　2. 정보 경고 상자: 사용자에게 프롬프트 정보를 제공하고 "alert" 스타일을 기반으로 "alert-info" 스타일을 추가합니다. 배경, 테두리 및 텍스트는 모두 연한 파란색입니다.

　3. 경고 경고 상자: 사용자에게 주의해서 작동하도록 요청하고(경고 정보 제공) "경고" 스타일에 "경고" 스타일을 추가합니다. 배경, 테두리, 텍스트가 모두 연한 노란색입니다.

　4. 오류 경고 상자: 사용자에게 작업 오류에 대한 메시지를 표시합니다. 특히, 배경은 "경고" 스타일을 기반으로 합니다. 테두리와 텍스트가 모두 연한 빨간색입니다

<div class="alert" role="alert">基类</div><div class="alert alert-success" role="alert">成功</div><div class="alert alert-info" role="alert">信息提示</div><div class="alert alert-warning" role="alert">警告</div><div class="alert alert-danger" role="alert">错误</div>

꺼질 수 있습니다

웹을 검색할 때 일부 경고 상자에는 닫기 버튼이 있는 것으로 나타났습니다. 사용자가 닫기 버튼을 클릭하면 표시되는 경고 상자는 다음과 같습니다. 자동으로 닫힙니다(즉, 경고 상자가 숨겨지고 표시되지 않습니다). 부트스트랩 프레임워크의 경고 상자에도 이런 기능이 있습니다

　기본 경고 상자에 닫기 버튼만 추가하면 됩니다. 그런 다음 세 단계를 진행합니다:

　1. 기본 경고 상자 "경고"를 기반으로 "경고 해제 가능" 스타일을 추가해야 합니다.

　2. 버튼 태그에 class="close"를 추가하여 경고 상자 닫기 버튼 스타일을 구현합니다.

　　3. 닫기 버튼 요소에 맞춤 속성이 설정되어 있는지 확인하세요: data-dismiss="alert"(닫을 수 있는 경고 상자에는 경고 상자 닫기를 제어하기 위해 이 속성을 감지하는 Javascript가 필요하기 때문입니다)

.alert-dismissable {
  padding-right: 35px;
}.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

링크

때로는 경고 상자에 링크 주소를 추가하여 사용자에게 특정 장소나 새 페이지로 이동하라고 알리고 싶을 수도 있습니다. 이때 사용자들이 이것이 링크 주소임을 명확하게 알 수 있도록 하고자 합니다. Bootstrap 프레임워크에서는 경고 상자의 링크 스타일이 강조 표시됩니다. 다양한 유형의 경고 상자에 있는 링크는 굵게 표시되고 그에 따라 색상이 깊어집니다.

Bootstrap 프레임워크는 "alert-link" 스타일을 통해 경고 상자의 링크에 "alert-link"라는 클래스 이름을 추가합니다.

.alert .alert-link {
  font-weight: bold;
}.alert-success .alert-link {
  color: #2b542c;
}.alert-info .alert-link {
  color: #245269;
}.alert-warning .alert-link {
  color: #66512c;
}.alert-danger .alert-link {
  color: #843534;
}

<div class="alert alert-success" role="alert">成功 <a href="#" class="alert-link">详情查看</a></div><div class="alert alert-info" role="alert">信息提示 <a href="#" class="alert-link">详情查看</a></div><div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">详情查看</a></div><div class="alert alert-danger" role="alert">错误 <a href="#" class="alert-link">详情查看</a></div>

위 내용은 Bootstrap 경고 상자에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!