Appliquer le style CSS à liste dans le Bootstrap

Je veux appliquer CSS personnalisé pour le titre et le contenu d'une liste dans le Bootstrap, cependant, il semble que mon CSS est ignoré.

Comment puis-je appliquer une feuille de style spécifique pour le titre et le contenu respectivement?

JS:

$("#poplink").popover({
    html: true,
    placement: "right",
    trigger: "hover",
    title: function () {
        return $(".pop-title").html();
    },
    content: function () {
        return $(".pop-content").html();
    }
});

CSS:

html, body {
    width: 100%;
    height: 100%;
}
.pop-div {
    font-size: 13px;
    margin-top: 100px;
}
.pop-title {
    display: none;
    color: blue;
    font-size: 15px;
}
.pop-content {
    display: none;
    color: red;
    font-size: 10px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>

Par exemple: http://jsfiddle.net/Mx4Ez/

InformationsquelleAutor MLister | 2013-07-26
  1. 65

    La raison semble être que le javascript est la création de la marque de nouveaux éléments à l'affichage de la liste elle-même. Ces nouveaux éléments ont différents noms de classe css que l'original.

    Essayez d'ajouter ceci dans votre css: 

    .popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}

    Mise à jour

    En fonction de la version de bibliothèque que vous utilisez, les noms peuvent être différents. Si le ci-dessus ne fonctionne pas, essayez d'utiliser .popover-header et .popover-body à la place.

    • De toute façon à s'appliquer uniquement à un popover? Je m'attendais à quelque chose le long des lignes de: .popover({ templateCss: {...} }).
    • Une bonne façon de le faire est avec des feuilles de style. Je serais personnellement éviter d'essayer de définir les styles à l'aide de javascript, de manière à éviter d'avoir à appeler .liste(..) plusieurs fois. Voici un violon comment je ferais: jsfiddle.net/n8e92k4n/11
    • Je suis en utilisant Angulaire. Donc si la liste avait un css option (ou encore mieux, un class option), le Angulaire de Bootstrap de l'INTERFACE utilisateur devrait permettre d'effectuer ces réglages dans l'angle de modèle. JS ne serait pas touché 🙂
    • Merci, toutefois, il ne fonctionne pas dans mon cas puisque je suis en utilisant data-container="body".
    • mettra à jour le color pour .popover après l'insertion de la liste dans les dom. Je suis en utilisant ce avec des éléments à l'intérieur d'une toile et il fonctionne.
    • Je pense que ma réponse peut vous aider avec votre question.
    • Cela n'a pas fonctionné pour moi dans le bootstrap 4

    InformationsquelleAutor Matt Pinkston
  2. 8

    Nouvellement créés, les éléments ont la hiérarchie suivante:

    .popover
    |_  .popover-title
    |_  .popover-content

    Qui est injecté après l'élément qui déclenche la liste (vous pouvez spécifier un conteneur spécifique pour l'injection de liste par le réglage de la container option, dans ce cas, vous définissez les styles à l'aide de l'élément que vous avez passé du conteneur). Donc, au style d'une liste vous pouvez utiliser des css de la façon suivante:

    <div id="my-container">
  <a href="#" id="popover-trigger">Popover This!</a>
</div>

<style>
  .popover-title { color: green; }  /* default title color for all popovers */

  #my-container .popover-title { color: red; }  /* specific popover title color */
</style>
    InformationsquelleAutor isapir
  3. 7

    Si vous avez plusieurs popovers sur votre page et que vous souhaitez uniquement le style de l'un d'entre eux, vous pouvez tirer parti de la liste de template option pour ajouter une autre classe:

    $("#myElement").popover({
  template: '<div class="popover my-specific-popover" role="tooltip">...'
});

    J'ai commencé par juste en utilisant la valeur par défaut pour template de la docs, et a ajouté my-specific-popover à l'attribut de classe.

    InformationsquelleAutor jobo3208