正文 

当前位置： 首页 > 知识 >

造型 Bootstrap 3 弹出框

     2023-03-06     241

关键词：

【中文标题】造型 Bootstrap 3 弹出框【英文标题】：Styling Bootstrap 3 Popovers 【发布时间】：2014-12-31 12:33:27 【问题描述】：

这里是相关的jsFiddle 以及完整的代码示例。

将鼠标悬停在 Fizz 菜单右侧的道路图标上，您会看到一个弹出框。看看弹出框有多窄？我想：

显着扩大弹出框；和 为弹出框设置不同颜色的样式，例如： 弹出窗口的“标题”部分中的绿色背景（“说明：”） 弹出框的“正文”部分（正文）中的红色背景

根据this answer，我可以通过以下方式扩大弹出框：

$('[data-toggle="popover"]').popover(
    container: 'body'
);

这正是我所做的（参见 jsFiddle 中的 JS），但这显然行不通。而且我找不到任何可以为弹出框颜色设置样式的东西。有什么想法吗？

【问题讨论】：

您可以调整template Popover 设置（请参阅文档）。 【参考方案1】：

您可以将一些 CSS 应用于弹出框的类以实现此结果。

在您提供的小提琴中，您可以使用以下几行来实现“signin”元素所需的效果：

.signin .popover  min-width:300px; 
.signin .popover-title  background-color:green; 
.signin .popover-content  background-color:red;

【讨论】：

感谢@Celmar (+1)，不幸的是，这些更改对我不起作用。你愿意更新我的 jsFiddle 以防我以某种方式搞砸它吗？再次感谢！ 当然，我必须为元素添加一个 id 才能为字段模式弹出框执行此操作。 jsfiddle.net/97zp5ckq/2

Bootstrap 3 - 弹出框 div html

】Bootstrap3-弹出框divhtml【英文标题】：Bootstrap3-Popoverdivhtml【发布时间】：2016-02-1115:05:42【问题描述】：我基于这个例子：https://jsfiddle.net/hL0pvaty/但弹出框必须包含一个htmldiv，因此，我想要的是第一个和第二个链接之间的混合：h... 查看详情

Bootstrap 3 弹出框在“响应”模式下不起作用

】Bootstrap3弹出框在“响应”模式下不起作用【英文标题】：Bootstrap3popoverdoesn\'tworkin"responsive"mode【发布时间】：2015-01-0205:38:27【问题描述】：这是我的JSFiddle完整代码示例。请注意如何将鼠标悬停在橙色道路字形图标上并... 查看详情

bootstrap弹出框bootboxjs

官网bootstrap的弹出框1<html>2<head>3<metacharset="utf-8">4<metaname="viewport"content="width=device-width,initial-scale=1">5<metahttp-equiv="X-UA-Compatible"content="IE=edge">6 查看详情

bootstrap方法为页面添加一个弹出框

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-弹出框（Popover）插件</title><linkrel="stylesheet"href="https://cdn.static.runoob.com/libs/bootstrap/3 查看详情

bootstrap弹出框和警告框插件

一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的容器。//基本用法<buttonclass="btnbtn-lgbtn-danger"type="button"data-toggle="popover"title="弹出框"data-content="这是一个弹出框插件">点击弹出/隐藏弹出框</button>  <scr... 查看详情

bootstrap--插件:提示工具弹出框警告框消息(代码片段)

Bootstrap--插件:提示工具、弹出框、警告框消息1.提示工具（Tooltip）插件：根据需求生成内容和标记。使用提示工具：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>MyTestbootstrap<... 查看详情

如何定位 Bootstrap 弹出框？

】如何定位Bootstrap弹出框？【英文标题】：HowtopositionaBootstrappopover?【发布时间】：2012-06-0314:29:19【问题描述】：我正在尝试为位于960像素宽网页右上角的触发器定位一个Bootstrap弹出框。理想情况下，我会将其放置在底部并使用CS... 查看详情

如何在悬停时保持 Bootstrap 弹出框活着？

】如何在悬停时保持Bootstrap弹出框活着？【英文标题】：HowcanIkeepBootstrappopoversalivewhilebeinghovered?【发布时间】：2013-04-0601:22:02【问题描述】：我正在使用Bootstrap弹出框创建一个显示用户信息的悬停卡片，并且我在鼠标悬停按钮时... 查看详情

加载 Ajax 时，Bootstrap 弹出框不工作

】加载Ajax时，Bootstrap弹出框不工作【英文标题】：BootstrapPopoverNotWorkingWhenLoadedWithAjax【发布时间】：2014-04-1204:57:18【问题描述】：当我使用ajax加载Bootstrap弹出框内容时，弹出框未显示。Javascript：varid=1;$.post("load.php?pageid",pageid:id;... 查看详情

Bootstrap：模态框上的弹出框

】Bootstrap：模态框上的弹出框【英文标题】：Bootstrap:popoveronmodals【发布时间】：2011-12-0206:39:03【问题描述】：我想使用Twitter的BootstrapCSS库在现有的模式对话框上使用弹出效果。我将弹出框绑定到小图像图标。$(\'#infoIcon\').popover(... 查看详情

Bootstrap 3 Popover 箭头和框定位

】Bootstrap3Popover箭头和框定位【英文标题】：Bootstrap3Popoverarrowandboxpositioning【发布时间】：2013-10-2600:14:39【问题描述】：我正在使用Bootstrap3弹出框在单击链接之前显示有关悬停链接的信息。目前它正在运行，但是，链接显示在页... 查看详情

Bootstrap 弹出框更改 html 内容

】Bootstrap弹出框更改html内容【英文标题】：Bootstrappopoverchangehtmlcontent【发布时间】：2017-09-0513:01:52【问题描述】：我需要经常更改引导弹出框内的弹出框内容。为了做到这一点，我用内容创建了弹出框，下一次我销毁了弹出框... 查看详情

ngRepeat 在 Bootstrap 弹出框内

】ngRepeat在Bootstrap弹出框内【英文标题】：ngRepeatInsideofBootstrapPopover【发布时间】：2014-08-0122:30:14【问题描述】：我一直在网上搜索并绞尽脑汁，但似乎无法找到解决方案。我需要在ng-repeat内制作一个弹出框，其中弹出框内部也... 查看详情

bootstrap：弹出框内的图像超出了窗口大小

】bootstrap：弹出框内的图像超出了窗口大小【英文标题】：bootstrap:Imageinsidethepopoverisextendingbeyondthewindowsize【发布时间】：2015-01-1008:31:34【问题描述】：我目前正在使用Bootstrap3弹出框功能来显示单击按钮时的图例图例是一个图像... 查看详情

动态更改 Bootstrap 弹出框的模板

】动态更改Bootstrap弹出框的模板【英文标题】：DynamicallyalteringthetemplateforaBootstrappopover【发布时间】：2018-07-2618:10:29【问题描述】：我查看了thisquestion，它被问及动态更改Bootstrap弹出框内容。但该解决方案似乎不适用于我的情况... 查看详情

根据弹出框相对于窗口边缘的 X 位置更改 Bootstrap 弹出框的位置？

】根据弹出框相对于窗口边缘的X位置更改Bootstrap弹出框的位置？【英文标题】：ChangingthepositionofBootstrappopoversbasedonthepopover\'sXpositioninrelationtowindowedge?【发布时间】：2012-04-1423:08:14【问题描述】：我在互联网上四处搜寻，虽然我... 查看详情

yii2中怎么使用bootstrap的模态弹出框modal

参考技术Abootstrap2和3在模态对话框代码上是一样的，但必须引入相应的js，必须引入<scriptsrc="test/js/bootstrap-modal.js">!!否则就会黑屏 查看详情

bootstrap之javascript插件---弹出框（模态框）modal

简介：　　弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单内容。完整结构分析（可以没有头部和底部）：代码示例：<!--弹出框的头部--><divclass="modalfade"><divclass="modal-dialog"><divclass="modal-c... 查看详情