bootstrap提示標(biāo)簽、提示框?qū)崿F(xiàn)代碼
更新時間：2016年12月28日 16:47:41 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了bootstrap提示標(biāo)簽、提示框的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
首先聊一聊提示標(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個簡單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié))
這篇文章主要介紹了15個簡單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了小程序自定義索引菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
一步一步封裝自己的HtmlHelper組件BootstrapHelper（三）
一步一步封裝自己的HtmlHelper組件：BootstrapHelper，系列文章第三篇，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript封裝Vue-Router實(shí)現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09![JS 字符串連接[性能比較]](http://img.jbzj.com/images/xgimg/bcimg5.png)
js字符串連接實(shí)現(xiàn)代碼。2009-05-05
這篇文章主要探討了JS嵌套函數(shù)調(diào)用上下文的問題,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了JavaScript中的偽數(shù)組用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了uniapp項目打包為桌面應(yīng)用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08
下面小編就為大家?guī)硪黄棠?分鐘學(xué)會用requirejs(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07