Bienvenue dans cette leçon, je vais vous montrer comment installer bootstrap dans vos propres applications.
Et puis une fois que vous avez fait que je vais vous montrer quelques-unes des bases importantes de l'utilisation de la hauteur.
Donc, je suis sur get bootstrap dot com juste sur la page d'accueil et il ya un lien ici télécharger bootstrap.
Et ce n'est pas un lien de téléchargement direct car nous avons deux choix principaux pour l'utilisation de bootstrap.
Nous pouvons soit télécharger les fichiers et je vais le faire pour commencer.
Ensuite, nous pouvons prendre ces fichiers et les ajouter dans notre application avant d'aller plus loin.
J'ai une équipe de recherche simple Je vais déposer que je suis appeler les choses de base h DML m l.
Et je vais juste ajouter un titre et nous allons simplement ajouter dans quelques éléments différents de bootstrap.
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.
OK, nous allons commencer par ajouter un simple bootstrap H-1 et économiser.
Et puis ouvrons ceci dans le navigateur.
Gardez ça là pour le moment.
Maintenant, pour installer bootstrap.
Je l'ai téléchargé.
Donc, si j'ouvre ce fichier, vous pouvez voir à l'intérieur d'ici il ya quelques composants différents.
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.
Et c'est en fait le même fichier ici bootstrapped minutes.
SS, sauf qu'il a été combat minute a été réduit à prendre moins de place.
Donc, ces deux sont les fichiers importants pour utiliser réellement bootstrap.
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.
Tout ce dont nous avons besoin est bootstrap Dotsie évaluer.
Et nous commençons par l'ouvrir simplement afin que vous puissiez voir avec quoi nous travaillons.
Il s'agit du fichier principal réévalué bootstraps.
C'est juste un tas de cours.
Si vous regardez chaque ligne de CSSA est presque un point de déclaration de classe simplement.
Et puis ce que nous pouvons faire est d'utiliser ces classes au lieu de nos applications.
Donc, si nous voulons avoir un bouton avec du texte blanc et un fond rouge, nous allons appliquer le bouton de point de danger.
Et c'est ce que cela fait ici.
Mais le danger a le texte blanc un fond rouge et une bordure rougeâtre.
Alors allons de l'avant et inclure cela dans notre application tout comme n'importe quel autre fichier CSSA.
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.
Ça n'a pas d'importance.
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é.
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.
Maintenant, nous allons aller dans notre fichier réel ici, je fermer ce bas et nous allons inclure bootstrap CSX.
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.
Regardez la police sur ce H-1.
Ça change.
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.
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.
Bootstrap CDN nous pouvons prendre ce lien ici et ajouter cela à notre code.
Et c'est un lien vers une version hébergée de ces mêmes fichiers.
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.
Un autre lien.
Tag et collez que vous êtes Ellen et je vais commenter celui-ci.
Pour l'instant et revenir en arrière et rafraîchir.
Et rien ne change.
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.
Maintenant, allons à la documentation bootstrap et commencer à jouer autour ou certains de ces composants.
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.
Commençons donc simplement par des boutons.
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.
Attention danger et le lien et ils sont tous un style légèrement différent.
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.
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.
Alors essayons ça.
Bonjour ce H-1.
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.
C'est un bouton assez laid.
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.
Donc assez facile d'obtenir certains styles de base aller.
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.
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.
Peu importe l'ordre des classes, mais je vais le faire après ici DTN et faisons extra petit et rafraîchir votre page.
Voilà.
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.
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.
Nous avons maintenant deux boutons.
L'un est un élément de bouton réel.
Un autre a une balise d'ancrage et si je clique dessus, vous pouvez le voir comme une balise d'ancrage.
Donc, dès la première minute d'utilisation de bootstrap, nous avons pu obtenir des boutons décents.
Il aurait fallu 10 à 15 lignes de CSSA sur notre propre à reproduire.
Revenons maintenant.
Rendre ce plein écran à nouveau et je vais vous montrer quelques autres choses sur les boutons.
Nous avons donc des tailles.
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.
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.
Revenons en arrière et nous pouvons également désactiver un bouton en ajoutant cet attribut.
Désactivé égal à désactivé.
Revenons en arrière et désactivons le dernier rafraîchissement.
Et maintenant ce bouton est désactivé.
Nous obtenons cette belle petite icône.
Il n'a pas d'effet hover où il change de couleur plus.
C'est clairement un bouton désactivé.
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.
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.
Je vais le faire ici pour le moment.
Donc, nous allons faire une ligne et aussi comme la beauté et le danger.
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.
Et la plupart des endroits ne le font pas.
OK, ce sont les boutons et c'est tout ce que je vais faire dans cette vidéo.
Je voulais juste vous donner un goût vraiment rapide de la façon dont fonctionne bootstrap.
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.