Share
Bisher haben Sie bereits einige der neuen CSS-Funktionen gesehen, die in Version 3 von Bootstrap verfügbar sind. In diesem Tutorial gehen wir näher auf das ein, was neu ist und was nicht.
In vielen Fällen sind diese neuen Klassen nur Umbenennungen der alten, aber wir behandeln sie hier als neu, so dass Sie leicht unterscheiden können.
Die verschiedenen Klassen, aus denen sich der Typ3-Bereich von BS3 zusammensetzt, haben sich ebenso wenig geändert wie einige der anderen Elemente. Stichworte H1durch H6werden immer noch genauso behandelt wie in v2, mit dem Zusatz, den Sie jetzt verwenden können in Übereinstimmung mit einem Header-Element, ohne dass es zuvor in ein divVerwendung der KopfzeileKlasse. Dies bedeutet jetzt kein zusätzliches Markup, es sei denn, Sie möchten, dass die Blocküberschrift mit einem anderen Absatzrand unterstrichen wird.
Dies ist meine super Webseite Es ist das Beste, was es gibt
In Version 2 hatten Sie keine andere Wahl, als Ihre H1 in eine div-Kopfzeile zu packen, da dies die einzige Möglichkeit war, die Ausgabe der kleinen Tags ordentlich anzuordnen. Dies wurde jetzt korrigiert und auch auf alle Kopfebenen angewendet, nicht nur auf die ersten drei.
Dies ist meine super Webseite Es ist das Beste, was es gibt
Wenn Sie fortfahren, hat die Standardtextklasse für Textkörper keine Änderungen und verbleibt bei einer Standardgröße von 14 Pixel mit einer Zeilenhöhe von etwa 1,4.
Die Textkopie wird automatisch auf den gesamten Text innerhalb eines Absatz-Tags angewendet. Daher sind keine Klassen erforderlich, es sei denn, Sie möchten einige der speziellen Funktionen verwenden (wie wir bald sehen werden)..
Hauptteilkopie (Absätze mit dem Klassennamen von führen) haben auch keine Änderungen an ihren Namen oder ihrem Styling, und wie in Version 2 sollen sie den einleitenden Absatz etwas stärker betonen als die andere normale Textkopie. Wenn Sie diese drei CSS-Regeln kombinieren, haben Sie möglicherweise Folgendes:
Dies ist meine super Webseite Es ist das Beste, was es gibt
Willkommen auf meiner Super-Duper-Webseite, es gibt keine andere Webseite auf der ganzen Welt. Meine Seite ist das Beste, was Sie im Internet besuchen sollten
Auf dieser fantastischen Seite habe ich Text und noch mehr Text, und es gibt sogar Text, den Sie lesen können, sowie einen gut aussehenden Seitentitel
Wenn es in Ihrem Browser gerendert wird, sollte es wie folgt aussehen:
Das Tag kann jetzt auch für sich alleine verwendet werden, da das Styling nun korrekt in dem Kontext behandelt und angewendet wird, in dem es verwendet wird. Das Styling folgt also seiner Position im Dokument, unabhängig vom übergeordneten Tag.
In ähnlicher Weise wird der fett gedruckte Text immer noch mit erstellt Tag und Kursivschrift mit der Etikett; Wie bei vielen Typografieklassen unterscheidet sich dies nicht vom v2-Framework.
Die Ausrichtungsklassen behalten auch ihre gleichen Klassennamen bei Text links, Textzentrum, Text rechts, und Text-Rechtfertigung, und führen immer noch die gleichen Funktionen aus, die in dem BS2-Buch beschrieben sind, das dieser Serie vorangeht.
Ebenso werden Abkürzungen immer noch mit erstellt tag mit dem TitelAttribut als vollständige Beschreibung der Abkürzung. Es gibt eine neue Klasse, Initialismus, Dies kann zu einem Abkürzungs-Tag hinzugefügt werden und verleiht der gerenderten Ausgabe ein etwas kleineres Erscheinungsbild als der umgebende Text.
Adressen (mit der tag) und Anführungszeichen (mit der tag) hat auch keine Änderungen in den CSS- oder Basisregeln zwischen v2 und v3 des Frameworks.
Zu den letzten wenigen Tags, die in der typografischen Kategorie verbleiben, gehören , wird zum Erstellen eines Inline-Codebeispiels verwendet. Dies hat sich auch in keiner Weise geändert, und die beabsichtigte Verwendung ist immer noch für Codebeispiele, die sich in normalem Text befinden.
Für Codebeispiele (oder alles, was aus reinem Text besteht), die gemäß Einrückung und Zeilenumbrüchen formatiert bleiben müssen, sollten Sie weiterhin die Etikett; Auch hier hat sich das Styling von Version 2 nicht geändert, und das Layout mit diesem Tag sollte sich dennoch wie erwartet verhalten.
Das letzte typografische Element ist das Hinzufügen eines neuen Elements .
Der Zweck dieses neuen Tags besteht darin, Text so anzuzeigen, dass der Benutzer die Informationen auf irgendeine Weise in den Computer eingeben soll, im Allgemeinen durch Eingabe.
Zum Beispiel:
Öffnen Sie eine Eingabeaufforderung, indem Sie eingeben cmd Klicken Sie in die Box und klicken Sie auf die Schaltfläche "Ausführen" meinprogramm und drücken Sie die Eingabetaste, an dem die App ausgeführt werden soll
Was in einem HTML-Dokument gerendert wird, sollte ungefähr wie folgt aussehen:
Im Allgemeinen bestehen die normalen Listenelemente aus list-unstyled, list-inlinezusammen mit dl-horizontalKlassen für Definitionslisten bleiben auch in BS3 unverändert und verhalten sich wie in BS2.
Es gibt jedoch einige Änderungen an den Listenelementen. Da diese jedoch bei den Fachklassen zum Erstellen von Menüs und Navigationslisten auftreten, behandeln wir diese, wenn wir die Änderungen an den Navigationselementen im nächsten Lernprogramm der Serie behandeln.
Tabellen werden immer noch wie in BS2 durch Erstellen eines Standards gestaltet Dieses Markup sollte Ihnen folgendes geben: Wie bei BS2 fügen die Klassen die optionalen Stile zu einer Tabelle hinzu- Dieser Code gibt Ihnen beispielsweise eine Tabelle mit einem äußeren Rand und abwechselnden Farben in jeder Tabellenzeile. Eine Sache zu beachten ist jedoch, dass das Table-Striping jetzt das Die restlichen Tabellenklassen zum Einfärben Ihrer Tabellenzeilen haben sich geringfügig geändert. Erstens gibt es eine neue Klasse Die übrigen kontextabhängigen Klassen sind wie bei BS2 so gestaltet, dass sie die Tabellenzeilen hervorheben, um unterschiedliche Bedingungen anzuzeigen, und sind bis auf eine kleine Änderung gleich. Der Klassenname, der eine gefährliche oder negative Aktion darstellt, wurde in umbenannt Wenn es gerendert wird, sollte es ungefähr so aussehen: Es gibt zwei neue Ergänzungen zu den Klassen, die zur Unterstützung von Tabellen verwendet werden. Erstens gibt es eine neue responsive Klasse, die die Größe Ihres Rastersystems berücksichtigt und entweder vertikale Bildlaufleisten oder eine neu ausgerichtete Tabelle für die Anzeige unterschiedlicher Größen bietet. Zweitens gibt es die Möglichkeit, die oben genannten farbigen Zeilenklassen für einzelne Zellen zu verwenden, und nicht nur für ganze Zeilen, wie dies in BS2 der Fall war. Um die Farbklassen auf Zellebene zu verwenden, müssen Sie die Klassen nur einzelnen hinzufügen Dieser Code sollte folgendes ergeben: Der letzte tabellenbezogene Zusatz ist eine Klasse Wenn diese neue Klasse auf einer Anzeige mit mehr als 768 Pixeln verwendet wird (d. H. Jede Anzeige, die eine andere Größenklasse verwendet als Wie bei BS2 verfügen alle normalen Formularelemente standardmäßig über ein Mindestmaß an Markup, das ihnen einen Basisstil gibt. Das bedeutet, dass Sie einfach ein normales Form-Tag und die zugehörigen Steuerelemente markieren, um Ihrem Formular das standardmäßige Erscheinungsbild von Bootstrap zu verleihen. Nehmen Sie das folgende Beispiel: Wenn wir dieses Beispiel in einem Browser rendern, werden wir sehen, dass wir eine ziemlich gute Ausgabe erhalten, ohne zusätzliche Klassen hinzuzufügen, wie Sie im folgenden Bild sehen können: Hinweis: Seit dem vorherigen Beispiel wurde der BS3-Code geringfügig aktualisiert. Wenn Sie das Beispiel so versuchen, wie es hier geschrieben ist, wird die Ausgabe wahrscheinlich nicht wie erwartet aussehen. Die Änderung, die in BS3 vorgenommen wurde, scheint nun zu bedeuten, dass das Markieren eines Formulars ohne BS3-Klassen nicht dazu führt, dass das Formular ein einheitliches Erscheinungsbild erhält. Ich habe das Beispiel hier belassen, da es mit den Informationen übereinstimmt, die noch auf der Dokumentationsseite vorhanden sind, und als solche immer noch der offizielle Rat der Rahmenautoren zu sein scheint. Wie ich bereits im Abschnitt zur Migration erwähnt habe, waren Klassen und Komponenten in HTML-Formularen einige der größten Verluste, wenn es um Änderungen der Klassennamen geht. Dies hat jedoch einen guten Grund. Vor BS3 waren viele der für Formulare verwendeten Klassen im Umfang sehr eng - es gab einzelne Klassen für viele individuelle Zwecke und keine einzelne Klasse, die viele Grundlagen abdeckte. Beispielsweise gab es separate Klassen, um die Ausrichtung von Kontrollkästchen und Optionsfeldern zu behandeln, und es gab separate Klassen, um Eingabefelder und Textbereiche in Bezug auf ihre Zeilenausrichtung zu behandeln. In BS3 wurden viele dieser Klassen gelöscht und werden nun alle unter einer kleineren Anzahl von Klassen und Elementen zusammengefasst. Wenn Sie unser voriges Beispiel verwenden und die empfohlene Markierung hinzufügen, wie in der BS3-Dokumentation gezeigt, erhalten Sie Folgendes: Wenn Sie diesen Code rendern, sehen Sie keinen Unterschied zu der für Beispiel 18 generierten Ausgabe. Intern kann Bootstrap jedoch jetzt einzelne Elemente viel einfacher als zuvor finden und damit arbeiten. In BS2 war es nicht erforderlich, Steuerelemente zu gruppieren, wenn Sie nicht mit den automatischen Validierungsklassen arbeiten wollten. Es gibt immer noch keine absolute Notwendigkeit, sie zu verwenden, aber damit kann BS die Größe der Objekte richtig ändern und neu positionieren, wenn sie das Raster (unter vielen anderen Dingen) verwendet. Sie werden auch feststellen, dass jedes Steuerelement jetzt nur ein einziges hat Beachten Sie auch, dass das Formular-Tag selbst jetzt ein Zuletzt, wenn Sie sich das ansehen Leider gibt es noch einen Bereich in der Unterstützung für Formulare, der fehlt - das Steuerelement zum Hochladen von Dateien. Wie bei BS2 ist dies auf die Tatsache zurückzuführen, dass die Sicherheit in allen aktuellen Browsern die Möglichkeit einschränkt, Dateieingabesteuerelemente an die übrigen verfügbaren Eingabesteuerelemente anzupassen. Wie ich bereits im vorigen Buch erwähnt habe, gibt es jedoch noch Erweiterungen von Drittanbietern, die diesen Bereich abdecken. Da Sie nun Ihr eigenes Upload-System mithilfe der HTML5-Klassen erstellen können, benötigen Sie strikt gesagt keinen Datei-Upload Kontrolle-Sie können Ihre eigenen herstellen. In BS2 gab es eine Reihe spezifischer Formulartypen wie z Das In dem Beispiel aus dem vorherigen Codebeispiel hinzufügen Das Hinweis: In der heutigen schönen neuen Welt von HTML 5 ist es wichtiger denn je, Eingabeelemente mit einem zugehörigen Label richtig zu kennzeichnen. Da benachteiligte Benutzer möglicherweise Hilfsmittel verwenden, um sie zu unterstützen, wird es nicht mehr als schlecht angesehen, wenn nicht die erforderlichen Teile zur Verfügung gestellt werden, damit diese Hilfsmittel korrekt arbeiten. Machen Sie sich keine Sorgen - BS3 hat Sie abgedeckt. Wenn Sie beschließen, dass Sie keine Etiketten in Ihren Formularen möchten, können Sie sie mit einer optionalen Klasse markieren, Wenn Sie den Code aus diesem Beispiel in Ihrem Browser rendern, sollte er wie folgt aussehen: Wie Sie dem Code in Beispiel 20 entnehmen können, ist das zusätzliche Markup nicht wirklich so viel mehr, und das meiste davon existiert nur, um die Spalten richtig anzuordnen, so dass alles schön sitzt. Die wichtigsten Punkte, die in Probe 20 zu beachten sind, sind: Für die restlichen Klassen und zugehörigen Teile im Formularabschnitt von BS3 hat sich nichts anderes als die bisher genannten Klassen geändert. Aus heutiger Sicht wird die Eingabe jedoch jetzt gesteuert Muss haben einen korrekten Typ, um sie zu gestalten. Dies bedeutet, dass Sie mindestens haben müssen Es wird jedoch dringend empfohlen, die richtigen Typen zu verwenden. Wie Sie bald sehen werden, wenn wir zu den Validierungsgruppen gelangen, können Sie mit dem korrekten Typ die meisten Validierungsaufgaben tatsächlich richtig ausführen, ohne Änderungen an Ihrer Markierung vorzunehmen. Kontrollkästchen und Optionsfelder sind wie in BS2 standardmäßig gestapelt. Wenn Sie möchten, dass sie vertikal über den Bildschirm gerendert werden, müssen Sie das verwenden Das Rendering-Beispiel 21 in Ihrem Browser sollte in etwa wie folgt aussehen: Auswahl- und Mehrfachauswahlfelder werden mit Standardstilen markiert, indem die Elemente so verwendet werden, wie sie stehen. Dies ist keine Änderung von BS2, wo Markup und Stil dieser Elemente identisch sind. Ein neuer Stil, der in BS3 eingeführt wurde, ist der statische Steuerungsstil. In BS2 mussten Sie häufig ein deaktiviertes Formularsteuerelement verwenden, um statische Formulardaten darzustellen, die nicht geändert werden konnten. BS3 ändert dies durch Angabe von a Bei der Wiedergabe im Browser wird ein reguläres Formularlayout erstellt, wobei das statische Steuerelement eindeutig als nicht bearbeitbar gekennzeichnet ist oder als Eingabesteuerelement wirkt, wie das folgende Bild zeigt: Der deaktivierte Stil von Formularsteuerelementen wird immer noch wie in BS2 markiert und verwendet, indem Sie einfach das Attribut „disabled“ zum Eingabeelement hinzufügen, wie in der folgenden Abbildung gezeigt: Dies erzeugt den klassischen deaktivierten und schattierten Kontroll-Look, etwa wie folgt: Wenn Sie das hinzufügen Das letzte, was ich beim Thema Formulare erwähnen möchte, sind die Validierungs- und Fokusklassen. Wie bereits erwähnt, hilft das Hinzufügen der richtigen Eingabetypen in HTML5-Elementen wirklich bei der Verwendung der Validierungsklassen. Warum das? Die Validierungsklassen enthalten nicht nur dedizierte Klassennamen und -stile, sondern auch die neuen HTML5-Pseudoelemente wie Dies bedeutet, wenn Sie ein Textfeld als markieren Wenn dies nicht der Fall ist oder Sie eine andere Möglichkeit zur Validierung haben, können Sie einfach die Wenn Sie diesen Code in Ihrem Browser rendern, sollte Folgendes angezeigt werden: Zu beachten ist, dass ich die Klassen zu den Formulargruppen hinzugefügt habe, um eine statische Anzeige zu erzeugen. Sie sollten jedoch auch versuchen, das Formular mit den richtigen Eingabetypen zu markieren. Ich habe festgestellt, dass die Browserunterstützung für die Pseudoklassen immer noch ein wenig fleckig ist, obwohl dies in den BS3-Dokumenten nicht erwähnt wird. Daher empfehle ich Ihnen, bei der Bearbeitung Ihrer Elemente mit JavaScript auch die Klassennamen zu verwenden. Beachten Sie auch, dass der Hilfetext auf Beschriftungs- und Blockebene auch die richtige Farbe der Gruppe annimmt, so dass Sie der Formularsteuerungsgruppe keine separaten Farben oder Stile hinzufügen müssen. Denken Sie daran, dass die Das letzte, was bei Validierungsgruppen erwähnt werden muss, ist, dass Sie optionale Feedbacksymbole direkt in den Formularsteuerelementen angeben können, um den Status zu verbessern. Sie tun dies, indem Sie ein span-Element angeben sofort nach dem Eingabeelement, mit dem es verwendet werden soll. Auf dieses span-Element werden die üblichen Symbolklassen angewendet (die wir im nächsten Lernprogramm sehen werden) sowie eine Klasse von Wenn wir das vorherige Codebeispiel erweitern, um dies zu berücksichtigen und Rückmeldungssymbole hinzuzufügen, sollte es so aussehen: Wenn wir diese Änderungen erneut rendern, sollten Sie Folgendes sehen: Dieses Tutorial enthält ein Kapitel von Bootstrap 3 Succinctly, ein kostenloses eBook des Teams von Syncfusion.Anordnung, dann fügen Sie ein
TabelleKlasse zum Markup. Wie in BS2 sollten Tabellen immer mit dem gesamten Bereich von erstellt werden ,
, und HTML-Elemente wie das folgende Beispiel zeigt:
Cola Col B Col C. Val A Val B Val C Val A Val B Val C 
Tisch gestreift, Tischrand, Tisch-Schweben, und Tisch-kondensiert-arbeiten genau wie in BS2; Diese zusätzlichen Klassen werden der sekundären Hauptklasse des Tabellenelements selbst als sekundäre Klassen hinzugefügt. : n-te Kind Pseudo-Selector, was bedeutet, dass es in IE8 oder früher ohne Poly-Fill oder andere Korrekturen nicht mehr funktioniert. aktiv. Vor BS3 ist der aktivDie Klasse war nicht für alle Elemente verfügbar, sondern hauptsächlich für die Navigation und Schaltflächenelemente. Ab BS3 kann es nun auf a angewendet werden Element, um diese Zeile als hervorgehobene Zeile anzuzeigen, die standardmäßig hellgrau ist. Achtung. In BS2 wurde die rote Klasse benannt Error. Abgesehen davon werden die Klassen auf dieselbe Weise angewendet Element wie der folgende Code zeigt:
Klasse Col B Col C. Aktiv Val B Val C Erfolg Val B Val C Info Val B Val C Warnung Val B Val C Achtung Val B Val C 
oder Elemente wie folgt:
Klasse Col B Col C. Val A Val B Val C 
tabellenspezifisch, die Sie verwenden können, indem Sie es auf a anwenden wie folgt:
Cola Col B Col C. Val A Val B Val C * -xs- *), dann verhält sich die Tabellendarstellung wie eine normale Bootstrap-responsive Tabelle. Wenn jedoch die Tabelle auf einem Gerät angezeigt wird, das ein Ziel hat * -xs- *Wenn diese Klasse weniger als 768 Pixel beträgt, wird der Container so geändert, dass ein vertikaler Bildlauf möglich ist, sodass die gesamte Tabelle nach links und rechts verschoben werden kann, ohne den Rest der Seite zu beeinträchtigen. 
Ausgabe vom Codebeispiel auf einem Gerät mit einer Breite von mehr als 768 Pixel
Ausgabe vom Codebeispiel auf einem Gerät mit einer Breite von weniger als 768 PixelFormularänderungen
FormularsteuerungKlasse zugeordnet, anstatt viele verschiedene auf unterschiedliche Aspekte. Rolleihm zugewiesen. Abgesehen davon, dass es sich um gute Praktiken handelt, wird dies nun von BS3 erzwungen, um Arienrollen und Standards zu unterstützen, die die Verwendung von Web-Apps durch Menschen mit Behinderungen bestimmen. tag mit einem Hilfe-Block, Sie werden feststellen, dass dies jetzt in allen Fällen auch für Inline-Formulartext verwendet wird, wohingegen wir in BS2 eine Reihe verschiedener Klassen hatten, z Formular-Info. Suchformular; Unter BS3 wurden alle diese drei Haupttypen zusammengefasst. Zunächst haben Sie das Standardformular. Wie wir gesehen haben, ist dies eine normale Form ohne zusätzliche Klassen, die dem form-Tag hinzugefügt werden. Die zwei anderen Formulartypen sind Inline-Formularund Form horizontal. Inline-FormularDie Klasse ist für Formulare an kleinen Orten mit begrenzter Höhe wie Menü- und Navigationsleisten konzipiert. Eine Warnung: Alle Eingabeelemente dieser Klasse und der anderen Formulartypen haben standardmäßig eine Größe von 100 Prozent. Wenn Sie also das Formular benötigen, benötigen Sie nur wenig Platz (insbesondere in der Navigationsleiste)Formulare) müssen Sie manuelle Größen für die einzelnen Steuerelemente festlegen. Inline-Formularoder Form horizontalDas grundlegende Formularlayout sollte wiederum wie folgt aussehen: 
Formular, das mit einem vorherigen Codebeispiel erstellt wurde, wobei die Form-Inline-Klasse dem Form-Tag hinzugefügt wurde.Form horizontal class wird verwendet, um reguläre Top-Down-Formulare mit Eingabesteuerelementen zu erstellen, deren Beschriftungen links von ihnen und nicht wie bei den Standardformularen über ihnen angezeigt werden. Beachten Sie jedoch, dass das Formular horizontal ordnungsgemäß funktioniert, wenn Sie dem Formular im Allgemeinen ein wenig zusätzliche Markierung hinzufügen, wie im folgenden Codebeispiel gezeigt. Nur Herr. Durch das Hinzufügen dieser Klasse wird das Etikett oder der zugehörige Hilfetext zwar visuell in Ihrem Dokument angezeigt, es wird jedoch sichergestellt, dass es so gekennzeichnet ist, dass es für Bildschirmleseprogramme und andere ähnliche Geräte oder Software sichtbar ist.
Die Ausgabe des vorherigen Codebeispiels zeigt, dass unser Formular als horizontal markiert ist.
Kontrolletiketthinzugefügt. Dies ist für die anderen Formulartypen nicht erforderlich und wird von BS2 einfach ignoriert. Form horizontalwird auf das äußerste Form-Tag angewendet. type = "text"für BS3, um seine Magie zu tun. Checkbox-Inlineund Radio-InlineKlassen wie folgt: 
Form-Control-StaticKlasse, die anstelle der regulären auf einzelne Steuerelemente angewendet werden kann Formularsteuerung, wie der folgende Code zeigt: 
deaktiviertWenn Sie ein Feld eines Felds umgeben, das ein Formular umgibt, werden alle Steuerelemente in dieser Gruppe gleichzeitig deaktiviert, wobei derselbe Stil verwendet wird. Dies ist etwas, was in BS2 nicht passiert ist - Sie mussten stattdessen jedes einzelne Steuerelement markieren. Fokus:, Error:, und andere. type = "email", Wenn Sie dann keine E-Mail-Adresse angeben, sollte der Browser das Feld automatisch für Sie rot markieren. Erfolg hat, hat-Warnung, und has-errorKlassen in Ihren Formulargruppen, wie der folgende Code zeigt: 
Gruppe formenDie Abschnitte können auch alles andere verwenden, was wir bisher erwähnt haben, um Formularelemente nach Bedarf zu deaktivieren, zu schattieren und in der Größe zu ändern. Feedback zur Formularsteuerung. Diese Muss Nach dem Eingabesteuerelement und vor jedem anderen Markup in der Eingabegruppe platziert werden, weil das Steuerelement so positioniert wird, dass es im Steuerelement angezeigt wird. Nachdem Sie den Bereich hinzugefügt haben, müssen Sie auch eine Klasse von hinzufügen hat-feedbackin der Formularklassenliste neben der anderen hat-xxxxxKlassen, die den Validierungsstatus anzeigen. 
Accentsconagua