1 00:00:00,089 --> 00:00:04,955 [MUSIK] 2 00:00:04,955 --> 00:00:08,311 Vorbei sind die Zeiten, in denen Websites rein für die 3 00:00:08,311 --> 00:00:11,385 Bereitstellung von Informationen an die Benutzer verwendet wurden. 4 00:00:11,385 --> 00:00:16,380 Heutzutage können Benutzer auf den meisten Websites mit der Website interagieren, um 5 00:00:16,380 --> 00:00:21,360 Informationen zu liefern, zum Beispiel durch Klicken auf Schaltflächen oder durch Ausfüllen von Formularen 6 00:00:21,360 --> 00:00:26,240 und durch Eingabe von etwas in Suchfelder usw. 7 00:00:26,240 --> 00:00:29,940 Wie unterstützen wir diese Art von Interaktionen mit den Benutzern? 8 00:00:29,940 --> 00:00:35,900 Das ist also, was wir in diesem speziellen Vortrag und 9 00:00:35,900 --> 00:00:38,333 der folgenden Übung beschäftigen werden. 10 00:00:38,333 --> 00:00:43,880 Als Beispiel, wenn Sie die Coursera-Website besuchen, werden Sie sehen, dass Sie 11 00:00:43,880 --> 00:00:49,091 oben Schaltflächen haben, auf die Sie klicken können, um verschiedene Orte zu erreichen. 12 00:00:49,091 --> 00:00:54,954 Sie könnten ein Suchfeld haben, in das Sie Informationen eingeben können, 13 00:00:54,954 --> 00:01:01,880 zum Beispiel nach einer vollständigen Stack-Webentwicklung usw. suchen können. 14 00:01:01,880 --> 00:01:08,286 Was wir bemerken, ist, dass Benutzerinteraktion 15 00:01:08,286 --> 00:01:14,808 auf Websites mit vielen verschiedenen Ansätzen unterstützt werden muss, einschließlich Schaltflächen 16 00:01:14,808 --> 00:01:20,054 , Formulare, Textfelder, Kontrollkästchen und viele andere. 17 00:01:20,054 --> 00:01:25,710 Frühe Interaktionen mit Websites wurden hauptsächlich über Hyperlinks zur Verfügung gestellt. 18 00:01:25,710 --> 00:01:29,852 So könnten Sie auf einen Hyperlink klicken und gehen Sie zu anderen Orten und so weiter, aber 19 00:01:29,852 --> 00:01:31,046 das ist offensichtlich, 20 00:01:31,046 --> 00:01:35,559 Hyperlink ist nur eine der vielen Methoden der Interaktion mit Ihrer Website. 21 00:01:35,559 --> 00:01:40,335 Sie könnten Buttons auf der Website enthalten haben, die, wenn Sie darauf klicken, 22 00:01:40,335 --> 00:01:44,580 dazu führen, dass einige Aktionen auf der Website ausgeführt werden. 23 00:01:44,580 --> 00:01:49,900 Sie können Formulare haben, die Sie ausfüllen, um Informationen für die Website bereitzustellen. 24 00:01:49,900 --> 00:01:54,500 Wenn Sie sich also ansehen, wie Sie solche 25 00:01:54,500 --> 00:01:58,660 Benutzerinteraktionsfunktionen in Ihre Website aufnehmen würden, werden Sie sehen, dass Sie so etwas 26 00:01:58,660 --> 00:02:03,930 wie die a-Tags verwenden könnten, die für die Bereitstellung von Hyperlinks nützlich sind, 27 00:02:03,930 --> 00:02:10,100 dann haben Sie die Schaltflächen-Tags, mit denen Sie Schaltflächen in Ihrer Website einschließen können. 28 00:02:10,100 --> 00:02:15,060 Nun, was wir uns ansehen werden, ist, wie wir mit einem Tags auf 29 00:02:15,060 --> 00:02:19,850 den Button Tags mit Bootstrap-Klassen formatieren, so dass Sie sie stylen können, 30 00:02:20,910 --> 00:02:24,775 um das allgemeine Thema von Bootstrap fälschen. 31 00:02:25,785 --> 00:02:30,075 HTML enthält bereits die Formularelemente und die Eingabeelemente darin. 32 00:02:30,075 --> 00:02:34,640 Jetzt können wir uns ansehen, wie Bootstrap diese Elemente verbessert, indem wir 33 00:02:34,640 --> 00:02:40,310 Styling-Funktionen für Formulare und verschiedene Elemente bereitstellen, die in die Formulare gehen. 34 00:02:40,310 --> 00:02:45,950 Schaltflächen bieten offensichtlich eine einfache Möglichkeit, mit Ihrer Website zu interagieren. 35 00:02:45,950 --> 00:02:49,600 Wenn Sie also eine Schaltfläche auf Ihrer Website haben, können Sie mit dem Mauszeiger auf die Schaltfläche klicken, 36 00:02:49,600 --> 00:02:55,100 können Sie auf die Schaltfläche klicken und erwarten, dass etwas in dem Prozess passiert. 37 00:02:55,100 --> 00:02:59,830 Das Verhalten der Schaltfläche hängt davon ab, wo es in Bootstrap positioniert ist. 38 00:02:59,830 --> 00:03:03,060 Wenn sich die Schaltfläche beispielsweise in einem Formular befindet, führt 39 00:03:03,060 --> 00:03:08,280 das Klicken auf die Schaltfläche normalerweise dazu, dass das Formular an einen Server gesendet wird 40 00:03:08,280 --> 00:03:13,270 oder die Formularinformationen abgebrochen werden. 41 00:03:13,270 --> 00:03:19,200 Eine Schaltfläche außerhalb eines Formulars kann andere Möglichkeiten haben, Interaktionen bereitzustellen. 42 00:03:19,200 --> 00:03:24,589 Ebenso < a > 43 00:03:25,690 --> 00:03:31,550 könnte das Tag, das wir traditionell mit Hyperlinks in Verbindung gebracht haben, auch entführt werden, um gestylt und 44 00:03:31,550 --> 00:03:34,170 in Form eines Buttons präsentiert zu werden. 45 00:03:34,170 --> 00:03:39,356 Also hier werden wir sehen, wie Bootstrap Klassen bietet, die 46 00:03:39,356 --> 00:03:46,580 verwendet werden können, um das Tag in eine Schaltfläche zu formatieren, die auf Ihrer Website präsentiert werden. 47 00:03:46,580 --> 00:03:51,600 Wir werden auch verschiedene Formularelemente betrachten, wie die Eingabeelemente, 48 00:03:51,600 --> 00:03:56,390 Select, die Schaltfläche und auch die Text-AD-Elemente, und 49 00:03:56,390 --> 00:04:03,320 wie wir sie in unseren Formularen verwenden, um 50 00:04:03,320 --> 00:04:09,660 ein Formular zu entwerfen und zu konstruieren, das in unsere Website aufgenommen werden kann. 51 00:04:09,660 --> 00:04:13,640 Die Übung, die dieser speziellen Vorlesung folgt, wird Ihnen die 52 00:04:13,640 --> 00:04:17,440 Bootstrap-Unterstützung für Styling-Buttons vorstellen und 53 00:04:17,440 --> 00:04:22,670 sich auch ansehen, wie verschiedene Formularelemente mithilfe von 54 00:04:22,670 --> 00:04:27,730 Bootstrap-Klassen verbessert werden können, um klassische Bootstrap-Formulare zu präsentieren.