Bootstrap 弹出框.pdfVIP

Bootstrap 弹出框 弹出框 （Popovers）就像⼯具提示 （tooltips），但更⼤，更流⾏。你可以在弹出框中放 置⽐⼯具提示更多的内容。当你 更多的HTML内容或⽂本内容显示时，建议使⽤弹出框⽽ 不是⼯具提示。 data-toggle属性指⽰在对此按钮执⾏操作时要触发的内容。 data-placement 属性指定popover 的位置。 data-content属性应包含要在popover 中传达的内容。最 ，设置title属性来为插件 附加⼀个标头。 我们需要添加popoverButton类到按钮。 !DOCTYPE html html lang=en head script type=text javascript src=http: code.jquery .com jquery-1.10.1.min.js script link rel=stylesheet href=https: bootstrap 3.2.0 css bootst link rel=stylesheet href=https: bootstrap 3.2.0 css bootst script src=https: ajax . ajax libs jquery 1.11.1 jquery . script src=https: bootstrap 3.2.0 js bootstra script type=text javascript $(document).ready(function(){ $(.popoverButton).popover(); }); script head body style=margin:30px !-- Popover -- button type=button class=btn btn-danger popoverButton data-toggle=popover data-placement=bottom data-content=Lorem Ipsum Donor. title=This is a demo popover Click Me! button body html 触发弹出框 弹出框可以通过JavaScript触发。 !DOCTYPE html html lang=en head link rel=stylesheet href=https: boots link rel=stylesheet href=https: boots script src=https: ajax . ajax libs jquery 1.11.1 j script src=https: bootstrap 3.3.1 js bo script type=text javascript $(document).ready(function(){ $([data-toggle=popover]).popover({ placement : top }); }); script style type=text css .bs-example{ margin: 150px 50px; } style head body div class=bs-example button type=button class=btn btn-primary data-toggle=pop button type=button class=btn btn-success data-toggle=pop button type=button class=btn btn-info data-toggle=popove button type=button class=btn btn-warning data-toggle=pop div body html 通过data属性定位弹出框 以下⽰例显⽰如何通过data属性设置弹出框的⽅向。 !DOCTYPE html html lang=en head link rel=stylesheet hre