popover bootstrap

Question

popover bootstrap

Demandé el 16 de Août, 2012: Quand la question a-t-elle été
56892 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je ne suis pas sûr de la façon de bootstrap implémente liste. J'ai inclus bootstrap.js et il a une fonction appelée Liste (majuscules P), mais leur exemple, ils utilisent:

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

Maintenant, ils disent qu'il faut d'info-bulle, mais je ne sais pas ce que cela signifie. Leurs exemples comprennent toutes un tas de .fichiers js et je pense qu'en réalité ils sont tous emballés ensemble.

Et depuis que je suis à la preuve de concept de phase, où je suis en train de le faire fonctionner à droite la première fois, je ne suis pas préoccupé par la taille de fichier ou de la mise en cache.

Demandé el 16 de Août, 2012 par Phillip

Answer 1

3 Réponses

Answer 2

27voto

ews2001 Points 1379

Voici un exemple assez simple :

 <html> 
   <head>
       <link href="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
   </head>
   <body>
      <div class="container">
         <div class="well">
            <a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
         </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
      <script>
      $(function (){
         $("#example").popover();
      });
      </script>
   </body>
</html>

L'exemple comprend l'info-bulle JavaScript dont vous aurez également besoin. Affichez simplement la source de la page.

Répondu el 16 de Août, 2012 par ews2001 (1379 Points )

Answer 3

11voto

merv Points 14713

La version de bootstrap.js ce qui est inclus dans le téléchargement trouvé sur la page d'accueil du projet comprend déjà tous les plugins compilées. Qui comprend bootstrap-tooltip.js et bootstrap-popover.js.

Popover est le constructeur de l'objet jQuery plugin, mais vous ne devriez pas avoir besoin d'instancier directement.

Le plugin s'étendre jQuery, ajout de la méthode $.fn.popover(), qui, lorsqu'il est appelé permettra de créer une instance d'une Liste d'objet et de le joindre à l'élément que vous avez sélectionné. Cet objet peut être consulté sur votre élément (par exemple, id="elem") à l'aide d' $('#elem').data('popover').

Voici un simple JSFiddle qui montre une façon de créer un popup, essentiellement à l'aide de ce que vous aviez dans le po, $('#elem').popover().

Mise à jour: JSFiddle avec Bootstrap v. 3

Répondu el 16 de Août, 2012 par merv (14713 Points )

Answer 4

4voto

Zin Mi Tun Points 41

Pourquoi la popover et l'info-bulle ne fonctionnent pas dans le bootsrap?

La réponse est un code d'initialisation popover ou info-bulle $("#myButton").popover(); doit être placé sous <script src="js/jquery-1.10.1.min.js"></script>; et <script src="js/bootstrap.min.js"></script> .

Comme la procédure suivante. Je pense que ça ira.

 <button type="button" id="myPopover" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
      Popover on Right
</button>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
      $('#myButton').tooltip();
      $('#myPopover').popover();
</script>

Répondu el 21 de Novembre, 2013 par Zin Mi Tun (41 Points )

popover bootstrap

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

popover bootstrap

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: