簡單回憶一下,在制作提示框(tooltip)時,可以使用<button>或者<a>標簽元素,而且通過 data- 屬性來聲明提示框的信息,如下所示:
<button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="我是一個提示框tooltip"> 鼠標移上來 </button>
而彈出框Popover和提示框tooltip相比,就多了一個content內(nèi)容,那么在此使用 data-content 來定義彈出框中的內(nèi)容。同樣可以使用<button>或者<a>標簽來制作,如下:
<button type="button" class="btnbtn-default" data-container="body" data-placement="bottom" data-toggle="popover" data-original-title="Bootstrap彈出框標題" data-content="Bootstrap彈出框的內(nèi)容" > 猛擊我吧 </button> <a href="#" class="btnbtn-default" data-container="body" data-placement="right" data-toggle="popover" title="Bootstrap彈出框標題" data-content="Bootstrap彈出框的內(nèi)容"> 猛擊我吧 </a>
運行效果如下:
正如上圖所示,彈出框的制作結構和提示框并無太多差別,但樣式風格上還是有蠻大的區(qū)別。其主要定義了彈出框邊框、圓角、背景、陰影以及三角形等樣式:具體代碼見右側(cè)的bootstrap.css。
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報