Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Així hola a tots els que estan veient aquí,
o veure en línia, o bé remotament.
El meu nom és Neel, això és CS50.
I el seminari d'avui és Responsive Disseny web amb Bootstrap.
És un tema que és molt a prop del meu cor.
Amb sort, serà prop del seu cor
així per al final del seminari d'avui.
Així Bootstrap.
Quants de vosaltres heu fet cap tipus de desenvolupament web abans?
Una bona quantitat?
Una mica.
>> Així Bootstrap és el món de la majoria , Marc frontal popular.
S'utilitza por-- He triat un parell de websites-- atzar
Lyft, Newsweek i Vogue.
S'utilitza per un nombre de llocs web.
És un marc de disseny web que li permetrà fer els seus llocs web
alhora bonic i sensible.
I aniré més aquests dos conceptes aquí.
Bell.
Així que tens pàgina web normal al esquerra, que està fet amb només HTML.
Has après HTML a classe i en la secció llargament.
Som-hi és una manera de fer seus llocs web bonic.
Vostè pot prendre el que està en el costat esquerre de la pantalla
i convertir-lo en el que és en la costat dret de la pantalla amb molt,
, Molt poc codi molt.
>> Vostè aconsegueix el botó blau agradable, s'obté la fantasia, vores arrodonides a la pantalla,
s'obté la vista de llista, s'obté la targetes, i així successivament amb molt poc codi.
En realitat hi ha cap CSS que vostè ha d'escriure per si mateix.
Així Bootstrap li permet tenir aquests CSS pre-construït
components que vostè pot posar dins de la seva pàgina web
perquè es vegi bonic sense molta feina pel seu compte.
És realment una arrencada, un punt de partida,
per les seves aventures de desenvolupament web.
I així, quan estàs a burlant-se d'un lloc web,
és un molt bon lloc per començar.
Vostè pot aconseguir un bon lloc web d'aspecte amb molt poca feina molt ,.
I, de fet, anem per fer això a nosaltres mateixos
en el curs de cinc anys com minuts-- en 10 minuts.
Així que és bastant fàcil de fer alguns grans llocs web.
Així que aquesta és la primera part.
>> El segon parcialment: sensible.
La gent, avui dia, no només accedir al web en els seus ordinadors portàtils.
En realitat, a partir de 2014, a més gent accedir a la web a través de dispositius mòbils,
com els telèfons o tauletes, o serveis, o així successivament que els llocs web.
I llocs web han estat tradicionalment dissenyat amb ordinadors portàtils o de sobretaula
en ment.
I pel que els llocs web no són sovint molt ben adaptat al seu telèfon.
Si alguna vegada visitat harvard.edu al telèfon,
és una espècie d'un *** experiència, oi?
Això es deu al fet que no és sensible.
Estem tractant de fer llocs web que responguin,
que responen a mides de pantalla de la gent.
>> Així que si és un telèfon, és va anar al telèfon.
Si es tracta d'una tableta, és va anar a la tauleta.
S'ajusta perquè coincideixi amb el pantalla que s'està utilitzant.
I així Bootstrap també proporciona alguns utilitats molt, molt útils perquè.
I anem a parlar d'això també.
Així que de nou, hi ha dues parts Bootstrap-- bella i responsable.
Anem a parlar d'ells.
En primer lloc, bonic.
I després de resposta.
>> Així que tot el codi que estem parlarem d'avui--
tindrem un munt d'exemples, una gran quantitat de desafiaments, i així es en--
totes les vides en aquest lloc web aquí.
Aquesta diapositiva és el que vam enviar.
Així que si ets aquí, es pot sentir la llibertat de no haver d'escriure això.
I si estàs veient a distància, sentir lliure per tirar això en l'equip
tant be.
És probable que ho necessiti durant el curs d'aquest seminari.
>> Així que anem a utilitzar un lloc web anomenat CodePen,
que és una codificació de col·laboració medi ambient, durant aquest seminari.
I CodePen-- i vaig a mostrar aquí veritable fast--
que li permet escriure HTML en col·laboració.
Puc escriure, puc enviar-lo a vostès, que vostès poden editar-lo.
Fins i tot si vostè és remot, encara pot accedir-hi d'aquesta manera.
Pot escriure codi HTML a la superior i va automàticament
ser convertit en el pàgina web en la part inferior.
Així que és una manera perquè vostè per tractar ràpidament codi
sense haver de fer cap tipus de coses en el seu IDE, o en el seu propi lloc web,
o el que sigui.
>> Així que endavant i tiri cap amunt d'aquesta pàgina web, si vostè és remota
o si vostè és aquí, especialment si vostè és remot.
is.gd/cs50boostrap.
No hi ha tapes, ni guions, ni res de res.
Així que aquells de vostès que són aquí, només em donen un aprovat
quan s'han retirat fins a aquesta pàgina web.
Bona?
>> AUDIÈNCIA: Sí.
>> NEEL MEHTA: Així que arribarem perquè en tan sols un segon.
Així que primer, arribarem, com Com es fa seus llocs web bonic?
Anem a aprendre com prendre avorrit, edat HTML, com he mostrat abans,
i convertir això en components realment agradables,
com a bons widgets, agradable, de color botons, i etiquetes i taules,
i tot, usant Bootstrap.
Així que si tots poguéssim anar a la CodePen que només es va aturar.
Ha de tenir un aspecte una mica com això.
¿Es veu com això per a tothom?
>> AUDIÈNCIA: Sí.
>> NEEL MEHTA: Si vostè és remota, hauria de tenir aquest aspecte també.
Si no, jo et mostraré com aviat vostè pot aconseguir que es vegi com aquest
en una part futur del vídeo.
Així que aquí hem escrit 01:00 HTML molt bàsic,
com el tipus que tens estat utilitzant a classe.
És bastant bàsic.
Sense luxes.
I tenim algunes coses.
Hem dissenyat un molt, molt bàsic en marxa
cridar Yalp! amb la qual es pot trobar restaurants a la zona,
i trobar opinions i instruccions de tots aquells.
És un molt bon concepte.
Mai s'ha fet abans.
És un nom molt singular, també.
>> Així que el que anem a tractar de fer és ajudar a l'amo
de Yalp! fer que la seva pàgina web mirar realment, realment genial.
Així que, per començar, l'amo de Yalp! ha fet una mica de recerca
caixa, i un petit botó, i després potser una mica
àrea ressaltada per a un restaurant ressaltat, i després
una llista d'altres restaurants que es troben a la zona.
Així que només podem anar a través de el codi HTML molt ràpid.
Què tan còmode són vostès amb HTML?
Hem fet una mica secció i també a la classe.
Decent?
>> Així que igual que un resum, HTML es tracta de tenir
etiquetes o elements que expliquen la equip com dissenyar la pàgina web.
Així que aquest h1 aquí-- iniciar h1, Benvingut a Yalp!, final h1-- diu a l'ordinador,
dibuixar una gran capçalera que diu, Benvingut a Yalp!
dins hi ha.
També tenim formes.
Podem entrades com aquesta, entrades de text, que rendeixi com quadres de text
s'escriu en.
Vostè també té botons.
Vostè rep un botó agradable, pot fer clic.
No fa gens bé ara, però et donen un botó.
Vostè pot tenir divs, o divisors, a trencar la seva pàgina en diversos grups.
>> Vostè pot tenir paràgrafs, Té botons.
Si vostè té paràgrafs, llavors vostè té llistes desordenades, ul,
i les llistes dins d'això, li.
Així que aquests són el més bàsic blocs de construcció d'una pàgina web.
I, de fet, més o menys tots els llocs web que es veu
serà construït l'ús d'aquestes mateixes eines.
Per descomptat, no tots mirar aquest mal perquè som
va a condimentar cap amunt una mica.
Així que anem a aquest avorrit HTML d'edat i d'inici transformant-ho en el lloc bonic
que acabem de veure fa un parell de minuts.
>> Així que anem a començar molt simple.
Així que tenim aquest botó aquí.
A Mans a l'Obra, com hem vist, podem tenir un botó bonic, bell, blau.
I això no es fa fent CSS personalitzat.
No hi ha CSS costum aquí.
Això es fa mitjançant l'addició de classes als seus elements HTML.
Si has provat classes o hrefs, o àncores, o type = "text" per inputs--
Elements HTML poden tenir aquests atributs.
Poden tenir informació extra que vostè pot donar-los.
>> I així, en aquest cas, classes són l'atribut.
Pel que anava a escriure, classe botó = alguna cosa dins de cadenes.
I aquest atribut li dirà al ordinador, això no és cap botó, d'edat.
És un botó que es troba a aquesta classe de botons.
I així, Som-hi, si li donen un cert estil en el seu element,
es dibuixarà una certa manera.
Així que escric "btn-btn primària.
btn ser una abreviatura de botó.
Es donarà compte d'ara que el meu botó lletja tornar
en un botó bonic, bell, blau.
Es veu molt bé quan fem clic.
>> I així, el que passa és que tenim la btn classe i la classe btn-primària
en el nostre element.
I Bootstrap entrarà i dir: OK, jo saben que existeixen aquestes dues classes.
Qualsevol element que té aquests dos classes s'han d'elaborar com aquest.
Així que aquesta és l'essència de la forma de connectar estils a elements de Som-hi.
Vostè acaba de adjuntar classes a ells i es ponderarà a terme com ho consideri oportú.
Així que aquí està un altre exemple.
A l'entrada, podem afegir a class = "-control de formulari".
I jo vaig a mostrar en breu en el qual pot esbrinar quines classes
estan disponibles de cada tipus d'element.
Però la classe que acabem de afegida té boniques, cantonades arrodonides,
té bon encoixinat, té un agradable, resplendor blau a ell.
>> També podem entrar en aquest formulari.
I class = "forma-inline", el que farà formulari, com es pot imaginar, en línia.
Per tant, està buscant una mica més de la mateixa manera que el que teníem abans ja.
Així que abans de continuar amb l'estil de la resta de la pàgina, qualsevol dubte sobre el que
ho va fer?
Nosaltres classes simplement adjunts als nostres diversos elements.
I jo et mostro després com pot esbrinar el que estan disponibles classes.
Qüestió de concepte continuarem classes que tenir certs estils.
I això li diu al navegador com a la disposició de la pàgina utilitzant
Estils proporcionats de Bootstrap.
Qualsevol preguntes de l'audiència?
>> Bé fins ara?
Fresc.
Molts dels desafiaments amb Bootstrap és només
saber quins són els components disponibles i com usar-los.
I això és tot el que s'ha après amb l'experiència i també
a través de la lectura de la documentació, que parlarem aviat.
Així que tenim aquest div.
És només una cosa avorrida, vell.
Volem fer èmfasi que d'alguna manera.
Així que en Bootstrap, hi ha una gran quantitat de components disponibles.
I això és getbootstrap.com.
És una referència molt útil.
Conté coses com-- així és com ho fa un botó.
I vostè pot fer barres de navegació, pot etiquetes, que poden progressar bars,
vostè pot fer grups de llistes.
Bàsicament, és tot tipus que podria veure una pàgina web.
>> Aquí està un que tractarem en aquest moment.
Es diu panell.
Si alguna vegada utilitza Google Ara, tenen targetes.
O qualsevol dispositiu Android té targetes.
Tenen petites caixes blanques que tenen coses a l'interior de la mateixa.
Així que anem a tractar de fer que nosaltres mateixos aquí amb el una cosa
anomenat un panell.
Així que si li donem class = "Panell Panell-default "al nostre div exterior,
a continuació, li donem una classe div = - anem simplement marqui aquesta documentació.
div class = "Panell-encapçalament" i llavors div class = "panells de cos".
Un cop més, no et preocupis per memoritzar el codi.
Estarà disponible en línia.
>> Així ho vam fer i ara el nostre avorrit, vell div convertir en aquest agradable, petita targeta.
Té bon encoixinat, es té fronteres, que es destaca
de la resta de la pàgina, la qual cosa és molt bo.
Així que anem a entrar i canviar aquesta Aconsegueix Indicacions d'aspecte agradable.
Qui en l'audiència vol comptar jo el que puc fer al botó
perquè es vegi bonic usant Bootstrap?
Sí?
>> AUDIÈNCIA: Podríem afegir una classe.
I podríem fer class = "btn btn-primària".
NEEL MEHTA: Sí.
Hi ha un munt d'altres colors disponibles per a buttons--
o per qualsevol cosa, per al cas.
Podem fer btn-perill i que sigui de color vermell.
Allà anem.
Podem fer btn-èxit perquè sigui verd.
Podem fer-btn info-- hi ha un munt de les coses que estan disponibles per a vostè.
Així que no tinc molt repte per a vostè ara.
Així que hi ha una cosa més que he deixat un-llaurat.
Aquest Restaurants Top.
>> I volem fer servir una cosa anomenat un grup de llista per dissenyar-lo.
Així que el meu repte per a vostè és passar a getbootstrap.com--
Vaig a tirar cap amunt aquí.
getboostrap.com.
Anar a getbootstrap.com, trobar la secció on es van pels grups de la llista.
I veuràs aquí una l'exemple i les classes correctes
que es pot utilitzar per fer la seva llistes en aquests simpàtics grups de llistes.
Aquests es resolen exemples d'exemples de codi, el que
codi que utilitza, quin codi HTML utilitza, i el que les sortides.
>> Així que el meu repte per usted-- anar a getbootstrap.com,
si vostè està aquí oa casa, i per tractar d'afegir estils a aquest ul
perquè es vegi bonic.
I l'ús d'un estil de grup de la llista.
Vostè vol prendre un parell de minuts, i buscar la documentació,
Prova això a vosaltres mateixos?
Perquè com vostè està fent desenvolupament web, et donaràs compte d'una gran quantitat del seu treball
que es va a llegir aquesta documentació.
Així que crec que és bo per a familiaritzar- amb la forma de llegir la documentació,
com esbrinar el que és en el qual, quin codi exemples que pot utilitzar,
el que vostè pot aprofitar.
>> Així que de nou, getbootstrap.com, aneu a la fitxa Components,
i després desplaceu-vos cap avall a la llista de grup.
I veuràs exemples de codi que que pot utilitzar per fer la seva HTML encaixa això.
Així que pren un parell de minuts i provar i explorar vostè mateix,
si vostè està aquí oa casa.
Si estàs a casa, fer una pausa en el video, potser, i ho provi.
Si ets aquí, si vostè va a la nostra website-- si actualitza la pàgina,
veuràs això en allà.
Aquest mateix codi és simplement afegint nous estils aquí.
Així que pren un parell de minuts.
Avísame quan vostè se sent bé respecte o quan estàs totalment perdut.
Sona bé?
Fresc.
Ràpida reservat per a aquells de vostès a la llar, mentre esperem,
si entres a la pàgina GitHub que vaig posar dalt fa un parell de tobogans,
cap al principi del vídeo, Tinc un repo GitHub, repositori,
d'aquesta xerrada.
Tots aquests exemples de codi que serem parlant s'emmagatzemen aquí.
Així que si vas a desafiar-1.html, aquest és tot el codi que tenim en aquest moment
en el nostre CodePen.
Així que vostè pot anar per davant, i copiar això, i enganxar-lo en el teu propi CodePen.
I d'aquesta manera, vostè pot mantenir-se al dia amb el que estem fent aquí.
També ho han fet aquesta pàgina oberta, així com que navegar per la resta del seminari.
Una vegada més, vostè vol que es vegi com el que veure a baix a la part inferior de la pantalla
allà.
Sentir-se bé?
Sòlid.
Caldrà esperar que els altres acabar amb el que estan fent.
>> Sí?
>> AUDIÈNCIA: Suposem que jo volia utilitzar Bootstrap a casa-
NEEL MEHTA: Sí.
AUDIÈNCIA: Veig, al lloc web, la pàgina Introducció.
Ells em donen les opcions Som-hi, Codi Font, o Sass.
Quin d'aquests que vull?
>> NEEL MEHTA: Sí.
Llavors la pregunta és, ¿com s'aconsegueix començat a fer servir Bootstrap per nosaltres mateixos?
Simplement passa que màgicament treballar aquí.
Així que si tenim temps en Al final del seminari,
Et vaig a mostrar com es pot aconseguir en la seva pròpia pàgina web.
Igual que aquí, he fet posar en alguns ajustaments que
tindrà automàticament carregat, però vaig a
mostrar que ho facis des ratllar en les seves pròpies pàgines web.
>> AUDIÈNCIA: Gràcies.
>> NEEL MEHTA: Sí.
Bona pregunta.
Sentir-se bé?
Sentir-se bé?
Fresc.
Llavors, qui em vol com van fer dir-li això es vegi bonic i Boostrappy?
Quina és la primera classe li afegim a la ul?
AUDIÈNCIA: class = "Llista de grups".
NEEL MEHTA: Sí. llista de grups.
I llavors què és el que atribuïm a la lis?
Algú altre?
AUDIÈNCIA: I llavors, després de que, class = "list-grup-punt".
>> NEEL MEHTA: Sí.
>> AUDIÈNCIA: I és la mateix per a la següent.
>> NEEL MEHTA: li class = "Llista de grups-punt".
Cal anar.
Tenim el nostre grup agradable llista, de la mateixa manera que el que esperàvem.
I això és tot.
En 10 minuts, hem fet aquesta avorrit, vell Yalp! pàgina
aspecte agradable i professional.
I això és només el començament.
Així que ara que se sent bé per això, anem a
només seguir endavant i parlar un parell de components que
pot ser útil com vostè anar al llarg de la seva aventura.
>> Per descomptat, hi ha moltes de les d'aquí.
I ara que has après com fer grups de la llista,
es pot gairebé ensenyar a tu mateix com fer qualsevol d'aquests.
Però, és clar, anem a tractar i fer un parell més a nosaltres mateixos,
només pel que tenir una idea de com pot utilitzar-los.
Jo només vaig a anar a aquest exemple aquí.
Un cop més, el codi que acabo d'enganxar aquí està disponible aquí.
Així que no dubti en estirar-la cap amunt.
>> Així que ja hem passat per un parell d'aquests exemples.
Així que tenim botons, que ens ja han vist com fer-ho.
Podem fer botons més grans.
Per botó class-- va, btn btn-lg i btn-default fa que sigui blanc.
Així que això fa que el nostre botó gran del que podria ser.
Podria ser útil, si vostè té botó o alguna cosa gran enviar.
Vam veure l'exemple de grup de llista, vam veure l'exemple de formulari.
>> Un molt important és icones.
I icones són un mètode perquè vostè afegir coses interessants, com la comprovació de verificació
marques o signes positius, o amic icones, o icones de reinici,
o el que sigui de la seva aplicació web.
Així que de nou, si tenim en aquí, els components, glyphicons,
són les icones disponibles per Som-hi.
Hi ha una exhaustiva llista de tots els d'aquí.
Tan sols com un exemple, anem a tractar d'afegir un.
>> Així com Facebook, estem tractant de tenir un botó Afegeix Amic.
Primer anem a afegir una mica d'estil.
classe botó = "btn btn-èxit".
I aquí anem.
Anem a afegir una icona aquí.
El icona, pensa vostè, podria tenir sentit per posar aquí?
Vostè probablement ha vist en algunes pàgines web o el que sigui,
però el que és un exemple d'una icona que podria anar bé a l'interior d'aquest botó?
Siéntase lliure de navegar per aquest punt de vista, si vostè necessita alguna inspiració.
Hi ha una gran quantitat d'útils d'idiomes Fotos.
Sí?
>> AUDIÈNCIA: Potser l'usuari glyphicon?
NEEL MEHTA: OK.
Aquest.
Això és bastant bo.
Sí.
A Facebook, crec que es veuria una mica així.
Així que aquí està com anem a afegir icones a les nostres pàgines.
Només tenim un span-- un lapse d'un contenidor neutral per a alguna cosa.
Un div és un contenidor per a alguna cosa, un lapse és un altre recipient.
divs tenen salts de línia al voltant d'ells, obertures no.
Així que hi ha diferents formes de tenint contenidors genèrics.
Igual que no té sentit per posar-lo dins d'un paràgraf o res.
Hem de dir-ho dins d'alguna cosa, però,
així que només cal posar a l'interior d'un pam.
Així span class = glyphicon glyphicon-usuari "prop pam.
I ara tenim la icona dins del botó.
>> Així que no es veu del tot a diferència de el que es podria veure a facebook.com.
I el que és bo que aquests poden de fet posar en qualsevol lloc que desitgi.
En els seus bars de capçalera, en els grups de la llista.
El que sigui.
No ha de ser a l'interior d'un botó.
Així com un exemple, puc posar la mateixa classe aquí.
"glyphicon glyphicon-usuari".
I sembla el mateix.
Així que aquests icons-- pot utilitzar el lapse class = "glyphicon glyphicon-el que sigui".
I això va a permetre afegir icones on vulguis.
I icones són una molt important part de fer una mirada lloc web
professional i ben fet.
Així que no es exageri, però és sovint una bona cosa a saber.
>> Els panells, de nou.
Vaig a fer això una altra vegada com una recapitulació perquè estan tipus d'involucrats.
Es donarà compte que, en convertir la seva HTML normals
lloc en un afied-Bootstrap lloc, vostè tindrà
afegir estructura addicional per al lloc web.
Per exemple, tenim addicional divs aquí només perquè els
són necessaris per fer un panell.
Així que tingues en compte que vostè haurà de tenir una estructura addicional.
Així que "panell defecte del panell".
Potser és panell encapçalat.
Crec que és el panell-encapçalament.
Sí.
Allà anem.
Així que, de nou, no és el nostre panell.
>> Una cosa més que no cobria encara, taules.
Taules, per defecte mirada una mica lleig.
Així.
Però taules són, per descomptat, una part molt important
del que va a fer en el desenvolupament web.
En Pset7, per exemple, CS50 Finances, que sortirà aviat,
farem servir un munt de taules.
I un munt de dev web utilitzen una gran quantitat de les taules per mostrar informació,
com les accions o resultats, o el que sigui.
>> Així llaurar taules és realment molt fàcil.
S'agrega la classe taula a la seva taula.
I, m'atreveixo a dir, es veu bastant bé.
Vostè pot fer coses de més, com "taula de ratlles taula".
I veuràs els resultats aquí.
Vostè pot fer la taula de vora.
Hi ha un munt d'opcions que vostè pot.
Però bàsicament, l'addició d'un taula, la classe taula,
farà que els seus quadres es veuen força bé.
Així que això és un breu resum de alguns dels estils més importants
i els components que vostè necessitarà usar per Som-hi.
Així que crec que els abrics nostra bella part.
Qualsevol pregunta ara sobre com per fer que els seus llocs web bonic?
Com pots fer servir aquests components al seu favor?
Sentir-se bé?
Sí?
AUDIÈNCIA: Potser això és una pregunta tonta,
però es pot utilitzar Bootstrap en la Wikipedia?
Si està editant una pàgina de Wikipedia?
NEEL MEHTA: Sí.
Per tant el dubte era, estic l'edició d'una pàgina de Wikipedia,
puc incloure estils Bootstrap aquí?
>> AUDIÈNCIA: Sí.
>> NEEL MEHTA: I així és Bootstrap bàsicament un full d'estils CSS gran.
Un full d'estil CSS només diu, sempre Tinc aquesta classe, atribueixo aquests estils.
Així que el full d'estils CSS per Bootstrap serà una cosa així com .btn,
la classe botó, obtindrà com un frontera de la cantonada arrodonida o el que sigui.
Així que, bàsicament, Bootstrap només una munt de classes i un munt d'estils
especificat per aquestes classes.
Així que, mentre vostè ha de CSS, aquesta llista de regles a la seva pàgina,
obtindrà l'estil Bootstrap.
Això és, per descomptat, depèn de tenir els estils Bootstrap a la seva pàgina
començar amb.
>> I així, en Wikipedia, és probable que no podia
fer això perquè Wikipedia no té Bootstrap en ella.
Però si tenia Bootstrap, que probablement podria fer això.
I si volguessis, podries incloure-ho, però que podria
trencar el format actual de la pàgina.
Però molt bona pregunta.
Podeu utilitzar Bootstrap on sigui que s'inclou,
però no està construït en defecte.
>> AUDIÈNCIA: Gràcies.
>> NEEL MEHTA: Sí.
Alguna pregunta més?
Sí.
Així que si vostè està aquí oa casa, només recorda getboostrap.com-- de nou,
getboostrap.com-- és el seu amic.
Cada vegada que vostè està utilitzant Som-hi, això li donarà
indicacions començat, com utilitzar components.
Hi ha una mica de fresca JavaScript plug-ins que no anirem per aquí,
però són val la pena visitar també.
Així que aquesta és el teu amic.
És només important obtenir utilitzat per a l'ús d'aquest.
>> Així que anem a xerrar una mica sobre fer llocs web sensibles.
Així com he dit abans, la gent solia seus ordinadors portàtils, utilitzen els seus telèfons.
I com es pot imaginar, això és una mida de pantalla molt diferent que això.
I així el mateix lloc web que es veu bé en el meu telèfon
no es va a quedar bé, necessàriament, en un ordinador.
Així que el que has de fer és fer que la seva pàgina web s'adapten.
Ha de adaptar-se als diferents la mida de pantalla que el que està.
>> S'ha de dir, sé que estic en un ordinador, un portàtil gran, jo hauria expandir-se.
Sé que estic en un telèfon, que hauria de reduir.
I així Bootstrap proporciona alguna eines molt, molt útils per fer això.
Així Bootstrap et permet descans un lloc web en 12 columnes.
Vostè pot fer files i tenen 12 columnes.
I vostè pot particionar aquells que li vingui de gust.
Vostè pot tenir un, gran cosa, que és de 12 columnes d'ample.
Vostè pot tenir dues coses que són sis cadascun.
Vostè pot fer una cosa que és quatre, un que és dues, o un que és de sis.
Vostè pot fer 3, tres, tres, tres.
Vostè pot fer el desglossament que desitja.
>> Així que potser la teva pàgina web ha de tenir un columna esquerra que és un terç de l'amplada.
Així que hi hauria quatre columnes d'ample i la resta de la pàgina
seria vuit columnes d'ample.
Així que aquest és un exemple.
Anem a tirar un altre exemple.
>> AUDIÈNCIA: Sempre ha de ser un fins i tot dividits?
Podria ser un nen de set, cinc de divisió?
>> NEEL MEHTA: Sí.
Podria ser set, cinc.
Sí.
Sempre que se suma a 12, està bé.
Així que anem a tornar aquí.
Un cop més, el codi que és aquí també està disponible aquí,
en l'exemple de resposta.
Així que em vaig posar una mica exemple de codi de resposta aquí.
Així que vostè fa això mitjançant l'ús de una cosa anomenada fila.
Fila és només una altra classe.
És un altre estil d'agregar en el seu divs perquè siguin els seus propis components.
>> Així que vostè diu, div class = "fila" per fer una fila,
perquè tingui 12 columnes d'espai.
I després poses columnes dins d'això.
Així que aquí estem COL-xs-6.
No es preocupi per les x.
Parlarem en un segon.
Però, bàsicament, tenim una cosa que és de sis d'ample.
En diem l'esquerra.
I així, aquest és el quadre de l'esquerra aquí.
Tenim una cosa que és sis de les 12 columnes d'ample.
I que un està a la dreta.
>> així simplement dóna les marques seva div omplir-gris.
Així que això és només el que pot veure que són diferents.
I pel que aquest el primer exemple.
És un exemple molt simple de com es utilitzaria les seves files i columnes aquí.
Es defineix una fila usant class = "fila".
I llavors ho fas class = "col-XS-6" fan mig, "col-xs-6" per fer l'altra meitat.
Heus aquí un exemple més complicat.
Fem una ullada a la minúscula, Enorme, La resta un.
>> Podem fer Diminut dues columnes d'ample, podem fer enormes sis columnes d'ample,
i la resta quatre columnes d'ample.
Això se suma a 12.
I pel que aquests acaben abastant l'amplada de la pàgina.
Un cop més, tenim una fila fora.
Llavors tenim div class = "col-xs-2" i després 6 i, a continuació 4.
I això va donar l'estructura per a nosaltres.
I així podem posar el diables volem aquí dins.
En lloc de Tiny, podem posar un botó.
classe botó = "btn btn-primària".
I així adonar que el nostre botó no ocupa tot l'ample,
però almenys està restringit al fet que molt espai.
>> Així que això és tot bé i bo.
Així que ara podem trencar la nostra web pàgina en trossos, l'ample.
Podem dir que volem tenir a l'esquerra columna, i una columna dreta, i així successivament.
Però no hem anat més com vostè ho fa sensible.
I així Bootstrap farem això també.
Té aquestes coses anomenades punts d'interrupció.
Per tant, té una manera de saber si estàs en un ordinador portàtil, vostè està en una tauleta,
estàs en un horitzontal telèfon, o estàs en un telèfon vertical.
Se sap que la mida de la pantalla.
I trenca aquesta en quatre categorías-- gran o lg, que és portàtils, generalment.
md o mitjà, que és comprimits.
sm, petita.
O xs, extra petit.
I així, quan s'especifica una columna, vostè diu,
ha de ser de sis columnes d'ample en un dispositiu petit extra.
És per això que vam fer col-xs-6.
Estem dient que hauria ser sis dels 12 columnes d'amplada
en un dispositiu petit extra.
I si es tracta d'alguna cosa més gran, només haurem de per defecte utilitzant la mida petit extra.
Si és una mica més gran que extra small, serà de sis d'ample.
I així podem aprofitar aquests per fer de les nostres columnes
prendre diferents quantitats de columnes basades en la mida de la pantalla.
Anem a anar a aquest canvi de mida de resposta.
Així que tenim les nostres columnes.
I diu, "col-lg-6 col-xs-12".
Així que tenint en compte el que saps fins al moment, el que fas
crec que va a succeiria en una pantalla gran?
Bé, és una mena de donat pas, però què fer
vostè pensa que es veurà agradaria en una pantalla gran?
I per què és això?
>> AUDIÈNCIA: És que en una pantalla gran, és
va prendre només part de l'espai complet?
Igual que la meitat d'ella, suposo?
>> NEEL MEHTA: Sí.
>> AUDIÈNCIA: I en menor pantalla, que va
per ocupar tota la pantalla, el 12.
NEEL MEHTA: Sí.
Dreta.
Així com un exemple, anem a només cal veure aquí baix.
Sí.
Així que en tot el que és lg o bigger-- així que el meu equip passa
per ser lg perquè és bastant wide-- farà
que al costat de l'altre, perquè és-col lg-6.
Així que perquè està en gran, es fa sis columnes d'ample i sis columnes d'ample.
Anem a veure què passa si convertir això en una més petita.
Jo només vaig a un-pantalla completa això.
I jo vaig a reduir la mida de pantalla.
Vaig a reduir la mida de la pantalla, de manera que sembla que estic en un dispositiu més petit.
Així que vaig a encongir així.
>> I voilà.
Ara s'apila perquè ara hem anat
de gran A-- això és probablement una mida de pantalla petita extra.
I pel que ara es diu, està bé, no estem en general, estem en terra petita extra.
Així que utilitzarem la capacitat extra small.
I anem a xs-12, x-12.
Així que serà apilats.
I del mateix compte que hi ha una cosa diu un punt de ruptura.
Un punt d'interrupció és on vostè va fer la transició
des de petit addicional als petits, petit a gran, i així successivament.
>> Així que només adonar que com llisco aquest a terme, amb el temps, podràs arribar al punt
on van a saltar a estar al costat de l'altre.
Cal anar.
Així que el punt d'interrupció just aquí.
Així que podem fer-ho encara més complicat.
Ara podem dir que aquests les coses han de ser quatre d'ample.
És a dir, que haurien prendre fins al voltant d'un terç
del discurs en dispositius molt grans.
En un dispositiu de mitjà, s'ha de prendre la meitat de la pantalla perquè està md-6.
En un dispositiu molt petit, ha de prendre fins a 12.
I pel que aquest es veu molt natural.
Anem a provar això per nosaltres mateixos.
>> Així que en una pantalla gran, són quatre d'ample.
Reduir una mica.
I ara de sis són amples.
Així que això és de sis, sis, 06:00.
Reduir encara més i després seran totalment apilats.
Així que això, per exemple, té sentit si tens targetes, com les targetes de notícies,
per exemple, on si està en una gran pantalla,
que està bé si tens diversos de banda a banda perquè tots tindrien prou espai.
Però han de tenir prou espai.
Així que en una pantalla més petita, t'agradaria donar-los
més espai, proporcionalment, de la pàgina.
>> Així com un exemple del món real, direm que tenim Twitter.
I tenim quadre de text, de manera que pots twittejar al lateral.
I tenim una llista de trending els temes del costat dret.
Així que en una pantalla gran, hem faci que estar al costat de l'altre,
perquè pugui veure'ls en un got.
Però en una pantalla més petita, hem de fer 12 i 12,
de manera que els trending topics estan per sota de la zona tweet.
A causa de que l'àrea tweet és el El més important i en una pantalla petita,
els trending topics no ho fan importa bastant més.
I així, els posem just a sota, per la qual cosa que tots dos poden tenir prou espai.
Té sentit fins ara?
>> AUDIÈNCIA: Sí.
>> NEEL MEHTA: Sòlid.
Així que això és tots els exemples que tinc aquí.
Anem a tractar de fer un desafiament.
Així que de nou, es tracta de desafiament-2.html per aquells de vostès seguint al llarg a casa.
Així que el meu amic, Mark Zuckerberg, va venir a mi l'altre dia.
I ell és com, Neel, tinc aconseguit bastant bo en disseny web.
Jo puc fer l'HTML.
He fet aquest petit, nova edició a Facebook.
Tinc una nova idea de com hem estil de Facebook.
I aquí està.
Aquí mateix.
Aquí hi ha un codi d'exemple.
Així es diu Fancybook.
>> Tenim algunes actualitzacions d'estat.
Tenim Nemo, Mike Kosowski, Tres actualitzacions d'estat ***--.
I després tenim una llista de amics en línia a la dreta per sota d'ella.
Així que el que ha fet la seva tasca.
Ell sap una mica sobre Som-hi, que ha fet la vista de llista,
que ha fet una mica d'HTML.
Així que té la pàgina web.
Però ell és com, Neel, no ho *** entendre el disseny de resposta en absolut.
Tens alguna experts que em podria ajudar amb això?
I, afortunadament, es troba ara experts en disseny de resposta.
>> Així que el que em va dir va ser que ell vol Fancybook es vegi com aquesta.
En un dispositiu molt petit, com un telèfon, tot
han de ser apilats, com aquí.
Pel que té la línia de temps per avançat, al capdamunt, i després
vostè ha de tenir la barra de xat a la part inferior.
Però en una tauleta o un mitjà de dispositiu, ha de ser un mitjà i mitjà,
com en la línia de temps ha de ser mitjana i la llista d'amics de xat
ha d'estar en l'altra meitat.
>> Llavors en un ordinador portàtil, la línia de temps ha de prendre fins a tres quartes parts
i després la cobertura de xat ha de ocupar un altre quart.
I així és com, Neel, tinc aquest codi aquí, però no és sensible.
Ha de comportar-se així.
Així que el meu repte per a vostè es dóna aquest codi aquí--
si actualitza el seu CodePens, veuràs això.
O si vostè acaba d'enganxar en el codi el desafiament-2, veurà això.
>> Aquí està el codi exemple.
Vostè veurà alguns xxxs.
Vull canviar les xxxs, de tal manera que la línia de temps i la llista d'amics
segueix aquestes especificacions aquí.
No et preocupis pel que és dins de la línia de temps, per ara.
Aconseguirem que en el pròxim pas.
Però per ara, anem a veure si aconseguim aquestes coses per dividir per dalt com això.
¿Això té sentit?
Així que si estàs a casa, pausar el vídeo i tractar
per fer la teva pàgina web buscar sensible com aquest.
Si ets aquí, prendre com dos, tres minuts.
Siéntase lliure per xerrar amb un veí, i tractar, i fixar el Sr. Zuckerberg de
problema de disseny de resposta.
Si vostè té alguna pregunta, no dubti en fer-m'ho saber.
Sentir-se bé?
Fet?
Niça.
>> AUDIÈNCIA: [inaudible].
NEEL MEHTA: Què?
>> AUDIÈNCIA: Estic bé.
>> NEEL MEHTA: Oh, bé.
Niça.
AUDIÈNCIA: El que passa el 12, és el que Som-hi
tracta d'un espai a la pantalla donat com 12 unitats d'ample i després es divideix això?
Com funciona exactament la dosificar la feina per això?
>> NEEL MEHTA: Sí.
Així que la pregunta és, com fa la dosificació
treballar per Som-hi, oi?
>> AUDIÈNCIA: Sí.
NEEL MEHTA: Així que cada vegada vostè té un div class = "fila",
no importa com de gran és la pantalla, Bootstrap li donarà 12 unitats
de la mateixa mida de assumir que grans dimensions.
Així que en la col 1, sempre és de 8.33% de la mida de la pantalla,
si això és aquesta àmplia o això és aquesta àmplia.
I així, per descomptat, d'una més petita pantalla, cada columna és més petit.
Vostè encara té 12 columnes d'ample, és una més petita.
Pel que toca a vostè per assegurar-se que les coses prenen més la columna,
proporcionalment, per compensar perquè la falta d'espai.
Això té sentit?
>> AUDIÈNCIA: Sí.
Gràcies.
NEEL MEHTA: Bona pregunta.
AUDIÈNCIA: A gran pantalla, es pot tenir
la línia de temps ocupen tres quartes parts?
>> NEEL MEHTA: Sí.
NEEL MEHTA: Com se senten vostès?
Bona?
Fresc.
Així que anem a tornar.
I anem a tractar d'arreglar aquesta part del lloc web de Zuckerberg.
Així que les línies de temps és aquí, a la part superior, i la llista d'amics
és a la part inferior.
I així, només hem d'assignar columnes, amb dimensionament proporcional,
en cada un d'aquests.
Així que aquesta primera *** és per a la línia de temps.
Què classes fan que posem en aquesta llista?
Què és el que vostès posen en aquesta llista?
Així que recorda, en una pantalla gran, que necessita per ocupar tres quartes parts de l'amplada.
I així, quin estil li donaria això?
En una pantalla gran, de tres quartes parts de l'amplada.
Quina classe fem servir allà?
AUDIÈNCIA: Llavors estem només serà edició d'aquesta primera instància de la classe.
NEEL MEHTA: Per ara.
Sí.
>> AUDIÈNCIA: No estem editant cada un, característica individual de la línia de temps?
NEEL MEHTA: Ara no, almenys.
Així que tot això és un bloc.
Estem canviant la el disseny de la poma.
Així que aquí nosaltres COL-lg-9 perquè és nou dels 12 d'ample en una pantalla gran.
I després en una pantalla de mitjana, quantes columnes hauria d'obtenir?
AUDIÈNCIA: Se suposa ser meitat i meitat.
NEEL MEHTA: Correcte.
Llavors, quants és això?
>> AUDIÈNCIA: Llavors, 6.
NEEL MEHTA: Sis.
I llavors extra small ha de ser-- si ocupa tota l'amplada de la fila,
quants haurien de ser?
AUDIÈNCIA: 12.
NEEL MEHTA: 12.
Sí.
I ara hem de canviar aquesta altres,
per la qual cosa ocupa la resta de l'espai.
Així col-lg--
AUDIÈNCIA: Es va a preneu tota la pantalla?
NEEL MEHTA: Ocupa una quarta part de la pantalla en un dispositiu gran,
com mostrem aquí.
>> AUDIÈNCIA: Tres.
>> NEEL MEHTA: Tres.
I després col-md-6 per prendre la resta de l'espai.
col-xs-12.
Així que ara tenim la línia de temps ocupant tres quartes parts
La pàgina a la gran pantalla i després un quart a la banda.
I després, si la mida de la pantalla cap avall, ha de canviar la mida en conseqüència.
Així que ha apilat ara, en una pantalla molt petita.
I si ens grandària de dalt una mica, han de ser exactament la meitat i meitat.
Així ho hem fet fins ara.
Molt guai.
I així no anem a fer el una altra part de la problemàtica.
Pot fer-ho vostè mateix.
Però, bàsicament, ha de tractar de fer que aquests responguin
tan bé-- crea la línia de temps articles, ells mateixos, sensibles.
Així que ara que hem passat tot el que vostè necessita saber
sobre el costat sensible de Bootstrap.
Una pregunta sobre receptiu disseny amb Bootstrap
i com es pot anar fent això?
Sí?
>> AUDIÈNCIA: És similar si teníem un vídeo incrustat
i volíem controlar el escala en la qual el era-- vídeo
la mida del vídeo passant d'ordinador portàtil per al telèfon.
NEEL MEHTA: Sí.
Més o menys.
Caldria dir que el vídeo prendre tot l'espai que s'ha donat,
que és una mica *** de vegades.
Però la idea central és la mateixa.
Un vídeo, com qualsevol altre objecte en la pàgina, com un botó o el que sigui,
sempre que s'utilitza el columnes i les files,
vostè pot donar-li una certa quantitat d'espai.
I així, cada vegada que en honor a que s'uneixi diferent pregunta perquè com YouTube
s'incrusta té una certa mida, es prefereix.
Però teòricament menys, que anava a funcionar.
Fresc?
>> AUDIÈNCIA: Suposo llavors, d'una imatge, fer realitat
necessita tenir diferents versions de la mateixa imatge en diferents mides
per a l'ordinador portàtil davant d'iPhone?
Sí La pregunta és, ¿hem de tenir imatges que són sensibles també.
I, de fet, es pot fer això.
Crec que és en el CSS.
Però Bootstrap permet tu per fer això també.
Vostè pot tenir imatges sensibles.
Vostè pot tenir les seves imatges canvien de mida d'acord amb la mida de la pàgina.
I hi ha una cosa molt nova HTML5, la nova versió d'HTML,
i CSS3, el més nou versió de CSS, la qual cosa
us permetrà sol·licitar diferents imatges basat en la mida de pantalla que vostè està en.
En general, és prou bo per a simplement té la seva imatge simplement reduir o créixer a
per gran que ha de ser.
Però vostè pot, si el que vols a, tenir-ne un 32 per 32
molt petites pantalles i 64 per 64 per a una pantalla gran,
i després servir a aquells selectivament.
Pots fer-ho.
Està fet per algunes persones.
Segueix sent avantguarda bonica.
Però la resposta curta, images-- sensible Bootstrap pot salvar el dia allà.
Fresc?
>> AUDIÈNCIA: Gràcies.
>> NEEL MEHTA: Així que anem a parlar molt ràpid sobre com
per aconseguir això en la seva pròpia pàgina web.
Diguem que vol fer la seva pròpia pàgina web fent servir Bootstrap.
I així anem a simplement just caminar a través d'ella junts.
Diguem que vostè fa tot just una pàgina normal HTML.
Siéntase lliure de seguir al llarg de qualsevol que sigui el seu editor favorit.
Així que només ens queda alguna pàgina HTML.
Podem fer-ho! DOCTYPE html.
Aquest és també html, la nostra pàgina.
Res de nou.
Hem fet això abans.
Així que aquí tenim el nostre HTML i podem posar coses aquí dins.
Podem tenir el nostre botó.
I com vaig dir abans, aquest no necessàriament funcionarà.
Per què podria no treballar?
Per què no podem aconseguir el nostre botó agradable, colorit?
>> AUDIÈNCIA: Com que no vinculem al projecte Som-hi o l'arxiu?
NEEL MEHTA: Sí.
Correcte.
Com que és Bootstrap-- només un arxiu CSS fantasia.
És una sèrie d'estils que s'uneixen als seus elements.
Aquí hem van dir que que voler utilitzar aquests estils.
Vaig a mida que fins una mica.
Li hem dit que volem utilitzar aquests estils, però mai
va dir que el que els estils són.
I això és el que el seu pregunta d'abans era.
Aquesta és la resposta a això.
Hem de trobar una manera d'aconseguir els estils i incloure'ls en la nostra pàgina d'alguna manera.
I la voluntat de manera Som- ens mostren com fer-ho.
>> Així que si vas a la part superior aquí, Introducció.
Hi ha diferents maneres per descarregar-lo.
Això podria no tenir sentit necessàriament.
Bootstrap-- això li permetrà agafar l'arxiu CSS en si.
I vostè va incloure en la seva pròpia pàgina.
Codi Font és que si vols hackejar en ell per si mateix.
Vostè no necessita realment.
Sass és un llenguatge que compila en CSS.
Penseu en això com un preprocessador.
Igual que PHP és un preprocessador de HTML, Sass és un preprocessador de CSS.
Així que si vols fer-ho d'aquesta manera, vostè pot fer això.
>> La forma més fàcil des d'un CDN, o de la xarxa de distribució de continguts.
És un lloc web que acaba de serveix una còpia de Som-hi
molt ràpid perquè vostè incloure en la seva pròpia pàgina.
Així que aquí està un exemple.
Et donarà aquest element d'enllaç.
Un element d'enllaç li diu al seu navegador, prendre qualsevol arxius s'emmagatzemen aquí
i incloure'l en la nostra pàgina web.
I en aquest cas, és l'arxiu CSS Bootstrap.
Així que només copiarem aquesta URL, o aquest text, i anem a llançar a l'interior
del nostre cap.
>> I no vaig a iniciar la pàgina per això, però es pot confiar en que funciona.
L'enllaç li donarà el CSS.
Inclogui en la seva pàgina i després podràs
capaç d'utilitzar tot el Bootstrap classes que coneixem i estimem.
Si vols mantenir-lo a nivell local i tenir-lo en el seu propi sistema d'arxius
en lloc d'haver d'anar a Internet per agafar,
com si vols utilitzar el lloc fora de línia,
pot utilitzar l'opció Descarregar.
Però en la seva major part, utilitzant el CDN és bastant ràpid, perquè d'aquesta manera,
es mantindrà actualitzada per a vostè també.
Vostè ha de actualitzar manualment tampoc.
Té sentit?
>> Així que una gran quantitat d'eines s'haurà incorporat aquesta en defecte. En el seu Pset7 i Pset8,
Crec Bootstrap és inclòs automàticament.
I en CodePen, per exemple, ja és
inclòs perquè em agregat afegir que ajusti.
Així que si mai vols jugar amb ella, només pot anar en CodePen,
o anar en la seva identificació, o el que sigui.
I vostè pot ser capaç de Accés Bootstrap allà,
però no sempre ha construït en, per defecte, a la web.
Té sentit?
>> Sí.
igual que un recap-- tenim com cinc minuts per al final.
Però com un resum, en les noves pàgines web, vostè pot incloure Bootstrap així.
I una vegada que el tens inclòs, vostè pot fer totes les coses divertides aquí.
Vostè pot seguir endavant, i només pot llegir la CSS, pot afegir alguns estils frescos,
vostè pot tenir components igual que els botons,
i les taules, i la llista elements que hem esmentat.
Hi ha alguns plugins fresc de JavaScript, que és possible que vulgueu explorar.
Afegeixen alguns fresc interactivitat a la pàgina web.
Igual que aquest fa un diàleg modal.
>> Així que hi ha algunes coses divertides que pot fer amb Bootstrap.
Així que el meu consell és que segueixi endavant i utilitzar-lo en els seus propis projectes,
seguiu les instruccions que acaba de fer sobre la forma d'aconseguir-ho,
i acaba de llegir el Bootstrap perquè vostè aprendrà més sobre què fer.
I així hem anat més, avui en dia, com utilitzar
la documentació, el que l'edifici blocs són, i com és conceptualment.
Així que ara el meu repte per a vostè és fer un lloc web fent servir Bootstrap.
Entra a la documentació.
I l'ús de les eines que hem après fins ara per tractar d'analitzar els
i entendre'ls.
I l'ús d'aquests estils i eines veus allà al seu lloc web.
I és només un gran, procés experimental.
>> Proveu un cert estil.
Funciona?
El no ho és?
Intenta posar coses junts.
Mireu el que passa.
És en gran mesura un acte guiada, procés de descobriment.
Però avui en dia, hem après la conceptes bàsics del que és Som-hi?
Per què funciona?
Com funciona?
Com començar a utilitzar que, en el primer lloc?
I així, ara que ets superar aquest mal moment, que
hauria de ser capaç de fer-ho bastant bé per si mateix.
>> Així que una vegada més, tot el codi que vam fer aquí.
Així que si mai vols per aconseguir un raspall per amunt en,
com, el que és un ***ós ràpida el full per a tots els estils?
Vostè pot entrar en aquesta mostra aquí.
Tenim alguns estils d'exemple aquí.
Si vols provar la desafiaments de nou per si mateix,
pots provar aquí i fes un cop d'ull a les solucions.
Així que aquest enllaç serà incloses en les diapositives, que
serà enviat a vostè és clar.
Però també aquí.
Pot pausar el vídeo, si ho desitja.
Tota la informació que vostè necessita és va a ser aquí, en aquest lloc.
Així que si algú té alguna pregunta, podem portar pels propers parell de minuts.
Altrament, gràcies a tots molt per veure.