📌  相关文章
📜  Bootstrap Popover

📅  最后修改于: 2020-12-19 02:50:06             🧑  作者: Mango

Bootstrap Popover

bootstrap popover插件与工具提示非常相似。用户单击元素时，它将显示为弹出框。区别在于弹出窗口可以包含更多内容。

要创建弹出窗口，请将data-toggle =“ popover”属性添加到元素，并添加title属性以指定弹出窗口的标题文本，并通过data-content属性来指定应在弹出窗口的正文中显示的文本。

请参阅以下示例：

 


  Bootstrap Example
  
  
  
  
  





  
Popover Example

  Toggle popover

自举定位弹出框

默认情况下，弹出框显示在元素的行驶侧，但是您可以在任意位置设置弹出框的位置，例如顶部，底部，侧面和左侧。

使用data-placement属性在元素的顶部，底部，左侧或右侧设置弹出框的位置。

请参阅以下示例：




  Bootstrap Example
  
  
  
  
  





  
Popover Example

引导程序关闭弹出窗口

默认情况下，再次单击该元素时，弹出框是关闭的。但是，当您在元素外部单击时，可以使用属性data-trigger =“ focus”关闭弹出框。

请参阅以下示例：




  Bootstrap Example
  
  
  
  
  





  
Popover Example

    Click me