bootstrap的JavaScript外掛中提供了幾種形式的提示框。其中就有警告框、工具提示框、彈出框和模態框。下面就來一個一個的看看它們是怎樣使用的吧！

警告框

它就是這個樣子的，點選右側的小叉子可以將它隱藏。如果不想要淡淡消失的效果可以將 .fade.in 類去掉，和bootstrap其他元件改變顏色的方式一樣（只需將類 .alert-info改為 .alert-danger / .alert-link / alert-success / alert-warning 之一種就可以），實現程式碼如下：

<div class="alert alert-info alert-dismissible fade in"
 
>
    <span class="close" data-dismiss="alert">&times;</span>  //span標籤必須為第一個子元素
    <p><span class="glyphicon glyphicon-alert"></span> 注意：您的瀏覽器禁用了Cookie！本站的部分功能將無法使用！</p>
</div>

工具提示

如上圖所示的效果，當滑鼠經過需要提示的位置時會彈出一個提示框，可以選擇在上/下/左/右任意位置彈出（更改data-placement屬性），可通過title屬性更改提示的內容，實現程式碼如下：

<p>
    Lorem ipsum dolor sit amet, consectetur 
    <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </a>
    Aliquid architecto aut ea eaque error fugit, illo, laboriosam mollitia natus nostrum perferendis placeat porro quibusdam reiciendis, rem repellat veritatis?
 
 Eius, magnam.
</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

js呼叫API：

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

彈出框

如上圖所示，當滑鼠點選按鈕時會彈出一個提示框，可以選擇在上/下/左/右任意位置彈出（更改data-placement屬性），可通過title屬性更改標題、data-content屬性更改內容，實現程式碼如下：

<button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" data-container="body" title="popover title" data-content="And here's some amazing content. It's very engaging. Right?">popover of top</button>

js呼叫API：

$(function () {
    $('[data-toggle="popover"]').popover()
})

這種方式的彈出框只有在再次點選按鈕的時候才會被隱藏，要想在點選其他位置或點選彈出框的時候將它隱藏，則需要加上data-trigger=”focus”屬性。
為了更好的跨瀏覽器和跨平臺效果，必須使用 a 標籤，不能使用 button 標籤，並且，還必須包含 role=”button” 和 tabindex 屬性：

<a href="#" class="btn btn-success" data-toggle="popover" data-placement="bottom" data-container="body" title="popover title" data-content="It's very engaging. Right?" data-trigger="focus" role="button" tabindex="0">popover of top</a>

js呼叫API方式同上。

模態框

點選之後彈出模態框：

如上圖所示，當滑鼠點選按鈕時會彈出模態框，先說一下實現模態框需要的最基本的程式碼。

<div class="modal" id="...">    //這裡可以設定從上向下的動畫顯示效果，只需新增 .fade 類
    <div class="modal-dialog">    //這裡可以選擇模態框預定義的三種寬度，如果想要顯示比較大的，可以新增類 .modal-lg；顯示比較小的，新增類 .modal-sm
        <div class="modal-content">
            <div class="modal-header">    //模態框的頭部，如果不需要可以不寫這個元素
                <span class="close" data-dismiss="modal">&times;</span>    //關閉按鈕，必須設定為第一個子元素
                <h3 class="modal-title">...</h3>    //加上這個類才能和關閉按鈕水平對齊
            </div>
            <div class="modal-body">    //主題內容
                ...
            </div>
            <div class="modal-footer">    //模態框的腳部，如果不需要可以不寫這個元素
                ...
            </div>
        </div>
    </div>
</div>

模態框的觸發元素（注意href或data-target屬性值一定與模態框的ID屬性值相對應）：

<a href="#模態框的ID" class="..." data-toggle="modal">.../a>
<!-- 或 -->
<button type="button" class="..." data-toggle="modal" data-target="#模態框的ID">...</button>

這樣一個模態框的基本結構就完成了，可以根據自己的需要在頭部、主體部分和腳部新增內容。新增內容方式和body中相同，同樣可以使用柵格系統、表單、警告框、下拉選單等內容。

模態框都是固定定位的，且初始時一般都是不顯示的，推薦作為body的最後一個直接子元素。

最後，完整示例：

<a href="#modal" class="btn btn-info" data-toggle="modal">註冊新使用者</a>

<div class="modal fade" id="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" data-dismiss="modal">&times;</span>
                <h3 class="modal-title">標題</h3>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquam magni quasi rem vitae. Aliquam, aspernatur eaque error eveniet fugit, hic, iste labore magnam necessitatibus numquam possimus ut? Nostrum.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            </div>
        </div>
    </div>
</div>