Warum hat das Bootstrap-Popup-Fenster keinen Inhalt?-Bootstrap-Tutorial-php.cn

Warum hat das Bootstrap-Popup-Fenster keinen Inhalt?

(*-*)浩

Freigeben： 2019-07-19 10:07:25

Original

2031 Leute haben es durchsucht

Popover ähnelt Tooltip und bietet eine erweiterte Ansicht. Um das Popover zu aktivieren, bewegen Benutzer einfach den Mauszeiger über das Element. Der Inhalt der Popup-Box kann mithilfe der Bootstrap Data API vollständig gefüllt werden. Diese Methode basiert auf Tooltips.

Warum hat das Bootstrap-Popup-Fenster keinen Inhalt?

Popover-Plugin generiert Inhalte und Markups entsprechend den Anforderungen. Popovers werden später auf ihren auslösenden Elementen platziert. Sie können ein Popover auf die folgenden zwei Arten hinzufügen: (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Über das Datenattribut: Wenn Sie ein Popover hinzufügen müssen ( popover), fügen Sie einfach data-toggle="popover" zu einem Anker-/Schaltflächen-Tag hinzu. Der Titel des Ankers ist der Text des Popovers. Standardmäßig platziert das Plugin das Popover oben.

<a href="#" data-toggle="popover" title="Example popover">
    请悬停在我的上面
</a>

Nach dem Login kopieren

Über JavaScript: Popover über JavaScript aktivieren:

$('#identifier').popover(options)

Nach dem Login kopieren

Das Popover-Plugin ist nicht wie die zuvor besprochenen Dropdown-Menüs und anderen Plugins. Um das Plugin nutzen zu können, müssen Sie es mit jquery (Javascript lesen) aktivieren.

Verwenden Sie das folgende Skript, um alle Popovers auf der Seite zu aktivieren:

$(function () { $("[data-toggle='popover']").popover(); });

Nach dem Login kopieren

Das folgende Beispiel zeigt, wie Daten verwendet werden. Die Eigenschaft verwendet die Verwendung des Popover-Plug-Ins.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 弹出框（Popover）插件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-default" title="Popover title"  
            data-container="body" data-toggle="popover" data-placement="left" 
            data-content="左侧的 Popover 中的一些内容">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title"  
            data-container="body" data-toggle="popover" data-placement="top" 
            data-content="顶部的 Popover 中的一些内容">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title"  
            data-container="body" data-toggle="popover" data-placement="bottom" 
            data-content="底部的 Popover 中的一些内容">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title"  
            data-container="body" data-toggle="popover" data-placement="right" 
            data-content="右侧的 Popover 中的一些内容">
        右侧的 Popover
    </button>
</div>
<script>
$(function () { 
    $("[data-toggle='popover']").popover();
});
</script>

</body>
</html>

Nach dem Login kopieren

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonWarum hat das Bootstrap-Popup-Fenster keinen Inhalt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!