1 00:00:00,089 --> 00:00:04,955 [MUSIC] 2 00:00:04,955 --> 00:00:08,311 Il est révolu l'époque où les sites Web étaient uniquement utilisés pour 3 00:00:08,311 --> 00:00:11,385 fournir des informations aux utilisateurs. 4 00:00:11,385 --> 00:00:16,380 De nos jours, sur la plupart des sites Web, les utilisateurs seront en mesure d'interagir avec le site Web 5 00:00:16,380 --> 00:00:21,360 pour fournir des informations, par exemple en cliquant sur des boutons ou en remplissant des formulaires 6 00:00:21,360 --> 00:00:26,240 et en tapant quelque chose dans des zones de recherche, etc. 7 00:00:26,240 --> 00:00:29,940 Alors, comment pouvons-nous prendre en charge ces types d'interactions avec les utilisateurs ? 8 00:00:29,940 --> 00:00:35,900 C' est donc ce que nous allons aborder dans cette conférence et dans 9 00:00:35,900 --> 00:00:38,333 l'exercice qui suit. 10 00:00:38,333 --> 00:00:43,880 Par exemple, si vous visitez le site Web de Coursera, vous verrez que vous avez des 11 00:00:43,880 --> 00:00:49,091 boutons en haut ici sur lesquels vous pouvez cliquer pour atteindre différents endroits. 12 00:00:49,091 --> 00:00:54,954 Vous pourriez avoir une zone de recherche, dans laquelle vous pouvez taper des informations, 13 00:00:54,954 --> 00:01:01,880 pour rechercher, disons par exemple, le développement web de pile complète et, ainsi de suite. 14 00:01:01,880 --> 00:01:08,286 Donc, ce que nous remarquons est que l'interaction utilisateur doit être prise en charge 15 00:01:08,286 --> 00:01:14,808 sur les sites Web en utilisant de nombreuses approches différentes, y compris des boutons, des 16 00:01:14,808 --> 00:01:20,054 formulaires, des zones de texte, des cases à cocher, et bien d'autres. 17 00:01:20,054 --> 00:01:25,710 Les premières interactions avec les sites Web ont été fournies principalement par le biais de liens hypertexte. 18 00:01:25,710 --> 00:01:29,852 Donc, vous pouvez cliquer sur un lien hypertexte et aller à d'autres endroits et ainsi de suite, mais 19 00:01:29,852 --> 00:01:31,046 c'est évidemment, le 20 00:01:31,046 --> 00:01:35,559 lien hypertexte est juste l'une des nombreuses méthodes d'interaction avec votre site Web. 21 00:01:35,559 --> 00:01:40,335 Vous pouvez avoir des boutons inclus sur le site Web qui, lorsqu'il est cliqué, 22 00:01:40,335 --> 00:01:44,580 entraînera une action sur le site Web. 23 00:01:44,580 --> 00:01:49,900 Vous pourriez avoir des formulaires que vous remplissez pour fournir des renseignements sur le site Web. 24 00:01:49,900 --> 00:01:54,500 Donc, lorsque vous regardez comment vous souhaitez inclure de telles 25 00:01:54,500 --> 00:01:58,660 fonctionnalités d'interaction utilisateur dans votre site Web, vous verrez que vous pouvez utiliser quelque chose 26 00:01:58,660 --> 00:02:03,930 comme les balises a qui sont utiles pour fournir des liens hypertexte, 27 00:02:03,930 --> 00:02:10,100 puis vous avez les balises de bouton qui vous permettent d'inclure des boutons dans votre site Web. 28 00:02:10,100 --> 00:02:15,060 Maintenant, ce que nous allons examiner est comment formater avec des balises sur 29 00:02:15,060 --> 00:02:19,850 les balises de bouton en utilisant des classes bootstrap afin que vous puissiez les 30 00:02:20,910 --> 00:02:24,775 styliser pour simuler le thème général de bootstrap. 31 00:02:25,785 --> 00:02:30,075 HTML inclut déjà les éléments de formulaire et les éléments d'entrée. 32 00:02:30,075 --> 00:02:34,640 Maintenant, nous pouvons regarder comment bootstrap améliore ces éléments en fournissant des 33 00:02:34,640 --> 00:02:40,310 fonctionnalités de style pour les formes, et divers éléments qui entrent dans les formes. 34 00:02:40,310 --> 00:02:45,950 Les boutons fournissent évidemment un moyen simple d'interagir avec votre site Web. 35 00:02:45,950 --> 00:02:49,600 Donc, lorsque vous avez un bouton sur votre site Web, vous pouvez passer le curseur sur le bouton, 36 00:02:49,600 --> 00:02:55,100 vous pouvez cliquer sur le bouton et vous attendre à ce que quelque chose se produise dans le processus. 37 00:02:55,100 --> 00:02:59,830 Le comportement du bouton dépend de l'endroit où il est positionné dans bootstrap. 38 00:02:59,830 --> 00:03:03,060 Si le bouton se trouve à l'intérieur d'un formulaire, par exemple, 39 00:03:03,060 --> 00:03:08,280 le clic sur le bouton entraîne généralement l'envoi du formulaire à un serveur 40 00:03:08,280 --> 00:03:13,270 ou l'annulation des informations du formulaire. 41 00:03:13,270 --> 00:03:19,200 Un bouton situé à l'extérieur d'un formulaire pourrait avoir d'autres moyens d'interagir. 42 00:03:19,200 --> 00:03:24,589 De même, la < a > balise que nous avons traditionnellement associée à 43 00:03:25,690 --> 00:03:31,550 des hyperliens pourrait également être détournée pour être stylée et 44 00:03:31,550 --> 00:03:34,170 présentée sous la forme d'un bouton. 45 00:03:34,170 --> 00:03:39,356 Donc, ici, nous allons voir comment bootstrap fournit des classes qui peuvent être 46 00:03:39,356 --> 00:03:46,580 utilisées pour formater la balise en un bouton à présenter sur votre site Web. 47 00:03:46,580 --> 00:03:51,600 Nous examinerons également divers éléments de formulaire, tels que les éléments d'entrée 48 00:03:51,600 --> 00:03:56,390 , la sélection, le bouton et aussi les éléments 49 00:03:56,390 --> 00:04:03,320 de texte AD, et comment nous les utilisons dans nos formulaires pour concevoir et 50 00:04:03,320 --> 00:04:09,660 construire un formulaire qui peut être inclus dans notre site Web. 51 00:04:09,660 --> 00:04:13,640 Donc, l'exercice qui suit cette conférence particulière vous présentera le 52 00:04:13,640 --> 00:04:17,440 support bootstrap pour les boutons de style, et 53 00:04:17,440 --> 00:04:22,670 aussi regarder comment divers éléments de forme peuvent être améliorés en utilisant des 54 00:04:22,670 --> 00:04:27,730 classes bootstrap pour présenter des formes Bootstrap classiques.