Welkom terug in het apparaat ga ik je laten zien een paar andere componenten, waaronder jumbotron en bootstrap formulieren en ingangen.
Maar voordat ik dat doe wil ik een moment nemen om iets dat echt heel belangrijk wanneer we het leren van nieuwe tools zoals deze trant bootstrap aan te pakken.
En in mijn ervaring van het onderwijs mensen om webontwikkelaars word ik heb gemerkt een bootstrap is een van de eerste plaatsen waar een aantal van de studenten beginnen ongemakkelijk ongemakkelijk te voelen en ze het gevoel dat ze niet weten of ze doen en dan, omdat we opeens met inbegrip van een bos van code iemand anders schreef in onze applicatie.
Maar als je een kijkje nemen op de documentatie hier zijn ze echt lang zijn ze uitgebreid wat geweldig is, maar er is veel hier en ik wil dat je dit frame niet als een handleiding die je moet lezen om alles te begrijpen.
Dit is niet zoals een hoe te begeleiden die je moet voltooien voordat we bootstrap gebruiken.
Het is een verwijzing waar als u besluit dat u een formulier dat u kijkt naar de vorm sectie nodig hebt als je een tafel nodig.
U vindt de tabel sectie raken als u een navigatiebalk nodig.
Je kijkt naar de sectie NFR maar het is belangrijk dat u de documenten behandelen als dat je gaat gebruiken ze non-stop terug te komen om hier te verwijzen naar de individuele stukjes code kopiëren van hun code segmenten controleren van een aantal demonstraties lezen van voorbeelden die ik heb gebruikt bootstrap voor jaar op dit punt.
En ik voel me vrij goed over de meeste van.
Maar ik laat de docs open toen ik ben bezig met alles wat met bootstrap.
Ik ben voortdurend verwijzen naar de voorbeelden in een van de heel vroeg video's in deze cursus heb ik gesproken over hoe je een web ontwikkelaar te worden.
Je bent niet steeds een deskundige in memoriseren en in de wetenschap dat ieder stukje informatie.
Ja, je moet dingen weten.
Ja, je moet begrijpen en onthouden wat dingen, maar je bent niet steeds een deskundige of memoriseren.
Je wordt een expert bij de toegang tot informatie.
En sommige van die informatie die u hebt opgeslagen en een heleboel het gaat online documentatie of voorbeelden video's boeken allerlei middelen te zijn.
Oké dus te vatten het hele peptalk.
In principe wil ik gewoon dat je in gedachten houden dat ja, er is veel te bootstrappen houden en je gaat 20 30 procent van het te zien en er is nog veel meer die er zijn.
Maar laat je niet intimideren door dat.
U moet zich comfortabel voelen met de toegang tot documenten als je nodig hebt om iets dat ik u niet te laten zien hoe om te doen.
Open de docs en zoeken.
En er is altijd grote voorbeelden en uitleg over krijgen bootstrap dotcom.
OK dus zonder meer laten we verder gaan om te praten over een aantal van deze belangrijke componenten en ik ga om te beginnen door te laten zien Jumbotron.
Dus een Jumbotron volgens de officiële documenten is een lichtgewicht flexibel onderdeel dat eventueel het hele viewport kan zich uitstrekken tot de presentatie van de belangrijkste inhoud van uw site.
U kunt een voorbeeld van één recht hier te zien en als we willen een Jumbotron gebruiken het is echt heel eenvoudig.
Alles wat we moeten doen is te schrijven div class jumbotron en dan wat we de binnenkant van die zet zal deel uitmaken van de Jumbotron zijn.
Dus laten we proberen dat.
Just do it hieronder knoppen een div met klasse Jumbotron jumbo tron ​​en dan binnen, indien er laten we een H1 of H-1 zal zeggen dat dit een jumbotron en voeg dan een knop in er net zoals ze hier hebben en we zullen voeg een paragraaf ook in onze paragraaf zal gewoon jibberish.
Goed genoeg voor nu.
En een knop en onze knop zal gewoon zeggen hi there.
OK.
En dan een knop hebben we een paar keuzes.
We zullen een knop succes te doen en ik zal het groot te maken en op te slaan.
Laten we eens een kijkje nemen op wat we krijgen.
En er is een Jumbotron je kunt zien dat het duurt tot de gehele breedte van onze browservenster en dat is meestal niet wat we willen.
En wat is er gebeurt is dat de JumboTron is ingesteld om het nemen van 100 procent van welke container het is de binnenkant van.
In dit geval is het niet buiten iets.
Maar binnenkort zal ik laten zien u het net en bootstrap waar we precies kunnen bepalen hoeveel u wilt dat deze tot het nemen van het scherm als u het wilt worden gecentreerd en nemen een derde van het scherm.
Tweederde van het scherm een ​​kwart van het scherm hebben we al deze verschillende keuzes die we kunnen maken door gebruik te maken bootstraps grid-systeem.
Want nu ga ik je laten zien een ander element kunnen we niet in wat een div met klasse gelijk is aan container en wat container zal doen.
Als we gewoon spul binnen van div class container geeft het enige afstand een aantal padding rond het en het geeft voor dingen.
Dus de container vinden inspecteren duurt al deze ruimte hier kun je zien, maar het heeft wel een beetje van de marge op.
Dus als we willen gewoon een snelle verbetering zonder dat het net die we niet over gesproken hebben we div class container kan toevoegen gebruiken en nu krijgen we dit leuk uitziende Jumbotron.
En als we verhuizen deze code die we al naar beneden hebben in de containers goed, maar we zullen niet zet het in de Jumbotron.
Je zult zien dat het nog steeds wordt beïnvloed door die container.
Dus buiten de Jumbotron maar binnen de container op te slaan en te vernieuwen je kunt zien is het ook in die container en het weerspiegelt die visueel.
OK laten we het hoofd terug naar componenten en het volgende ding dat ik zal je laten zien.
We gaan naar de top.
We moeten dan gaan om te zien beoordelen en ik zal je de vormen en hoe die te tonen.
dus klik op formulieren en er is nogal wat verschillende soorten en verschillende voorbeelden.
En ik zal gewoon bladeren door hen eerst voordat we iets typen.
Dus hier is een eenvoudig voorbeeld van een bootstrap vorm.
U kunt de markt die het creëert zien.
Dan hebben we wat bekend staat als een inline-vorm en we hebben een ander type inline vorm en nog een andere met verschillende ingangen en een ander type van de vorm.
Nu deze vertelt over de verschillende soorten formulierbesturing de verschillende ingangen die worden ondersteund.
Dus al deze kleur je bent.
E-nummer week tijd en ga zo maar door tekst gebieden verschillende vakjes met een handicap vakjes uitgeschakeld radio knoppen inline checkboxes inline radio knoppen dropdown menu's selecteert door te gaan naar beneden.
We hebben andere forum Staten.
We hebben een focus staat.
U kunt deze markering rond die blauw zien.
Dat is de standaard bootstrap nadruk styling.
We kunnen ook ingangen uitschakelen door het toevoegen in een handicap en we hebben ook nog een paar andere dingen die we kunnen doen, maar ik ga om terug te gaan en echt richten op de fundamentele exampled start en ik zal beginnen door gewoon het kopiëren van dit hele formulier dan en dan zullen we het ontleden beetje bij beetje.
Dus laten we gaan hier terug en we zullen gewoon dit formulier toevoegen nadat al het andere.
Maar ik zal het doen in de container.
Laat me dit het volledige scherm voor een moment.
We hebben ons formulier en binnen die vorm hebben we nogal wat van de inhoud.
Laten we teruggaan naar de browser en een kijkje nemen op hoe het eruit ziet.
En het eerste wat je zal waarschijnlijk merken is dat onze vorm gaat helemaal over deze container.
Het duurt tot 100 procent van die met en dat is iets wat we in staat zijn te controleren.
Zodra we praten over de bootstrap grid-systeem en zal gemakkelijk in staat te zeggen dat dit zou moeten gaan 50 procent van de weg over.
Dus dat is iets wat we in staat zijn om gemakkelijk te veranderen als we praten over de bootstrap grid-systeem, of we zijn er nog niet gewoon.
Dus we gaan gewoon te gaan met haar.
Het neemt 100 procent voor nu.
Het is een gigantisch vreemd uitziende forum, maar dat is prima.
We vinden het geweldig hoe het is.
Dus we terug naar subliem te gaan en laten we ontleden dit een stuk op een moment.
Dus hebben we een forum tag binnenkant van dat forum tag.
Er is een div class vorm groep en als je meer wilt weten over wat het doet als je terug naar de bootstrap docs te gaan en doe een zoektocht naar vorm groep en je kunt de rap labels en controles in de vorm groep te zien voor een optimale afstand te leren kennen.
Dus als we te ontdoen van die vorm groepsles rond deze eerste en we zullen het doen rond de eerste en tweede u zult zien wat we eindigen met.
Ik zal slaan en te vernieuwen je ziet hoe de afstand verandert hier tussen de ingangen.
Dus we kunnen teruggaan en voeg die vorm groep en dit is echt hoe je het gebruikt waar je een ingang en het label en je wilt dat ze worden gegroepeerd wordt gevormd.
Dus let hier maar een klein beetje ruimte is daar toegevoegd.
Het voegt gewoon een beetje ruimte hier die effectief groepen die twee bij elkaar visueel en vervolgens Grip is deze bij elkaar zowel visueel als deze hier beneden.
Dus dat is vorm groep.
En dan de labels zijn gewoon normaal.
We hoeven niet niets bijzonders te labelen geen Boucek klasse toe te voegen, maar de ingang is er een klasse vorm controle.
Dus laten we eens kijken wat er gebeurt als ik te ontdoen van het.
Dus ik doe het gewoon op de eerste en zet de e-ingang en terug te gaan en te vernieuwen.
Merk op dat deze volledig verandert terug naar een normale standaard browser-ingang.
U hoeft dus niet de afgeronde hoeken te krijgen.
We hebben niet dezelfde vulling en afstand van dingen.
En we hebben ook niet dezelfde focus effect als ik klik we krijgen een blauw overzicht krijgen, maar het is anders dan deze.
De bootstrap outline is een beetje subtieler en dat zijn nog maar het meteen duidelijk visuele veranderingen tussen de twee, maar er is eigenlijk nog meer belangrijke verschillen die je zult zien zodra we het werken met de grid-systeem en de manier waarop ze zich gedragen en interactie met andere elementen.
Zal teruggaan en voeg vorm controle weer.
Dus echt als we wilden dit alles destilleren hier komt neer op formulier Group en de vorm controle.
Deze twee klassen zijn echt verantwoordelijk voor het maken van dingen zien er goed uit.
Nu is er deze paragraaf klasse hulp blok en kunnen we kijken wat we krijgen van die rekening.
Het is deze tekst hier beneden die net geeft een kleine hint van een pointer over een deel van uw formulier en dat spul met de klas hulp blok en dan hebben we onze button hier beneden dat is gewoon een regelmatige Pucelle knop of we hebben tussen A en B hebben de neiging om vallen en we konden het groter of kleiner extra kleine verandering van de kleur net als elke andere knop te maken.
Dus al kun je zien hoe dit is een beetje zoals Lego, waar we een knop Lego die we kunnen toevoegen aan een jumbotron.
We kunnen ook gewoon toegevoegd op zijn eigen, of we kunnen het in plaats toevoegen van een formulier.
Het is gewoon een kleine plug-and-play component die we in kunnen toevoegen aan verschillende onderdelen van onze applicatie.
Dus laten we terug gaan en een kijkje nemen op een ander type van de vorm, die het inline vorm.
Dus dit ziet er iets anders uit.
Als we alleen deze code over kopiëren en we een kijkje nemen met de verschillen, zodat ik die eerste vorm te verlaten en laten we voeg een commentaar in lijn vorm en laten we streepje zaken goed.
Ziet er goed uit.
Merk op dat alles is identiek.
We hebben nog steeds een vorm controle op de ingangen hebben we vorm groep, maar er is één groot verschil.
Alles is binnenkant van een formulier met klasse vorm in lijn zodat één lijn.
Laten we gewoon je laten zien hoe het eruit ziet om te beginnen.
Ik ga terug geeft ons deze mooie in line formulier hier.
En zodra ik ontdoen van die te krijgen en sla het gaat nu terug naar een normale vorm zoals wij hier hebben.
Dus gewoon een klasse bevat alle stijlen die zal controleren of.
Dus we houden als Vorm in de rij.
En opnieuw de afstand is niet ideaal moment.
Dat zal worden opgelost wanneer we het hebben over het net.
Er is nog veel meer dat we konden praten over rond bootstrap vormen.
We kunnen waarschijnlijk doen 30 45 minuten lezing over alleen het bouwen van complexe vormen Bootstrap het leren van de ins en outs van al deze verschillende stukjes en andere dingen die we validaties custom sizing allerlei verschillende stijlen we kunnen werken met u te doen.
Maar ik ben niet van plan om dat te doen.
We hebben de belangrijkste basics bedekt.
Er zijn twee soorten vormen zijn een soort van het brood en boter van Boucek vormen waar we de basis reguliere vorm en vervolgens een inline vorm en er zullen een aantal andere functies in verschillende aspecten van bootstrap dat we gebruiken om de formulieren.
Maar in plaats van te besteden tijd nu en veen je naar beneden over alle ins en outs en de kleine details van Prichep vormen Ik kom net gooien in die kleine stukjes als we ze nodig hebben als we daadwerkelijk gebruikt bootstrap.
Zodat de twee afhaalrestaurants hier over formulieren zou zijn twee klassen die echt belangrijk zijn vorm controle en vorm groepsvorm controle maakt de ingangen Bootstrap verfijnde vorm groep voeg enkele mooie afstand.
Dus wat je in, aldus een vorm groep krijgt een aantal leuke regelafstand en vervolgens enkele klasse vorm dash in de rij.
Als u een formulier verpakken in dat de gehele vorm gaat in de rij.
En dan hebben we ook gesproken over Jumbotron.
Zeer eenvoudige klasse gelijk Jumbotron.
Zo kunt u een peer te zien.
En dan zetten we alles binnen van een container.
En als we te ontdoen van die container om te laten zien wat er gebeurt.
Refresh al die afstand zo leuk marge verdwijnt.
Dus containers leuke manier alleen maar om snel een beetje afstand op uw app maken dingen zien er vrij aardig.
OK dus voordat ik uiteindelijk deze video zal ik 10 seconden besteden toont u een site die we gaan om een ​​applicatie die een volledige back-end database te bouwen aangesloten via knooppunt en te uiten en Mongo en mangoest en een bos van technologieën en we gebruiken bootstrap om de interface prototype te maken het relatief goed uitzien vrij snel en je kunt zien hebben we een Jumbotron hier.
We zijn met behulp van enkele van de knoppen die we gebruiken het net voor dat ik later zal uitleggen.
En dan als ik ga om in te loggen kunt zien hebben we een formulier.
Dus dit zijn vorm controles die ik heb gestyled met behulp van het net, zodat het niet nemen van de gehele breedte van het scherm.
Eerder duurt slechts tot deze kleine middelste gedeelte.
Dus we zullen zien dat als we praten over de grid-systeem.