Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)
Tooltip采用的是hover方式彈出提示框(參見前一篇:Bootstrap學(xué)習(xí)總結(jié)筆記(18)– 基本插件之Tooltip提示工具),適合提示內(nèi)容比較少的情況,要是內(nèi)容較多,就可以應(yīng)用Popover提示框。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>Popover提示彈出框</title> </head> <body> <div class="container"> <div class="page-header"> <h1>Popover提示彈出框</h1> </div> <div> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="popover left" data-content="測試">左邊的按鈕</button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" title="popover right" data-content="測試">左邊的按鈕</button> <button type="button" class="btn btn-danger" data-toggle="popover" data-placement="top" title="popover top" data-content="測試">左邊的按鈕</button> <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="bottom" title="popover bottom" data-content="測試">左邊的按鈕</button> </div> </div> <script> $(function () { $("[data-toggle='popover']").popover(); }) </script> </body> </html>
效果如下:
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)文字跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文字跑馬燈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06Javascript中innerHTML用法實(shí)例分析
這篇文章主要介紹了Javascript中innerHTML用法,實(shí)例分析了實(shí)用innerHTML獲取對應(yīng)元素內(nèi)容的使用技巧,需要的朋友可以參考下2015-01-01js實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解
這篇文章主要介紹了鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解,需要的朋友可以參考下2015-03-03微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
這篇文章主要介紹了微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果,結(jié)合實(shí)例形式分析了微信小程序線性漸變及圓形漸變的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05JavaScript canvas實(shí)現(xiàn)加載圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)加載圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08