Welkom terug in deze les gaan we een klein project uit te bouwen met behulp van wat we tot nu toe over bootstrap heb geleerd.
Het zal een groot deel van de componenten die we hebben gesproken over het op te nemen nu de bar van het jumbotron en het net.
Ik gooide ook in een of twee nieuwe dingen met inbegrip van de icoontjes hier.
We hebben niet gezien hoe die doen gewoon nog niet.
En ook het feit dat dit nav bar zoals ik bladeren het zal zien blijft bevestigd aan de bovenkant, zodat het niet de manier waarop we hebben een vaste nav bar die we ook hebben gewoon nog niet gezien hoeft te scrollen.
En dan tot slot zijn we het veranderen van een aantal van de kleuren van de standaard bootstrap componenten.
Dus dit is eigenlijk een iets andere grijstint.
Dit is de schaduw van blauw en de nav bar heeft een aantal verschillende kleuren.
Dus ik zal je laten zien hoe je dat allemaal doen voordat we begonnen met het schrijven van een code.
Ik wil gewoon een moment te nemen om te wijzen op het feit dat deze beelden voor het grootste deel zijn van een website een geweldige bron genaamd Splash.
Dus splash biedt een heleboel mooie hoge rez foto's die je kunt doen wat je wilt met.
U kunt de licentie hier lezen, maar het is vrij veel wat je wilt.
Het is een creative commons licentie blah blah blah Ik weet zeker dat ik niet echt zorgen over, maar de foto's zijn echt geweldig en ik ben met behulp van veel van deze acht van hen.
In feite is in onze galerij.
En dat ene beeld, dat is dit een recht hier dat ik mezelf daadwerkelijk heeft overgenomen een fotografie klasse en dit is het eerste wat ik heb genomen dat lijkt half fatsoenlijk verlaat.
Ik denk dat zelfs al vergeleken met dezen niet op zoek zo heet.
Hoe dan ook als u deze exact dezelfde beelden, die niet van belang is te gebruiken.
Dit werkt met alle beelden op alle.
Maar als je exact dezelfde die wil ik hebben allemaal van de links in dit bestand galerie M.D dat samen met deze video hebt geüpload en hebben ook de twee kleuren die we gaan naar de donkere blauw en de lichtgrijze gebruiken inbegrepen.
OK.
Dus met dat alles uit de weg laten we nu aan de slag aan het project.
Dus ik heb een leeg bestand galerie.
H m l.
Ik zal toevoegen in mijn h d m l skelet hier en we zullen gewoon noemen image gallery en het eerste wat we moeten doen is omvatten bootstrap.
En ik ga gewoon kopiëren over de cd eindigt van een oud project dus ik zal dat doen op dit moment.
Daar gaan we.
Ik linken naar de bootstrap CDN.
En terwijl ik hier ben ik ook grijpen de bootstraps CSSA en Jay queery stad en dat we in de navigatiebalk les en zet die op de bodem hier zodat wanneer we voegen de nav bar in dat we niet hoeven te jagen gaan voor deze bestanden of voor het script-tags.
Dus een te slaan en het eerste wat we kunnen doen is aan onze Jumbotron.
Dat is leuk en gemakkelijk.
Dus we een div hebben en die klasse zal zijn gelijk Jumbotron.
En dan in de Jumbotron zal beginnen met een H1 dat gewoon zegt dat de image gallery.
Daar gaan we en we zullen besparen en laten we ervoor zorgen dat dit werkt.
Dus het zal leiden tot dit bestand.
Dus hebben we Boucek inbegrepen.
We zien het lettertype veranderen.
We zien dit grijs uit de Jumbotron.
Laten we er nu voor zorgen dat het in een container als het is hier in plaats van wat we hebben, waar het gewoon gaat helemaal over het scherm.
Dus we zullen dat doen div class gelijk container.
Daar gaan we en laten we dit doen naar behoren en verfrissen en we zullen teruggaan.
Oké dus we hebben de Jumbotron maar toe te voegen in deze paragraaf.
Nu gaan we terug te komen en doen het pictogram maar dat is slechts een paragraaf tag onder de H-1 zullen we redden.
Voel je vrij om te zetten wat tekst die u wilt daar en we zijn klaar met de Jumbotron voor nu.
Dus laten we terug gaan en laten we nu doen de nav bar en ik ben niet van plan om genoeg bar vanaf nul te typen om twee redenen.
Een daarvan is dat het is nogal een stukje code.
Het zal een lange tijd in beslag nemen.
En deze video.
Maar twee is het feit dat ik bijna nooit typ in Ackbar vanaf nul.
Zoals ik in de NASCAR video merendeel van de tijd noemde mijn workflow is dat ik naar de bootstrap site of naar een vorige site die ik heb gemaakt met een NAV bar en kopieer ik dat.
En ik controleerde het gewoon en ik te ontdoen van de stukken die ik niet wil.
Ik voeg een aantal nieuwe stukken in.
Dus dat is waar ik ga hier te doen.
Ik heb al genoeg deel dat ik deed in de navigatiebalk zei elke HTML-toepassing.
Het is hier en ik ga gewoon te kopiëren die in en dan zullen we het tweaken een beetje.
Dus laten we kopieer het in en ik kom terug te gaan en we zullen gewoon dit helemaal aan het begin van het bestand net als dat.
En laten we eens kijken wat we krijgen zijn fris en we hebben de nav bar.
Het is dichtbij.
We willen het merk veranderen.
We willen ook de kleur uiteindelijk veranderen en we willen ervoor zorgen dat het wordt bevestigd aan de top, die het nu niet, maar we komen er wel.
Laten we terug gaan en verander gewoon het merk.
Dus in plaats van koffie Ik belde mijn foto's kun je dit wat je wilt bellen.
Natuurlijk is er zeker van dat het werkt ok.
Het volgende wat ik zal je laten zien is een snelle verandering die we kunnen leveren aan de kleur, waar weergegeven in plaats van nap of verzuim te wijzigen.
We kunnen nu doen als bar in vers en ik zal je laten zien hoe dat eruit ziet.
We krijgen een donkere nu voor nu of de kleuren zijn omgekeerd waar de tekst is licht en we krijgen een donkere achtergrond.
Het is nog steeds niet de blauwe kleur die ik ga voor meer dan hier.
En het lettertype is ook niet wit, maar we zullen terugkomen en dat oplossen.
Dit is dicht genoeg voor nu.
Nu kunnen we ons richten op de werkelijke afbeelding galerie op dat rooster hier beneden.
En laten we beginnen door te kijken naar hoe het zich gedraagt ​​op de oplossing.
het begint zo met drie beelden over te gaan en vervolgens als ik de grootte van het naar beneden gaat tot twee en dan gaat het naar twee en dan eindelijk op de kleine omvang gaat het naar één zoals je hier kunt zien.
En we hebben een beeld gaan over.
Laten we beginnen met het opzetten van de grid voor deze grote omvang, waar we drie gaan over.
Onthoud, wij hebben 12 stuks in totaal.
Dus als we willen drie gaan over gaan we aan elk van hen aanwijzen als vier eenheden.
Dus laten we stellen dat tot net onder onze Jumbotron.
Nog steeds in de container al zijn we gewoon gaan doen div class is gelijk aan rij en dan de binnenkant van dat zullen we moeten div class is gelijk aan en we willen dat het vier eenheden.
Dus we kolom grote dash 4 doen en druk op enter en we kunnen beginnen door gewoon wat tekst hier zetten en dan zal ik dupliceren dat, omdat we willen dat drie van die.
En ik zal niet zorgen te maken over de vaststelling nog de insprong want we gaan naar een grotere verandering in slechts een moment te maken.
Maar laten verversen en krijgen we die drie kolommen over te gaan.
Dus de volgende ding dat we willen doen is nog wat foto's te gaan en al beginnen, maar gewoon het nemen van de L van mijn Golden Gate Bridge foto en we gaan een afbeelding tag in plaats van toe te voegen dan tekst.
Dus image source gelijk aan dat van de Golden Gate Bridge u ziek bent en ik zal gewoon plakken dat drie keer en op te slaan.
En als we terug gaan we een probleem en dat is dat dat imago is enorm, zelfs al hebben we die drie kolommen.
Ons beeld is niet verblijf binnen onze column is het niet krimpen naar beneden.
U kunt zien wat we zullen doen om dit op te lossen is het toevoegen van het toevoegen van een beetje meer bootstrap.
Ik heb je nog niet liet zien om dit mooie kleine rand om het te maken en het heet een miniatuur.
Alles wat we moeten doen is schrijven een div met klasse gelijk is aan thumbnail en vervolgens wat beeld dat wij erin zullen worden verkleind om te passen in de kolom te zetten.
En het wordt ook dit kleine grens hier waarvan ik denk dat ziet er vrij aardig.
Dus om dat te doen ik ben eigenlijk van plan om zich te ontdoen van wat we hebben met die om gewoon te gaan terug naar één enkel beeld en voeg in een div class te krijgen gelijk miniatuur en dat gedaan correct.
En we wikkel die rond de afbeelding en op te slaan.
Nu als we vernieuwen.
Je zult zien of we een enkel beeld, dat in beslag neemt de juiste hoeveelheid ruimte binnen dat netwerk te krijgen.
Dit is de kolom en het heeft een beetje rand er omheen en het beeld is niet gigantisch wat geweldig is.
Dus laten we ervoor zorgen dat het werkt als we dit te dupliceren.
Dus dit is een beeld laten dupliceren het drie keer en zie wat er gebeurt refresh.
En daar gaan we.
We hebben drie beelden.
Ik zal doorgaan en voeg zes meer in.
Dus hebben we negen in totaal, zoals we hier doen.
En we eigenlijk niet hoeven te aparte rijen toe te voegen.
We kunnen alleen maar zet ze allemaal in dezelfde rij.
Dus kopieer alle drie die we tot nu toe te keren en op te slaan.
Dat zal ons negen beelden.
En als ik vernieuw je zult zien dat ze automatisch verpakken naar de volgende regel.
Dus we hebben maar één rij te hebben en toe te voegen in deze kolommen jij medisch nos.
Als we willen dat elk beeld tot het nemen van vier eenheden dan betekent dat drie per rij en dan moeten we drie rijen van beelden.
Ik ga terug en verander al deze afbeelding die u elfen aan het einde van de video.
Ik wil niet om je dat te kijken.
Zeer interessant gewoon kopiëren en plakken maar laten we focussen op de rest van dit raster.
Dus nu zo snel een hit medium gaat het naar een beeld over dat is niet wat we willen wat we zoekt naar twee beelden over op dat medium breekpunt.
En dan na het medium breekpunt waarin sprake is van we slaan klein en we willen nog steeds verblijven in 2.
Dus om vast te stellen dat er in ons of het gaat om een ​​onmiddellijk aan de grote breekpunt of het medium breekpunt en vervolgens kleine en extra kleine verblijf in 1.
We kunnen terug gaan hier en we zullen al die jij selecteert veranderen en command d alle exemplaren van noemen ze groot zijn voor selecteren en dan zal ik de linker of rechter pijl om de cursor te verplaatsen raken.
Nu kan ik ze allemaal tegelijk bewerken.
En wat ik wil doen ik zou kunnen toevoegen in kolom medium zes want we willen Perrow en dat zal werken.
En als ik terug te gaan en te vernieuwen je zult zien dat ze een verblijf in 3 per rij en dan druk ik de mediaan breekpunt en ze gaan naar 2.
Maar toen raakte ik klein en het springt naar een en die van ons toen wij slaan klein de oplossing blijft op 2.
Dus om dat in plaats van het doen van kolom medium zes kunnen we doen column kleine 6 vast te stellen en gaan weer terug deze versie te vernieuwen.
We troffen medium.
We gaan naar twee.
We troffen klein.
We verblijven in 2 en dan gaan we naar extra klein en we zijn 1 1 beeld per rij.
Perfect.
Dus dat is alles wat we moeten doen voor het net en we klaar zijn met de meeste van de functionaliteit hier.
Zeer zeer snel te krijgen dat up and running.
Wat we willen richten op nu zijn enkele van de kleuren en ook de iconen.
Ik zal beginnen door te laten zien hoe we met behulp van pictogrammen bootstrap toe te voegen.
Dus krijgen bootstrap als je naar onderdelen zijn er deze glyph iconen bovenin en er is een heleboel van hen om uit te kiezen.
En we zullen er een die we willen gebruiken en degene die ik gebruik te vinden.
Ik zal gewoon een zoekopdracht voor ik denk dat het de camera.
Dus er is deze camera hier en ik ben niet met behulp van die camera.
Het is iets anders.
Degene die ik gebruik is een meer retro camera en ik zal je laten zien hoe aan toevoegen dat in.
Het is eigenlijk geen deel uit van bootstrap Maar laten we beginnen met de reguliere camera die is uitgerust met een bootstrap.
Zo schrijven we Clifford Kahn en ga dan met de Conn dashboard camera.
En als u verder naar beneden scrollen kun je zien waar ze uitleggen hoe het te gebruiken om een ​​overspanning te creëren waarin een klasse gelijk is aan met Con is en dan glyph het kan de naam van het pictogram glyph stoot.
Dus laten we kopieer deze overspanning in en we beginnen door het te doen in de H-1 zet ze gewoon aan het begin van de H-1 en we willen een snelle A-Kon dashboard camera en we zullen slaan en te vernieuwen.
En net als dat je een camera naar binnen.
En als we willen ruimte die we kunnen ook doen door middel van padding of we kunnen gewoon voeg een spatie daar.
En krijgen we een ruimte kunnen we precies hetzelfde te doen voor de navigatiebalk en ik gebruikte een die wordt aangeroepen Photo gaan double check-up hier.
U kunt een zoekopdracht op deze pagina voor foto beeld te doen.
Daar is het.
Het kan gaan als het beeld kan dash.
Dus we gaan naar de nav bar merk hier en we plakken in die periode weer.
En dan in de overspanning van de klasse moet worden klik op de foto en we zullen een ruimte is er toe te voegen ook.
We gaan terug naar onze site zijn fris en we hebben nu een kleine afbeelding daar.
En we hebben ook de camera.
Volgende laten we het aanpakken van de navigatiebalk en we zullen beginnen met het maken van deze bevestigd aan de top, zodat je nu kunt zien.
Dat dutje onze rollen weg.
Maar aan de oplossing het blijft daar.
En om dat te doen is het een enkele klasse die we hebben om toe te voegen aan onze NAV bar.
Dus hier naar boven willen we nav bar dash vaste dash top en op te slaan.
En als we verse zul je zien dat het bevestigd aan de top.
Er is een klein probleem en dat is dat onze content is nu achter het een beetje en we willen dat dat de normale afstand boven de Jumbotron hebben.
Wat we moeten doen is het toevoegen van een beetje padding om ons lichaam en het gebeurt te zijn 70 pixels.
De bootstrap docs zal je vertellen dat als je ooit vergeten 70 pixels van de vulling is wat we willen is dat de breedte van de inmiddels vier.
Dus we zullen hier te gaan en we zullen een stylesheet nu te maken en ik noem het galerie Dotsie SS en vervolgens binnen selecteer lichaam padding top 70 pixels en dan moeten we aan toevoegen dat in verband met die stijl plaat die Gallery CS S.
Laten we ervoor zorgen dat het werkt.
Daar gaan we.