Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Also hallo zu alle, die Sie hier sehen,
oder online beobachten, oder aus der Ferne.
Mein Name ist Neel, ist dies CS50.
Und die heutige Seminar ist Responsive Web Design mit Bootstrap.
Es ist ein Thema, das ist sehr nah an meinem Herzen.
Ich hoffe, es wird am Herzen liegt
sowie bis zum Ende des heutigen Seminars.
So Bootstrap.
Wie viele von euch getan haben, jede Art von Web-Entwicklung vor?
Eine gute Menge?
Ein bisschen.
>> So Bootstrap ist die weltweit am meisten beliebt, Front-End-Rahmen.
Es wird verwendet, nach-- habe ich gewählt a paar zufällige websites--
Lyft, Newsweek und Vogue.
Es ist durch eine Reihe von Websites verwendet werden.
Es ist eine Web-Design-Rahmen, dass Ihre Webseiten zu machen lassen
schön und ansprechend.
Und ich werde über diese gehen zwei Begriffe hier.
Schön.
So können Sie auf der normalen Website haben links, die von nur HTML besteht.
Sie haben HTML im Unterricht gelernt und im Schnitt in der Länge.
Bootstrap ist ein Weg, um Ihre Webseiten schön.
Sie können nehmen, was auf die linken Seite des Bildschirms
und machen es zu, was auf die rechten Seite des Bildschirms mit sehr,
sehr, sehr wenig Code.
>> Sie erhalten die schönen blauen Button, erhalten Sie die Phantasie, abgerundete Kanten auf dem Bildschirm,
Sie die Listenansicht zu erhalten, erhalten Sie die Karten und so weiter mit sehr wenig Code.
Es gibt tatsächlich kein CSS, dass Sie müssen durch selbst schreiben.
So Bootstrap ermöglicht Ihnen, haben diese vorgefertigte CSS
Komponenten, die Sie setzen können innerhalb Ihrer Webseite
um sie schön aussehen, ohne sehr viel Arbeit auf eigene Faust.
Es ist wirklich eine Bootstrap, ein Ausgangspunkt,
für Ihre Web-Entwicklung Abenteuer.
Und so, wenn Sie gerade sind spöttisch eine Website,
es ist ein sehr guter Ort, um zu beginnen.
Sie können eine gut aussehende Website zu erhalten mit sehr, sehr wenig Arbeit.
Und in der Tat, wir gehen dies selbst tun
im Verlauf wie fünf minutes-- innerhalb von 10 Minuten.
So ist es recht einfach, machen einige große Websites.
Das ist also der erste Teil.
>> Die zweite part-- reagiert.
Menschen, heute, nicht nur die Web-Zugriff auf ihren Laptops.
Eigentlich ab 2014 mehr Menschen das Web über mobile Geräte zugreifen,
wie Telefone oder Tabletten, oder Dienstleistungen oder so weiter, als Webseiten.
Und Websites sind traditionell mit Laptops oder Desktops konzipiert
im Sinn.
Und so werden die Webseiten sind oft nicht sehr gut auf Ihr Handy geeignet ist.
Wenn Sie schon einmal besucht harvard.edu auf Ihrem Telefon,
es ist irgendwie eine lästige Erfahrung, nicht wahr?
Das ist, weil es ist nicht ansprechbar.
Wir versuchen, zu machen Websites, die ansprechen,
, dass, um die Menschen Bildschirmgrößen reagieren.
>> Also, wenn es ein Telefon, es ist gehen, um am Telefon zu gehen.
Wenn es sich um eine Tablette, ist es gehen, um auf dem Tablet zu gehen.
Es passt auf den Spiel Bildschirm, der verwendet wird.
Und so Bootstrap stellt auch einige sehr, sehr nützliche Dienstprogramme dafür.
Und wir werden das diskutieren, als auch.
Also noch einmal, es gibt zwei Teile Bootstrap-- schön und verantwortlich.
Wir werden über diejenigen sprechen.
Zuerst schön.
Und dann reagiert.
>> Also alles, was der Code, den wir sind werde über today-- sprechen
wir werden eine Menge von Beispielen haben, viele Herausforderungen, und es so an--
Alle lebt auf dieser Webseite hier.
Diese Folie ist, was wir ausgeschickt.
Also, wenn Sie hier sind, Sie fühlen können frei, nicht das zu notieren.
Und wenn Sie aus der Ferne beobachten, fühlen frei, diese auf Ihrem Computer ziehen
auch.
Sie werden wahrscheinlich während es brauchen der Verlauf des Seminars.
>> So werden wir ein verwenden Website namens CodePen,
Das ist eine kollaborative Codierung Umwelt, während des Seminars.
Und CodePen-- und ich werde zeigen Ihnen hier echte fast--
es erlaubt Ihnen zu schreiben HTML gemeinsam.
Kann ich es schreiben, ich kann sie zu senden euch, euch kann es zu bearbeiten.
Auch wenn Sie remote sind, können Sie können weiterhin auf es so.
Sie können HTML-Code auf die Art top und es wird automatisch
in die umgerechnet werden Web-Seite an der Unterseite.
So ist es eine Möglichkeit für Sie, schnell ausprobieren Code
ohne jede Art von Sachen zu tun auf Ihrer IDE oder Ihre eigene Website,
oder Wasauchimmer.
>> Also zögern Sie nicht und ziehen Sie diese Website, wenn Sie remote sind
oder wenn Sie hier sind, vor allem wenn Sie remote arbeiten.
is.gd/cs50boostrap.
Keine Kappen, keine Unterstriche, kein gar nichts.
Also diejenigen von euch, sind Hier, gib mir den Daumen
up, wenn Sie gezogen haben up dieser Web-Seite.
Gut?
>> Publikum: Ja.
>> NEEL MEHTA: Also werden wir bekommen der in nur einer Sekunde.
Also zuerst, wir gehen, um zu bekommen, wie machen Sie Ihre Webseiten schön?
Wir werden lernen, wie man langweilig zu nehmen, alte HTML, wie ich Ihnen gezeigt, vor,
und drehen Sie, dass in wirklich nett Komponenten,
wie schönen Widgets, schön, gefärbt Knöpfe und Etiketten, und Tabellen,
und alles unter Verwendung von Bootstrap.
Also, wenn wir alle hinübergehen zu der CodePen, die Sie gerade nach oben gezogen.
Es sollte ein wenig so aussehen.
Schaut es, wie dies für alle?
>> Publikum: Ja.
>> NEEL MEHTA: Wenn Sie Fern sind, es sollte wie folgt als gut aussehen.
Wenn nicht, werde ich Sie bald, wie zu zeigen können Sie es wie folgt aussehen
in einem späteren Teil des Videos.
Also hier haben wir geschrieben haben, ein sehr einfaches HTML,
wie die Art, die Sie haben Verwendung in der Klasse ist.
Es ist ziemlich einfach.
Kein Schnickschnack.
Und wir haben ein paar Sachen.
Wir haben entwickelt eine sehr, sehr einfache Inbetriebnahme
rufen Yalp! mit dem Sie finden Restaurants in der Umgebung,
und finden Sie Bewertungen, und Richtungen auf all jene.
Es ist ein sehr gutes Konzept.
Es war noch nie zuvor getan wurde.
Es ist ein sehr eindeutigen Namen, auch.
>> Also, was wir werden versuchen, zu tun ist, die Eigentümer helfen
von Yalp! machen seine Website sehen wirklich, wirklich cool.
So zu beginnen, den Besitzer Yalp! hat ein wenig Suche gemacht
Feld und ein kleiner Knopf, und dann vielleicht ein wenig
markierten Bereich für ein hervorgehobene Restaurant, und dann
eine Liste der Restaurants dass in der Umgebung sind.
So können wir nur durch zu gehen der HTML-Code wirklich schnell.
Wie komfortabel sind Sie Kerle mit HTML?
Wir haben ein wenig getan Schnitt und auch in der Klasse.
Decent?
>> Also nur als Erinnerung, HTML ist alles über das
Tags oder Elemente, die sagen, Computer, wie das Layout der Web-Seite.
Also das h1 hier-- starten h1, Willkommen um Yalp !, Ende h1-- der Computer sagt,
zeichnen Sie ein großes Kopf es sagt: Willkommen in Yalp!
im Inneren gibt.
Wir haben auch Formen.
Wir können wie folgt eingibt, Texteingaben, die als Textfelder übertragen werden
Sie schreiben in.
Sie haben auch Tasten.
Sie erhalten eine schöne, anklickbaren Button.
Es macht nichts richtig machen jetzt, aber Sie bekommen einen Knopf.
Sie können divs oder Trennwände, zu haben, aufzubrechen Ihre Seite in verschiedene Gruppen.
>> Sie können den Absätzen haben, Sie Tasten.
Wenn Sie Absätze, dann müssen Sie ungeordnete Listen, UL,
und Listen innerhalb dieser, li.
Das sind also die sehr grundlegenden Bausteine von einer Webseite.
Und in der Tat ziemlich jede Website, die Sie sehen,
wird gebaut werden unter Verwendung dieser gleichen Werkzeuge.
Natürlich tun sie nicht alle schauen diese schlechte, weil wir
werde aufpeppen ein wenig.
Lassen Sie uns also diese langweiligen alten HTML und Start Umwandlung in dem schönen Ort
dass wir gerade gesehen, vor ein paar Minuten.
>> Lassen Sie uns also beginnen sehr einfach.
So haben wir hier auf diese Schaltfläche.
In Bootstrap, wie wir gesehen haben, können wir haben eine schöne, schöne, blaue Taste.
Und das ist nicht, indem Sie benutzerdefinierte CSS getan.
Es gibt keine benutzerdefinierte CSS hier.
Das wird durch Zugabe von Klassen getan um Ihre HTML-Elemente.
Wenn Sie Klassen oder hrefs, versucht haben, oder Anker oder type = "text" für inputs--
HTML-Elemente können diese Attribute haben.
Sie können zusätzliche Informationen haben dass Sie vielleicht ihnen zu geben.
>> Und so weiter, in diesem Fall, Klassen sind das Attribut.
So dass Sie schreiben möchten, Taste class = etwas in Zeichenfolgen.
Und das Attribut wird Ihnen sagen, die Computer, ist dies nicht, alte Taste.
Es ist eine Schaltfläche, die in ist Diese Klasse von Tasten.
Und so Bootstrap, wenn Sie es geben, einen bestimmten Stil auf Ihrem Element,
wird es zu ziehen auf eine bestimmte Weise.
So schreibe ich "btn-Primär btn.
btn ein Kürzel für Taste.
Sie sehen nun, dass bemerken meine hässliche Taste eingeschaltet
in eine schöne, schöne, blaue Taste.
Es sieht sehr schön, wenn wir Sie darauf.
>> Und so was passiert ist, haben wir die btn-Klasse und die btn-Hauptklasse
auf unserem Element.
Und Bootstrap wird in gehen und sagen: OK, ich wissen, dass es diese beiden Klassen.
Jedes Element, dass diese beiden hat Klassen sollte wie folgt erstellt werden.
Also das ist der Kern, wie Sie legen Stile auf Elemente in Bootstrap.
Sie legen nur Klassen zu ihnen und es wird sie zu gewichten als es für richtig hält.
Also hier ist ein weiteres Beispiel.
Im Eingang können wir hinzufügen a class = "Form-Kontrolle".
Und ich werde bald zeigen, wo Sie können herausfinden, welche Klassen
stehen von jeder Art von Element.
Aber die Klasse, die wir gerade Hinzugefügt hat schöne, abgerundete Ecken,
Es hat schöne Polsterung, es hat ein schönes, blaues Glühen zu ihm.
>> Wir können auch in dieser Form zu gehen.
Und class = "form inline", die machen unser Formular, wie Sie sich vorstellen, Inline.
Also es sieht ein bisschen mehr wie das, was wir vorher schon.
Also, bevor wir weitermachen, um den Rest des Stils die Seite, alle mögliche Fragen über das, was wir
getan hat?
Wir haben gerade angebracht Klassen unsere verschiedenen Elemente.
Und ich später zeigen, wie Sie herauszufinden, was Klassen sind vorhanden.
Wir befestigt Klassen, haben bestimmte Arten.
Und dass der Browser sagt, wie man das Seitenlayout verwenden
Bootstrap ist vorgesehen Stile.
Alle Fragen aus dem Publikum?
>> Gut soweit?
Cool.
Viele der Herausforderungen, mit Bootstrap ist nur
zu wissen, was Komponenten verfügbar sind und wie man sie benutzt.
Und das ist alles gelernt mit Erfahrung und
durch Lesen der Dokumentation, die wir bald reden.
So haben wir dieses div.
Es ist nur eine langweilige, alte Sache.
Wir wollen es irgendwie zu betonen.
So in Bootstrap, gibt es eine Menge von Komponenten zur Verfügung.
Und das ist getbootstrap.com.
Es ist eine sehr nützliche Referenz.
Es enthält Dinge like-- hier ist, wie Sie eine Schaltfläche zu tun.
Und Sie nav Bars tun können, können Sie Etiketten, können Sie Bars Fortschritte,
Sie Liste Gruppen tun kann.
Im Grunde ist es alle Arten von euch vielleicht eine Web-Seite zu sehen.
>> Hier ist eine, die wir jetzt versuchen.
Es heißt Panel.
Wenn Sie überhaupt verwenden Google Jetzt haben sie Karten.
Oder jedes Android-Gerät verfügt über Karten.
Sie haben kleine weiße Kästchen das Zeug haben, in der es.
Und so werden wir versuchen und zu tun dass uns hier mit einer Sache,
genannt Panel.
Also, wenn wir legen class = "Panel Panel-default "zu unserem äußeren div,
dann bringen wir ein div class = - lassen Sie uns nur diese Dokumentation zu überprüfen.
div class = "Panel-Überschrift" und dann div class = "Platten-Körper".
Wieder, keine Sorge über Speichern Sie diesen Code.
Es wird online verfügbar sein.
>> Also haben wir diese und jetzt unsere langweilig, alt div verwandelte sich in diesem schönen, kleinen Karte.
Es hat schöne Polster es, grenzt, steht es heraus
vom Rest der Seite, Das ist ziemlich cool.
Also lass uns gehen in, und dies ändern Erhalten Routenplaner Taste, um schön aussehen.
Wer im Publikum zu erzählen will mir, was ich kann, um die Schaltfläche zu tun
um es so aussehen schöner mit Bootstrap?
Ja?
>> Publikum: Wir könnten eine Klasse hinzuzufügen.
Und wir könnten Klasse zu tun = "btn btn-Primär".
NEEL MEHTA: Ja.
Es gibt eine Reihe von anderen Farben für buttons-- verfügbar
oder für alles, was das betrifft.
Wir können btn-Gefahr zu tun und machen es rot.
Da gehen wir.
Wir können btn-Erfolg tun es grün zu machen.
Wir können tun, btn-info-- es gibt einen Haufen Dinge, die Ihnen zur Verfügung stehen.
So habe ich kleine Herausforderung für Sie jetzt.
So gibt es eine weitere Sache, dass ich nach links un-Stil.
Diese Top-Restaurants.
>> Und wir, eine Sache verwenden möchten rief eine Liste Gruppe, um sie anzureden.
Also meine Herausforderung an Sie ist, gehen auf getbootstrap.com--
Ich werde ziehen Sie es hier.
getboostrap.com.
Zum getbootstrap.com, finden die wo sie sich über die Liste Gruppen zu gehen.
Und Sie werden hier einen zu sehen Beispiel und die rechte Klassen
die Sie verwenden können, um Ihren Listen in diese schöne Liste Gruppen.
Diese sind Beispiele gearbeitet von Codebeispielen, was
Code, den Sie, was für HTML-Code verwenden, Sie verwenden, und was das gibt.
>> Also meine Herausforderung an Sie-- gehen getbootstrap.com,
ob Sie hier oder zu Hause, und um zu versuchen und Stile hinzu, um diesem ul
um es schön aussehen.
Und verwenden Sie eine Liste Gruppe Stil.
Sie möchten ein paar Minuten in Anspruch nehmen, und suchen Sie in der Dokumentation,
Versuchen Sie, diese selbst?
Weil, wie Sie tun, Web-Entwicklung sind, Sie werden eine Menge Arbeit zu realisieren
sein wird Lesen Diese Dokumentation.
Also ich denke, es ist gut, zu kennen mit, wie Sie in der Dokumentation zu lesen,
wie Sie herausfinden, was, wo, welche Code-Beispiele, die Sie verwenden können,
was Sie nutzen können.
>> Also noch einmal, getbootstrap.com, gehen Sie zur Registerkarte Komponenten,
und dann nach unten scrollen, um Gruppenliste.
Und Sie werden Beispiele von Code sehen, dass die Sie verwenden können, um Ihren HTML passen, dass.
So nehmen Sie ein paar Minuten und versuchen und entdecken Sie es selbst,
ob Sie hier oder zu Hause.
Wenn Sie zu Hause sind, unterbrechen Sie das Video, vielleicht, und versuchen Sie es selbst heraus.
Wenn Sie hier, wenn Sie an unsere website--, wenn Sie die Seite zu aktualisieren,
Sie finden diese auf dort zu sehen.
Diese sehr gleichen Code ist nur Hinzufügen neuer Arten recht.
So nehmen Sie ein paar Minuten.
Lassen Sie mich wissen, wenn Sie sich wohl fühlen darüber oder wenn Sie total verloren.
Klingt gut?
Cool.
Schnell beiseite für die von Ihnen zu Hause, während wir warten,
wenn Sie gehen auf die Website GitHub dass ich bis vor ein paar Dias,
an den Anfang des Videos, Ich habe ein GitHub Repo, Repository,
für dieses Gespräch.
Alle diese Code-Beispiele, die wir sein reden werden hier gespeichert.
Also, wenn Sie gehen, um herausfordern-1.html Dieses ist der gesamte Code, die wir im Augenblick haben
auf unserer CodePen.
So können Sie einfach weitermachen, und kopieren Dies, und fügen Sie ihn in Ihrem eigenen CodePen.
Und auf diese Weise, die Sie halten können mit dem, was wir hier tun.
So haben Sie diese Seite geöffnet, so gut wir gehen Sie durch den Rest des Seminars.
Auch hier wollen, dass es wie das, was Sie suchen finden sich an den unteren Rand des Bildschirms
Dort.
Gut fühlen?
Feststoff.
Lassen Sie uns für alle anderen zu warten, fertig mit dem, was sie tun.
>> Ja?
>> ZIELGRUPPE: Nehmen wir an, ich wollte um Bootstrap bei home-- verwenden
NEEL MEHTA: Ja.
ZIELGRUPPE: Ich sehe, auf der Website, Erste *** Seite.
Sie geben mir die Optionen Bootstrap, Source Code oder Sass.
Welche von diesen will ich?
>> NEEL MEHTA: Ja.
Die Frage ist also, wie bekommt man begann mit Bootstrap von uns selbst?
Es passiert einfach zu magisch arbeiten hier.
Also, wenn wir Zeit haben das Ende des Seminars,
Ich werde Ihnen zeigen, wie Sie bekommen es auf Ihre eigene Webseite.
Wie hier, habe ich eigentlich setzen in einige Einstellungen,
wird es automatisch geladen, aber ich werde
zeigen Sie es von zu tun Kratzer auf Ihrem eigenen Web-Seiten.
>> ZIELGRUPPE: Vielen Dank.
>> NEEL MEHTA: Ja.
Gute Frage.
Gut fühlen?
Gut fühlen?
Cool.
Also, wer zu mir, wie sie gemacht erzählen will dieses Ding schön und Boostrappy?
Was ist die erste Klasse wir in die ul hinzufügen?
ZIELGRUPPE: class = "list-Gruppe".
NEEL MEHTA: Ja. list-Gruppe.
Und dann was tun wir dem lis?
Jemand anderes?
Publikum: Und dann, nach dass, class = "list-group-Punkt".
>> NEEL MEHTA: Ja.
>> Publikum: Und es ist das gleich für den nächsten.
>> NEEL MEHTA: li class = "list-group-Punkt".
Dort gehen Sie.
Wir haben unsere schöne Liste Gruppe, so wie wir es erwartet hatten.
Also los gehts.
In 10 Minuten, die wir gemacht haben diese langweiligen, alten Yalp! Seite
schön und professionell.
Und das ist nur der Anfang.
Also jetzt, dass Sie das Gefühl, gut über das, lassen Sie uns
gehen Sie einfach weiter und sprechen über ein paar mehr Komponenten,
könnte sich als nützlich, wie Sie kommen, gehen Sie in Ihrem Abenteuer.
>> Natürlich gibt es eine Menge, die hier.
Und jetzt, da Sie gelernt haben Wie listet Gruppen zu tun,
man kann so ziemlich lehren Sie selbst, wie zu einem diese tun.
Aber, natürlich, sagen wir einfach versuchen, und tun, ein paar mehr uns selbst,
nur damit Sie ein Gefühl dafür zu bekommen wie Sie diese verwenden könnten.
Ich werde einfach zu gehen auf dieses Beispiel hier.
Auch hier ist der Code, den ich gerade eingefügt in ist hier genau richtig hier.
So fühlen sich frei, um es nach oben ziehen.
>> So haben wir bereits durchgemacht ein Paar dieser Beispiele.
So haben wir Knöpfe, die wir haben bereits gesehen, wie zu tun ist.
Wir können größere Tasten.
Mit dem Button class-- es geht, btn-lg btn und btn-Standard macht es weiß.
Also das macht unsere Taste vergrößern als es anders sein.
Es könnte sich als nützlich erweisen, wenn Sie big Submit-Button oder so etwas.
Wir sahen die Liste Gruppe B. wir sahen die Form beispielsweise.
>> Ein sehr wichtiger ist man Icons.
Und Symbole sind eine Möglichkeit für Sie hinzufügen interessante Dinge, wie check check
Marken oder Pluspunkte, oder einen Freund Symbole oder Neustart-Icons,
oder was auch immer, um Ihre Web-App.
Also noch einmal, wenn wir in hier, die Komponenten, glyphicons,
sind die für die Bootstrap verfügbaren Symbole.
Es gibt eine erschöpfende Liste aller, die hier.
Also nur als Beispiel, lassen Sie uns versuchen, und fügen Sie ein.
>> So wie Facebook, wir versuchen, um einen Freund hinzufügen-Schaltfläche haben.
Lassen Sie uns zunächst etwas Art zu addieren.
Button class = "btn btn-Erfolg".
Und wir gehen.
Lassen Sie uns ein Symbol hinzufügen, hier.
Welche Symbole, denken Sie, könnte sinnvoll sein, hier setzen?
Sie haben wahrscheinlich gesehen auf einige Web-Seiten oder was auch immer,
aber was ist ein Beispiel für ein Symbol, könnte in diesem Knopf gut gehen?
Fühlen Sie sich frei, um diese Ansicht zu sehen wenn Sie brauchen keine Inspiration.
Es gibt eine Menge nützlicher diejenigen, finden Sie hier.
Ja?
>> ZIELGRUPPE: Vielleicht ist die glyphicon Benutzer eine?
NEEL MEHTA: OK.
Dieses hier.
Das ist ziemlich gut.
Ja.
Auf Facebook, ich glaube, es wäre ein bisschen so aussehen.
Also hier ist, wie wir über gehen Hinzufügen von Symbolen auf unseren Seiten.
Wir haben nur ein span-- eine Spanne ist ein neutralen Behälter für so etwas.
Ein div ist ein Container für etwas, eine Spanne ist ein weiterer Container.
divs haben Zeilenumbrüche um sie herum, Spannen nicht.
So gibt es verschiedene Möglichkeiten, mit generischen Containern.
Wie es nicht sinnvoll, es zu setzen innerhalb eines Absatzes oder nichts.
Wir müssen sie setzen im Inneren etwas obwohl,
so dass wir gerade innerhalb einer Spanne setzen.
So span class = glyphicon glyphicon-User "enge Spanne.
Und wir haben jetzt die im Inneren des Button-Symbol.
>> So ist es nicht ganz unähnlich sehen was Sie auf facebook.com sehen könnte.
Und so ist es schön, dass diese eigentlich überall platziert werden Sie wollen.
In der Kopfzeile Bars, Ihre Liste Gruppen.
Was auch immer.
Es muss nicht zu sein, im Inneren eines Knopfes.
So als Beispiel, kann ich legte die gleiche Klasse hier.
"glyphicon glyphicon-Benutzer".
Und es scheint, genau das gleiche.
So dass diese icons-- können Sie die Spanne verwenden class = "glyphicon glyphicon-was auch immer".
Und das wird Sie fügen icons wo immer Sie wollen.
Und Ikonen sind ein sehr wichtiger Teil der Herstellung einer Website-Look
professionelle und gut gemacht.
Also nicht übertreiben, aber es ist oft eine gute Sache zu wissen.
>> Platten, wieder.
Ich werde einfach wieder tun dies als eine Rekapitulation weil sie Art beteiligt.
Sie werden bemerken, dass in Drehen Sie Ihre normale HTML
Website in eine Bootstrap-afied Website, müssen Sie
um zusätzliche Struktur auf der Webseite hinzufügen.
Zum Beispiel, haben wir zusätzliche divs hier nur, weil diejenigen,
sind erforderlich, um eine Platte zu machen.
Also nur zu halten, dass Sie daran, dass Sie müssen zusätzliche Struktur aufweisen.
So "Tafel Panel-default".
Vielleicht ist es Panel-Header.
Ich denke es ist Tafel Rubrik.
Ja.
Da gehen wir.
Also, noch einmal, es ist unser Panel.
>> Eine weitere Sache, die wir noch nicht decken, Tabellen.
Tische, standardmäßig Look Art von hässlich.
So was.
Aber Tabellen sind natürlich ein sehr wichtiger Teil
von dem, was Sie in Web-Entwicklung zu tun.
In Pset7 beispielsweise CS50 Finanzen, die bald herauskommen wird,
Sie werden eine Menge von Tabellen verwenden.
Und eine Menge von Web-Entwickler verwenden eine Menge von Tabellen, um Informationen anzuzeigen,
wie Aktien oder Partituren, oder was auch immer.
>> So Styling Tabellen ist eigentlich sehr einfach.
Sie fügen die Tabellenklasse zu Ihrem Tisch.
Und, ich wage zu sagen, es sieht ziemlich nett.
Sie können zusätzliche Dinge zu tun, wie "table-gestreift".
Und Sie werden die Ergebnisse angezeigt.
Sie können Tisch begrenzt zu tun.
Es gibt eine Menge von Optionen Sie können.
Aber im Grunde, das Hinzufügen einer Tabelle der Tabellenklasse,
machen Ihre Tabellen schauen ziemlich nett.
Also das ist ein kurzer Überblick der einige der wichtigeren Arten
und Komponenten, du wirst müssen für Bootstrap verwenden.
Ich denke also, dass Wraps unsere schönen Teil.
Haben Sie Fragen gerade jetzt darüber, wie um Ihren Websites schön?
Wie können Sie diese verwenden Komponenten zu Ihrem Vorteil?
Gut fühlen?
Ja?
ZIELGRUPPE: Vielleicht ist eine dumme Frage,
aber können Sie Bootstrap auf Wikipedia benutzen?
Wenn Sie Bearbeiten einer Wikipedia-Seite?
NEEL MEHTA: Ja.
Die Frage war, ich bin Bearbeiten einer Wikipedia-Seite,
kann ich zählen Bootstrap Arten da drin?
>> Publikum: Ja.
>> NEEL MEHTA: Und so Bootstrap ist im Grunde eine große CSS-Stylesheet.
Ein CSS-Stylesheet sagt nur, wenn Ich habe diese Klasse, legen diese Stile.
So der CSS-Stylesheet für Bootstrap wird etwas wie .btn sein,
der Button-Klasse, wie ein zu erhalten abgerundete Ecke Grenze oder was auch immer.
Also im Grunde, Bootstrap es nur ein Bündel von Klassen und eine Reihe von Stilen
für diese Klassen festgelegt.
So lange, wie Sie diese CSS haben, Diese Liste von Regeln auf Ihrer Seite,
Sie erhalten die Bootstrap-Styling zu bekommen.
Das ist natürlich abhängig mit den Bootstrap Stile in Ihre Seite
anfangen mit.
>> Und so in Wikipedia, Sie könnten wahrscheinlich nicht
tun, weil Wikipedia keine Bootstrap darin.
Aber wenn es haben Bootstrap hat, Sie könnten wahrscheinlich tun.
Und wenn Sie wollten, könnten Sie sind es, aber das könnte
brechen die bestehende Layout der Seite.
Aber sehr gute Frage.
Sie können Bootstrap verwenden wo auch immer es ist im Preis inbegriffen,
aber es ist nicht in der standardmäßig eingebaut.
>> ZIELGRUPPE: Vielen Dank.
>> NEEL MEHTA: Ja.
Haben Sie weitere Fragen?
Ja.
Egal, ob Sie hier oder zu Hause sind, nur nicht vergessen, wieder getboostrap.com--,
getboostrap.com-- ist dein Freund.
Wann immer Sie verwenden Bootstrap, das wird dir geben
Anweisungen, wie Sie bekommen begann, wie man Komponenten zu verwenden.
Es gibt einige coole JavaScript Plug-Ins, die wir nicht hier zu gehen,
aber sie sind einen Besuch wert als gut.
Also das ist dein Freund.
Es ist nur wichtig, um zu wissen, wie man diese nutzen eingesetzt.
>> Also lassen Sie uns plaudern ein wenig über machen ansprechende Webseiten.
So, wie ich schon sagte, benutzten die Menschen ihren Laptops, ihre Handys nutzen sie.
Und wie Sie vielleicht gut vorstellen, das ist eine ganz andere Bildschirmgröße als das.
Und so ist die gleiche Website das sieht gut aus auf meinem Handy
wird nicht gut aussehen, notwendigerweise, auf einem Computer.
Also, was Sie tun müssen ist, machen Sie Ihre Website an.
Es muss auf die verschiedenen anzupassen Bildschirmgrößen, dass es auf.
>> Es hat zu sagen, ich weiß, ich bin auf einem Computer, ein großer Laptop, ich solle zu erweitern.
Ich weiß, ich bin auf einem Telefon, sollte ich schrumpfen.
Und so Bootstrap bietet einige sehr, sehr nützliche Werkzeuge, um dies zu tun.
So Bootstrap lässt Sie Pause eine Website in 12 Spalten.
Sie können Zeilen machen und 12 Spalten.
Und Sie partitionieren können diejenigen, wie Sie wollen.
Sie können eine, große Sache zu haben, Das ist 12 Spalten breit.
Sie können zwei Dinge haben , die jeweils sechs sind.
Sie können eine Sache, die vier ist zu tun, eine, die zwei ist, oder eine, die sechs ist.
Sie können tun, drei, drei, drei, drei.
Sie können tun, was immer Aufschlüsselung, die Sie wollen.
>> Also vielleicht Ihre Web-Seite muss eine haben linke Spalte, die ein Drittel der Breite ist.
Also das wäre vier Spalten sein breit und der Rest der Seite
wäre acht Spalten breit.
Das ist also ein Beispiel.
Lassen Sie uns nach oben ziehen ein weiteres Beispiel.
>> Publikum: Ist es immer sein müssen eine gerade aufgeteilt?
Könnte es eine sieben, fünf Split sein?
>> NEEL MEHTA: Ja.
Es könnte sieben, fünf sein.
Ja.
Solange es um 12 addiert, es ist in Ordnung.
Also gehen wir zurück hier.
Auch das ist der Code Hier gibt es auch hier,
unter reaktions Beispiel.
Also habe ich einfach hochgezogen einige Beispiel reagiert Code hier.
So können Sie dies mit Hilfe zu tun ein Ding namens Reihe.
Row ist nur eine andere Klasse.
Es ist eine andere Art, die Sie auf fügen Sie Ihre divs, sie ihre eigenen Komponenten zu machen.
>> So sagen Sie, div class = "Zeile", um eine Zeile zu machen,
zu geben, sich 12 Säulen des Raumes.
Und dann setzen Sie Spalten innerhalb davon.
Also hier haben wir col-xs-6.
Nicht über die xs kümmern.
Das werden wir in einer Sekunde zu sprechen.
Aber im Grunde, einen haben wir Sache, die sechs breit.
Wir nennen es gelassen.
Und damit ist das linke Feld hier.
Wir haben eine Sache, die ist sechs der 12 Spalten breit.
Und dass man auf der rechten Seite.
>> auch gibt nur Marken Ihre div füllen sie grau.
Also das ist nur so können wir sehen, dass sie verschieden.
Und so das erste Beispiel.
Es ist ein sehr einfaches Beispiel, wie Sie würde Ihre Zeilen und Spalten verwenden hier.
Sie definieren eine Reihe mit class = "Zeile".
Und dann haben Sie class = "col-xs-6" zu tun Hälfte ", col-xs-6", die andere Hälfte zu tun.
Hier ist ein komplizierteres Beispiel.
Lassen Sie uns an den Tiny, Riesige, Der Rest eins.
>> Wir können Tiny zwei Spalten breit zu machen, wir Huge sechs Spalten breit zu machen,
und die übrigen vier Spalten breit.
Das macht zusammen 12.
Und so sind diese am Ende überspannt die Breite der Seite.
Auch eine Reihe haben wir draußen.
Dann haben wir div class = "col-xs-2" und dann 6 und anschließend 4.
Achten Sie auf die Struktur für uns.
Und so setzen wir, was auch immer zum Teufel wollen wir hier drinnen.
Anstelle von Tiny, können wir eine Taste legen.
Button class = "btn btn-Primär".
Und so feststellen, dass unsere Taste nimmt nicht die ganze Breite,
aber zumindest ist es beschränkt um so viel Platz.
>> Also das ist alles schön und gut.
So können wir jetzt aufbrechen unserer Web- Seite in Stücke, Breite weise.
Wir können sagen, wir wollen einen linken haben Spalte und eine rechte Spalte, und so weiter.
Aber wir haben nicht übergegangen wie Sie machen es reagiert.
Und so Bootstrap machen wir das auch.
Er hat diese Dinge genannt Haltepunkte.
So eine Möglichkeit zu wissen, ob es hat du bist auf einem Laptop, die Sie auf einem Tablet sind,
du bist auf einem Telefon horizontal, oder Sie auf einem Telefon sind vertikal.
Es kennt die Bildschirmgröße.
Und bricht diese in vier Kategorien-- groß oder lg, die Laptops ist, in der Regel.
md oder Medium, das Tabletten ist.
sm, klein.
Oder xs, extra klein.
Und so, wenn Sie angeben, eine Spalte, Sie sagen,
es sollte sechs Spalten breite auf einem extra kleinen Gerät.
Das ist, warum wir haben col-xs-6.
Wir sagen, dass es sein sollte werden sechs der 12 Spalten breit
auf einem extra kleinen Gerät.
Und wenn es etwas größer, werden wir einfach um mit Hilfe der zusätzlichen geringen Größe Standard.
Wenn es etwas größer als extra klein, es wird sechs breit sein.
Und so haben wir nutzen können, diese auf unserer Säulen machen
nehmen unterschiedliche Menge an Spalten auf der Basis der Bildschirmgröße.
Lassen Sie uns auf diese reagiert, Größenänderung zu gehen.
So haben wir unsere Spalten.
Und er sagt, "col-lg-6 col-XS-12".
So gegeben, was Sie wissen, so weit, was halten Sie
denke an gehen passieren, auf einer großen Leinwand?
Nun, es ist Art von gegebenen Möglichkeit, aber was tun,
denken Sie es aussehen wird wie auf einer großen Leinwand?
Und warum ist das?
>> Publikum: Ist es, dass auf einem großen Bildschirm, es ist
gehen, um nur eine zu nehmen Teil des vollständigen Raum?
Wie die Hälfte davon, ich denke?
>> NEEL MEHTA: Ja.
>> Publikum: Und auf kleinere Bildschirm, es wird
zur Aufnahme des gesamten Bildschirms, dem 12.
NEEL MEHTA: Ja.
Recht.
So als Beispiel, lassen Sie uns nur nach unten hier.
Ja.
Also alles, was lg ist oder bigger-- so mein Computer passiert,
zu lg, weil es sein hübsche wide-- es machen
sie nebeneinander, weil es col-lg-6.
So, weil es auf große, es macht es sechs Spalten breit und sechs Spalten breit.
Mal sehen, was passiert, wenn ich machen dies zu einem kleineren.
Ich werde einfach un-Vollbild dieser.
Und ich werde, um den Bildschirm zu verkleinern.
Ich gehe, um den Bildschirm zu schrumpfen, so dass es sieht aus wie ich bin auf einem kleineren Gerät.
So werde ich es so schrumpfen.
>> Und voila.
Es wird nun gestapelt weil wir jetzt gegangen
aus großen zu-- dies wahrscheinlich eine extra kleine Bildschirmgröße.
Und nun heißt es, OK, wir sind nicht in großen, wir sind in extra small Land.
So werden wir verwenden, das extra kleine Größe.
Und wir sind an XS-12, XS-12 geht.
Also, es wird gestapelt werden.
Und gerade feststellen, dass es ein Ding namens einen Haltepunkt.
Ein Haltepunkt ist, wo Sie den Übergang gemacht
von extra klein bis klein, klein bis groß, und so weiter.
>> Also nur bemerken, dass, wie ich schieben Sie diese out, schließlich, werden Sie auf den Punkt
wo sie zu springen, um nebeneinander zu sein.
Dort gehen Sie.
So gibt es den Haltepunkt genau dort.
So können wir machen es noch komplizierter.
Jetzt können wir sagen, diese Dinge sollten vier breit sein.
Das heißt, sie sollten nehmen etwa ein Drittel
der Rede auf sehr großen Geräten.
Auf einem Medium-Gerät, es zu nehmen sollte die Hälfte des Bildschirms, weil es md-6.
Auf einem sehr kleinen Gerät, sollte es nehmen 12.
Und so sieht ziemlich natürlich.
Sagen wir einfach versuchen, dies für uns selbst.
>> So auf einem großen Bildschirm, sind sie vier breit.
Schrumpfen sie ein wenig.
Und sie sind jetzt sechs breit.
Das ist also sechs, sechs, sechs.
Shrink es noch und dann sie werden vollkommen stapelbar.
So dass diese beispielsweise sinnvoll, wenn Sie mit Karten, wie News-Karten sind,
Wo zum Beispiel, wenn es ist auf einem sehr großen Bildschirm,
es ist in Ordnung, wenn Sie mehrere nebeneinander haben, weil sie alle genug Platz zu bekommen.
Aber sie brauchen, um genug Platz zu haben.
So auf einem kleineren Bildschirm, Sie wollen ihnen geben würde
mehr Raum, proportional der Seite.
>> So wie ein Beispiel aus der Praxis, sagen wir, wir haben Twitter.
Und wir haben Textfeld, so können Sie auf der Seite twittern.
Und wir haben eine Liste der Trending Kommentare auf der rechten Seite.
So auf einem großen Bildschirm, wir sollten haben sie nebeneinander liegen,
so können Sie sie zu einem Glas zu sehen.
Aber auf einem kleineren Bildschirm, sollten wir tun, 12 und 12,
so dass die Trend-Themen unter dem tweet Bereich.
Weil die tweet Bereich ist die Hauptsache ist, und auf einem kleinen Bildschirm,
Die Trend-Themen nicht Egal ganz so viel.
Und so setzen wir sie direkt unter, so dass sie beide bekommen genug Platz.
Sinn so weit?
>> Publikum: Ja.
>> NEEL MEHTA: Fest.
Also das ist, alle Beispiele habe ich hier.
Lassen Sie uns versuchen und tun eine Herausforderung.
Also noch einmal, das ist Herausforderung-2.html für diejenigen von euch folgenden zusammen zu Hause.
Also mein Kumpel, Mark Zuckerberg, kam, um mich den anderen Tag.
Und er ist wie, Neel, ich habe bekommen ziemlich gut in Web-Design.
Ich kann das HTML zu tun.
Ich habe diesen kleinen gemacht, neue Bearbeitung auf Facebook.
Ich habe eine neue Idee, wie wir sollten Facebook stylen.
Und hier ist es.
Genau hier.
Hier einige Beispiel-Code.
Also es heißt Fancybook.
>> Wir haben ein paar Status-Updates.
Wir haben Nemo, Mike Kosowski, ***-- drei Status-Updates.
Und dann haben wir eine Liste der Online-Freunden direkt darunter.
So hat er seine Hausaufgaben gemacht.
Er weiß ein wenig über Bootstrap, er machte die Listenansicht,
er hat ein wenig von HTML getan.
So hat er die Web-Seite.
Aber er ist wie, Neel, weiß ich nicht verstehen Responsive Design überhaupt.
Haben Sie Experten, die konnte mir dabei helfen?
Und zum Glück, jetzt sind Sie Experten in ansprechenden Design.
>> Also, was er mir sagte, war, dass er will Fancybook wie folgt aussehen.
Auf einem sehr kleinen Gerät, wie ein Telefon, alles, was
sollten gestapelt werden, wie hier.
So können Sie die Timeline upfront, bis oben, und dann
Sie sollte das haben Chat-Leiste am unteren Rand.
Sondern auf einer Tablette oder einem Medium Gerät, sollte es halb und halb zu sein,
wie in der Timeline werden sollte die Hälfte und die Liste der Chat-Freunde
sollte auf der anderen Hälfte.
>> Dann an einem Laptop, der Timeline sollte bis drei Viertel zu nehmen
und dann wird das Chat-Hedge sollte um einen anderen ein Viertel.
Und so ist er wie, Neel, ich habe diese Code hier, aber es ist nicht ansprechbar.
Es muss sich so zu verhalten.
Also meine Herausforderung für Sie wird diesen Code gegeben hier--
wenn Sie aktualisieren Sie Ihre CodePens, werden Sie das sehen.
Oder wenn Sie nur in den Code einfügen auf Challenge-2, werden Sie das sehen.
>> Hier ist dieses Beispiel-Code.
Hier finden Sie einige xxxs sehen.
Ich möchte, dass die xxxs zu ändern, so dass der Zeitplan und die Liste der Freunde
folgt diese specs hier.
Nicht über das, was Sorgen innerhalb der Timeline für den Moment.
Wir werden das bekommen im nächsten Schritt.
Aber jetzt wollen wir mal sehen, ob wir bekommen diese Dinge, um es wie folgt aufgeteilt.
So macht das Sinn?
Also, wenn Sie zu Hause sind, Halten Sie das Video und versuchen
um Ihre Web-Seite schauen reagiert so.
Wenn Sie hier sind, nehmen Sie wie zwei, drei Minuten.
Fühlen Sie sich frei, um mit einem Nachbarn unterhalten, und zu versuchen, und zu beheben Herr Zuckerberg
ansprechende Design-Problem.
Falls du irgendwelche Fragen hast, fühlen Sie sich frei, mich zu informieren.
Gut fühlen?
Fertig?
Nett.
>> ZIELGRUPPE: [unverständlich].
NEEL MEHTA: Was?
>> Publikum: Ich bin gut.
>> NEEL MEHTA: Oh, gut.
Nett.
Publikum: Die Sache mit die 12 ist es, dass Bootstrap
behandelt einen bestimmten Platz auf dem Bildschirm als 12 Einheiten über und teilt sich dann, dass bis?
Wie genau funktioniert das Dosieren der Arbeit für dieses?
>> NEEL MEHTA: Ja.
Die Frage ist also, wie funktioniert die Proportionierung
arbeiten für Bootstrap, nicht wahr?
>> Publikum: Ja.
NEEL MEHTA: Also, wenn Sie haben ein div class = "Zeile",
egal wie groß der Bildschirm ist, Bootstrap erhalten Sie 12 Einheiten
mit der gleichen Größe zu nehmen, dass viel Größe.
So in Col 1, es ist immer 8,33% die Größe des Bildschirms,
ob das diese breite oder, dass ist das breit.
Usw. natürlich auf eine kleinere Bildschirm wird jede Spalte kleiner.
Sie haben noch 12 Säulen breit, es ist ein kleiner.
So ist es bis zu Ihnen, um sicherzustellen, dass die Dinge nehmen mehr Spalte
proportional, um zu kompensieren für diesen Platzmangel.
Ist das sinnvoll?
>> Publikum: Ja.
Vielen Dank.
NEEL MEHTA: Gute Frage.
Publikum: Auf einem großen Bildschirm, können Sie
die Zeitleiste nehmen drei Viertel?
>> NEEL MEHTA: Ja.
NEEL MEHTA: Wie werden die Leute das Gefühl?
Gut?
Cool.
Also lassen Sie uns zurück zu kommen.
Und lassen Sie uns versuchen und fixieren Sie diesen Teil von Herrn Zuckerberg-Website.
So dass die Zeitlinien ist hier oben, auf die Besten, und die Liste der Freunde
ist an der Unterseite.
Und so müssen wir nur zuweisen Säulen, mit Dimensionierung proportional,
In jedem von diesen.
Also das erste *** für die Timeline.
Welche Klassen setzen wir hier?
Was habt ihr hier setzen?
Also denken Sie daran, auf einem großen Bildschirm, muss es zu nehmen drei Viertel der Breite.
Und so, welchen Stil Sie, dass geben würde?
Auf einem großen Bildschirm, drei Viertel der Breite.
Welche Klasse machen wir es benutzen?
ZIELGRUPPE: Also sind wir gerade dabei, sein bearbeite diese erste Instanz der Klasse.
NEEL MEHTA: Denn jetzt.
Ja.
>> ZIELGRUPPE: Wir sind nicht die Bearbeitung jeder, einzelne Merkmal der Timeline?
NEEL MEHTA: Nicht jetzt, zumindest.
Also diese ganze Sache ist ein Block.
Wir sind nur die Änderung der Gestaltung des Blocks.
So, hier wir col-lg-9, weil es neun von den 12 breit auf einer großen Leinwand.
Und dann auf einem Medium Bildschirm wie viele Spalten sollte ich?
Publikum: Es soll um die Hälfte und die Hälfte sein.
NEEL MEHTA: Richtig.
So, wie viele ist das?
>> Publikum: So sechs.
NEEL MEHTA: Sechs.
Und dann extra klein sollten, wenn es be-- nimmt die gesamte Breite der Reihe,
wie oft sollte es sein?
ZIELGRUPPE: 12.
NEEL MEHTA: 12.
Ja.
Und jetzt haben wir zu haben ändern Sie dies anderen,
so nimmt er den Rest des Raumes.
So col-lg--
ZIELGRUPPE: Es ist zu gehen nehmen Sie den gesamten Bildschirm?
NEEL MEHTA: Es nimmt ein Viertel des Bildschirms auf einem großen Gerät,
wie wir zeigten hier.
>> ZIELGRUPPE: Drei.
>> NEEL MEHTA: Drei.
Und dann col-MD-6 zu nehmen bis der Rest des Raumes.
col-XS-12.
So, jetzt haben wir die Zeitlinie Aufnahme drei Viertel
auf der Seite in der großen Leinwand und dann ein Viertel auf der Seite.
Und dann, wenn die Größe des Bildschirms nach unten, es ist daher entsprechend zu ändern.
So ist es jetzt gestapelt werden, auf einen sehr kleinen Bildschirm.
Und wenn wir Größe it up ein wenig, sie sollten genau die Hälfte und die Hälfte sein.
Also haben wir das bisher getan haben.
Sehr cool.
Und so werden wir nicht tun, die anderen Teil der Herausforderung.
Sie können das selbst zu tun.
Aber im Grunde, müssen Sie versuchen und diese reagiert
wie well-- machen die Timeline Artikel, selbst reagiert.
So, jetzt haben wir durchgemacht alles, was Sie wissen müssen
über die ansprechende Seite der Bootstrap.
Haben Sie Fragen zu reaktions Design mit Bootstrap
und wie Sie zu tun, dass zu gehen?
Ja?
>> Publikum: Ist es ähnlich, wenn wir hatten ein eingebettetes Video
und wir an den Steuer wollte Maßstab, in dem die Video was--
die Größe des Video gehen von Laptop zum Telefon.
NEEL MEHTA: Ja.
Mehr oder weniger.
Sie müssten, um das Video zu sagen, nehmen so viel Platz wie es gegeben,
Das ist ein wenig ärgerlich manchmal.
Aber die Grundidee ist dieselbe.
Ein Video, wie jedes andere Objekt in die Seite, wie ein Knopf oder was auch immer,
solange Sie die Verwendung Spalten und die Zeilen,
Sie können es einen geben bestimmte Menge an Speicherplatz.
Und so bekommen es zu ehren wird eine andere Frage, denn wie YouTube
bettet eine bestimmte, bevorzugte Größe.
Aber theoretisch Dest würde es funktionieren.
Cool?
>> Publikum: Ich nehme an, dann, für ein Bild, sind Sie tatsächlich
müssen unterschiedliche Versionen haben, dasselbe Bild in verschiedenen Größen
für Laptop gegenüber iPhone?
Ja Die Frage ist, müssen wir haben Bilder, die ansprechen, als gut.
Und in der Tat, können Sie das tun.
Ich denke, es ist in CSS.
Aber Bootstrap ermöglicht Sie das auch tun.
Sie können ansprechende Bilder.
Sie können Ihre Größe von Bildern je nach der Größe der Seite.
Und es ist eine sehr neue Sache HTML5 ist die neueste Version von HTML,
und CSS3, das neueste Version von CSS, die
werden Sie verschiedene Bilder fordern lassen basierend auf der Bildschirmgröße Sie sind.
Normalerweise ist es gut genug, um nur haben Sie Ihr Bild einfach schrumpfen oder wachsen
egal wie groß es sein muss.
Aber Sie können, wenn Sie wollen um, haben ein 32 · 32
für sehr kleine Bildschirme, und 64 von 64 für einen großen Bildschirm,
und dann servieren diejenigen selektiv.
Du kannst es schaffen.
Es wird von einigen Leuten.
Es ist immer noch ziemlich Schneide.
Aber kurze Antwort, reaktions images-- Bootstrap können den Tag dort zu speichern.
Cool?
>> ZIELGRUPPE: Vielen Dank.
>> NEEL MEHTA: Also lassen Sie uns sprechen wirklich schnell, wie
, dies in Ihre eigene Webseite zu bekommen.
Angenommen, Sie möchten Ihre Eigene Website mit Bootstrap.
Und so sagen wir einfach nur zu Fuß durch sie zusammen.
Nehmen wir an, die Sie gerade machen eine normale HTML-Seite.
Fühlen Sie sich frei, um in folgen was auch immer Ihr Lieblingseditor.
So haben wir nur einige HTML-Seite.
Wir können das tun! DOCTYPE html.
Dies ist auch html, auf unserer Seite.
Nichts Neues.
Wir haben das schon mal gemacht.
Hier haben wir also unseren HTML und Wir können Sachen innen hier setzen.
Wir können unseren Button haben.
Und wie ich schon sagte, dies ist nicht unbedingt zur Arbeit zu gehen.
Warum kann dies nicht funktioniert?
Warum nicht wir bekommen schöne, bunte Taste?
>> ZIELGRUPPE: Weil wir es nicht verlinken auf die Bootstrap-Projekt oder die Datei?
NEEL MEHTA: Ja.
Korrekt.
Weil Bootstrap-- es nur eine andere CSS-Datei.
Es ist eine Reihe von Stilen, werden dem Element angehängt.
Hier haben wir es gesagt, dass wir wollen diese Stile verwenden.
Ich werde Größe, dass sich ein wenig.
Wir haben es gesagt, wir wollen, verwenden diese Stile, aber wir haben nie
gesagt, dass es, was die Stile sind.
Und das ist, was Ihr Frage zuvor.
Das ist die Antwort darauf.
Wir müssen einen Weg finden, um die Stile zu finden und sie in unsere Seite irgendwie.
Und so Bootstrap Willen zeigen uns, wie man das macht.
>> Also, wenn Sie zum Seitenanfang hier, Erste ***.
Es gibt verschiedene Möglichkeiten, um sie herunterzuladen.
Dies kann nicht sinnvoll, notwendig.
Bootstrap-- dies lassen Sie greifen die CSS-Datei selbst.
Und Sie enthalten in Ihrer eigenen Seite.
Source Code ist, wenn Sie wollen auf es selbst zu hacken.
Sie brauchen nicht wirklich.
Sass ist eine Sprache dass kompiliert in CSS.
Betrachten Sie es als eine Präprozessor.
Ähnlich wie PHP ist eine der Präprozessor HTML ist Sass ein Präprozessor für CSS.
Also, wenn Sie es wollen Auf diese Weise können Sie das tun.
>> Der einfachste Weg ist mit einem CDN, oder Content-Delivery-Netzwerk.
Es ist eine Website, die nur serviert eine Kopie der Bootstrap
sehr schnell für Sie, sind in Ihrer eigenen Seite.
Also hier ist ein Beispiel.
Es wird Sie diesen Link Element zu geben.
Ein Verbindungselement teilt Ihrem Browser, nehmen, was Dateien hier abgelegt werden
und es in unserer Web-Seite.
Und in diesem Fall ist es die Bootstrap CSS-Datei.
So dass wir nur zu kopieren, dass die URL oder dass der Text, und wir werden es im Inneren zu werfen
unseres Kopfes.
>> Und ich werde die Seite nicht gestartet dafür, aber Sie können darauf vertrauen, dass das funktioniert.
Der Link erhalten Sie die CSS.
Fügen Sie es in Ihrem Seite und dann wirst du sein,
in der Lage, alle von der Bootstrap verwenden Klassen, die Sie kennen und lieben.
Wenn Sie es lokal halten wollen und haben es auf Ihrem eigenen Dateisystem
anstatt zu gehen das Internet, um es zu packen,
wie, wenn Sie wollen Verwenden Sie die Seite offline,
können Sie die Option Download zu verwenden.
Aber in den meisten Fällen unter Verwendung der CDN ist ziemlich schnell, weil auf diese Weise,
es ist für Sie aktualisiert und gehalten wird.
Sie müssen manuell aktualisiert werden es auch nicht.
Sinn ergeben?
>> So dass eine Menge von Werkzeugen wird diese aufgebaut haben in der Standardeinstellung. In Ihrem Pset7 und Pset8,
Ich glaube, Bootstrap ist automatisch enthalten.
Und in CodePen, für Beispielsweise ist es schon
enthalten, weil ich hinzugefügt Fügen Sie diese Einstellung.
Also, wenn Sie jemals zu spielen, um möchten mit ihm können Sie einfach auf CodePen zu gehen,
oder Ihren ID, oder was auch immer zu gehen.
Und Sie könnten in der Lage zu sein, Zugang Bootstrap gibt,
aber es ist nicht immer gebaut in, die standardmäßig auf die Bahn.
Sinn ergeben?
>> Ja.
nur als recap-- wir wie fünf Minuten vor dem Ende.
Sondern als eine Erinnerung, in neue Web-Seiten, Sie Bootstrap wie diese gehören.
Und sobald Sie haben es aufgenommen, Sie alle fun stuff hier tun.
Sie können weiter gehen, und Sie müssen nur durchgehen kann die CSS, können Sie ein paar coole Designs hinzuzufügen,
Sie können Komponenten wie die Tasten,
und die Tische, und die Liste Einzelteile, die wir bereits erwähnt.
Es gibt ein paar coole JavaScript-Plugins, was möchten Sie vielleicht zu erkunden.
Sie fügen hinzu, ein paar coole Interaktivität in der Webseite.
Wie dieser macht einen modalen Dialog.
>> Also, es gibt einige lustige Sachen Sie Bootstrap tun können.
Also mein Rat an Sie ist, gehen Sie vor und verwenden Sie es in Ihren eigenen Projekten,
folgen Sie den Anweisungen wir gerade tat, wie um es zu bekommen,
und lesen Sie einfach die Bootstrap, weil Sie werden mehr über das, was zu tun zu lernen.
Und so sind wir gegangen sind mehr als heute, wie zu benutzen
die Dokumentation, was das Gebäude Blöcke sind, und wie es ist konzeptionell.
So, jetzt meine Herausforderung an Sie ist, Machen Sie eine Website mit Bootstrap.
Gehen Sie in der Dokumentation.
Und verwenden Sie die Werkzeuge, die wir haben gelernt, so weit, um zu versuchen und analysieren Sie sie
und zu verstehen.
Und verwenden Sie diese Stile und Instrumente Ihnen für Ihre Website zu sehen gibt.
Und es ist nur ein großer, Versuchsprozess.
>> Probieren Sie einen bestimmten Stil.
Funktioniert es?
Enthält nicht ist?
Versuchen Sie, Sachen zusammen.
Schau was passiert.
Es ist sehr viel ein Selbst geführt Entdeckungsprozess.
Aber heute, die wir gelernt haben die Grundlagen dessen, was Bootstrap?
Warum funktioniert es?
Wie funktioniert das?
Wie können wir beginnen mit es, in erster Linie?
Und jetzt, dass Sie über diesen Buckel, die Sie
sollten in der Lage, es zu tun ziemlich reibungslos selbst.
>> Also noch einmal, die ganze Code wir getan haben ist hier.
Also, wenn Sie jemals wollen um eine Bürste auf zu bekommen,
wie, was ist eine schnelle Cheat Blatt für alle Stile?
Sie können hier in dieser Probe zu gehen.
Wir haben einige Beispiel Arten hier.
Wenn Sie das ausprobieren wollen Herausforderungen wieder von sich selbst,
Sie können sie hier versuchen, Besuche die Lösungen.
So Link wird auf den Folien, enthalten die
wird an Sie gesendet werden natürlich.
Aber es ist auch hier oben.
Sie können das Video, Pause, wenn Sie wollen.
Alle Informationen, die Sie brauchen, ist gehen, um hier zu sein, auf dieser Website.
Also, wenn jemand Fragen hat, können wir nehmen sie in den nächsten paar Minuten.
Ansonsten danke euch allen Dank für das Aufpassen.