bootstrap 如何给标签页 右侧动态添加按钮

bootstrap 如何给标签页 右侧动态添加按钮,第1张

$('#myTab a').slice(0, 2).click(function() {

$(this).closest('li').addClass('active').siblings().removeClass('active')

$('#myTab li').slice(2, 4).hide().eq($(this).closest('li').index()).show()

})

Bootstrap里如何动态创建一个popover

一种简单的方法就是自己写 popover 的 html,并且在需要显示 popover 的地方控制内容变化。

$("#your-button").popover({

html: true,

content: '<div id="content">...</div>'

})

.click(function() {

$("#content").text('YOUR CONTENT')

})

P.S. 最新的 bootstrap 3 的 popover(options) 初始化参数里提供了修改默认 popover template html 的选项,我没有实际用过不确定有没有坑,看起来会比上面的方法更加优雅。

js:

<script src='js/jquery-1.9.0.min.js' type="text/javascript"></script>

<script src='js/bootstrap.min.js' type="text/javascript"></script>

<link href='css/bootstrap.min.css' rel="stylesheet">

<link href='css/bootstrap.add.css' rel="stylesheet">

window.addEventListener("hashchange", function() { scrollBy(0, -145) })

$('#profil').popover({placement : 'bottom',html : 'true', trigger : 'hover'})

html:

<button class="btn btn-small btn-bpf-inverse" type="button" id="profil" data-original-title="Profil" href="#" data-toggle="popover" title="Détail du profil"

data-content="

<p>Profil métier :<br><span class='label label-success'>Gestion local des services</span></p>

<p>Type de Service :<br><span class='label label-success'>Services aux véhicules</span></p>

<p>Pays :<br><span class='label label-success'>Italy</span></p>

<p>Marque :<br><span class='label label-success'>Citroën</span></p>

">

<i class="icon-user"></i>Profil

</button>

//在自定义css样式中加入下面代码,自定义css在bootstrap.min.css后引入;

.carousel >.left, .carousel >.right {

background-image: none;

}

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11771658.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存