1
00:00:00,270 --> 00:00:08,110
Bienvenue dans cette unité, je vais présenter un nouvel outil appelé Bootstrap et je suis sur la page d'accueil bootstrap get bootstrap dotcom.

2
00:00:08,330 --> 00:00:13,180
Et je veux juste prendre quelques minutes dans cette vidéo d'introduction pour expliquer ce que bootstrap est et pourquoi nous l'utilisons.

3
00:00:13,230 --> 00:00:17,100
Et puis aussi pour vous montrer quelques exemples de sites qui utilisent bootstrap.

4
00:00:17,100 --> 00:00:20,350
Commençons donc juste par la lecture du texte officiel bootstrap.

5
00:00:20,610 --> 00:00:28,310
Bootstrap est le SS de TMLC le plus populaire dans le cadre javascript pour développer des premiers projets mobiles réactifs sur le Web.

6
00:00:28,710 --> 00:00:30,460
Let's break que vers le bas un peu.

7
00:00:30,480 --> 00:00:32,540
Bootstrap est extrêmement populaire.

8
00:00:32,580 --> 00:00:47,550
En fait, c'est le référentiel le plus étoilé et bifurqué sur get hub ce qui signifie essentiellement qu'il a le plus de gens l'utilisant la plupart des gens préfèrent l'ajouter sur obtenir de l'aide et tout ce bootstrap est en fait un seul fichier de succès et un seul fichier de javascript .

9
00:00:47,550 --> 00:00:54,180
Maintenant, il ya beaucoup de C S S et beaucoup de javascript dans ces fichiers, mais ils ne sont que deux fichiers et nous pouvons les inclure dans notre propre application.

10
00:00:54,180 --> 00:01:05,950
Fondamentalement, nous prenons le code de quelqu'un d'autre et de Bootstrap nous avons ajouté dans notre propre application et il nous aide à faire de bons sites à la recherche qui sont réactifs et il nous aide à les rendre rapides sans avoir à écrire une tonne de notre propre code.

11
00:01:05,970 --> 00:01:08,760
Il y a deux raisons principales que je vous montre dans ce cours.

12
00:01:08,760 --> 00:01:10,890
Le premier est qu'il est très populaire.

13
00:01:10,890 --> 00:01:11,850
Beaucoup d'endroits l'utiliser.

14
00:01:11,850 --> 00:01:15,560
Beaucoup de sociétés beaucoup de développeurs l'utiliser et il est juste utile de savoir.

15
00:01:15,690 --> 00:01:20,640
Mais la seconde est que cela va nous aider à rendre les sites Web attrayants assez rapidement dans ce cours.

16
00:01:20,640 --> 00:01:40,020
Donc, quand nous apprenons de retour et de choses quand nous nous concentrons sur Node et exprimer et Mongo et la mangouste et le genou profond et tout ce complexe en arrière et la logique, nous pouvons toujours faire quelque chose qui semble bien sans avoir à consacrer une heure ou deux heures Vidéo pour styliser quelque chose que nous pouvons brancher bootstrap et nous pouvons faire les choses en 10 15 minutes et nous allons regarder assez bon.

17
00:01:40,020 --> 00:01:50,840
La prochaine chose que je vais faire est de vous donner une visite rapide des quais, mais bootstrap a célèbre beaucoup de bonne documentation de bons exemples et ils utilisent réellement bootstrap sur ce site qui fait sens.

18
00:01:51,060 --> 00:02:00,250
Alors commençons par cliquer sur C Ss et c'est ce que mentionné bootstrap est juste un seul fichier CSSA un fichier javascript unique à l'intérieur de ce fichier CSSA.

19
00:02:00,300 --> 00:02:02,560
Il y a un tas de trucs que nous obtenons gratuitement.

20
00:02:02,610 --> 00:02:05,420
Alors jetez un oeil à boutons.

21
00:02:05,460 --> 00:02:16,680
Donc, si nous voulons faire un bouton et nous avons bootstrapped inclus dans notre application, nous pouvons ajouter cette classe à la classe est en fait Beati et PTEN par défaut et nous obtenons ces boutons.

22
00:02:17,010 --> 00:02:18,840
Nous pouvons faire différentes couleurs.

23
00:02:19,470 --> 00:02:21,260
Jetons un coup d'oeil aux formulaires.

24
00:02:21,360 --> 00:02:22,870
Nous obtenons de bonnes contributions ici.

25
00:02:23,310 --> 00:02:31,890
Et il est également très important de noter que tout est réactive sur le site afin que vous puissiez voir que nous obtenons des choses qui répondent à la largeur de l'écran.

26
00:02:32,250 --> 00:02:34,060
Nous avons aussi différents types de formulaires.

27
00:02:34,080 --> 00:02:35,680
Vous pouvez combiner les différentes pièces.

28
00:02:35,700 --> 00:02:38,330
Donc, ici, ils utilisent un bouton avec un formulaire.

29
00:02:38,400 --> 00:02:46,660
Donc, c'est comme Lego pièces bootstrap et beaucoup de façons, il a juste été de pièces Lego que vous pouvez mettre en place et ajouter à votre site comme bon vous semble.

30
00:02:46,740 --> 00:02:48,690
Nous allons examiner la plupart de ces composantes.

31
00:02:48,720 --> 00:02:53,800
La plupart de ces gros morceaux une fois que nous commençons à travailler avec lui et à écrire le code bootstrap nous-mêmes.

32
00:02:54,270 --> 00:03:05,750
Donc, pour l'instant nous allons aller de l'avant et quand vous montrer l'onglet suivant qui est composants composants contiennent quelques-uns des plus gros morceaux de bootstrap que nous pouvons utiliser et qui comprend des choses comme nav bars.

33
00:03:05,940 --> 00:03:13,680
Et c'est probablement l'un des aspects les plus populaires de bootstrap que beaucoup et beaucoup de sites utilisent comme vous pouvez le voir avec un peu de code.

34
00:03:13,710 --> 00:03:19,680
Il ressemble beaucoup, mais je vous assure que c'est beaucoup moins que ce serait si nous écrivons une barre NAV à partir de zéro.

35
00:03:19,680 --> 00:03:30,660
Et cela vient avec la forme de drop downs et il ya plusieurs types de barres de différentes couleurs certains qui sont fixés au haut de la page certains qui défilent.

36
00:03:30,690 --> 00:03:38,390
Il ya d'autres composants comme le Jumbotron qui est un moyen de présenter un certain contenu sur votre site Web des barres de progression.

37
00:03:38,670 --> 00:03:40,330
Et ceux-ci viennent tous avec bootstrap.

38
00:03:40,680 --> 00:03:48,970
Donc, vous vous demandez peut-être maintenant si bootstrap vient à tous ces morceaux et ils sont déjà pré style ce que chaque site qui utilise bootstrap avait l'air le même.

39
00:03:49,320 --> 00:03:50,760
Et la réponse est oui et non.

40
00:03:50,760 --> 00:03:53,240
Cela dépend de la façon dont le site utilise bootstrap.

41
00:03:53,760 --> 00:04:04,490
Je dirais qu'une entreprise ou un projet qui utilise bootstrap bien, il est difficile de dire qu'ils utilisent réellement bootstrap parce qu'ils utilisent ces composants principaux et puis vous pouvez entrer et écrire vos propres styles sur le dessus.

42
00:04:04,500 --> 00:04:07,860
Changer les couleurs changer les polices de changer certains des effets de vol stationnaire.

43
00:04:07,920 --> 00:04:17,670
Vous n'avez pas à utiliser exactement les mêmes couleurs et tout ce qui vient avec bootstrap, mais cela ne signifie pas qu'il ya quelque chose d'intrinsèquement mauvais à l'aide de la construit dans les styles Bootstrap soit.

44
00:04:17,670 --> 00:04:19,080
Et nous allons certainement faire les deux.

45
00:04:19,200 --> 00:04:25,290
Donc, quand nous faisons un site et un focus n'est pas vraiment sur le front end, nous voulons juste faire quelque chose qui semble présentable rapidement.

46
00:04:25,290 --> 00:04:30,310
Fondamentalement prototype front end utilisera bootstrap et nous ne modifiera pas vraiment de nombreuses pièces.

47
00:04:30,780 --> 00:04:42,580
Mais alors, si nous travaillons sur quelque chose d'un peu plus grand quelque chose que nous ne voulons pas ressembler à nous utilisons bootstrap sans changer quoi que ce soit du tout alors nous allons entrer et ajouter quelques-uns de nos propres styles essentiellement ajouter une couche de peinture au pistolet Sur le dessus de bootstrap.

48
00:04:42,600 --> 00:04:50,740
La prochaine chose que je veux faire est de vous montrer quelques-uns des sites qui sont construits avec bootstrap et voyage Buddh a effectivement un site Web officiel où ils mettent en valeur certains de ces sites.

49
00:04:50,970 --> 00:04:54,330
Si vous cliquez sur Expo, je l'ai déjà ouvert.

50
00:04:54,330 --> 00:05:01,890
Vous pouvez voir qu'ils mettent en valeur belle et inspirante utilise un bootstrap afin que nous puissions ouvrir certains de ceux-ci pour les ouvrir et de nouveaux onglets.

51
00:05:02,270 --> 00:05:03,870
Et ce ne sont que les plus récents.

52
00:05:03,870 --> 00:05:05,390
Il y a des centaines sur ce site.

53
00:05:05,420 --> 00:05:14,660
Vous pouvez voir des tonnes et des tonnes d'entre eux et vous pouvez garder le défilement et le défilement et puis nous pouvons aller à quelques plus vieux et il ya tellement de différents sites qui l'utilisent.

54
00:05:15,000 --> 00:05:17,050
Et ils ne sont pas vraiment tous les mêmes.

55
00:05:17,610 --> 00:05:20,190
Oui, peut-être beaucoup d'entre eux ont une barre de navigation.

56
00:05:20,190 --> 00:05:28,450
Peut-être beaucoup d'entre eux ont cette disposition d'image en grand écran, mais c'est plus d'une tendance de conception que quelque chose qui bootstrapped lui purement responsable.

57
00:05:28,980 --> 00:05:30,890
Prenons donc un coup d'oeil à certains d'entre eux.

58
00:05:30,930 --> 00:05:36,400
Celui-ci est créatif Tim qui est une entreprise qui fait des modèles de site Web en fait.

59
00:05:36,630 --> 00:05:40,330
Et vous pouvez voir que nous avons cette belle grille d'images.

60
00:05:40,500 --> 00:05:41,600
Il est très réactif.

61
00:05:41,610 --> 00:05:46,710
Si je rétrécis ça, nous avons notre petit bar de navigation ici.

62
00:05:46,920 --> 00:05:52,660
Il s'agit donc d'un composant bootstrap de la façon dont tout est disposé dans cette grille.

63
00:05:52,890 --> 00:05:59,540
Bootstrap en est partiellement responsable, mais vous pouvez également voir qu'ils n'utilisent pas les boutons Bootstrap intégrés par défaut.

64
00:05:59,580 --> 00:06:00,710
Ils les ont changés.

65
00:06:00,780 --> 00:06:01,960
Les choses semblent différentes.

66
00:06:02,190 --> 00:06:06,130
Donc je pense que c'est une très bonne utilisation de bootstrap qui est un site vraiment agréable.

67
00:06:06,180 --> 00:06:12,170
Il fonctionne bien et il utilise bootstrap mais il ne s'appuie pas sur bootstrap 100 pour cent.

68
00:06:13,080 --> 00:06:15,120
Jetons un coup d'oeil à un ou deux plus.

69
00:06:15,480 --> 00:06:19,640
Donc, celui-ci est appelé Indicus ou des indices quelque chose comme ça.

70
00:06:19,710 --> 00:06:24,200
Apparemment, ils concevoir et construire des produits numériques que les gens aiment utiliser.

71
00:06:24,240 --> 00:06:25,520
Alors défilons ici.

72
00:06:25,680 --> 00:06:26,980
Jetez un oeil à ce que nous avons.

73
00:06:27,270 --> 00:06:37,500
Donc, il ya du contenu qui est probablement construit avec le système de grille d'amorçage qui aide à organiser et à poser les choses comme je l'ai mentionné avant est notoirement difficile dans Pearcey SS.

74
00:06:37,560 --> 00:06:42,910
Il est de mieux en mieux, mais bootstrap est vraiment très utile pour nous aider à mettre les choses sur notre application.

75
00:06:43,260 --> 00:07:05,930
Et nous avons une barre de bas de page il ya une barre de navigation ici, donc c'est vraiment amusant d'aller à l'Expo bootstrap prendre un certain temps pour explorer certains des projets qui ont utilisé pour bootstrap et voir comment ils l'utilisent et toutes les différentes façons que les entreprises modifient Il ajouter dans leurs propres polices leurs propres couleurs et vraiment comprendre quels sont les composants de base que beaucoup et beaucoup de sites utilisent et pourquoi décider d'utiliser bootstrap.

76
00:07:06,170 --> 00:07:14,970
Et à mon avis, il s'agit vraiment du système de grille que nous allons consacrer une vidéo dans cette unité à et les barres de nav et la réactivité de tout.

77
00:07:15,420 --> 00:07:15,710
D'ACCORD.

78
00:07:15,720 --> 00:07:20,230
Donc, pour terminer je vais vous montrer un site simple que nous allons faire.

79
00:07:20,280 --> 00:07:23,110
C'est notre startup appelée caresse lourde.

80
00:07:23,190 --> 00:07:28,200
Il vous aide à trouver votre âme sœur féline parfaite et il utilise bootstrap.

81
00:07:28,200 --> 00:07:33,610
Vous pouvez voir que nous avons une barre de navigation ici comme si nous avions signé des boutons Morgan.

82
00:07:33,630 --> 00:07:39,970
Nous obtenons ces petites icônes alors nous avons notre texte ici et la petite étiquette et puis notre bouton.

83
00:07:40,290 --> 00:07:47,060
Et puis, comme je redimensionner les choses tout est réceptif, vous pouvez voir les choses se déplacent autour de se déplacer.

84
00:07:47,190 --> 00:07:52,660
Et le plus important, nous obtenons ce petit hamburger et nous avons une barre de navigation conviviale mobile.