如何在页脚中添加页脚并使内容可滚动?使用Twitter Bootstrap 3 [英] How to add a footer to popover and make content scrollable? Using Twitter bootstrap 3
本文介绍了如何在页脚中添加页脚并使内容可滚动?使用Twitter Bootstrap 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是图片(我必须做的)
Here is image ( what I have to do )
如何在页脚上添加页脚并使内容可滚动?使用Twitter Bootstrap 3
How to add a footer to popover and make the content scrollable? Using Twitter bootstrap 3
推荐答案
要创建带有页脚的弹出框,您必须更改弹出框template
并添加一些CSS以对该页脚进行样式设置.正如您已包含在图形中一样,在这里我也在页脚中放置了一个按钮,但是您必须弄清楚自己要如何使用它.
To create a popover with footer you must alter the popovers template
and add some CSS to style that footer. Here I also place a button in the footer, as you have included in the drawing, but you must figure out yourself what you want to do with it.
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<div class="popover-footer">
<button type="button" class="btn btn-default">Button</button>
</div>
</div>
$("[rel=details]").popover({
trigger : 'click',
placement : 'bottom',
content : 'Lorem ipsum dolor ...',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><button type="button" class="btn btn-default">Button</button></div></div>'
});
设置页脚样式:
.popover-footer {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color: #F7F7F7;
border-bottom: 1px solid #EBEBEB;
border-radius: 5px 5px 0 0;
}
使弹出内容可滚动:
.popover-content {
overflow-y : scroll;
height: 200px;
}
请参阅演示-> http://jsfiddle.net/3x4yD/
see demo -> http://jsfiddle.net/3x4yD/
这篇关于如何在页脚中添加页脚并使内容可滚动?使用Twitter Bootstrap 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文