bootstrap提示標(biāo)簽、提示框?qū)崿F(xiàn)代碼
更新時(shí)間:2016年12月28日 16:47:41 投稿:lijiao
這篇文章主要為大家詳細(xì)介紹了bootstrap提示標(biāo)簽、提示框的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
首先聊一聊提示標(biāo)簽:
<body> <div class="container"> <div class="row"> <div class="col-lg-6"> <p> <a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用來開發(fā)網(wǎng)站的">java</a> 一種語言 </p> <p> <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用來開發(fā)網(wǎng)站的">java</a> 一種語言 </p> </div> <div class="col-lg-6"> <p> <a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="用來開發(fā)網(wǎng)站的">java</a> 一種語言 </p> <p> <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="用來開發(fā)網(wǎng)站的">java</a> 一種語言 </p> </div> </div> </div> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> //$('.tool').tooltip(); $('.tool').tooltip('show'); $('.tool').on('hidden.bs.tooltip', function () { alert('隱藏了'); }) </script> </body>
效果:
下面講一講提示框:
<body> <div class="container"> <div class="row"> <!--這邊用的hover觸發(fā)的--> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" data-delay='{"show": 1000, "hide": 1000 }' data-trigger="hover">Click to toggle popover</button> </div> </div> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ $('.btn').popover('show'); }) </script> </body>
效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
15個(gè)簡單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié))
這篇文章主要介紹了15個(gè)簡單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02一步一步封裝自己的HtmlHelper組件BootstrapHelper(三)
一步一步封裝自己的HtmlHelper組件:BootstrapHelper,系列文章第三篇,感興趣的小伙伴們可以參考一下2016-09-09JavaScript封裝Vue-Router實(shí)現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實(shí)現(xiàn)流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09uniapp項(xiàng)目打包為桌面應(yīng)用的方法步驟
本文主要介紹了uniapp項(xiàng)目打包為桌面應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08教你5分鐘學(xué)會(huì)用requirejs(必看篇)
下面小編就為大家?guī)硪黄棠?分鐘學(xué)會(huì)用requirejs(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07