1
00:00:00,180 --> 00:00:04,680
Bienvenue dans cette leçon, je vais vous montrer comment installer bootstrap dans vos propres applications.

2
00:00:04,740 --> 00:00:08,370
Et puis une fois que vous avez fait que je vais vous montrer quelques-unes des bases importantes de l'utilisation de la hauteur.

3
00:00:08,850 --> 00:00:14,180
Donc, je suis sur get bootstrap dot com juste sur la page d'accueil et il ya un lien ici télécharger bootstrap.

4
00:00:14,850 --> 00:00:20,100
Et ce n'est pas un lien de téléchargement direct car nous avons deux choix principaux pour l'utilisation de bootstrap.

5
00:00:20,430 --> 00:00:24,340
Nous pouvons soit télécharger les fichiers et je vais le faire pour commencer.

6
00:00:24,530 --> 00:00:29,360
Ensuite, nous pouvons prendre ces fichiers et les ajouter dans notre application avant d'aller plus loin.

7
00:00:29,430 --> 00:00:35,230
J'ai une équipe de recherche simple Je vais déposer que je suis appeler les choses de base h DML m l.

8
00:00:35,790 --> 00:00:40,770
Et je vais juste ajouter un titre et nous allons simplement ajouter dans quelques éléments différents de bootstrap.

9
00:00:40,800 --> 00:00:47,960
Une fois que nous l'avons installé de sorte que nous ne ferons rien de complet, nous allons simplement l'utiliser comme aire de jeux pour certains des composants bootstrap de base.

10
00:00:48,510 --> 00:00:58,460
OK, nous allons commencer par ajouter un simple bootstrap H-1 et économiser.

11
00:00:58,700 --> 00:01:01,790
Et puis ouvrons ceci dans le navigateur.

12
00:01:03,240 --> 00:01:05,280
Gardez ça là pour le moment.

13
00:01:05,280 --> 00:01:06,690
Maintenant, pour installer bootstrap.

14
00:01:06,780 --> 00:01:08,190
Je l'ai téléchargé.

15
00:01:08,250 --> 00:01:13,720
Donc, si j'ouvre ce fichier, vous pouvez voir à l'intérieur d'ici il ya quelques composants différents.

16
00:01:13,830 --> 00:01:23,890
Il ya un répertoire C S S et à l'intérieur du répertoire CCS il ya quelques fichiers, mais il ya vraiment seulement un fichier important qui est bootstrapped CSSA.

17
00:01:24,630 --> 00:01:27,710
Et c'est en fait le même fichier ici bootstrapped minutes.

18
00:01:27,740 --> 00:01:32,290
SS, sauf qu'il a été combat minute a été réduit à prendre moins de place.

19
00:01:32,460 --> 00:01:36,280
Donc, ces deux sont les fichiers importants pour utiliser réellement bootstrap.

20
00:01:36,600 --> 00:01:43,370
Et c'est un thème bootstrap tous les trois de ces sont utilisés pour aider à ajouter un thème personnalisé à bootstrap de sorte que n'a pas d'importance autant.

21
00:01:43,380 --> 00:01:45,680
Tout ce dont nous avons besoin est bootstrap Dotsie évaluer.

22
00:01:45,780 --> 00:01:49,430
Et nous commençons par l'ouvrir simplement afin que vous puissiez voir avec quoi nous travaillons.

23
00:01:49,470 --> 00:01:52,200
Il s'agit du fichier principal réévalué bootstraps.

24
00:01:52,770 --> 00:01:54,280
C'est juste un tas de cours.

25
00:01:54,300 --> 00:02:00,510
Si vous regardez chaque ligne de CSSA est presque un point de déclaration de classe simplement.

26
00:02:00,690 --> 00:02:05,340
Et puis ce que nous pouvons faire est d'utiliser ces classes au lieu de nos applications.

27
00:02:05,340 --> 00:02:12,720
Donc, si nous voulons avoir un bouton avec du texte blanc et un fond rouge, nous allons appliquer le bouton de point de danger.

28
00:02:12,900 --> 00:02:14,510
Et c'est ce que cela fait ici.

29
00:02:14,730 --> 00:02:19,590
Mais le danger a le texte blanc un fond rouge et une bordure rougeâtre.

30
00:02:19,650 --> 00:02:24,410
Alors allons de l'avant et inclure cela dans notre application tout comme n'importe quel autre fichier CSSA.

31
00:02:24,750 --> 00:02:37,020
Donc, ce que je vais faire est de le faire glisser ici dans le même répertoire où j'ai mon équipe d'étude de base et je pourrais aussi faire bootstrapped up minutes réévaluer à la place de celui-ci.

32
00:02:37,020 --> 00:02:38,520
Ça n'a pas d'importance.

33
00:02:38,550 --> 00:02:47,570
Techniquement, celui-ci charge un peu plus vite parce que si je l'ouvre, vous pouvez voir que c'est comme une ligne géante tous les espaces a été supprimé.

34
00:02:47,850 --> 00:02:55,450
Il est donc plus facile de charger, mais je vais utiliser cette version plus longue juste pour que vous puissiez voir exactement avec quoi nous travaillons.

35
00:02:55,470 --> 00:03:03,120
Maintenant, nous allons aller dans notre fichier réel ici, je fermer ce bas et nous allons inclure bootstrap CSX.

36
00:03:03,220 --> 00:03:16,310
Donc, tout comme n'importe quelle autre feuille de style, nous avons besoin d'une balise liée et le Tref est bootstrap point C Ss et si nous économisons et nous sommes frais notre page ici, vous remarquerez une légère différence.

37
00:03:16,320 --> 00:03:18,140
Regardez la police sur ce H-1.

38
00:03:18,420 --> 00:03:19,590
Ça change.

39
00:03:19,620 --> 00:03:25,500
Nous avons maintenant bootstrap installé ou au moins le C Ss qui va de pair avec bootstrap et c'est tout ce dont nous avons besoin pour l'instant.

40
00:03:25,650 --> 00:03:35,310
Nous ne travaillerons pas avec le javascript pour le moment, mais il n'y a pas une autre option pour l'installation de bootstrap qu'ils vous donnent réellement sur le site Get bootstrap ici.

41
00:03:35,400 --> 00:03:40,750
Bootstrap CDN nous pouvons prendre ce lien ici et ajouter cela à notre code.

42
00:03:41,010 --> 00:03:44,870
Et c'est un lien vers une version hébergée de ces mêmes fichiers.

43
00:03:45,120 --> 00:03:56,900
Donc, si nous ouvrons dans le navigateur et collez que vous pouvez voir, il a le contenu du fichier minimisé et il est hébergé à ce u r l donc nous pouvons juste avoir un lien vers que vous r l afin que je puisse remplacer cela.

44
00:03:56,970 --> 00:03:57,540
Un autre lien.

45
00:03:57,540 --> 00:04:01,530
Tag et collez que vous êtes Ellen et je vais commenter celui-ci.

46
00:04:01,530 --> 00:04:04,230
Pour l'instant et revenir en arrière et rafraîchir.

47
00:04:04,380 --> 00:04:06,020
Et rien ne change.

48
00:04:06,030 --> 00:04:16,650
La seule différence est que dans le premier cas, nous avons eu le fichier téléchargé sur notre ordinateur qui ont été lié à et dans le deuxième cas, nous sommes le lien vers un fichier externe qui est hébergé en ligne.

49
00:04:16,650 --> 00:04:20,750
Maintenant, allons à la documentation bootstrap et commencer à jouer autour ou certains de ces composants.

50
00:04:21,240 --> 00:04:29,150
Alors revenez en arrière pour obtenir bootstrap et cliquez sur C Ss et je vais juste souligner certaines des pièces les plus importantes que nous allons utiliser.

51
00:04:29,400 --> 00:04:31,940
Commençons donc simplement par des boutons.

52
00:04:32,460 --> 00:04:49,220
Si nous voulons utiliser un bouton tout ce que nous avons à faire est d'utiliser une classe battu suivie par un type de bouton qui est entre le défaut qui nous donnera un bouton blanc, mais c'est aussi VTAM primaire BATNA info d'accès.

53
00:04:49,260 --> 00:04:54,080
Attention danger et le lien et ils sont tous un style légèrement différent.

54
00:04:54,240 --> 00:05:02,500
Et bien sûr, nous pouvons changer ces couleurs sur notre propre, mais nous allons simplement utiliser le construit une fois pour commencer et s il peut également voir ici.

55
00:05:02,700 --> 00:05:08,600
Nous ne devons pas seulement utiliser un élément bouton, nous pouvons utiliser une balise d'ancrage d'un bouton ou d'une entrée.

56
00:05:08,820 --> 00:05:10,720
Alors essayons ça.

57
00:05:11,730 --> 00:05:13,030
Bonjour ce H-1.

58
00:05:13,230 --> 00:05:25,860
Ajoutons simplement dans une étiquette de bouton et les étiquettes de bouton juste disent me cliquent et juste rafraîchissent la page en ce moment et jettent un coup d'oeil à cela.

59
00:05:25,950 --> 00:05:27,310
C'est un bouton assez laid.

60
00:05:27,690 --> 00:05:39,200
Mais si nous allons ajouter cette classe PTEN et puis entre nous allons faire le succès et sauver nous obtenons maintenant ce bouton vert génial.

61
00:05:39,330 --> 00:05:41,870
Donc assez facile d'obtenir certains styles de base aller.

62
00:05:42,190 --> 00:05:50,110
Et revenons en arrière et je vais vous montrer quelques autres choses sur les boutons qui sont de différentes tailles que nous pouvons utiliser aussi bien et c'est vraiment facile.

63
00:05:50,130 --> 00:06:00,500
Nous avons juste besoin d'ajouter en bouton grand et petit ou bouton supplémentaire petit donc il est essayé après succès de bouton et il n'a pas à aller après.

64
00:06:00,510 --> 00:06:09,740
Peu importe l'ordre des classes, mais je vais le faire après ici DTN et faisons extra petit et rafraîchir votre page.

65
00:06:09,750 --> 00:06:11,170
Voilà.

66
00:06:11,170 --> 00:06:30,480
Je vais passer à présent plus et nous allons ajouter dans quelques boutons plus, mais celui-ci sera une balise d'ancrage et ce sera dans une balise ou nous avons HF égale à la barre oblique slash double qui lisent tous les jours get bootstrap dot com et ensuite Le texte va juste dire bootstrap docs.

67
00:06:30,550 --> 00:06:47,330
Donc, rendez-le un peu plus grand et puis ajouter en classe en classe a besoin d'égaler PTEN et nous allons faire entre Desch info et le rendra grand tiret PTEN Elgie et rafraîchir.

68
00:06:47,340 --> 00:06:48,690
Nous avons maintenant deux boutons.

69
00:06:48,750 --> 00:06:50,620
L'un est un élément de bouton réel.

70
00:06:50,620 --> 00:06:55,210
Un autre a une balise d'ancrage et si je clique dessus, vous pouvez le voir comme une balise d'ancrage.

71
00:06:56,340 --> 00:07:01,200
Donc, dès la première minute d'utilisation de bootstrap, nous avons pu obtenir des boutons décents.

72
00:07:01,370 --> 00:07:05,330
Il aurait fallu 10 à 15 lignes de CSSA sur notre propre à reproduire.

73
00:07:05,760 --> 00:07:06,960
Revenons maintenant.

74
00:07:06,990 --> 00:07:10,980
Rendre ce plein écran à nouveau et je vais vous montrer quelques autres choses sur les boutons.

75
00:07:11,220 --> 00:07:12,720
Nous avons donc des tailles.

76
00:07:12,750 --> 00:07:21,080
Nous avons également des états différents où nous pouvons faire apparaître un bouton comme si il est actif et pour faire que nous ajoutons juste la classe active.

77
00:07:21,390 --> 00:07:43,590
Donc, si nous essayons maintenant, ajoutons un bouton, je vais donc dupliquer notre petite miniature Cliquez trois fois sur le bouton et sur le dernier du milieu de la classe active et rafraîchir et vous pouvez le voir avec optimisme qui s'affiche Assez bien sur l'écran cast que celui-ci apparaît actif.

78
00:07:43,620 --> 00:07:49,290
Revenons en arrière et nous pouvons également désactiver un bouton en ajoutant cet attribut.

79
00:07:49,290 --> 00:07:51,850
Désactivé égal à désactivé.

80
00:07:52,440 --> 00:07:57,950
Revenons en arrière et désactivons le dernier rafraîchissement.

81
00:07:58,180 --> 00:08:00,020
Et maintenant ce bouton est désactivé.

82
00:08:00,120 --> 00:08:01,940
Nous obtenons cette belle petite icône.

83
00:08:02,070 --> 00:08:05,110
Il n'a pas d'effet hover où il change de couleur plus.

84
00:08:05,220 --> 00:08:07,460
C'est clairement un bouton désactivé.

85
00:08:07,560 --> 00:08:18,630
La dernière grande chose que je vais vous montrer afin que nous puissions changer les couleurs à nouveau afin que la nuit de danger bouton nous donne que l'orange rougeâtre et vous pouvez voir toutes les couleurs ici.

86
00:08:18,870 --> 00:08:25,850
Et bien sûr, vous pouvez changer ceux en écrasant les styles afin que vous puissiez faire quelque chose comme ça plutôt que de faire une autre feuille de style.

87
00:08:25,860 --> 00:08:27,270
Je vais le faire ici pour le moment.

88
00:08:27,330 --> 00:08:32,330
Donc, nous allons faire une ligne et aussi comme la beauté et le danger.

89
00:08:32,460 --> 00:08:51,550
Nous pouvons changer la couleur pour être orange et maintenant pourrait être mettre en danger l'orange du Texas et si je voulais réellement changer l'arrière-plan que je pourrais faire l'arrière-plan est orange et c'est comment vous pouvez aller et passer outre les styles de sorte que vous n'avez pas à Utilisez ce que bootstrap vous donne hors de la boîte.

90
00:08:52,200 --> 00:08:53,580
Et la plupart des endroits ne le font pas.

91
00:08:54,030 --> 00:08:56,940
OK, ce sont les boutons et c'est tout ce que je vais faire dans cette vidéo.

92
00:08:56,940 --> 00:09:00,300
Je voulais juste vous donner un goût vraiment rapide de la façon dont fonctionne bootstrap.

93
00:09:00,300 --> 00:09:13,540
Ce modèle d'ajout de classes aux éléments existants et à ces classes est défini dans ce bootstrap que CSSA fichier dans la prochaine vidéo, je vais mettre en évidence certaines des autres pièces importantes qui viennent avec bootstrap, y compris les formulaires et les entrées.