1
00:00:03,460 --> 00:00:06,755
Dans le module précédent,

2
00:00:06,755 --> 00:00:12,335
nous avons examiné le nombre de composants Bootstrap qui sont purement basés sur CSS.

3
00:00:12,335 --> 00:00:15,945
Ainsi, en appliquant les classes CSS pour ces composants,

4
00:00:15,945 --> 00:00:19,490
nous avons pu les créer sur notre page Web.

5
00:00:19,490 --> 00:00:26,500
Dans ce module, nous allons examiner plus de composants basés sur Javascript de Bootstrap.

6
00:00:26,500 --> 00:00:30,580
Donc, en résumé, comme nous l'avons vu dans le module précédent,

7
00:00:30,580 --> 00:00:34,755
Bootstrap prend en charge un certain nombre de classes CSS qui peuvent être appliquées à

8
00:00:34,755 --> 00:00:43,260
votre balisage HTML dans vos pages Web pour activer et utiliser ces classes CSS.

9
00:00:43,260 --> 00:00:49,610
Ainsi, vous pouvez voir comment les classes CSS ont modifié les balises HTML génériques et

10
00:00:49,610 --> 00:00:56,365
fourni la propre façon de Bootstrap de présenter les mêmes informations.

11
00:00:56,365 --> 00:01:02,180
Ainsi, les composants qui sont purement basés sur CSS peuvent facilement être activés en

12
00:01:02,180 --> 00:01:04,260
appliquant les classes CSS bootstrap

13
00:01:04,260 --> 00:01:09,270
aux différentes balises HTML qui sont là dans vos pages Web.

14
00:01:09,270 --> 00:01:14,525
Bootstrap peut être utilisé uniquement pour ses classes CSS.

15
00:01:14,525 --> 00:01:19,500
Un autre aspect des classes CSS Bootstraps que nous avons vu était

16
00:01:19,500 --> 00:01:24,630
que la plupart de ces composants ont commencé avec une classe de base que vous avez appliquée.

17
00:01:24,630 --> 00:01:27,660
Comme par exemple, lorsque vous regardez le bouton,

18
00:01:27,660 --> 00:01:31,575
vous avez vu que la classe de base était la classe BTN.

19
00:01:31,575 --> 00:01:33,160
Ensuite, vous appliqueriez quelque chose comme

20
00:01:33,160 --> 00:01:38,160
un primaire BTN qui ajouterait leurs couleurs au BTN,

21
00:01:38,160 --> 00:01:43,175
alors vous pourriez définir la taille du bouton en disant BTN SM.

22
00:01:43,175 --> 00:01:49,905
Ensuite, vous pouvez également définir le bouton comme un bloc entier en utilisant la classe de bloc BTN.

23
00:01:49,905 --> 00:01:56,260
Donc, toutes ces classes et modificateurs suivants à la classe BTN de base.

24
00:01:56,260 --> 00:01:59,430
Donc, cette approche, vous le verrez

25
00:01:59,430 --> 00:02:03,330
encore et encore dans de nombreux composants Bootstraps.

26
00:02:03,330 --> 00:02:07,925
Ainsi, vous aurez une classe de base puis un ensemble de classes de modificateurs qui peuvent être

27
00:02:07,925 --> 00:02:14,164
appliquées pour modifier le comportement du composant de base.

28
00:02:14,164 --> 00:02:20,210
Cela facilite la conception de votre page Web.

29
00:02:20,210 --> 00:02:24,260
Prenant un autre exemple, nous pouvons regarder la classe Nav.

30
00:02:24,260 --> 00:02:28,020
Nous utilisons la classe Nav dans la barre NAV-que

31
00:02:28,020 --> 00:02:33,635
nous avons incluse dans notre page Web dans le module précédent.

32
00:02:33,635 --> 00:02:40,130
La classe Nav, nous modifions cela en lui appliquant la classe Nav bar Nav.

33
00:02:40,130 --> 00:02:45,660
Cela nous a donc fourni une certaine façon de présenter les informations de navigation.

34
00:02:45,660 --> 00:02:51,310
Dans ce module, nous examinerons les NAV-tabs et les

35
00:02:51,310 --> 00:02:58,295
NAV-pilules qui sont encore une autre façon de présenter les informations de navigation pour la page Web.

36
00:02:58,295 --> 00:03:04,180
Les onglets et les pilules que nous présentons à nouveau la navigation,

37
00:03:04,180 --> 00:03:10,265
pris en charge par un plugin JavaScript,

38
00:03:10,265 --> 00:03:15,195
fournit un moyen amélioré de fournir la navigation dans votre contenu.

39
00:03:15,195 --> 00:03:18,835
Donc, nous allons examiner cela dans ce module particulier.

40
00:03:18,835 --> 00:03:23,620
J' utilise ceci comme un exemple pour vous illustrer comment a commencé à partir d'une classe de base,

41
00:03:23,620 --> 00:03:28,075
vous pouvez modifier en appliquant les classes de conditions commerciales à la classe de base.

42
00:03:28,075 --> 00:03:30,640
Bien sûr, si vous voulez mettre en

43
00:03:30,640 --> 00:03:35,285
action la partie JavaScript de vos composants Bootstrap,

44
00:03:35,285 --> 00:03:38,670
alors vous devriez commencer à appliquer les classes JavaScript.

45
00:03:38,670 --> 00:03:41,725
Donc, Bootstrap prend en charge un certain nombre de composants qui

46
00:03:41,725 --> 00:03:44,970
sont pris en charge par les plugins JavaScript.

47
00:03:44,970 --> 00:03:47,880
Maintenant, lorsque vous utilisez ces plugins dans votre page Web,

48
00:03:47,880 --> 00:03:52,890
vous pouvez inclure des plugins individuels que vous allez réellement utiliser dans votre site Web,

49
00:03:52,890 --> 00:03:55,815
ou l'ensemble des plugins.

50
00:03:55,815 --> 00:03:59,500
Maintenant, ce que nous allons faire dans les exercices, c'est d'

51
00:03:59,500 --> 00:04:03,495
inclure l'ensemble des plugins parce que nous voulons juste les explorer tous.

52
00:04:03,495 --> 00:04:05,870
Mais si vous concevez un site Web,

53
00:04:05,870 --> 00:04:09,000
vous pouvez inclure seulement un sous-ensemble de ces plugins

54
00:04:09,000 --> 00:04:12,300
que vous utilisez réellement dans votre site Web,

55
00:04:12,300 --> 00:04:15,630
réduisant ainsi la quantité de code JavaScript qui doit

56
00:04:15,630 --> 00:04:21,470
être envoyé à un utilisateur qui consulte votre page Web.

57
00:04:21,470 --> 00:04:27,590
C' est la façon dont je regarde l'approche Bootstraps pour utiliser JavaScript dans

58
00:04:27,590 --> 00:04:33,905
son propre support pour les composants Bootstrap qui sont activés avec JavaScript.

59
00:04:33,905 --> 00:04:36,785
Si vous regardez JavaScript seul,

60
00:04:36,785 --> 00:04:44,845
il offre beaucoup de flexibilité et vous permet de faire beaucoup de choses intéressantes.

61
00:04:44,845 --> 00:04:46,695
Mais cela implique également d'

62
00:04:46,695 --> 00:04:52,200
écrire du code JavaScript à utiliser lors de la conception de votre site Web.

63
00:04:52,200 --> 00:04:58,730
Maintenant, je regarde JavaScript comme un grand lutteur de sumo avec beaucoup de capacités,

64
00:04:58,730 --> 00:05:02,670
beaucoup de puissance, mais sauvage.

65
00:05:02,670 --> 00:05:09,875
Maintenant, jQuery en tant que bibliothèque qui est construite sur JavaScript,

66
00:05:09,875 --> 00:05:14,815
prend essentiellement le lutteur de sumo, puis l'emballe d'une meilleure manière pour rendre

67
00:05:14,815 --> 00:05:20,435
ce gorille de cent livres dans une taille plus gérable,

68
00:05:20,435 --> 00:05:23,790
plus facile à aborder et plus facile à

69
00:05:23,790 --> 00:05:28,235
inclure et à utiliser dans votre site Web conception.

70
00:05:28,235 --> 00:05:31,855
Donc, si vous utilisez la bibliothèque jQuery directement,

71
00:05:31,855 --> 00:05:34,510
vous pouvez certainement tirer parti

72
00:05:34,510 --> 00:05:40,175
de nombreux composants jQuery et en faire usage dans votre page Web.

73
00:05:40,175 --> 00:05:44,480
Maintenant, c'est une approche que vous pouvez toujours adopter car jQuery

74
00:05:44,480 --> 00:05:48,170
va déjà être inclus dans votre page Web Bootstrap,

75
00:05:48,170 --> 00:05:52,910
si vous allez tirer parti des composants basés sur JavaScript.

76
00:05:52,910 --> 00:05:56,545
Bootstrap va plus loin,

77
00:05:56,545 --> 00:05:59,145
puis regarder l'image de

78
00:05:59,145 --> 00:06:04,395
Bootstrap est de prendre le lutteur sumo puis de le mettre dans une boîte.

79
00:06:04,395 --> 00:06:09,730
Essentiellement debout pour empaqueter

80
00:06:09,730 --> 00:06:18,935
vos plugins JavaScript dans un composant que vous pouvez utiliser plus facilement dans vos pages Web.

81
00:06:18,935 --> 00:06:24,775
Ainsi, les composants basés sur Java Bootstrap prennent essentiellement le support basé sur JQuery,

82
00:06:24,775 --> 00:06:28,760
mais les empaqueter d'une manière que vous pouvez les utiliser dans

83
00:06:28,760 --> 00:06:34,390
votre page Web même sans écrire une seule ligne de code JavaScript.

84
00:06:34,390 --> 00:06:38,955
C' est là que le composant JavaScript Bootstrap

85
00:06:38,955 --> 00:06:43,030
peut être utilisé sans écrire une seule ligne de code.

86
00:06:43,030 --> 00:06:46,620
La façon dont il est pris en charge dans Bootstrap est que,

87
00:06:46,620 --> 00:06:51,400
les composants JavaScript prennent en charge un certain nombre d'

88
00:06:51,400 --> 00:06:56,940
attributs d'étoile de trait de données que vous pouvez appliquer à vos balises HTML.

89
00:06:56,940 --> 00:07:00,120
Donc, vous me verrez utiliser des choses comme le bascule de données, l'

90
00:07:00,120 --> 00:07:04,370
espion de données, la cible de données, et ainsi de suite.

91
00:07:04,370 --> 00:07:07,795
Si vous vous souvenez, lorsque nous avons conçu la barre NAV-bar,

92
00:07:07,795 --> 00:07:11,120
vous aviez en fait vu quelques attributs.

93
00:07:11,120 --> 00:07:15,660
Là, nous avons conçu le bouton pour les très petits écrans.

94
00:07:15,660 --> 00:07:21,550
Maintenant, il est temps pour nous de [inaudible] pourquoi nous l'avons fait dans le module précédent.

95
00:07:21,550 --> 00:07:26,935
Donc, nous allons explorer cette approche en détail dans ce module, en

96
00:07:26,935 --> 00:07:33,000
regardant plusieurs composants Bootstrap qui tirent parti de la prise en charge de JavaScript.

97
00:07:33,000 --> 00:07:35,015
Bien sûr, vous pouvez tirer parti

98
00:07:35,015 --> 00:07:38,650
de l'API JavaScript complète qui est

99
00:07:38,650 --> 00:07:42,945
disponible pour tous ces composants en écrivant du code JavaScript.

100
00:07:42,945 --> 00:07:46,130
Nous allons reporter cela au module suivant,

101
00:07:46,130 --> 00:07:51,370
où nous allons examiner comment vous pouvez écrire du code JavaScript simple basé sur

102
00:07:51,370 --> 00:07:54,580
la syntaxe jQuery pour ajouter

103
00:07:54,580 --> 00:08:00,070
plus de fonctionnalités à vos composants Bootstrap basés sur Javascript.