Tip:
Highlight text to annotate it
X
>> Нийл Мехта: Така здравей всеки, който се гледа тук,
или гледане онлайн, или дистанционно.
Моето име е Нийл, това е CS50.
И днешния семинар е Responsive Web Design с Bootstrap.
Това е една тема, която е много близо до сърцето ми.
Надяваме се, че ще бъде близо до сърцето си
както и до края на днешния семинар.
Така Bootstrap.
Колко от вас са правили вид уеб програмиране и преди?
Една добра сума?
Малко.
>> Така Bootstrap е най-най- популярен, предния край рамка.
Той е използван по-- съм за мача Няколко случайни websites--
Lyft, Newsweek и Vogue.
Той е използван от редица уебсайтове.
Това е една рамка, уеб дизайн, който ще ви позволи да направите вашия уеб сайтове
красива, така и отзивчив.
И аз ще отида над тях две понятия тук.
Красив.
Така че имате нормална сайт в лявата, която се прави само с HTML.
Вие сте научили HTML в клас и в раздел надълго и нашироко.
Bootstrap е начин да се направи вашия уеб сайтове красива.
Можете да вземете това, което е на лявата страна на екрана
и да го превърне в това, което е на от дясната страна на екрана си с много,
много, много малко код.
>> Можете да получите хубава синия бутон, можете да получите фантазия, заоблени ръбове на екрана,
вие получавате изгледа на списъка, можете да получите карти и т.н. с много малко код.
Има действително не CSS, че Вие трябва да напишете сами.
Така Bootstrap ви позволява да имаме тези предварително изградена CSS
компоненти можете да сложите вътрешността на вашата уеб страница
за да изглежда красива, без да Много работа по своему.
Това е наистина фърмуера, отправна точка,
за приключенията си за уеб програмиране.
И така, когато ти си просто подигравателен създаде уебсайт,
това е много добро място да започнете.
Можете да получите един добре изглеждащ сайт с много, много малко работа.
И наистина, отиваме да направите това сами
в хода на подобни пет minutes-- рамките на 10 минути.
Така че е доста лесно да се направи някои страхотни сайтове.
Така че това е първата част.
>> Вторият part-- отзивчиви.
Хората, в днешно време, не просто достъп до интернет на своите лаптопи.
Всъщност, от 2014 г. повече хора достъп до интернет през мобилни устройства,
като телефони, или таблетки, или услуги, или така нататък, отколкото уебсайтове.
И сайтове са традиционно проектирани с лаптопи и настолни компютри
се има предвид.
И така, на интернет страниците често не са много добре пригоден за вашия телефон.
Ако някога посети harvard.edu на телефона си,
това е вид досадно опит, нали?
Това е, защото това не е отзивчив.
Опитваме се да направим уебсайтове, които са отзивчиви,
които реагират на размери на хората екран.
>> Така че, ако това е телефон, това е ще отида на телефона.
Ако това е таблетка, това е Ще отида на таблета.
Той настройва за да съответства на екран, който се използва.
И така Bootstrap също предоставя някои много, много полезни помощни програми за това.
И ние ще обсъдим това, както добре.
Така отново, има две части Bootstrap-- красива и отговорна.
Отиваме да говорим за тях.
Първо, красива.
И тогава отзивчиви.
>> Така че всичко, кодът, че ние сме Ще говорим за today--
ние ще имаме много примери, пред много предизвикателства, и така тя on--
всички живее на този сайт тук.
Това е, което ние слайд изпратени.
Така че, ако сте тук, можете да се чувствате свободни да не се наложи да запиша.
И ако гледате от разстояние, се чувстват свободни да го направим на вашия компютър
както добре.
Вероятно ще се нуждаят от нея по време хода на този семинар.
>> Така че ние ще се използват сайт наречен CodePen,
която е съвместен кодиране среда, по време на този семинар.
И CodePen-- и аз ще ви покажа тук недвижими fast--
тя ви позволява да пишете HTML съвместно.
Мога да го напиша, мога да го изпратите на вие, момчета, вие може да го редактират.
Дори ако сте дистанционно, можете все още може да получите достъп до него по този начин.
Можете да въведете HTML код в отгоре и тя автоматично ще
да се превърнат в уеб страница в долната част.
Така че това е начин за вас бързо да изпробвате код
без да се налага да правите каквито и да било неща на вашия IDE, или своя собствена интернет страница,
или нещо такова.
>> Така че продължавайте напред и да спра това уебсайт, ако сте дистанционно
или ако вие сте тук, особено ако сте дистанционно.
is.gd/cs50boostrap.
Не капачки, без долни черти, нито нищо.
Така че тези от вас, които са тук, просто ми даде палци
когато сте дръпна нагоре, че уеб страница.
Добър?
>> АУДИТОРИЯ: Да.
>> Нийл Мехта: Така че ние ще се заемем за които само за секунда.
Така че на първо място, ние ще стигнем до, как да направите вашия уеб сайтове красива?
Отиваме, за да научите как да се скучно, стар HTML, като ви показах преди,
и да се обърнат, че в много хубаво компоненти,
харесват хубави джаджи, хубаво, оцветен копчета и етикети, както и маси,
и всички, използвайки Bootstrap.
Така че, ако можем да всички да преминем към CodePen че просто спря.
Тя трябва да изглежда малко като този.
Има ли го да изглежда така за всички?
>> АУДИТОРИЯ: Да.
>> Нийл Мехта: Ако сте дистанционно, то трябва да изглежда така, както добре.
Ако не, аз ще ви покажа как най-скоро можете да получите това изглежда така
в бъдеща част от видеото.
Така че тук сме написали един много основен HTML,
като вида сте Използвам в клас.
Това е доста основни.
Без излишни украшения.
И ние имаме някои неща.
Ние разработихме много, много основни стартиране
обадете Yalp! с които можете да откриете ресторанти в района,
и да намерят мнения, както и посоки по всички от тях.
Това е много добра идея.
Никога не е било направено преди.
Това е много уникално име, също.
>> Така че това, което ние ще се опитаме да направите, е да помогне на собственика
на Yalp! направи си сайт изглежда наистина, наистина готино.
Така че да започнем с това, собственикът на Yalp! е направен малко търсене
кутия, и малък бутон, и след това може би малко
Осветената зона за Осветената ресторант, а след това
списък с други ресторанти които са в района.
Така че ние можем просто проверете HTML кода на недвижими бързо.
Как комфортно сте момчета с HTML?
Ние сме направили малко раздел, а също и в клас.
Достоен?
>> Така че просто като една рекапитулация, HTML е за всички имащи
тагове или елементи, които разказват за компютър, как да изложи на уеб страницата.
Така че това h1 here-- започне h1, Welcome да Yalp !, край h1-- казва на компютъра,
изготвят голям удар с глава на него казва, Добре дошли в Yalp!
вътре има.
Ние също имаме форми.
Ние можем да въвежда като този, текстови входове, което ще направи като текстови полета
пишете инча
Също така имате бутони.
Можете да получите хубава, бутон за кликване.
Той не прави нищо полето сега, но можете да получите един бутон.
Можете да имате divs или разделители, до разбият страницата си в различни групи.
>> Можете да имате точки, имате бутони.
Ако имате точки, а след това имате неподредените списъци, ул,
и списъци вътре на това, Ли.
Така че това са най-основните градивни елементи на дадена уеб страница.
И наистина, доста много всеки уеб сайт, което виждате
ще бъде изграден използване на същите тези инструменти.
Разбира се, те не са Посетете този лош, защото ние сме
отивам да го разнообразите малко.
Така е нека това скучно стар HTML и старт превръщайки го в красивата местност
че ние просто видях преди няколко минути.
>> Така че нека да започнем много проста.
Така че ние имаме този бутон тук.
В Bootstrap, както видяхме, можем имат приятен, красив, син бутон.
И това е направено не по този обичай CSS.
Няма по потребителски CSS тук.
Това е направено чрез добавяне на класове на вашите HTML елементи.
Ако сте опитали класове, или hrefs, или анкери, или тип = "текст" за inputs--
HTML елементи могат да имат тези качества.
Те могат да имат допълнителна информация че може да им даде.
>> И така, в този случай, класове са атрибута.
Така че ще пиша, бутон клас = нещо в низове.
И този атрибут ще разкаже компютър, това не е всеки, стар бутон.
Това е бутон, който е в този клас на бутони.
И така Bootstrap, ако ти я дам определен стил на вашия елемент,
тя ще го направи по определен начин.
Така че аз пиша "BTN BTN-първично.
BTN бъдеш абревиатура за бутона.
Ще забележите, че сега моята грозна бутон обърна
в хубав, красив, син бутон.
Тя изглежда много хубаво, когато щракнете върху него.
>> И така, какво се случва, е, ние имаме BTN клас и BTN-първична класа
на нашия елемент.
И Bootstrap ще ида и да кажа, OK, I Знам, че има тези два класа.
Всеки елемент, който има тези две класове следва да се изготвят по този начин.
Така че това е в основата на това как сте закачили стилове на елементи в Bootstrap.
Ти просто приложете класове към тях и ще го тегло, както намери за добре.
Така че тук е друг пример.
В входа, можем да добавим клас = "форма-контрол".
И аз ще ви покажа най-скоро, където можете да разберете какви паралелки
са на разположение на всеки вид елемент.
Но на класа, че ние просто добавена има хубави, заоблени ъгли,
тя има хубава подплата, тя има приятно, синьо сияние до него.
>> Можем също така да отида в тази форма.
А клас = "форма-инлайн", което ще направи нашата форма, както можете да си представите, инлайн.
Така че търси малко по- като това, което имахме преди вече.
Така че, преди да отидем, за да оформите останалата част от страницата, някакви въпроси относно това, което ние
Направих?
Ние просто прикрепени класове за нашите различни елементи.
И аз ще ви покажа как можете да си по-късно разбера какви са наличните класове.
Ние прикрепен класове, има определени стилове.
И това казва на браузъра как да оформление на страницата, като се използва
Предвидени стилове фърмуера му.
Всякакви въпроси от публиката?
>> Добър досега?
Готино.
Много от предизвикателствата, с Bootstrap е просто
знаейки какви компоненти са достъпно и как да ги използвате.
И всичко, което е научил с опит, а също и
чрез четене на документацията, които ние ще говорим за най-скоро.
Така че ние имаме това Разделение.
Това е просто скучно, старче.
Искаме да подчертаем, че по някакъв начин.
Така че в Bootstrap, има Много от компонентите на разположение.
И това е getbootstrap.com.
Това е много полезно за справка.
Той съдържа неща like-- ето как да направите един бутон.
И вие можете да направите навигация барове, можете да етикети, можете да прогресират барове,
можете да направите списък групи.
По принцип, това е на всички видове на които може да видите в уеб страница.
>> Ето един, че ние ще се опитаме точно сега.
Тя се нарича панел.
Ако някога използвате Google Сега те имат карти.
Или всяко устройство Android има карти.
Те имат малки бели кутии че има неща вътре в него.
И така ние ще се опитам да направя които се тук с помощта на нещо
нарича панел.
Така че, ако ние придаваме клас = "панел панел-подразбиране "в нашия външен Разделения,
тогава ние прикачите Разделения клас = - нека просто проверете тази документация.
Разделения клас = "панелна позиция" и След Разделение клас = "панели-тяло".
Отново, не се тревожи за запаметяването на този код.
Той ще бъде достъпен онлайн.
>> Така че ние направихме това и сега нашата скучно, стари Разделения превърна в това хубаво, малко картон.
Той има хубава подплата, тя има граници, той се откроява
от останалата част на страницата, което е много готино.
Така че нека да ида и да се промени това Get посоки бутон, за да изглеждат добре.
Кой е в публиката иска да разкаже ми какво мога да направя, за да бутона
за да изглежда хубаво, използвайки Bootstrap?
Да?
>> АУДИТОРИЯ: Бихме могли да добавите клас.
И бихме могли да направим клас = "BTN BTN-първично".
Нийл Мета: Да.
Има един куп други цветове на разположение за buttons--
или за нещо, за този въпрос.
Ние можем да направим BTN-опасната и да го направи червено.
Ето.
Ние можем да направим BTN-успех, за да го направи зелен.
Ние можем да направим BTN-info-- има един куп на неща, които са достъпни за вас.
Така че аз имам малко предизвикателство за вас сега.
Така че има още едно нещо, което ми е останало ООН стил.
Този най ресторанти.
>> И ние искаме да използваме нещо нарича списък с групи, за да го оформите.
Така че моето предизвикателство към вас е преминете към getbootstrap.com--
Аз ще го спра тук.
getboostrap.com.
Отиди getbootstrap.com, намерете секция, където и да отидат над списък групи.
И вие ще видите тук, на Например и правилните упражнения
които можете да използвате, за да си списъци в тези хубави списък групи.
Те са разработени примери кодови примери, какво
код, който използвате, какво HTML код използвате, и това, което извежда това.
>> Така че моето предизвикателство към you-- отида на getbootstrap.com,
независимо дали сте тук или у дома, и за да се опита и да добавите към този ул стилове
за да изглежда хубаво.
И използването на стил списъка група.
Искаш ли да се отнеме няколко минути, и търсене на документацията,
Опитайте това сами?
Тъй като правиш уеб програмиране, ще разбереш много работа си
ще бъде четене тази документация.
Така че аз мисля, че е добре да се запознаете с това как да се чете документацията,
как да разбера какво е, когато, какво код примери които можете да използвате,
това, което можете да използвате.
>> Така че отново, getbootstrap.com, отидете на раздела компоненти,
и след това превъртете надолу до Лист Group.
И вие ще видите примери за код, който можете да използвате, за да направите вашия HTML поберат това.
Така че да отнеме няколко минути и опитам да го изследват себе си,
независимо дали сте тук или у дома.
Ако сте вкъщи, пауза във видеото, може би, и да го изпробвате сами.
Ако сте тук, ако отидете в нашата website-- ако обнови страницата,
вие ще видите това на там.
Същият Този код е просто добавяне на нови стилове точно там.
Така че да отнеме няколко минути.
Нека да знаят, когато се чувствате добре за него или когато сте напълно загубени.
Звучат добре?
Готино.
Quick заделени за тези от вас, у дома, докато чакаме,
ако отидете в сайта GitHub че сложих преди няколко пързалки,
към началото на видеото, Имам GitHub репо, хранилище,
за този разговор.
Всички тези код примери, че ние ще се Говорим за се съхраняват тук.
Така че, ако отидете да оспори-1.html, това е всичко, кодът, който имаме в момента
на нашия CodePen.
Така че може просто да вървим напред, и да копирате това и го поставете във вашия собствен CodePen.
И по този начин, можете да се справи с това, което правим тук.
Така че имаме тази страница отворена, както и ние мине през останалата част от семинара.
Отново, по който искате да изглежда като това, което виж надолу към долната част на екрана
там.
Чувствам се добре?
Solid.
Нека да изчакаме за всички останали, за да завърша с това, което правят.
>> Да?
>> АУДИТОРИЯ: Да предположим, че аз исках да се използва за първоначално зареждане в home--
Нийл Мета: Да.
АУДИТОРИЯ: Виждам, на интернет страницата, Първи стъпки страница.
Те ми даде опциите Bootstrap, Source Code, или Sass.
Кои от тях искам?
>> Нийл Мета: Да.
Така че въпросът е, как да получите Започнах да използвам Bootstrap от себе си?
Тя просто се случва да магически работи точно тук.
Така че, ако имаме време в В края на семинара,
Ще ви покажа как можете да го получите на вашия собствен уеб страница.
Както тук, аз съм всъщност сложи в някои настройки, които
ще го има автоматично заредена, но аз ще
ви покажа, за да го направите от почеше по свои собствени уеб страници.
>> АУДИТОРИЯ: Благодаря.
>> Нийл Мета: Да.
Добър въпрос.
Чувствам се добре?
Чувствам се добре?
Готино.
Така че, който иска да ми каже как се прави това нещо изглежда добре и Boostrappy?
Какво е първи клас ние добавяме към UL?
АУДИТОРИЯ: клас = "списък-група".
Нийл Мета: Да. списък-група.
И тогава какво ще се прикрепят към ЗИД?
Някой друг?
АУДИТОРИЯ: И тогава, след като че, клас = "списък-група-т".
>> Нийл Мета: Да.
>> АУДИТОРИЯ: И това е най- същото за следващия.
>> Нийл Мехта: Ли клас = "списък-група-т".
Ето.
Ние разполагаме със списък хубава група, точно както очаквахме.
Така че ето го.
В 10-та минута, които сме направили това скучно, стари Yalp! страница
изглеждат добре и професионално.
И това е само началото.
Така че сега, че се чувствате добре за това, нека
просто отидете напред и да поговорим за още няколко компонента, които
може да дойде по-удобно, колкото отидете в целия си приключение.
>> Разбира се, че има много хора тук.
И сега, че сте научили как да се направи списък групи,
можете да хубав много преподават себе си как да направите някое от тези неща.
Но, разбира се, нека просто опитайте и да направим няколко по-себе си,
само така можете да получат представа за как можете да ги използвате.
Аз съм просто ще отида до този пример тук.
Отново, кодът, че аз просто поставили тук е на разположение тук.
Така че не се колебайте да го спра.
>> Така че ние вече сме преминали през Няколко тези примери.
Така че ние имаме бутони, които ние вече видяхме как се прави.
Ние можем да направим по-голям бутони.
Чрез бутона за class-- тя отива, BTN BTN-LG и BTN-подразбиране го прави бели.
Така че това прави нашия бутон голяма отколкото може да бъдат по друг начин.
Тя може да дойде по-удобно, ако имате голям бутон или нещо представят.
Видяхме пример на списък с групи, видяхме примера на форма.
>> Една много важна е икони.
И икони са начин за вас да добавите интересни неща, като проверка на проверка
знаци или плюсове, или приятел икони, или рестартирайте икони,
или каквото и да си уеб приложение.
Така че отново, ако сме в тук, компонентите, glyphicons,
са на разположение за Bootstrap икони.
Има изчерпателен списък на всички тези тук.
Така че просто като пример, нека се опитаме и добавете по една.
>> Така че като Facebook, ние сме за да се опитва да има бутон за добавяне на приятел.
Нека първо да добавите малко стил.
Бутон клас = "BTN BTN-успех".
И там да отидем.
Нека да добавя икона тук.
Каква икона, мислите ли, може да има смисъл да се сложи тук?
Вие вероятно сте виждали по някои уеб страници или каквото и да,
но това, което е пример за икона, която може да отиде и във вътрешността на този бутон?
Чувствайте се свободни да разглеждате тази гледна точка, ако имате нужда от вдъхновение.
Има една много полезна такива можете да намерите тук.
Да?
>> АУДИТОРИЯ: Може би glyphicon потребителското този?
Нийл Мехта: OK.
Този.
Това е доста добър.
Да.
На Facebook, аз го мисля ще изглежда малко по-така.
Така че тук е как да отида за добавяне на икони на нашите страници.
Ние просто имаме span-- една педя е неутрална контейнер за нещо.
A Разделения е контейнер за нещо, една педя е друг контейнер.
divs имат нови редове около тях, педи не го правят.
Така че има различни начини за като генеричните контейнери.
Подобно на него, няма смисъл да го сложите вътрешността на абзац или нищо.
Ние трябва да го сложи вътре нещо все пак,
така че ние просто се сложат на една педя.
Така педя клас = glyphicon glyphicon-потребител "близо педя.
И сега имаме икона вътре бутона.
>> Така че той не изглежда изцяло за разлика това, което може да се види на facebook.com.
И така, това е хубаво, че те могат да действително да се поставят навсякъде, където искате.
Във вашите колекторни барове, в списъка с групи.
Както и да е.
То не трябва да бъде вътрешността на един бутон.
Така че, като пример, мога сложи същия клас тук.
"glyphicon glyphicon-потребител".
И изглежда по същия начин.
Така че тези icons-- можете да използвате гредореда клас = "glyphicon glyphicon-независимо".
И това ще ви позволи да добавите икони където искате.
И икони са много важна част от вземане на уебсайт поглед
професионална и добре направено.
Така че не прекалявайте, но това е често е добре да знаете.
>> Панели, отново.
Аз просто ще направя това отново като една рекапитулация защото те са вид участва.
Ще забележите, че в превръщайки нормалната си HTML
сайт в Bootstrap-afied сайт, вие ще трябва
добавянето на допълнителна структура на сайта.
Например, имаме допълнително divs тук, само защото тези,
са необходими, за да се направи панел.
Така че просто да се има предвид, че ще трябва да има допълнително структура.
Така "панел панел-подразбиране".
Може би това е панелна с глава.
Мисля, че това е панелна позиция.
Да.
Ето.
Така че, отново, там е нашият панел.
>> Още едно нещо, че ние не обхваща още, таблици.
Маси, по подразбиране поглед вид грозно.
Ето така.
Но таблици са, разбира се, много важна част
от това, което ще направим в уеб разработки.
В Pset7, например, CS50 Финансите, която ще излезе скоро,
ще използват много маси.
И много от уеб Дев използват много маси за показване на информация,
като запаси, или резултати, или нещо такова.
>> Така стайлинг маси всъщност е много лесно.
Можете да добавите класа на масата, за да си маса.
И смея да кажа, че изглежда доста добре.
Можете да направите допълнителни неща, като "маса за шарени".
И вие ще видите резултатите тук.
Можете да го направите на маса граничи.
Има много опции, можете да.
Но в основата си, добавяйки маса, класа на маса,
ще направи вашите таблици изглеждат доста приятен.
Така че това е кратко резюме на най- някои от по-важните стилове
и компонентите, които ще трябва да се използва за първоначално зареждане.
Така че аз мисля, че тайна до нашата красива страна.
Всякакви въпроси точно сега за това как за да направите вашия уеб сайтове красива?
Как можете да ги използвате компоненти в своя полза?
Чувствам се добре?
Да?
АУДИТОРИЯ: Може би това е глупав въпрос,
но може ли да се използва за първоначално зареждане в Уикипедия?
Ако редактирате страницата Уикипедия?
Нийл Мета: Да.
Така че въпросът е, аз съм редактиране на страница Wikipedia,
мога да включа стилове фърмуера там?
>> АУДИТОРИЯ: Да.
>> Нийл Мехта: И така е Bootstrap в основата на големия CSS стил лист.
A CSS стил лист просто казва, когато Имам този клас, приложете тези стилове.
Така че CSS стил лист за Bootstrap ще бъде нещо като .btn,
класът на бутона, ще получите като заоблен ъгъл на границите или каквото.
Така че основно, фърмуера е просто куп класове и куп стилове
посочена за тези класове.
Така че, стига да има, че CSS, този списък от правила в страницата си,
вие ще получите стайлинга Bootstrap.
Това е, разбира се, зависи от като стиловете фърмуера в страницата си
да започнем с.
>> И така в Wikipedia, най-вероятно не би могъл
направя това, защото Wikipedia не разполага с Bootstrap в него.
Но ако той има Bootstrap, вероятно бихте могли да направите това.
И ако искате, бихте могли тя включва, но които биха могли да
прекъсне съществуващата оформлението на страницата.
Но много добър въпрос.
Можете да използвате Bootstrap където и да е включена,
но това не е построена през по подразбиране.
>> АУДИТОРИЯ: Благодаря.
>> Нийл Мета: Да.
Всякакви други въпроси?
Да.
Така че независимо дали сте тук или у дома, просто не забравяйте getboostrap.com-- отново,
getboostrap.com-- е твой приятел.
Всеки път, когато използвате Bootstrap, това ще ви даде
инструкции за това как да се получи започнете, как да се използват компоненти.
Има някои готини JavaScript плъгини, че ние няма да вървят насам,
но те са си струва да пробвате, както добре.
Така че това е твой приятел.
Това е просто важно да се получи използва за това как да използвате това.
>> Така че нека да говорите малко за вземане отзивчиви уебсайтове.
Така че, както казах и преди, използвани хората лаптопите си, те използват своите телефони.
И както можете да си представите, това е много различен размер на екрана от това.
И така, в същия уебсайт че изглежда добре на моя телефон
няма да изглежда добре, непременно, на компютър.
Така че това, което трябва да направите е направите вашия сайт се адаптират.
Трябва да се адаптира към различните размери на екрана, че това е на.
>> Тя трябва да се каже, аз знам, че съм на компютър, голям лаптоп, аз трябва да се разшири.
Знам, че съм по телефона, че трябва да се свие.
И така Bootstrap осигурява известна много, много полезни инструменти, за да направите това.
Така че нека да ви Bootstrap почивка уебсайт, на 12 графи.
Можете да направите редове и има 12 колони.
И вие можете да разделите тези, обаче искате.
Можете да имате един, голямо нещо, който е широк 12 колони.
Можете да имате две неща че са шест на всеки.
Можете да направите едно нещо, което е четири, един, който е две, или този, който е шест.
Можете да направите три, три, три, три.
Можете да правите каквото разбивка, която искате.
>> Така че може би вашата уеб страница, трябва да има лява колона, която е една трета от ширината.
Така че да се четири колони широк и останалата част от страницата
ще бъде широка осем колони.
Така че това е един пример.
Нека да спра друг пример.
>> АУДИТОРИЯ: Има ли винаги трябва да бъде още по раздели?
Може ли да бъде седем, пет сплит?
>> Нийл Мета: Да.
Тя може да бъде седем, пет.
Да.
Докато я добавя към 12, това е добре.
Така че нека да се върнем тук.
Отново, кодът, който е тук също е на разположение тук,
по отзивчиви например.
Така че аз просто спря някои Например отзивчиви код тук.
Така че можете да направите това, като използвате нещо, наречено ред.
Row е просто друг клас.
Това е друг стил можете да добавите към вашия divs да ги направят свои собствени компоненти.
>> Значи вие казвате, Разделения клас = "ред", за да направи един ред,
да се даде 12 колони от космоса.
Тогава се слагат колони във вътрешността на тази.
Така че тук ние Полковник-XS-6.
Не се притеснявайте за XS.
Ще говорим за в сек.
Но в основата си, ние имаме една нещо, което е шест удара.
Наричаме го оставили.
И така, това е лявото поле тук.
Ние имаме едно нещо, което е шест от 12-те колони широки.
И това е една от дясно.
>> и просто дава марки Разделения си го запълнят сиво.
Така че това е само за да можем да се види, че те са различни.
И така, това първият пример.
Това е един много прост пример за това как можете ще използвате вашите редове и колони тук.
Вие определяте поредни пъти, използвайки клас = "ред".
И след това, което правите клас = "COL-XS-6" правят половината, "COL-XS-6", за да се направи другата половина.
Ето един по-сложен пример.
Нека да разгледаме най-малка, Огромен, Останалата една.
>> Ние можем да направим широка Tiny две колони, можем да направим широка Огромни шест колони,
А останалите четири колони широки.
Това прави около 12.
И така, те в крайна сметка обхваща ширината на страницата.
Отново имаме един ред отвън.
Тогава ние имаме Разделение клас = "COL-XS-2" и след 6, и след това 4.
И това ще осигури структурата за нас.
И така можем да сложим каквото по дяволите искаме тук вътре.
Вместо Tiny, можем да сложим един бутон.
Бутон клас = "BTN BTN-първично".
И така забележете, че нашия бутон не се заеме с цялата ширина,
но поне това е ограничено да, че много място.
>> Така че това е много хубаво.
Така че сега можем да разбият нашия уеб страница на парчета, ширина мъдър.
Можем да кажем, ние искаме да имаме ляво колона, а в дясната колона, и така нататък.
Но ние не можем да изходите как можете да го отзивчиви.
И така Bootstrap нека да направим това, както добре.
Той има тези неща, наречени точки на прекъсване.
Така че има начин да знае дали вие сте на един лаптоп, вие сте на таблетка,
сте на телефона хоризонтално, или сте на телефона вертикално.
Той знае размера на екрана.
И разбива тази на четири категории-- голяма или LG, която е лаптопи, обикновено.
MD или среда, която е на таблетки.
см, малък.
Или XS, особено малък.
И така, когато укажете колона, вие казвате,
тя трябва да бъде широк шест колони на допълнително малко устройство.
Ето защо ние направихме COL-XS-6.
Ние което казваш, че трябва да да бъде шест от 12-те колони широки
на допълнително малко устройство.
И ако това е всичко, по-голяма, ние просто ще подразбиране използва допълнително малки размери.
Ако това е нещо по-голямо от особено малък, той ще бъде шест удара.
И така, ние можем да се наберат тях да се направят от нашите колони
заемат различно количество колони на базата на размера на екрана.
Нека се върнем към това отзивчиви преоразмеряване.
Така че ние имаме нашите колони.
И той казва, "кол-LG-6 цв-XS-12".
Така че предвид това, което вие знаете до момента, това, което правиш
мисля, че ще се се случи на голям екран?
Е, това е вид отстъпила, но това, което правим
мислите, че ще изглежда харесва на голям екран?
И защо е това?
>> АУДИТОРИЯ: ли е, че на голям екран, това е
Ще отнеме само част от пълната пространство?
Подобно на половината от него, предполагам?
>> Нийл Мета: Да.
>> АУДИТОРИЯ: И на по-малки екран, то се случва
да заемат целия екран, на 12.
Нийл Мета: Да.
Право.
Така че, като пример, нека просто погледнете тук.
Да.
Така че за всичко, което е LG или bigger-- така компютъра ми се случва
да бъдат LG, защото това е доста wide-- той ще направи
тя рамо до рамо, защото това е цв-LG-6.
Така че, защото това е по голям, той го прави шест колони широки и шест колони широки.
Да видим какво ще стане, ако направи това в един по-малък.
Аз съм просто ще ООН цял екран това.
И аз отивам да се свие на екрана.
Отивам да се свие на екрана, така че Изглежда съм в по-малък устройство.
Така че аз отивам да го свие като този.
>> И готово.
Сега се подрежда защото сега сме отишли
от голяма to-- това е може би допълнително малък размер на екрана.
И така, сега той казва, OK, не сме в голяма, ние сме в особено малък земя.
Така че ние ще използваме допълнителната малкия размер.
И ние ще XS-12, XS-12.
Така че това ще бъдат подредени.
И точно забележите, че има нещо, наречено точка на прекъсване.
A прекъсване е мястото, където сте направили прехода
от особено малък за малки, малки до големи, и така нататък.
>> Така че просто да забележите, че както аз плъзнете това вън, в крайна сметка, ще стигнем до точката
където те ще скочи да бъдем рамо до рамо.
Ето.
Така че има точка на пречупване точно там.
Така че можем да го направим още по-сложно.
Сега можем да кажем, те нещата трябва да бъдат четири широки.
Това означава, че те трябва заемат около една трета
на речта на много големи устройства.
На средно устройство, то трябва да бъде половината от екрана, защото това е MD-6.
На много малко устройство, тя трябва да отнеме до 12.
И така, това изглежда доста естествено.
Нека просто да опитате това за себе си.
>> Така че на голям екран, те са четири удара.
Свиване го малко.
И сега те са шест удара.
Така че това е шест, шест, шест.
Свиване още повече и след това те ще бъдат напълно подредени.
Така че това, например, има смисъл, ако имате карти, като новинарски карти,
Например, когато, ако това е на много голям екран,
това е ОК, ако имате няколко рамо до рамо защото те всички ще получите достатъчно място.
Но те трябва да имат достатъчно място.
Така че в по-малък екран, ще искате да им дадете
повече място, пропорционално, на страницата.
>> Така че като реалния свят, например, нека да кажем, че имаме Twitter.
И ние имаме текстово поле, така че можете да чуруликане на страната.
И ние имаме списък с тенденция теми от дясната страна.
Така че на голям екран, ние трябва тях да бъде рамо до рамо,
така че можете да ги видите в една чаша.
Но в по-малък екран, ние трябва да направим 12 и 12,
така, че темите на налагащи са под зоната на туит.
Тъй като зоната за туит е Основното нещо и на малък екран,
Темите на налагащи се не го правят материята толкова много.
И така, ние ги поставя точно под, така че че те могат да получат достатъчно пространство.
Направи смисъл досега?
>> АУДИТОРИЯ: Да.
>> Нийл Мехта: Solid.
Така че това е всички примери имам тук.
Нека се опитам да направя едно предизвикателство.
Така че отново, това е предизвикателство-2.html за тези от вас, след заедно у дома.
Така че моят приятел, Mark Zuckerberg, дойде при мен онзи ден.
И той е като Нийл, имам намерила доста добър в уеб дизайн.
Мога да направя на HTML.
Аз направих тази малка, нова редакция, за да Facebook.
Имам нова идея за това как ние трябва да оформите Facebook.
И ето го.
Точно тук.
Ето някои примерен код.
Така тя се нарича Fancybook.
>> Ние имаме някои статуси.
Имаме Nemo, Mike Kosowski, ***-- три статуси.
И тогава ние имаме списък на онлайн приятели полето под него.
Така че той е направил домашното му.
Той знае малко за Bootstrap, че е направил изгледа на списъка,
той е направил малко на HTML.
Така че той има на уеб страницата.
Но той е като Нийл, аз не правя разбере отзивчиви дизайн на всички.
Имате ли някакви експерти, които може да ми помогне с това?
И за щастие, сега вие сте експерти в отзивчиви дизайн.
>> Така че това, което той ми каза, беше, че той иска Fancybook да изглежда по този начин.
На много малко устройство, като телефон, всичко,
следва да бъдат подредени, като тук.
Така че ще трябва времевата линия авансово, до върха, а след това
Вие трябва да сте на чат лента в долната част.
Но на таблетка или средно устройство, то трябва да бъде наполовина,
като във времевата линия трябва да бъде половината, а списъкът на чат приятели
трябва да бъде на другата половина.
>> Тогава на лаптоп, времевата линия трябва да отнеме до три четвърти
и след хеджирането на чат следва заемат друга една четвърт.
И така, той е като Нийл, аз имам този код тук, но това не е отзивчив.
Необходимо е да се държи по този начин.
Така че моето предизвикателство към вас е даден този код here--
ако опреснете CodePens, ще видите това.
Или ако просто поставете в кода на влизане-2, ще видите това.
>> Ето този пример код.
Вие ще видите някои xxxs.
Искам да променя xxxs, така че времевата линия и в списъка на приятелите
следва тези характеристики тук.
Не се притеснявайте за това, което е във вътрешността на времевата линия за сега.
Ние ще се получи, че в следващия етап.
Но за сега, нека да видим дали ще се получи тези неща, за да я разделят по този начин.
Същото прави, че да има смисъл?
Така че, ако сте вкъщи, пауза във видеото и се опитайте
за да направите вашия уеб страница Посетете отзивчиви като този.
Ако сте тук, да вземе като две, три минути.
Чувствайте се свободни да говорите с един съсед, и да се опитаме и да определи г-н Зукърбърг е
отзивчиви проблем дизайн.
Ако имате някакви въпроси, Чувствайте се свободни да ме уведомите.
Чувствам се добре?
Свършен?
Ница.
>> АУДИТОРИЯ: [недоловим].
Нийл Мехта: Какво?
>> АУДИТОРИЯ: Аз съм добър.
>> Нийл Мехта: О, добре.
Ница.
АУДИТОРИЯ: Това, което за 12-те, е това, че Bootstrap
третира дадено място на екрана като 12 единици диагонално и след това разделя, че става?
Как точно прави пропорциониране работа за това?
>> Нийл Мета: Да.
Така че въпросът е, как прави дозиращото
работи за Bootstrap, нали?
>> АУДИТОРИЯ: Да.
Нийл Мехта: Така че всеки път, когато имате Разделения клас = "ред",
без значение колко е голям екрана е, Bootstrap ще ви даде 12 единици
от същия размер на отнеме, че много по-размер.
Така че в цв 1, тя винаги е 8,33% от размера на екрана,
дали това е този широк или, че е това целта.
И така, разбира се, по-малък екран, всяка колона е по-малък.
Вие все още имате 12 колони широка, тя е по-малка.
Така че това е до вас да се уверете, че че нещата заемат повече колона,
пропорционално, за да се компенсира за тази липса на пространство.
Това прави ли смисъл?
>> АУДИТОРИЯ: Да.
Благодаря.
Нийл Мехта: Добър въпрос.
АУДИТОРИЯ: На голям екран, може да имате
времевата линия заемат три четвърти?
>> Нийл Мета: Да.
Нийл Мехта: Как се чувстват момчета?
Добър?
Готино.
Така че нека да се върна.
И нека да се опитаме и да определи тази част на уебсайта на г-н Зукърбърг е.
Така че сроковете са до тук, най- на върха, както и списъка на приятелите
е в дъното.
И така, ние просто трябва да се възложи колони, с оразмеряване пропорционална,
във всяка от тях.
Така че този първи ххх е за времевата линия.
Какво правим ние класове пробва тук?
Какво си момчета пробва тук?
Така че не забравяйте, на голям екран, тя се нуждае от да отнеме до три четвърти от ширината.
И така, какъв стил ще ви даде това?
На голям екран, три четвърти от ширината.
Какво клас ние използваме там?
АУДИТОРИЯ: Така че ние просто ще бъде редактирането, че първата инстанция на класа.
Нийл Мехта: За сега.
Да.
>> АУДИТОРИЯ: Ние не сме редактирате всеки, индивидуална особеност на времевата линия?
Нийл Мета: Не сега, най-малко.
Така че цялото това нещо е да го блокира.
Ние просто промяна на проектиране на блока.
Така че тук ние Полковник-LG-9, защото това е девет от 12-широките на голям екран.
И тогава на носител, екран, колко колони трябва да получа?
АУДИТОРИЯ: Той е трябвало да бъде наполовина.
Нийл Мехта: Точно така.
Така че колко е това?
>> АУДИТОРИЯ: Така шест.
Нийл Мехта: Six.
И тогава особено малък следва be-- ако заема цялата ширина на реда,
колко трябва да бъде?
АУДИТОРИЯ: 12.
Нийл Мехта: 12.
Да.
И сега ние трябва да промените това други такива,
така че заема останалата част на пространството.
Така цв-lg--
АУДИТОРИЯ: Това ще заемат целия екран?
Нийл Мехта: Селото е само на една четвърт на екрана на голям устройство,
както ние показахме тук.
>> АУДИТОРИЯ: Three.
>> Нийл Мехта: Three.
И тогава цв-MD-6, за да се вземат на останалата част на пространството.
COL-XS-12.
Така че сега ние имаме времевата линия предприемането три четвърти
на страницата на големия екран и след това една четвърт от страната.
И тогава, ако големината на екрана надолу, тя трябва да преоразмерите съответно.
Така че това е подредени в момента, на много малък екран.
И ако ние го промените размера, до малко, те трябва да бъдат точно наполовина.
Така че ние сме направили, че до този момент.
Много яко.
И така, ние няма да свърши друга част от предизвикателството.
Можете да направите това сами.
Но в основата си, вие трябва да се опита да направи това отзивчиви
като well-- направи времевата линия предмети, сами, отзивчиви.
Така че сега сме преминали през всичко, което трябва да знаете
за отзивчиви страна на Bootstrap.
Всякакви въпроси за отзивчиви дизайн с Bootstrap
и как можете да го направите това?
Да?
>> АУДИТОРИЯ: Дали е подобна, ако имахме вграден видео
и ние искахме да се контролира мащаба, в който видео was--
размера на видеото преминавайки от лаптопа към телефона.
Нийл Мета: Да.
Малко или много.
Вие ще трябва да кажа, видеото към отнеме до толкова, стая, тъй като е дал,
което е малко дразнещ.
Но основната идея е същото.
А видеото, като всеки друг обект в страницата, като бутон или каквото и да,
толкова дълго, колкото можете използвате колони и редове,
можете да го даде определена сума на пространството.
И така става тя да почете, че е по- Друг въпрос, тъй като YouTube
вгражда имат определена, предпочита размер.
Но на теория малко, че ще работи.
Готино?
>> АУДИТОРИЯ: Предполагам, че след това, за някое изображение, което правите всъщност
Трябва да има различни версии на същото изображение в различни размери
за лаптоп срещу iPhone?
Да Въпросът е, имаме нужда да се има изображения, които са отзивчиви, както добре.
И наистина, можете да направите това.
Мисля, че е в CSS.
Но Bootstrap позволява можете да направите това, както добре.
Можете да имате отзивчиви изображения.
Можете да имате вашите изображения преоразмерявате в зависимост от размера на страницата.
А има и много нови неща HTML5, най-новата версия на HTML,
и CSS3, най-новите версия на CSS, които
ще ви позволи да направите заявка различни изображения въз основа на размера на екрана, вие сте най.
Обикновено, това е достатъчно добър, за да просто имат своя образ просто да се свие или да растат
Въпреки големия той трябва да бъде.
Но можете, ако искате да, има един 32 от 32
за много малки екрани, и 64 от 64 за голям екран,
и след това да служи на тези избирателно.
Ти можеш да го направиш.
Това е направено от някои хора.
Тя все още е доста режещ ръб.
Но кратък отговор, отзивчив images-- Bootstrap може да спаси положението там.
Готино?
>> АУДИТОРИЯ: Благодаря.
>> Нийл Мехта: Така че нека говори доста бързо за това как
за да получите този в собствения си уеб страница.
Да речем, че искате да си направите собствен уебсайт, използвайки Bootstrap.
И така, нека просто си просто минеш през нея заедно.
Да речем, че направи само нормален HTML страница.
Чувствайте се свободни да следват заедно в каквото и вашия любим редактор е.
Така че ние просто трябва някои HTML страница.
Ние можем да направим! DOCTYPE HTML.
Това също е HTML, нашата страница.
Нищо ново.
Ние сме направили това и преди.
Така че тук ние имаме свой HTML и можем да сложим неща тук вътре.
Ние можем да имаме нашия бутон.
И както казах и преди, това не е задължително да ходи на работа.
Защо да не тази работа?
Защо няма да стигнем нашата хубаво, цветни бутона?
>> АУДИТОРИЯ: Защото ние не го свърже към проекта Bootstrap или файла?
Нийл Мета: Да.
Правилно.
Тъй като това е Bootstrap-- просто фантазия CSS файл.
Това е поредица от стилове, които са прикрепени към вашите елементи.
Тук ние сме го казали, че ние искате да използвате тези стилове.
Аз ще размери, че до малко.
Ние сме го каза, ние искаме да използва тези стилове, но ние никога не
тя каза какво стиловете са.
И това е, което си въпрос от по-рано беше.
Това е отговорът на този.
Ние трябва да намерим начин да получите стиловете и да ги включи в нашата страница по някакъв начин.
И така Bootstrap воля ни покаже как се прави това.
>> Така че, ако отидете в началото Оттук Първи стъпки.
Има различни начини, за да го изтеглите.
Това може и да не е задължително да има смисъл.
Bootstrap-- това ще позволи да вземеш на CSS самия файл.
И го включи в своя собствена страница.
Източник Code е, ако искате да проникна върху него от себе си.
Не е нужно това наистина.
Sass е език че компилира в CSS.
Мислете за това като Препроцесор.
Голяма като PHP е Препроцесор на HTML, Sass е Препроцесор за CSS.
Така че, ако искате да го направите по този начин, можете да направите това.
>> Най-лесният начин е с помощта на CDN, или съдържание доставка мрежа.
Това е един уеб сайт, който просто служи на копие от Bootstrap
много бързо, за да включват в собствения си сайт.
Така че ето един пример.
Тя ще ви даде тази връзка елемент.
A елемент линк разказва за сваляне, предприемат всички файлове се съхраняват тук
и да го включите в нашата уеб страница.
И в този случай, това е на CSS файла Bootstrap.
Така че ние просто ще копирате, че URL или този текст, и ние ще го хвърли вътре
на главата ни.
>> И аз няма да започне страницата за това, но можете да се доверите, че това работи.
Връзката ще можете да получите на CSS.
Го включват в страница и след това вие ще бъдете
можете да използвате всички на фърмуера класове, които знаете и любов.
Ако искате да го запазите на местно ниво и го има на своя собствена файлова система
вместо да се налага да отидете на интернет, за да го вземете,
като, ако искате да използвате сайта офлайн,
можете да използвате опцията за изтегляне.
Но по-голямата част, като се използва CDN е доста бързо, защото по този начин,
това е поддържан в актуално състояние за вас, както и.
Вие трябва да го актуализира ръчно от двамата.
Има смисъл?
>> Така че много от инструменти ще са тази построена в по подразбиране. Във вашата Pset7 и Pset8,
Вярвам, че е Bootstrap включено автоматично.
И в CodePen, за Например, това е вече
включени, защото аз прибавя се добави, че за настройка.
Така че, ако някога искате да поиграете с него, може просто да отидете на CodePen,
или да отидете на вашия ID, или нещо такова.
И вие може да бъде в състояние да достъп Bootstrap там,
но това не винаги е построена в по подразбиране в интернет.
Има смисъл?
>> Да.
Просто като recap-- имаме като пет минути преди края.
Но тъй като една рекапитулация, в нови уеб страници, можете да включите Bootstrap като този.
И след като веднъж сте го включи, можете да направите всички забавни неща тук.
Можете да отидете на, и може просто да чета СГО, можете да добавите някои готини стилове,
можете да имате компоненти като бутоните,
и таблиците и списъка елементи, които споменахме.
Има някои готини плъгини JavaScript, които може да искате да се изследват.
Те добавят някои готини интерактивност към уеб страницата.
Подобно на това прави диалог модален.
>> Така че има някои забавни неща можете да правите с Bootstrap.
Така че моят съвет към вас е давай и да го използвате в собствените си проекти,
следвайте инструкциите, ние Току-що е за това как да го получи,
и просто прочетете фърмуера, защото вие ще научите повече за това какво да се направи.
И така, ние сме отишли над, днес, как да се използва
документацията, какво сградата блокове са, и как тя е концептуално.
Така че сега моето предизвикателство към вас е направи сайт, използвайки Bootstrap.
Отидете в лекарите.
И използва инструментите, които сме Научих толкова далеч, за да се опита и да ги направи разбор
и да ги разбере.
И използват тези стилове и инструменти се видим там в уебсайта си.
И това е просто една голяма, експериментален процес.
>> Опитайте определен стил.
Работи ли?
Дали не е?
Опитайте удар неща заедно.
Вижте какво се случва.
Това е много по-самостоятелно ръководи, процес откритие.
Но днес, което сме научили за самите основи на това, което е Bootstrap?
Защо става това?
Как работи?
Как да започнете да използвате това, на първо място?
И така, сега, че сте над тази гърбица, вие
трябва да бъде в състояние да го направя доста гладко от себе си.
>> Така че още веднъж, през цялото код, което направихме, е тук.
Така че, ако някога искате за да получите реша на,
харесват, това, което е бърз измама лист за всички стилове?
Можете да отидете в тази извадка тук.
Ние имаме някои примерни стилове тук.
Ако искате да опитате предизвикателства отново от себе си,
можете да ги опитате тук и провери на решения.
Така че тази връзка ще бъде включени в кадрите, които
ще бъде изпратено до вас, разбира се.
Но тя също е тук.
Можете да направите пауза във видеото, ако искате.
Цялата информация, която се нуждаете, е щеше да бъде точно тук, на този сайт.
Така че, ако някой има някакви въпроси, ние можем ги вземат за следващите няколко минути.
В противен случай, благодаря на всички много за гледане.