Pourquoi la boîte contextuelle d'amorçage n'a-t-elle aucun contenu ?-Tutoriel d'amorçage-php.cn

Pourquoi la boîte contextuelle d'amorçage n'a-t-elle aucun contenu ?

(*-*)浩

Libérer： 2019-07-19 10:07:25

original

2036 Les gens l'ont consulté

Popover est similaire à Tooltip, offrant une vue étendue. Pour activer le popover, les utilisateurs survolent simplement l'élément. Le contenu de la boîte contextuelle peut être entièrement rempli à l'aide de l'API Bootstrap Data. Cette méthode s'appuie sur des info-bulles.

Pourquoi la boîte contextuelle d'amorçage n'a-t-elle aucun contenu ?

Le plug-in Popover génère du contenu et du balisage en fonction des besoins. Par défaut, les popovers sont placés sur leurs éléments déclencheurs plus tard. Vous pouvez ajouter un popover des deux manières suivantes : (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Grâce à l'attribut data : Si vous devez ajouter un popover ( popover), ajoutez simplement data-toggle="popover" à une balise d'ancrage/bouton. Le titre de l'ancre est le texte du popover. Par défaut, le plugin place le popover en haut.

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

Copier après la connexion

Via JavaScript : Activer le popover via JavaScript :

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

Copier après la connexion

Le plugin Popover n'est pas comme les menus déroulants et autres plugins évoqués précédemment ; Pour utiliser le plugin vous devez l'activer en utilisant jquery (lire javascript).

Utilisez le script suivant pour activer tous les popovers sur la page :

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

Copier après la connexion

L'exemple ci-dessous montre comment utiliser les données La propriété utilise l'utilisation du plug-in popover.

<!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>

Copier après la connexion

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!