Tip:
Highlight text to annotate it
X
>> НЕЕЛ Мехта: Па здраво свако ко гледа овде,
или гледате на мрежи, или на даљину.
Моје име је Нил, ово је ЦС50.
И данашњи семинар Одговарајући Веб дизајн са Боотстрап.
То је тема која је веома близу мом срцу.
Надамо се да ће бити близу срцу
као и до краја данашњег семинара.
Тако Боотстрап.
Колико сте урадили било врста веб развоја раније?
Добар износ?
Pomalo.
>> Дакле, Бутстрап је у свету највише популаран, Фронт-енд оквир.
Користи се по-- сам изабере Неколико случајних вебситес--
Лифт, Невсвеек, и Вогуе.
Користи се од стране једног броја сајтова.
То је веб дизајн оквир који ће вам омогућити да направите сајтова
како лепо и одговара.
И ја ћу ићи преко њих два концепта овде.
Lep.
Дакле, имате нормалну сајт на лева, који је направљен за само ХТМЛ.
Ви сте научили у класи ХТМЛ и у делу у дужини.
Бутстрап је начин да Ваши сајтови лепа.
Можете узети оно што је на лева страна екрана
и претворити га у оно што је на десна страна екрана са веома,
врло, врло мало код.
>> Добијате леп плаво дугме, добићете Тхе Фанци, заобљене ивице на екрану,
добијате приказ листе, што добијете картице, и тако даље са врло мало кода.
Заправо Нема ЦСС да морате да напишете сами.
Дакле, Бутстрап вам омогућава да имају ове пре-изграђен ЦСС
компоненте можете ставити унутар својој веб страници
да изгледа прелепо без веома много посла на своју руку.
То је стварно боотстрап, полазна тачка,
за ваше веб девелопмент авантуре.
И тако, када си само подругљив се сајт,
то је веома добро место за почетак.
Можете добити добру лоокинг сајт са врло мало рада.
И заиста, идемо за то сами
у току отприлике пет минута-- року од 10 минута.
Дакле, то је прилично лако направити неке велике сајтове.
Дакле, то је први део.
>> Други парт-- одзив.
Људи, данас, не само приступ интернету на својим лаптоповима.
Заправо, од 2014. године, више људи приступ Интернету путем мобилних уређаја,
Као телефона или таблета, или услуге или слично него сајтовима.
И сајтови су традиционално дизајниран са лаптоповима или десктоп
na umu.
И тако сајтови често нису веома погодан за ваш телефон.
Ако сте икада посетили харвард.еду на вашем телефону,
мало је неугодно искуство, зар не?
То је зато што није одговарајућа.
Покушавамо да сајтови који су одговорни,
да одговори на величинама екрана људи.
>> Дакле, ако је то телефон, то је ићи на телефон.
Ако је то таблета, то је ићи на таблету.
То подешава да се поклопи са Екран који се користи.
И тако Бутстрап такође пружа неке Врло, врло корисне алатке за то.
И ми ћемо о томе да разговарамо као добро.
Дакле, опет, постоје два дела Боотстрап-- лепа и одговоран.
Идемо да разговарамо о томе.
Прво, лепа.
А онда реагују.
>> Дакле, све је код да смо ће говорити о данас--
ћемо имати доста примера, пуно изазова, и тако ајде-- њега
све живи на овом сајту овде.
Овај слајд је оно што ми послали.
Дакле, ако сте овде, можете осетити слободно да не морају да пишу да наниже.
А ако сте даљински гледате, осећате слободно да повуче ово на вашем рачунару
kao.
Вероватно ће вам требати у току Курс овог семинара.
>> Дакле, идемо да користи Сајт се зове ЦодеПен,
што је заједнички кодирања окружење, током овог семинара.
И ЦодеПен-- и ја ћу показати вам овде прави фаст--
то вам омогућава да напишете ХТМЛ заједнички.
Могу да напишем, не могу га послати момци, момци може да га мења.
Чак и ако сте удаљени, хвала и даље могу јој приступити на тај начин.
Можете унети ХТМЛ код с топ и то аутоматски ћете
се конвертује у веб страница на дну.
Дакле, то је начин за вас да брзо испробати код
без да раде било какве ствари на ИДЕ или своју веб страницу,
или шта год.
>> Дакле, само напред и подићи ово сајт, ако сте удаљени
или ако сте овде, поготово ако сте удаљени.
ис.гд/цс50боострап.
Нема капе, нема подвлаке, нема ништа.
Дакле, оне који су Овде, дај ми само палац
када сте повукли до тој веб страници.
Dobro?
>> ПУБЛИКА: Да.
>> НЕЕЛ Мехта: Тако ћемо добити да да у пар секунди.
Прво ћемо доћи до, како да ли да ваши сајтови лепа?
Ми ћемо научити како да досадан, стара ХТМЛ, као што сам вам показао раније,
и да га у реалли нице компоненте,
као фини видгетс, лепо, у боји дугмад и етикете, и столови,
и све, користећи Бутстрапа.
Дакле, ако можемо да идемо преко до ЦодеПен да је управо стигао.
То би требало да изгледа мало овако.
Да ли изгледа овако за све?
>> ПУБЛИКА: Да.
>> НЕЕЛ Мехта: Ако си даљински, ит би требало да изгледа овако као добро.
Ако не, ја ћу вам показати како ускоро можете добити да изгледа овако
у будућем делу видеа.
Дакле, овде смо написали врло основни ХТМЛ,
као врста сте се користе у разреду.
То је прилично једноставан.
Нема украса.
И ми имамо неке ствари.
Ми смо дизајниран веома, врло једноставна старт уп
позовите Иалп! са којим можете наћи ресторана у том подручју,
и пронаћи рецензије, и правци на све оне.
То је веома добар концепт.
То није урађено раније.
То је врло јединствено име.
>> Па шта ћемо да покушамо да урадите је да помогне власнику
од Иалп! направити свој сајт изгледају стварно, стварно кул.
Дакле, за почетак, власник Иалп! је направио малу претрагу
кутија, а мало дугме, а онда можда мало
Истакнута подручја у Истакнута ресторан, а онда
списак другим ресторанима који су у том подручју.
Дакле, можемо само да пролазе кроз ХТМЛ код јако брзо.
Како сте комотни момци са ХТМЛ?
Урадили смо мало секција иу класи.
Пристојан?
>> Дакле, само као рецап, ХТМЛ је све о томе да
ознаке или елементи који говоре рачунар како нокаутирати веб страницу.
Дакле, ово Х1 овдје-- почети Х1, Добродошли да Иалп !, крај х1-- говори рачунар,
нацртајте велики ударац главом је каже, Добродошли у Иалп!
унутра.
Такође имамо облике.
Можемо улази овако, текст улаза, која ће пружати као поља за унос текста
пишете на.
Такође имају тастере.
Можете добити леп, кликне дугме.
Није ништа праву Сада, али ти дугме.
Можете имати дивови, или преграде, на разбити своју страницу у различите групе.
>> Можете имати ставове, имате дугмад.
Ако имате ставове, онда имате неуређене листе, ул,
и листе унутар тог, Ли.
Дакле, ово су врло основна градивни блокови веб странице.
И заиста, прилично сваки сајт видиш
ће бити изграђена коришћењем ове исте алате.
Наравно, сви не изгледају тако лоше, јер смо
ће то зачинити мало.
Тако да је ово досадно стари ХТМЛ и почетак претварајући га у прелепом месту
да смо управо видели пре пар минута.
>> Почнимо са врло једноставна.
Дакле, имамо овде ово дугме.
У боотстрап, као што смо видели, можемо хаве а нице, леп, плаво дугме.
И то није урадио ради прилагођени ЦСС.
Нема обичај ЦСС овде.
То је учињено додавањем класе у своје ХТМЛ елемената.
Ако сте покушали наставе, или хрефс, или сидра, или типе = "тект" за инпутс--
ХТМЛ елементи могу имати ове атрибуте.
Они могу имати додатне информације да би сте их дати.
>> И тако, у овом случају, часови су атрибут.
Тако да бих ти писао, дугме стиле = нешто у жицама.
И то атрибут ће рећи рачунар, то није било, стари дугме.
То је дугме које је у ова класа тастера.
И тако Бутстрап, ако га поклоните одређени стил на свом елементу,
да ће га извући одређени начин.
Дакле, пишем "бтн бтн-примарни.
БТН бити скраћеница за дугме.
Ви ћете сада да приметити Ми Угли дугме се
у лепу, лепог плавог дугмета.
Изгледа јако лепо када смо га кликните.
>> И тако оно што се дешава је имамо БТН класа и бтн-примарни класа
на нашем елементу.
И Бутстрап ће ићи и рећи, ОК, знам да постоје ове две класе.
Било елемент који има ова два треба извући класе овако.
Дакле, то је суштина како се приложити стилова, до елемената у Боотстрап.
Само приложите наставу на њих и да ће га тежине од по свом находјењу.
Ево још једног примера.
У улаз, можемо додати цласс = "форма-контрола".
И ја ћу ускоро показати где сте сазнати шта часове
доступни су од сваке врсте елемента.
Али класа која смо додатна има лепе, заобљеним угловима,
има лепо падинг има лепо, плави сјај на њега.
>> Такође можемо ићи у том облику.
И стиле = "форма-инлине", који ће наш вид, као што можете да замислите, редни.
Тако да гледа мало више Као што смо имали раније већ.
Дакле, пре него што пређемо на стил остатак страница, каквих питања о томе шта смо
урадио?
Ми само приложене класе нашим разним елементима.
А ја ћу вам показати како можете касније схватим шта часови су на располагању.
Прилогу смо класе које имају одређене стилове.
И то говори бровсер како да распоредите странице користећи
Боотстрап је обезбедио стилова.
Сва питања из публике?
>> Добро до сада?
Кул.
Много изазова са Боотстрап је само
знајући шта компоненте су доступно и како их користите.
И то је све научио са искуством и такође
читајући документацију, што ћемо разговарати о ускоро.
Дакле, имамо ту див.
То је само досадна, стара ствар.
Желимо да нагласимо да некако.
Дакле, у боотстрап, постоји Много компоненти на располагању.
А ово је гетбоотстрап.цом.
То је веома корисно референца.
Она садржи ствари као-- ево како ти дугме.
И можете да урадите нав барове, можете етикете, можете напредовати барове,
можете да урадите листу група.
У основи, то је све врсте од вас можда ћете видети веб страницу.
>> Ево једна да ћемо покушати одмах.
То се зове панела.
Ако сте икада користили Гоогле Сада, они имају картице.
Или било Андроид уређај има карата.
Имају мале беле кутије да имају ствари унутар ње.
И тако ћемо покушати и да да сами овде користи ствар
зове панел.
Дакле, ако ми придајемо цласс = "Панел Панел-дефаулт "на нашем спољном див,
онда приложите див цласс = - хајдемо само да проверим ову документацију.
див цласс = "панел наслов" и онда див цласс = "панели тела".
Опет, не брини памћења овај код.
То ће бити доступан на интернету.
>> Тако смо ово урадили и сада нашу досадним, стари див претворила у овом лепом, малом картом.
То је леп паддинг га, има границе, она истиче
од остатка странице, што је прилично кул.
Дакле, идемо у и променити Гет правци дугме да изгледају лепо.
Ко је у публици жели да каже ми шта могу да урадим на дугме
да изгледа лепо користећи Бутстрапа?
Да?
>> ПУБЛИКА: Могли бисмо додати класу.
И можемо да урадимо цласс = "бтн бтн-примарни".
НЕЕЛ Мехта: Да.
Постоји гомила другог Боје на располагању за буттонс--
или за било шта, за то питање.
Можемо да урадимо бтн-опасност и чине га црвени.
Evo ga.
Можемо да урадимо бтн-успех да буде зелено.
Можемо да урадимо бтн-инфо-- има гомила ствари које су вам на располагању.
Дакле, имам мали изазов за вас.
Дакле, постоји још једна ствар да сам оставио УН-стилед.
Овај врхунски Ресторани.
>> И желимо да користимо нешто зове лист групу да га стилом.
Дакле, мој изазов вама је идите на гетбоотстрап.цом--
Ја ћу станите овде.
гетбоострап.цом.
Иди на гетбоотстрап.цом, наћи део где иду преко листе група.
А ти ћеш ту ни видети Пример и прави класе
које можете користити како би ваш Листе инто ових лепих листу група.
Они су радили примере Кодекса примера, оно
Код користите, шта ХТМЛ код користите, и шта то излази.
>> Дакле, мој изазов за тебе-- хајде гетбоотстрап.цом,
да ли си овде или код куће, и покушати да додате стилове на овој ул
да изгледа лепо.
И користите стил листе група.
Желиш да одвојите пар минута, и претраживање документације,
три тхис себе?
Јер, као што радиш веб развој, схватићете пуно вашег рада
ће читати ова документација.
Дакле, мислим да је добро да се упознате са како читати документацију,
како да схватим шта је где, оно код примера можете користити,
шта можете искористити.
>> Дакле, опет, гетбоотстрап.цом, идите на картицу компоненте,
па дођите до листе група.
И видећете примере кода који можете користити како би ваш ХТМЛ-фит то.
Дакле, узмите неколико минута и покушати да истражи га сами,
да ли овде или код куће смо.
Ако сте код куће, паузирање видео, можда, и испробати сами.
Ако сте овде, ако идете на нашу вебсите-- ако освежите страницу,
видећете ово тамо.
Овај исти број је само тамо додајући нове стилове.
Дакле, узмите неколико минута.
Јави ми када се осећате добро о томе или када сте потпуно си изгубљен.
Zvuči dobro?
Кул.
Брзо издваја за оне од вас код куће, док чекамо,
ако идете на гитхуб сајту да сам ставио до пре пар слајдова,
ка почетку видеа, Имам ГитХуб репо, спремишта,
за овог разговора.
Сви ови примери кода који ћемо бити Говорим о се чувају овде.
Дакле, ако идете да оспори-1.хтмл, ово Све је код који имамо сада
на нашем ЦодеПен.
Дакле, можете једноставно напред, и копирање ово и налепите га у својој ЦодеПен.
На тај начин, можете пратити са оним што радимо овде.
Дакле, имам ову страницу отворену као и ми проћи кроз остатак семинара.
Опет, желите да изгледа као оно што сте види доле на дну екрана
тамо.
Osećati se dobro?
Чврста.
Сачекајмо за све остале да завршити са оним што они раде.
>> Да?
>> ПУБЛИКА: Претпоставимо да сам желео користити Бутстрапа кад куце
НЕЕЛ Мехта: Да.
ПУБЛИКА: Видим, на сајту, Први кораци страну.
Они ми опције Боотстрап Соурце Цоде, или Сасс.
Који од ових желим?
>> НЕЕЛ Мехта: Да.
Дакле, питање је, како се почели да користе Бутстрап сами?
То се само догоди да магично раде овде.
Дакле, ако имамо времена на крај семинара,
Ја ћу вам показати како можете узми га на свом веб страници.
Као овде, ја сам заправо стави у неке параметре који
ће га аутоматски лоадед, али ја ћу
показати да то урадите са сцратцх на своје веб странице.
>> ПУБЛИКА: Хвала.
>> НЕЕЛ Мехта: Да.
Dobro pitanje.
Osećati se dobro?
Osećati se dobro?
Кул.
Па ко зели да ме како су направили реци ово лепо изгледају и Боостраппи?
Која је прва класа додамо у ул?
ПУБЛИКА: стиле = "лист-група".
НЕЕЛ Мехта: Да. Листа-група.
И онда шта ћемо приложити списка?
Neko drugi?
ПУБЛИКА: А онда, после да стиле = "лист-група-тачка".
>> НЕЕЛ Мехта: Да.
>> ПУБЛИКА: И то је исто важи и за следећу.
>> НЕЕЛ Мехта: ли цласс = "лист-група-тачка".
Eto ga.
Имамо леп листе група, као што смо и очекивали.
Тако да идете.
У 10. минуту, направили смо ово досадно, старо Иалп! страна
изгледају лепо и професионално.
И то је само почетак.
Дакле, сада да се осећате добро због тога, хајде да
само напред и разговарати о још неколико компоненти које
можда доћи у руци као ти го током вашег авантуру.
>> Наравно, има доста оних овде.
И сада када сте сазнали како да то урадите листу групе,
можете научити прилично сами како то да урадите било шта од овога.
Али, наравно, хајде да покушамо и направити пар више се,
само да би осетили како можете да их користите.
Само ћу да одем са овим примером овде.
Опет, код које сам залепио овде је доступан овде.
Дакле, слободно га подигне.
>> Тако смо већ прошли кроз пар ових примера.
Тако имамо дугмад, које смо Већ смо видели како то да урадите.
Можемо направити дугмад већа.
Дугме цласс-- иде, бтн бтн-ЛГ и бтн-подразумевани чини бели.
Дакле, ово чини наш тастер већи него што би иначе могло бити.
Можда доћи, ако имате Велики дугме или нешто поднесе.
Видели смо на листи групе пример, видели смо образац пример.
>> Једна врло битна је икона.
И иконе су начин за додавање интересантне ствари, као што су Провера
ознаке, или плуса, или пријатељ иконе, или поново иконе,
или било шта на ваш веб апп.
Па опет, ако се у ту, компоненти, глипхицонс,
су иконе на располагању за Боотстрап.
Постоји исцрпна списак свих оних овде.
Дакле, само као пример, хајде да покушамо да додате.
>> Дакле као што су Фацебоок, ми смо покушавали да да има дугме Адд фриенд.
Хајде да прво додати мало стила.
дугме цласс = "бтн бтн-успеха".
И тамо идемо.
Додајмо икону овде.
Шта икона, мислите, има смисла да овде ставимо?
Вероватно сте видели на неке веб странице или шта год,
али оно што је пример иконе које Можда одем и унутар овог дугмета?
Слободно да прегледате овај став, Ако вам је потребна било инспирација.
Има много корисних Они можете преузети овде.
Да?
>> ПУБЛИКА: Можда је један глипхицон корисник?
НЕЕЛ Мехта: У реду.
Ovaj.
То је прилично добро.
Да.
На Фацебоок-у, ја мислим ће изгледати мало тако.
Ево како идемо о додајући иконе нашим страницама.
Само имамо спан-- педаљ је неутрални контејнер за нешто.
А див је контејнер за нешто, распон је још један контејнер.
ДИВС имају редова око њих, протеже не.
Тако да је на различите начине има генеричке контејнере.
Као да нема смисла да га стави унутар једног става или било шта.
Морамо да га стави унутра нешто ипак,
тако да само стави унутар распона.
Тако спан цласс = глипхицон глипхицон корисник "близак п.
И сада имамо ицон унутар дугмета.
>> Дакле, не у потпуности за разлику изгледају Шта можете видети на фацебоок.цом.
И тако је лепо да они могу заправо може поставити било где желите.
У твојим заглавља баровима, у вашој листи групама.
Šta god.
То не мора да буде унутар једног дугмета.
Дакле, као пример, ја могу стави у исти разред овде.
"глипхицон глипхицон корисник".
И изгледа исто.
Дакле, ово ицонс-- можете користити распон цласс = "глипхицон глипхицон-год".
И то ће вам омогућити да додате иконе где год желите.
И иконе су веома важна део израде веб сајта изглед
професионална и добро урађено.
Зато немојте претеривати, али је често је добра ствар да знате.
>> Панели, опет.
Ја ћу урадити ово поново као рецап јер они некако умешан.
Приметићете да у претварање своју нормалну ХТМЛ
сајт на боотстрап-афиед сајт, имаћете
да додате додатну структуру на сајту.
На пример, имамо екстра Дивс овде само зато што су
је потребно да се направи панел.
Дакле, само имајте то на уму да ћете имати додатну структуру.
Дакле, "Панел-дефаулт".
Можда је табла-заглавље.
Мислим да је панел-наслов.
Да.
Evo ga.
Дакле, опет, ту је наша плоча.
>> Још једна ствар која ми није обухватала још, столове.
Столови, по дефаулту изгледају некако ружно.
Ovako.
Међутим столови су, наравно, веома важан део
шта ћете радити у веб развоју.
У Псет7, На пример, ЦС50 Финансије, који ће изаћи ускоро,
ћете користити много столова.
И много веб дев користи много табела за приказ информација,
као акција или резултата, или шта год.
>> Дакле, стилинг табеле је заправо врло лако.
Треба додати да табле цласс до вашег стола.
И, усуђујем се рећи, изгледа прилично лепо.
То можете учинити додатне ствари, као "сто сто пругама".
И видећете резултате овде.
То можете учинити стони граничи.
Има много опција можете.
Али, у основи, додајући сто, сто класа,
учиниће ваше табеле изгледају лепо.
Дакле, то је укратко резиме о неке од важнијих стилова
и компоненте ви ћете Потребно је да користите за Боотстрап.
Тако да мислим да тајности до нашем лепом делу.
Одговарамо на питања о томе како да ваши сајтови лепа?
Како можете да користите ово компоненте у своју корист?
Osećati se dobro?
Да?
ПУБЛИКА: Можда је глупо питање,
али можете користити Бутстрапа на Википедији?
Ако уређујете Википедиа страну?
НЕЕЛ Мехта: Да.
Дакле, питање је било, ја сам уређивање Википедиа страну,
могу укључивати Бутстрапа стилова тамо?
>> ПУБЛИКА: Да.
>> НЕЕЛ Мехта: И тако је Бутстрап у основи велики ЦСС стила.
ЦСС стиле схеет само каже, кад год Имам ову класу, приложите ове стилове.
Дакле, у ЦСС стиле схеет за Боотстрап ће бити нешто као .бтн,
дугме класа, добиће се као заобљена угао граница или било шта друго.
У основи, то Боотстрап само гомила класа и гомила стилова
наведено за оне класе.
Дакле, докле год имате тај ЦСС, Ова листа правила у вашој страници,
ћете добити боотстрап стил.
То је, наравно, зависи која има Боотстрап стилове у својој страници
početi sa.
>> И тако у Википедији, вероватно није могао
то јер Википедиа нема Бутстрапа у њој.
Али, ако је имао Бутстрапа, вероватно могао да урадим.
А ако желиш, можеш укључују се, али то би могло
разбити постојеће изглед странице.
Али јако добро питање.
Можете користити Бутстрапа где год да је укључен,
али то није изграђен у подразумевано.
>> ПУБЛИКА: Хвала.
>> НЕЕЛ Мехта: Да.
Има ли још питања?
Да.
Дакле, да ли овде или код куће смо, само једном гетбоострап.цом-- запамтите,
гетбоострап.цом-- је твој пријатељ.
Кад год користите Боотстрап, ово ће вам дати
упутства о томе како да добијете почела, како се користе компоненте.
Постоје неки кул ЈаваСкрипт плуг-инс да нећемо овде,
али они су вреди као добро.
Дакле, ово је твој пријатељ.
То је само важно да се некада како се ово користи.
>> Дакле, хајде да цхат мало о прављење одговарајуће сајтова.
Дакле, као што сам већ рекао, људи су користили својим лаптоповима, они користе своје мобилне телефоне.
И као што добро да замислите, ово је веома различит величина екрана од тога.
И тако исто аутора да изгледа добро на мом телефону
неће изгледати добро, нужно, на рачунару.
Дакле, оно што треба да урадите је Направите Ваш сајт прилагоди.
То мора да се прилагоди на различите екран величине да је на.
>> Она има да каже, знам да сам на компјутер, велики лаптоп рачунар, требало би да прошири.
Знам да сам на телефону, ја би смањити.
И тако Боотстрап даје неке Врло, врло корисни алати за то.
Тако Боотстрап Хајде да те паузу сајт у 12 стубова.
Можете направити редове и имају 12 колоне.
И можете поделу они ипак желите.
Можете имати једну велику ствар,, који је широк 12 колоне.
Можете имати две ствари који су шест сваку.
То можете урадити једну ствар која је четири, који је два, или онај који је шест.
То можете учинити три, три, три, три.
Можете учинити све слом који желите.
>> Можда ваш веб страница треба да имају лева колона да је трећину ширине.
Дакле, то ће бити четири колоне широка и остатак странице
ће бити осам стубова ширине.
Дакле, ово је пример.
Хајде да подигне још један пример.
>> ПУБЛИКА: Доес ит увек морају бити још подељени?
Може ли бити седам, пет поделу?
>> НЕЕЛ Мехта: Да.
То може бити седам, пет.
Да.
Докле год се додаје до 12, то је у реду.
Дакле, хајде да се вратимо овде.
Опет, код које је Овде је такође доступан овде,
под реагује пример.
Тако сам зауставио неке Пример реагују код овде.
Дакле, ово урадите помоћу ствар се зове ред.
Ред је само још један разред.
То је још један стил додате на свој Дивс да им праве своје компоненте.
>> Тако ти кажеш, див цласс = "ред" да се направи ред,
да себи дају 12 колоне простора.
И онда сте ставили колоне унутар тога.
Дакле, овде смо цол-КСС-6.
Не брини КСС.
Причаћемо о у секунди.
Али, у основи, имамо један Оно што је шест гола.
Зовемо је оставио.
И то је овде лево кутија.
Имамо једну ствар која је шест од 12 стубова ширине.
И то је једна на десној страни.
>> и само даје марки Ваш див га напунити сива.
Дакле, то је тако можемо видим да су различити.
И то је први пример.
То је веома једноставан пример како сте ће користити своје редове и колоне овде.
Ви дефинишете ред помоћу цласс = "ред".
И онда ти цласс = "цол-КСС-6" до половина, "цол-КСС-6" да уради другу половину.
Ово је компликованије пример.
Хајде да погледамо Мали, Огромна, Остатак један.
>> Можемо направити Тини две колоне ширине, можемо направити огромне шест колоне ширине,
а остатак колоне ширине. Четири
То додаје до 12.
И тако они завршити простире ширина странице.
Опет, имамо ред напољу.
Онда имамо див цласс = "цол-КСС-2" затим 6, а након тога 4.
И то ће обезбедити структура за нас.
И тако можемо ставити шта год дођавола смо унутра желим овде.
Уместо Мали, можемо ставити дугме.
дугме цласс = "бтн бтн-примарни".
И тако приметити да је наша дугме не заузима сву ширину,
али барем је ограничена да толико простора.
>> Дакле, то је све лепо и добро.
Дакле, сада можемо прекинути нашу веб страна у комаде, ширина мудар.
Можемо рећи желимо да имамо лево колони, и десна колона, и тако даље.
Али нисмо прешли како би се одговара.
И тако Бутстрап хајде да урадимо као добро.
Она има те ствари зову Бреакпоинтс.
Дакле, има начина да сазна да ли ти си на лаптопу, ти си на таблету,
ви сте на телефон хоризонтали, или сте на телефону вертикално.
Зна величину екрана.
И прекрши ово у четири Цатегориес-- Велики или ЛГ, који је лаптоп, обично.
МД или средње, што је таблета.
СМ, мали.
Или КСС, врло мали.
И тако, када сте навели колона, ви кажете,
требало би да буде шест стубова ширине на додатном малом уређају.
Зато смо урадили цол-КСС-6.
Говоримо да је требало бити шест од 12 стубова ширине
на додатном малом уређају.
И ако је нешто већи, само ћемо дефаулт да користите додатни малу величину.
Ако је ишта већи од Веома мали, то ће бити шест гола.
И тако можемо искористити они да од наших стубова
заузимају другачију количину Колоне на основу величине екрана.
Идемо у овом реагује промену величине.
Дакле, ми имамо наше колоне.
И каже, "цол-ЛГ-6 кол-КСС-12".
Дакле, с обзиром шта знаш До сада, оно што радите
Мислим да ће догодити на великом екрану?
Па, то је некако дат начин, али шта
мислиш да ће изгледати Свиђа на великом екрану?
А зашто је то тако?
>> ПУБЛИКА: Да ли је то на великом екрану, то је
да само узети Део пуног простора?
Као половини тога, претпостављам?
>> НЕЕЛ Мехта: Да.
>> ПУБЛИКА: А на мањи екран, иде
да заузимају цео екран, 12.
НЕЕЛ Мехта: Да.
Jel tako.
Дакле, као пример, хајде да само погледајте овде.
Да.
Дакле, све што је ЛГ или биггер-- тако да је мој рачунар се деси
да се лг јер је Прилично виде-- учиниће
је раме уз раме, јер је то кол-ЛГ-6.
Зато што је то на велика, то га чини шест стубова ширине и шест стубова ширине.
Хајде да видимо шта ће се десити ако чине ово у један мањи.
Ја ћу само да УН-овог целог екрана.
И ја ћу да смањи екран.
Идем да смањи екран, тако да Изгледа као да сам на мањем уређају.
Зато ћу да га смањи овако.
>> И воила.
Сада се сложен јер сада смо отишли
од великог да-- ово је вероватно ектра мала величина екрана.
И сада се каже, добро, нисмо у великим, ми смо у екстра малом земљи.
Тако ћемо користити екстра мала величина.
И ми ћемо КСС-12, КСС-12.
Дакле, то ће бити сложен.
И само приметити да постоји ствар се зове тачку прекида.
На тачку прекида гдје је сте направили прелаз
од екстра малих до мале, бити веће или мање, и тако даље.
>> Дакле, само приметити да, као што сам слајд ово се, на крају ћете доћи до тачке
где ће скочити да буде раме уз раме.
Eto ga.
Дакле, ту је тачка прекида тамо.
Тако можемо учинити још више компликује.
Сада можемо рећи, ово ствари би требало да буде четири гола.
То јест, они треба заузимају око трећину
говора на врло великим уређајима.
На средњем уређају, треба узимати до пола екрана јер је мд-6.
На веома малом уређаја, треба узети 12.
И то изгледа прилично природно.
Хајде да пробамо ово за себе.
>> Дакле, на великом екрану, они су четири гола.
Скупи га мало.
И они сада шест су широке.
Дакле, ово је шест, шест, шест.
Скупи још више, а онда они ће бити потпуно слажу.
Дакле, на пример, има смисла ако имате картице, као што су вести картица,
На пример, ако гдје је на веома великом екрану,
да је у реду ако имате неколико раме уз раме јер сви би добили довољно простора.
Али они морају да имају довољно простора.
Дакле, на мањи екран, ти би хтео да им дам
више простора, пропорционално, странице.
>> Дакле, као прави светски пример, рецимо да имамо Твиттер.
И имамо оквир за текст, тако можете твеет са стране.
И имамо списак трендинг теме на десној страни.
Дакле, на великом екрану, би требало су они буду раме уз раме,
тако да можете да их видите на стакло.
Али на мањи екран, треба да урадимо 12 и 12,
тако да су теме Трендинг су испод твеет подручја.
Зато што је твит подручје је Главна ствар и на малом екрану,
теме Трендинг не ма баш толико.
И тако смо их одмах испод, тако да они могу обојица добили довољно простора.
Нека сада смисла?
>> ПУБЛИКА: Да.
>> НЕЕЛ Мехта: Чврста.
Тако да су сви примери имам овде.
Хајде да пробамо и урадимо изазов.
Дакле, опет, ово је изазов-2.хтмл за Они од вас прате заједно код куће.
Дакле, мој другар, Марк Зуцкерберг, дошао код мене неки дан.
И он је као, Нил, имам стечен добар у веб дизајну.
Ја могу да урадим ХТМЛ.
Ја сам ово мало је, Нова измена на Фацебоок.
Имам нову идеју за колико ми треба обликовати Фацебоок.
И ево га.
Baš ovde.
Ево неких примера кода.
Тако се зове Фанцибоок.
>> Ми имамо неке ажурирања статуса.
Имамо Немо, Мике Косовски, Вооди-- три статус упдатес.
И онда имамо списак Онлине пријатељи одмах испод њега.
Дакле, он је урадио свој домаћи задатак.
Он зна понешто о Боотстрап, он је направио приказ листе,
Он је урадио мало ХТМЛ.
Дакле, он има веб страницу.
Али он је као, Нил, не знам разумети одговарајући дизајн на све.
Да ли имате стручњаке који да ми помогнете са тим?
И на срећу, сада сте стручњаци за бржи дизајну.
>> Дакле, оно што је он рекао ми је да он жели Фанцибоок да изгледа овако.
На веома малом уређаја, као телефон, све
треба слажу, као овде.
Дакле, имате рок унапред, до врха, а затим
треба имати чат трака на дну.
Али таблета или медијуму уређај, требало би да буде пола-пола,
као у временској оси треба да буде пола и листа цхат пријатеља
треба да буде на другу половину.
>> Затим на лаптопу, рок треба узети три четвртине
а затим чат хеџ треба заузимају још једну четвртину.
И тако он је као, Нил, имам ово код овде, али то није одговарајући.
Потребно је да се понаша овако.
Дакле, мој изазов за вас дат овај код овде-
ако освежите ЦодеПенс, видећете ово.
Или ако само налепите у коду на изазов-2, видећете ово.
>> Ево овај пример кода.
Видећете неке КСКСКСС.
Хоћу да промените КСКСКСС, тако да временски рок и листа пријатеља
прати ове спецификације овде.
Не брините о томе шта је унутар временског оквира за сада.
Добићемо да у следећем кораку.
Али за сада, хајде да видимо да ли можемо добити ове ствари да се раздвојимо овако.
Значи ли то смисла?
Дакле, ако сте код куће, паузирање видео и покушајте
како би ваш веб страницу изгледају овако реагују.
Ако сте овде, узмите Као два, три минута.
Слободно ћаскање са комшијом, и покушати, и поправити господин Цукерберг је
реагују дизајн проблема.
Ако имате било каквих питања, слободно јавите ми.
Osećati se dobro?
Gotovo?
Lep.
>> ПУБЛИКА: [неразумљиво].
НЕЕЛ Мехта: Шта?
>> ПУБЛИКА: Добро сам.
>> НЕЕЛ Мехта: Ох, добро.
Lep.
ПУБЛИКА: Ствар у вези 12, је то Боотстрап
третира дати простор на екрану као 12 Јединице наћи и онда дели то има?
Како тачно функционише ПРОПОРТИОНИНГ рад за ово?
>> НЕЕЛ Мехта: Да.
Дакле, питање је, како Да ли ПРОПОРТИОНИНГ
раде за боотстрап, зар не?
>> ПУБЛИКА: Да.
НЕЕЛ Мехта: Кад год имате див цласс = "ред",
без обзира колики је екран, Бутстрап ће вам дати 12 јединица
исте величине као заузимају толико величину.
Дакле, у цол 1, увек је 8.33% величине екрана,
да ли је то ова широка или да је то гола.
И тако, наравно, на мањи екран, свака колона је мања.
Још увек имаш 12 колоне широк, то је мањи.
Дакле, то је на вама да се уверите да ствари заузимају више колона,
пропорционално, да надокнади за тај недостатак простора.
Da li to ima smisla?
>> ПУБЛИКА: Да.
Hvala vam.
НЕЕЛ Мехта: Добро питање.
ПУБЛИКА: На велики екран, можете имати
временски рок заузимају три четвртине?
>> НЕЕЛ Мехта: Да.
НЕЕЛ Мехта: Како се момци осећате?
Dobro?
Кул.
Дакле, вратимо.
И хајде да пробамо и поправити овај дио веб-сајта господина Зуцкерберг је.
Тако су рокови је овде, на врх, и листа пријатеља
је на дну.
И тако само треба да доделите колоне, са одређивање величине пропорционално,
У свакој од њих.
Дакле, овај први ккк је за временској линији.
Оно класе морамо ставити овде?
Шта сте ви ставили овде?
Запамтите, на великом екрану, потребно да заузимају три четвртине ширине.
И шта стил ће вам дати?
На великом екрану, три четвртине ширине.
Оно класа ми не користимо?
ПУБЛИКА: Дакле, ми ћемо само бити уређивање да је првостепено класе.
НЕЕЛ Мехта: За сада.
Да.
>> ПУБЛИКА: Нисмо уређивање сваког, индивидуална карактеристика временској линији?
НЕЕЛ Мехта: Не сада, барем.
Дакле, цела ова ствар је блок.
Ми само мењања пројектовање блока.
Дакле, овде не цол-ЛГ-9 јер је то девет од 12 широка на великом екрану.
А онда на средњем екрану, колико колона да узмем?
ПУБЛИКА: Требало је да буде пола-пола.
НЕЕЛ Мехта: Тако је.
Колико је то?
>> ПУБЛИКА: Дакле, шест.
НЕЕЛ Мехта: Шест.
А онда врло мали треба бити-- ако њега заузима целу ширину реда,
колико би требало да буде?
ПУБЛИКА: 12.
НЕЕЛ Мехта: 12.
Да.
И сада морамо да променили они други,
тако да заузима остатак простора.
Дакле, цол-лг--
ПУБЛИКА: То ће заузимају цео екран?
НЕЕЛ Мехта: То заузима четвртину екрана на великом уређају,
као што смо показали овде.
>> ПУБЛИКА: Три.
>> НЕЕЛ Мехта: Три.
А онда Цол-МД-6 да уп остатка простора.
цол-КСС-12.
Тако да сада имамо рок заузима три четвртине
странице у великом екрану а онда једна четвртина на страни.
А онда, ако величина екрана надоле, требало би да у складу са тим величину.
Дакле, то је сада сложен, на веома малом екрану.
И ако је величине до мало, они треба да буду тачно пола-пола.
Тако смо урадили до сада.
Veoma kul.
И тако нећемо урадити други део изазова.
То можете учинити сами.
Али, у основи, мораш Покушаћу да то одговара
као па-- направи тимелине предмети, сами, одговарајући.
Дакле, сада смо прошли кроз све што треба да знате
о одговорног страни Боотстрап.
Каквих питања у вези реагује дизајн са Боотстрап
и како можете ићи око радиш то?
Да?
>> ПУБЛИКА: Да ли је сличне, ако имали смо уграђени видео
и желели смо да контролише скала на којој видео сам--
величина видео иде од лаптопа на телефон.
НЕЕЛ Мехта: Да.
Više ili manje.
Морао би да кажем видео на заузимају много простора као што је дато,
што је мало нервира понекад.
Али језгро идеја је иста.
Видео, као и било који други објекат у страница, као дугме или било шта друго,
докле год користите колоне и редови,
можете да дате одређена количина простора.
И тако се то у част да је уметнута друго питање, јер као што је ИоуТубе
уграђује имају одређену величину, жељену.
Али теоретски у најмање, то ће радити.
Цоол?
>> ПУБЛИКА: Ја онда претпостављам, за слике, зар не стварно
Потребно је да имате различите верзије иста слика у различитим величинама
за лаптоп против иПхоне?
Да Питање је, да ли треба да имају слике које реагују као добро.
И заиста, то можете да урадите.
Мислим да је то у ЦСС.
Али Боотстрап дозвољава да то као добро.
Можете имати одговарајуће слике.
Можете имати ваше слике ресизе према величини странице.
И ту је врло нова ствар ХТМЛ5, најновија верзија ХТМЛ,
и ЦСС3, најновији верзија ЦСС, који
ће вам тражити различите слике на основу величине екрана сте.
Обично, добро је довољно само има твоја слика само смањити или расте до
Међутим велика је потребно да буде.
Али можете, ако желите да, имам једну 32 од 32
за веома мале екране, и 64 од 64 за великом екрану,
и онда служе онима селективно.
Ti to možeš.
Готово је од стране неких људи.
Још увек је прилично најмодернија.
Али кратак одговор, одговара имагес-- Бутстрап да сачувате дан тамо.
Цоол?
>> ПУБЛИКА: Хвала.
>> НЕЕЛ Мехта: Па хајде причамо о томе како брзо
да се ово у свом веб страници.
Рецимо да желите да твој сопствени сајт помоћу Бутстрапа.
И тако хајде да само шетња кроз њега заједно.
Рецимо да само да нормална ХТМЛ страница.
Слободно пратите у год ваш омиљени едитор.
Дакле, имамо само мало ХТМЛ страницу.
Можемо да урадимо! ДОЦТИПЕ хтмл.
Ово је такође ХТМЛ, наша страна.
Ništa novo.
Ми смо то и раније.
Дакле, овде имамо ХТМЛ и можемо ставити ствари унутра.
Можемо имати нашу дугме.
И као што сам рекао, ово није нужно иде на посао.
Зашто би ово не ради?
Зашто не добијамо лепо, шарене дугме?
>> ПУБЛИКА: Зато што нисмо га повезати пројекту Бутстрапа или фајл?
НЕЕЛ Мехта: Да.
Тачно.
Зато што је то Боотстрап-- само фенси ЦСС датотеку.
То је низ стилова који су везани за своје елементе.
Овде смо га рекли да желите да користите ове стилове.
Ја ћу величине која се мало.
Ми смо га, рекао желимо користити ови стилови, али никад нисмо
рекао је оно што су стилови су.
И то је твоја Питање од раније био.
То је одговор на то.
Морамо да нађемо начин да се стилове и укључити их у нашој страници некако.
И тако Боотстрап воља покажи нам како се то ради.
>> Дакле, ако идете на врх овде, Геттинг Стартед.
Постоји више начина да га преузму.
Ово можда не би нужно смисла.
Боотстрап-- ће пустити ти узми ЦСС саму датотеку.
А ти си то укључено у својој страници.
Извор код је ако желите хацк на њему сами.
Не треба баш ово.
Сасс је језик који саставља у ЦСС.
Мислите о томе као предпроцесор.
Као ПХП је предпроцесор од ХТМЛ Сасс је Претпроцесор за ЦСС.
Дакле, ако желите да то урадите На тај начин, можете то да урадите.
>> Најлакши начин користи ЦДН, или садржај испорука мрежа.
То је сајт који управо сервира копију Боотстрап
врло брзо за вас да укључују у својој страници.
Ево један пример.
То ће вам дати овај линк елемент.
Линк елеменат говори иоур бровсер, предузети све датотеке се налазе овде
и укључити га у нашој веб страници.
И у овом случају, то је Бутстрап ЦСС датотеку.
Зато ћемо само копирате тај УРЛ, или тај текст, а ми ћемо га бацити у
наше главе.
>> И неће почети страницу за то, али можете веровати да ово ради.
Овај линк ти је ЦСС.
Укључи се у вашем страна и онда ће бити
могли да користите све у Боотстрап класе које знамо и волимо.
Ако желите да остане локално и има га на свом систему датотека
уместо да иду у интернет да га зграби
као да желите да користити сајт оффлине,
можете да користите опцију Довнлоад.
Али у највећем делу, користећи ЦДН је прилично брзо, јер тај начин,
то чува ажуриран за вас.
Морате да ручно ажурирање ни.
Ima smisla?
>> Дакле, много алата ће имати ово изградили у подразумевано. У вашем Псет7 и Псет8,
Верујем да је Боотстрап аутоматски укључена.
И у ЦодеПен за пример, већ је
укључен јер ја додао адд то подешавање.
Дакле, ако сте икада желите да играмо с тим, можеш да идеш на ЦодеПен,
или идите на ИД, или шта год.
А ти би могао да Приступ Боотстрап тамо,
али то није увек гради у, по дефаулту, на Интернету.
Ima smisla?
>> Да.
баш као што имамо рецап-- као пет минута.
Али као подсетимо, у новим веб страницама, можете укључити Бутстрапа овако.
А када сте га укључена, можете да урадите све забавне ствари овде.
Можете ићи, а ви можете прегледати само ЦСС, можете да додате неке цоол стилове,
можете имати компоненте као дугмад,
и табеле, и листа ствари које смо поменули.
Има неких цоол ЈаваСцрипт Плугинс, који можда ћете желети да истражите.
Они додати мало цоол интерактивност на веб страници.
Као овај прави модални дијалог.
>> Дакле, постоји нека забава ствари можете да урадите са Боотстрап.
Дакле, мој савет вам је напред и га користити у својим пројектима,
пратите упутства смо Управо сам како да га добити,
и само читати Бутстрапа сљедећих разлога научићете више о томе шта да радим.
И тако смо прошли преко, данас, како користити
документација, та зграда блокови су, и како је концептуално.
Тако да сада мој изазов вама је направи сајт користећи Бутстрапа.
Иди у доцс.
И користе алате који смо научили до сада да покушамо и анализирати их
и разумеју их.
И користите те стилове и алате видите тамо на Вашем сајту.
И то је само велика, експериментални процес.
>> Испробајте одређени стил.
Da li radi?
Да ли није?
Покушајте стављајући ствари заједно.
Погледајте шта се дешава.
То је у великој мери само вођена, откриће процес.
Али данас смо научили Сами основе онога што је Бутстрап?
Зашто то ради?
Kako to radi?
Како да почнете да користите је, на првом месту?
И сада када си над тим грбом, ви
треба да буде у стању да то уради прилично глатко сами.
>> Дакле, још једном, све Код јесмо овде.
Дакле, ако сте икада желите да бисте добили четку се на,
као, шта је брзо преварант лист за све стилове?
Можете ићи у овом узорку овде.
Имамо неке примере стилове овде.
Ако желите да пробате изазови опет по себи,
можете их покушати овде и цхецк оут решења.
Дакле, ова веза ће бити укључени на слајдовима, које
ће бити послат на вас, наравно.
Али то је такође овде.
Можете паузирати видео, ако желите.
Све информације вам је потребно је Биће овде, на овом сајту.
Дакле, ако неко има било каквих питања, можемо да их у наредних неколико минута.
Иначе, хвала вам свима много за гледање.