Bootstrap框架通過“alert“樣式來實(shí)現(xiàn)警示框效果。在默認(rèn)情況之下，提供了四種不同的警示框效果：

  1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎(chǔ)上追加“alert-success”樣式，具體呈現(xiàn)的是背景、邊框和文本都是綠色；

  2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎(chǔ)上追加“alert-info”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺藍(lán)色；

  3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎(chǔ)上追加“alert-warning”樣式，具體呈現(xiàn)的是背景、邊框、文本都是淺黃色；

  4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎(chǔ)上追加“alert-danger”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺紅色。

如下圖示：

使用方法：

具體使用的時候，可以在類名為“alert”的div容器里放置提示信息。實(shí)現(xiàn)不同類型警示框，只需要在“alert”基礎(chǔ)上追加對應(yīng)的類名，如下：

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">請輸入正確的密碼</div>
<div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最后一次機(jī)會</div>
<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>

運(yùn)行效果如下：

實(shí)現(xiàn)原理：

其中“alert”樣式的源碼主要是設(shè)置了警示框的背景色、邊框、圓角和文字顏色。另外對其內(nèi)部幾個元素h4、p、ul和“.alert-link”做了樣式上的特殊處理：

/*bootstrap.css文件第4427行～第4446行*/
.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;
}

不同類型的警示框，主要是通過“alert-success”、“alert-info”、“alert-warning”和“alert-danger”樣式來實(shí)現(xiàn)：

/*bootstrap.css文件第4456行～第4499行*/
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}