Witamy z powrotem w tej jednostce mam zamiar pokazać wam kilka innych komponentów, takich jumbotron i form bootstrap i wejść.
Ale zanim to zrobię, że chcę poświęcić chwilę, by zająć coś, co jest naprawdę bardzo ważne, gdy mamy do uczenia się nowych narzędzi, takich jak ten jak bootstrap.
A z mojego doświadczenia ludzi dydaktycznych stać developerzy Zauważyłem bootstrap jest jednym z pierwszych miejsc, gdzie niektórzy z uczniów zacznie odczuwać niepokój niewygodne i czują się jak nie wiem, czy oni robią, a potem z powodu my nagle w tym kilka kodów ktoś inny napisał do naszej aplikacji.
Ale jeśli spojrzeć na docs tutaj są naprawdę długo są one wyczerpujące, który jest wielki, ale jest tam wiele tutaj i chcę, żebyś do klatki to nie jako podręcznik, który trzeba czytać, aby zrozumieć wszystko.
To nie jest jak jak przewodnik, który trzeba zakończyć, zanim użyjemy bootstrap.
Jest to odniesienie, gdzie jeśli zdecydujesz trzeba formę obejrzysz części formularza, jeśli chcesz stolik.
trafisz sekcji Tabela jeśli potrzebujesz pasku nawigacyjnym.
Wyglądasz na odcinku NFR, ale ważne jest, że można traktować docs jak to będzie ich używania non-stop wraca tu odwołujących poszczególnych bitów kodu kopiowania ich segmenty kodu sprawdzić niektóre pokazy czytania przykłady Używam bootstrapped dla roku w tym momencie.
I czuję się całkiem dobrze większość z nich.
Ale zostawiam docs otwarte, gdy pracuję nad czymś z bootstrap.
Ciągle przedstawieniu przykładów w jednym z bardzo wczesnych filmów, w tym oczywiście rozmawiałem o tym, jak stać się web developer.
Nie stajesz się ekspertem w zapamiętywaniu i wiedząc co nieco informacji.
Tak trzeba wiedzieć rzeczy.
Tak trzeba zrozumieć i zapamiętać pewne rzeczy, ale nie jesteś staje się ekspertem i zapamiętywania.
Stajesz się ekspertem w dostępie do informacji.
A niektóre z tych informacji nie będzie zapamiętane i dużo to będzie online w dokumentacji lub przykłady filmów książek wszelkiego rodzaju zasobów.
Dobrze więc, aby podsumować całą rozmowę pep.
Zasadniczo po prostu chcę, aby pamiętać, że tak jest dużo załadowania i masz zamiar zobaczyć 20 30 procent to i jest wiele więcej tam.
Ale nie daj się zastraszyć tym.
Powinieneś czuć dostępu do dokumentacji, jeśli trzeba coś zrobić, że nie pokazać, jak to zrobić.
Otwórz docs i szukać.
I zawsze świetne przykłady i wyjaśnienia dotyczące dostać bootstrapped DOTCOM.
OK, tak więc bez zbędnych ceregieli przejdźmy do rozmowy o niektórych z tych ważnych elementów i mam zamiar zacząć od pokazujące Jumbotron.
Więc Jumbotron według oficjalnych docs to lekki elastyczny element, który można opcjonalnie rozszerzyć całą rzutnię do zaprezentowania kluczową treści na swojej stronie.
Można zobaczyć przykład jednego tu i jeśli chcemy użyć Jumbotron to naprawdę bardzo proste.
Wszystko, co musimy zrobić, to napisać div class jumbotron a potem cokolwiek umieścić wewnątrz, która będzie częścią Jumbotron.
Warto więc spróbować.
Po prostu zrób to poniżej przyciski będą mieć div z klasą Jumbotron jumbo tron, a następnie wewnątrz jeśli zróbmy to H1 lub H-1 będzie powiedzieć, że jest to jumbotron a następnie dodać przycisk tam tak samo jak oni mają tutaj a my dodaj ustępie oraz w naszym ustępie będzie tylko jibberish.
wystarczająco dobre do teraz.
Oraz przycisk i nasz przycisk będzie po prostu powiedzieć cześć tam.
OK.
A następnie przycisk mamy kilka możliwości.
Zrobimy sukces przycisk i będę sprawiają, że duże i oszczędzać.
Rzućmy okiem na to, co otrzymujemy.
I nie ma Jumbotron widać, że zajmuje całą szerokość naszego okna przeglądarki i nie jest zwykle to, co chcemy.
A co się dzieje jest to, że JumboTron jest skonfigurowany do objęcia 100 procent, co pojemnik jest wewnątrz.
W tym przypadku nie jest to poza wszystkim.
Ale wkrótce będę pokazujące konstrukcję nośną i bootstrap, gdzie możemy dokładnie kontrolować, ile chcesz to potrwać ekranu, jeśli ma to być skupione i zajmują jedną trzecią ekranu.
Dwie trzecie ekranie ćwierć ekranu mamy te wszystkie różne opcje możemy dokonać za pomocą siłach sieci energetycznej.
Na razie mam zamiar pokazać inny element nie możemy, w którym jest div z klasą równej pojemnika i jakiego pojemnika zrobi.
Jeśli po prostu umieścić materiał wewnątrz pojemnika div class daje on pewne odstępy jakąś wyściółkę wokół niego i ośrodki rzeczy.
Więc pojemnik znaleźć skontrolować zajmuje całą tę przestrzeń tutaj można zobaczyć, ale ma sporo marginesu na nim.
Więc jeśli chcemy tylko szybką poprawę, bez konieczności korzystania z systemu siatki, które nie mówiły o możemy dodać div kontenera klasy, a teraz mamy ten miły patrząc Jumbotron.
A jeśli poruszamy ten kod, że mamy już w dół do pojemników dobrze, ale nie będzie można umieścić go wewnątrz Jumbotron.
Zobaczysz, że nadal zależy od tego kontenera.
Więc poza Jumbotron ale wewnątrz pojemnika zapisać i odświeżyć widać to także wewnątrz tego kontenera i odzwierciedla wizualnie.
OK, niech wrócić do części i następną rzeczą, że ci pokażę.
Idziemy na górę.
Musimy iść na drugą zobaczyć oceny i pokażę ci, jak i formy tych prac.
Więc kliknij na formularzach i tam sporo różnych typów i różnych przykładów.
A ja po prostu przewinąć nimi zanim my nic pisać.
Więc tutaj jest podstawowym przykładem postaci bootstrap.
Widać, że rynek tworzy go.
Następnie mamy to, co jest znane jako forma inline i mamy inny rodzaj formularza inline i jeszcze jeden z różnymi typami wejść i innego rodzaju formy.
A teraz mówi się o wszystkim inny typ postaci kontroluje różne rodzaje wejść, które są obsługiwane.
Więc wszystkie te barwy jesteś.
Numer email tydzień czasu i tak dalej pól tekstowych różne Pola wyboru pola wyboru Wyłączone Wyłączone Pola wyboru przycisków radiowych inline inline przyciski radiowe rozwijane menu wybiera iść dalej w dół.
Mamy Inne Forum członkowskim.
Mamy stan ostrości.
Widać to podświetlenie wokół tego błękitu.
To jest domyślny bootstrap ostrości stylizacji.
Możemy również wyłączyć wejść poprzez dodanie niepełnosprawnych i mamy też kilka innych rzeczy możemy zrobić, ale mam zamiar wrócić i naprawdę skupić się na podstawowej przykładowa początku i zacznę po prostu kopiując całą tę formę ponad, a my go wnikliwie kawałek po kawałku.
Więc wróćmy tu i musimy po prostu dodać tę formę po wszystkim.
Ale zrobię to wewnątrz pojemnika.
Pozwól mi zrobić to pełny ekran na chwilę.
Mamy formularz, a wewnątrz tej postaci mamy sporo treści.
Wróćmy do przeglądarki i przyjrzeć się jak to wygląda.
I pierwszą rzeczą będzie zauważyć, że nasza forma idzie całą drogę w poprzek tego kontenera.
Zajmuje 100 procent, że przy i że coś będziemy w stanie kontrolować.
Gdy mówimy o bootstrap systemu sieci i łatwo będzie w stanie powiedzieć, to powinno przejść 50 procent całej sposób.
Więc to jest coś, będziemy mogli łatwo zmieniać raz mówimy o bootstrap systemu sieci lub nie jesteśmy tam jeszcze.
Więc po prostu pójdzie z nim.
Zajmuje 100 procent do teraz.
To gigantyczna dziwne Forum patrząc ale to jest w porządku.
Kochamy go, jak to jest.
Więc wracamy do wzniosłości i niech wnikliwie ten jeden kawałek na raz.
Mamy więc tag forum wewnątrz tego znacznika forum.
Istnieje grupa formą div class, a jeśli chcesz wiedzieć więcej o tym, co robi, że jeśli wrócę do docs bootstrap i nie szukaj grupie formy i można zobaczyć etykiety rap i kontroli w grupie forma dla optymalnego odstępu.
Więc jeśli pozbędziemy się tej klasy grupy formą wokół tej pierwszej i zrobimy to po pierwszym i drugim zobaczysz co skończy się.
Będę zapisywać i odświeżać zobaczyć, jak zmienia się tutaj odstęp między tymi wejściami.
Tak więc możemy wrócić i dodać tę grupę formularz, a to jest naprawdę, jak go używać, gdzie masz wejście i etykietę i chcesz, żeby być grupowane są tworzone.
Więc zwrócić uwagę właśnie tu tylko trochę przestrzeni dodaje tam.
To tylko dodaje odrobinę miejsca tu co skutecznie Grupy te dwa razem wizualnie i następnie Grip jest to razem wizualnie, jak i tych na dole.
Więc to grupa formie.
A potem etykiety są po prostu normalne.
Nie mamy ochotę coś dodać do etykiety bez klasy Boucek ale wejście jest kontrola formularza klasy.
Zobaczmy więc, co się dzieje, kiedy się go pozbyć.
Więc ja po prostu zrobić to na pierwszym i umieścić wkład email i wrócić i odświeżyć.
Zauważ, że ten całkowicie zmienia się z powrotem do normalnego wejścia domyślną przeglądarką.
Więc nie uzyskać zaokrąglone narożniki.
Nie mamy ten sam wyściółkę i odstępy rzeczy.
I my również nie uzyskać ten sam efekt ogniskowania po kliknięciu robimy uzyskać niebieski kontur ale inny niż ten.
Bootstrap Zarys jest trochę bardziej subtelny i to są tylko od razu widoczne zmiany wizualne między nimi, ale jest rzeczywiście kilka istotnych różnic, które musisz zobaczyć raz mamy pracy z sieci energetycznej oraz sposób, w jaki zachowują się i współdziałać z innymi elementy.
Będzie wrócić i dodać kontrolę formularz ponownie.
Tak naprawdę, jeśli chcieliśmy destylować to wszystko sprowadza się tu do grupy forma i kontrolki formularza.
Te dwie klasy są naprawdę odpowiedzialni za wszystko wygląda dobrze.
Teraz jest ten akapit klasy pomóc w zablokowaniu i możemy spojrzeć na to, co się z tym.
To ten tekst tutaj które po prostu daje dla was podpowiedź wskaźnika o części swojej formie i tej rzeczy z bloku klasy pomocy, a następnie mamy przycisk na dole, która jest po prostu zwykły przycisk Pucelle lub mamy między A i B mają tendencję do spaść i mogliśmy zrobić to większy lub mniejszy dodatkowa niewielka zmiana koloru, tak jak każdy inny przycisk.
Więc już można zobaczyć, jak to jest trochę jak Legos gdzie mamy Lego przycisku, który możemy dodać do jumbotron.
Możemy też po prostu dodaje się w postaci własnej lub możemy dodać go zamiast formularza.
To tylko mała wtyczka i element gry, które możemy dodać do różnych części naszej aplikacji.
Warto więc wrócić i przyjrzeć jednego innego rodzaju postaci, która jest formą inline.
Tak to wygląda nieco inaczej.
Jeśli wystarczy skopiować ten kod nad i spojrzeć z różnicami więc zostawię ten pierwszy formularz i dodajmy komentarz tutaj w postaci linii i niech wcięcia rzeczy prawidłowo.
Wygląda dobrze.
Należy zauważyć, że wszystko jest identyczne.
Nadal mamy kontrolę formularza na wejściach mamy grupę formie, ale jest jedna wielka różnica.
Wszystko jest wewnątrz formularza z klasy w postaci linii tak, że jedna linia.
Miejmy tylko pokazać, jak to wygląda na początek.
Wracam daje nam ten miły w postaci linii tutaj.
I tak szybko, jak pozbyć się tego i zapisać go teraz wraca do normalnej postaci, jak my tu mamy.
Tak tylko jedna klasa zawiera wszystkie style, które będą sterować tym.
Więc będziemy trzymać go jako postać w kolejce.
I znowu odstęp nie jest teraz idealna.
Który zostanie ustalony, gdy mówimy o sieci energetycznej.
Jest dużo bardziej możemy mówić o całym formy startowej.
Mogliśmy prawdopodobnie zrobić wykład 30 45 minut na tylko na budowaniu złożonych form ładowania początkowego nauki tajniki wszystkich tych różnych elementów i różnych rzeczy, które możemy zrobić walidacji niestandardowej zaklejające wszelkiego rodzaju różnych stylów możemy pracują.
Ale ja nie zamierzam tego robić.
Omówiliśmy ważne podstawy.
Są dwa rodzaje form są trochę chleba i masła form Boucek gdzie mamy podstawową regularne formularza, a następnie formularz inline i tam będzie kilka innych funkcji w różnych aspektach bootstrap, że używamy wokół formy.
Ale zamiast spędzać czas teraz i bagien Cię na wszystkie tajniki i drobnych detali form PRICHEP Ja po prostu rzucać się w tych małych kawałków, gdy ich potrzebujemy, gdy jesteśmy rzeczywiście przy startowej.
Więc dwa dania na wynos tutaj o formach byłyby dwie klasy, które są naprawdę ważne, kontrola formularza i forma kontrola formularza grupa sprawia wejścia ładowania początkowego rafinowany Grupa forma wystarczy dodać jakieś fajne odstępy.
Więc cokolwiek umieścić we wspomnianym grupa forma dostaje jakieś fajne odstępy, a następnie jedną klasę formularz kreskę w kolejce.
Jeśli owinąć formę, że cała forma idzie w parze.
A potem rozmawialiśmy także o Jumbotron.
Bardzo prosta klasa równa Jumbotron.
Więc widać peer.
A potem umieścić wszystko wewnątrz pojemnika.
A jeśli pozbędziemy się tego pojemnika, aby pokazać, co się dzieje.
Odśwież wszystkie te odstępy miłe margines odchodzi.
Więc pojemniki dobry sposób, żeby uzyskać szybki trochę odstępu w aplikacji, aby wszystko wygląda dość miłe.
OK, więc zanim skończę ten film Spędzę 10 sekund pokazując miejsca, które mamy zamiar zbudować aplikację, która posiada pełną bazę końcową tylną podłączonego za pomocą węzła i wyrażania i Mongo i mangusta i kilka technologii i używamy bootstrap prototyp interfejsu, aby dość szybko wyglądają dość dobrze i widać, że mamy Jumbotron tutaj.
Używamy niektórych przycisków używamy systemu sieci, które wytłumaczę później.
A potem, jeśli pójdę do logowania widać mamy formę.
Więc to są kontrolki formularzy, że mam urządzone przy użyciu systemu siatki tak, że nie zajmuje całą szerokość ekranu.
Raczej trzeba tylko ten mały punkt środkowy.
Więc widzimy, że kiedy mówimy o sieci energetycznej.