Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Więc przywitaj się każdy, kto ogląda tutaj,
lub oglądania on-line, jak i zdalnie.
Nazywam się Neel, to CS50.
A dzisiejsze seminarium jest Responsive Web Design z Bootstrap.
Jest to temat, który jest bardzo bliskie mojemu sercu.
Mam nadzieję, że będzie to blisko serca
oraz do końca dzisiejszego seminarium.
Więc Bootstrap.
Jak wielu z was zrobili żadnej rodzaj rozwoju sieci wcześniej?
Dobrym ilość?
Trochę.
>> Więc Bootstrap jest największym na świecie popularne, ramy front-end.
Jest używany by-- wybrałem Kilka losowych websites--
Lyft, Newsweek i Vogue.
Jest używany przez wielu stronach internetowych.
Jest to ramy, projektowanie stron internetowych, które pozwoli Ci dokonać stron internetowych
zarówno piękne i elastyczne.
A ja pójdę na nich dwa pojęcia tutaj.
Pięknie.
Więc masz normalną stronę w z lewej, który jest przez tylko HTML.
Nauczyłeś HTML w klasie oraz w punkcie na długości.
Bootstrap to sposób na zarabianie Twoje strony piękna.
Możesz wziąć to, co jest na lewej stronie ekranu
i przekształcić go w to, co jest na prawa strona ekranu z bardzo,
bardzo, bardzo mało kodu.
>> Masz piękny niebieski przycisk, pojawi się wyobraźnia, zaokrąglone krawędzie na ekranie,
pojawi się widok listy, można uzyskać Karty, a więc na bardzo małą kodu.
Jest rzeczywiście nie CSS, które musisz napisać samemu.
Więc Bootstrap pozwala na mają te gotowych CSS
Elementy, które można umieścić wewnątrz swojej stronie internetowej
aby wyglądać pięknie bez bardzo dużo pracy na własną rękę.
To naprawdę bootstrap, punktem wyjścia,
dla swoich przygodach tworzenie stron internetowych.
I tak, gdy jesteś po prostu szyderczy strony internetowej,
jest to bardzo dobre miejsce, aby rozpocząć.
Można uzyskać dobre szuka stronie z bardzo, bardzo mało pracy.
I rzeczywiście, mamy zamiar to zrobić sami
w trakcie jak pięć minutes-- w ciągu 10 minut.
Więc jest to dość łatwe do zrobić kilka świetnych stron internetowych.
Więc to jest pierwsza część.
>> Drugi part-- reaguje.
Ludzie w dzisiejszych czasach, nie tylko dostęp do sieci na laptopach.
Faktycznie, od roku 2014 więcej osób dostęp do sieci za pośrednictwem urządzeń mobilnych,
jak telefony lub tabletek, lub usługi lub tak dalej, niż stron internetowych.
I strony internetowe są tradycyjnie zaprojektowany z laptopów i komputerów stacjonarnych
w umyśle.
I tak, na stronach internetowych często nie są Bardzo dobrze nadaje się do telefonu.
Jeśli kiedykolwiek odwiedził harvard.edu w telefonie,
to trochę irytujące doświadczenie, prawda?
To dlatego, że to nie reaguje.
Staramy się, aby strony internetowe, które są elastyczne,
że odpowiedzi na rozmiarach ekranu ludzi.
>> Więc, czy jest to telefon, to pójdzie na telefon.
Jeśli jest to tabletka, to pójdzie na tablecie.
To reguluje dopasować ekran, który jest używany.
I tak Bootstrap również niektóre Bardzo, bardzo przydatnych narzędzi do tego.
I będziemy dyskutować, że dobrze.
Ponownie więc, istnieją dwie części Bootstrap-- piękne i odpowiedzialne.
Mamy zamiar rozmawiać o tym.
Po pierwsze, piękne.
I wtedy reagować.
>> Tak więc cały kod, że jesteśmy porozmawiamy o today--
będziemy mieć wiele przykładów, wiele wyzwań, a więc on-- niego
wszystkie mieszka na tej stronie tutaj.
Ten slajd jest to, co wysłaliśmy.
Więc jeśli tu jesteś, możesz czuć się za darmo, aby nie napisać, że w dół.
A jeśli oglądanie zdalnie, czuć swobodnie wyciągnąć to się na komputerze
równie dobrze.
Prawdopodobnie będziesz potrzebował go w czasie Podczas tego seminarium.
>> Tak więc mamy zamiar użyć strona nazywa CodePen,
która jest wspólnym kodowanie środowiska, w tym seminarium.
I CodePen-- i będę pokazać tutaj prawdziwe fast--
to pozwala na pisanie HTML wspólnie.
Mogę napisać, mogę wysłać go do chłopaki, chłopaki mogą ją edytować.
Nawet jeśli jesteś pilot, ciebie nadal może uzyskać dostęp do tego w ten sposób.
Możesz wpisać kod HTML u góry i będziesz automatycznie
można przekształcić w pochodną strona na dole.
Tak więc jest to sposób dla Ciebie szybko wypróbować kod
bez konieczności wykonywania jakichkolwiek rzeczy na IDE, lub własnej stronie internetowej,
lub cokolwiek.
>> Więc idź i podciągnąć to strona internetowa, jeśli jesteś zdalnego
lub jeśli jesteś tutaj, zwłaszcza jeśli jesteś zdalnego.
is.gd/cs50boostrap.
Brak czapki, bez podkreślenia, nie ma nic.
Tak więc ci, którzy są , po prostu daj mi kciuki
się, gdy ciągnęły do tej strony.
Dobry?
>> PUBLICZNOŚCI: Tak.
>> NEEL Mehta: Więc my się się, że w ciągu sekundy.
Więc po pierwsze, mamy zamiar dostać się do, jak robicie Twoje strony piękna?
Mamy zamiar nauczyć się jak robić nudne, Stary HTML, jak pokazałem wcześniej,
i kolei, że w bardzo ładne elementy,
jak ładne wzory, ładne, kolorowe przyciski i etykiety i tabele,
a wszystko za pomocą Bootstrap.
Więc jeśli moglibyśmy przejść do CodePen, który właśnie zatrzymał się.
Powinno to wyglądać trochę tak.
To wygląda to dla każdego?
>> PUBLICZNOŚCI: Tak.
>> NEEL Mehta: Jeśli pilot, to powinien wyglądać tak, jak dobrze.
Jeśli nie, pokażę ci szybko, jak można dostać to wyglądać tak
w kolejnej części filmu.
Więc tutaj pisaliśmy bardzo prosty HTML,
jak rodzaj masz używa w klasie.
Jest to dość proste.
Bez dodatków.
I mamy kilka rzeczy.
Stworzyliśmy bardzo, bardzo proste uruchomienie
zadzwoń Yalp! z którymi można znaleźć restauracje w okolicy,
i znaleźć recenzji Wskazówki na temat wszystkich tych.
Jest to bardzo dobry pomysł.
To nigdy nie zostało zrobione wcześniej.
To bardzo unikalna nazwa, też.
>> Więc co mamy zamiar spróbować zrobić, to pomóc się z właścicielem
z Yalp! aby na jego stronie internetowej wyglądają naprawdę, naprawdę fajne.
Więc na początek, właściciela Yalp! dokonał trochę wyszukiwanie
okno, a mały przycisk, a następnie może trochę
Podświetlony obszar dla Podświetlona restauracja, a następnie
lista innych restauracji które znajdują się w okolicy.
Więc może po prostu przejść przez kod HTML naprawdę szybko.
Jak wygodne są chłopaki z HTML?
Zrobiliśmy trochę sekcja, a także w klasie.
Przyzwoity?
>> Więc po prostu jako Przypomnę, HTML jest o konieczności
tagi lub elementy, które mówią Komputer jak rozłożyć stronę internetową.
Więc to h1 here-- rozpocząć h1, Witamy do Yalp !, koniec h1-- mówi komputerowi,
narysuj duży nagłówek to mówi: Witamy Yalp!
wewnątrz znajduje.
Mamy również formy.
Możemy wejść tak, wejścia tekstowych, które będzie świadczyć, jak pola tekstowe
piszesz.
Masz również przyciski.
Masz ładne, można kliknąć przycisk.
To nic nie robi w prawo teraz, ale pojawi się przycisk.
Możesz mieć div lub przegród, do zerwać swoją stronę na różne grupy.
>> Możesz mieć akapity, masz przyciski.
Jeśli masz akapity, a następnie masz nieuporządkowane listy, ul,
i listy wewnątrz tej Li.
Tak więc są to bardzo proste budulcem stronie internetowej.
I rzeczywiście, prawie każdej stronie widzisz
ma być zbudowane za pomocą tych samych narzędzi.
Oczywiście, nie wszyscy wygląda to źle, bo jesteśmy
zamiar urozmaicić go trochę.
Więc ten nudny stary HTML i początek przekształcenie go w pięknym miejscu
że po prostu widziałem kilka minut temu.
>> Więc zacznijmy od bardzo prosta.
Tak więc mamy tutaj ten przycisk.
W Bootstrap, jak widzieliśmy, możemy mają ładny, piękny, niebieski przycisk.
I to nie odbywa się przez działanie niestandardowe CSS.
Nie ma zwyczaju CSS tutaj.
Możemy tego dokonać poprzez dodanie klas do elementów HTML.
Jeśli wypróbowałeś klasach, lub HREF, lub kotwice, lub type = "text" dla inputs--
Elementy HTML może mieć te atrybuty.
Mogą one mieć dodatkowe informacje że może im dać.
>> I tak w tym przypadku, Zajęcia są atrybutem.
Więc chcesz pisać, klasa przycisk = coś w środku ciągów.
I to atrybut powie komputer, to nie występuje, old przycisk.
Jest to przycisk, który znajduje się w ta klasa przycisków.
I tak Bootstrap, jeśli dasz go pewien styl na elemencie,
będzie go zwrócić w określony sposób.
Więc piszę "btn btn-podstawowa.
btn będący skrótem od przycisku.
Zauważysz, że teraz Przycisk zwrócił moja brzydka
w ładny, piękny, niebieski przycisk.
To wygląda bardzo ładnie, gdy go kliknąć.
>> A więc to, co się dzieje, mamy Klasa btn a klasa btn-podstawowa
na naszej elementu.
Bootstrap i wejdzie i powiedzieć: OK, wiedzieć, że istnieją te dwa zajęcia.
Każdy element, który ma te dwa Zajęcia powinny być sporządzone w ten sposób.
Więc to jest rdzeń, jak dołączyć style do elementów Bootstrap.
Wystarczy dołączyć do nich i zajęcia będzie ważyć go według własnego uznania.
Więc oto inny przykład.
Na wejściu, możemy dodać a class = "form-control".
I pokażę niebawem, w którym można dowiedzieć się, jakie zajęcia
są dostępne z każdego rodzaju elementu.
Ale klasa, że po prostu Dodany ma ładne, zaokrąglone narożniki,
ma ładne dopełnienie, ma ładny, niebieski blask do niego.
>> Możemy również przejść do formularza.
A class = "form-inline", który sprawi, nasza forma, jak można sobie wyobrazić, inline.
Więc wygląda to trochę więcej jak to, co mieliśmy wcześniej już.
Więc zanim udamy się do stylu reszty strona, wszelkie pytania o tym, co
zrobili?
My po prostu dołączone zajęcia do naszych różnych elementów.
A ja pokażę ci później, jak to tylko możliwe dowiedzieć się, jakie są dostępne klasy.
Mamy dołączony klas, które mają pewne style.
I to mówi przeglądarce jak układ strony przy użyciu
Przewidziane style Bootstrap jest.
Wszelkie pytania od publiczności?
>> Dobry do tej pory?
Fajne.
Wiele wyzwań z Bootstrap jest tylko
wiedząc, jakie składniki są dostępne i jak z nich korzystać.
I to wszystko nauczyłem z doświadczeniem, a także
poprzez czytanie dokumentacji, które będziemy rozmawiać o szybko.
Więc mamy ten div.
To jest po prostu nudne, stare rzeczy.
Chcemy podkreślić, to jakoś.
Tak więc w ładowalna, istnieją Wiele dostępnych komponentów.
I to jest getbootstrap.com.
Jest to bardzo użyteczne odniesienia.
Zawiera rzeczy like-- Oto jak to zrobić przycisk.
I można zrobić nav bary, można Etykiety można paski postępu,
możesz zrobić grupy list.
W zasadzie, to wszystkie rodzaje o można zobaczyć stronę internetową.
>> Oto jeden, że spróbujemy teraz.
To się nazywa panel.
Jeśli kiedykolwiek korzystać z Google Teraz mają karty.
Lub innego urządzenia Android ma karty.
Mają małe białe pola które mają rzeczy w jej wnętrzu.
I tak mamy zamiar spróbować zrobić że sami się tutaj używając rzeczy
nazywa się panel.
Więc jeśli przywiązujemy class = "Panel Panel-default "do naszej zewnętrznej div,
potem dołączyć div class = - niech po prostu sprawdzić tę dokumentację.
div class = "Panel-nagłówek" i następnie div class = "Panele-ciało".
Ponownie, nie martw się o zapamiętywanie ten kod.
Będzie on dostępny w Internecie.
>> Więc zrobiliśmy to i teraz nasze nudne, stare div zmienił się ten miły, trochę kart.
Ma ładne dopełnienie go, ma granic, to wyróżnia się
od pozostałej części strony co jest całkiem fajne.
Warto więc iść i zmienić Pobierz Przycisk kierunki ładnie wyglądać.
Kto z publiczności chce powiedzieć mi co mogę zrobić, aby przycisk
aby wyglądać dobrze przy użyciu Bootstrap?
Tak?
>> PUBLICZNOŚCI: Moglibyśmy dodać klasę.
I możemy zrobić class = "btn btn-podstawowej".
NEEL Mehta: Tak.
Istnieje kilka innych kolory dostępne dla buttons--
lub cokolwiek, o to chodzi.
Możemy zrobić btn-niebezpieczeństwo i sprawiają, że czerwony.
No to jedziemy.
Możemy zrobić btn-sukces, aby zielone.
Możemy zrobić btn-info-- istnieje kilka rzeczy, które są dostępne dla Ciebie.
Więc mam trochę wyzwanie dla ciebie.
Więc jest jeszcze jedna rzecz, że zostawiłem un stylu.
Ten najwyższej restauracje.
>> A my chcemy korzystać z rzeczy nazywa grupę z listy, aby go tytułować.
Więc moje wyzwanie dla Ciebie jest przejść do getbootstrap.com--
Będę wyciągnąć go tutaj.
getboostrap.com.
Idź do getbootstrap.com, znaleźć punkt, gdzie idą *** grupami lista.
A zobaczysz tutaj przykładem i odpowiednich klas
że można użyć, aby Państwa wykazy do tych miłych grup listy.
Są one opracowane przykłady przykładów kodu, co
Kod używasz, co kod HTML używać, i co, że wyprowadza.
>> Więc moje wyzwanie you-- iść na getbootstrap.com,
czy jesteś tutaj, czy w domu, a spróbować i dodać style do tego ul
aby wyglądać ładnie.
I użyć stylu grupy lista.
Chcesz wziąć kilka minut, i poszukaj w dokumentacji,
spróbuj to sobie?
Bo jak robisz tworzenie stron internetowych, zdasz sobie sprawę, dużo pracy
będzie czytanie ta dokumentacja.
Więc myślę, że dobrze jest zapoznać się z jak czytać dokumentację,
jak dowiedzieć się, co, gdzie, jaki kod przykłady można użyć,
co można wykorzystać.
>> Więc jeszcze raz, getbootstrap.com, przejdź do zakładki Składniki
a następnie przejść do listy grup.
I zobaczysz, przykłady kodu, który można użyć, aby Twoje HTML pasuje to.
Więc potrwać kilka minut, spróbować i zbadać go samodzielnie,
czy jesteś tutaj lub w domu.
Jeśli jesteś w domu, zatrzymać wideo, może i spróbować samemu.
Jeśli jesteś tu, jeśli się do naszego website-- jeśli odśwież stronę,
zobaczysz to na nie.
Ten sam kod jest po prostu dodając nowe style tam.
Więc potrwać kilka minut.
Daj mi znać, kiedy czujesz się dobrze o tym czy, kiedy jesteś całkowicie utracone.
Brzmi dobrze?
Fajne.
Szybkie przeznaczoną dla tych z was, w domu, a my czekamy,
jeśli pójdziesz do serwisu GitHub że kładę się kilka zjeżdżalnie temu
do początku filmu, Mam repo GitHub, repozytorium,
do tej rozmowy.
Wszystkie te przykłady kodu, które będziemy mówisz przechowywane są tutaj.
Więc jeśli go kwestionować-1.html, to jest cały kod, który mamy teraz
na naszej CodePen.
Więc może po prostu iść do przodu, a następnie skopiować to i wkleić go w swoim własnym CodePen.
I w ten sposób, można ***ążyć z tego, co tutaj robimy.
Więc mają otwarte strony równie dobrze jak my przejść przez resztę seminarium.
Ponownie, chcesz to wyglądać jak to, co patrz w dół, na dole ekranu
tam.
Czuję się dobrze?
Solidny.
Poczekajmy do każdego innego celu skończyć z tym, co robią.
>> Tak?
>> PUBLICZNOŚCI: Załóżmy, że chcę użycie Bootstrap w home--
NEEL Mehta: Tak.
PUBLICZNOŚCI: widzę, na stronie internetowej, Pierwsze kroki str.
Dają mi opcje Bootstrap, kod źródłowy lub Sass.
Które z nich chcę?
>> NEEL Mehta: Tak.
Więc pytanie jest, jak masz zaczął używać Bootstrap przez nas samych?
To właśnie się dzieje, magicznie działa tutaj.
Więc jeśli mamy czas, w koniec seminarium,
Pokażę ci, jak to tylko możliwe dostać go na własnej stronie internetowej.
Jak tutaj, nie mam właściwie umieścić w niektórych ustawień, które
będzie miał automatycznie załadowany, ale będę
pokazać to zrobić z zarysować na własnych stronach internetowych.
>> PUBLICZNOŚCI: Dziękuję.
>> NEEL Mehta: Tak.
Dobre pytanie.
Czuję się dobrze?
Czuję się dobrze?
Fajne.
Więc kto chce mi powiedzieć, w jaki sposób wykonane to coś wygląda ładnie i Boostrappy?
Jaka jest pierwsza klasa dodamy do ul?
PUBLICZNOŚCI: class = "list-grupa".
NEEL Mehta: Tak. lista-grupa.
A potem co nam dołączyć do LIS?
Ktoś inny?
PUBLICZNOŚCI: A potem, po że class = "list-grupa-punkt".
>> NEEL Mehta: Tak.
>> PUBLICZNOŚCI: I to jest to same dla następnego.
>> NEEL Mehta: li class = "list-grupa-punkt".
Proszę bardzo.
Mamy piękny listy grupę, tak jak się spodziewałem.
Więc pójdziesz.
W 10 minut, zrobiliśmy to nudne, stare Yalp! strona
wyglądają ładnie i profesjonalnie.
A to dopiero początek.
Więc teraz, że czujesz dobrze o tym, niech
po prostu iść do przodu i mówić o jeszcze kilka elementów, które
Może się przydać, jak ty przejść całej przygody.
>> Oczywiście, nie jest ci dużo tutaj.
A teraz, gdy już nauczyliśmy jak zrobić grup list,
można bardzo dużo nauczyć się, jak to zrobić żadnej z nich.
Ale, oczywiście, niech po prostu spróbować i zrobić kilka bardziej siebie,
tylko tak można poczuć jak można ich używać.
Idę tylko iść w tym przykład.
Ponownie, kod, który po prostu wklejone tutaj jest dostępna tutaj.
Dlatego zachęcamy, aby pociągnąć go do góry.
>> Więc mamy już za sobą kilka z tych przykładów.
Więc mamy przyciski, które Widzieliśmy już, jak to zrobić.
Możemy zrobić przyciski większe.
Poprzez przycisk class-- idzie, btn btn-lg i btn-default sprawia, że białe.
Więc to sprawia, że nasz przycisk większe nie może być inaczej.
To może się przydać, jeśli masz duża złożyć przycisku lub coś.
Widzieliśmy na przykładzie grupy lista, widzieliśmy na przykładzie formularz.
>> Jednym z nich jest bardzo ważne ikony.
A ikony są sposobem na dodawanie ciekawe rzeczy, takie jak check
znaki lub plusy, lub przyjaciela ikony, lub ikony restart,
lub cokolwiek do aplikacji internetowej.
Więc jeszcze raz, jeśli się tu, składników, glyphicons,
Ikony są dostępne dla Bootstrap.
Jest to wyczerpujący Lista wszystkich tutaj nich.
Tak więc, tak jak na przykład, spróbujmy dodać.
>> Więc jak Facebook, jesteśmy do prób mieć przycisk Dodaj znajomego.
Niech najpierw dodać trochę stylu.
Klasa przycisk = "btn btn-sukcesu".
A tam idziemy.
Dodajmy ikonę tutaj.
Co ikona, myślisz, może mieć sens, aby umieścić tutaj?
Prawdopodobnie widziałeś na Niektóre strony internetowe czy cokolwiek,
ale co to przykład ikony, które może pójść dobrze wewnątrz tego przycisku?
Zachęcamy do zapoznania się ten pogląd, jeśli potrzebujesz inspiracji.
Istnieje wiele przydatnych te tutaj.
Tak?
>> PUBLICZNOŚCI: Może jeden użytkownik glyphicon?
NEEL Mehta: OK.
Ten.
To dość dobre.
Tak.
Na Facebooku, myślę, że to będzie wyglądać trochę tak.
Więc oto jak pójdziemy na temat dodanie ikony na naszych stronach.
Po prostu mają span-- przęsło jest Pojemnik na coś neutralnego.
Div jest pojemnik na coś, przęsło jest inny pojemnik.
DIV mają podziały wiersza wokół nich, przęsła nie.
Więc nie ma różne sposoby o pojemniki generycznych.
Jak to nie ma sensu, aby umieścić go wewnątrz ust lub cokolwiek.
Musimy ją umieścić w środku coś jakby,
więc po prostu umieścić w środku rozpiętości.
Więc span class = glyphicon glyphicon-user "blisko rozpiętość.
A teraz mamy ikony wewnątrz przycisku.
>> Więc to nie wygląda zupełnie inaczej niż co można zobaczyć na facebook.com.
I tak miło, że mogą one rzeczywiście być umieszczony w dowolnym miejscu.
W swoich barów nagłówka, w grupach lista.
Cokolwiek.
Nie muszą być wewnątrz przycisku.
Tak na przykład, mogę umieścić tutaj tę samą klasę.
"glyphicon glyphicon-user".
I wydaje się tak samo.
Więc to icons-- można użyć rozpiętości class = "glyphicon glyphicon-co".
A to pozwoli Ci dodać Ikony gdzie chcesz.
I ikony są bardzo ważne część dokonywania wygląd strony internetowej
profesjonalny i dobrze zrobione.
Więc nie przesadzaj, ale to często dobrze wiedzieć.
>> Płyty ponownie.
Ja po prostu to zrobić ponownie jako Przypomnę ponieważ są one rodzajem zaangażowanych.
Zauważysz, że w obracając normalne HTML
strona w bootstrap-afied strony, musisz
aby dodać dodatkowe struktury na stronie internetowej.
Na przykład, mamy dodatkowe DIV tu tylko dlatego, że ci,
są potrzebne do panelu.
Więc po prostu miej to na uwadze, że musisz mieć dodatkową strukturę.
Więc "domyślny panel-panel".
Może to panel-header.
Myślę, że to panel-nagłówek.
Tak.
No to jedziemy.
Tak, znowu, nie jest naszym panelu.
>> Jeszcze jedna rzecz, że czy jeszcze nie pokrywają, tabele.
Tabele domyślnie rodzaju wygląd brzydki.
Jak to.
Ale tabele są, oczywiście, bardzo ważnym elementem
z tego, co będziesz robić w tworzeniu stron internetowych.
W Pset7, na przykład CS50 Finanse, która ukaże się niebawem,
będziesz korzystać z wielu tabel.
I wiele internetowej dev używać dużo tabel do wyświetlania informacji,
jak akcje, lub ocenę, czy cokolwiek innego.
>> Więc stylizacji tabel jest w rzeczywistości bardzo proste.
Możesz dodać klasę tabeli do tabeli.
I śmiem twierdzić, że wygląda całkiem ładnie.
Możesz robić dodatkowych rzeczy, jak "stół paski".
I zobaczysz wyniki tutaj.
Możesz zrobić stół obwódką.
Istnieje wiele opcji można.
Ale w zasadzie dodanie Stół, klasa tabela
sprawi, że tabele wyglądają całkiem ładnie.
Więc to Krótkie podsumowanie niektóre z ważniejszych stylów
i komponenty, które będziesz należy użyć dla Bootstrap.
Więc myślę, że okłady się naszej pięknej części.
Wszelkie pytania w tej chwili o tym, jak aby Twoje strony piękna?
Jak można z nich korzystać Składniki na swoją korzyść?
Czuję się dobrze?
Tak?
PUBLICZNOŚCI: Może to to głupie pytanie,
ale można użyć Bootstrap na Wikipedii?
Jeśli edytujesz stronę w Wikipedii?
NEEL Mehta: Tak.
Więc pytanie było, jestem Edytujesz stronę Wikipedii,
Mogę to style Bootstrap tam?
>> PUBLICZNOŚCI: Tak.
>> NEEL Mehta: I tak Bootstrap jest w zasadzie duży arkusz stylów CSS.
Arkusz stylów CSS mówi tylko, gdy Mam tę klasę, należy dołączyć te style.
Więc arkusza stylów CSS dla Bootstrap będzie coś .btn,
klasa przycisk, będzie jak zaokrąglony narożnik granicy lub cokolwiek.
Więc w zasadzie, bootstrapu go tylko kilka klas i kilka stylów
określone dla tych klas.
Tak długo, jak masz to CSS, ta lista zasad w swoją stronę,
otrzymasz stylizacji Bootstrap.
Oznacza to, oczywiście, zależne o style Bootstrap w Twojej stronie
najpierw.
>> I tak w Wikipedii, prawdopodobnie nie mógł
zrobić, bo Wikipedia Bootstrap nie ma w nim.
Ale jeśli to nie mają Bootstrap, można chyba zrobić.
A gdybyś chciał, mógłbyś obejmują, ale które mogą
przełamać istniejący układ strony.
Ale bardzo dobre pytanie.
Możesz użyć Bootstrap wszędzie tam, gdzie to jest wliczone w cenę,
ale to nie jest budowane domyślnie.
>> PUBLICZNOŚCI: Dziękuję.
>> NEEL Mehta: Tak.
Jeszcze jakieś pytania?
Tak.
Tak więc, czy jesteś tu, czy w domu, pamiętaj tylko getboostrap.com-- znowu,
getboostrap.com-- jest twoim przyjacielem.
Zawsze, gdy używasz Bootstrap, to daje
instrukcje o tym, jak dostać się rozpoczęciu jak używać składników.
Jest trochę chłodno JavaScript wtyczki, że nie będziemy go tutaj,
ale to warto sprawdzić, jak również.
Więc to jest twój przyjaciel.
To jest po prostu ważne, aby uzyskać stosuje się, jak używać.
>> Warto więc porozmawiać trochę o co reagujących stron internetowych.
Tak jak powiedziałem wcześniej, ludzie ich laptopy, używają swoich telefonów.
I jak można sobie wyobrazić, to jest zupełnie inny niż rozmiar ekranu.
I tak samo strona że wygląda dobrze na moim telefonie
nie będzie dobrze wyglądać, jest to konieczne, za pomocą komputera.
Więc co trzeba zrobić, to twoja strona dostosować.
To musi dostosować się do różnych Ekran wielkości, że to jest na.
>> To ma do powiedzenia, wiem, że jestem na komputer, duży laptop, należy poszerzyć.
Wiem, że jestem na telefonie, mam skurczy.
I tak Bootstrap zapewnia pewne Bardzo, bardzo przydatnych narzędzi, aby to zrobić.
Więc Bootstrap niech Ci przerwę strona 12 kolumn.
Możesz tworzyć wiersze i ma 12 kolumn.
I można podzielić tych, jednak chcesz.
Możesz mieć jedną, wielką rzecz, Kolumny, które jest 12 szerokości.
Możesz mieć dwie rzeczy które są po sześć.
Możesz zrobić jedną rzecz, która jest cztery, jeden to dwa, lub taki, który jest sześć.
Możesz zrobić trzy, trzy, trzy, trzy.
Możesz robić, co Podział, który chcesz.
>> Więc może twoja strona musi mieć Lewa kolumna to jedną trzecią szerokości.
Tak, że będzie cztery kolumny Szeroki reszta strony
będzie szeroka osiem kolumn.
Więc to jest przykład.
Miejmy podciągnąć inny przykład.
>> PUBLICZNOŚCI: Czy to zawsze trzeba być nawet podzielić?
Może to być siedem, pięć rozłamu?
>> NEEL Mehta: Tak.
To może być siedem, pięć.
Tak.
Tak długo, jak dodaje do 12, to w porządku.
Więc wróćmy tutaj.
Ponownie, kod, który jest tutaj dostępny jest również tutaj,
pod czułe przykład.
Więc po prostu zatrzymał się niektóre Przykładem reaguje kod tutaj.
Więc można to zrobić za pomocą coś o nazwie wiersz.
Wiersz jest po prostu inna klasa.
To inny styl dodać na swoim div, aby uczynić z nich swoje własne komponenty.
>> Więc można powiedzieć, dz class = "wiersz" do wiersza,
dać sobie 12 kolumn przestrzeni.
A następnie umieścić kolumny wewnątrz to.
Tak oto my col-xs-6.
Nie martw się o xs.
Porozmawiamy w sek.
Ale w zasadzie, mamy jeden rzecz, która jest sześć szerokości.
Nazywamy to w lewo.
I tak to jest z lewej pole tutaj.
Mamy jedną rzecz, która jest sześć z szerokimi 12 kolumn.
I że jest po prawej stronie.
>> No po prostu daje marek Twój div wypełnić go na szaro.
Tak, że tylko tak możemy zobaczyć, że są one różne.
A więc pierwszy przykład.
Jest to bardzo prosty przykład, w jaki sposób będzie korzystać z wierszy i kolumn tutaj.
Zdefiniować wiersz używając class = "wiersz".
A potem zrobić class = "Col-XS-6" zrobić połowę, "Col-XS-6" zrobić drugą połowę.
Oto bardziej skomplikowany przykład.
Spójrzmy na Tiny, Ogromne, Reszta jeden.
>> Możemy wykonać szeroki Tiny dwie kolumny, możemy szeroki Ogromne sześć kolumn,
A reszta cztery szerokości kolumny.
Które dodaje się do 12.
I tak to skończyć obejmujących szerokość strony.
Znów mamy wiersz zewnątrz.
Następnie mamy div class = "Col-XS-2" i 6, a następnie 4.
I że zapewni struktura dla nas.
I tak możemy umieścić cokolwiek do cholery chcemy wewnątrz tutaj.
Zamiast Tiny, możemy umieścić przycisk.
Klasa przycisk = "btn btn-podstawowej".
A więc zauważyć, że nasz przycisk nie zajmuje całą szerokość,
ale przynajmniej jest to ograniczone do tego wiele przestrzeni.
>> Więc to jest wszystko dobrze.
Więc teraz możemy rozbić nasz internecie Strona na kawałki, szerokość mądry.
Można powiedzieć, chcemy mieć w lewo kolumna, a prawa kolumna, i tak dalej.
Ale nie przeszły jak zrobić to reaguje.
I tak Bootstrap zróbmy, że dobrze.
Ma te rzeczy zwane punkty przerwania.
Więc ma możliwości dowiedzenia się, czy jesteś na laptopie, jesteś na tablicy,
jesteś na poziomej telefonu, lub jesteś na telefon w pionie.
Wie, rozmiar ekranu.
I łamie to na cztery kategorie-- duże lub lg, który jest laptopów, zwykle.
md i średnia, która jest w tabletki.
sm, mały.
Lub xs, bardzo małe.
I tak, gdy podasz kolumna, można powiedzieć,
powinien być szeroki sześć kolumn na dodatkowym małym urządzeniu.
Dlatego zrobiliśmy Col-XS-6.
Mówimy, że powinien za sześć z 12 kolumn szerokich
na dodatkowym małym urządzeniu.
A jeśli to coś większego, musimy po prostu domyślnie wykorzystywać dodatkowy mały rozmiar.
Jeśli jest to coś większego niż dodatkowa mała, to będzie sześć szerokości.
I tak możemy wykorzystać to, aby z naszych kolumn
podjąć inną ilość Kolumny oparte na wielkości ekranu.
Chodźmy do tego czuły zmiany rozmiaru.
Mamy więc nasze kolumny.
I mówi: "kol-lg-6 kol-xs-12".
Tak więc biorąc pod uwagę to, co wiesz, do tej pory, co prawda
myślę będzie stało na dużym ekranie?
Cóż, jest to swego rodzaju biorąc pod uwagę sposób, ale co zrobić,
myślisz, że to będzie wyglądać jak na dużym ekranie?
A czemu to?
>> PUBLICZNOŚCI: Czy to, że na dużym ekranie, to
będzie tylko wziąć część pełnej przestrzeni?
Podobnie jak połowa tego, myślę?
>> NEEL Mehta: Tak.
>> PUBLICZNOŚCI: A na mniejsze ekran, to będzie
podjąć cały ekran, 12.
NEEL Mehta: Tak.
Dobrze.
Tak na przykład, niech wystarczy spojrzeć na dół.
Tak.
Więc na nic, że jest lg lub bigger-- więc mój komputer się dzieje
do lg, bo to dość wide-- to zrobi
boczna to siebie, bo to kol-lg-6.
Tak, ponieważ jest on duży, to sprawia, że sześć kolumn szerokie i szerokie sześć kolumn.
Zobaczmy, co się stanie, jeśli uczynić to na mniejszy.
Idę tylko do nie-pełnym ekranie tym.
I mam zamiar zmniejszyć ekran.
Mam zamiar zmniejszyć ekran, więc Wygląda na to, jestem na mniejszym urządzeniu.
Więc mam zamiar kurczyć to tak.
>> I voila.
To jest teraz ułożone bo teraz przeszliśmy
z dużym to-- to prawdopodobnie dodatkowy mały rozmiar ekranu.
I tak się teraz mówi, OK, nie jesteśmy w dużych, jesteśmy w dodatkowym małym kraju.
Tak więc mamy zamiar używać dodatkowy mały rozmiar.
I będziemy XS-12, XS-12.
Więc to będzie być ułożone.
I po prostu zauważyć, że istnieje coś o nazwie punkt przerwania.
Punkt przerwania gdzie dokonane przejście
z dodatkowych małych i małych, małe i duże, i tak dalej.
>> Więc po prostu zauważyć, że jak ja wsunąć się, w końcu, można dostać się do punktu
gdzie oni skakać być obok siebie.
Proszę bardzo.
Więc jest punkt przerwania tam.
Tak więc możemy zrobić to jeszcze bardziej skomplikowana.
Teraz możemy powiedzieć, te rzeczy powinny być cztery szerokości.
To znaczy, że powinny zajmują około jednej trzeciej
mowy na bardzo dużych urządzeń.
Na średniej urządzenia, powinna podjąć się pół ekranu, bo to MD-6.
W bardzo małego urządzenia, powinna trwać 12.
I tak wygląda to całkiem naturalne.
Spróbujmy to się dla nas samych.
>> Więc na dużym ekranie, są cztery szerokie.
Shrink to trochę.
A oni są teraz sześć szerokości.
Więc to jest sześć, sześć, sześć.
Skurczy się jeszcze bardziej, a następnie będą one całkowicie ułożone.
Tak więc w tym, na przykład, ma sens wtedy masz kart, takich jak karty informacyjne,
na przykład w przypadku, gdy to jest na bardzo dużym ekranie,
to OK, jeśli masz kilka obok siebie bo oni wszyscy się wystarczająco dużo miejsca.
Ale muszą mieć wystarczająco dużo miejsca.
Tak na mniejszym ekranie że chcesz dać im
więcej miejsca, proporcjonalnie, strony.
>> Więc jako przykład świata rzeczywistego, powiedzmy, że mamy Twitter.
I mamy pole tekstowe, więc można tweet na stronie.
I mamy listę trendów tematy z prawej strony.
Więc na dużym ekranie, powinniśmy mają im być obok siebie,
więc można zobaczyć je w szklance.
Ale mniejszą ekranu powinniśmy zrobić, 12 i 12,
tak, że tematy Trendy są poniżej obszaru tweet.
Ponieważ obszar tweet jest Najważniejsze i na małym ekranie,
Trendy tematy nie względu na to, aż tak dużo.
I tak możemy umieścić je tuż poniżej, więc że mogą zarówno dostać wystarczająco dużo miejsca.
Sensu tak daleko?
>> PUBLICZNOŚCI: Tak.
>> NEEL Mehta: Ciało stałe.
Więc to wszystko przykłady Mam tutaj.
Spróbujmy zrobić wyzwanie.
Więc jeszcze raz, to jest wyzwaniem-2.html dla tych z Was, stosując się w domu.
Więc mój kumpel, Mark Zuckerberg, przyszedł do mnie na drugi dzień.
I jak, Neel, mam zdobyć całkiem dobry w projektowaniu stron internetowych.
Mogę zrobić HTML.
Zrobiłem ten mały, Nowa edycja Facebook.
Mam nowy pomysł na jaki powinniśmy tytułować Facebooka.
I oto jest.
Dokładnie tutaj.
Oto niektóre przykładowy kod.
Tak to się nazywa Fancybook.
>> Mamy pewne aktualizacje statusu.
Mamy Nemo, Mike Kosowski, ***-- trzy aktualizacje statusu.
A potem mamy listę internetowych znajomych tuż pod nią.
Więc on zrobił swoje zadanie domowe.
On wie trochę o Bootstrap, on się widok listy,
zrobił trochę HTML.
Więc on ma stronę internetową.
Ale on jest jak, Neel, ja nie rozumiem czułe projekt w ogóle.
Czy masz jakieś ekspertów, którzy może mi pomóc z tym?
I na szczęście, jesteś teraz Eksperci w czuły projektu.
>> Więc co on powiedział mi, że on chce Fancybook wyglądać tak.
W bardzo małego urządzenia, jak telefon, wszystko
powinny być ułożone, tak jak tutaj.
Więc masz na osi czasu góry, do góry, a następnie
powinieneś mieć czat pasek na dole.
Lecz na tabletkę lub na nośniku Urządzenie powinno być pół na pół,
jak na osi czasu powinien być połowa i lista znajomych na czacie
Należy mieć na drugiej połowie.
>> Następnie na laptopie, na osi czasu powinien trwać trzy czwarte
a następnie zabezpieczenie czat powinien podjąć kolejną jedną czwartą.
I tak jak Neel, mam to kod tutaj, ale to nie reaguje.
Trzeba zachowywać się w ten sposób.
Więc moje wyzwanie dla Ciebie jest podany ten kod here--
jeśli odświeżyć CodePens, zobaczysz to.
Lub jeśli po prostu wkleić w kod na wyzwanie-2, musisz to zobaczyć.
>> Oto kod ten przykład.
Zobaczysz kilka XXXS.
Chcę, żebyś zmienić XXXS, takie, że harmonogram i lista przyjaciół
Wynika z tego widowisko tutaj.
Nie martw się o to, co jest wewnątrz osi czasu do teraz.
Zajmiemy się tym w następnym kroku.
Ale na razie, zobaczymy, czy mamy te rzeczy, aby podzielić go tak.
Więc czy to ma sens?
Więc jeśli jesteś w domu, zatrzymać odtwarzanie i spróbuj
aby swoją stronę wyglądają reaguje tak.
Jeśli jesteś tu, weź jak dwie, trzy minuty.
Zapraszam do rozmowy z sąsiadem, i spróbuj i naprawić pan Zuckerberga
reaguje problem projektowania.
Jeśli masz jakieś pytania, nie wahaj się dać mi znać.
Czuję się dobrze?
Gotowe?
Miły.
>> PUBLICZNOŚCI: [niesłyszalne].
NEEL Mehta: Co?
>> PUBLICZNOŚCI: Jestem dobry.
>> NEEL Mehta: Och, dobrze.
Miły.
PUBLICZNOŚCI: Rzecz o 12, to jest, że Bootstrap
traktuje danego miejsca na ekranie jako 12 jednostki, a następnie co dzieli, że się?
Jak dokładnie działa dozowania pracy dla tego?
>> NEEL Mehta: Tak.
Więc pytanie jest, w jaki sposób robi dozowanie
pracować dla Bootstrap, prawda?
>> PUBLICZNOŚCI: Tak.
NEEL Mehta: Więc kiedy masz div class = "wiersz",
nie ważne jak duży ekran jest, Bootstrap daje 12 jednostek
z tego samego rozmiaru podjęcia tego zbyt wiele miejsca.
Więc w kol 1, to zawsze 8,33% wielkości ekranu
czy to jest szeroka lub, że to jest szeroki.
I tak, oczywiście, na mniejsze Ekran, każda kolumna jest mniejszy.
Masz jeszcze 12 kolumn szeroki, jest to mniejsza.
Więc to do ciebie, aby upewnić się, że rzeczy zajmują więcej kolumnę,
proporcjonalnie do wyrównania z tego powodu braku przestrzeni.
Czy to ma sens?
>> PUBLICZNOŚCI: Tak.
Dziękuję.
NEEL Mehta: Dobre pytanie.
PUBLICZNOŚCI: Na duże ekranem, można mieć
oś czasu zajmują trzy czwarte?
>> NEEL Mehta: Tak.
NEEL Mehta: Jak faceci uczucie?
Dobry?
Fajne.
Warto więc wrócić.
I spróbujmy rozwiązać ten udział strony internetowej pana Zuckerberga.
Tak więc terminy są tutaj, w góry, a lista przyjaciół
znajduje się w dole.
A więc po prostu należy przypisać kolumny, z wielkości proporcjonalne,
w każdym z nich.
Więc ten pierwszy *** jest na osi czasu.
Jakie zajęcia mamy umieścić tutaj?
Czego faceci umieścić tutaj?
Więc pamiętaj, na dużym ekranie, to musi podjąć trzy czwarte szerokości.
I co z tego stylu nie daje, że?
Na dużym ekranie, trzy czwarte szerokości.
Jakie klasy mamy tam używać?
PUBLICZNOŚCI: Więc jesteśmy po prostu będzie edycji tej pierwszej instancji klasy.
NEEL Mehta: Na razie.
Tak.
>> PUBLICZNOŚCI: Nie jesteśmy edycji każda, indywidualna cecha osi czasu?
NEEL Mehta: Nie teraz, przynajmniej.
Więc cała ta sprawa jest blok.
Jesteśmy po prostu zmieniając Projektowanie bloku.
Więc tutaj mamy col-lg-9, bo to Dziewięć z 12 szerokości na dużym ekranie.
A potem na średnim ekranie, ile kolumn powinienem dostać?
PUBLICZNOŚCI: To ma być pół na pół.
NEEL Mehta: Racja.
Więc, ile to jest?
>> PUBLICZNOŚCI: Więc sześć.
NEEL Mehta: Six.
A następnie powinno być: ekstra małe, jeśli to zajmuje całą szerokość rzędu
Ile powinno być?
PUBLICZNOŚCI: 12.
NEEL Mehta: 12.
Tak.
A teraz musimy zmienić inne te,
tak, że zajmuje pozostałą część tej przestrzeni.
Więc kol-lg--
PUBLICZNOŚCI: To będzie zajmują cały ekran?
NEEL Mehta: To zajmuje czwartą ekranu w dużym urządzeniu
jak pokazaliśmy tutaj.
>> PUBLICZNOŚCI: Trzy.
>> NEEL Mehta: Trzy.
I wtedy kol-MD-6 do podjęcia resztę przestrzeni.
Col-XS-12.
Więc teraz mamy na osi czasu podejmowania trzy czwarte
strony na dużym ekranie a następnie jedna czwarta na stronie.
A potem, jeśli rozmiar ekranu w dół, należy odpowiednio zmienić.
Więc teraz to ułożone, w bardzo małym ekranie.
A jeśli dopasuje go trochę, powinny one być dokładnie pół na pół.
Tak zrobiliśmy, że do tej pory.
Bardzo fajny.
A więc nie zrobi Druga część wyzwania.
Możesz to zrobić samemu.
Ale w zasadzie, trzeba spróbować zrobić to reaguje
jak well-- dokonać na osi czasu przedmioty, sami, elastyczne.
Więc teraz mamy przeszedł wszystko, co musisz wiedzieć
o czułe stronie startowej.
Wszelkie pytania dotyczące reaguje konstrukcja z Bootstrap
i jak można się do tego zabrać?
Tak?
>> PUBLICZNOŚCI: Czy to jest podobne, jeśli mieliśmy klipu wideo
i chcieliśmy kontrolować Skala w którym was-- video
rozmiar wideo począwszy od laptopa do telefonu.
NEEL Mehta: Tak.
Mniej więcej.
Trzeba powiedzieć wideo do zajmują wiele miejsca, jak to jest podane,
co jest trochę irytujące czasami.
Jednak ideą jest taka sama.
Wideo, jak każdy inny obiekt w strona, jak przycisk czy cokolwiek innego,
tak długo, jak używać kolumny i wiersze,
można nadać mu pewna ilość przestrzeni.
I tak coraz to uczcić, że jest inna kwestia, bo jak YouTube
osadza mają pewną, preferowany rozmiar.
Ale teoretycznie najmniej, że to działa.
Fajne?
>> PUBLICZNOŚCI: Myślę, że to, na zdjęcie, czy rzeczywiście
trzeba mieć różne wersje ten sam obraz w różnych rozmiarach
do laptopa kontra iPhone?
Tak Pytanie brzmi, czy musimy mają obrazy, które są elastyczne, jak również.
I rzeczywiście, można to zrobić.
Myślę, że to w CSS.
Ale Bootstrap pozwala można to zrobić również.
Możesz mieć reagujących obrazów.
Możesz mieć swoje zdjęcia rozmiaru w zależności od wielkości strony.
I jest to bardzo nowa rzecz HTML5, najnowsza wersja HTML,
i CSS3, najnowszy wersja CSS, które
pozwoli zwrócić różne obrazy w zależności od wielkości ekranu jesteś w.
Zazwyczaj jest to na tyle dobrze, aby tylko mieć swój wizerunek tak, aby zmniejszyć lub rosną
jednak duża musi być.
Ale może, jeśli chcesz się, masz 32 32
dla bardzo małych ekranów i 64 o 64 o dużym ekranie,
a następnie służyć tym selektywnie.
Możesz to zrobić.
Zrobione przez niektórych ludzi.
To wciąż dość ostrze.
Ale krótka odpowiedź, reaguje images-- Bootstrap można zapisać dzień tam.
Fajne?
>> PUBLICZNOŚCI: Dziękuję.
>> NEEL Mehta: Więc niech mówić naprawdę szybko, jak
aby to we własnej strony internetowej.
Powiedzmy, że chcesz aby Twój własną stronę internetową za pomocą Bootstrap.
A więc niech po prostu po prostu przejść przez to razem.
Powiedzmy, że aby tak normalna strona HTML.
Zapraszam do podążać w bez względu na swój ulubiony edytor jest.
Więc po prostu mieć trochę stronę HTML.
Możemy to zrobić! DOCTYPE html.
Jest to również html, nasza strona.
Nic nowego.
Robiliśmy to już wcześniej.
Więc tutaj mamy HTML i możemy umieścić rzeczy w środku tutaj.
Możemy mieć nasz przycisk.
I tak jak powiedziałem wcześniej, niekoniecznie będzie działać.
Dlaczego nie może to działać?
Dlaczego nie możemy dostać nasze ładne, kolorowe przycisk?
>> PUBLICZNOŚCI: Ponieważ nie połączyć go do projektu Bootstrap lub pliku?
NEEL Mehta: Tak.
Poprawny.
Ponieważ Bootstrap-- to tylko wyobraźnia plik CSS.
Jest to seria stylów są przymocowane do elementów.
Tutaj Powiedziałam jej, że my Aby korzystać z tych stylów.
Rozmiar, że będę się trochę.
Powiedzieliśmy to chcemy użyć te style, ale nigdy nie
powiedział to, co style.
A to, co się Pytanie od wcześniej był.
To odpowiedź na to.
Musimy znaleźć sposób, aby uzyskać style i uwzględnić je w naszej stronie w jakiś sposób.
I tak Bootstrap wola pokazują nam, jak to zrobić.
>> Więc jeśli pójdziesz na górę tutaj, Pierwsze kroki.
Nie ma sposobów, aby go pobrać.
To może nie sensu niekoniecznie.
Bootstrap-- to pozwoli chwycić sam plik CSS.
I włączyła ją do własnej strony.
Kod źródłowy jest, jeśli chcesz włamać się na nim samodzielnie.
Nie musisz tego naprawdę.
Sass jest językiem które zestawia w CSS.
Pomyśl o tym jak o preprocesora.
Podobnie jak PHP jest preprocesor z HTML, Sass jest preprocesor dla CSS.
Więc jeśli chcesz to zrobić w ten sposób, można to zrobić.
>> Najprostszym sposobem jest użycie CDN, lub treści Delivery Network.
Jest to strona, która po prostu serwuje kopię Bootstrap
bardzo szybka do to w swoim własnym stronie.
Tak oto przykład.
To da Ci ten element łącza.
Element Link informuje przeglądarkę, podjąć wszelkie pliki są przechowywane tutaj
i umieścić go w naszej stronie internetowej.
I w tym przypadku jest plik CSS Bootstrap.
Więc po prostu skopiować ten adres URL, lub ten tekst, a my go wrzucić do środka
naszej głowie.
>> A ja nie uruchamia stronę dla tego, ale można zaufać, że to działa.
Link będzie Ci CSS.
Obejmują go w Strona, a następnie będziesz
w stanie wykorzystać wszystkie Bootstrap Klasy, które znasz i kochasz.
Jeśli chcesz zachować lokalnie i masz go na swoim systemie plików
zamiast iść do Internet go złapać,
jak, jeśli chcesz Użyj witryny w trybie offline,
można użyć opcji Pobierz.
Jednak w większości przypadków, przy użyciu CDN to dość szybko, ponieważ ten sposób,
to jest uaktualniana dla Ciebie.
Musisz ręcznie zaktualizować go albo.
Mieć sens?
>> Więc wiele narzędzi będzie miał ten zbudowany W domyślnie. W swojej Pset7 i Pset8,
Wierzę Bootstrap jest automatycznie włączone.
A w CodePen, na Przykładem, że to już
uwzględnione, ponieważ I dodany dodać, że ustawienie.
Więc jeśli kiedykolwiek chcą się bawić z nim, można po prostu pójść na CodePen,
lub przejdź na ID, czy cokolwiek innego.
I może być w stanie Dostęp Bootstrap tam,
ale to nie zawsze jest zbudowany W domyślnie w internecie.
Mieć sens?
>> Tak.
tak jak recap-- mamy jak pięć minut przed końcem.
Ale jako Przypomnę, w nowych stron internetowych, Bootstrap można to tak.
A gdy już jest wliczone w cenę, można wykonać wszystkie fajne rzeczy tutaj.
Możesz iść dalej, a może po prostu czytać CSS, możesz dodać jakieś fajne style,
możesz mieć elementy jak przyciski,
i stoły, a lista przedmiotów, które wymienione.
Jest kilka fajnych pluginów JavaScript, które warto zwiedzić.
Dodają, jakieś fajne interaktywność na stronie internetowej.
Jak ten sprawia, że dialog modalne.
>> Więc jest trochę zabawy rzeczy można zrobić z Bootstrap.
Więc moja rada dla ciebie jest iść do przodu i używać go w swoich projektach,
postępuj zgodnie z instrukcjami mamy po prostu tak, jak je zdobyć,
i po prostu przeczytać Bootstrap, ponieważ dowiesz się więcej o tym, co robić.
I tak przeszliśmy na dzisiaj, jak używać
dokumentacja, co budynek bloki są, i jak to jest koncepcyjnie.
Więc teraz moje wyzwanie dla Ciebie jest zrobić stronę internetową za pomocą Bootstrap.
Idź do docs.
I korzystać z narzędzi, które mamy omówione, aby spróbować i analizować je
i zrozumieć je.
I korzystanie z tych stylów i narzędzia widzisz tam w witrynie.
A to tylko duże, Proces eksperymentalny.
>> Wypróbuj pewien styl.
Czy to działa?
Czy nie?
Spróbuj umieścić rzeczy razem.
Zobacz, co się dzieje.
Jest bardzo samodzielny kierować, proces wykrywania.
Ale dziś, że nauczyłem się same podstawy co jest Bootstrap?
Dlaczego to działa?
Jak to działa?
W jaki sposób rozpocząć korzystanie to w pierwszej kolejności?
A więc teraz, że jesteś *** tym garbem, ty
powinien być w stanie to zrobić dość gładko przez siebie.
>> Więc po raz kolejny, tym Kod zrobiliśmy to tutaj.
Więc jeśli kiedykolwiek chcesz aby dostać się odświeżyć,
jak, co jest szybkie oszustwo arkusz dla wszystkich stylów?
Możesz przejść do tej próbki tutaj.
Mamy tu przykładowe style.
Jeśli chcesz spróbować Wyzwania ponownie przez siebie,
można spróbować je tu i sprawdzeniu rozwiązań.
Więc ten link będzie zawarte na slajdach, które
zostaną wysłane do Ciebie oczywiście.
Ale jest to także tutaj.
Możesz zatrzymać wideo, jeśli chcesz.
Wszystkie informacje potrzebne jest będzie właśnie tutaj, na tej stronie.
Więc jeśli ktoś ma jakieś pytania, możemy wziąć je przez następne kilka minut.
W przeciwnym razie, dziękuję wszystkim bardzo za oglądanie.