有時候你可能想在警示框中加入鏈接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框里的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內(nèi)的鏈接進(jìn)行了加粗處理，并且顏色相應(yīng)加深。

實(shí)現(xiàn)方法：

Bootstrap框架是通過給警示框加的鏈接添加一個名為“alert-link”的類名，通過“alert-link”樣式給鏈接提供高亮顯示。

具體使用如下：

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
    .
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong>
     This 
     <a href="#" class="alert-link">alert needs your attention</a>
     , but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong>
     Better check yourself, you're 
     <a href="#" class="alert-link">not looking too good</a>
     .
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong>
    <a href="#" class="alert-link">Change a few things up</a>
     and try submitting again.
</div>

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

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

實(shí)現(xiàn)樣式如下：

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