Wie kann ich Chevron-Symbole zu Bootstrap 3-Akkordeon-Panels hinzufügen, um deren Minimierungsstatus mithilfe von CSS visuell anzuzeigen?

Verwenden von CSS zum Anzeigen von Chevron-Symbolen für Zusammenbruchzustände

Im Bootstrap 3-Framework wird die Akkordeonkomponente häufig zum Erstellen zusammenklappbarer Bedienfelder verwendet. Während die Standardfunktionalität dieser Panels das Umschalten ihrer Sichtbarkeit umfasst, möchten Benutzer dies möglicherweise weiter verbessern, indem sie den aktuellen Einblendstatus mithilfe von Chevron-Symbolen visuell anzeigen.

CSS-Ansatz

Der folgende CSS-Ansatz kann verwendet werden, um Chevrons zu den Panel-Überschriften hinzuzufügen:

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

Um diesen Ansatz zu verwenden, fügen Sie das hinzu Fügen Sie das obige CSS Ihrem Stylesheet hinzu. Dadurch werden den Panel-Überschriften Chevrons hinzugefügt, wobei bei geöffneten Panels ein nach unten gerichteter Chevron und bei minimierten Panels ein nach oben gerichteter Chevron angezeigt wird.

Beispiel-HTML

Damit Wenn CSS vorhanden ist, erzeugt der folgende HTML-Code zusammenklappbare Panels mit Chevron Symbole:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group"><p>Dieser Ansatz verbessert das Benutzererlebnis, indem er visuelle Hinweise auf den aktuellen Status des Panels liefert, wodurch es für Benutzer einfacher wird, die zusammenklappbaren Panels zu verstehen und mit ihnen zu interagieren.</p></div>

Das obige ist der detaillierte Inhalt vonWie kann ich Chevron-Symbole zu Bootstrap 3-Akkordeon-Panels hinzufügen, um deren Minimierungsstatus mithilfe von CSS visuell anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!