Witamy z powrotem w tej lekcji pokażę ci, jak zainstalować bootstrap do własnych zastosowań.
A potem gdy już to zrobisz, to ci pokażę niektóre z najważniejszych podstaw za pomocą skoku.
Więc jestem na get bootstrapped dot com tylko na stronie głównej i nie ma tu link do pobrania bootstrap.
I to nie jest tak naprawdę bezpośredni link do pobrania, ponieważ mamy dwa główne wyborów dla sposobu korzystania startowej.
Możemy albo pobrać pliki i zrobię to, aby rozpocząć.
Wtedy możemy podjąć te pliki i dodać je do naszej aplikacji, zanim pójdziemy dalej.
Mam prosty zespół wyszukiwarki będę plik, który Dzwonię podstawowe rzeczy godz DML m l.
A ja po prostu dodać tytuł, a my po prostu dodać w kilku różnych elementów startowej.
Kiedy już go zainstalowanego więc nie uczyni niczego kompleksowe użyjemy go jako plac zabaw dla niektórych podstawowych komponentów startowej.
OK, więc zacznijmy dodając tylko prosty H-1 podstawy bootstrap i oszczędzać.
A potem niech otworzy to w przeglądarce.
Po prostu, że nie teraz.
Teraz zainstalować startowej.
Zrobiłem go pobrać.
Więc jeśli mogę otworzyć ten plik można zobaczyć wewnątrz stąd istnieje kilka różnych składników.
Jest to katalog C S S wewnątrz katalogu CCS istnieje sporo plików, ale tam naprawdę tylko jeden ważny plik, który znajduje się bootstrapped CSSA.
I to jest właściwie ten sam plik tutaj bootstrapped górę minut.
SS wyjątkiem Minęło minut walki został skurczony dół zajmują mniej miejsca.
Więc te dwa są ważne pliki faktycznie korzysta startowej.
I to jest bootstrap tematu Wszystkie trzy z nich są używane, aby pomóc dodać własny motyw do załadowania, więc to nie ma znaczenia, jak dużo.
Wszystko, czego potrzebujemy jest bootstrap Dotsie ocenić.
I zaczniemy po prostu otwierając go, dzięki czemu można zobaczyć, co mamy do pracy z.
Jest to główne bootstraps ponownej ocenie pliku.
To jest po prostu dużo zajęć.
Jeśli spojrzeć na każdej pojedynczej linii CSSA prawie to klasa deklaracja dot prostu.
A potem, co możemy zrobić, to korzystać z tych klas zamiast naszych aplikacji.
Więc jeśli chcemy mieć przycisk z białym tekstem i czerwonym tle mamy zamiar zastosować przycisk dot niebezpieczeństwo.
I to właśnie jest to tutaj robi.
Ale niebezpieczeństwo jest biały tekst na czerwonym tle i obramowanie czerwonawy.
Więc śmiało i informuje o tym w naszej aplikacji tak samo jak każdy inny plik CSSA.
Więc co zrobię to po prostu przeciągnij go tutaj w tym samym katalogu, w którym mam swój podstawowy zespół badawczy na zewnątrz i mogłem też zrobić bootstrapped górę minut ponownej zamiast tego.
To naprawdę nie ma znaczenia.
Technicznie ten ładuje się trochę szybciej, bo gdybym go otworzyć widać to jako jeden gigantyczny linii wszystkie białe znaki zostały usunięte.
Dlatego łatwiej jest załadować ale zamierzam korzystać z tej dłuższej wersji tak, że można zobaczyć dokładnie to, co pracujesz.
Teraz mamy zamiar udać się do naszego rzeczywistego pliku tutaj będę tego zamknąć w dół i mamy zamiar to bootstrapped się CSX.
Tak jak każdy inny arkusz stylów musimy połączony znacznik i Tref jest bootstrap dot C Ss i jeśli możemy zaoszczędzić i mamy świeże naszą stronę tutaj można zauważyć niewielką różnicę.
Oglądaj czcionkę o tym H-1.
To się zmienia.
Mamy teraz bootstrap instalowane lub przynajmniej C Ss, które idzie w parze z bootstrap i to wszystko, czego potrzebujemy teraz.
Nie będzie pracować z javascript po prostu jeszcze nie ma innej opcji instalacji bootstrap, że rzeczywiście daję wam w Get bootstrap stronie internetowej tutaj.
Bootstrap CDN możemy ten link tu i dodać, że do naszego kodu.
I to jest link do obsługiwanej wersji tego samego pliku.
Więc jeśli otworzymy, że w przeglądarce i wklej, że widać, że ma zawartość zminimalizowanym pliku i jest obsługiwany w tym u R L, dzięki czemu możemy po prostu link do że RL więc mogę zastąpić.
Kolejnym ogniwem.
Tag i wklejanie, że jesteś Ellen i będę komentować ten jeden.
Na razie i wrócić i odświeżyć.
I nic się nie zmienia.
Jedyną różnicą jest to, że w pierwszym przypadku mieliśmy plik pobrany na naszym komputerze, które łączyły się i w drugim przypadku mamy do linkami do zewnętrznego pliku, który jest gospodarzem on-line.
Teraz chodźmy do docs bootstrap i rozpocząć odtwarzanie wokół lub niektóre z tych składników.
Więc wrócić dostać bootstrap i niech kliknij Css, a ja po prostu się podkreślić niektóre z ważniejszych elementów, które będziemy używać.
Więc zacznijmy proste z przyciskami.
Jeśli chcemy użyć przycisku wszystko, co musimy zrobić, to użyć pobity klasę następnie rodzaj przycisku, który znajduje się pomiędzy domyślnie, które dadzą nam biały przycisk, ale to też VTAM informacji podstawowym dostępu BATNA.
Ostrzeżenie niebezpieczeństwo oraz link i wszystkie są urządzone nieco inaczej.
I oczywiście możemy zmienić te kolory na własną rękę, ale będziemy po prostu użyć wbudowanego raz, aby rozpocząć i S można też zobaczyć tutaj.
Nie trzeba używać tylko element przycisku możemy użyć znacznika zakotwiczenia przycisk lub wejście.
Więc spróbujmy to.
Witam H-1.
Załóżmy, wystarczy dodać w tagu przycisk i przycisk ten tagi prostu powiedzieć kliknij mnie i po prostu odświeżyć stronę już teraz i spójrz na to.
To Przycisk dość brzydki.
Ale jeśli mamy iść i dodać tej klasy PTEN a następnie między zróbmy sukces i zapisać możemy teraz dostać ten wspaniały zielony przycisk.
Dlatego dość łatwo dostać się kilka podstawowych stylów dzieje.
I wróćmy a pokażę ci kilka innych rzeczy na temat przycisków, które są różnej wielkości, które możemy wykorzystać, jak również i to naprawdę łatwe.
Po prostu trzeba dodać dowolny przycisk duży i mały przycisk lub dodatkowa mała, więc to starał się po przycisku sukcesu i nie musi iść po niej.
Nie ma znaczenia kolejność klas, ale zrobię to po tu DTN i zróbmy dodatkowe małe i odświeżyć stronę.
No to jedziemy.
Będę przenieść tego na teraz i dodajmy jeszcze kilka przycisków, ale ten będzie tag kotwicy i będzie w znaczniku lub mamy HF równa DP slash dwukropek ukośnik, że czytać każdy dzień dostać bootstrap com kropka, a następnie tekst będzie po prostu powiedzieć bootstrap docs.
Tak aby ten trochę większy, a następnie doda w klasie w klasie musi być równa PTEN i zróbmy pomiędzy informacją Desch i sprawi, że duża PTEN kreska Elgie i odświeżyć.
Teraz mamy dwa przyciski.
Jednym z nich jest rzeczywista elementem przycisku.
Kolejny ma znacznik zakotwiczenia i jeśli kliknę to można zobaczyć go jako znacznik zakotwiczenia.
Tak więc już w pierwszej minucie użyciu bootstrap byliśmy w stanie uzyskać przyzwoitych wyglądających przycisków.
zajęłoby 10 do 15 linii CSSA na własną rękę do replikacji.
Chodźmy teraz z powrotem.
Dodać do tego pełny ekran ponownie i pokażę ci kilka innych rzeczy o przycisków.
Mamy więc rozmiary.
Mamy też różne stany, gdzie możemy dokonać Przycisk pojawia się jakby to aktywna i do zrobienia, że ​​wystarczy dodać aktywną klasę.
Tak więc, jeśli spróbujemy to teraz niech dodaj Kilka Przycisk więc będę powielać nasz mały miniaturowy Click Me przycisk trzy razy, a na ostatniej jednej na środku jednej klasy aktywnego i odświeżyć i można zobaczyć, z nadzieją, że pojawia się wystarczająco dobrze na ekranie oddać, że ten pojawia się aktywny.
Wróćmy możemy również wyłączyć przycisk, dodając w tym atrybucie.
Wyłączone równa wyłączone.
Wróćmy i pozwól na wyłączenie ostatniego odświeżenia.
A teraz ten przycisk jest wyłączony.
Dostajemy tak ładne małą ikonę.
To nie ma wpływu aktywowanych gdzie zmienia kolor dłużej.
To wyraźnie przycisk wyłączone.
Wielki Ostatnią rzeczą, pokażę Ci więc możemy ponownie zmienić kolory tak Przycisk niebezpieczeństwo noc daje nam, że czerwono-pomarańczowy i można zobaczyć wszystkie kolory tutaj.
I oczywiście można zmienić te poprzez zastępowanie style więc można zrobić coś takiego, zamiast dokonać innego arkusza stylów.
Ja po prostu zrobić to tutaj teraz.
Więc po prostu zrobić jedną linię, a także jak piękno i zagrożenia.
Możemy zmienić kolor na pomarańczowo, a teraz może być zagrożenie dla Texas pomarańczowo i gdybym chciał, aby rzeczywiście zmienić tło mogłem zrobić tło jest pomarańczowe i to w jaki sposób można wejść i zastąpić style, dzięki czemu nie trzeba wykorzystać to, co daje ci bootstrap po wyjęciu z pudełka.
A większość miejsc nie.
OK, więc to przyciski i to wszystko mam zamiar zrobić w tym filmie.
Chciałem tylko dać bardzo szybki smak dzieł jak startowej.
Ten wzór dodawanie klas do istniejących elementów i tych klas, które są zdefiniowane w tym pliku bootstrap CSSA w następnym filmie będę podkreślić kilka innych ważnych elementów, które pochodzą z bootstrap w tym formy i wejść.