Welkom terug in deze les zal ik laten zien hoe je bootstrap installeren in uw eigen toepassingen.
En dan als je eenmaal hebt gedaan dat ik zal je laten zien een aantal van de belangrijkste basisprincipes van het gebruik van toonhoogte.
Dus ik ben op zich te bootstrap dot com alleen op de homepage en er is een link here download bootstrap.
En het is niet echt een directe download link, want we hebben twee belangrijke keuzes voor hoe bootstrap gebruiken.
We kunnen ofwel downloaden van de bestanden en ik doe dat om te beginnen.
Dan kunnen we die bestanden te nemen en voeg ze toe in onze applicatie voordat we verder gaan.
Ik heb een eenvoudige zoekopdracht team Ik zal indienen dat ik bel basic stuff h DML m l.
En ik voeg gewoon een titel en we zullen gewoon toe te voegen in een paar verschillende elementen van de bootstrap.
Als we eenmaal geïnstalleerd dus we zullen niets uitgebreide maken we gewoon gebruiken als een speeltuin voor enkele van de fundamentele bootstrap componenten.
OK dus laten we beginnen met het toevoegen van slechts een eenvoudige H-1 bootstrap basics en op te slaan.
En dan laten we dit openen in de browser.
Gewoon houden dat er voor nu.
Nu naar bootstrap installeren.
Ik deed downloaden.
Dus als ik het openstellen van dat bestand dat u kon zien binnenkant van hier is er een paar verschillende componenten.
Er is een C S S directory en in de CCS directory zijn er nogal een paar bestanden, maar er is eigenlijk maar één belangrijk bestand dat wordt bootstrap up CSSA.
En dit is eigenlijk hetzelfde bestand hier bootstrap-verbaal.
SS behalve het is al minuten strijd zijn gekrompen naar beneden te nemen minder ruimte in beslag.
Dus deze twee zijn de belangrijke bestanden daadwerkelijk te gebruiken bootstrap.
En dit is een bootstrap thema alle drie van deze worden gebruikt om te helpen voeg een aangepast thema te bootstrappen zodat maakt niet zo veel.
Alles wat we nodig hebben is bootstrappen Dotsie beoordelen.
En we beginnen door gewoon te openen zodat u kunt zien wat we werken met.
Dit is de belangrijkste bootstraps opnieuw geëvalueerd bestand.
Het is gewoon een heleboel lessen.
Als je kijkt naar elke regel van CSSA bijna is een klasse verklaring dot gewoon.
En dan wat we kunnen doen is gebruik maken van deze klassen in plaats van onze applicaties.
Dus als we willen een knop met witte tekst en een rode achtergrond gaan we dot knop gevaar toe te passen.
En dat is wat het hier doet.
Maar het gevaar heeft witte tekst een rode achtergrond en een rode grens.
Dus laten we doorgaan en omvatten dit in onze applicatie, net als elk ander CSSA bestand.
Dus wat ik doe is gewoon slepen het hier in dezelfde directory waar ik mijn fundamentele studie team en ik zou ook kunnen doen bootstrap-verbaal herwaarderen in plaats van deze.
Het maakt eigenlijk niet uit.
Technisch gezien deze laadt een beetje sneller, want als ik het open te stellen kun je zien dat het als een gigantische lijn al de witruimte is verwijderd.
Dus het is makkelijker te laden, maar ik ga deze langere versie gebruik gewoon, zodat je precies kunt zien waar we mee werken.
Nu gaan we in onze huidige bestand te gaan hier zal ik deze sluiten en we gaan bootstrap up CSX bevatten.
Dus net als elke andere stylesheet moeten we een gekoppelde tag en de Tref is bootstrap dot C Ss en als we besparen en we zijn fris onze pagina hier vindt u een klein verschil merken.
Kijk naar de doopvont op deze H-1.
Het verandert.
We hebben nu bootstrap hebben geïnstalleerd of op zijn minst de C Ss dat gaat samen met bootstrap en dat is alles wat we nodig hebben voor nu.
We zullen niet werken met de javascript gewoon nog is er geen andere optie voor het installeren van bootstrap dat ze eigenlijk geven aan u op de Get bootstrap website hier.
Bootstrap CDN kunnen we deze link hier te nemen en die toevoegen aan onze code.
En het is een link naar een gehoste versie van diezelfde bestanden.
Dus als we openen dat in de browser en plak deze in je kunt zien heeft de inhoud van de geminimaliseerde bestand en het wordt gehost op dit u r l dus we hebben een link naar dat u L R, dus ik kan vervangen dat.
Een andere link.
Tag en plakken dat je Ellen en ik zal dit één commentaar.
Voor nu en terug te gaan en te vernieuwen.
En niets verandert.
Het enige verschil is dat in het eerste geval het bestand gedownload op onze computer die werden linken naar en in het tweede geval zijn we koppelen aan een extern bestand dat wordt gehost op de lijn hadden we.
Laten we nu eens naar de bootstrap docs en beginnen met spelen of een deel van deze componenten.
Dus ga terug bootstrap te krijgen en laten we klik op C Ss en ik ga gewoon wijzen op een aantal van de belangrijkste stukken die we zullen gebruiken.
Dus laten we beginnen eenvoudig met knoppen.
Willen we een knop alles wat we moeten doen is gebruik maken van een geslagen klasse, gevolgd door een soort knop die tussen de standaard die ons een witte knop zal geven gebruiken, maar dat is ook VTAM primaire toegang BATNA info.
Waarschuwing gevaar en verbinding en ze zijn allemaal een beetje anders vormgegeven.
En natuurlijk kunnen we deze kleuren op onze eigen te veranderen, maar we gaan gewoon gebruik maken van de ingebouwde in een keer om te beginnen en is hij ook te zien hier.
We hoeven niet alleen gebruik maken van een knop element kunnen we een anker tag een knop of een ingang te gebruiken.
Dus laten we proberen dat uit.
Hello deze H-1.
Laten we gewoon toe te voegen in een knop tag en deze knop labels gewoon zeggen click me en net Vernieuw de pagina op dit moment en een kijkje nemen op dat.
Dat is vrij lelijk knop.
Maar als we gaan en voeg die klasse PTEN en vervolgens tussen laten we het doen succes en besparen we nu krijgen deze geweldige groene knop.
Dus vrij gemakkelijk te krijgen een aantal fundamentele stijlen gaan.
En laten we teruggaan en ik geef je een paar andere dingen over knoppen die verschillende maten die we net zo goed kunt gebruiken zijn te laten zien en het is echt gemakkelijk.
We hoeven alleen maar toe te voegen in één van beide knoppen grote en kleine knop of een extra klein, zodat het heeft geprobeerd na knop succes en het hoeft niet te gaan na het.
Maakt niet uit de volgorde van de klassen, maar ik doe het na hier DTN en laten we het doen extra kleine en vernieuw uw pagina.
Daar gaan we.
Ik zal dit bewegen over nu en laten we toe te voegen in een paar knoppen, maar deze zal een anker tag en dit zal in een tag of we moeten HF evenaart aan DP colon slash slash dat elke dag te lezen krijgen bootstrap dot com en vervolgens de tekst zal gewoon zeggen bootstrap docs.
Dus maken dit een beetje groter en dan zal toevoegen in de klas in de klas moet evenaren PTEN en laten we het doen tussen Desch info en zal het grote PTEN dash Elgie te maken en te vernieuwen.
We hebben nu twee knoppen.
Een daarvan is een echte knop element.
Een ander heeft een anker tag en als ik hierop klikt kun je het zien als een anker-tag.
Dus al in de eerste minuut van het gebruik van bootstrap we in staat geweest om fatsoenlijk kijken knoppen te krijgen zijn.
Het zou 10 tot 15 lijnen van CSSA hebben gemaakt op onze eigen te repliceren.
Laten we nu teruggaan.
Maak deze fullscreen weer en ik geef je een paar andere dingen over knoppen weer te geven.
Dus hebben we maten.
We hebben ook verschillende staten waar we kunnen maken op een knop lijkt alsof het actief en te doen dat we voeg gewoon de actieve klasse.
Dus als we proberen dat nu laten we voeg een enkele knop, dus ik ga naar onze kleine miniatuur Klik op mij knop dupliceren drie keer en op het laatste nummer op de middelste van de klas actieve en verfrissen en je kunt hopelijk zien dat verschijnt goed genoeg op het scherm geworpen dat dit één actieve verschijnt.
Laten we terug gaan en we kunnen ook een knop uit te schakelen door het toevoegen in dit kenmerk.
Gehandicapte gelijk uitgeschakeld.
Laten we terug gaan en laten we de laatste refresh uit te schakelen.
En nu deze knop is uitgeschakeld.
We krijgen die leuke icoon.
Het duurt niet een hover effect waar het van kleur verandert niet meer te hebben.
Het is duidelijk een knop uitgeschakeld.
Great laatste wat ik zal je laten zien, zodat we kunnen de kleuren weer te veranderen, zodat de knop gevaar nacht geeft ons dat oranjerood en je kunt alle kleuren hier te zien.
En natuurlijk kan je die door het overschrijven van de stijlen te wijzigen, zodat je zoiets als dit zou kunnen doen in plaats van een andere style sheet.
Ik doe het gewoon hier voor nu.
Dus we gaan gewoon om één lijn te doen en ook als schoonheid en gevaar.
We kunnen de kleur oranje te zijn en nu zou kunnen zijn om de Texas orange in gevaar brengen en als ik wilde de achtergrond ik kon doen eigenlijk verandert de achtergrond is oranje en dat is hoe je in kunt gaan en overschrijven de stijlen, zodat je niet hoeft te gebruiken wat bootstrap geeft je out of the box.
En de meeste plaatsen niet.
OK dus dat is knopen en dat is alles wat ik ga doen in deze video.
Ik wilde alleen maar om u een erg snel voorproefje van hoe bootstrap werkt geven.
Dit patroon van het toevoegen van klassen om bestaande elementen en die zijn gedefinieerd in die bootstrap dat CSSA bestand in de volgende video ga ik een aantal van de andere belangrijke stukken die komen met bootstrap inclusief formulieren en ingangen markeren.