[MUSIC]
In dieser Übung werden wir uns die Unterstützung von Bootstrap für Schaltflächen und Formulare ansehen.
Also werden wir ein paar Schaltflächen und Schaltflächengruppe in unsere Webseite aufnehmen.
Und wir betrachten auch das Entwerfen von Formularen und das Styling der Formulare mit Bootstrap-Klassen.
Um Sie zu beginnen, gehen Sie auf die Anweisungsseite und
laden Sie die Datei contactus.html.zip herunter, die wir dort zur Verfügung gestellt haben.
Klicken Sie also mit der rechten Maustaste darauf und
speichern Sie diesen Link in Ihrem ConFusion-Ordner.
Als,
contactus.html.zip Datei.
Und dann, sobald die ZIP-Datei heruntergeladen wird, entpacken Sie die Datei, um die Seite contactus.html zu erhalten.
Dann können Sie die ZIP-Datei löschen.
Sobald Sie die Datei entpackt und contactus.html Seite erhalten haben,
würden Sie feststellen, dass, wenn Sie diese Seite in Ihrem
Browser mit localhost: 3000/ contactus.html laden,
dann würden Sie sehen, dass diese Seite bereits mit einigen Inhalten vorformatiert ist.
So können Sie feststellen, dass Sie bereits die Navigationsleiste dort haben.
Wir haben das Jumbotron bereits für uns formatiert.
Und Sie würden bemerken, dass ich die Paniermehl und
den Kontakt uns hier formatiert habe.
Dann sehen Sie einige zusätzliche Informationen, die Adresse hier.
Und Sie werden auch feststellen, dass die Fußzeile bereits formatiert ist.
Aber Sie werden hier zwei Dinge bemerken,
Sie werden feststellen, dass es hier eine Zeile gibt, die besagt, dass Schaltflächengruppen hier gehen und
dann eine weitere Zeile hier, die sagt, Formular geht hier.
Also werden wir diese beiden durch eine Schaltflächengruppe und ein Formular ersetzen.
Und auf dem Weg, lernen Bootstrap Unterstützung für Schaltflächen und Formulare.
Bevor wir fortfahren, jetzt, da wir drei Seiten auf unserer Website haben,
ist es eine gute Idee für uns, sie miteinander zu verknüpfen,
sowohl in der Navigationsleiste als auch in den Links in der Fußzeile.
Lassen Sie uns diese beiden ändern, so dass wir leicht zwischen diesen drei Seiten navigieren können. Wenn Sie
also auf die Seite contactus.html gehen, werden Sie feststellen, dass
ich in der Navigationsleiste bereits die Links zu index.html richtig eingerichtet habe.
Und Sie würden feststellen, dass
Sie unten hier den Kontaktlink haben.
Aber der Link, der dem Info entspricht, wurde nicht richtig konfiguriert.
Gehen Sie also zu diesem Link hier und aktualisieren Sie das dann auf
aboutus.html.
Der Kontakt-uns-Link kann als solcher allein gelassen werden.
Und dann speichern Sie die Änderungen.
Wechseln Sie nun in ähnlicher Weise zur Fußzeile dieser Seite.
Und Sie werden feststellen, dass wir in der Fußzeile diese drei Links hier haben.
Und das kann ein guter Punkt sein, um die Links
durch die Links zu den entsprechenden Seiten zu ersetzen.
Also werde ich sagen, index.html, aboutus.html,
und, contactus.html.
Und speichern Sie die Änderungen.
In ähnlicher Weise gehen Sie zu index.html, und dann
wurde in index.html auch der Kontakt-uns Link nicht eingerichtet.
Lassen Sie uns das auf contactus.html aktualisieren.
Und dann in ähnlicher Weise aktualisieren Sie die Links in der Fußzeile.
Gehen Sie auch zu aboutus.html und reparieren Sie dann die Links auch dort.
Also in der aboutus.html auch, in der Kopfzeile werde ich den Link reparieren.
Und auch in der Fußzeile von aboutus.html.
Wenn Sie nun auf Ihre Website gehen,
können Sie zurück zu Ihrer Startseite navigieren, zu Ihrer Info Seite.
Und von der Über Seite können Sie sogar zur Kontaktseite zurückkehren.
Also sollten alle Links zwischen den drei Seiten in den entsprechenden Kopfzeilen und
auch den Fußzeilen hier eingerichtet werden.
So dass, wenn Sie auf eine dieser klicken, werden Sie auf die entsprechende Seite.
Jetzt ist es an der Zeit, mit der Arbeit an den Schaltflächen zu beginnen, die wir
in unsere contactus.html Seite aufnehmen werden.
Was ich also tun werde, ist, dass ich diese Zeile durch den Code für
die Schaltfläche und die Schaltflächengruppe ersetzen
werde und danach werden wir zurückkommen, um zu erklären, wie diese ganze Sache funktioniert. Wenn wir
contactus.html in unserem Editor öffnen,
werden wir den Ort finden, wo diese Anweisung, Schaltfläche Gruppe geht hier, existiert.
Und dann werde ich das
zuerst durch den Code ersetzen, der dieser Schaltflächengruppe entspricht.
Und dann komme ich zurück, um zu erklären, wie dieser Code funktioniert.
Lassen Sie uns also die Änderungen speichern und dann einen Blick darauf werfen, wie
diese Schaltflächengruppe in unserem Browser aussieht. Wenn Sie
zu Ihrem Browser gehen, können Sie nun sehen, dass
auf unserer Webseite die Schaltflächengruppe erstellt wurde.
So können Sie sehen, dass es hier drei Schaltflächen gibt, Anruf-,
Skype- und E-Mail-Tasten.
Jetzt sind alle diese drei zu einer einzigen Leiste oder
Tastenleiste zusammengefügt oder was in Bootstrap Begriffen als Schaltflächengruppe bezeichnet wird.
Schauen wir uns an, wie wir so etwas in
Bootstrap-Code konstruieren.
Also hier habe ich sowohl das Browserfenster als auch meinen Code nebeneinander geöffnet.
Lassen Sie uns also einen Blick darauf werfen, wie wir diesen Schaltflächencode erstellen.
Wenn Sie sich den Code ansehen, bemerken Sie, dass
die Schaltflächen hier in einem div enthalten sind.
Auf das div wenden wir die Klasse, btn-group an.
Also, wenn Sie eine Gruppe von Schaltflächen haben, die Sie zusammenfügen und
als eine Gruppe von Schaltflächen, als eine Leiste von Schaltflächen präsentieren möchten,
dann würden Sie ein div mit der Schaltflächengruppenklasse und
die Rolle als Gruppe hier zu diesem div verwenden.
Jetzt werden Sie feststellen, dass ich das, a,
-Tag verwende, um die drei Schaltflächen zu definieren.
Also schauen wir uns an, wie wir die drei Schaltfläche definieren.
Schauen wir uns an, wie wir die Schaltfläche Anrufen definieren.
Diese bestimmte Zeile definiert also die Schaltfläche „Anrufen“.
Also sage ich, eine, Rolle ist gleich Taste.
Also dies, ein Tag hier,
ich benutze es als einen Knopf hier.
Deshalb gebe ich die Rolle als Schaltfläche an.
Das ist also wichtig.
Und dann schauen Sie sich die Klassen an, die ich dafür bewerbe.
Also der erste ist btn Klasse.
Die btn-Klasse ist die Bootstrap Button Klasse.
So wird es das als klassische Bootstrap-Button angezeigt.
Der zweite Teil sagt, ist btn-primär.
Also, das ist, was die Farbe der Schaltfläche hier definiert.
Also, in diesem Fall ist diese Tastenfarbe blau.
Und so ist dies die primäre Farbe in Bootstrap.
So bt-primär.
Und dann schauen Sie sich die Verwendung des href hier an.
Da dies ein A-Tag ist, kann ich ein href-Attribut in diesem A-Tag verwenden.
Das href Attribut verweist also auf die Telefonnummer.
Und dann folgendes bemerken Sie, dass ich hier ein Schriftartsymbol für das Telefon verwende.
Deshalb habe ich i Klasse fa fa-phone und dann nach dem Wort Anruf.
Dies ist also, was es ermöglicht, diesen
blauen Knopf zu konstruieren, der hier in dieser Tastenleiste enthalten ist.
In ähnlicher Weise bemerken Sie, dass dies auch Rollenschaltfläche sagt.
Und dann, wenn du durchgehst, siehst du diese BTN-Info.
BTN-Info gibt ihm eine Farbe von hellblau in der Farbe.
So bezieht sich btn-info standardmäßig auf eine hellblaue Schaltfläche hier.
Und dann können Sie sehen, dass ich das Skype hier definiert habe.
Und dann die dritte, die, ist ein grüner Knopf dort mit E-Mail.
Beachten Sie, dass ich Buchstaben a role = button class = btn btn-success.
Also, wenn du btn-success sagst, wird das hier ein grüner Knopf sein.
Sie haben also einige Farben, die bereits in Bootstrap definiert sind.
Primär bezieht sich auf blau in für die erste, hellblaue Erfolg bezieht sich auf
die grüne Farbe, dann haben Sie Warnung, die eine hellgelbe Farbe sein würde, und
dann Gefahr, die eine rote Farbe ist.
Dies sind also Standardfarben, die in Bootstrap eingerichtet wurden.
Und dann das href Setup, mit dem mailto hier, und
dann danach, haben Sie die.
Schriftart als Symbol hier und dann die E-Mail dort.
Also diese drei e-Tags, die derzeit als Schaltflächen fungieren,
sind in der Seite jener div eingeschlossen, die als btn-Gruppe fungiert.
So zeigen wir eine Gruppe von Schaltflächen in Bootstrap an.
Wenn Sie nur eine einzelne Schaltfläche möchten,
müssen Sie nur eine dieser Zeilen dort einschließen.
Sie könnten also auch das Tasten-Tag verwenden.
Wenn Sie das Button-Tag verwenden, müssen Sie die Rolle nicht angeben,
stattdessen sagen Sie einfach „type button“.
Weil eine Schaltfläche dort auch als Submit-Button fungieren könnte.
Also später, in Formularen werden wir uns die Verwendung des Schaltflächen-Tags ansehen,
um eine Schaltfläche zu erstellen, die in unserem Formular aufgenommen werden soll.
Weiter mit der Übung, unser nächster Schritt wäre, mit
der Entwicklung des Formulars zu beginnen, das wir in die Seite contactus.html aufnehmen werden.
Wir werden es Schritt für Schritt tun, damit wir in jedem Schritt ein wenig lernen,
wie Sie einige Elemente in ihre Form einbeziehen.
Also, als Anfang, wenn Sie auf die Seite contactus.html gehen,
genau dort, werden Sie diese Anweisung namens sehen, Formular geht hier.
Nun, was ich tun werde, ist, dies von col-sm
zu col-md zu ändern, so dass für
extra kleine bis kleine Bildschirmgrößen meine Form angelegt wird,
die die gesamte Breite des Bildschirms einnimmt, weil es col-xs-12 verwendet.
Aber von mittlerer Größe Bildschirm auf Stationen,
es wird nur 9 von den 12 Spalten besetzen.
Lassen Sie uns also anfangen, das Formular zu konstruieren.
Also, was ich tun werde, ist, dass ich das durch meinen ersten Teil Code ersetzen werde.
Wir werden zwei Felder in unser Formular aufnehmen, für
den Vor- und Nachnamen des Benutzers.
Lassen Sie mich den Code hinzufügen, dann schauen wir uns das Ergebnis an.
Und dann kommen wir zurück und untersuchen den Code.
Also, fügen Sie den Code an diesem Punkt,
wie immer diese Code-Snippets sind in den Anweisungen.
Also, lassen Sie mich die Änderungen speichern.
Und dann gehen wir zurück und schauen uns an, wie dieses Formular im Browser aussieht.
Wenn Sie sich das Formular ansehen, werden Sie sehen, dass sie jetzt zwei Themen im Formular hier haben.
Die erste, hat eine Beschriftung auf der linken Seite,
die Vorname sagt, und dann haben Sie das Eingabefeld hier.
Und dann der Nachname und dann ein Eingabefeld hier.
Jetzt bemerken Sie auch, dass dieses Formular so ausgelegt ist,
dass dieser Teil den Halbteil des Bildschirms einnimmt und
der verbleibende Teil vom verbleibenden Teil des Bildschirms besetzt ist.
Sie beginnen sich zu fragen, wie wir das machen?
Hilft Bootstrap Grid uns, sich für diese Größen zu entscheiden.
Das wäre eine sehr gute Frage für Sie, sich selbst zu stellen.
Lassen Sie uns den Code sehen und verstehen, wie er aussieht.
Bevor wir das tun, werfen wir einen Blick auf das gleiche Formularlayout,
in der extra kleinen Bildschirmgröße.
Also, auf die extra kleine Bildschirmgröße zu wechseln.
Also gehen wir zum Galaxy S5.
Sie bemerken, wie das Formular in der extra kleinen Bildschirmgröße ausgelegt ist.
Also, Sie werden sehen, dass die Beschriftung oben ist, und
dann das Feld selbst, Eingabefeld selbst ist die Unterseite, ähnlich für den Nachnamen.
Also, Sie bemerken, dass Bootstrap.
Übrigens stellt es diese Formularklassen zur Verfügung.
Automatisch, macht Ihr Formular reaktionsschnell, so dass, wenn es
auf verschiedenen Bildschirmgrößen ausgelegt ist, das Formular angemessen ausgelegt wird,
so dass es nicht alle auf kleinen Bildschirmgrößen zerquetscht wird.
Aber für größere Bildschirmgrößen, weil Sie größere Immobilien haben,
sind Sie in der Lage, die Form zu dehnen, um den zusätzlichen Platz zu nutzen, den Sie haben.
Werfen Sie einen Blick auf diesen Quellcode und das Formular nebeneinander, offensichtlich
das erste, was Sie bemerken, ist, dass Ihr Formular mit dem Formular-Tag hier beginnt.
Also, Formular und dann das abschließende Formular, Tag hier.
Also, im Inneren beschreiben Sie die verschiedenen Teile Ihres Formulars.
Lassen Sie uns also einen Blick darauf werfen, wie der Vorname konstruiert ist,
sollte der Nachname offensichtlich, wie er aussieht, einen ähnlichen Ansatz verwenden.
Also, in der Standardeinstellung, was Sie bemerken, ist, dass es hier ein div gibt.
Div-Element hier, mit dem schließenden div hier.
Dieses div-Element hat also eine Klasse namens form-group.
Und dann gefolgt von einer Zeilenklasse.
Also
sagt die Form-Gruppen-Klasse im Wesentlichen, was in diesem Div ist, wird als eine Gruppe von Elementen behandelt.
Und dann werden sie entsprechend angelegt.
Und der zweite Teil, sehen Sie die Verwendung von Zeile hier.
Sie würden also sehen, dass die Reihe der Bootstrap-Gruppe hier ins Spiel kommt.
Und so kann diese spezielle Formulargruppe
mit der Zeile und den Spaltenklassen, die Sie aus dem Bootstrap-Raster haben, angelegt werden.
Also, wenn Sie die Zeile auf dieses div anwenden,
was auch immer darin ist, können Sie die Spaltenklassen verwenden,
um genau zu entscheiden, wie viel Platz jeder von ihnen auf dem Bildschirm einnehmen wird.
Nun, das macht es klarer, so dass diese Form Gruppe umschließt.
Diese Einheit.
Wir werden diese Wiederholung immer und
immer wieder sehen, wenn wir die verschiedenen Elemente der Form entwerfen.
Dann, darunter, sehen Sie dieses Label-Tag hier.
Für das label-Tag gibt es bestimmte Attribute, die ihm zugewiesen wurden.
Sie sehen also, dass das Label-Tag einen für Vorname verwendet.
Dieses Label ist also für etwas mit der ID Vorname.
Also, was ist das Eingabefeld, das direkt darunter folgt.
Wir werden uns das in kurzer Zeit ansehen.
Und dann schauen Sie sich die Klassen an, die auf die Labelklasse col-md-2 angewendet werden.
Das bedeutet also, dass für mittlere bis extra große Bildschirme
dieses besondere Element 2 Spalten des Raumes einnehmen wird.
Und dann notiere den anderen.
Es steht, Col-Form-Label.
Das col-form-label gibt also im Wesentlichen an
, dass dieses Label positioniert werden sollte, um mit
dem anderen Element, das Teil dieser Formulargruppe ist, ausgerichtet zu werden.
Also, in diesem Fall, das Eingabefeld.
Und so bedeutet das auch, dass
das Etikett in der Mitte
horizontal mit dem Eingabefeld aufgereiht wird.
Das ist der Grund, warum wir die col-form-label-Klasse verwenden.
Wenn Sie dies nicht anwenden, wird Ihre Beschriftung am
oberen Rand Ihres Eingabefeldes ausgerichtet.
Welche Ihre Form wird nicht so gut aussehen auf mittleren bis extra großen Bildschirmgrößen.
Nun, auf der linken Seite, natürlich, weil dieses Browserfenster gequetscht ist,
so dass es hier die Ansicht in einer kleinen oder extra kleinen Bildschirmgröße zeigt.
Deshalb sehen Sie das Etikett, das sich hier oben im Eingabefeld stapelt.
Dies ist also das Etikett, das angibt.
Wenn Sie also ein Label haben, das Sie einem Element zuweisen möchten,
so werden Sie das Label zuweisen.
Unten hier unten sehen Sie eine div Klasse col-md-10.
Dies nimmt also die restlichen 10 der 12 Spalten ein.
Also zwei Spalten, die von der Beschriftung besetzt sind.
Und die restlichen zehn Spalten, die von diesem besetzt sind, sind aber innerhalb des div eingeschlossen.
Und in diesem div
sehen Sie, dass es dort ein Eingabe-Tag-Element mit dem Typtext gibt.
Das bedeutet also, dass dieses Eingabefeld Texteingaben akzeptiert.
Und die Klasse, sieh dir die Klasse hier an.
Es steht Form-Kontrolle.
Dies ist wichtig, um hier auf das Eingabefeld anzuwenden.
Also Form-Steuerung und ID Vorname.
Und der Name, der Vorname ist.
Dann Platzhalter Vorname.
Der Platzhalter ist also das, was innerhalb des Feldes als Platzhalter für
das Eingabefeld angezeigt wird.
Also sind alle diese Attribute zugewiesen.
Noch wichtiger ist,
beachten Sie die Verwendung der Form-Control-Klasse, die auf den Eingabetyp angewendet wird.
So strukturieren Sie diese beiden Elemente in Ihrem Formular.
Für kleine Bildschirmgrößen und darunter, stapelt es die beiden Dinge.
Aber für mittlere bis extra große,
haben Sie gesehen, dass es sie horizontal nebeneinander positioniert.
Dasselbe gilt auch für den Nachnamen-Code.
Es wird sehr ähnlich sein, wie der Vorname strukturiert ist.
Also möchte ich, dass Sie ein wenig Zeit damit verbringen, sich diesen Code auch anzuschauen.
So dass Sie sehen, basierend auf Ihrem Verständnis davon,
wie dies auch formatiert ist.
Die nächste Art von formalem Ereignis, das wir hinzufügen werden, ist ein Eingabegruppenelement.
Lassen Sie mich den Code hinzufügen.
Wir werden uns ansehen, wie sich das Formular herausstellt.
Und dann gehen wir zurück und untersuchen den Code.
Also genau hier, nach dem zweiten div, nach dem Nachname-Feld,
werde ich den Code für das nächste Element hier einfügen.
Und dann speichern wir die Änderungen.
Und dann, sofort,
würden Sie ein paar weitere Dinge in Ihr Formular aufgenommen sehen.
Hier wird ein Rufnummernfeld hinzugefügt.
Dies, aus dem Aussehen, sehen Sie, dass dies sehr ähnlich ist.
Also werde ich den Code dafür nicht erklären.
Das sollte sehr einfach für Sie sein zu verstehen.
Und dann sollte dieses E-Mail-Feld auch sehr einfach für
Sie sein zu verstehen.
Weil dies dem Nachnamen sehr ähnlich aussieht.
Abgesehen davon, dass für diese, das Eingabefeld, der Typ wird auf E-Mail gesetzt.
So dass die eingebauten Formularprüffunktionen
Ihres Browsers automatisch in Kraft treten.
Wenn Sie also etwas eingeben, das nicht wie eine E-Mail aussieht,
dann wird es sich angemessen beschweren.
Lassen Sie uns also diesen bestimmten Teil des Formulars hier untersuchen.
Beachten Sie, dass wir in diesem Fall in der linken Klammer und
der rechten Klammer zu diesem bestimmten Eingabefeld hinzufügen.
Wie fügst du solche Dinge in deine Box ein?
Wenn Sie sich den Code hier in Ihrem Editor ansehen,
sehen Sie, dass Sie immer noch die Formulargruppenzeile haben, die Sie bereits verstehen.
Und unten hier unten haben Sie Eingabetyp-Formularelement id telnum,
und so weiter, was Ihnen auch sehr klar sein sollte.
Also glaube ich nicht, dass ich dir diesen Teil erklären muss.
Beachten Sie, wie ich die Grid-Spaltenklassen des Bootstrap für jede dieser Klassen verwende.
So wird das Etikett col-md-2 gegeben.
Und dann wird die Telefonnummer eins
col-xs-7 col-sm-6 und col-md-7 hier gegeben.
So ist die Telefonnummer, dieses Element richtig positioniert.
Aber insbesondere lassen Sie uns auf diesen Teil achten.
Also dieser hier ist in diesem div.
Beachten Sie also in diesem div die Klasse, die ihm gegeben wurde.
Die Klasse sagt Input-Gruppe.
Im Wesentlichen bedeutet, dass was immer in diesem div ist,
hier als eine Gruppe von Elementen behandelt wird.
Deshalb ist die angegebene Klasse Input-group.
Nun, um so etwas hinzuzufügen, verwenden Sie
eine Klasse namens Input-group-Addon.
Und dann bemerken Sie, dass ich ein div verwende, um dieses Element zu halten.
Ich kann hier alles verwenden, aber ein div ist hier nützlich.
Also sage ich div Klasse Input-Group-Addon.
Und dann der schließende div-Typ innen, wo,
beachten Sie, dass ich die linke Klammer habe.
So können Sie
hier ein zusätzliches Anhängsel zu Ihrem Eingabefeld hinzufügen.
In ähnlicher Weise ist die hier unten auch ein Eingabe-Group-Addon rechte Klammer.
Das ist also, was die andere rechte Klammer hier hinzufügt.
Nun, zwischen diesen beiden, natürlich, haben Sie den Eingabetyp.
Die Eingabe mit dem Typ tel und Klasse Form-Steuerung, ID, Name,
Platzhalter, alles hier vorhanden.
Das ist also nichts anderes als der Vorwahlteil.
Also, wenn Sie diese Eingabegruppe zusammen mit Eingabe-Group-Addons
wie diese auf beiden Seiten verwenden.
Diese Dinge werden zu Ihrem Eingabeelement wie folgt hinzugefügt.
Das bietet Ihnen eine schöne Möglichkeit, Ihr Formular mit einigen hinzugefügt zu entwerfen.
Wenn Sie beispielsweise ein Feld haben, das
Geld als Eingabe akzeptiert, können Sie einfach ein Dollarzeichen auf der linken Seite hinzufügen, um
dem Benutzer anzuzeigen, dass es sich um ein Feld handelt, das momentan einen Währungswert annimmt.
Momentan nimmt dieses Feld in diesem Fall eine Vorwahl ein.
Und wenn Sie sehen, wie die Vorwahlnummern in den Vereinigten Staaten und
Kanada geschrieben sind, wissen Sie, dass sie in der linken und rechten Klammer eingeschlossen sind.
Also, das erlaubt mir, so etwas in meiner Form dort anzugeben.
Meine nächste Gruppe von Elementen, die ich meinem
Formular hinzufügen werde, sind ein Kontrollkästchen und eine Auswahl.
Also, wie fügen wir das hinzu?
Wenn Sie also mit HTML-Formularen vertraut sind, verstehen Sie, wie Select funktioniert, und
Sie verstehen, wie Kontrollkästchen in HTML-Formularen funktionieren.
Bootstrap bietet Ihnen nun einige zusätzliche
Klassen, mit denen Sie diese Elemente entsprechend formatieren können.
Also, lassen Sie mich das Zitat hinzufügen.
Speichern wir die Änderungen.
Werfen Sie einen Blick auf das Ergebnis im Formular hier.
Und dann werfen Sie einen Blick auf den Code.
Hier sehen Sie, dass ich ein Kontrollkästchen und eine Nachricht hier habe.
Und dann ist dies ein Selektor, mit dem ich hier eine Reihe von Optionen auswählen kann.
Jetzt ist das Formular, wie es hier existiert, was Sie in kleinen und
extra kleinen Bildschirmgrößen sehen werden.
Werfen wir einen Blick auf es auf einer größeren Bildschirmgröße.
Die gleiche Form, wenn sie auf mittleren bis extra großen
Bildschirmgrößen ausgelegt wird, sieht so aus.
So können Sie sehen, wie die Kontakttelefonnummer hier positioniert ist,
und E-Mail wird hier positioniert.
Beachten Sie also, dass diese Etiketten
bis zu einer Linie in der Mitte mit den Boxen hier gereiht sind.
Das ist es, was die Col-Form-Label-Klasse zuerst erreicht.
Konzentrieren wir uns auf das, was wir gerade hinzugefügt haben.
Hier sehen wir, dass wir ein Kontrollkästchen hinzugefügt haben.
Und dann ein Textfeld hier.
Dürfen wir Sie kontaktieren?
So würden Sie zum Beispiel erwarten, dass der Benutzer es entweder ein- und auscheckt.
Was ist der Grund für ein Kontrollkästchen?
In ähnlicher Weise könnten Sie Optionsfelder haben.
Bootstrap unterstützt Optionsfelder, die in HTML-Formularen verfügbar sind.
Und stellen Sie einige Klassen bereit, um sie richtig zu stylen.
Und dann ist dies natürlich der Selektor, mit dem Sie zwischen den Auswahlmöglichkeiten auswählen können.
Also gehen Sie zurück und schauen Sie sich den Code an.
Mal sehen, wie dies implementiert wird. Wenn Sie
zurückkommen, um einen Blick auf den Code zu werfen, sehen Sie, dass dieser hier wieder ein
Formulargruppenzeilendiv ist, das hier zwei Dinge umschließt.
Eins ist ein Form-Check
col-md-6 offset-md-2.
Das ist also, was ein Kontrollkästchen in diesem div-Element einschließt.
Und dann unten hier unten habe ich eine div-Klasse, Col-MD-3 offset-md-1.
Beachten Sie also, dass hier Form-Check col-md-6 offset-md-2 sagt.
Der Grund, warum ich ein Offset-md-2 mache, ist, dass ich kein Label habe.
Also benutzte ich normalerweise zwei Spalten für die Beschriftungen.
Also, da dieses Kontrollkästchen sollte sich auf der rechten Seite im Formular ausrichten.
Deshalb habe ich hier offset-md-2 verwendet.
Und dann drinnen heißt es label class = „form-check-label“.
Und dann bietet es Eingabe-Tag
hier mit Typ-Checkbox.
So erstellen Sie ein Kontrollkästchen.
Und dann ist die Klasse, die Bootstrap-Klasse, die Sie auf
Ihre Checkbox anwenden werden, Form-Check-Input.
Und dann ist der Name und der Anfangswert leer.
Und dann ist dies das eigentliche Label, das Sie sehen,
dass es auf dieses bestimmte Kontrollkästchen angewendet wird.
Beachten Sie also, wie diese beiden hier in einem Label-Tag eingeschlossen sind.
So erstellen Sie also ein Kontrollkästchen zusammen mit seiner Beschriftung und
positionieren dieses dann in Ihrem Formular hier.
Dies verwendet also hier Form-Check-Label.
Und dann müssen Sie hier ein Kontrollkästchen, Eingabetyp = „Checkbox“ haben und sich
dann selbst beschriften.
Also hier sehen Sie stark, können wir Sie kontaktieren?
Deshalb wird es in Fettschrift direkt neben dem Kontrollkästchen hier angezeigt.
Jetzt unten im Code haben Sie eine div-Klasse col-md-3 offset-md-1.
Dies nimmt also drei Spalten innerhalb eines Spaltenversatzes ein.
Also die Summe von vier Spalten hier.
Das ist also col-md-6 plus 2, also acht Spalten.
Also 8 plus 4, 12.
So kümmert sich das um Ihre 12 Spalten für Ihr Raster dort.
Jetzt in diesem, sehen Sie eine Auswahl hier angewendet.
Nun ist dies die Auswahloption, die HTML-Dateiformulare unterstützen.
Und schauen Sie sich die Klasse an, die darauf angewendet wurde.
Es sagt class = „form-control“ zur Auswahl.
Und dann geben Sie die Optionen in der Auswahl hier.
Also Tel., E-Mail und so weiter.
So geben Sie hier die Optionen für Ihr Auswahlfeld in Ihrem Formular an.
Dies ist also die Verwendung von Auswahl- und Checkboxen in Ihrem Formular.
In ähnlicher Weise sehen Sie, wenn Sie die Bootstrap-Dokumentation überprüfen, die Verwendung von
Optionsfeldern und anderen Formularelementen.
Wenn wir uns unsere Form ansehen,
sehen wir jetzt, dass wir viele Dinge haben, die wir brauchen, in unserer Form bereits.
Sie haben einen Vor- und Nachnamen.
Dieses Formular ist also etwas, das wir konstruieren, damit Benutzer
Feedback an das Restaurant senden können.
Also hier haben wir Vorname,
Nachname und Kontakttelefonnummer und dann eine E-Mail.
Und dann natürlich
eine Option, mit der der Benutzer sehen kann, ob er kontaktiert werden kann oder nicht.
Das wird hier mit einem Kontrollkästchen und einem Selektor implementiert.
Nun, das einzige, was übrig bleibt, ist ein Submit-Button für uns.
Also werden wir in einem Submit-Button zu diesem Formular hinzufügen und
dann einen letzten Blick auf das Formular werfen.
Bevor wir eine Schaltfläche zum Senden hinzufügen, möchten wir vielleicht ein Feld für
die Benutzer zur Eingabe ihres Feedbacks zur Verfügung stellen.
Also in diesem Fall werde ich einen Textbereich verwenden, um das bereitzustellen.
Also lassen Sie mich den Code einfügen.
Und dann überprüfen wir den Code hier.
Also dieser Code, wie Sie sehen, sagt
div class = „form-group row“, die Sie bereits wissen, was es bedeutet.
Und dann ist das Label, das Sie bereits wissen, wie es konstruiert ist.
Und darunter sehen Sie ein Textarea-Tag, das für das Formular verwendet wird.
So heißt es, textarea Klasse, mit class = „form-control“,
die Sie bereits zuvor gesehen haben.
Und dann id, name und dann die Anzahl der Zeilen für
den hier angegebenen Textbereich.
Also, lassen Sie uns die Änderungen speichern und werfen einen Blick auf das Formular. Wenn Sie
sich also das Formular ansehen, sehen Sie, dass Sie hier unten
ein großes Textfeld haben, in das Feedback-Kommentare vom Benutzer eingegeben werden können.
Ihr Formular hat also Vorname, Nachname, Telefonnummer
, E-Mail und eine Genehmigung für die Kontaktaufnahme mit dem Benutzer und dann eine Feedbackbox.
Das letzte, was wäre die Schaltfläche „Senden“.
Schließlich fügen wir eine Schaltfläche Absenden zum Formular hinzu.
Also nach einem div, im Textbereich,
werde ich den Code für die Schaltfläche Senden hier einfügen.
Wenn Sie also den Code für die Schaltfläche Senden erneut einfügen und den Code ansehen, sehen Sie,
dass dies eine div-Klasse ="form-group row"> ist, die Sie bereits vorher kennen.
Und dann sagt das, div class="offset-md-2 col-md-10">.
Sie verstehen, was das ist und
dann, in diesem div, sehen Sie eine Schaltfläche, die hier eingeschlossen wird.
Jetzt, da wir die Konstruktion einer Schaltfläche mit dem a -Tag gesehen haben,
lassen Sie uns darauf achten, wie Sie eine Schaltfläche mit dem Button HTML-Tag konstruieren.
Also, wenn Sie die Schaltfläche HTML-Tag verwenden, dann sagen Sie Schaltfläche und
dann wird der Typ gesendet.
Dies wird als Absenden-Schaltfläche für mein Formular fungieren,
deshalb habe ich gesagt, dass der Typ gesendet wird.
Sie setzen den Typ auf Schaltfläche, es wird hier als eine normale Schaltfläche fungieren.
Und dann sage ich, Klassen-Taste, Taste primär.
Dies ist also ein blauer Knopf und dann die Schaltfläche
enthält diesen Text innerhalb der Schaltfläche, um den Feedback-Text innerhalb der Schaltfläche zu senden.
Also lassen Sie uns die Änderungen speichern.
Das ist also die letzte Änderung meines Formulars hier.
Also lassen Sie uns die Änderungen speichern und dann gehen und werfen einen Blick auf die Schaltfläche. Wenn Sie
zum Browser zurückkehren, sehen Sie jetzt, dass
Sie in Ihrem Formular unten die Schaltfläche Feedback senden haben.
Wenn der Benutzer das Formular ausfüllt,
klickt er auf die Schaltfläche Feedback senden, um das Feedback an das Unternehmen zu senden.
Damit wird das Design eines Formulars vervollständigt.
Dies ist also eine solche Form, die Sie einschließen können.
Es gibt viele weitere Klassen, die in Bootstrap zur
Unterstützung von Formularen zur Verfügung stehen.
Ich möchte Sie dringend auffordern, die Formulardokumentation zu konsultieren, um
die anderen Arten von Klassen zu sehen, die für die Erstellung von Standard verfügbar sind.
Wenn Sie also konzeptionell eine Form im Kopf haben, die Sie erstellen möchten,
dann suchen Sie einfach alle möglichen Elemente nach, die Sie
in das Formular aufnehmen möchten, und entwerfen Sie dann das Formular entsprechend.
Wichtiger, was Sie beim Erstellen des Formulars mit Bootstrap bemerkt haben, sind
alle Bootstrap-Klassen, die verfügbar sind.
Das Formular-Steuerelement, die Formulargruppe, wie Sie die Zeilen- und Spaltenklassen verwenden.
Und all diese verschiedenen Klassen, die
in Bootstrap unterstützt werden, um Formulare zu entwerfen, der Bootstrap-Film.
Letzte Menge, machen Sie das Git-Commit, also werden wir die Git-Seite aufrufen.
Ich werde die Änderungen kommentieren, die ich getan habe, um die über
, Kontakt und Index.
Und dann sagen Sie Bootstrap-Schaltflächen
und -Formulare, und dann hätte das
zu meinem Git-Repository verpflichtet.
Damit schließen wir diese Übung ab.
Hier haben wir gelernt, wie wir Buttons und
Formelemente in unsere Bootstrap Design-Pitch einbinden.
( MUSIK)