>> Neel Mehta: Taigi labas Kiekvienas, kuris žiūri čia
ar žiūrėti internetu, arba nuotoliniu būdu.
Mano vardas Neel, tai CS50.
Ir šiandien seminaras reaguoja Web dizainas su bootstrap.
Tai tema, kuri yra labai artimas mano širdžiai.
Tikimės, kad jis bus artimas jūsų širdis
taip pat iki šiandienos seminaro pabaigoje.
Taigi įkelties.
Kiek jūs turite padaryti bet rūšies interneto svetainių kūrimas anksčiau?
Gera suma?
Truputį.
>> Taigi įkelties yra labiausiai pasaulyje populiarus, front-end sistema.
Ji naudojama by-- aš pasirinkome pora atsitiktinių websites--
Lyft, "Newsweek", o "Vogue".
Jis naudojamas pagal svetainių skaičius.
Tai web dizainas sistema, leis jums padaryti jūsų svetainę
tiek gražus ir reaguoja.
Ir aš eisiu per jų dvi sąvokos čia.
Gražus.
Taigi jūs turite normalų svetainėje ant kairysis, kuris yra pagamintas vien tik HTML.
Jūs išmoko HTML klasėje ir skyriaus ilgis.
Bootstrap yra būdas padaryti jūsų tinklapis gražus.
Galite kas dėl Kairėje pusėje ekrane
ir paversti ją kas dėl dešinėje pusėje ekrano, labai,
labai, labai mažai kodą.
>> Jūs gaunate gražią mėlyną mygtuką, gausite išgalvotas, užapvalintais kraštais ekrane,
Jūs gaunate sąrašo rodinį, galite gauti kortelės, ir taip toliau su labai mažai kodu.
Yra tikrai ne CSS, kad jūs turite parašyti patys.
Taigi įkelties leidžia jums turi šias anksto pastatytas CSS
komponentai galite įdėti viduje savo tinklalapį
kad ji atrodo gražiai, be labai daug darbo savo.
Tai tikrai įkrovos, atspirties taškas,
Jūsų interneto plėtros nuotykius.
Ir todėl, kai jūs tiesiog tyčiojasi interneto svetainę,
tai labai gera vieta pradėti.
Jūs galite gauti gerą atrodantį svetainės su labai, labai mažai darbo.
Ir iš tiesų, mes ketiname tai padaryti patys
į panašaus penkių žinoma minutes-- per 10 minučių.
Taigi, tai gana lengva padaryti puikių svetainėse.
Štai pirmoji dalis.
>> Antrasis part-- reaguoja.
Žmonės šiais laikais, ne tik prieigą prie interneto savo nešiojamuosius kompiuterius.
Tiesą sakant, nuo 2014 m, vis daugiau žmonių prisijungti prie interneto per mobiliuosius įrenginius,
pavyzdžiui, telefonus, arba tablečių, arba paslaugas ar pan nei interneto svetainėse.
Ir tinklapis tradiciškai buvo sukurta nešiojamieji kompiuteriai ar staliniai kompiuteriai
omenyje.
Ir taip dažnai nėra svetainės labai gerai tinka prie jūsų telefono.
Jei jūs kada nors lankėsi harvard.edu telefoną,
tai tipo erzina patirtis, tiesa?
Tai todėl, kad tai ne reaguoja.
Mes stengiamės, kad svetainių, kurios reaguoja,
kad atsakyti į žmonių ekrano dydžio.
>> Taigi, jei tai telefonas, tai Išvykstate telefonu.
Jei tai tabletė, tai Išvykstate tabletę.
Ji prisitaiko prie sutaptų ekranas, kuris yra naudojamas.
Ir taip įkelties pat pateikiama keletas labai, labai naudingų komunalinės už tai.
Ir mes ketiname aptarti, kad taip pat.
Taigi, vėl, yra dvi dalys Bootstrap-- gražus ir atsakinga.
Mes ketiname kalbėti apie juos.
Pirma, gražus.
Ir tada reaguoja.
>> Taigi visą kodą, kad mes ketiname kalbėti apie today--
mes ketiname turėti daug pavyzdžių, iššūkių daug, ir todėl jį on--
visi gyvena šioje svetainėje čia.
Tai skaidrių yra tai, ką mes išsiųsti.
Taigi, jei esate čia jūs galite pajusti laisvai neturite rašyti, kad žemyn.
Ir jei jūs žiūrite nuotoliniu būdu, jausti nemokama traukti tai ant jūsų kompiuterio
taip pat.
Jūs tikriausiai reikia per šio seminaro kursą.
>> Taigi mes ketiname naudoti svetainė vadinamas CodePen,
kuris yra bendradarbiavimo kodavimas aplinka, šio seminaro metu.
Ir CodePen-- ir aš parodyti jums, čia nekilnojamojo fast--
jis leidžia jums rašyti HTML bendradarbiaujant.
Galiu ją parašyti, galiu siųsti jį į vaikinai, vaikinai gali jį redaguoti.
Net jei esate nuotolinis, jums vis dar galite naudotis, kad taip.
Galite įvesti HTML kodą ne viršuje ir jis bus automatiškai
būti konvertuojamos į interneto puslapis apačioje.
Taigi tai yra už jus būdas greitai išbandyti kodą
be daryti bet kokio stuff Jūsų IDE, ar savo svetainę,
ar kas.
>> Taigi pirmyn ir atsigriebti tai svetainė, jei esate nuotolinio
arba jei esate čia ypač jei esate maža.
is.gd/cs50boostrap.
Nėra kepurės, jokių pabraukimo, nėra nieko.
Taigi tie iš jūsų, kurie čia tik man nykščius
kai jūs iškedentas iki to tinklalapio.
Geras?
>> Auditorija: Taip.
>> Neel Mehta: Taigi mes gauti į tą, kuris vos per sekundę.
Taigi, pirmiausia, mes ketiname gauti, kaip padaryti, kad jūsų tinklapis gražus?
Mes ketiname sužinoti, kaip imtis nuobodus, senas HTML, kaip aš parodžiau jus,
ir pasukite, kad į tikrai gražus komponentai,
patinka gražūs raštai, gražus, spalvotas mygtukai ir etiketės, ir lenteles,
ir visi, naudojant bootstrap.
Taigi, jei mes visi galėtų eiti per su CodePen, kad jūs tiesiog išrautas.
Tai turėtų atrodyti šiek tiek panašus į šį.
Ar tai atrodys taip visiems?
>> Auditorija: Taip.
>> Neel Mehta: Jei esate nuotolinis, ją reikia žiūrėti kaip tai taip pat.
Jei ne, aš jums parodysiu, kaip greitai Jūs galite gauti tai atrodys taip
į būsimą dalį vaizdo.
Taigi čia mes parašėme labai paprastas HTML,
kaip rūšies jūs naudoja klasėje.
Tai gana pagrindinis.
Ne maivymasis.
Ir mes turime kai kurių dalykų.
Mes sukūrėme labai, labai paprastas pradėti
skambinti Yalp! su kuria jūs galite rasti restoranų srityje,
ir sužinoti nuomones ir kryptimis visi tie.
Tai labai geras sąvoka.
Jis niekada nebuvo padaryta anksčiau.
Tai labai unikalus vardas, taip pat.
>> Taigi, ką mes ketiname pabandyti padaryti, tai padėti savininką
iš Yalp! padaryti savo svetainėje atrodo tikrai, tikrai cool.
Taigi, norint pradėti su, kad savininkas Yalp! padarė mažai paiešką
dėžutė, ir šiek tiek mygtuką, ir tada gal šiek tiek
pažymėtą sritį dėl Pažymėtas restoranas, tada
kitų restoranų sąrašas kad yra toje srityje.
Taigi, mes galime tiesiog pereiti per HTML kodas labai greitai.
Kaip patogu esate vaikinai su HTML?
Mes padaryti šiek tiek sekcija, o taip pat klasės.
Padoraus?
>> Taigi tik kaip Priminti, HTML yra visa informacija apie, turintys
Žymos ar elementai, kad papasakoti kompiuteris kaip išdėstyti tinklalapį.
Taigi, tai H1 here-- pradėti h1, Sveiki atvykę į Yalp !, pabaiga h1-- pasakoja kompiuterį,
nubrėžti didelį antraštę jis sako, Sveiki atvykę į Yalp!
viduje yra.
Mes taip pat turime formas.
Mes galime įėjimai, kaip šis, teksto įvestis, kuri bus pateikta kaip teksto laukus
rašote.
Jūs taip pat turite mygtukus.
Jūs gaunate gražus, spausti mygtuką.
Jis nedaro nieko teisę dabar, bet jūs gaunate mygtuką.
Jūs galite turėti DIV-ų arba pertvaros, į lūžti savo puslapį į įvairias grupes.
>> Jūs galite turėti pastraipas, turite mygtukus.
Jei turite pastraipas, tada turite netvarkingai sąrašus, UL,
ir sąrašus viduje, kad li.
Taigi tai yra labai paprastas blokai puslapyje.
Ir iš tiesų, gana daug Kiekviena svetainė matote
bus pastatytas naudojant tuos pačius įrankius.
Žinoma, jie ne visi žiūrėti šį blogai, nes mes
ketina paįvairinti jį šiek tiek.
Taigi leiskite šį nuobodų seną HTML ir pradėti paversti jį gražus svetainėje
kad mes tik pamačiau pora minutes.
>> Taigi pradėkime nuo labai paprasta.
Taigi, mes turime šį mygtuką čia.
Be bootstrap, kaip matėme, mes galime turėti gražią, gražus, mėlyną mygtuką.
Ir tai daroma ne atlikdami užsakymą CSS.
Nėra užsakymą CSS čia.
Tai daroma pridedant klases į savo HTML elementų.
Jei bandėte klases, ar HREF arba inkarai, arba type = "text" už inputs--
HTML elementai gali turėti šiuos atributus.
Jie gali turėti papildomos informacijos kad jums gali suteikti jiems.
>> Ir taip, šiuo atveju, klasės yra atributas.
Taigi jūs norite rašyti mygtuką class = kažkas viduje stygos.
Ir tai atributas pasakys kompiuteris, tai ne toks yra, amžiaus mygtuką.
Tai mygtukas, kuris yra Tai mygtukų klasė.
Ir taip įkelties, jei mano, kad tai tam tikras stilius jūsų elementas,
ji parengia jai tam tikru būdu.
Taigi aš rašau "BTN BTN-pagrindinis.
btn yra už mygtuko santrumpa.
Jūs pastebėsite, kad dabar mano negraži mygtuką pasuko
į gražus, gražus, mėlyną mygtuką.
Jis atrodo labai gražus, kai mes spustelėkite ją.
>> Ir kas atsitinka todėl yra mes turime btn klasės ir BTN ugdymo klasė
mūsų elementas.
Ir įkelties bus eiti ir pasakyti, gerai, aš žinoti, kad yra šios dvi klasės.
Bet koks elementas, kuris turi šias dvi klasių turėtų būti sudarytas, kaip šis.
Štai klausimas, kaip jums pridėti branduolys stilių elementų bootstrap.
Jūs tiesiog pridėti klases jiems ir tai svorio jį kaip mano esant tinkama.
Taigi čia dar vienas pavyzdys.
Į įvesties, mes galime pridėti klasė = "forma-kontrolė".
Ir aš greičiau parodyti, kur jūs sužinoti, kokios klases
yra prieinami kiekvieno elemento rūšies.
Bet klasės, kad mes tiesiog Pridėta yra gražus, užapvalintais kampais,
ji turi gražią kamšalo, ji turi gražus, mėlynas švytėjimas į jį.
>> Mes taip pat galime eiti į šią formą.
Ir class = "forma-inline", kuris leis Mūsų forma, kaip galite įsivaizduoti, Inline.
Taigi jis ieško šiek tiek daugiau patinka tai, ką mes turėjome prieš jau.
Taigi, kol mes eiti stilius poilsio puslapis, kokių nors klausimų apie tai, ką mes
padarė?
Mes tiesiog pridedamas klasės mūsų įvairių elementų.
Ir aš jums parodysiu vėliau, kaip jūs galite išsiaiškinti, kas klasių nėra.
Mes pridedamas klases, kurios turi tam tikrų stilių.
Ir tai pasakoja naršyklę Kaip išdėstymo puslapį naudojant
Bootstrap anketa numatytos stilių.
Bet iš auditorijos klausimus?
>> Geras šiol?
Saunus.
A iššūkius daug su įkelties yra tik
žinant, kas komponentai galima ir kaip jūs juos naudoti.
Ir tai yra viskas, išmoko su patirtimi, o taip pat
per svarstymo dokumentus, kuri mes kalbame apie netrukus.
Taigi, mes turime DIV.
Tai tiesiog nuobodus, senas dalykas.
Norime pabrėžti, kad kažkaip.
Taigi bootstrap, yra daug komponentų prieinama.
Ir tai getbootstrap.com.
Tai labai naudinga nuoroda.
Jame yra dalykų like-- Štai kaip jūs darote mygtuką.
Ir jūs galite padaryti navigacijos juostas, jūs galite etiketės, galite progresuoti barai,
jūs galite padaryti sąrašas grupes.
Iš esmės, tai visi rūšių iš jūs galite pamatyti interneto puslapyje.
>> Štai vienas, kad mes bandysime dabar.
Tai vadinama skydelis.
Jei jūs kada nors naudoti "Google" Dabar, jie turi korteles.
Arba bet Android įtaisas turi korteles.
Jie turi mažai baltųjų dėžės kad turi stuff viduje ji.
Ir taip mes ketiname pabandyti ir padaryti kad patys čia naudodamas dalyką
vadinamas skydelis.
Taigi, jei mes pridėti class = "panelė panelė neįvykdymo "mūsų išorinio div,
tada mes pridėti div class = - tegul tiesiog patikrinti šiuos dokumentus.
div class = "panelė-antraštė" ir tada div class = "plokštės kūno".
Vėlgi, nereikia jaudintis įsiminti šį kodą.
Tai bus galima rasti internete.
>> Taigi, mes tai padarėme ir dabar mūsų nuobodus, senas div virto šį gražus, mažai kortelę.
Jis turi gražią padding, ją turi sienas, ji išsiskiria
nuo puslapyje poilsio, kuri yra gana kietas.
Taigi eikime ir tai pakeisti Gauk kryptys mygtukas gražiai atrodo.
Kas į auditoriją nori pasakyti man, ką aš galiu padaryti, kad mygtukas
kad ji atrodo gražiai, naudojant bootstrap?
Taip?
>> Auditorija: Galėtume pridėti klasę.
Ir mes galime padaryti class = "BTN BTN ugdymo".
Neel Mehta: Taip.
Yra daug kitų krūva galimos spalvos buttons--
arba nieko, tuo klausimu.
Mes galime padaryti BTN-pavojų ir padaryti jį raudonai.
Čia mes eiti.
Mes galime padaryti BTN-sėkmės, kad ji žalia.
Mes galime padaryti BTN-info-- ten krūva dalykų, kurie yra prieinami jums.
Taigi turiu šiek tiek iššūkis jums dabar.
Taigi yra dar vienas dalykas, kad man liko JT stiliaus.
Tai aukščiausios restoranai.
>> Ir mes norite naudoti dalyką vadinamas sąrašas grupę stiliaus ją.
Taigi, mano problema jums yra pereiti prie getbootstrap.com--
Aš traukti ją čia.
getboostrap.com.
Eiti į getbootstrap.com, rasti skyrių, kur jie eiti per sąrašą grupes.
Ir jūs pamatysite, čia pavyzdys ir teisė klasės
kad jūs galite naudoti, kad jūsų sąrašus į šių gražių sąrašą grupėms.
Tai dirbo pavyzdžiai Kodų pavyzdžių, ką
kodas jūs naudojate, kokie HTML kodą naudoti, ir kas, kad išveda.
>> Taigi, mano iššūkis you-- eiti getbootstrap.com,
ar esate čia arba namuose, pabandyti ir pridėti stilių su šiuo ul
kad ji atrodytų gražus.
Ir naudokite sąrašas grupės stilių.
Jūs norite priimti porą minučių, ir ieškoti dokumentaciją,
Išbandykite šį patys?
Kadangi, kaip jūs darote interneto svetainių kūrimas, jums realizuoti savo darbą daug
ketina skaityti Ši dokumentacija.
Taigi aš manau, kad tai geras susipažinti su tuo, kaip skaityti dokumentus,
Kaip išsiaiškinti, kas, kur, Koks kodas pavyzdžių galite naudoti,
ką jūs galite naudoti.
>> Taigi dar kartą, getbootstrap.com, pereiti prie komponentai kortelėje
ir tada slinkite žemyn į sąrašą grupę.
Ir jūs pamatysite pavyzdžių kodą, galite naudoti, kad jūsų HTML tilptų tai.
Taigi imtis keletą minučių ir išbandyti ir ištirti patys,
ar esate čia arba namuose.
Jei esate namie, pristabdyti vaizdo įrašą, galbūt, ir ją išbandyti save.
Jei esate čia, jei jūs einate į mūsų website-- jei atnaujinkite puslapį,
pamatysite tai ten.
Tai labai pati kodas yra tik pridėti naują stilių teisę ten.
Taigi užtrukti keletą minučių.
Leiskite man žinoti, jei jaučiatės gerai apie tai, arba kai esate visiškai prarasta.
Garsas geras?
Saunus.
Greita skirta tiems iš jūsų, namuose, o mes laukiame,
jei jūs einate į GitHub svetainėje kad aš taikstytis prieš porą skaidres,
link vaizdo pradžioje, Turiu GitHub atpirkimo, kapinynas,
Šio pokalbio.
Visi šie pavyzdžiai kodas, kad mes būsime kalbame apie saugomi čia.
Taigi, jei jūs einate į iššūkį-1.html, tai yra visa kodas, kad mes turime dabar
Mūsų CodePen.
Taigi jūs galite tiesiog eiti į priekį ir kopijuoti tai ir įklijuokite jį savo CodePen.
Ir tokiu būdu, galite suspėti su tuo, ką mes darome čia.
Taigi turime šį puslapį atvirą, taip pat kaip ir mes eiti per seminaro poilsio.
Vėlgi, jūs norite, kad jis atrodys, ką jūs pamatyti žemyn ekrano apačioje
ten.
Jaustis gerai?
Kieta medžiaga.
Palaukime ir visi kiti, kad baigti su tuo, ką jie daro.
>> Taip?
>> Auditorija: Tarkime, kad aš norėjau naudoti bootstrap ne home--
Neel Mehta: Taip.
Auditorija: Matau, svetainėje, Getting Started puslapį.
Jie man parinktis Bootstrap, šaltinio kodas arba Sass.
Kuris iš šių aš noriu?
>> Neel Mehta: Taip.
Taigi klausimas yra, kaip jūs gaunate pradėjo naudoti įkelties patys?
Tai tiesiog nutinka stebuklingai dirbti čia.
Taigi, jei mes turime laikas Seminaro pabaigoje,
Aš jums parodysiu, kaip jūs galite gauti jį savo interneto puslapyje.
Kaip čia aš iš tikrųjų įdėti į kai kuriuos nustatymus, kad
turės automatiškai pakrautas, bet aš
parodyti jums tai padaryti iš subraižyti savo žiniatinklio puslapiuose.
>> Auditorija: Ačiū.
>> Neel Mehta: Taip.
Geras klausimas.
Jaustis gerai?
Saunus.
Taigi, kas nori man papasakoti, kaip jie padarė šis dalykas atrodo gražiai ir Boostrappy?
Kas yra pirmos klasės, mes pridėti prie ul?
Auditorija: class = "sąrašo Group".
Neel Mehta: Taip. sąrašo grupė.
Ir kas tada mes pridėti prie lis?
Kažkas kitas?
Auditorija: Ir tada, po kad class = "sąrašo grupė elementas".
>> Neel Mehta: Taip.
>> Auditorija: ir tai pats už kito.
>> Neel Mehta: Li class = "sąrašo grupė elementas".
Na štai.
Mes turime gražią sąrašas grupę, kaip mes tikėjomės.
Taigi jūs einate.
Per 10 minučių, mes padarėme tai nuobodu, senas Yalp! puslapis
atrodo gražiai ir profesionaliai.
Ir tai tik pradžia.
Taigi dabar, kad jūs manote, geras apie tai, tegul
tiesiog eiti į priekį ir kalbėti apie pora daugiau komponentų, kurie
gali praversti kaip jums eiti per savo nuotykius.
>> Žinoma, yra daug tie čia.
Ir dabar, kad jūs sužinojote kaip padaryti sąrašas grupes,
Jūs galite labai daug mokyti Būk kaip tai padaryti bet kurį iš šių.
Bet, žinoma, tegul tiesiog pabandykite ir padaryti pora daugiau save,
tik tokiu būdu jūs gaunate už jaustis kaip jums gali juos naudoti.
Aš tik ketina eiti kad šiame pavyzdyje čia.
Vėlgi, kodas, kad aš tiesiog įklijuoti čia yra čia.
Taigi nedvejodami traukti jį.
>> Taigi, mes jau išgyveno iš šių pavyzdžių pora.
Taigi, mes turime mygtukus, kuriuos mes jau matėme, kaip tai padaryti.
Mes galime padaryti mygtukai didesni.
Iki mygtuką class-- jis eina, btn btn-LG ir BTN neįvykdymo leidžia baltos spalvos.
Taigi tai daro mūsų mygtuką didesnis nei jis gali kitaip.
Tai gali praversti, jei turite didelis mygtuką "Siųsti" ar kažką.
Matėme sąrašas grupės pavyzdžiu, mes matėme formos pavyzdys.
>> Vienas labai svarbus yra piktogramos.
Ir piktogramos yra jums pridėti būdas įdomių dalykų, pavyzdžiui, pažymėkite žymės
ženklai arba pliusai, arba draugas piktogramos, ar iš naujo piktogramos,
ar kas į savo interneto app.
Taigi dar kartą, jei mes į čia sudėtines dalis, glyphicons,
yra piktogramos turimi bootstrap.
Yra išsamus sąrašas visų tie čia.
Taigi tik kaip, pavyzdžiui, pabandykime ir pridėti.
>> Taigi, kaip "Facebook", mes bando turėti Pridėti draugą mygtuką.
Tegul pirmasis pridėti šiek tiek stilių.
mygtuką class = "BTN BTN-sėkmę".
Ir mes einame.
Leiskite pridėti piktogramą čia.
Kas piktogramą, jūs manote, gali prasmės įdėti čia?
Jūs tikriausiai matė Kai kurie interneto puslapiai ar kas,
bet kas AN piktograma pavyzdys, gali eiti gerai viduje šį mygtuką?
Jauskitės laisvai naršyti šią nuomonę, jei jums reikia įkvėpimo.
Yra daug naudingos daug tie rasite čia.
Taip?
>> Auditorija: Gal glyphicon vartotojas viena?
Neel Mehta: "Gerai".
Šitas.
Tai gana gerai.
Taip.
"Facebook", manau, kad tai atrodytų šiek tiek patinka.
Taigi čia, kaip mes einame apie pridėti piktogramas mūsų puslapiuose.
Mes tiesiog turime span-- sprindžio yra neutrali konteineris už kažką.
Div yra kažko konteineris, sprindžio yra dar vienas konteineris.
Divs turi eilučių aplink juos, tęsiasi ne.
Taigi ten įvairiais būdais turintys bendruosius konteinerius.
Kaip tai nėra prasmės jį viduje dalyje, arba nieko.
Mes turime įdėti ją viduje kažkas, nors,
todėl mes tiesiog įdėti viduje trukmę.
Taigi span class = glyphicon glyphicon vartotojas "arti trukmę.
Ir dabar mes turime piktograma viduje mygtuką.
>> Taigi jis neatrodo visiškai skirtingai Ką jūs galite pamatyti ant facebook.com.
Ir todėl malonu, kad jie gali iš tikrųjų būti įdėtas bet kur norite.
Be antraštę barų, Jūsų sąraše grupes.
Koks skirtumas.
Ji neturi būti viduje mygtuką.
Taigi kaip, pavyzdžiui, aš galiu įdėti tos pačios klasės čia.
"glyphicon glyphicon vartotojas".
Ir atrodo, tik ta pati.
Taigi šie icons-- galite naudoti trukmę class = "glyphicon glyphicon-ką".
Ir tai leis jums pridėti piktogramos, kur norite.
Ir piktogramos yra labai svarbus dalis padaryti svetainę atrodo
profesionaliai ir gerai padaryta.
Taigi nereikia persistengti, bet tai dažnai yra geras dalykas žinoti.
>> Plokštės, dar kartą.
Aš tiesiog tai padaryti dar kartą, kaip Priminti nes jie rūšies dalyvauja.
Jūs pastebėsite, kad paversti savo įprastą HTML
svetainę į "bootstrap-afied svetainėje, Jūs turėsite
pridėti papildomą struktūrą į svetainę.
Pavyzdžiui, turime papildomai Divs čia tik nes tie
reikia padaryti skydelį.
Taigi tiesiog laikyti tai galvoje, kad jūs turite turėti papildomą struktūrą.
Taigi "panelė skydelis neįvykdymo".
Gal tai panelė-pjaunamosios.
Manau, kad tai skydelio antraštinės.
Taip.
Čia mes eiti.
Taigi, dar kartą, yra mūsų panelė.
>> Dar vienas dalykas, kad mes neapėmė dar, lenteles.
Stalai, pagal nutylėjimą išvaizdą rūšies negraži.
Kaip šitas.
Bet lentelės, žinoma, labai svarbi dalis
ką jums reikia padaryti, interneto svetainių kūrimas.
Be Pset7, pavyzdžiui, CS50 Finansai, kuri išeis greičiau,
jums naudoti lentelių daug.
Ir iš interneto dev daug naudoti daug Lentelių rodyti informaciją,
kaip atsargos, ar rezultatas, ar dar kas.
>> Taigi stiliaus lenteles yra iš tikrųjų labai paprasta.
Jūs pridėkite stalo klasę į savo stalo.
Ir, drįstu sakyti, atrodo gana gražiai.
Jūs galite tai padaryti papildomų dalykų, kaip "stalo stalo dryžuotas".
Ir jūs pamatysite rezultatus čia.
Jūs galite tai padaryti stalo ribojasi.
Yra daug variantų, galite daug.
Bet iš esmės, pridedant stalas, stalo klasė,
padarys Jūsų stalai atrodo gana gražiai.
Štai trumpas suniokota kai iš svarbesnių stilius
ir komponentai jums reikia naudoti bootstrap.
Taigi manau, kad apsiaustas iki mūsų gražioje dalis.
Turite klausimų dabar apie tai, kaip kad jūsų tinklapis gražus?
Kaip jūs galite naudoti juos komponentai savo pranašumą?
Jaustis gerai?
Taip?
Auditorija: Gal tai yra kvailas klausimas,
bet jūs galite naudoti bootstrap Vikipedijos?
Jei redaguojate Wikipedia puslapį?
Neel Mehta: Taip.
Taigi klausimas buvo, aš Redaguodami Wikipedia puslapį,
galiu įtraukti bootstrap stilius ten?
>> Auditorija: Taip.
>> Neel Mehta: Ir taip įkelties yra iš esmės didelis CSS stilių.
CSS stiliaus lapas tiesiog sako, kai Turiu šį klasę, pridėti šių stilių.
Taigi CSS stiliaus lapo bootstrap bus kažkas panašaus .btn,
mygtuką klasė, gausite tarsi apvalus kampas sienos ar kas.
Taigi, iš esmės, bootstrap tai tik krūva klasių ir stilių krūva
nurodyta šių klasių.
Taigi, kaip ilgai, kaip jūs turite, kad CSS, Šis taisyklių jūsų puslapyje sąrašas
gausite bootstrap stilių.
Tai, žinoma, priklauso nuo turintys bootstrap stilių jūsų puslapyje
pradėti su.
>> Ir taip Vikipedijos, tikriausiai negalėjo
daryti, nes Wikipedia neturi bootstrap į jį.
Bet jei ji turi bootstrap, Jūs turbūt galėtų tai padaryti.
Ir jei jūs norėjote, galite įtraukti ją, bet galėtų
pertrauka esamą išdėstymą puslapyje.
Bet labai geras klausimas.
Galite naudoti bootstrap kur jis yra įtrauktas,
Bet tai ne pastatyta pagal nutylėjimą.
>> Auditorija: Ačiū.
>> Neel Mehta: Taip.
Bet daugiau klausimų?
Taip.
Taigi, ar jūs esate čia arba namuose, tik nepamirškite getboostrap.com-- vėl,
getboostrap.com-- yra jūsų draugas.
Kai jūs naudojate Bootstrap, tai suteiks jums
instrukcijos apie tai, kaip gauti prasidėjo, kaip naudotis komponentus.
Yra keletas atvėsti Javaskriptą plug-ins, kad mes ne eiti per čia
bet jie verta patikrinti, kaip gerai.
Taigi tai yra jūsų draugas.
Tai tiesiog svarbu gauti naudojamas kaip naudoti tai.
>> Taigi leiskite kalbėtis tiek apie priėmimo reaguoja svetainėse.
Taigi, kaip minėjau anksčiau, naudojamas žmonių savo nešiojamuosius kompiuterius, jie naudoja savo telefonus.
Ir kaip jūs galite įsivaizduoti, tai labai skiriasi ekrano dydis, kad ne.
Ir taip tas pats svetainė kad gerai atrodo ant mano telefoną
nesiruošia atrodo gerai, nebūtinai, kompiuteryje.
Taigi, ką jūs turite padaryti, tai padaryti jūsų svetainę prisitaikyti.
Ji turi prisitaikyti prie įvairių Ekrano dydis, kad ji toliau.
>> Jis turi pasakyti, aš žinau, aš ant kompiuteris, didelis nešiojamas turėčiau plėstis.
Aš žinau, aš ant telefono, turėčiau trauktis.
Ir taip įkelties pateikiama keletas labai, labai naudingų įrankių tai padaryti.
Taigi įkelties Leiskite jums pertraukos svetainės į 12 stulpelių.
Jūs galite padaryti eilutes ir turi 12 stulpelių.
Ir jūs galite išskaidyti tie tačiau norite.
Jūs galite turėti vieną, didelis dalykas, kuri yra labai platus 12 stulpeliai.
Jūs galite turėti du dalykus kad yra šeši kiekvienas.
Jūs galite padaryti vieną dalyką, kad keturių, vienas, kad du arba vienas, kad yra šeši.
Jūs galite padaryti tris, trys, trys, trys.
Galite daryti viską, paskirstymas, kad jūs norite.
>> Taigi gal jūsų interneto puslapis turi turėti kairysis stulpelis tai trečdalio pločio.
Taigi, kad būtų keturi stulpeliai pločio ir likusios puslapio
Būtų aštuoni stulpeliai pločio.
Taigi, šis yra pavyzdys.
Leiskite atsigriebti kitą pavyzdį.
>> Auditorija: ji visada turi būti dar padalinti?
Ar gali būti, septyni, penkios skirtingos?
>> Neel Mehta: Taip.
Tai gali būti septyni, penki.
Taip.
Tol, kol ji priduria, iki 12, tai gerai.
Taigi grįžkime čia.
Vėl, kodas, kuris yra čia taip pat galima čia
pagal reaguoja pavyzdyje.
Taigi aš tiesiog išrautas kai pavyzdys reaguoja kodas čia.
Taigi jūs tai padaryti naudojant dalykas vadinamas eilės.
Eilutės yra tik dar vienas klasė.
Tai dar vienas stilius jums pridėti į savo Divs padaryti jiems savo komponentus.
>> Taigi jūs sakote, DIV class = "eilutė" padaryti eilutę,
suteikti sau 12 stulpelių erdvėje.
Ir tada jūs įdėti stulpelius viduje, kad.
Taigi čia mes pulkininkas XS-6.
Nesijaudinkite XS.
Mes kalbame apie tam sek.
Bet iš esmės, mes turime vieną dalykas, kad yra šešių pločio.
Mes vadiname jį į kairę.
Ir taip tai kairysis langelis čia.
Mes turime vienas dalykas, kad yra šeši iš 12 stulpelių pločio.
Ir kad vienas yra dešinėje.
>> gerai tik suteikia markių Jūsų div užpildyti jį pilka.
Taigi, kad tik taip mes galime matyti, kad jie skiriasi.
Ir todėl tai pirmasis pavyzdys.
Tai labai paprasta pavyzdys, kaip jūs būtų naudoti savo eilutes ir stulpelius.
Jūs apibrėžti eilutę naudojant class = "eilutę".
Ir tada jūs class = "Col-XS-6" daryti pusė, "Col-XS-6" padaryti kitą pusę.
Štai sudėtingesnis pavyzdys.
Pažvelkime Tiny, Milžiniškas, likusi viena.
>> Mes galime padaryti Tiny du stulpeliai pločio, mes galime padaryti Milžiniškas šeši stulpeliai pločio,
o likusieji keturi stulpeliai pločio.
Kad išauga iki 12.
Ir taip jie galų gale, apimanti "puslapio, plotis.
Vėlgi, mes turime eilutę ribų.
Tada mes turime div class = "pulkininkas XS-2" ir tada 6, ir tada 4.
Ir tai suteiks už mus struktūra.
Ir todėl mes galime įdėti kokia gi mes norime viduje čia.
Vietoj Mažyčiai, mes galime įdėti mygtuką.
mygtuką class = "BTN BTN ugdymo".
Ir taip pastebėsite, kad mūsų mygtuką neužima visą plotį,
bet bent jau jis ribojamas tai daug vietos.
>> Taigi, kad viskas gerai ir gerai.
Taigi mes dabar gali lūžti mūsų interneto puslapis į gabaliukus, plotis išmintingas.
Galime sakyti, kad mes norime turėti kairę kolona, ​​ir dešinysis stulpelis, ir taip toliau.
Bet mes ne perėjo kaip jūs galite padaryti jį reaguoja.
Ir taip įkelties darykime, kad taip pat.
Jis turi šiuos dalykus, vadinamus ribomis.
Taigi, ji turi apie žinant, ar kelią Jūs esate ant laptopo, esate tabletės,
Jūs esate telefono horizontali, ar esate telefoną vertikaliai.
Ji žino, ekrano dydį.
Ir pertraukos į keturias categories-- tai didelis arba LG, kuri yra nešiojamieji kompiuteriai, paprastai.
md arba vidutinio, kuri yra tabletės.
cm, mažas.
Arba XS, papildomas mažas.
Ir todėl, kai jūs nurodote kolona, ​​jūs sakote,
jis turėtų būti šešios kolonos pločio ant papildomą mažas prietaisas.
Štai kodėl mes padarėme Col-XS-6.
Mes sakydamas, kad ji turėtų šeši iš 12 stulpelių pločio
ant papildomą mažas prietaisas.
Ir jei ji nieko daugiau, mes tiesiog nutylėjimą naudojant papildomą nedidelį dydį.
Jei jis nieko daugiau nei Papildomas mažas, jis bus šešios pločio.
Ir todėl mes galime sverto tai padaryti iš mūsų kolonos
imtis skirtingą kiekį remiantis ekrano dydis stulpeliai.
Vykime į šį reaguoja dydžio keitimas.
Taigi, mes turime stulpelius.
Ir ji sako, "sp-lg-6 sp-XS-12".
Taigi atsižvelgiant į tai, ką jūs žinote, Iki šiol, ką jūs
manau, ketina atsitikti dideliame ekrane?
Na, tai kokios užleido, bet ką daryti
manote, kad tai atrodys patinka dideliame ekrane?
Ir kodėl taip yra?
>> Auditorija: Ar tai, kad dideliame ekrane, tai
ketina imtis tik dalis visiško erdvėje?
Kaip pusmetį jį, manau?
>> Neel Mehta: Taip.
>> Auditorija: Ir mažesni ekranas, jis ketina
imtis visą ekraną, 12.
Neel Mehta: Taip.
Teisė.
Taigi kaip, pavyzdžiui, tegul tiesiog žiūrėti žemyn čia.
Taip.
Tad nieko, kad yra LG arba bigger-- kad mano kompiuteris atsitinka
būti lg, nes tai gana wide-- tai leis
tai side by side, nes tai COL-lg-6.
Taigi todėl, kad tai stambaus, ji tampa šešių kolonų pločio ir šešių kolonų pločio.
Pažiūrėkime, kas atsitiks, jei aš kad į mažesnius vienas tai.
Aš tik ketina JT visą ekraną tai.
Ir aš ruošiuosi trauktis ekraną.
Aš ruošiuosi trauktis į ekraną, todėl ji atrodo Esu mažesniu įrenginiu.
Taigi, aš ruošiuosi trauktis, kaip šis.
>> Ir voila.
Šiuo metu tai yra sukrauti nes dabar mes turime dingo
iš didelio to-- tai tikriausiai papildomas mažas ekrano dydis.
Ir todėl dabar ji sako, gerai, mes ne didelio, mes į papildomą mažame krašte.
Taigi mes ketiname naudoti papildomas mažas dydis.
Ir mes ketiname XS-12, XS-12.
Taigi jis ketina būti sukrauti.
Ir tik pastebėsite, kad ten dalykas vadinamas atskaitos tašką.
Atskaitos tašką, kur Jūs padarė perėjimas
iš papildomų mažas, mažas, mažas, kad didelis, ir taip toliau.
>> Taigi tik pastebėti, kad, kaip aš skaidrę tai out, galiausiai, gausite iki taško
kur jie šokčiau būti šalia.
Na štai.
Taigi ten ji buvo sustabdyta teisę ten.
Taigi, mes galime tai padaryti dar sunkiau.
Dabar mes galime pasakyti, tai viskas turėtų būti keturių pločio.
Tai yra, jie turėtų užtrukti iki maždaug trečdaliu
iš labai didelių prietaisų kalboje.
Dėl vidutinio įrenginį, ji turėtų imtis iki pusės ekrano, nes jis md-6.
Labai mažo prietaiso, jis turėtų būti iki 12.
Ir todėl tai atrodo gana natūralus.
Tegul tik tai išbandyti patys.
>> Taigi dideliame ekrane, jie keturių pločio.
Trauktis Taip truputį.
Ir dabar jie yra šeši pločio.
Taigi tai yra šeši, šeši, šeši.
Trauktis Taip dar ir tada jie bus visiškai sukrauti.
Taigi, šis, pavyzdžiui, prasminga, jeigu jums kyla kortelės, kaip naujienų korteles,
Pavyzdžiui, kur, jei tai dėl labai dideliame ekrane,
tai gerai, jei turite kelias viena šalia kitos nes jie visi gauti pakankamai vietos.
Bet jie turi turėti pakankamai vietos.
Taigi mažesnio ekrano, jūs norite suteikti jiems
daugiau kambarys, proporcingai puslapio.
>> Taigi, kaip realaus pasaulio, pavyzdžiui, tarkim mes turime Twitter.
Ir mes turime teksto laukelį, todėl galite Čivināšana ant šono.
Ir mes turime tendencijos sąrašą Temos dešinėje pusėje.
Taigi dideliame ekrane, turėtume juos būti šalia,
todėl jūs galite pamatyti juos stiklinėje.
Tačiau mažesnio ekrano, turėtume daryti 12 ir 12 straipsniuose,
taip, kad tendencijos temos yra žemiau Čivināšana srityje.
Kadangi Čivināšana sritis yra Svarbiausia ir mažame ekrane,
kad tendencijos temos nėra Nesvarbu gana daug.
Ir taip mes juos tiesiai po, todėl , kad jie gali tiek gauti pakankamai vietos.
Prasmės iki šiol?
>> Auditorija: Taip.
>> Neel Mehta: Kieta medžiaga.
Taigi, kad visi pavyzdžiai Turiu čia.
Pabandykime ir padaryti iššūkis.
Taigi dar kartą, tai yra iššūkis-2.html už Tiems iš jūsų, taip kartu namuose.
Taigi, mano bičiulis Mark Zuckerberg, atėjo pas mane kita diena.
Ir jis patinka, Neel, turiu Dotarłeś gana gerai web dizainas.
Galiu padaryti HTML.
Aš padariau tai mažai, Naujas redaguoti Facebook.
Turiu naują idėja, kaip turėtume stiliaus "Facebook".
Ir čia jis yra.
Štai čia.
Štai keletas pavyzdžių kodą.
Taigi ji vadinama Fancybook.
>> Mes turime keletą būsenos atnaujinimus.
Mes turime Nemo, Mike Kosowski, Woody-- trys būsenos atnaujinimai.
Ir tada mes turime sąrašą Dabar draugą tiesiai po juo.
Taigi jis padarė savo namų darbus.
Jis žino šiek tiek apie Bootstrap, jis padarė sąrašo rodinį,
Jis padarė šiek tiek HTML.
Taigi jis turi tinklalapį.
Bet jis patinka, Neel, aš ne suprasti reaguoja dizainas ne visiems.
Ar turite kokių nors ekspertus, kurie galėtų padėti man su tuo?
Ir, laimei, dabar jūs esate ekspertai reaguoja dizainas.
>> Taigi, ką jis man pasakė, buvo, kad jis nori Fancybook atrodyti taip.
Labai mažo prietaiso, kaip telefonas, viskas
turėtų būti sukrauti, kaip čia.
Taigi jūs turite laiko juostą iš anksto, iki viršaus, ir tada
jūs turėtumėte turėti čate baras apačioje.
Bet ant tabletės arba terpėje, Įrenginys, ji turėtų būti pusė ir pusė,
kaip laiko juostoje, turėtų būti pusę ir pokalbių draugų sąrašą
turėtų būti kita pusė.
>> Tada ant laptopo, Chronologija turėtų imtis trys ketvirtadaliai
ir tada čate gyvatvorių turėtų imtis dar vieną ketvirtadalį.
Ir taip jis patinka, Neel, turiu tai kodas čia, bet tai ne reaguoja.
Ji turi elgtis, kaip šis.
Taigi, mano iššūkis jums skiriamas šį kodą here--
Jei atnaujinkite savo CodePens, pamatysite tai.
Arba, jei jūs tiesiog įklijuoti kodą nuo iššūkio-2, pamatysite tai.
>> Štai pavyzdys kodas.
Pamatysite keletą Matmenys XXXS.
Noriu pakeisti Matmenys XXXS taip, kad Laiko juostos ir draugų sąrašą
laikosi šių Specifikacijos čia.
Nesijaudinkite apie tai, kas viduje dabar laiko juostoje.
Mes gauti, kad kitame žingsnyje.
Bet dabar pažiūrėkime, jei mes šie dalykai padalinti jį kaip šis.
Taigi ar tai prasminga?
Taigi, jei esate namie, pristabdyti vaizdo įrašą ir pabandykite
padaryti savo tinklalapį ieškoti reaguoja kaip šis.
Jei esate čia, imtis kaip dvi, tris minutes.
Jauskitės laisvai kalbėtis su kaimynu, ir bandyti, ir nustatyti p Zuckerberg s
reaguoja dizainas problema.
Jei turite kokių nors klausimų, nedvejodami praneškite man žinoti.
Jaustis gerai?
Padaryta?
Gražus.
>> Auditorija: [nesigirdi].
Neel Mehta: Kas?
>> Auditorija: Aš gerai.
>> Neel Mehta: O, geras.
Gražus.
Auditorija: Apie dalykas 12, tai, kad įkelties
gydo tam tikrą ekrano erdvę kaip 12 vienetai skersai ir tada dalina, kad iki?
Kaip tiksliai veikia dozavimą darbą už tai?
>> Neel Mehta: Taip.
Taigi kyla klausimas, kaip veikia Sumaišymo
dirbti bootstrap, tiesa?
>> Auditorija: Taip.
Neel Mehta: Taigi, jei turite div class = "eilutės"
nesvarbu, kaip didelis ekranas, Bootstrap duos jums 12 vienetų
to paties dydžio prie imtis, kad daug dydį.
Taigi Kol 1, tai visada 8.33% iš ekrano dydžio,
ar tai toks "platus ar tai šis platus.
Ir taip, žinoma, dėl mažesnio ekranas, kiekviename stulpelyje yra mažesnis.
Jūs vis dar turite 12 stulpelius pločio, tai mažesnė.
Taigi, tai iki jums įsitikinti, kad viskas užima daugiau stulpelį,
proporcingai kompensuoti tos vietos stokos.
Ar tai prasminga?
>> Auditorija: Taip.
Ačiū.
Neel Mehta: Geras klausimas.
Auditorija: ant didelio ekranas, galite turėti
Laiko juostos užima tris ketvirtadalius?
>> Neel Mehta: Taip.
Neel Mehta: Kaip vaikinai jausmas?
Geras?
Saunus.
Taigi leiskite grįžti.
Ir tegul pabandyti išspręsti šią dalį pono Zuckerberg tinklalapyje.
Taigi terminai yra čia, ne į viršų, o draugų sąrašą
yra apačioje.
Ir todėl mes tiesiog reikia priskirti kolonos, kurių dydžio proporcinga,
kiekvienoje iš jų.
Taigi šis pirmasis xxx dėl laiko juostoje.
Kas klases mes įdėti čia?
Ką vaikinai įdėti čia?
Taigi nepamirškite, dideliame ekrane, ji turi imtis tris ketvirtadalius jų pločio.
Ir taip, kokio stiliaus duos jums tai?
Dideliame ekrane, trijų ketvirtadaliai pločio.
Kas klasė mes naudojame ten?
Auditorija: Taigi mes tiesiog bus redaguoti kad pirmosios instancijos klasėje.
Neel Mehta: Nes dabar.
Taip.
>> Auditorija: Mes ne redaguoti kiekvienas, individualus bruožas laiko juostoje?
Neel Mehta: Ne dabar, bent jau.
Taigi visa tai, ką yra blokas.
Užtenka tik keičiant projektavimas blokas.
Taigi čia mes pulkininkas LG-9, nes tai devyni iš 12 pločio dideliame ekrane.
Ir tada ant vidutinio ekrane kiek stulpeliai turėčiau gauti?
Auditorija: Tai turėtų būti pusė ir pusė.
Neel Mehta: Teisė.
Taigi, kiek tai yra?
>> Auditorija: Taigi šeši.
Neel Mehta: šeši.
Ir tada Papildomas mažas turėtų be-- jei ji užima visą plotį eilės,
kiek ji turėtų būti?
Auditorija: 12.
Neel Mehta: 12.
Taip.
Ir dabar mes turime pakeisti kitų tie,
todėl jis užima erdvę poilsio.
Taigi COL-lg--
Auditorija: jis ketina imtis visą ekraną?
Neel Mehta: Jis užima ketvirtadalį iš dėl didelio prietaiso ekrane,
kaip mes parodėme čia.
>> Auditorija: Trys.
>> Neel Mehta: Trys.
Ir tada sp-MD-6 imtis iki į kosmosą poilsio.
Col-XS-12.
Taigi dabar mes turime grafikas pradėjimo tris ketvirtadalius
iš didžiojo ekrano puslapyje ir tada vienas ketvirtadalis pusėje.
Ir tada, jei dydis ekranas žemyn, jis turėtų būti atitinkamai keisti.
Taigi, tai sukrauti dabar labai mažo ekrano.
Ir jei mes Dydis jį šiek tiek, jie turėtų būti tiksliai pusė ir pusė.
Taigi mes padarėme, kad iki šiol.
Labai kietas.
Ir taip mes ne padaryti Kita dalis įspėtas.
Jūs galite padaryti, kad sau.
Bet iš esmės, jūs turite pabandyti ir padaryti tai reaguoja
kaip well-- padaryti grafikas daiktai, patys, reaguoja.
Taigi dabar mes išgyveno Viskas, ką jums reikia žinoti
apie reaguoja pusėje bootstrap.
Bet apie reaguoja klausimai dizainas su bootstrap
ir kaip jūs galite eiti apie tai daro?
Taip?
>> Auditorija: Ar panašiai, jei mes turėjome įterptais vaizdo
ir mes norėjome kontroliuoti skalė, kuria vaizdo was--
iš vaizdo dydis vyksta nuo nešiojamojo kompiuterio į telefoną.
Neel Mehta: Taip.
Mažiau ar daugiau.
Jums tektų pasakyti su vaizdo imtis tiek kambarį, kaip jis pateiktas,
kuris yra šiek tiek erzina kartais.
Bet pagrindinė idėja yra ta pati.
Vaizdo, kaip ir bet kuris kitas objektas puslapis, kaip ir mygtuko ar kas,
kaip ilgai, kaip jūs naudojate stulpeliai ir eilutės,
galite suteikti jai tam tikrą erdvę.
Ir taip vis tai pagerbti, kad yra kitas klausimas, nes kaip "YouTube"
Įterpti turi tam tikrą, norimą dydį.
Tačiau teoriškai ne mažiau, ji turėtų dirbti.
Saunus?
>> Auditorija: Aš manau, kad tada, už nuotraukas jūs iš tikrųjų
reikia turėti skirtingas versijas tas pats vaizdas įvairių dydžių
nešiojamas palyginti iPhone "?
Taip Kyla klausimas, ar mes turime turi vaizdus, ​​kurie yra reaguoja taip pat.
Ir iš tiesų, galite tai padaryti.
Manau, kad tai CSS.
Bet įkelties leidžia jums reikia padaryti, kad taip pat.
Jūs galite turėti reaguoja vaizdų.
Jūs galite turėti jūsų vaizdai dydį pagal puslapio dydžio.
Ir ten labai naujas dalykas HTML5, naujausia versija HTML,
ir css3, naujausias versija CSS, kuris
leis jums paprašyti kitokių vaizdų remiantis ekrano dydis esate ne.
Paprastai, tai pakankamai geras, kad tik turi savo įvaizdį tik susitraukti arba auga
Tačiau didelis jis turi būti.
Bet jūs galite, jei norite, kad, turėti vieną 32 iki 32
labai mažų ekranų, ir 64 64 dėl dideliame ekrane,
ir tada tarnauti tiems, pasirinktinai.
Tu gali tai padaryti.
Tai daroma kai kurių žmonių.
Tai dar gana pažangi.
Bet Trumpas atsakymas, reaguoja images-- Bootstrap gali išgelbėti dieną ten.
Saunus?
>> Auditorija: Ačiū.
>> Neel Mehta: tad pasikalbėti labai greitai apie tai, kaip
gauti tai savo interneto puslapyje.
Tarkime, jūs norite, kad jūsų savo interneto svetainę naudojant bootstrap.
Ir todėl galime tik tik vaikščioti per ją kartu.
Tarkime, jūs padaryti tik normalus HTML puslapis.
Jauskitės laisvai sekti palei kokia jūsų mėgstamiausia redaktorius.
Taigi mes tiesiog šiek tiek HTML puslapį.
Mes galime padaryti! DOCTYPE HTML.
Tai taip pat HTML, mūsų puslapis.
Nieko naujo.
Mes tai padarė anksčiau.
Taigi čia mes turime HTML ir mes galime įdėti stuff viduje čia.
Mes galime turime mygtuką.
Ir kaip jau minėjau anksčiau, tai nebūtinai ketina dirbti.
Kodėl gali tai neveikia?
Kodėl ne mes gauti mūsų gražus, spalvingas mygtuką?
>> Auditorija: Kadangi mes ne susieti jį į bootstrap projektą ar faile?
Neel Mehta: Taip.
Teisingas.
Kadangi Bootstrap-- tai tik išgalvotas CSS failą.
Tai stilių serija, kuri pridedami prie jūsų elementais.
Čia mes papasakojo, kad mes norite naudoti šių stilių.
Aš dydis, iki šiek tiek.
Mes papasakojo norime naudoti Šie stiliai, bet mes niekada
papasakojo, ką stiliai.
Ir tai, ką jūsų klausimas iš anksčiau buvo.
Štai atsakymas į šį.
Mums reikia rasti būdą, kaip gauti stilius ir įtraukti juos į mūsų puslapyje kažkaip.
Ir taip įkelties valia parodyti mums, kaip tai padaryti.
>> Taigi, jei jūs einate į viršų čia Pradedama.
Yra įvairių būdų, kaip ją atsisiųsti.
Tai gali prasmės nebūtinai.
Bootstrap-- tai leis patraukti CSS failą pati.
Ir jūs įtraukė jį į savo puslapį.
Originalus kodas yra, jei norite nulaužti jį patys.
Jums nereikia tai tikrai.
Sass kalba kad kaupia į CSS.
Pagalvokite apie tai, kaip preprocesoriaus.
Panašiai kaip PHP yra Preprocesorius HTML Sass yra CSS Preprocesorius.
Taigi, jei jūs norite tai padaryti Tokiu būdu, jūs galite tai padaryti.
>> Paprasčiausias būdas yra naudojant CDN, ar turinio pristatymo tinklo.
Tai svetainė, kuri kaip tik aptarnauja bootstrapu kopiją
labai greitai jums įtraukti į savo puslapį.
Taigi čia pavyzdys.
Jis jums duos šią nuorodą elementas.
Nuorodą elementas pasakoja savo naršyklę, imtis visų failai saugomi čia
ir įtraukti jį į mūsų tinklalapį.
Ir šiuo atveju, tai paleisties CSS failą.
Taigi mes tiesiog nukopijuokite šį URL, arba kad tekstas, ir mes mesti jį viduje
mūsų galvos.
>> Ir aš ne paleisti puslapį už tai, bet jūs galite pasitikėti, kad tai veikia.
Nuorodą bus jums CSS.
Įtraukti jį į savo puslapis ir tada jūs būsite
gali naudoti visi bootstrap klases, kad žinote ir meilės.
Jei norite palikti jį vietoje ir jį į savo failų sistemą
vietoj to, kad eiti į interneto patraukti jį,
pavyzdžiui, jei norite naudoti svetainės offline
galite naudoti Parsisiųsti parinktį.
Tačiau didžioji dalis, naudojant CDN yra gana greitai, nes tokiu būdu,
jis nuolat atnaujinami Jums taip pat.
Jūs turite rankiniu būdu atnaujinti arba.
Logiška?
>> Taigi įrankių daug bus tai pastatė pagal numatytuosius nustatymus. Savo Pset7 ir Pset8,
Manau įkelties yra automatiškai įtraukiami.
Ir CodePen, už Pavyzdžiui, jis jau
įtraukti, nes aš įtraukta pridėti, kad nustatymą.
Taigi, jei jūs kada nors norite pažaisti Su juo jūs galite tiesiog eiti CodePen,
arba eikite ant jūsų ID, ar kas.
Ir jums gali būti suteikta galimybė prieiga įkelties ten,
Bet tai ne visada pastatytas į, pagal nutylėjimą, prie interneto.
Logiška?
>> Taip.
tik kaip recap-- turime kaip penkias minutes kairę.
Bet kaip Priminti, naujų tinklalapių, galite įtraukti bootstrap, kaip šis.
Ir kai jūs turite jį įtraukti, jūs galite padaryti visą atrakcionus čia.
Jūs galite pereiti į, ir jūs galite tiesiog žiūrinėti CSS, galite pridėti šiek tiek atvėsti stilių,
Jūs galite turėti komponentai kaip mygtukai,
ir stalai, ir sąrašas elementus, kurie jau minėjome.
Yra keletas cool JavaScript įskiepių, kuris galbūt norėsite ištirti.
Jie pridėti šiek tiek atvėsti interaktyvumo į interneto puslapį.
Kaip šis pademonstravo modalinį dialogą.
>> Taigi yra keletas atrakcionus jūs galite padaryti su bootstrap.
Taigi, mano patarimas jums eiti į priekį ir jį naudoti savo projektuose,
vadovaukitės instrukcijomis tiesiog padarė kaip jį gauti,
ir tiesiog skaityti bootstrap, nes jums sužinoti daugiau apie tai, ką daryti.
Ir taip mes dingo daugiau, šiandien, kaip naudoti
dokumentai, ką pastatas blokai yra ir kaip ji yra konceptualiai.
Taigi dabar mano iššūkis jums yra padaryti svetainę, naudojant bootstrap.
Eiti į docs.
Ir naudoti įrankius, kad mes sužinojo, kad iki šiol pabandyti ir išanalizuoti juos
ir suprasti juos.
Ir naudoti šiuos stilių ir įrankiai matai ten jūsų svetainę.
Ir tai tik didelis, eksperimentinis procesas.
>> Išbandykite tam tikrą stilių.
Ar tai veikia?
Ar ne?
Pabandykite stuff kartu.
Žiūrėkite, kas atsitinka.
Tai labai daug savarankiškai vadovaujasi atradimas procesas.
Tačiau šiandien, mes išmoko patys pagrindai kas įkelties?
Kodėl tai veikia?
Kaip tai veikia?
Kaip mes pradėti naudoti ji, į pirmąją vietą?
Ir todėl dabar, kad jūs per tą kupra, jums
turėtų būti suteikta galimybė tai padaryti gana sklandžiai patys.
>> Taigi, dar kartą, visi kodas darėme yra čia.
Taigi, jei jūs kada nors norite gauti atsigaivinti,
kaip, kas greitai apgauti lapas visi stiliai?
Jūs galite pereiti į šį mėginį čia.
Mes turime keletą pavyzdžių stilių čia.
Jei norite pabandyti iššūkiai ir vėl patys,
galite pabandyti juos čia ir patikrinti sprendimai.
Taigi ši nuoroda bus įtraukti skaidres, kurios
bus išsiųstas jums žinoma.
Bet tai taip pat čia.
Galite pristabdyti vaizdo įrašą, jei norite.
Visa jums reikalinga informacija yra bus čia, šioje svetainėje.
Taigi, jei kas nors turi kokių nors klausimų, mes galime juos per ateinančius porą minučių.
Priešingu atveju, ačiū visiems labai daug žiūri.