Wie kann ich das ändern Linkfarbe und hover-Farbe in der Bootstrap-version 4?

In meinem design, die ich ändern will ist mein link und hover-Farbe in einem bestimmten Teil. Ich versuche mein bestes, aber ich kann das nicht tun. Ich bin neu in der bootstrap. Wie kann ich es ändern, für Bootstrap-4? Einen einfachen code, der ist hier-

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

Für zukünftige Leser mit Bootstrap 4.1+ stackoverflow.com/questions/43381596/bootstrap-4-navbar-color

InformationsquelleAutor Fahim Foysal Kamal | 2016-01-03

12

Den CSS-code von Bootstrap 4 ist zusammengestellt mit Sass (SCSS), anstatt jetzt Weniger.
Bootstrap-4 Schiffe mit einem Grunzen Kette erstellen.
Die "beste" Möglichkeit zum anpassen Bootstrap ist mit der Standard-Kette erstellen.
1. herunterladen und entpacken Sie das Quellcode
2. navigieren Sie zu der bootstrap (bootstrap-4-dev) Ordner
3. laufen npm install in Ihre Konsole
4. laufen grunt dist neu kompilieren CSS-code
Um die Farben zu ändern, können Sie Bearbeiten sowohl scss/bootstrap.scss oder scss/_variables.scss jetzt.
Die folgenden Beispiele Bearbeiten scss/bootstrap.scss, stellen Sie sicher, dass Sie deklarieren die Variablen, die am Beginn der scss/bootstrap.scss Datei.

Die Farbe der .nav-link und nav-link:hover wird durch die Standard-Farben für die a Selektoren, können Sie änderungen, die diese Farben in scss/bootstrap.scss wie folgt:
```
$link-color:                 #f00; //red
$link-hover-color:           #0f0; //green

//Core variables and mixins
@import "variables";
@import "mixins";
....
```
Beachten Sie, dass die oben genannten ändern der Farben der alle Ihre links. Um die Farben zu ändern, nur .nav .nav-link oder sogar .card .nav .nav-link haben Sie zum kompilieren von CSS-code mit einer höheren Spezifität. Verwenden Sie nicht !wichtig

Beachten Sie auch, dass Bootstrap ist derzeit in einem alpha-Zustand, so sollten Sie es nicht verwenden für die Produktion. Variablen zu erklären, die Farben der .nav-link existieren noch nicht, aber möglich in der Zukunft tun, siehe auch: https://github.com/twbs/bootstrap/issues/18630

Ändern Sie die Farbe der Farben aller .nav .nav-links in Ihrem code verwenden Sie die Folgen SCSS-code am Ende Ihrer scss/bootstrap.scss Datei:
```
....
//Utility classes
@import "utilities";
.nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  
```
Ändern der Farben von nur der .nav-links innerhalb der .cards erstellen Sie CSS-code mit einer höheren Spezifität wie folgt:
```
....
//Utility classes
@import "utilities";
.card .nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  
```
Natürlich können Sie auch erstellen Sie Ihre eigenen CSS-code am Ende der kompilierten bootstrap.css - Datei. Je nach Ihren Anforderungen verwenden Sie eine höhere Spezifität;

Ändern aller links:
```
a {color: #f00;}
a:hover {color: #0f0;}
```
HTML:
```

<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
  a {color: #f00;}
  a:hover {color: #0f0;}
</style> 
```
Oder mit höheren Spezifität:
```
.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}
```
Oder auch:
```
.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}    
```
InformationsquelleAutor Bass Jobsen
1

In meinem design, die ich ändern will ist mein link und hover-Farbe in einem bestimmten Teil.

Beschreiben Sie 3 Dinge, die angegangen werden können, alle auf einmal innerhalb von BS4 mit sass. Wenn Sie Zugriff auf die .scss-Datei des custom-Projekt und kompilieren konnte, dann würde ich empfehlen die folgende Vorgehensweise...

Für diesen speziellen Fall, können Sie erstellen eine benutzerdefinierte mixin wie folgt:
```
@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*/
}
```
Ich gehe davon aus, dass Ihr die hex-Farben zugeordnet sass Variablen bereits so:
```
$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..
```
Wenn dem so ist, rufen Sie Ihren mixin von einem bestimmten Standort in der sass-Datei. Sinn dieses Ihr erstes mal ist, wie die folgenden parameter $m-color-white stellt den Wert für $bgcolorOff parameter oben. Also achten Sie auf, wo Sie Ihre Farben zu helfen, definieren Sie Ihre benutzerdefinierte Variante.
```
  .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');
   }
```
Schließlich, wenn Sie Ihre buttons oder Anker-links, können Sie fügen Sie den folgenden, um Ihre element-Strukturen:
```
<a class="btn btn-sm m-3 m-variant ">my custom button</a>
```
4 einfachen Schritten. Nachdem Sie dies das erste mal, jedes weitere mal ist einfach. Durch diesen Ansatz, nehmen Sie die volle Kontrolle über Ihren link und hover-Farben. Re-use und/oder erstellen Sie so viele Varianten wie Sie möchten.

Hoffe, das hilft

InformationsquelleAutor klewis
0

Fügen Sie diese zu Ihrem CSS:
```
a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important
```
Nicht, das wichtige Stichworte auf den ersten, obwohl, zu sehen, ob es irgendwelche Konflikte, bevor Sie Sie hinzufügen. Ich persönlich bevorzuge einfach eine suchen & finden der relevanten Klassen und übergeordneten divs, löschen Sie alle Konflikte oder ändern Sie den Namen der Klasse, die ich verwende.

aber die hover-Farbe nicht ändern
Die hover-Farbe ist korrekt angegeben-in meinem Beispiel. Farbe: - tag wirkt sich nur der text und die :hover "Pfad" ist treffend betitelt, weil es nur greift diese CSS-Eigenschaften, wenn die Maus über den link.
Ich weiß nicht, ob ich deine Frage verstanden, also werde ich einfach sagen - wenn Sie in der code, den ich Euch gab, gibt und Sie nicht sehen, ein Effekt, den Sie brauchen, um herauszufinden, welches element in der Hierarchie ist, einen Konflikt zu verursachen, indem er den Vorrang vor dem Kind-Elemente. .Karte // .- Karte-sperren // .Karte-block ul // .Karte-block ul li // .Karte-block ul li a // .Karte-block ul li.nav-link // Überprüfen Sie Ihre CSS-Dateien und sehen, ob eines dieser Elemente aufgerufen werden
Bei der Arbeit mit großen CSS-Datei, wo Sie Probleme haben, finden Konflikte wie diese, eine gute Idee ist, machen Sie einen test-code für alle übergeordneten Elemente über die Zielgruppe Kind und geben Sie jeweils mit einer unterschiedlichen :hover-Farbe in der CSS. Markieren Sie diese !wichtig und sehen, welche Farbe sich zeigt, wenn Sie es testen. Dann wissen Sie genau, welches element des Konflikts.
aber hier, hover funktioniert nicht in meinem code. Ich Folge deinem Vorschlag alle.

InformationsquelleAutor Joel
0

Ich bin nur ein noob, aber Bootstrap-4 hat eine Klasse namens "nav-link", die du in das link-element-tag. Ich war mit einer dunklen, primäre farbige Navigationsleiste und die links waren der gleichen Farbe. Dies löste für mich.
```
<ul class="navbar-nav">
    <li class="nav-item">
        <a href="/Results/Create" class="nav-link">Create New Request</a>
    </li>
</ul>
```
InformationsquelleAutor Dr. Jon Paarlberg
0

Ich diesen link gefunden, nützlich zu sein für meine Bedürfnisse.

Bootstrap-4 Farben

InformationsquelleAutor kunaguvarun
-1

Zwei Möglichkeiten (eigentlich eine):

1. Indem Sie Ihre eigenen Stile

Eigentlich bootstrap ermöglicht überschrieben wird in fast jedem Fall, also wenn Sie etwas in Ihrem eigenen .css es sonst der Stil " eingestellt ist bootstrap.css

So fügen Sie diese zu Ihrer eigenen .css:
```
.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}
```
Du wirst sehen es funktioniert wie ein Charme.

2. Sie können gehen und finden Sie alles in der bootstrap.css

Ich dringend abraten tun Sie so, es sei denn, es ist wirklich notwendig, da jedes styling können überschrieben werden und es wird eine saubere Struktur für Ihr styling.

Ihr "gehen und finden..." - Methode wird nie benötigt
Ja, ich sehr einverstanden, dass dies nie nötig, das ist, warum ich sagte, alles, was getan werden kann, die andere Weise, obwohl nur aus Neugier gibt es irgendeinen Grund neben den Gründen eines sauberen und schönen code, es nicht zu tun, deiner Meinung nach?
Ursache Sie können nicht aktualisieren, bootstrap, nachdem Sie Ihre änderungen

InformationsquelleAutor Andrew Adam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.