Welkom terug in het apparaat Ik ga een nieuwe tool genaamd Bootstrap introduceren en ik ben op de bootstrap homepage krijgen bootstrap dotcom.
En ik wil gewoon een paar minuten duren in deze intro video uit te leggen wat bootstrap is en waarom we gebruiken het.
En dan ook nog aan te tonen u een paar voorbeelden van sites die bootstrap gebruiken.
Dus laten we beginnen gewoon door het lezen van de officiële bootstrap blurb.
Bootstrap is de populairste TMLC SS in javascript kader voor de ontwikkeling van responsieve mobiele eerste projecten op het web.
Laten we breken die naar beneden een beetje.
Bootstrap is zeer populair.
In feite is het de meest speelde en gevorkte repository krijgen hub die in feite betekent dat het de meeste mensen gebruiken de meeste mensen gunst te voegen krijgen hulp en alles wat bootstrap is eigenlijk een enkel bestand van succes en een enkel bestand van javascript .
Nu is er een heleboel C S S en veel javascript in die bestanden, maar ze zijn gewoon twee bestanden en kunnen we ze op te nemen in onze eigen applicatie.
In principe nemen we de code van iemand anders en naar Bootstrap we toegevoegd aan onze eigen applicatie en het helpt ons goed uitziende sites die responsief zijn en het helpt ons hen snel te maken zonder dat u een ton van onze eigen code te schrijven.
Er zijn twee belangrijke redenen dat ik het heb laten zien om u in deze cursus.
De eerste is dat het erg populair.
Veel plaatsen gebruiken.
Veel bedrijven veel ontwikkelaars gebruiken en het is gewoon de moeite waard te weten.
Maar de tweede is dat het gaat om ons te helpen goed uitziende websites vrij snel in deze cursus.
Dus als we leren rug en spullen als we focussen op Node en uiten en Mongo en mangoest en knie diep en al van dit complex terug en logica kunnen we nog steeds iets dat ziet er goed uit te maken, zonder dat om een ​​uur of twee uur te wijden video om iets te stylen kunnen we bootstrap inpluggen en we kunnen dingen naar binnen 10 15 minuten en we zullen er goed uitzien.
Het volgende wat ik zal doen is geven u een korte rondleiding van de haven, maar bootstrap heeft beroemde goede documentatie tal van goede voorbeelden en ze gebruiken eigenlijk bootstrap op deze website wat logisch is.
Dus laten we beginnen door te klikken op C Ss en dat is het vermeld bootstrap is slechts een enkele CSSA bestand één JavaScript-bestand binnen die CSSA bestand.
Er is een heleboel dingen die we gratis te krijgen.
Dus laten we een kijkje nemen op Knoppen.
Dus als we willen om een ​​knop te maken en we hebben bootstrap opgenomen in onze applicatie kunnen we deze klasse toe te voegen aan de klas is eigenlijk Beati en PTEN standaard en we krijgen deze knoppen.
Wij kunnen verschillende kleuren te doen.
Laten we eens een kijkje nemen op formulieren.
We krijgen leuke ingangen hier.
En het is ook erg belangrijk op te merken alles reageert op de site zodat u kunt zien we de dingen die inspelen op de breedte van het scherm te krijgen.
We hebben ook verschillende vormen.
U kunt de verschillende onderdelen te combineren.
Dus hier zijn ze met behulp van een knop met een formulier.
Dus het is net als Lego stukken bootstrap en een heleboel manieren het is gewoon van Lego stukken zijn geweest dat je bij elkaar kunt zetten en toe te voegen aan uw site als het je past.
We zullen gaan over de meeste van deze componenten.
De meeste van deze grote stukken als we eenmaal beginnen te werken met het en het schrijven van bootstrap code onszelf.
Dus voor nu zullen we verder gaan en wanneer u het volgende tabblad die componenten componenten bevatten enkele van de grotere stukken van bootstrap die we kunnen gebruiken en dat omvat zaken als nav bars laten zien.
En dit is waarschijnlijk een van de meest populaire aspecten van bootstrap die veel en veel sites gebruiken zoals je kunt zien met een beetje van de code.
Het ziet er als een hoop, maar ik verzeker je dat het een stuk minder dan het zou zijn als we een NAV bar van de grond af aan het schrijven waren.
En dit komt met drop downs vorm en er zijn meerdere soorten bars verschillende kleuren een aantal die zijn bevestigd aan de bovenkant van de pagina een aantal dat zal scrollen.
Er zijn andere componenten, zoals de Jumbotron dat is een manier van presentatie van een aantal content op uw website vooruitgang bars.
En deze zijn allemaal voorzien van bootstrap.
Dus je zou nu afvragen of bootstrap gaat om al deze stukken en ze zijn al vooraf gestileerd wat elke site die bootstrap gebruikt zag er hetzelfde.
En het antwoord is ja en nee.
Het hangt af van hoe de site maakt gebruik van bootstrap.
Ik zou zeggen dat een bedrijf of een project dat gebruik maakt van bootstrap goed maakt het moeilijk om te vertellen dat ze daadwerkelijk gebruik maakt van bootstrap, omdat ze gebruik maken van de belangrijkste componenten en dan kun je gaan en schrijf uw eigen stijl op de top.
Verander de kleuren van de doopvonten te veranderen een aantal van de hover-effecten.
Je hoeft niet exact dezelfde kleuren en alles die met bootstrap gebruiken, maar dat betekent niet dat er iets inherent slecht in het gebruik van de ingebouwde Bootstrap stijlen van beide.
En we zullen zeker beide doen.
Dus als we het maken van een site en een focus is niet echt op de front-end we willen gewoon iets dat snel toonbaar uitziet te maken.
In principe prototype front-end zal bootstrap gebruiken en we zullen niet echt aan te passen veel stukken.
Maar als we werken aan iets een beetje groter iets dat we niet willen kijken als we gebruiken bootstrap zonder iets te veranderen helemaal dan gaan we in gaan en voeg een aantal van onze eigen stijlen in principe toe een likje verf op de top van bootstrap.
Het volgende wat ik wil doen is te laten zien u enkele van de sites die zijn gebouwd met bootstrap en Buddh reis daadwerkelijk heeft een officiële website, waar ze presenteren een aantal van die sites.
Als u klikt op de Expo Ik heb het al te openen.
Je kunt zien dat ze showcase mooi en inspirerend maakt gebruik van een bootstrap, zodat we kunnen een aantal van deze te openen voor hen en nieuwe tabbladen te openen.
En dit zijn slechts de meest recente.
Er zijn honderden op deze site.
U kunt tonnen en tonnen van hen zien en je kunt blijven scrollen en scrollen en dan kunnen we naar een paar oudere en er er is zo veel verschillende sites die worden gebruikt.
En ze niet echt allemaal hetzelfde uitzien.
Ja misschien veel van hen hebben een navigatiebalk.
Misschien een heleboel van hen hebben deze full screen grote afbeelding lay-out, maar dat is meer een ontwerp trend dan iets dat bootstrap het puur verantwoordelijk voor.
Dus laten we eens een kijkje bij enkele van deze.
Deze is creatief Tim dat is een bedrijf dat website templates maakt eigenlijk.
En je kunt zien hebben we deze mooie raster van afbeeldingen.
Het is zeer responsief.
Als ik dit krimpen krijgen we onze kleine nav bar hier.
Dus dit is een bootstrap component de manier waarop alles in dit rooster wordt gelegd.
Bootstrap is gedeeltelijk verantwoordelijk voor dat, maar je kunt ook zien dat ze niet met behulp van de standaard ingebouwde Bootstrap knoppen.
Ze hebben ze veranderd.
Het ziet er anders uit.
Dus ik denk dat dit is echt een mooi gebruik van bootstrap dat is echt een leuk uitziende website.
Het werkt goed en gebruikt bootstrap maar niet afhankelijk bootstrap 100 procent.
Laten we eens een kijkje nemen op een of twee meer.
Dus deze is Indicus gebeld of indices iets dergelijks.
Blijkbaar zijn ze ontwerpen en bouwen van digitale producten die mensen genieten van het gebruik.
Dus laten we scroll down hier.
Neem een ​​kijkje op wat we hebben.
Dus er is wat content die waarschijnlijk is gebouwd met de bootstrap rooster systeem dat helpt bij het organiseren en leg dingen uit lay-out zoals ik al eerder heb gezegd is notoir moeilijk Pearcey SS.
Het wordt steeds beter, maar bootstrap is echt heel handig om ons te helpen dingen lay-out op onze applicatie.
En we hebben een kleine voettekst bar is er een navigatiebalk hier dus het is echt leuk om te gaan bootstrappen Expo neem de tijd om een ​​aantal van de projecten die vroeger bootstrappen en verken te zien hoe ze het gebruiken en al de verschillende manieren waarop bedrijven wijzigt het toe te voegen in hun eigen fonts hun eigen kleuren en echt erachter te komen wat zijn de belangrijkste componenten die veel en veel van de sites gebruikt en waarom besluiten om bootstrap gebruiken.
En naar mijn mening is echt komt neer op de grid systeem dat we een video van dit toestel zal wijden en de nav bars en het reactievermogen van alles.
OK.
Dus om wrap up ga ik je laten zien een eenvoudige site die we zullen maken.
Dit is onze startup genaamd zware kinderboerderij.
Het helpt u uw perfecte katachtige soulmate te vinden en het gebruik van bootstrap.
U kunt zien hebben we een navigatiebalk hier net als dat we aanmelden Morgan knoppen.
We krijgen deze kleine pictogrammen dan hebben we onze tekst hier en de kleine tag lijn en dan is onze knop.
En vervolgens als ik dingen verkleinen alles reageert u kunt zien de dingen bewegen verschuiven rond.
En het belangrijkste krijgen we dat kleine hamburger en we hebben een mobiele vriendelijke nav bar.