约夏克布丁 - 临 零件
将Bootstrap popovers(如iOS中的那些)添加到站点上的任何元素的文档和示例。
静态弹出窗口
有四种选择:顶部,右侧,底部和左侧对齐。
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
现场演示
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-container="body" data-original-title="Popover Title" data-content="And here's some amazing content. It's very engaging. Right?" data-color="primary">Click to toggle popover</button>
四个方向
点击下一次点击
使用focus
触发器消除用户下次单击与切换元素不同的元素时的弹出窗口。
解雇下一次点击所需的特定标记
对于正确的跨浏览器和跨平台行为,您必须使用<a>
标签,not“
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
如果您想查看更多示例和属性,请查看官方 Bootstrap Documentation.