web-dev-qa-db-fra.com

Comment puis-je changer la couleur du lien et la couleur du survol dans Bootstrap version 4?

Dans ma conception, je veux changer ma couleur de lien et de survol dans une partie spécifique. Je fais de mon mieux mais je ne peux pas faire ça. Je suis nouveau en bootstrap. Comment puis-je le changer pour Bootstrap 4? Un code simple est ici-

<div class="card" style="max-width: 320px;">
     <div class="card-header text-center"><h3>Navigation</h3></div>
          <div class="card-block">
               <ul class="nav navbar-nav" style="font-size: 1.50em;">
                   <li><a href="#" class="nav-link">Home</a></li>
                    <li><a href="#" class="nav-link">Documents</a></li>
                    <li><a href="#" class="nav-link">Videos</a></li>
                    <li><a href="#" class="nav-link">Gallery</a></li>
                    <li><a href="#" class="nav-link">Download</a></li>
                </ul>
           </div>                   
</div>
csstwitter-bootstraphovertwitter-bootstrap-4bootstrap-4
6
Fahim Foysal Kamal

Le code CSS de Bootstrap 4 est compilé avec Sass (SCSS) au lieu de Less now. Bootstrap 4 est livré avec une chaîne de construction grunt. La "meilleure" façon) pour personnaliser Bootstrap utilise la chaîne de build par défaut.

  1. téléchargez et décompressez le code source
  2. accédez au bootstrap (bootstrap-4-dev) dossier
  3. courir npm install dans votre console
  4. courir grunt dist pour recompiler votre code CSS

Pour modifier les couleurs, vous pouvez modifier les deux scss/bootstrap.scss ou scss/_variables.scss maintenant. Les exemples ci-dessous modifient scss/bootstrap.scss, assurez-vous de redéclarer les variables au début du scss/bootstrap.scss fichier.

La couleur du .nav-link et nav-link:hover est défini par les couleurs par défaut pour les sélecteurs a, vous pouvez modifier ces couleurs dans scss/bootstrap.scss comme suit:

$link-color:                 #f00; //red
$link-hover-color:           #0f0; //green

// Core variables and mixins
@import "variables";
@import "mixins";
....

Notez que ce qui précède change les couleurs de tous vos liens. Pour changer les couleurs de seulement .nav .nav-link ou même .card .nav .nav-link vous devrez compiler du code CSS avec une spécificité plus élevée . N'utilisez pas ! Important

Notez également que Bootstrap est actuellement dans un état alpha, vous ne devez donc pas l'utiliser pour la production. Variables pour déclarer les couleurs du .nav-link n'existe pas encore, mais est possible à l'avenir, voir aussi: https://github.com/twbs/bootstrap/issues/18630 ​​

Pour changer la couleur des couleurs de tous .nav .nav-links dans votre code utilisez le code SCSS suivant à la fin de votre scss/bootstrap.scss fichier:

....
// Utility classes
@import "utilities";
.nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}

Pour modifier les couleurs de la seule .nav-links à l'intérieur de .cards vous devez créer du code CSS avec une spécificité plus élevée comme suit:

....
// Utility classes
@import "utilities";
.card .nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}

Bien sûr, vous pouvez également créer votre propre code CSS à la fin de la bootstrap.css fichier. Selon vos besoins, utilisez une spécificité plus élevée;

Changer tous les liens:

a {color: #f00;}
a:hover {color: #0f0;}

HTML:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
  a {color: #f00;}
  a:hover {color: #0f0;}
</style>

Ou avec une spécificité plus élevée:

.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}

Ou même:

.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}
24
Bass Jobsen

Vous pouvez remplacer les classes bootstrap en ajoutant un fichier css personnalisé comme mystyle.css et le placer juste après bootstrap dans la section head:

<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"  rel="stylesheet">     
<link rel="stylesheet"  href="path/mystyle.css" type="text/css"/>

et à l'intérieur de mystyle.css:

.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}
4
bdaoudi

Deux façons (qui est en fait une):

1. Ajouter vos propres styles

En fait bootstrap permet d'être écrasé dans presque tous les cas, donc si vous définissez quelque chose dans votre propre .css, il remplacera le style défini dans bootstrap.css

Donc, ajoutez ceci à votre propre .css:

.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}

Vous verrez que cela fonctionne comme un charme.

2. Vous pouvez aller chercher tout ce qui se trouve dans bootstrap.css

Je vous déconseille fortement de le faire, sauf si cela est vraiment nécessaire, car chaque style peut être écrasé et cela créera une structure plus propre pour votre style.

2
Andrew Adam

Dans ma conception, je veux changer ma couleur de lien et de survol dans une partie spécifique.

Vous décrivez 3 choses qui peuvent être abordées en même temps dans BS4 avec sass. Si vous avez accès au fichier .scss de votre projet personnalisé et que vous êtes capable de le compiler, je recommanderais l'approche suivante ...

Pour ce cas particulier, vous pouvez créer un mixin personnalisé comme ceci:

@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
    @include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
    color:#333; /*set a fallback color*/
    font-weight:normal; /*customize other things about your like so like*/
    text-transform:none; /*customize other things about your like so like*/
    text-decoration:none; /*customize other things about your like so like*/
    text-align:$txtalign; /*reference parameter values like so*/
}


Je suppose que vos couleurs hexadécimales sont déjà affectées à des variables sass comme ceci:

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

Si c'est le cas, appelez votre mixin depuis n'importe quel endroit spécifique de votre fichier sass. Sense que c'est votre première fois, remarquez comment le paramètre suivant $m-color-white représente la valeur de $bgcolorOff paramètre ci-dessus. Faites donc très attention à l'endroit où vous placez vos couleurs pour définir votre variante personnalisée.

  .m-variant {
      @include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
   }


Enfin, lorsque vous créez vos boutons ou liens d'ancrage, vous pouvez ajouter les éléments suivants à vos structures d'éléments:

<a class="btn btn-sm m-3 m-variant ">my custom button</a>


4 étapes faciles. Après avoir fait cela la première fois, toutes les autres fois, c'est facile. En adoptant cette approche, vous prenez le contrôle total de vos couleurs de lien et de survol. Réutilisez et/ou créez autant de variantes que vous le souhaitez.

J'espère que cela t'aides

1
klewis

J'ai trouvé ce lien utile pour mes besoins.

Bootstrap 4 couleurs

0
kunaguvarun

Ajoutez ceci à votre CSS:

a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important

N'incluez pas les balises importantes au début, voyez s'il y a des conflits avant de les ajouter. Personnellement, je préfère simplement rechercher et trouver les classes pertinentes et les divs parent pour effacer tout conflit ou changer le nom de classe I ' m en utilisant.

0
Joel

Je suis juste un noob, mais Bootstrap 4 a une classe appelée "nav-link" que vous utilisez dans la balise d'élément de lien. J'utilisais une barre de navigation sombre et de couleur primaire et les liens étaient la même couleur. Cela m'a résolu.

<ul class="navbar-nav">
    <li class="nav-item">
        <a href="/Results/Create" class="nav-link">Create New Request</a>
    </li>
</ul>
0
Dr. Jon Paarlberg

ces CSS fonctionnent pour moi

.nav-pills .nav-link {
    color: #fff;
    cursor: default;
    background-color: #868686;
}

.nav-pills .nav-link.active {
    color: #000;
    cursor: default;
    background-color: #afafaf; 
    font-weight: bold;
}
0
Doberon