Welkom terug in deze les ga ik je laten zien een van de belangrijkste en meest gebruikte onderdelen in alle van Bootstrap dat is de NFR, zodat je eigenlijk op get Boucek dotcom kunnen zien.
Zij maken gebruik van genoeg bar component hier.
We gaan ook een op onze Yelp kamp toepassing te gebruiken en als ik aangepast nav de bar.
Merk op hoe reageert het is en dan ook nog zo snel als ik raakte TAB welk formaat en mobiele grootte we dit mooie hamburger merken.
Dus we zullen werken aan dat alles in deze les.
Maar we gaan eenvoudiger te starten.
Het eerste wat we moeten doen is naar componenten en ga naar nav bar en voor we veel verder gaan heb ik een nieuw bestand, alleen maar omdat we zullen het schrijven van een stuk van de code aangemaakt.
De oude was het krijgen van rommelig.
Ik noem het bijvoorbeeld saaie Bar H T M L.
Binnen alles wat ze hebben is de link naar niet bootstrappen veranderen de titel hier.
Ik noem het bootstrappen Nav bars.
Gewoon zo.
Laten we nu eens naar de docs en neem een ​​kijkje op de standaard nav bar.
Dus dit voorbeeld demonstreert hier alle belangrijke functies waar we merk verbinding kan hebben.
Wij kunnen andere koppelingen kunnen wij hebben laten vallen op de menu's.
Wij kunnen een navigatiebalk vorm hebben en een knop kunnen we dingen die aan de rechterkant dingen die aan de linkerkant te hebben.
Deze vitrines werkelijk alles.
Het is het aanrecht van bootstrap saaie bars en dus ook de opmaak is een beetje lang.
We zullen werken met al deze stukken tegen het einde van de video.
Maar ik wil eenvoudiger starten en ik zal beginnen door te laten zien u de eenvoudigste manier om een ​​nummer te maken.
Dus we moeten een nav element te maken en dat NAV element moet twee klassen hebben we willen nav bar en nav bar en we kunnen beginnen met Dasch default zal redden.
En laten we nu eens gaan kijken naar het bestand in de browser en refresh.
Je kunt zien dat ik hoop dat het overkomt en screencast er genoeg bar zeer zwakke bar gaat over de bovenkant dus dat is dat dat is hoe we eigenlijk initialiseren NF bar.
Laten we nu eens vullen met bepaalde inhoud.
Het eerste wat we zullen een kijkje nemen is hoe we hier in dit merk kan toevoegen.
In principe uw bedrijfsnaam.
In de meeste gevallen.
En dat is met behulp van een navigatiebalk header en vervolgens in de NFR header gebruiken we een navigatiebalk merk.
Dus laten we beginnen met toe te voegen dat div class gelijk nav bar dash header en dan de binnenkant van daar gaan we naar toe in nav bar merk dat is een anker-tag.
Meestal als u klikt op dat bedrijfsnaam brengt u terug naar de home page.
Dus we dat hier doen anchor tag en we beginnen met het verkeer gelijk is aan de Thorpes dus het ons nergens neemt.
Klasse zal gelijk nav bar dash merk en we zullen gewoon deel uitmaken van een bedrijfsnaam.
Laten we eens kijken of ik een kopje koffie om me dus laten we gaan met koffie.
Maar eigenlijk is het een ware startup die we nodig hebben om de spelling een beetje te veranderen te maken.
OK Alex.
Goed genoeg voor mij.
Koffie met een K.
Laten we eens een kijkje nemen.
Vernieuwen en we hebben nu onze NAV bar merk dat is een link.
Ik klik op het.
Het maakt me niet overal op dit moment te nemen, maar uiteindelijk onze applicaties zullen hebben, zodat wanneer u op de naam van het bedrijf brengt u terug naar de home page volgende.
Laten we eens kijken of we kunnen toevoegen in een aantal andere schakels zoals contact over.
Meld je aan voor register.
Al die gemeenschappelijke schakels in de bar.
Laten we beginnen met het toevoegen van ongeveer paginakoppeling hier.
Dus we terug en dan buiten de navigatiebalk header gaan we naar een ander div te maken in dit div zal alle content te verzamelen in ieder geval aan de linkerkant van onze NAV bar te gaan.
Dus we hebben de header en dan zullen we bepaalde inhoud hebben en dan als we er iets aan de rechterkant willen we nog een div dat een andere klasse heeft te hebben.
Dus de klasse hier.
Eigenlijk twee willen we nav en nav bar dash nav.
Vraag me niet over het benoemen van hun nav bar dash nav.
Het is een van de grote kritiek op bootstrap is dat het een beetje lelijk en het is niet erg zinvol soms.
En er is eigenlijk een CSSA framework dat is gemaakt in reactie op de semantische zinloosheid van bootstrap als je semantische UI zal heten.
En dat is er een die ik echt van te genieten.
En ik gedebatteerd onderwijs.
Maar uiteindelijk is het gewoon niet zo veel gebruikt er niet zo groot tutorials nog.
Dus terug naar onze diff hier.
Klasse nav nav bar en de klasse nav deze beide.
En dan voor elk punt dat we willen op deze NFR moeten we een bondgenoot toe te voegen en vervolgens in de Y als we willen linken we hebben net een anker-tag.
Dus dit zal gewoon nergens te gaan.
Opnieuw en dit zal de Over pagina.
En als ik terug te gaan en te vernieuwen we hebben nu een link naar over laten we voeg een meer om contact op te slaan terug te gaan.
Nu hebben we twee links laten we nu gaan en iets toevoegen aan de rechterkant van de pagina.
Laten we voeg twee schakels een voor register of meld je aan en een andere voor aanmelden aan de rechterkant van de bar om dat te doen.
We hebben een nother container hier en eigenlijk in plaats van het gebruik van divs het is meer gebruikelijk om gebruik maken van een u zal het exact dezelfde manier werken, maar u wilt bondgenoten in plaats van een goed hebben zelfs al zijn ze prima met een div maakt zal werken beetje meer zin te zijn in plaats van een UL.
Dus we gaan naar een andere UL toe te voegen en deze gaat Nav zijn. nav bar dash nav en vervolgens nav bar dash.
Rechts.
En we moeten ervoor zorgen dat we spellen die correct anders zal die klasse niet van kracht.
Dus wat dit zal doen, is ons een nieuwe groep van content voor de rechterzijde van die nav bar.
En nu moeten we gewoon te vullen.
Dus ik twee schakels zowel speld tussen te voegen.
De eerste zal nergens heen en het zal zeggen: meld je aan en dan zullen we een ander dat zegt gewoon inloggen in te hebben.
Laten we kijken.
Vernieuw de pagina en je kunt zien hebben wij inhoud aan de rechterkant.
Maar het is recht tegen de rand en op te lossen dat we kunnen toevoegen in een container om genoeg bar net als wij gebruik maken van de container eerder om wat afstand toe te voegen aan onze forums.
We konden één in plaats van een navigatiebalk toe te voegen.
Dus ik zet alles in de Neph bar in plaats van een container.
Dus class is gelijk aan container.
verplaats deze gewoon naar beneden.
Zorg ervoor dat alles is ingesprongen op de juiste.
Daar gaan we.
Laten we eens testen het uit.
Leuk.
Dus nu alles is gecentreerd aardig en correct.
Ik zal je laten zien als ik de container toe te voegen buiten de nav en zetten ze de hele nav bar binnen.
Wel zien wat er gebeurt.
Nu als ik waren vers genoeg bars ik eigenlijk afgesneden en gaat alleen een deel van de weg aan de overkant.
Dus container zal doen dat voor wat we zetten binnenkant van het.
En in dit geval willen we de container binnenkant van de navigatiebalk, zodat het niet vernauwen van de werkelijke saaie deel zelf, maar het is het beperken van de inhoud erin.
OK.
Dus container hebben we onze Hetter hebben we de spullen aan de linkerkant en we hebben een aantal content op rechts, zodat je hier kunt zien.
Nu, wat step it up een beetje en gaan en neem deze fundamentele nav bar of de standaard nav bar die ze hebben in de docs en laten we kopieer deze hele ding en ik zal zet ze gewoon recht onder zijn nu veel te maken wat ruimte.
Veel commentaar om het duidelijker te maken.
Standaard nav bar.
En laten we eens een kijkje op het refresh.
Dus het is dit nav bar hier en daar is een paar dingen die ik wil benadrukken.
Een daarvan is dat we hebben laten vallen op de menu's, maar ze niet echt werken.
En ook als we het raam formaat krijgen we de hamburger menu hier.
Deze banden weg te gaan.
De vorm gaat weg en hen te laten zien moeten we klik hier.
Maar dat werkt niet ook niet.
Dus laten we beginnen met het krijgen van het werk en dan zullen we praten over al die verschillende stukjes en wat ze doen om het te laten werken.
We moeten om te gaan en ook de bootstrap javascript bestand.
Dus als we terug gaan naar de bootstrap docs We tijdens downloaden zullen klikken.
Er is ook een JavaScript-bestand dat we nodig hebben, wat recht is hier.
Ik zal het CDN-versie te gebruiken, maar het komt ook in de map die u downloadt.
Het is gewoon heet bootstrap.
Ja.
Of de geminimaliseerde versie bootstrap up Mencius.
En laten we toevoegen dat en we doen het naar beneden op de bodem van ons lichaam en op te slaan.
En ik weet dat we nog niet gesproken over javascript.
Je weet niet wat een script is en wat de bron hier maakt het niet uit.
We gaan gewoon de stekker in bootstrap.
En nu onze refresh.
Kunnen we het oplossen van een klein probleem, die laat ik je dat hier ons vertelt dat bootstraps javascript vraag vereist.
Maak je geen zorgen over wat dit is en hoe het moet dit bericht.
Maar ik wil gewoon laten zien aan u, zodat u de werkelijke boodschap die wij krijgen te zien.
We moeten J vraag die we ook hebben niet gesproken over nodig.
Maar het is makkelijk genoeg om te gaan en te krijgen.
We hoeven niet aan een javascript te schrijven.
Je hoeft niet aan een javascript weten.
We hoeven alleen maar op te nemen.
Dus alles wat we moeten doen is zoeken naar Jay query's CDN die op code die Jay dot com en hier beneden zal moeten om de meest recente versie te selecteren en kopieer deze URL.
Dit is de Querrey bestand en dan gaan we terug naar hier.
We gaan naar een ander één van deze script-tags toe te voegen.
In principe is het kopiëren van deze exacte code.
In feite zal ik dat doen om het gemakkelijker maken om die exacte lijn dupliceren en verander dit adres om de jey vraag je bent.
Als al het andere faalt, kun je typt gewoon dit uit.
Het is niet zo slecht als je een l, maar ik heb dit door te zoeken naar Jay queery CDN en zal redden en dit hoeft voordat bootstraps javascript bestand te komen, omdat het is gebaseerd op een query.
Dus nog een keer niet te veel over wat het is hoe het werkt, wat Jay vraag is zorgen.
Dat is alles wat komen een paar minuten vanaf nu.
Maar om het meeste uit bootstrap en in het bijzonder de nav bars en het dropdown menu.
We moeten alleen deze twee lijnen hebben elk moment dat we met behulp van dus we zullen nu terug te gaan en te vernieuwen.
Allereerst worden gedropt op de menu's werken nu zoals je kunt zien we nu dropdown menu's.
We gaan niet daarover te praten in deze video maar zoals ik het formaat en ik krijg dat hamburger.
De hamburger werkt nu als ik erop klik.
Het schakelt dat verborgen materiaal.
Dus de manier waarop het werkt hier is er dit kleine breekpunt hier waar al deze inhoud huiden en alles wat we zien is de header en die knop.
En toen we op de knop al wat eerder verborgen inhoud verschijnt weer Laten we die aan het werk.
Nu voor ons.
Maar we gaan naar een veel minder ingewikkeld versie te doen wanneer we willen gewoon deze vier banden te verbergen, zodat wanneer we het formaat van deze vier links worden verborgen en vervolgens erg snel zullen ze worden weergegeven.
Om dat te doen gaan om te beginnen door het nemen van een blik op hoe is het volbrengt in deze standaardversie deze reus monster van een navigatiebalk.
En ik zal gewoon wijzen op de belangrijke lijn hier.
Div class collapse nav bar ineenstorting wat we binnenkant van deze div gezet zal worden ingestort toen we Mobile grootte slaan, zodat het de knop niet zal maken voor ons.
Het zal de omschakeling niet in de re-te zien zijn in het verbergen, maar het zal verbergen wat inhoud zetten we erin als we dat tablet en mobiel formaat te raken.
Dus we gaan om dit te kopiëren en we hoeven alleen maar om het te wikkelen rond de inhoud die we willen verbergen en we willen dit hier te verbergen.
Deze twee Juelz Dus de vier banden willen we verbergen wanneer we dat kleinere grootte van het scherm raken.
Dus voeg in de afsluitende tag en op te slaan en er is een lijn hier en dit is belangrijk en ik zal slechts een moment om het te krijgen.
Het zal ons niet gewoon nog niet van invloed zijn, maar als we vernieuwen.
Je zult het zien.
Nu wanneer ik het formaat is er een punt hier waar al dat inhoud binnenkant van de instorting div verdwijnt.
Nu is het niet opnieuw verschijnt.
We dit niet hamburger te krijgen.
We krijgen niet een klik op om het even wat, maar het is ingestort het is verdwenen.
En dat komt omdat we in deze lijn hier div class ineenstorting nav bar instorten toegevoegd.
Volgende wat we moeten doen is toe te voegen in de hamburger en het is nogal een beetje van de code.
Helaas is het nog steeds veel beter dan als we het zelf doen.
Maar de hamburger is eigenlijk dit alles hier.
Dus ik ga om te kopiëren dat en plak het op maximaal binnenkant van een dutje of Hetter voor onze koffie inContact.
En we zullen redden Ik kom terug naar wat het doet komen.
Laten we gewoon te vernieuwen.
En nu als ik het formaat ik de hamburger.
Daar gaan we.
Laat me nu een beetje over hoe het werkt te verklaren.
Dus er is een knop en vervolgens binnen die knop er drie overspanningen en een ieder is verantwoordelijk voor het maken van een van deze bars.
Dus het is niet een beeld dat we hier zien is het eigenlijk elk team dat is het maken van deze kleine spand die worden gestyled in die smalle bars om die hamburger te maken.
En dan zo ver als het tonen en verbergen van de inhoud als we klik op wat echt belangrijk is dat we deze gegevens doelkenmerk en wat dit is ingesteld op in ons geval B-S voorbeeld.
Nu voor onze ineenstorting één bootstrap bijvoorbeeld net voor onze club zo en laten we gewoon veranderen in ja.
Nav. demo net als dat.
Dan moeten we de ID van de inhoud die we willen eigenlijk storten die we willen laten zien en te verbergen te veranderen.
Dus ik zal het te veranderen aan te passen vs nav demo.
Let op een belangrijk verschil.
We zijn niet toe te voegen in het Noordpoolgebied Thor Dus het is net als CSI en wanneer we iets met C zegt dat we nodig hebben om te gebruiken die Octa Thorpe om een ​​ID te richten, zodat verlaten we de ID als gewoon de tekst de naam te selecteren.
Nu, als demo we hier aan toevoegen dat Thorpe zal het refresh redden.
Nu als ik het formaat krijgen we de hamburger en ze op het en het werkt om dat het weergeven en verbergen te schakelen.
Grote.
Het laatste ding dat zal laten zien is dat als we bewegen iets buiten deze instorten.
Dus laten we hier deze links.
De rekening of het over en het contact en we bewegen die hier buiten de instorting div en ik vernieuwen kunt zien dat ze eigenlijk niet instorten ze daar blijven en klik ik op die en de andere twee dat in plaats zijn van de ineenstorting worden omgeschakeld.
Nu ben ik niet zeggen dat dit ziet er goed uit, maar het illustreert het belang van die instorting div ..
Dus wat is er gebeurd kant van instorting of wat we hebben in ons geval voor verschillende links naar die op het recht op of aan de linkerkant.
Ze hebben allemaal zal instorten wanneer we dat kleinere mobiele grootte hit.
En vervolgens om ze opnieuw tonen we op deze knop klikt hier en die knop heeft een data doelkenmerk en wat ID komt dit overeen met zal worden verborgen en getoond wanneer we op dat.
En dat gebeurt op dit idee hier te zijn.
OK dus een soort van een marathon.
Een heleboel dingen die verder gaat in het maken van een bootstrap nav bar.
Maar nogmaals de manier waarop we aankwamen was er alleen door recht omhoog te kopiëren dit in ons bestand en ontleden stukken ervan.
En dat is hoe we genoeg zijn vrijwel elke keer als we gewoon dat voorbeeld code en erachter te komen wat stukken die we nodig hebben en ga vanaf daar.