Puis-je changer de Bootstrap touche de couleur?

- Je utiliser Bootstrap CSS Boutons de Référence.

J'ai créer un bouton: class="btn btn-primary".

Je veux que le fond sera noir, et la couleur du texte sera blanc. Comment puis-je le faire?

  • Vous pouvez cibler btn-primary classe et l'écraser dans votre CSS. comme ceci.
  • Il est préférable de remplacer les effets avec une classe personnalisée, plutôt que de surcharger la classe par défaut dans ce cas
InformationsquelleAutor Or Smith | 2014-12-28
  1. 17

    Vous avez besoin de remplacer votre css de sorte que vous pouvez changer l'arrière-plan en noir. Une façon simple de le faire est de créer une classe css (vous pouvez soit mettre cela dans une <style type="text/css"> balise HTML ou mettre cela dans un autre fichier CSS)

    .black-background {background-color:#000000;}
.white {color:#ffffff;}

    Alors, donnez votre bouton ces classes

    <input type="submit" class="btn btn-primary black-background white" value="Text" />
    • hmmm, quand je fais cela, je viens de voir le même bouton bleu avec un rectangle noir autour des mots.
    • Si vous affichez l'élément dans un navigateur par un clic droit, puis en cliquant sur "inspecter" est-il un autre style primordial de votre bouton?
    InformationsquelleAutor Zac
  2. 3

    Cette question a déjà été évoquée ici: Style twitter bootstrap boutons

    Je vous recommande de suivre les conseils ci-dessus; la pratique courante consiste à remplacer la valeur par défaut/bootstrap de la feuille de style avec votre propre style plutôt que de modifier les valeurs par défaut/bootstrap directement ou l'ajout de nouvelles classes de style. La fondation fonctionne de la même manière.

    InformationsquelleAutor Nathaniel Flick
  3. 1

    moyen facile et rapide avec

        .btn-black{background-color:#000;color: #FFF;}
    .btn-black:hover{color: #FFF;}

    et

    <button type="button" class="btn btn-black" ...
    InformationsquelleAutor Cyril Jacquart
  4. 0

    D'autres moyens peuvent inclure :

    Je peux vous proposer la première, si le second semble trop compliqué, parce qu'il y a plusieurs types de bouton et vous pouvez personnaliser chaque boutons bg couleurs ainsi que d'autres propriétés. Lorsque vous souhaitez mettre à jour vos fichiers de configuration ou vous pouvez télécharger votre propre config pour obtenir de nouveaux fichiers ou de modifier votre configuration.

    Et de ce fait, la solution la moins compliquée et plus maintenable.

    InformationsquelleAutor wooer
  5. 0

    Utilisation (class="btn btn-primary navbar-inverse") dans votre classe button.Pas besoin d'écrire du CSS.

    InformationsquelleAutor
  6. 0

    J'ai créé une classe personnalisée et l'a remplacée par une classe personnalisée appelé btn-foncé
    J'ai ensuite précisé le nom dans mon style.css, ce qui signifie qu'il a remplacé mon bootstrap.

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .btn-dark{
  background-color:black;
  color:white;
  }
  </style>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-dark">Basic Button</button>
</div>

</body>
</html>

    InformationsquelleAutor Rheo
  7. 0

    Oui, vous pouvez. Essayez de créer un nouveau fichier, le nom de la coutume.css, et ajouter ce que vous avez besoin pour personnaliser votre thème. Assurez-vous d'inclure après bootstrap, fichiers!

    InformationsquelleAutor Adel