bootstrap提示標(biāo)簽、提示框?qū)崿F(xiàn)代碼
1 回答
慕慕森
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊
首先聊一聊提示標(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>? ? ? ??
- 1 回答
- 0 關(guān)注
- 834 瀏覽
添加回答
舉報(bào)
0/150
提交
取消