Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Niin hello jokainen, joka on katsomassa täällä,
tai katsella verkossa, tai etänä.
Nimeni on Neel, tämä on CS50.
Ja tämänpäiväinen seminaari on Responsive Web Design Bootstrap.
Se on aihe, joka on hyvin lähellä sydäntäni.
Toivottavasti se on lähellä sydäntäsi
samoin loppuun mennessä päivän seminaarissa.
Niin Bootstrap.
Kuinka moni teistä on tehnyt mitään Tällainen web-kehitys ennen?
Hyvä määrä?
Hieman.
>> Joten Bootstrap on maailman suosittu, etupään puitteet.
Sitä käytetään by-- olen valinnut pari satunnainen websites--
Lyft, Newsweek, ja Vogue.
Sitä käytetään useita sivustoja.
Se on web design puitteet, antaa sinun tehdä sivustot
niin kaunis ja herkkä.
Ja menen aikana nämä kaksi käsitettä täällä.
Kaunis.
Joten sinulla on normaali verkkosivuilla vasen, joka on valmistettu vain HTML.
Olet oppinut HTML luokassa ja kohdassa laajasti.
Bootstrap on tapa tehdä verkkosivustoja kaunis.
Voit ottaa mitä on vasemmalla puolella näytön
ja muuttaa sen mitä on oikealla puolella näytön kanssa hyvin,
hyvin, hyvin vähän koodia.
>> Saat kaunis sininen painike, saat fancy, pyöristetyt reunat ruudulla,
saat luettelonäkymän, saat kortteja, ja niin edelleen hyvin vähän koodia.
Ei oikeastaan mitään CSS sinun täytyy kirjoittaa itse.
Joten Bootstrap voit on näitä valmiiksi rakennettu CSS
osat voit laittaa sisällä Web-sivun
jotta se näyttää kauniilta ilman hyvin paljon työtä itse.
Se on todella bootstrap, lähtökohta,
Web kehitys seikkailuja.
Ja niin kun olet vain pilkaten verkkosivusto,
se on erittäin hyvä paikka aloittaa.
Voit saada hyvän näköinen sivusto hyvin, hyvin vähän työtä.
Ja todellakin, me aiomme tehdä tämän itse
aikana kuin viisi minutes-- 10 minuutin kuluessa.
Joten se on melko helppo tehdä joitakin suuria sivustoja.
Niin, että ensimmäinen osa.
>> Toinen part-- reagoiva.
Ihmiset, nykyään, eivät vain käyttää web niiden läppäreissä.
Oikeastaan, vuodesta 2014, enemmän ihmisiä käyttää web kautta mobiililaitteisiin,
kuten puhelimissa, tai tabletteja, tai palvelut, tai niin kuin verkkosivuilla.
Ja sivustot ovat perinteisesti olleet suunniteltu kannettavien tietokoneiden tai pöytätietokoneiden
mielessä.
Ja niin sivustot eivät usein ole hyvin sopii puhelimeen.
Jos koskaan käynyt harvard.edu puhelimeen,
se on tavallaan ärsyttävää kokemus, eikö?
Se koska se ei reagoi.
Yritämme tehdä sivustot, jotka reagoivat,
jotka vastaavat ihmisten näytön kokoa.
>> Joten jos se on puhelin, se on mene puhelimen.
Jos se on tabletti, se on aio mennä tabletti.
Se säätää vastaamaan näyttö, joka on käytössä.
Ja niin Bootstrap myös joitakin erittäin, erittäin hyödyllisiä apuohjelmia, jotka.
Ja aiomme keskustella, että samoin.
Joten jälleen, on kaksi osaa Bootstrap-- kaunis ja vastuullinen.
Aiomme puhua niistä.
Ensinnäkin, kaunis.
Ja sitten herkkä.
>> Joten kaikki koodi, että olemme aio puhua today--
aiomme olla paljon esimerkkejä, paljon haasteita, ja niin on-- se
kaikki elää tällä sivustolla täällä.
Tämä dia on mitä lähetimme.
Joten jos olet täällä, voit tuntea vapaus ei tarvitse kirjoittaa, että alas.
Ja jos olet katsomassa etänä, tuntuu vapaasti vetää tämän tietokoneellesi
yhtä hyvin.
Sinun täytyy luultavasti sitä aikana Seminaarissa.
>> Joten aiomme käyttää sivuston nimeltä CodePen,
joka on yhteistyöhön koodaus ympäristö, Seminaarin aikana.
Ja CodePen-- Ja minä näyttää täällä todellinen fast--
sen avulla voit kirjoittaa HTML yhteistyönä.
Voin kirjoittaa sen, voin lähettää sen te, te voi muokata sitä.
Vaikka olet kauko, voit voi silti käyttää sitä tällä tavalla.
Voit kirjoittaa HTML-koodi on ylä- ja se tulee automaattisesti
muunnetaan sivun alareunassa.
Joten se tapa, jolla voit nopeasti kokeilla koodi
ilman tehdä mitään semmoista teidän IDE, tai oma verkkosivusto,
tai mitä tahansa.
>> Niin mene eteenpäin ja vedä tätä verkkosivuilla, jos olet kauko
tai jos olet täällä, varsinkin jos olet kauko.
is.gd/cs50boostrap.
Ei lippikset, ei alaviivoja, ei mitään.
Joten ne teistä, jotka ovat täällä, anna minulle peukalot
, kun olet vetänyt ylös kyseisen sivun.
Hyvä?
>> Yleisö: Kyllä.
>> NEEL Mehta: Niin saamme sen, että vain toinen.
Joten ensimmäinen, aiomme päästä, miten teet sivustot kaunis?
Aiomme oppia ottamaan tylsää, vanha HTML, kuten näytin teille aiemmin,
ja kääntää sen osaksi todella mukava komponentit,
kuten mukava widgetit, mukava, värillinen painikkeet, ja tarroja, ja pöydät,
ja kaikki, käyttävät Saapasraksi.
Joten jos voisimme kaikki mennä yli CodePen että juuri revitä.
Sen pitäisi näyttää vähän kuin tämä.
Se näyttää tämän kaikille?
>> Yleisö: Kyllä.
>> NEEL Mehta: Jos olet kauko, se pitäisi näyttää tämän hyvin.
Jos ei, minä näytän sinulle pian, miten voit saada sen näyttää tältä
tulevassa osa video.
Joten tässä olemme kirjoittaneet hyvin HTML,
kuten sellainen olet käyttänyt luokassa.
Se on aika perus.
Ei tavallinen.
Ja meillä on joitakin juttuja.
Olemme suunnitelleet hyvin, hyvin yksinkertainen käynnisty
soita Yalp! jolla voit löytää ravintoloita,
ja löytää arvosteluja, ja suuntiin kaikissa näistä.
Se on erittäin hyvä käsite.
Se ei ole ennen tehty.
Se on hyvin ainutlaatuinen nimi, liian.
>> Joten mitä aiomme kokeilla tehdä on auttaa omistaja
of Yalp! tehdä hänen verkkosivuilla näyttää todella, todella siistiä.
Joten aluksi, omistajan Yalp! on tehnyt hieman haku
laatikko, ja pientä painiketta, ja sitten ehkä vähän
korostettu alue korostetun ravintola, ja sitten
Luettelo muut ravintolat jotka ovat alueella.
Joten voimme vain mennä läpi HTML-koodia todella nopeasti.
Kuinka mukava te olette HTML?
Olemme tehneet hieman kohta ja myös luokassa.
Ihmisarvoinen?
>> Aivan kuten kertaus, HTML on kaikki noin ottaa
tunnisteet tai elementtejä, jotka kertovat tietokone miten asetella Web-sivun.
Joten tämä H1 here-- aloittaa H1, Tervetuloa ja Yalp !, päähän h1-- kertoo tietokoneelle,
piirtää iso otsikko se sanoo, Tervetuloa Yalp!
sisällä on.
Meillä on myös muotoja.
Voimme tulot näin, tekstin tuloa, joka kostan tekstinä laatikot
kirjoitat.
Sinulla on myös painikkeet.
Saat mukavan, klikattava painiketta.
Se ei tee mitään oikein nyt, mutta saat painiketta.
Voit olla divs tai välilevyt, jotta hajottaa sivusi eri ryhmiin.
>> Voit olla kohdat, sinulla on painikkeita.
Jos sinulla on kappaleita, sitten sinulla on unordered luetteloita, ul,
ja luettelot sisällä että li.
Joten nämä ovat hyvin perus rakennuspalikoita sivun.
Ja todellakin, aika paljon jokainen sivusto näet
aiotaan rakentaa Käyttämällä näitä samoja työkaluja.
Tietenkin, kaikki eivät katso tämä huono, koska olemme
menossa spice it up hieman.
Joten tämä tylsä vanha HTML ja alku muuttaen sen kauniilla paikalla
että me vain nähnyt pari minuuttia sitten.
>> Joten aloitetaan pois hyvin yksinkertainen.
Joten meillä on tämä painiketta täällä.
Vuonna Bootstrap, kuten näimme, voimme on mukava, kaunis, sininen painike.
Ja se on tehty ei tekemällä oman css.
Ei ole oman css täällä.
Se on tehty lisäämällä luokat teidän HTML-elementtejä.
Jos olet kokeillut luokkia, tai HREF, tai ankkurit, tai type = "text" varten inputs--
HTML-elementtejä voi olla näitä ominaisuuksia.
Ne voivat olla ylimääräistä tietoa että saatat antaa heille.
>> Ja niin, tässä tapauksessa, luokat ovat ominaisuus.
Joten haluat kirjoittaa, painike class = jotain sisällä jousille.
Ja että ominaisuus kertoo tietokone, tämä ei ole mikään, vanha painiketta.
Se on painike, joka on tämän luokan painikkeet.
Ja niin Bootstrap, jos annat sille tietty tyyli teidän elementti,
se vetää se tietyllä tavalla.
Niin minä kirjoitan "BTN BTN-ensisijainen.
btn on lyhenne painiketta.
Huomaat nyt minun ruma painike kääntyi
osaksi mukava, kaunis, sininen painike.
Se näyttää todella hyvältä kun klikkaa sitä.
>> Ja niin mitä tapahtuu, on meillä btn luokan ja btn ensisijaisen luokan
meidän elementti.
Ja Bootstrap menee ja sanoa, OK, minä tietää, että on nämä kaksi luokkaa.
Elementti, jolla on nämä kaksi luokat olisi tehtävä näin.
Niin, että ydin miten liität tyylejä elementtejä Bootstrap.
Sinä vain liittää luokat heille ja se punnitsee sitä parhaaksi katsomallaan tavalla.
Joten tässä on toinen esimerkki.
Vuonna tulo, voimme lisätä class = "muoto-ohjaus".
Ja minä näytän pian jossa voivat selvittää, mitä luokkia
ovat saatavilla kunkin eräänlainen elementin.
Mutta luokka että me vain Lisätty on mukava, pyöristetyt kulmat,
se on mukava pehmuste, se on mukava, sininen hehku sitä.
>> Voimme myös mennä tämän lomakkeen.
Ja class = "muoto-inline", joka tekee meidän muodossa, kuin voisi kuvitella, inline.
Joten se etsii vähän enemmän kuten mitä meillä oli ennen jo.
Joten ennen kuin lähdemme tyyliin muualle sivu, kysyttävää mitä me
teki?
Me vain liitteenä luokat meidän eri elementtejä.
Ja minä näytän sinulle myöhemmin, miten voit selvittää, mitä luokat ovat käytettävissä.
Kiinnitimme luokat, jotka on tiettyjä tyylejä.
Ja joka kertoo selaimen miten layout sivulle
Bootstrap n tarjotaan tyylit.
Mikä tahansa yleisön kysymyksiin?
>> Hyvä tähän mennessä?
Viileä.
Paljon haasteita jossa Bootstrap on vain
tietämättä mitä osat ovat käytettävissä ja miten käytät niitä.
Ja että on kaikki oppineet joilla on kokemusta ja myös
lukemalla dokumentaatio, joka me puhumme pian.
Joten meillä on tämä div.
Se on vain tylsä, vanha juttu.
Haluamme korostaa sitä jotenkin.
Joten Bootstrap, on paljon komponenttien käytettävissä.
Ja tämä on getbootstrap.com.
Se on erittäin hyödyllinen viittaus.
Se sisältää asiat like-- tässä miten teet painiketta.
Ja voit tehdä nav baareja, voit tarroja, voit edetä baareja,
voit tehdä listan ryhmiä.
Pohjimmiltaan se on kaikenlaisia ja saatat nähdä web-sivulla.
>> Tässä on yksi että me yritämme nyt.
Sitä kutsutaan paneeli.
Jos koskaan käytä Google Nyt he ovat kortteja.
Tai mikä tahansa Android laite on kortteja.
Ne ovat pieniä valkoisia laatikoita että on tavaraa sisällä siitä.
Ja niin aiomme yrittää tehdä että itse tästä käyttäen asia
kutsutaan paneeli.
Joten jos pidämme class = "paneeli paneeli-default "meidän ulko div,
sitten pidämme div class = - katsotaanpa vain tarkistaa nämä asiakirjat.
div class = "paneeli-otsikko" ja sitten div class = "paneelit-elin".
Jälleen, älä välitä muistaa tämän koodin.
Se on saatavilla verkossa.
>> Joten teimme tämän ja nyt meidän tylsä, vanha div muuttui tämä mukava, pieni kortti.
Se on mukava pehmuste, se on rajoja, se erottuu
muusta sivun, joka on aika siistiä.
Joten mennään sisään ja muuttaa Get suuntiin painiketta hyvältä.
Kuka yleisö haluaa kertoa minulle mitä voin tehdä painikkeen
jotta se näyttää kiva käyttää Saapasraksi?
Kyllä?
>> Yleisö: Voisimme lisätä luokan.
Ja voisimme tehdä class = "BTN BTN-ensisijainen".
NEEL Mehta: Kyllä.
On joukko muita saatavilla olevat värit buttons--
tai mitään, että asiassa.
Voimme tehdä btn-vaaran ja tehdä siitä punainen.
Siellä mennään.
Voimme tehdä btn-menestys tehdä vihreitä.
Voimme tehdä btn-info-- siellä nippu asioita, jotka ovat käytettävissä.
Joten minulla on pieni haaste sinulle nyt.
Joten vielä yksi asia että olen jättänyt YK-tyylistä.
Tämä Top Ravintolat.
>> Ja haluamme käyttää asia kutsutaan lista ryhmä tyyli sitä.
Joten haaste sinulle on mennä getbootstrap.com--
Minä vedä se tänne.
getboostrap.com.
Mene getbootstrap.com, löytää osio, jossa ne menevät yli lista ryhmiä.
Ja näet täällä Esimerkiksi ja oikea luokat
että voit tehdä luettelot näihin mukava lista ryhmiä.
Nämä ovat työskennelleet esimerkkejä koodia esimerkkejä, mitä
koodi käytät, mitä HTML-koodi käytät ja mitä se tuottaa.
>> Joten haaste sinä-- mennä getbootstrap.com,
onko olet täällä tai kotona, ja yrittää lisätä tyylejä tämän ul
jotta se näyttää hyvältä.
Ja käyttää luetteloa ryhmä tyyli.
Haluat ottaa pari minuuttia, ja etsiä asiakirjat,
kokeile tätä itsenne?
Koska kun teet web-kehitys, huomaat paljon työsi
aiotaan lukeminen nämä asiakirjat.
Niin mielestäni se on hyvä tutustua miten lukea asiakirjoja,
Miten selvittää, mitä, missä, mitä koodi esimerkkejä voit käyttää,
mitä voit hyödyntää.
>> Joten jälleen, getbootstrap.com, Siirry Komponentit-välilehti,
ja sitten selaa luetteloon Group.
Ja näet esimerkkejä koodin voit tehdä HTML luvallinen.
Joten ota pari minuuttia ja kokeile ja tutkia sitä itse,
onko olet täällä tai kotona.
Jos olet kotona, keskeyttää videon, ehkä, ja kokeilla sitä itse.
Jos olet täällä, jos menet meidän website-- jos päivitä sivu,
näet tämän siellä.
Tämä sama koodi on vain uusia tyylejä oikeassa.
Joten kestää muutaman minuutin.
Haluaisin tietää, kun olet hyvä olo siitä tai kun olet täysin menettänyt.
Kuulostaa hyvältä?
Viileä.
Nopea varattu niille, kotona, kun odotamme,
jos mennä GitHub sivuston että Laitoin pari dioja sitten,
kohti videon alussa, Minulla GitHub Repo, arkistoon,
tätä puhetta.
Kaikki nämä koodiesimerkkejä että tulemme puhumme tallennetaan täällä.
Joten jos menet haastaa-1.html, tämä on kaikki koodi, että meillä on juuri nyt
meidän CodePen.
Joten voit vain mennä eteenpäin, ja kopioida Tämän, ja liitä se omassa CodePen.
Ja näin voit pysyä mitä teemme täällä.
Niin on tämä sivu auki sekä me käydä läpi loput seminaarin.
Jälleen haluat sen näyttää mitä katso alas näytön alaosaan
siellä.
Hyvä olo?
Kiinteä.
Odottakaamme kaikki muutkin loppuun asti, mitä he tekevät.
>> Kyllä?
>> Yleisö: Oletetaan, että halusin käyttää Bootstrap klo home--
NEEL Mehta: Kyllä.
Yleisö: Näen, verkkosivuilla, Aloittaminen sivu.
Ne antavat minulle vaihtoehtoja Bootstrap, Source Code, tai Sass.
Mikä näistä haluan?
>> NEEL Mehta: Kyllä.
Joten kysymys on, miten saat alkoi käyttää Saapasraksi itse?
Se vain sattuu maagisesti työskennellä täällä.
Joten jos meillä on aikaa loppuun seminaarin,
Minä näytän sinulle, miten voit saada se oman Web-sivun.
Kuten täällä, olen todella laittaa joitakin asetuksia, jotka
on se automaattisesti ladattu, mutta minä
näyttää tehdä sen raapia oman web-sivuja.
>> Yleisö: Kiitos.
>> NEEL Mehta: Kyllä.
Hyvä kysymys.
Hyvä olo?
Hyvä olo?
Viileä.
Kuka haluaa kertoa minulle, kuinka he tekivät tämä asia hyvältä ja Boostrappy?
Mikä on ensimmäinen luokan lisäämme ul?
Yleisö: class = "list-ryhmä".
NEEL Mehta: Kyllä. lista-ryhmä.
Ja sitten mitä pidämme lis?
Joku muu?
Yleisö: Ja sitten, kun että, class = "list-ryhmä-erä".
>> NEEL Mehta: Kyllä.
>> Yleisö: Ja se on sama seuraavaan.
>> NEEL Mehta: li class = "list-ryhmä-erä".
Ole hyvä.
Meillä on mukava lista ryhmä, aivan kuten odotimme.
Joten te mennä.
10 minuutissa, olemme tehneet tämä tylsä, vanha Yalp! sivu
hyvältä ja ammattimaista.
Ja tämä on vasta alkua.
Joten nyt tuntuu hyvä siitä, katsotaanpa
vain mennä eteenpäin ja puhua pari komponentteja että
voi olla hyötyä, kun mennä koko seikkailu.
>> Tietenkin siellä on paljon niitä täällä.
Ja nyt kun olet oppinut miten luetteloon ryhmiä,
voit melko paljon opettaa itse, miten tehdä mitään näistä.
Mutta tietenkin, haluan vain yrittää ja tehdä pari enemmän itseämme,
juuri niin saat tuntuman miten voit käyttää niitä.
Olen juuri menossa tämän esimerkin tästä.
Jälleen, koodi, että olen juuri kopioitu täällä on saatavilla täällä.
Joten rohkeasti vedä se ylös.
>> Joten olemme jo käyneet läpi pari näistä esimerkeistä.
Meillä on siis painikkeita, jota ovat jo nähneet, miten tehdä.
Voimme tehdä painikkeet suurempia.
Button class-- se menee, BTN BTN-lg ja btn-oletuksena tekee valkoinen.
Joten tämä tekee painiketta isompi kuin se voisi muuten olla.
Se voi olla hyötyä, jos sinulla on iso Lähetä-painiketta tai jotain.
Näimme luettelon ryhmä esimerkiksi näimme muodossa esimerkki.
>> Yksi hyvin tärkeä on kuvakkeita.
Ja kuvakkeet ovat tapa, jolla voit lisätä mielenkiintoisia asioita, kuten check check
markkaa eli plussia, tai ystävä kuvakkeita, tai käynnistä uudelleen kuvakkeet,
tai mitä tahansa Web-sovellus.
Joten jälleen, jos me osaksi täällä, komponentit, glyphicons,
ovat kuvakkeet saatavilla Bootstrap.
Ei tyhjentävä luettelon kaikista niistä täällä.
Aivan kuten esimerkiksi Kokeillaan ja lisätä yhden.
>> Joten kuten Facebook, olemme yrittää on Lisää ystävä -painiketta.
Katsotaanpa ensin lisätä tyyliä.
painike class = "BTN BTN-menestys".
Ja siellä mennään.
Katsotaanpa lisätä kuvakkeen täällä.
Mikä kuvake, luulet, saattaisi olla järkevää laittaa tänne?
Olet luultavasti nähnyt jotkut web-sivuja tai mitä tahansa,
mutta mitä on esimerkki kuvaketta voisi mennä hyvin sisälle painiketta?
Voit vapaasti selata tätä mieltä, jos tarvitset inspiraatiota.
Siellä on paljon hyödyllistä niistä saatavissa täältä.
Kyllä?
>> Yleisö: Ehkä glyphicon käyttäjä yksi?
NEEL Mehta: OK.
Tämä.
Se on aika hyvä.
Kyllä.
Facebookissa, mielestäni näyttäisi vähän niin.
Joten tässä miten osaamme kuvakkeita sivuillemme.
Meidän on vain span-- jänneväli on neutraali säiliö jotain.
Div on säiliö jotain, jänneväli on toinen säiliö.
divs on rivinvaihdot heidän ympärillään, jännevälit eivät.
Joten ei eri tapoja ottaa yleinen kontteja.
Kuten se ei ole järkevää laittaa se sisällä kappaleen tai mitään.
Meidän täytyy laittaa sen sisällä jotain kuitenkin,
joten me vain laittaa sisälle span.
Joten span class = glyphicon glyphicon-user "lähellä span.
Ja meillä on nyt -kuvaketta painiketta.
>> Joten se ei näytä täysin toisin mitä saatat nähdä facebook.com.
Ja niin se on mukavaa, että nämä voivat todella sijoittaa minne tahansa haluat.
Teidän otsikon baareja, listaasi ryhmissä.
Aivan sama.
Sen ei tarvitse olla sisällä painalluksella.
Niinpä esimerkkinä, voin laittaa samaan luokkaan täällä.
"Glyphicon glyphicon-käyttäjä".
Ja se näyttää aivan sama.
Joten nämä icons-- voit span class = "glyphicon glyphicon-riippumatta".
Ja jonka avulla voit lisätä kuvakkeet minne haluat.
Ja kuvakkeet ovat erittäin tärkeitä osa tekee sivua Katso
ammatillinen ja hyvin tehty.
Joten älä liioittele, mutta se on usein hyvä tietää.
>> Paneelit, jälleen.
Otan vain tehdä jälleen kertaus koska he tavallaan mukana.
Huomaat, että vuonna kääntämällä normaali HTML
tehdasalueelle Bootstrap-afied sivuston, sinun on
lisätä ylimääräisiä rakenne verkkosivuilla.
Esimerkiksi meillä on ylimääräistä divs täällä vain koska ne
tarvitaan, jotta paneeliin.
Joten pitää tämä mielessä, että sinun täytyy saada ylimääräistä rakenne.
Joten "paneeli paneeli-default".
Ehkä se on paneeli-header.
Minusta se on paneeli-otsikko.
Kyllä.
Siellä mennään.
Joten, jälleen, on meidän paneeli.
>> Vielä yksi asia, että me ei kata vielä, taulukoita.
Taulukot, oletuksena ulkoasu sellainen ruma.
Kuten tämä.
Mutta taulukot ovat, tietenkin, erittäin tärkeä osa
mitä voit tehdä web-kehitystä.
In Pset7, esimerkiksi, CS50 Rahoitus, joka tulee ulos pian,
voit käyttää paljon taulukoita.
Ja paljon web dev käyttää paljon taulukoita näyttää tietoja,
kuten varastot, tai tulokset, tai mitä tahansa.
>> Joten muotoilu taulukot on todella helppoa.
Voit lisätä taulukon luokan pöytään.
Ja, uskallan sanoa, se näyttää melko hyvältä.
Voit tehdä ylimääräisiä asioita, kuten "Pöytään-raidallinen".
Ja näet tuloksia.
Voit tehdä pöytä-rajautuu.
On paljon vaihtoehtoja voit.
Mutta pohjimmiltaan, lisäämällä taulukko, taulukko luokka,
tekevät taulukot näyttävät ihan kivoja.
Niin, että lyhyt pilaantunut jotkut tärkeämpää tyylejä
ja komponentit te ll täytyy käyttää Saapasraksi.
Joten uskon, että kääreet jopa meidän kaunis osa.
Kaikki kysymykset juuri nyt siitä, miten tehdä verkkosivustoja kaunis?
Miten voit käyttää näitä komponentit eduksesi?
Hyvä olo?
Kyllä?
Yleisö: Ehkä tämä on typerä kysymys,
mutta voit käyttää Bootstrap Wikipedia?
Jos muokkaat Wikipedia sivu?
NEEL Mehta: Kyllä.
Joten kysymys oli, olen muokkaaminen Wikipedia sivu,
voin lisätä Bootstrap tyylejä siellä?
>> Yleisö: Kyllä.
>> NEEL Mehta: Ja niin Bootstrap on pohjimmiltaan iso CSS-tyylisivu.
CSS tyylisivu vain sanoo, kun Minulla on tässä luokassa, kiinnitä nämä tyylit.
Joten CSS tyylisivu Saapasraksi tulee olemaan jotain .btn,
painiketta luokka, saa kuin pyöristetty kulma rajalla tai mitä tahansa.
Joten periaatteessa, bootstrap se vain nippu luokat ja joukko tyylejä
määritelty näistä luokista.
Niin kauan kuin sinulla on, että CSS, tämä sääntöjen luettelossa sivusi,
saat Bootstrap muotoilu.
Tämä on tietenkin riippuvainen ottaa Saapasraksi tyylejä sivusi
aivan aluksi.
>> Ja niin Wikipediasta, luultavasti voinut
tehdä, koska Wikipedia ei ole Bootstrap siinä.
Mutta jos se ei ole Bootstrap, voisit ehkä tehdä.
Ja jos halusi, voisit sisällyttää sen, mutta jotka saattavat
murtaa nykyinen ulkoasu sivun.
Mutta erittäin hyvä kysymys.
Voit käyttää Bootstrap missä se on mukana,
mutta se ei ole rakennettu oletusarvoisesti.
>> Yleisö: Kiitos.
>> NEEL Mehta: Kyllä.
Kysyttävää?
Kyllä.
Joten onko olet täällä tai kotona, vain muistaa getboostrap.com-- uudelleen,
getboostrap.com-- on ystäväsi.
Aina kun käytät Bootstrap, tämä antaa sinulle
ohjeet siitä, miten saada alkoi, miten käyttää komponentteja.
On hienoja JavaScript laajennuksia, että emme mene tänne,
mutta he arvoinen tsekata samoin.
Joten tämä on ystäväsi.
Se on vain tärkeää saada käytetään miten käyttää tätä.
>> Joten keskustella vähän siitä tehden reagoiva sivustot.
Joten kuten aiemmin sanoin, ihmiset käyttää niiden kannettavat tietokoneet, he käyttävät puhelimet.
Ja ehkä hyvin kuvitella, tämä on hyvin eri näytön kokoa kuin.
Ja niin samalla sivustolla että näyttää hyvältä puhelimessa
ei aio näyttää hyvältä, väistämättä, tietokoneella.
Joten mitä sinun pitää tehdä on jotta sivustosi sopeutua.
Sen on mukauduttava eri näytön koko, että se on päällä.
>> Se on sanottava, tiedän olen tietokone, iso kannettava tietokone, minun pitäisi laajentaa.
Tiedän, että olen puhelimessa, minun pitäisi kutistua.
Ja niin Bootstrap tarjoaa joitakin erittäin, erittäin hyödyllisiä työkaluja tähän.
Joten Bootstrap let n tauko verkkosivuston 12 saraketta.
Voit tehdä rivejä ja on 12 saraketta.
Ja voit osioida ne kuitenkin haluat.
Sinulla voi olla yksi, iso juttu, joka on 12 saraketta leveä.
Sinulla voi olla kaksi asiaa jotka ovat kuusi kukin.
Voit tehdä yksi asia, joka on neljä, yksi, joka on kaksi tai yksi, joka on kuusi.
Voit tehdä kolme, kolme, kolme, kolme.
Voit tehdä mitä erittely että haluat.
>> Joten ehkä Web-sivun tarvitsee vasen sarake se kolmasosa leveydestä.
Jotta olisi neljä saraketta leveä ja muun sivun
olisi kahdeksan saraketta leveä.
Joten tämä on esimerkki.
Katsotaanpa vedä toinen esimerkki.
>> Yleisö: Onko se aina olla jopa jakaa?
Voisiko se olla seitsemän, viisi split?
>> NEEL Mehta: Kyllä.
Se voisi olla seitsemän, viisi.
Kyllä.
Niin kauan kuin se lisää 12, se on hieno.
Joten mennään takaisin tänne.
Jälleen koodi, joka on tässä on myös saatavilla täällä,
alle reagoiva esimerkki.
Joten olen juuri vetänyt joitakin Esimerkiksi reagoiva koodi tähän.
Joten voit tehdä tämän käyttämällä asia sanottu peräkkäin.
Rivi on vain yksi luokka.
Se on toinen tyyli lisäät päälle divs tehdä niistä omia komponentteja.
>> Joten te sanotte, div class = "rivi" tehdä peräkkäin,
antaa itsellesi 12 saraketta tilaa.
Ja sitten laitat sarakkeet sisällä että.
Joten tässä me COL-xs-6.
Älä välitä xs.
Puhutaan sisään sekuntia.
Mutta pohjimmiltaan, meillä on yksi asia, joka on kuusi leveä.
Me kutsumme sitä vasemmalle.
Ja niin se on vasen laatikko täällä.
Meillä on yksi asia, joka on kuusi 12 saraketta leveä.
Ja että yksi on oikealla.
>> hyvin vain antaa merkkeihin teidän div täytä se harmaa.
Niin, että on vain niin voimme nähdä, että ne ovat erillisiä.
Ja niin tämä ensimmäinen esimerkki.
Se on hyvin yksinkertainen esimerkki siitä, miten olisi käyttää rivejä ja sarakkeita.
Voit määrittää peräkkäin class = "rivi".
Ja sitten et class = "COL-xs-6" do puoli, "COL-xs-6" tehdä toinen puoli.
Tässä monimutkaisempi esimerkki.
Katsotaanpa Tiny, Huge, loput yksi.
>> Voimme tehdä Tiny kaksi saraketta leveä, voimme tehdä Valtava kuusi saraketta leveä,
ja loput neljä saraketta leveä.
Joka lisää jopa 12.
Ja niin nämä päätyvät ulottuu leveys sivun.
Jälleen olemme rivi ulkopuolella.
Sitten meillä on div class = "COL-xs-2" ja sitten 6, ja sitten 4.
Ja joka antaa rakenne meille.
Ja jotta voimme laittaa mitä helkkaria haluamme sisällä täällä.
Sen sijaan Tiny, voimme laittaa painiketta.
painike class = "BTN BTN-ensisijainen".
Ja niin huomaa, että meidän painiketta ei vie kaikki leveys,
mutta ainakin se on rajoitettu on niin paljon tilaa.
>> Niin, että on ihan hyvä.
Joten voimme nyt hajottaa meidän web sivu paloiksi, leveys viisas.
Voimme sanoa haluamme vasemmalle sarake, ja oikea sarake, ja niin edelleen.
Mutta emme ole menneet yli miten teet sen reagoiva.
Ja niin Bootstrap tehdään se samoin.
Se on näitä asioita kutsutaan raja-arvoihin.
Joten se on tapa tietää, onko olet kannettavan tietokoneen, olet tabletti,
olet puhelin vaaka, tai olet puhelin pystysuora.
Se tietää näytön koko.
Ja rikkoo tätä neljään luokat-- suuri tai LG, joka on kannettavat tietokoneet, yleensä.
md tai väliaineessa, joka on tabletteja.
sm, pieni.
Tai xs, extra pieni.
Ja niin kun olet määrittänyt sarake, sanot,
se olisi kuusi saraketta leveän on ylimääräinen pieni laite.
Siksi teimme COL-xs-6.
Sanomme, että se olisi kuusi 12 saraketta leveän
on ylimääräinen pieni laite.
Ja jos se on jotain isompi, me vain oletuksena käyttämällä ylimääräistä pieni koko.
Jos se on jotain isompi kuin Erittäin pieni, se tulee olemaan kuusi leveä.
Ja jotta voimme hyödyntää nämä tehdä meidän sarakkeet
vievät eri määrän sarakkeet perustuu näytön koko.
Mennään tähän reagoiva koon.
Joten meillä on sarakkeita.
Ja se sanoo: "COL-lg-6 COL-xs-12".
Joten annetaan mitä tiedät toistaiseksi, mitä sinä
luulevat tapahtua valkokankaalla?
No, se on eräänlainen väistyneet, mutta mitä tehdä
luulet se näyttää Samoin kuin valkokankaalla?
Ja miksi?
>> Yleisö: Onko se, että suurella näytöllä, se on
vie vain osan koko tilaa?
Kuten puolet siitä, kai?
>> NEEL Mehta: Kyllä.
>> Yleisö: Ja pienempi näyttö, se on menossa
ryhtyä koko näytön, 12.
NEEL Mehta: Kyllä.
Oikea.
Niin Oletetaan esimerkiksi, katsokaa tänne.
Kyllä.
Joten mitään, että on LG tai bigger-- joten minun tietokone tapahtuu
on LG, koska se on melko wide-- se tekee
se rinnakkain, koska se on COL-lg-6.
Joten koska se on päällä suuri, se tekee kuusi saraketta leveä ja kuusi saraketta leveä.
Katsotaan, mitä tapahtuu, jos tehdä tästä pienempi.
Olen juuri menossa un koko näytön tämän.
Ja aion kutistua näytön.
Aion kutistua näytön, joten se näyttää Olen pienemmässä laitteessa.
Joten aion kutistua sen näin.
>> Ja voila.
Se on nyt pinottu koska nyt olemme menneet
suurista to-- tämä on luultavasti Erittäin pieni näytön koko.
Ja nyt se sanoo, OK, emme ole suuria, olemme Erittäin pieni maa.
Joten aiomme käyttää Erittäin pieni koko.
Ja aiomme xs-12, xs-12.
Joten se tulee pinota.
Ja juuri huomaa, että on olemassa asia sanottu keskeytyskohta.
Breakpoint on, jos teit siirtyminen
ylimääräisestä pienistä pieni, pienistä suuriin, ja niin edelleen.
>> Joten huomata, että koska minä liuta tämä ulos, lopulta, saat siihen pisteeseen
jossa he hypätä olla vierekkäin.
Ole hyvä.
Joten siellä murtuessa oikeassa.
Joten voimme tehdä sen vieläkin monimutkaisempi.
Nyt voimme sanoa, nämä asioiden pitäisi olla neljä leveä.
Eli ne pitäisi kestää noin kolmasosa
puheen hyvin suuri laitteissa.
Keskipitkällä laite, sen pitäisi kestää puolet näytön koska se MD-6.
On hyvin pieni laite, se pitäisi ottaa 12.
Ja niin tämä näyttää melko luonnollista.
Haluan vain kokeilla tätä itse.
>> Joten valkokankaalla, ne neljä leveä.
Kutistua sitä vähän.
Ja he ovat nyt kuusi leveä.
Joten tämä on kuusi, kuusi, kuusi.
Kutistua se vieläkin ja sitten ne täysin päällekkäin.
Joten tämä, esimerkiksi järkevää jos sinulla on kortteja, kuten uutiset kortteja,
Esimerkiksi kun jos se on hyvin valkokankaalla,
se on OK, jos sinulla on useita vierekkäin koska ne kaikki saavat tarpeeksi tilaa.
Mutta niillä on oltava riittävästi tilaa.
Joten pienempi näyttö, et haluaisi antaa heille
enemmän tilaa, suhteellisesti, sivun.
>> Niin reaalimaailman esimerkki, Sanotaan meillä on Twitter.
Ja meillä on tekstikenttään, niin voit jaa puolella.
Ja meillä on lista trendit aiheita oikealla puolella.
Joten valkokankaalla, meidän pitäisi ovat ne olla vierekkäin,
joten voit nähdä ne lasi.
Mutta pienempi näyttö, meidän pitäisi tehdä 12 ja 12,
niin että trendit aiheita ovat alle visertää alueella.
Koska piipittää alue on Tärkeintä ja pieni näyttö,
trendit aiheita eivät asia aivan yhtä paljon.
Ja niin me korjata ne alla, joten että he voivat sekä saada tarpeeksi tilaa.
Järkeä tähän mennessä?
>> Yleisö: Kyllä.
>> NEEL Mehta: Kiinteä.
Niin, että kaikki esimerkit minulla on täällä.
Yritetään tehdä haaste.
Joten jälleen, tämä on haaste-2.html varten Niille teistä seuraavat pitkin kotona.
Joten minun kaveri, Mark Zuckerberg, tuli minulle toinen päivä.
Ja hän on kuin, Neel, minulla on mennyt aika hyvä web design.
Voin tehdä HTML.
Olen tehnyt tämän pienen, uusi edit Facebookiin.
Minulla on uusi idea miten meidän pitäisi tyyli Facebook.
Ja tässä se on.
Juuri täällä.
Seuraavassa joitakin esimerkki koodi.
Niin sitä kutsutaan Fancybook.
>> Meillä on joitakin tilapäivitykset.
Meillä on Nemo, Mike Kosowski, ***-- kolme tilapäivitykset.
Ja sitten meillä on lista verkossa ystäviä oikealle alapuolella.
Niin hän on tehnyt läksyjä.
Hän tietää hieman siitä Bootstrap, hän teki luettelonäkymän,
hän on tehnyt hieman HTML.
Niinpä hän on web-sivun.
Mutta hän on kuin, Neel, en ymmärtää reagoiva suunnittelu lainkaan.
Onko teillä asiantuntijoiden voisi auttaa minua, että?
Ja onneksi, olet nyt asiantuntijoita reagoiva suunnittelu.
>> Joten mitä hän kertoi minulle oli, että hän haluaa Fancybook näyttää tämän.
On hyvin pieni laite, kuten puhelin, kaikki
olisi päällekkäin, kuten täällä.
Joten sinulla on aikajana etukäteen, ylös, ja sitten
sinulla pitäisi olla chat alareunan.
Mutta tabletti tai keskipitkällä laite, se olisi puolet ja puolet,
kuten aikajanalla pitäisi olla puolet ja luettelo chat ystäviä
pitäisi olla toinen puoli.
>> Sitten kannettava tietokone, aikajana pitäisi ottaa kolme neljäsosaa
ja sitten chat hedge olisi vievät toinen neljännes.
Ja niin hän on kuin, Neel, minulla on tämä koodi täällä, mutta se ei ole herkkä.
Se tarvitsee käyttäytyä näin.
Joten haaste sinulle annetaan tämä koodi here--
jos päivittää CodePens, näet tämän.
Tai jos vain liitä koodi on haaste-2, näet tämän.
>> Tässä tämä esimerkki koodi.
Näet joitakin XXXS.
Haluan sinun muuttaa XXXS, niin että aikajana ja luettelo ystäviä
seuraa näitä silmälasit täällä.
Älä välitä mitä sisällä aikataulu nyt.
Pääsemme että seuraavassa vaiheessa.
Mutta nyt, katsotaanpas jos saamme näitä asioita jakaa sitä näin.
Joten ei järkeä?
Joten jos olet kotona, pysäyttää videon ja kokeilla
tehdä Web-sivun näyttää reagoivan näin.
Jos olet täällä, ota kuten kaksi, kolme minuuttia.
Voit vapaasti keskustella naapurin, ja yrittää, ja korjata Mr. Zuckerberg
reagoiva suunnittelu ongelma.
Jos sinulla on kysyttävää, rohkeasti haluaisin tietää.
Hyvä olo?
Tehty?
Kiva.
>> Yleisö: [äänetön].
NEEL Mehta: Mitä?
>> Yleisö: Olen hyvä.
>> NEEL Mehta: Voi, hyvä.
Kiva.
Yleisö: asia 12, on se, että Bootstrap
kohtelee tietyn näytön tilaa kuin 12 yksiköt esille sitten jakaa että jopa?
Miten tarkalleen suhteuttamalla työtä tämän?
>> NEEL Mehta: Kyllä.
Joten kysymys on, miten ei annostelu
työtä Bootstrap, eikö?
>> Yleisö: Kyllä.
NEEL Mehta: Joten jos sinulla div class = "rivi",
ei väliä kuinka suuri näyttö on, Bootstrap antaa sinulle 12 yksikköä
Saman kokoinen vievät niin paljon koko.
Joten col 1, se on aina 8,33% ja näytön koko,
onko se tämä laaja tai että tämä on laaja.
Ja niin, tietenkin, pienemmässä näyttö, kukin sarake on pienempi.
Sinulla on vielä 12 saraketta leveä, se on pienempi.
Joten se on jopa voit varmistaa, että että asiat vievät enemmän pylväs,
suhteellisesti kompensoimiseksi että tilan puute.
Onko siinä järkeä?
>> Yleisö: Kyllä.
Kiitos.
NEEL Mehta: Hyvä kysymys.
Yleisö: On suuri näyttö, voit olla
aikajana vievät kolme neljännestä?
>> NEEL Mehta: Kyllä.
NEEL Mehta: Miten kaverit tunne?
Hyvä?
Viileä.
Joten tulla takaisin.
Ja nyt yrittää korjata tämän osan Mr. Zuckerberg verkkosivuilla.
Joten aikataulut on täällä, at alkuun, ja luettelo ystäviä
on alareunassa.
Ja niin meidän täytyy vain antaa sarakkeita, joissa mitoitus suhteessa,
kussakin näistä.
Joten tämä ensimmäinen *** on aikajanan.
Mitä luokkia me laittaa tänne?
Mitä te laittaa tänne?
Joten muistakaa, suurella näytöllä, se tarvitsee ryhtyä kolme neljäsosaa leveys.
Ja niin mitä tyyliä antaisi teille, että?
Suurella näytöllä, kolme neljäsosaa leveys.
Mitä luokan käytämme siellä?
Yleisö: Joten me vain olemaan muokkaamalla että ensimmäisen oikeusasteen luokan.
NEEL Mehta: Nyt.
Kyllä.
>> Yleisö: Emme muokkaamalla kunkin, yksittäisiä piirre aikajanan?
NEEL Mehta: Ei nyt, ainakin.
Joten tämä koko juttu on lohko.
Me vain muuttamalla suunnittelu lohkon.
Joten tässä me COL-lg-9, koska se on yhdeksän 12 leveä valkokankaalla.
Ja sitten keskipitkällä näytöllä, kuinka monta saraketta minun pitäisi saada?
Yleisö: Se on tarkoitus olla puolet ja puolet.
NEEL Mehta: Oikea.
Joten kuinka monta on?
>> Yleisö: Niin kuusi.
NEEL Mehta: Kuusi.
Ja sitten ylimääräinen pieni olisi be-- jos se vie koko leveys rivin,
kuinka monta pitäisi olla?
Yleisö: 12.
NEEL Mehta: 12.
Kyllä.
Ja nyt meidän täytyy muuttaa toisilla,
joten se vie loput tilasta.
Joten COL-lg--
Yleisö: Se tulee vievät koko ruudun?
NEEL Mehta: Se vie neljäsosa näytön suuri laite,
kuten näytimme täällä.
>> Yleisö: Kolme.
>> NEEL Mehta: Kolme.
Ja sitten COL-MD-6 ottaa ylös loput tilasta.
COL-xs-12.
Joten nyt meillä on aikajana aloittamisesta kolme neljäsosaa
Sivun vuonna valkokankaalla ja sitten neljäsosa puolella.
Ja sitten jos koko näytön alaspäin, se pitäisi muuttaa vastaavasti.
Joten se on pinottu nyt, on hyvin pieni näyttö.
Ja jos me koko sitä hieman, niiden pitäisi olla tasan puolet ja puolet.
Joten olemme tehneet, että toistaiseksi.
Todella siistiä.
Ja niin emme tee muut osa haastetta.
Voit tehdä sen itse.
Mutta pohjimmiltaan, sinun täytyy yrittää tehdä näitä reagoiva
kuten well-- tehdä aikajanalla kohteita, itse, reagoiva.
Joten nyt olemme käyneet läpi kaikki mitä sinun tarvitsee tietää
noin reagoiva puolella Bootstrap.
Kysyttävää reagoiva muotoilu Bootstrap
ja miten voit mennä noin tekee, että?
Kyllä?
>> Yleisö: Onko se samanlainen, jos meillä oli upotettu video
ja halusimme hallita mittakaavassa, jossa video was--
koko videon menee kannettavan puhelimeen.
NEEL Mehta: Kyllä.
Enemmän tai vähemmän.
Sinun täytyy kertoa videon vievät niin paljon tilaa kuin se on annettu,
joka on hieman ärsyttävää joskus.
Mutta ydin idea on sama.
Video, kuten mikä tahansa muu esinettä sivu, kuten painike tai mitä tahansa,
niin kauan kuin käytät sarakkeet ja rivit,
voit antaa sen tietty määrä kiintolevytilaa.
Ja niin saada se kunnioittaa että on Eri kysymys koska kuten YouTube
upottaa on tietty, edullinen koko.
Mutta teoriassa at Ainakin, se toimisi.
Viileä?
>> Yleisö: Oletan siis, kuvalle, oletteko todella
täytyy olla eri versioita samaa kuvaa eri kokoja
kannettavalle vs. iPhone?
Joo kysymys on, me tarvitsemme on kuvia, jotka reagoivat samoin.
Ja todellakin, voit tehdä sen.
Minusta se on CSS.
Mutta Bootstrap avulla voit tehdä samoin.
Voit olla herkkä kuvia.
Voit kirjoittaa kuvia kokoa koon mukaan sivun.
Ja siellä on hyvin uusi asia HTML5, uusin versio HTML,
ja CSS3, uusin versio CSS, joka
avulla voit pyytää eri kuvia perusteella näytön koko olet.
Yleensä se on tarpeeksi hyvä vain on kuvasi vain kutistua tai kasvaa
mutta suuri sen pitäisi olla.
Mutta voit, jos haluat että, on yksi 32 32
hyvin pienillä näytöillä, ja 64 64 iso näyttö,
ja sitten palvella valikoivasti.
Sinä voit tehdä sen.
Se on tehty joitakin ihmisiä.
Se on edelleen melko kärjessä.
Mutta lyhyt vastaus, reagoiva images-- Bootstrap voi pelastaa päivän siellä.
Viileä?
>> Yleisö: Kiitos.
>> NEEL Mehta: Joten puhua todella nopeasti siitä, miten
saat tämän omassa web-sivun.
Sanotaan haluat tehdä oma sivuston avulla Saapasraksi.
Ja niin haluan vain vain kulkea läpi yhdessä.
Sanotaan teet vain normaali HTML-sivun.
Voit vapaasti seurata pitkin mitä mielimuokkaimellasi on.
Joten me vain joitakin HTML-sivu.
Voimme tehdä! DOCTYPE html.
Tämä on myös html, meidän sivu.
Ei mitään uutta.
Olemme tehneet tämän ennenkin.
Joten tässä meillä on HTML ja voimme laittaa tavaraa sisällä täällä.
Meillä voi olla painiketta.
Ja kuten sanoin, tämä ei välttämättä tule toimimaan.
Miksi ehkä tämä ei toimi?
Miksi ei saamme mukava, värikäs painike?
>> Yleisö: Koska emme linkittää sen jotta Bootstrap hankkeen tai tiedoston?
NEEL Mehta: Kyllä.
Korjata.
Koska Bootstrap-- se on vain fancy CSS-tiedosto.
Se on joukko tyylejä, jotka ovat liitetty elementtejä.
Täällä olemme kertoneet sitä, että me haluat käyttää näitä tyylejä.
Olen will koko että jopa hieman.
Me olemme kertoneet sen haluamme käyttää nämä tyylit, mutta emme koskaan
kertoi se mitä tyylit ovat.
Ja se mitä teidän kysymykseen aikaisemmin oli.
Se on vastaus tähän.
Meidän täytyy löytää tapa saada tyylit ja sisällyttää ne meidän sivulla jotenkin.
Ja niin Bootstrap tahtoa näyttää meille, miten se tehdään.
>> Joten jos menet alkuun täällä, Aloittaminen.
On eri tapoja ladata sen.
Tämä ei ehkä järkeä välttämättä.
Bootstrap-- Tämä antaa nappaat CSS-tiedoston itse.
Ja te mukana sitä omassa sivulla.
Source Code on, jos haluat hakata sitä itse.
Sinun ei tarvitse tätä todella.
Sass on kieli joka kokoaa osaksi CSS.
Ajattele sitä esikääntäjä.
Paljon kuin PHP on esiprosessorin HTML, Sass on esikääntäjä CSS.
Joten jos haluat tehdä sen Näin voit tehdä sen.
>> Helpoin tapa on käyttää CDN, tai sisällön jakeluverkoston.
Se on verkkosivusto, joka vain tarjoilee kopio Bootstrap
hyvin nopeasti voit sisällyttää oman sivun.
Joten tässä on esimerkki.
Se tulee antaa linkki elementin.
Linkki elementti kertoo selaimen, toteutettava kaikki tiedostot tallennetaan täällä
ja sisällyttää se nettisivuillamme.
Ja tässä tapauksessa, se on Bootstrap CSS-tiedosto.
Joten me vain kopioida että URL, tai että teksti, ja me heittää sitä sisällä
meidän pään.
>> Enkä aloittaa sivun tämän, mutta voit luottaa siihen, että tämä toimii.
Linkki sinut CSS.
Sisällyttää sen sivu ja sitten voit olla
voi käyttää kaikkia Bootstrap luokkaa, että te tiedätte ja rakkautta.
Jos haluat säilyttää sen paikallisesti ja on se omalla tiedostojärjestelmä
sen sijaan, mennä Internet napata sen,
kuten jos haluat käyttää sivustoa offline,
voit käyttää Download vaihtoehto.
Mutta suurimmaksi osaksi, käyttämällä CDN on melko nopeasti, koska sillä tavalla,
se on pidettävä ajan tasalla sinulle samoin.
Sinun täytyy manuaalisesti päivittää sitä.
Käydä järkeen?
>> Niin paljon työkaluja on tämä rakennettu vuonna oletuksena. Teidän Pset7 ja Pset8,
Uskon Bootstrap on automaattisesti mukana.
Ja CodePen varten Esimerkiksi on jo
mukana, koska olen lisäsi vielä, että asetus.
Joten jos joskus haluat leikkiä sen kanssa, voit vain mennä CodePen,
tai mennä tunnuksesi, tai mitä tahansa.
Ja saatat pystyä pääsy Bootstrap siellä,
mutta se ei ole aina rakennettu in, oletuksena web.
Käydä järkeen?
>> Kyllä.
aivan kuten recap-- olemme kuten viisi minuuttia jäljellä.
Mutta kertaus, vuonna uusia Web-sivuja, voit sisällyttää Bootstrap näin.
Ja kun olet sen mukana, voit tehdä kaikki hauskaa täällä.
Voit mennä, ja voit vain lukaista CSS, voit lisätä hienoja tyylejä,
voit olla komponentteja kuten painikkeet,
ja taulukoita, ja luettelo kohteita, jotka me mainita.
On hienoja JavaScript plugins, joka kannattaa tutkia.
He lisäävät hienoja interaktiivisuutta sivun.
Kuten tämä tekee liikennemuotojen vuoropuhelua.
>> Joten siellä on hauskaa voit tehdä Bootstrap.
Joten minun neuvoni teille on mennä eteenpäin ja käyttää sitä omia projekteja,
ohjeiden me juuri teki siitä, miten saada se,
ja vain lukea Bootstrap koska opit lisää siitä, mitä tehdä.
Ja niin olemme menneet yli, tänään, miten käyttää
asiakirjat, mitä rakennus lohkot ovat, ja miten se on käsitteellisesti.
Joten nyt minun haaste sinulle on tehdä sivuston avulla Saapasraksi.
Mene docs.
Ja käyttää työkaluja, että olemme oppinut tähän mennessä yrittää jäsentää niitä
ja ymmärtää niitä.
Ja käyttää näitä tyylejä ja työkalut näet siellä sivuston.
Ja se on vain iso, kokeellinen prosessi.
>> Kokeile tietyn tyylin.
Toimiiko se?
Onko ei ole?
Kokeile laittaa juttuja yhdessä.
Katso mitä tapahtuu.
Se on hyvin paljon itse ohjattu, löytö prosessi.
Mutta tänään, olemme oppineet hyvin perusasiat mitä on Bootstrap?
Miksi se toimii?
Kuinka se toimii?
Miten aloitat se, ensiksi?
Ja nyt, että olet yli että hump, te
olisi voitava tehdä sitä melko sujuvasti itse.
>> Joten jälleen kerran, kaikki koodi teimme on täällä.
Joten jos joskus haluat saada elvyttää,
kuten, mikä on nopea huijata arkki kaikille tyylit?
Voit mennä tämän otoksen täällä.
Meillä on joitakin esimerkiksi tyylejä täällä.
Jos haluat kokeilla haasteet jälleen itse,
voit kokeilla niitä täällä ja tutustu ratkaisuja.
Joten tämä linkki on mukana dioja, joka
lähetetään ulos teille tietenkin.
Mutta se on myös täällä.
Voit keskeyttää videon, jos haluat.
Kaikki tiedot, joita tarvitset on olemaan täällä, tällä sivustolla.
Joten jos joku on kysyttävää, voimme ottaa ne parin minuutin.
Muuten, kiitos kaikki Paljon katsomassa.