Share
Im vorigen Tutorial in unserer Serie über Bootstrap 3 haben Sie einige der in Version 3 geänderten CSS-Features kennengelernt. In diesem Tutorial werden wir dies mit anderen geänderten Features wie Bildern und Schaltflächen abschließen.
Die auffälligste Änderung in den Klassen, die zum Stilisieren von Schaltflächen in BS3 verwendet werden, ist der Standardstil. Fügen Sie unter BS2 einfach das hinzu btnclass zu einem Eingabeelement vom Typ button oder zu einem Anker-Tag, würde dem Steuerelement das Standard-Button-Erscheinungsbild verleihen.
Ab BS3 müssen Sie jetzt explizit hinzufügen BT-Standard; einfach hinzufügen btnvon alleine wird jetzt keine Wirkung mehr haben.
Die zweite Hauptänderung betrifft die Umbenennung einiger Basisklassen. Speziell, BT-Fehlerwurde in umbenannt btn-gefahrso dass das Benennungsschema mit den anderen ähnlich benannten Klassenänderungen übereinstimmt und die Bootstrap-Basisbibliothek vereinheitlicht.
Ansonsten bleiben die Basis-Button-Klassen unverändert, wie das folgende Codebeispiel zeigt:
Wenn Sie im Browser gerendert werden, sehen Sie die normale flache Schaltfläche, die der BS3 jetzt für Steuerelemente hat:
Es gibt ein paar neue Klassen für das Schaltflächenelement, die hinzugefügt wurden, um die Größenklassen für das Rasterformat einheitlicher zu gestalten. Diese Klassen sind BTN-lg, btn-sm, und BTN-XS; es gibt kein BTN-MD, Die mittlere Schaltfläche ist die Standardgröße, die verwendet wird, wenn keine Klasse angegeben wird.
Das folgende Codebeispiel veranschaulicht alle Schaltflächenstile in verschiedenen Größen:
Bei der Wiedergabe im Browser sollte dieses Codebeispiel die folgende Ausgabe ergeben:
Wenn Sie die Klasse hinzufügen BT-BlockBei einem Button oder Ankerelement, das mit einer der vorherigen Button-Klassen gestaltet wurde, dehnt sich dieser Button so aus, dass er 100% des verfügbaren Platzes ausfüllt. Dies ist nützlich, wenn Sie Dialogfelder und Größensteuerelemente mit dem BS3-Rastersystem erstellen, da Sie damit die Größe von Schaltflächen (und anderen Elementen) anpassen können, um ein gutes Gleichgewicht in Ihren Formularentwürfen zu erhalten.
In den meisten Fällen müssen Sie den aktiven Status einer Schaltfläche nicht selbst festlegen, aber wenn Sie dies tun, können Sie den aktivKlasse zu jedem Element, das mit den Button-Klassen markiert wurde. Aktivim allgemeinen (auf der zumindest verwendet das Element normalerweise das :aktivPseudo-Selektor, um den Stil der Schaltfläche zu ändern. Hinzufügen der aktivDie Klasse zwingt die Schaltfläche jedoch, ihren aktiven Status anzuzeigen.
HinweisWenn Sie daran denken, den aktiven Status zum Erstellen von Kurzwahltasten zu verwenden, beachten Sie, dass in den folgenden Lernprogrammen der Status der Schaltflächen mit den verfügbaren Komponenten- und JavaScript-Funktionen besprochen wird. BS3 bietet mit den zusätzlichen Funktionen, die in diesen Funktionen zur Verfügung stehen, genau einen solchen Sticky-Button, sodass Sie in den meisten Fällen keine eigenen Sticky-Buttons erstellen müssen, die Active verwenden.
Sie können Ihre Schaltflächen auch deaktivieren und sie als inaktiv markieren, indem Sie dieselben deaktivierten Klassen und Attribute verwenden, die wir zuvor mit den Änderungen in Formularelementen besprochen haben.
Der folgende Code zeigt Schaltflächen, die als aktiv und im deaktivierten Zustand markiert sind:
Beachten Sie jedoch, dass bei Ankertasten die deaktiviertElement / Klasse macht nicht Deaktiviere den Link; Um sicherzustellen, dass ein deaktivierter Zustandsankerlink nicht ausgelöst wird, müssen Sie benutzerdefiniertes JavaScript verwenden.
Aus diesem Grund empfiehlt das BS3-Team die Verwendung der Element, wenn möglich, Schaltflächen zu markieren und Ankertags nur unter bestimmten Umständen zu verwenden.
Vergessen wir auch nicht das Thema „Idempotenz“ und die Wichtigkeit der Verwendung von Knöpfen über Ankern. Im Allgemeinen ist eine Ankerverknüpfung angemessen, wenn das Ziel eine Get-Anforderung ist und das mehrmalige Herstellen der Verknüpfung keine Probleme durch wiederholte Aktivierung verursacht. Verwenden Sie andernfalls eine Schaltfläche.
CSS-Änderungen, wenn es um das bescheidene Image-Tag geht, waren nicht so weitreichend wie an anderen Stellen in BS3. Zuvor reagierten Bilder standardmäßig nicht, und wie bei vielen anderen Dingen in BS2 mussten Sie die optionalen reagierenden Klassen hinzufügen, um annähernd mit ihnen reagieren zu können.
Leider waren die Dinge auch nach dem Hinzufügen der optionalen responsiven Klassen nicht perfekt. Viele zitierten Probleme mit Seiten, auf denen Google Maps ua verwendet wurde.
BS3 ändert all das. Standardmäßig reagieren Bilder mit der Verwendung von img-responsivezu irgendeinem
Abgesehen davon ist die einzige andere Änderung, die an dem Bilderabschnitt vorgenommen wurde, der Name der img-polaroidKlasse (zur Erzeugung von Thumbnails) bis img-thumbnail, so dass es mit anderen ähnlichen Umbenennungen in der Bibliothek übereinstimmt.
Die BS2-Klassen Ich bin geerdetund img-kreisfunktioniert weiterhin wie zuvor und erzeugt einen kreisförmigen und abgerundeten Rechteckeffekt.
Schließlich kommen wir zu den Änderungen, die sich auf Dinge beziehen, die nicht wirklich in bestimmte Kategorien passen.
Unter den Typografieklassen in BS2 wurde ursprünglich eine Reihe von Farbklassen eingeführt, mit denen die Farbe eines Textelements auf die gleichen Branding-Farben eingestellt wird, die in anderen Elementen des Frameworks verwendet werden.
BS3 geht noch einen Schritt weiter und führt das Konzept ein, dass die gleichen Farben auch für kontextuelle Hintergründe verwendet werden.
In diesem Fall handelt es sich bei den Hintergründen um eine leichtere Variante, die in Panels und Alarmboxen an anderer Stelle verwendet wird. Es gibt noch einen zusätzlichen Bonus: Wenn Sie diese kontextabhängigen Farbklassen für Ankertags und alle anderen Elemente verwenden, für die standardmäßig ein Hover-Over festgelegt ist, werden die Farben automatisch leicht gedimmt, um anzuzeigen, dass sie über den Hover-Bereich verschoben wurden.
Wie bei der Benennung in anderen farbbasierten Klassen sind auch die hier verfügbaren Klassen verfügbar Text stummgeschaltet, primärer Text, Text-Erfolg, Text-Info, Textwarnung, und Textgefahrfür Absatz, Bereich und andere Inline- oder Block-basierte Textelemente.
Für Hintergrundfarben sind die Klassennamen bg-primär, BG-Erfolg, bg-info, BG-Warnung, und bg-gefahr.
Der folgende Code zeigt ein Beispiel für deren Verwendung:
Dieser Absatz verwendet die stummgeschaltete Textklasse, normalerweise für etwas reserviert, das nicht wirklich wichtig oder weniger prominent ist.
Dieser Absatz verwendet die primäre Textklasse, In der Regel für etwas Wichtiges reserviert und sichtbar.
Dieser Absatz verwendet die Textklasse Erfolg, Normalerweise für eine Aktion reserviert, die gerade erfolgreich war oder etwas Gutes und Glückwunsch.
Dieser Absatz verwendet die Infotextklasse, Normalerweise für informelle Nachrichten reserviert, z. B. ein gerade abgeschlossener Hintergrundjob oder eine neue Datei.
Dieser Absatz verwendet die Warnungstextklasse, Normalerweise für etwas reserviert, das gefährlich sein könnte oder Aufmerksamkeit erfordert, aber eine Weile warten kann.
Dieser Absatz verwendet die Gefahrentextklasse, Normalerweise für etwas sehr Wichtiges reserviert oder für etwas, das wirklich Aufmerksamkeit erfordert.
In diesem Absatz wird normaler Text verwendet, jedoch mit einer primären Hintergrundfarbe, die Ihnen den Standardstatus anzeigt.
In diesem Absatz wird normaler Text verwendet, jedoch mit einer Hintergrundfarbe für den Erfolg, die Ihnen mitteilt, dass alles, was Sie sehen, gut ist.
In diesem Absatz wird normaler Text verwendet, der jedoch mit einer Hintergrundfarbe für Informationen versehen ist, um Ihnen mitzuteilen, dass das, was Sie sehen, informativ ist und gelesen werden sollte, jedoch nicht immer beachtet werden sollte.
In diesem Absatz wird normaler Text verwendet, jedoch mit einer warnenden Hintergrundfarbe, die Sie darauf hinweist, dass das, was Sie sehen, Probleme verursachen kann, die Ihnen bekannt sein sollten.
In diesem Absatz wird normaler Text verwendet, jedoch mit einer gefährlichen Hintergrundfarbe, um Ihnen mitzuteilen, dass das, was Sie sehen, Sie jetzt darauf achten müssen.
Eine Sache, die in BS3 als notwendig eingestuft wurde und in BS2 nicht vorhanden ist, ist eine dedizierte CaretKlasse für Dropdown-Anzeigen auf Tasten und anderen Bildschirmmöbeln.
Sie können dies nun für Ihre eigenen Elemente verwenden, indem Sie einen Klassennamen hinzufügen Eine weitere Neuerung in BS3, die zwar keine Klasse ist, verdient jedoch eine Erwähnung: Der Dialog schließt sich. Genau wie das Das folgende Codebeispiel zeigt ein Beispiel für beide Dieser Text erscheint in einem Div, dem ein eigenes Schließsymbol angehängt ist. Genau wie in BS2 die Quick Float-Utility-Klassen Andere neue Klassen umfassen die Wir haben bereits gesehen, dass eine neue Klasse aufgerufen wurde Wenn Sie einen Seitentitel mit einem Bildbanner definieren, kann ein typischer Bildschirmleser den Text im Bild nicht erkennen. Viele Autoren haben einen Hacker namens Image Replacement verwendet, um dieses Problem zu umgehen. Die Bildersetzung funktioniert, indem Sie das Bildbanner in ein einschließen Was dann passiert, ist, dass das Bildbanner von Personen mit guter Sicht gesehen wird, aber diejenigen, die einen Bildschirmleser verwenden, hören, dass der Leser den eigentlichen Text im Bildbanner sagt. BS3 bietet jetzt eine Klasse namens Schließlich kommen wir im CSS-Änderungsabschnitt zum letzten der letzten. Welchen Nutzen hätte ein responsives Webdesign-Framework ohne Dienstprogrammklassen, mit denen Sie Ihre responsiven Layouts verwalten können?? "Aber halt, wir haben das mit Gittern bedeckt", höre ich Sie sagen, und ja, wir haben es. Aber BS3 hat noch einen Trick im Ärmel, der in aller Fairness ist war in BS2 vorhanden, funktionierte aber nicht wirklich gut. Also, was ist diese zusätzliche Magie? Ich möchte Ihnen die responsiven Sichtbarkeitsklassen vorstellen. Im Wesentlichen können Sie mit diesen kleinen Edelsteinen Teile Ihrer Benutzeroberfläche je nach Raster und Anzeigegröße austauschen und ändern. Stellen wir uns zum Beispiel vor, Sie haben eine Liste von E-Mail-Posteingangselementen, und wenn sie auf einem Desktop-PC angezeigt werden, wird neben jedem Element eine Vorschau angezeigt, ähnlich wie in einer klassischen E-Mail-Leseanwendung. Etwas wie das Folgende: Das ist jetzt großartig, bis Sie versuchen, es auf einem mobilen Gerät zu installieren, wo Sie den Vorschaubereich unbedingt ausblenden und nur die E-Mail-Liste verlassen möchten. Normalerweise wird eine solche Aufgabe mit etwas JavaScript ausgeführt, um die Sichtbarkeit des Elements zu ändern, indem die sichtbaren Einstellungen des Elements geändert werden. BS3 verfügt über eine integrierte Lösung mit CSS-Klassen, mit der Sie solche Situationen mühelos handhaben können. Nimm den folgenden Code: Lieber Mensch, Bla bla bla bla bla bla Wenn Sie dies in Ihrem Browser rendern, sollten Sie etwas erhalten, das wie folgt aussieht: Wenn Sie jedoch die Größe Ihres Browsers auf die Größe des mobilen Bildschirms ändern, werden die Dinge ein bisschen seltsam: Dies mag für einige funktionieren, aber im Allgemeinen ist es keine gute Idee. Was passiert, wenn Sie 100 ungelesene E-Mails haben und jedes Mal zum Ende der Ansicht scrollen müssen, um die Vorschau zu lesen? Nehmen Sie die Hauptvorschau Wenn Sie dann Ihren Browser aktualisieren und versuchen, die Größe zu ändern, sollte die Vorschau angezeigt werden Genau wie beim Rastersystem gibt es vier verschiedene Größen, und es gibt Klassen zum Ausblenden und Sichtbarmachen. Die sichtbaren Klassen machen das betreffende Element sichtbar nur mit der angegebenen Bildschirmgröße und die ausgeblendeten Klassen machen das betreffende Element ausgeblendet nur bei der angegebenen Bildschirmgröße. Die Klassennamen lauten wie folgt: Die Breiten der Geräte und die dazugehörigen Triggerpunkte sind die gleichen wie im Allgemeinen im Netz, mit In dieser Kategorie werden zwei abschließende Klassen verwendet, die Sie bei der Handhabung von Anzeige- und druckbasierten Layouts unterstützen. Sie können verwenden Dieses Tutorial enthält ein Kapitel von Bootstrap 3 Succinctly, ein kostenloses eBook des Teams von Syncfusion.Caretzu deinem äußeren Behälter-a oder Caret, Dies war in BS2 vorhanden, konnte jedoch nicht separat von der beabsichtigten Verwendung in modalen Dialogen und Alarmleisten verwendet werden. Ab BS3 können Sie es jedoch ganz gut selbst verwenden. CaretKlasse und enges Kreuz in generischer Aufwertung: 
nach links ziehenund nach rechts ziehenEs gibt immer noch, aber sie sind jetzt mit Mittelblock, was einfach beide Ränder automatisch macht und das Element in seinem übergeordneten Element zentriert, und Clearfix, Dadurch werden alle möglicherweise verwendeten Floats gelöscht, und der normale Dokumentenfluss wird wiederhergestellt. Show, versteckt, und unsichtbarKlassen. ShowZiemlich viel spricht für sich selbst, aber was ist der Unterschied zwischen den letzten beiden? VerstecktReduziert den vom Element verwendeten Platz physisch. Wenn Sie also beispielsweise ein Div mit voller Höhe verwenden, wird das Div auf die kleinste Höhe reduziert. Wenn Sie jedoch verwenden unsichtbar, Das Element behält seinen Raum (und nimmt auch noch seinen Platz im Elementfluss ein), verschwindet jedoch aus dem Blickfeld. Nur Herrwurde eingeführt, um einen Block als sichtbar für Bildschirmlesegeräte und nichts anderes zu kennzeichnen. Es gibt jetzt eine andere Klasse wie diese, die für grafische Überschriften verwendet wird. H1oder ein anderes Standard-Tag, das den Namen als Klartext neben das Bildbanner einfügt und den Text dann mit CSS aus dem Bildschirm verschiebt. Text ausblendenum dies zu erleichtern. Ein einfaches Beispiel folgt:
Ein auf einem Bild basierender Titel
Ausgabe, die anhand eines Codebeispiels in einem normalen PC-Browser generiert wurde
Beispiel für das Layout einer E-Mail-Anwendung
E-Mail 1 (01.01.11) E-Mail 2 (01.01.11) E-Mail 3 (01.01.11) E-Mail 4 (01.01.11) E-Mail 5 (01.01.11) E-Mail 6 (01.01.11) E-Mail 2: Erhalten (01.01.11)
An: eine Person
E-Mail-Anwendungsmodell nach vorherigem Codebeispiel erstellt
E-Mail-Anwendungs-Mockup für eine vergrößerte Ansichtversteckte sm, wie folgt: 
E-Mail-Anwendungsmodell mit geänderter Größe, jedoch mit ausgeblendeten Klassen
visible-xs: Auf extrakleinen Bildschirmen sichtbar machen sichtbar-sm: Auf kleinen Bildschirmen sichtbar machen sichtbar-md: Auf mittleren Bildschirmen sichtbar machen sichtbar-lg: Auf besonders großen Bildschirmen sichtbar machen
hidden-xs: Auf besonders kleinen Bildschirmen ausblenden versteckte sm: Auf kleinen Bildschirmen ausblenden hidden-md: Auf mittleren Bildschirmen ausblenden hidden-lg: Auf großen Bildschirmen ausblenden -xsHandflächengroße Tablets und kleinere, -smfür durchschnittliche bis große Tabletten, -mddie meisten Desktop-Computer abdecken und -lgfür Breitbild-Desktops. sichtbarer Druckund versteckter Druckauf dieselbe Weise wie die größenbasierten Klassen oben, aber diesmal wird ein Element sichtbar und unsichtbar, wenn eine Seite an den Drucker gesendet wird. 
Accentsconagua