Moderne Webentwickler nutzen das Bootstrap-Framework aktiv, um adaptive und stilvolle Websites zu erstellen. Bei der Verwendung dieses Frameworks tritt jedoch ein Problem auf – das Unterstreichen aller aktiven Elemente auf der Seite. Dieser Effekt wird outline genannt und ist möglicherweise nicht immer wünschenswert.
Outline wird standardmäßig verwendet, um den Fokus auf Elemente festzulegen, wenn Sie mit der Tastatur wechseln. Diese Funktionalität ist jedoch nicht immer angemessen oder schön, besonders wenn Sie Ihre Stile anstelle von outline verwenden möchten oder es nicht notwendig ist, die aktiven Elemente hervorzuheben.
In diesem Artikel zeige ich Ihnen, wie Sie eine outline in Bootstrap einfach entfernen und durch Ihre eigenen Stile ersetzen können. Dadurch können Sie individuellere und professionellere Websites erstellen, die Ihren Bedürfnissen besser entsprechen.
Was ist outline in Bootstrap
Outline wird verwendet, um den Fokus auf Steuerelementen wie Schaltflächen, Links, Eingabefeldern und anderen interaktiven Elementen anzugeben. Es ist normalerweise ein einfacher Strich eines Elements, der Farbe und Stil ändern kann.
Outline ist standardmäßig in Bootstrap enthalten und wird mit CSS formatiert. Es kann nützlich sein, um die Benutzerfreundlichkeit und Zugänglichkeit einer Webseite zu verbessern, da Benutzer leichter erkennen können, auf welchem Element sich der Fokus befindet.
In einigen Fällen ist outline jedoch möglicherweise unerwünscht, insbesondere wenn Sie die Stile und das Design einer Webseite anpassen. In solchen Fällen können Sie eine Outline mit CSS-Stilen entfernen, sie durch einen anderen visuellen Effekt ersetzen oder sie vollständig entfernen.
Probleme im Zusammenhang mit outline in Bootstrap
Eines der häufigsten Probleme mit outline in Bootstrap besteht darin, es auf Elementen anzuzeigen, die Teil der Benutzeroberfläche sind, aber keine Links oder Schaltflächen darstellen. Es kann beispielsweise vorkommen, dass eine outline in einem Eingabefeld, einer Dropdown-Liste oder einem Formularelement angezeigt wird und einen unerwünschten Effekt erzeugt.
Ein weiteres Problem ist, dass Outline das allgemeine Design oder den Stil Ihrer Website verletzen kann. Wenn Sie ein spezielles Design haben, bei dem die Gliederung nicht mit den anderen Elementen übereinstimmt, kann dies zu einer Verschlechterung der Benutzererfahrung führen.
Darüber hinaus kann outline für Benutzer mit Behinderungen Probleme verursachen. Für manche Menschen kann es schwierig sein, zwischen einfacher Hervorhebung und Outline zu unterscheiden, was zu Verwirrung und Schwierigkeiten bei der Nutzung der Website führen kann.
Um diese Probleme zu beheben, können Sie outline vollständig in Ihrem Bootstrap-Projekt entfernen oder zusätzliche Stile hinzufügen, um die Anzeige auf bestimmten Elementen zu steuern. Dadurch können Sie eine flexiblere und benutzerfreundlichere Benutzeroberfläche erstellen.
Schritt 1: Verbinden der CSS-Datei
Um outline Bootstrap zu entfernen, müssen Sie die CSS-Datei korrekt einbinden.
Führen Sie dazu die folgenden Schritte aus:
| 1. | Öffnen Sie Ihre HTML-Datei in einem beliebigen Texteditor. |
| 2. | Suchen Sie die Partition, in der andere Dateien eingebunden werden, normalerweise die Partition . |
| 3. | Fügen Sie den folgenden Code innerhalb des Abschnitts hinzu: |
Hier verwenden wir einen Link zu einer gelöschten Bootstrap-CSS-Datei, die beim Öffnen Ihrer HTML-Datei geladen wird.
Nachdem Sie diese Zeile hinzugefügt haben, laden Sie Ihre HTML-Datei neu und Sie sollten sehen, dass outline Bootstrap nicht mehr auf Ihrer Seite angezeigt wird.
Schritt 2: Entfernen von Gliederungsstilen
Um Outline-Stile in Bootstrap zu entfernen, müssen Sie die folgenden Schritte ausführen:
- Öffnen Sie die CSS-Stildatei des Projekts.
- Suchen Sie nach Klassen oder Selektoren, die den Outline-Stil verwenden.
- Entfernen oder kommentieren Sie die entsprechenden Stile.
- Speichern Sie die Änderungen und laden Sie die Webseite neu, um das Ergebnis zu sehen.
In einigen Fällen kann das Festlegen von Outline-Stilen in verschiedenen Klassen definiert werden. Um eine outline vollständig zu entfernen, müssen Sie alle zugehörigen Stile suchen und bearbeiten.
Schritt 3: Umrissstile überschreiben
Um die Outline-Stile zu entfernen, die Bootstrap standardmäßig bereitstellt, müssen Sie sie mit ihren eigenen Stilen überschreiben. Befolgen Sie dazu diese Schritte:
Schritt 1: Erstellen Sie eine neue CSS-Datei und nennen Sie sie zum Beispiel custom.css.
Schritt 2: Innerhalb der Custom-Datei.css fügen Sie den folgenden Code hinzu:
/* Переопределение стилей outline */:focus a:focus,button:focus
Schritt 3: Fügen Sie die custom-Datei hinzu.css zu Ihrer HTML-Seite, indem Sie der Head-Sektion die folgende Codezeile hinzufügen:
Outline-Stile werden jetzt von Ihren eigenen Stilen überschrieben, und sie werden nicht auf Elemente angewendet, wenn Sie den Fokus darauf haben.
Hinweis: Wenn Sie Sass oder Less verwenden, können Sie Outline-Stile auch überschreiben, indem Sie die Variable $outline-width oder @outline-width ändern.
