Tip:
Highlight text to annotate it
X
>> Неелі MEHTA: Так прывітанне кожны, хто назірае тут,
ці глядзець онлайн, або выдалена.
Мяне клічуць Ніл, гэта CS50.
І сённяшні семінар з'яўляецца Спагадны Вэб-дызайн з Bootstrap.
Гэта прадмет, які гэта вельмі блізка да сэрца.
Спадзяюся, гэта будзе блізка да сэрца
а да канца сённяшняга семінара.
Так Bootstrap.
Як многія з вас зрабілі нічога выгляд вэб-распрацоўкі раней?
Добрае колькасць?
Няшмат.
>> Так Bootstrap гэта свет самых папулярныя, пярэдні канец рамкі.
Ён выкарыстоўваецца по-- я выбраў пара выпадковых websites--
Lyft, Newsweek, і Vogue.
Ён выкарыстоўваецца ў шэрагу вэб-сайтаў.
Гэта аснова вэб-дызайн, што дазволіць вам зрабіць вашыя вэб-сайты
як прыгожа і спагадным.
І я пайду над імі два паняцці тут.
Прыгожая.
Так у вас нармальная сайт на левы, які зроблены толькі HTML.
Вы даведаліся ў класе HTML і ў раздзеле у даўжыню.
Bootstrap гэта спосаб зрабіць Вашы сайты прыгожа.
Вы можаце ўзяць тое, што на левы бок вашага экрана
і ператварыць яго ў тое, што на правая бок экрана з вельмі,
вельмі, вельмі мала код.
>> Вы атрымліваеце сінюю кнопку добры, вы атрымліваеце фантазіі, закругленыя краю на экране,
Вы атрымліваеце выгляд спісу, вы атрымаеце карт, і гэтак далей з вельмі невялікім кода.
Там няма на самай справе няма, што ВУС Вы павінны напісаць самі.
Так Bootstrap дазваляе ёсць гэтыя папярэдне пабудаваны CSS
кампаненты можна пакласці ўнутры вэб-старонкі
зрабіць яго прыгожым, ня вельмі шмат працы па сваім меркаванні.
Гэта сапраўды пачатковай загрузкі, адпраўной кропкай,
для прыгод вэб-распрацоўкі.
І таму, калі вы проста насмешлівы стварыць сайт,
гэта вельмі добрае месца, каб пачаць.
Вы можаце атрымаць прыгожы сайт з вельмі, вельмі мала працы.
І на самай справе, мы збіраемся зрабіць гэта самі
у ходзе як пяць minutes-- на працягу 10 хвілін.
Так што гэта даволі лёгка зрабіць некаторыя вялікія вэб-сайтаў.
Дык вось першая частка.
>> Другі прайшоў пробы рэагаваць.
Людзі, у цяперашні час, не проста доступ да сеткі на сваіх наўтбуках.
На самай справе, як 2014, усё больш людзей доступ да сеткі праз мабільныя прылады,
як тэлефоны, або таблеткі, або паслугі, або так на чым вэб-сайтаў.
І сайты традыцыйна распрацаваны з ноўтбукаў або настольных ПК
на ўвазе.
І так вэб-сайты часта ня вельмі добра падыходзіць для вашага тэлефона.
Калі вы калі-небудзь наведвалі harvard.edu на вашым тэлефоне,
гэта свайго роду раздражняе вопыт, ці не так?
Гэта таму, што гэта не рэагаваць.
Мы спрабуем, каб сайты, якія з'яўляюцца аператыўнымі,
якія адказваюць памераў экрана людзей.
>> Так што, калі гэта тэлефон, гэта збіраюся пайсці па тэлефоне.
Калі гэта таблеткі, гэта збіраюся ісці на планшэце.
Ён рэгулюе, каб адпавядаць экран, які выкарыстоўваецца.
І так Bootstrap таксама дае некаторыя вельмі, вельмі карысныя ўтыліты для гэтага.
І мы збіраемся, каб абмеркаваць, што добра.
Такім чынам, яшчэ раз, ёсць дзве часткі Bootstrap-- прыгожы і адказнасць.
Мы будзем казаць пра іх.
Па-першае, прыгожа.
А потым рэагаваць.
>> Так увесь код, што мы пагаворым аб раз сёння
мы збіраемся мець шмат прыкладаў, шмат праблем, і так on-- яго
усё жыве на гэтым сайце тут.
Гэты слайд тое, што мы разаслалі.
Так што, калі вы тут, вы можаце адчуваць сябе бясплатна і не трэба пісаць, што ўніз.
І калі вы глядзіце выдалена, адчуваць бясплатна ажыццявіць гэта на вашым кампутары
а таксама.
Вы, верагодна, трэба на працягу курс гэтага семінара.
>> Такім чынам, мы збіраемся выкарыстоўваць Сайт называецца CodePen,
якая з'яўляецца сумесным кадаваньне навакольнае асяроддзе, на працягу гэтага семінара.
І CodePen-- і я паказаць вам, тут рэальны fast--
гэта дазваляе пісаць HTML сумесна.
Я магу напісаць гэта, я магу адправіць яго на хлопцы, вы, хлопцы, можаце рэдагаваць яго.
Нават калі вы дыстанцыйна, то вы можаце атрымаць доступ да яго такім чынам.
Вы можаце ўвесці код HTML на верх і ён будзе аўтаматычна
быць ператвараюць у Вэб-старонка ў ніжняй часткі.
Так што гэта для вас спосабам хутка апрабаваць код
без неабходнасці рабіць якія-небудзь рэчы на IDE, ці ваш уласны вэб-сайт,
ці нешта.
>> Так што наперад і падцягнуць гэта сайт, калі вы дыстанцыйнае
або калі вы знаходзіцеся тут, асабліва калі вы пульта дыстанцыйнага кіравання.
is.gd/cs50boostrap.
Не, не каўпачкі падкрэслення, няма нічога.
Так што тыя з вас, хто тут, проста дайце мне вялікі палец
калі вы пацягнулі да гэтага вэб-старонкі.
Добра?
>> АЎДЫТОРЫЯ: Так.
>> Неелі MEHTA: Такім чынам, мы атрымаем да таго, што ўсяго за секунду.
Такім чынам, спачатку мы збіраемся дабрацца, як Вы робіце вашы сайты прыгожая?
Мы збіраемся, каб даведацца, як узяць сумна, стары HTML, як я паказаў вам раней,
і ператварыць гэта ў сапраўды добрыя кампаненты,
як прыемных віджэтаў, прыгожы, каляровы Кнопкі і пазнакі, і сталы,
і ўсё, з дапамогай Bootstrap.
Так што, калі б мы ўсе маглі перайсці да CodePen, што вы проста пад'ехаў.
Гэта павінна выглядаць трохі, як гэта.
Гэта выглядае, як гэта для ўсіх?
>> АЎДЫТОРЫЯ: Так.
>> Неелі MEHTA: Калі вы дыстанцыйнае, гэта як павінен выглядаць гэты, як добра.
Калі няма, я пакажу вам, як толькі вы можаце атрымаць яго выглядаць так
ў будучыні частка відэа.
Дык вось мы напісалі вельмі просты HTML і
як выгляд у цябе выкарыстоўвае ў сваім класе.
Гэта даволі просты.
Ніякіх празмернасцяў.
І ў нас ёсць некаторыя рэчы.
Мы распрацавалі вельмі, вельмі просты запуск
патэлефанаваць Yalp! з якой вы можаце знайсці рэстараны ў галіне,
і знайсці водгукі і напрамкі на ўсе з іх.
Гэта вельмі добрая канцэпцыя.
Гэта ніколі не было зроблена раней.
Гэта вельмі унікальнае імя, таксама.
>> Такім чынам, што мы збіраемся, каб паспрабаваць зрабіць, дапамагчы ўладальніку
з Yalp! зрабіць яго вэб-сайт выглядаюць сапраўды, сапраўды выдатна.
Такім чынам, каб пачаць з таго, што ўладальнік Yalp! зрабіў крыху пошуку
скрынка і маленькая кнопка, а затым, магчыма, трохі
вылучанай вобласці для выдзелены рэстаран, а затым
спіс іншых рэстаранаў якія знаходзяцца ў вобласці.
Такім чынам, мы можам проста прайсці праз HTML-код вельмі хутка.
Наколькі камфортна вы, хлопцы, з HTML?
Мы зрабілі трохі раздзел, а таксама ў класе.
Годны?
>> Гэтак жа, як паўтор, HTML-ўсё пра тое,
тэгі і элементы, якія кажуць Кампутар, як выкласці вэб-старонку.
Так што гэта h1 here-- пачаць h1, Сардэчна запрашаем каб Yalp!, канец h1-- паведамляе кампутара,
намаляваць вялікі загаловак гэта кажа, Сардэчна запрашаем у Yalp!
ўнутры ёсць.
У нас таксама ёсць формы.
Мы можам ўваходы, як гэта, тэкставыя ўваходы, які будзе аказваць у тэкставых палях
Вы пішаце ст.
У вас таксама ёсць кнопкі.
Вы атрымаеце добры, інтэрактыўныя кнопкі.
Гэта нічога не зрабіць прама цяпер, але вы атрымаеце кнопку.
Вы можаце мець дзівы, або падзельнікі, у разбіць вашу старонку ў некалькі груп.
>> Вы можаце мець параграфы, ў вас ёсць кнопкі.
Калі ў вас ёсць пункты, затым ў вас ёсць неўпарадкаваных спісаў, UL,
і спісы ўнутры, ці што.
Такім чынам, гэта вельмі просты будаўнічыя блокі вэб-старонкі.
І на самай справе, даволі шмат кожны вэб-сайт вы бачыце
збіраецца быць пабудаваны з дапамогай гэтых жа інструментаў.
Вядома, не ўсе яны шукаць гэтую дрэнна, таму што мы
збіраецца ажывіць яго няшмат.
Так што давайце гэтую сумную старую HTML і пачатак ператвараючы яго ў прыгожы сайт
што мы толькі што бачылі пару хвілін таму.
>> Такім чынам, давайце пачнем з вельмі просты.
Такім чынам, мы маем гэтую кнопку тут.
У Bootstrap, як мы бачылі, мы можам ёсць добры, прыгожы, сіні кнопку.
І гэта робіцца не робячы карыстацкі CSS.
Там няма карыстацкага CSS тут.
Гэта робіцца шляхам дадання класаў да вашых HTML элементаў.
Калі вы ўжо спрабавалі класы або hrefs, або якара, або тып = "тэкст" для inputs--
HTML элементы могуць мець гэтыя атрыбуты.
Яны могуць мець дадатковую інфармацыю што вы маглі б ім даць.
>> І так, у гэтым выпадку, класы атрыбут.
Такім чынам, вы б напісаць, клас кнопку = што-то ўнутры радкоў.
І, што атрыбут будзе расказаць кампутар, гэта не які-небудзь стары кнопку.
Гэта кнопка, якая знаходзіцца ў гэты клас кнопак.
І так Bootstrap, калі вы даеце яму пэўны стыль на элемент,
яна прыцягне яго пэўным чынам.
Такім чынам, я пішу "БТН БТН-асноўны.
BTN быць абрэвіятура для кнопкі.
Вы заўважыце, што ў цяперашні час мой пачварны кнопку павярнуўся
у добры, прыгожы, сіні кнопкі.
Гэта выглядае вельмі прыемна, калі мы пстрыкніце яго.
>> І так, што адбываецца ў нас ёсць клас BTN і БТН-клас асноўнай
на нашым элемента.
І Bootstrap пойдзе і сказаць, добра, я ведаю, што ёсць гэтыя два класы.
Любы элемент, які мае гэтыя два класы павінны быць зроблены як гэта.
Так што гэта ядро, як вы прыкладзеце стылі на элементы ў Bootstrap.
Вы проста прымацаваць класы для іх і гэта будзе важыць яго, як ён лічыць патрэбным.
Дык вось яшчэ адзін прыклад.
У ўводу, можна дадаць клас = "форма кантролю".
І я пакажу толькі, дзе вы можа высветліць, якія класы
Даступныя кожнага віду элемента.
Але клас, які мы толькі што Дададзена мае прыемны, закругленыя куты,
гэта мае прыемны водступы, ён мае добры, блакітнае свячэнне да яго.
>> Мы таксама можам пайсці ў гэтым выглядзе.
І клас = "Форма-радны", які зробіць наша форма, як вы можаце сабе ўявіць, рядный.
Так гэта выглядае крыху больш як тое, што мы мелі да ўжо.
Таму, перш чым перайсці да стылю астатняй старонка, якія-небудзь пытанні аб тым, што мы
зрабіў?
Мы проста прымацаваныя класы у нашых розных элементаў.
І я пакажу вам пазней, як вы можаце высветліць, якія класы даступныя.
Мы надаём класы, ёсць пэўныя стылі.
І што кажа браўзэру як макет старонкі з дапамогай
Прадугледжаныя стылі Bootstrap ст.
Любыя пытанні ад аўдыторыі?
>> Добра так далёка?
Прахладны.
Шмат праблем з пачатковай загрузкі проста
ведаючы, што кампаненты даступныя і як іх выкарыстоўваць.
І гэта ўсё даведаліся з вопытам, а таксама
праз чытанне дакументацыі, якія мы будзем казаць пра ў бліжэйшы час.
Такім чынам, мы маем гэты DIV.
Гэта проста сумна, старая рэч.
Мы хочам падкрэсліць, гэта як-то.
Такім чынам, у Bootstrap, ёсць шмат кампанентаў, даступных.
І гэта getbootstrap.com.
Гэта вельмі карысная спасылка.
Ён змяшчае рэчы like-- вось як вы робіце кнопку.
І вы можаце зрабіць панэль навігацыі, вы можаце этыкеткі, вы можаце пераходзіць бараў,
Вы можаце зрабіць спіс груп.
У прынцыпе, гэта ўсё віды з вас можа ўбачыць вэб-старонку.
>> Вось той, які мы паспрабуем цяпер.
Гэта называецца панэль.
Калі вы калі-небудзь выкарыстоўваць Google Цяпер яны маюць карты.
Або любы Android-прылада мае карты.
Яны маюць маленькія белыя скрынкі што ёсць матэрыял ўнутры яго.
І таму мы збіраемся, каб паспрабаваць зрабіць што мы самі тут, выкарыстоўваючы самае
называецца панэль.
Так што, калі мы надаём клас = "Панэль Панэль па змаўчанні ", каб нашага знешняга DIV,
Затым мы надаём клас Div = - давайце проста праверыць гэтую дакументацыю.
DIV клас = "Панэль рубрыцы" і затым DIV клас = "панэлі цела".
Зноў жа, не турбавацца аб запамінання гэтага кода.
Яна будзе даступная ў Інтэрнэце.
>> Такім чынам, мы зрабілі гэта, і зараз наш сумна, старыя DIV ператварыўся ў гэтай мілай, мала-карты.
Гэта мае прыемны водступы, яго мае межаў, ён вылучаецца
ад астатняй частцы старонкі, які з'яўляецца даволі халаднавата.
Так што давайце ісці і мяняць Атрымаць Кнопка напрамкі выглядаць прыгожа.
Хто ў аўдыторыі хоча сказаць мне, што я магу зрабіць, каб кнопкі
каб зрабіць яго добра выглядаць, выкарыстоўваючы Bootstrap?
Да?
>> АЎДЫТОРЫЯ: Мы маглі б дадаць клас.
І мы маглі б зрабіць клас = "БТН БТН-асноўны".
Неелі MEHTA: Так.
Там куча іншы Колеру даступныя для buttons--
або што-небудзь, калі на тое пайшло.
Мы можам зрабіць БТН-небяспеку і зрабіць яго чырвоным.
Там мы ідзем.
Мы можам зрабіць БТН-поспех, каб зрабіць яго зялёным.
Мы можам зрабіць БТН-info-- ёсць куча рэчаў, якія даступныя для вас.
Так у мяне ёсць трохі выклік для вас цяпер.
Так што яшчэ адна рэч, што я пакінуў ня-стылі.
Гэты ТОП Рэстараны.
>> І мы хочам, каб выкарыстоўваць рэч называецца спіс групы, каб распрацаваць яе.
Так што мой выклік вас перайсці да getbootstrap.com--
Я буду цягнуць яго тут.
getboostrap.com.
Перайсці да getbootstrap.com, знайсці раздзел, дзе яны пераходзяць спіс груп.
І вы будзеце бачым тут прыкладам і правільныя класы
што вы можаце выкарыстоўваць, каб зрабіць вашу Спісы ў гэтых прыемных спіс груп.
Яны распрацаваны прыклады прыкладаў кода, тое, што
код выкарыстоўваць, якія HTML код вы карыстаецеся, і што гэта выводзіць.
>> Так што мой выклік you-- перайсці на getbootstrap.com,
Ці вы тут або ў сябе дома, і каб паспрабаваць дадаць стылі да гэтага вул
каб зрабіць яго прыемна глядзець.
І выкарыстоўваць стыль спісу групы.
Вы хочаце ўзяць пару хвілін, і пошук дакументацыі,
паспрабаваць гэта самі?
Таму што, як вы робіце вэб-распрацоўкі, Вы зразумееце, шмат вашай працы
будзе чытаць гэтая дакументацыя.
Так што я думаю, што гэта добра, каб азнаёміцца з тым, як прачытаць дакументацыю,
як высветліць, што, дзе, якой код прыкладаў вы можаце выкарыстоўваць,
тое, што вы можаце выкарыстоўваць.
>> Такім чынам, яшчэ раз, getbootstrap.com, перайдзіце на ўкладку Кампаненты,
а затым пракруціць ўніз да спісу груп.
І вы ўбачыце, прыклады кода, якія Вы можаце выкарыстоўваць, каб зрабіць ваш HTML адпавядаць, што.
Так што пару хвілін і паспрабаваць даследаваць яго самастойна,
Ці вы тут або ў сябе дома.
Калі вы знаходзіцеся дома, паўза відэа, мабыць, і паспрабаваць яго.
Калі вы тут, калі вы ідзяце ў наш website-- калі вы абновіце старонку,
Вы ўбачыце, што гэта там.
Гэта той жа код проста даданне новых стыляў прама там.
Так заняць некалькі хвілін.
Дазвольце мне ведаць, калі вы адчуваеце сябе добра пра гэта ці калі вы цалкам страціў.
Гук добры?
Прахладны.
Хуткі ў бок для тых з вас, дома, у той час як мы чакалі,
калі вы ідзяце на сайт GitHub што я стаўлю на пару слайдаў таму,
да пачатку відэа, У мяне ёсць РЭПО GitHub рэпазітары,
для гэтай размовы.
Усе гэтыя прыклады кода, якія мы будзем казаць аб захоўваюцца тут.
Так што, калі вы ідзяце, каб кінуць выклік-1.html, гэта увесь код, што мы маем цяпер
на нашым CodePen.
Такім чынам, вы можаце проста ісці наперад і скапіруйце гэта, і ўставіць яго ў свой уласны CodePen.
І такім чынам, вы можаце ісці ў нагу з тым, што мы робім тут.
Так што гэтую старонку адкрытай, а таксама мы прайсці праз астатняй часткі семінара.
Зноў жа, вы хочаце, каб яна выглядала так, як вы см ўніз у ніжняй частцы экрана
ёсць.
Добры настрой?
Цвёрдае рэчыва.
Будзем чакаць усіх астатніх, каб скончыць з тым, што яны робяць.
>> Да?
>> АЎДЫТОРЫЯ: Выкажам здагадку, што я хацеў выкарыстоўваць Bootstrap ў home--
Неелі MEHTA: Так.
АЎДЫТОРЫЯ: Я бачу, на сайце, Прыступаючы старонку.
Яны даюць мне варыянты Bootstrap, Зыходны код, або Сасс.
Якія з іх я хачу?
>> Неелі MEHTA: Так.
Такім чынам, пытанне ў тым, як вы атрымліваеце пачалі выкарыстоўваць Bootstrap ад саміх сябе?
Гэта проста здараецца чароўна працаваць тут.
Так што, калі ў нас ёсць час на канец семінара,
Я пакажу вам, як вы можаце атрымаць яго на свой уласны вэб-старонкі.
Як тут, я на самой справе пакласці ў некаторыя налады, якія
будзе аўтаматычна загружаны, але я
паказаць вам, каб зрабіць яго з драпіны на вашых уласных вэб-старонак.
>> АЎДЫТОРЫЯ: Дзякуй.
>> Неелі MEHTA: Так.
Добры пытанне.
Добры настрой?
Добры настрой?
Прахладны.
Так што хто хоча, каб сказаць мне, як яны зрабілі гэтая рэч выглядаць прыгожа і Boostrappy?
Што першы клас мы дадамо да вул?
АЎДЫТОРЫЯ: клас = "спіс-група".
Неелі MEHTA: Так. Спіс-група.
І тады тое, што мы надаём ЛІС?
Нехта яшчэ?
АЎДЫТОРЫЯ: А потым, пасля што клас = "спіс-групу пункт".
>> Неелі MEHTA: Так.
>> АЎДЫТОРЫЯ: І гэта тое ж самае для наступнага.
>> Неелі MEHTA: клас Li = "спіс-групу пункт".
Там вы ідзяце.
У нас ёсць добры спіс групы, гэтак жа, як мы чакалі.
Так што вы ідзяце.
Праз 10 хвілін, мы зрабілі гэта сумна, стары Yalp! старонка
выглядаць прыгожа і прафесійна.
І гэта толькі пачатак.
Так што цяпер вы адчуваеце добра, што пра, давайце
проста ісці наперад і казаць пра Яшчэ пара кампаненты, якія
можа спатрэбіцца, як вы перайсці на працягу вашага прыгоды.
>> Вядома, ёсць шмат з іх тут.
І зараз, калі вы даведаліся, як зрабіць спіс гуртоў,
Вы можаце ў значнай ступені вучаць самі, як зрабіць любы з іх.
Але, вядома, давайце проста паспрабаваць і зрабіць пару больш сябе,
толькі так вы атрымаеце пачуццё для як вы маглі б выкарыстоўваць іх.
Я проста збіраюся пайсці гэтаму прыкладу тут.
Зноў жа, код, які я толькі што ўставілі тут можна прама тут.
Так што не саромейцеся, каб выцягнуць яго.
>> Такім чынам, мы ўжо прайшлі праз пара з гэтых прыкладаў.
Такім чынам, мы маем кнопкі, якія мы ўжо бачылі, як гэта зрабіць.
Мы можам зрабіць кнопкі больш.
Па кнопка class-- яна ідзе, BTN BTN-LG і БТН-змаўчанню робіць яго белым.
Такім чынам, гэта робіць нашу кнопку больш чым магло б быць.
Гэта можа спатрэбіцца, калі ў вас ёсць Вялікія кнопкі або нешта ўявіць.
Мы бачылі прыклад спіс групы, мы бачылі прыклад формы.
>> Адзін вельмі важным з'яўляецца тое, абразкі.
І іконы спосаб для вас, каб дадаць цікавыя рэчы, як праверкі праверкі
знакі, або плюсы, ці сябар іконы, іконы ці перазапуск,
або што-то на свой вэб-прыкладанні.
Такім чынам, яшчэ раз, калі мы ў тут, Кампаненты, glyphicons,
з'яўляюцца іконы, даступныя для Bootstrap.
Там гэта вычарпальны Спіс усіх тых, тут.
Так толькі ў якасці прыкладу, давайце паспрабуем дадаць адзін.
>> Так як Facebook, мы да спробы мець кнопку Дадаць аднаго.
Давайце спачатку дадаць некаторы тып.
клас кнопку = "БТН БТН-поспеху".
І мы ідзем.
Давайце дадамо значок тут.
Што значок, Вы лічыце, магчыма, мае сэнс паставіць тут?
Вы, напэўна, бачылі на некаторыя вэб-старонкі або любы іншы,
але тое, што прыклад значок, можа ісці добра ўнутры гэтай кнопкі?
Не саромейцеся, каб праглядзець гэты пункт гледжання, калі вам патрэбен любы натхненне.
Там вельмі шмат карыснай тыя можна азнаёміцца тут.
Да?
>> АЎДЫТОРЫЯ: Можа быць, glyphicon карыстальнік аднаго?
Неелі MEHTA: ОК.
Вось гэты.
Гэта вельмі добра.
Так.
На Facebook, я думаю, што гэта будзе выглядаць трохі як, што.
Дык вось, як мы ідзем аб даданне абразкоў на нашых старонках.
Мы проста ёсць span-- прамежак з'яўляецца нейтральны кантэйнер для чагосьці.
DIV кантэйнер для чагосьці, пралёт яшчэ адзін кантэйнер.
дзівы ёсць парывы радкоў вакол іх, пралёты не робяць.
Так што розныя спосабы маючы агульныя кантэйнеры.
Як гэта не мае сэнсу, каб пакласці яго ўнутры абзаца або што-небудзь.
Мы павінны паставіць яго ўнутры нешта, хоць,
такім чынам, мы проста паставіць ўнутр пралёта.
Так чысціні клас = glyphicon glyphicon карыстальнік "побач чысціні.
А зараз у нас ёсць значок ўнутры кнопкі.
>> Так што не глядзіце цалкам у адрозненне ад што вы можаце ўбачыць на facebook.com.
І так прыемна, што яны могуць на самай справе быць размешчаны ў любым месцы вы хочаце.
У вашых бараў загалоўкаў, у спіс вашых груп.
Што заўгодна.
Гэта не павінны быць ўнутры кнопкі.
Так як, напрыклад, я магу паклаў той жа клас тут.
"glyphicon glyphicon карыстальнік".
І аказваецца такой жа.
Такім чынам, гэтыя icons-- вы можаце выкарыстоўваць дыяпазон клас = "glyphicon glyphicon-то, што".
І, што дазволіць вам дадаць абразкі, дзе вы хочаце.
І іконы з'яўляюцца вельмі важным частка стварэння сайта погляд
прафесійны і добра зроблена.
Так што не перашчыруйце, але гэта часта добрая рэч, каб ведаць.
>> Панэлі зноў.
Я проста зрабіць гэта зноў, як Нагадаем таму што яны накшталт удзел.
Вы заўважыце, што ў ператвараючы свой звычайны HTML
Сайт у Bootstrap-afied Сайт, вы будзеце мець
каб дадаць дадатковую структуру вэб-сайта.
Напрыклад, у нас ёсць дадатковая ДИВС тут толькі таму, што тыя,
неабходныя, каб зрабіць панэль.
Так што майце гэта на ўвазе, што Вы будзеце мець дадатковы структуру.
Такім чынам, "Панэль Панэль-змаўчанні".
Можа быць, гэта панэль загалоўка.
Я думаю, што гэта панэль-загаловак.
Так.
Там мы ідзем.
Так, зноў жа, ёсць наша панэль.
>> Яшчэ адна рэч, якую мы яшчэ не ахопліваюць, табліцы.
Сталы, па змаўчанні погляд роду выродлівыя.
Як гэта.
Але табліцы, вядома, вельмі важная частка
што вы будзеце рабіць у вэб-распрацоўцы.
У Pset7, напрыклад, CS50 Фінансы, якія выйдуць у бліжэйшы час,
Вы будзеце выкарыстоўваць шмат табліц.
І шмат вэб-распрацоўніка выкарыстоўваць шмат табліц для адлюстравання інфармацыі,
як акцыі, або ацэнкі, ці што заўгодна.
>> Так кладка табліцы на самай справе вельмі проста.
Вы дадаеце клас табліцы для вашага стала.
І, адважуся сказаць, гэта выглядае даволі добра.
Вы можаце зрабіць дадатковыя рэчы, як "настольны палоску".
І вы ўбачыце вынікі тут.
Вы можаце зрабіць настольны мяжуе.
Там вельмі шмат варыянтаў, вы можаце.
Але ў прынцыпе, дадаўшы стол, клас табліцы,
зробіць вашы табліцы выглядаюць даволі прыемна.
Дык вось кароткі выклад некаторыя з найбольш важных стыляў
і кампаненты вы будзеце трэба выкарыстоўваць для Bootstrap.
Так што я думаю, што абкручванні да нашай прыгожай часткі.
Любыя пытанні прама зараз пра тое, як каб зрабіць вашыя сайты прыгожая?
Як вы можаце выкарыстоўваць іх кампаненты ў вашу карысць?
Добры настрой?
Да?
АЎДЫТОРЫЯ: Можа быць, гэта дурны пытанне,
але вы можаце выкарыстоўваць Bootstrap ў Вікіпедыі?
Калі вы рэдагуеце старонку ў Вікіпедыі?
Неелі MEHTA: Так.
Такім чынам, пытанне было, я рэдагаванні старонкі ў Вікіпедыі,
я магу ўключаць стылі Bootstrap там?
>> АЎДЫТОРЫЯ: Так.
>> Неелі MEHTA: І так бутстрап у асноўным вялікі ліст CSS стыль.
Ліст CSS стыль проста кажа, кожны раз, калі У мяне ёсць гэты клас, далучыць гэтыя стылі.
Так аркушы стыляў CSS для пачатковай загрузкі будзе нешта накшталт .btn,
клас кнопку, атрымаеце нібы закруглены кут мяжы або любы іншы.
Так у асноўным, ініцыялізаваць яе проста куча класаў і кучу стыляў
паказана для гэтых класаў.
Так што, пакуль у вас ёсць, што CSS, гэты спіс правілаў ў вашай старонкі,
Вы атрымаеце стыль Bootstrap.
Гэта, вядома, залежыць ад маючы стылі Bootstrap ў вашай старонцы
каб пачаць з.
>> І так у Вікіпедыі, Вы, верагодна, не мог
зрабіць, таму што Wikipedia ня Bootstrap ў ім.
Але калі яна ёсць Bootstrap, Вы, верагодна, можа зрабіць гэта.
І калі вы хочаце, вы маглі б ўключаюць у сябе, але якія маглі б
зламаць існуючы макет старонкі.
Але вельмі добрае пытанне.
Вы можаце выкарыстоўваць Bootstrap там, дзе ён уваходзіць,
але гэта не ўбудаваны па змаўчанні.
>> АЎДЫТОРЫЯ: Дзякуй.
>> Неелі MEHTA: Так.
Ёсць яшчэ пытанні?
Так.
Ці так вы тут або ў сябе дома, проста памятаеце, getboostrap.com-- зноў,
getboostrap.com-- з'яўляецца вашым сябрам.
Кожны раз, калі вы карыстаецеся Bootstrap, гэта дасць вам
Інструкцыі аб тым, як атрымаць пачаў, як выкарыстоўваць кампаненты.
Там нейкая халаднавата JavaScript Убудовы, што мы не будзем ісці сюды,
але яны, варта праверыць, як добра.
Так што гэта ваш сябар.
Важна толькі, каб атрымаць выкарыстоўваецца, як выкарыстоўваць гэта.
>> Такім чынам, давайце прама крыху пра робіць адказ вэб-сайтаў.
Такім чынам, як я ўжо казаў, людзі выкарыстоўвалі іх наўтбукі, яны выкарыстоўваюць свае тэлефоны.
І, як вы маглі б сабе ўявіць, што гэта вельмі розныя памер экрана, чым гэта.
І гэтак жа, сайт што выглядае добра на маім тэлефоне
не збіраецца, каб добра выглядаць, абавязкова, на кампутары.
Так што вы павінны зрабіць, гэта зрабіць ваш сайт адаптавацца.
Ён мае, каб адаптавацца да розных памеры экрана, што гэта на.
>> Ён павінен сказаць, я ведаю, што я на кампутар, вялікі ноўтбук, я павінен пашырацца.
Я ведаю, што па тэлефоне, я павінен скарачацца.
І так Bootstrap прадастаўляе некаторыя вельмі, вельмі карысныя інструменты, каб зрабіць гэта.
Так Bootstrap давайце вы перапынак сайт на 12 слупкоў.
Вы можаце зрабіць радкоў і 12 слупкоў ёсць.
І вы можаце падзяліць тыя, як вы хочаце.
Вы можаце мець адзін, вялікі рэч, што 12 калонкі шырынёй.
Вы можаце мець дзве рэчы якія з'яўляюцца шэсць кожны.
Вы можаце зрабіць адну рэч, што чатырох, той, які два ці адзін, што гэта шэсць.
Вы можаце зрабіць тры, тры, тры, тры.
Вы можаце рабіць усё, што прабоя, што вы хочаце.
>> Таму, магчыма, ваш вэб-старонка павінна мець Левая калонка гэта адна трэць шырыні.
Так што было б чатыры калонкі Шырокі і астатняя частка старонкі
будзе восем калон у шырыню.
Так што гэта прыклад.
Давайце падцягнуць яшчэ адзін прыклад.
>> АЎДЫТОРЫЯ: ці заўсёды гэта павінны быць яшчэ падзяліць?
Можа быць сем, пяць раскол?
>> Неелі MEHTA: Так.
Гэта можа быць сем, пяць.
Так.
Пакуль гэта дадае да 12, гэта нармальна.
Так давайце вернемся сюды.
Зноў жа, код, які тут таксама даступныя тут,
пад гнуткай. Напрыклад,
Так што я проста пад'ехаў некаторыя Прыклад рэагаваць код тут.
Такім чынам, вы зрабіць гэта з дапамогай што называецца шэраг.
Шэраг проста іншы клас.
Гэта яшчэ адзін стыль, які вы дадаць на ваш ДИВС, каб зрабіць іх уласныя кампаненты.
>> Дык ты кажаш, DIV клас = "радок", каб зрабіць шэраг,
каб даць сабе 12 слупкоў прасторы.
І тады вы паклалі слупкі ўнутры, што.
Дык вось, мы Col-XS-6.
Не турбуйцеся аб хз.
Мы будзем казаць аб ў сек.
Але ў прынцыпе, у нас ёсць адзін рэч, якая шэсць у шырыню.
Мы называем гэта засталося.
І так вось левая скрынка тут.
У нас ёсць адна рэч, якая шэсць з 12 калон у шырыню.
І, што адзін знаходзіцца справа.
>> а проста дае марак Ваш DIV запоўніць яго шэрым.
Так што проста так мы можам бачыць, што яны розныя.
І таму гэты першы прыклад.
Гэта вельмі просты прыклад таго, як вы будзе выкарыстоўваць свае радкі і слупкі тут.
Вы вызначаеце радок, выкарыстоўваючы клас = "радок".
І тады вы клас = "Col-XS-6" зрабіць палова, "Col-XS-6", каб зрабіць іншую палову.
Вось больш складаны прыклад.
Давайце паглядзім на малюсенькія, Велізарны, астатнія адным.
>> Мы можам зрабіць Малюсенькія дзве калонкі шырынёй, мы можам зрабіць Вялізныя шэсць калонак шырыню,
А астатнія чатыры калонкі шырынёй.
Гэта дадае да 12 гадоў.
І таму гэтыя ў канчатковым выніку ахопліваюць шырыня старонкі.
Зноў жа, у нас ёсць шэраг звонку.
Тады ў нас ёсць DIV CLASS = "Col-XS-2" і затым 6, а затым 4.
І, што забяспечыць структура для нас.
І таму мы можам пакласці ўсе чорт вазьмі, мы хочам тут ўнутры.
Замест таго, каб Малюсенькі, мы можам паставіць кнопку.
клас кнопку = "БТН БТН-асноўны".
І так заўважыце, што нашы кнопку не займае ўсю шырыню,
але па меншай меры гэта абмежавана у тым, што шмат прасторы.
>> Так што ўсё добра.
Так што цяпер мы можам разбіць наш вэб старонка на кавалкі, шырыня мудрым.
Мы можам сказаць, што мы хочам мець левую слупок і правы слупок, і гэтак далей.
Але мы не сышлі як вы зробіце гэта рэагаваць.
І так Bootstrap давайце рабіць, што добра.
Яна мае наступныя рэчы, званыя кантрольныя кропкі.
Так што ёсць спосаб даведацца, ці ёсць Вы знаходзіцеся на наўтбук, вы на таблеткі,
Вы знаходзіцеся на тэлефон гарызанталі, ці вы па тэлефоне вертыкалі.
Ён ведае памер экрана.
І гэта разбівае на чатыры categories-- вялікі або LG, які з'яўляецца ноўтбукі, як правіла ,.
MD або сераду, якая з'яўляецца таблеткі.
см, маленькі.
Або хз, асабліва малога.
І таму, калі вы паказваеце калонка, вы кажаце,
яна павінна быць слупкі шырынёй шэсць на дадатковай невялікага прылады.
Вось чаму мы зрабілі Col-XS-6.
Мы кажам, што трэба быць шэсць з 12 калон шырокіх
на дадатковай невялікага прылады.
І калі гэта нічога больш, мы проста па змаўчанні выкарыстоўваць дадатковы невялікі памер.
Калі гэта нешта больш, чым Вельмі дробны, гэта будзе шэсць у шырыню.
І такім чынам мы можам выкарыстоўваць гэта зрабіць з нашых калонак
ўзяць розная колькасць калоны ў залежнасці ад памеру экрана.
Давайце вернемся да гэтай рэагаваць змяненнем памераў.
Такім чынам, мы маем нашы калонкі.
І гэта кажа, "слупок-LG-6 кол-XS-12".
Таму, улічваючы тое, што вы ведаеце, да гэтага часу, што вы
думаю, будзе адбываюцца на вялікім экране?
Ну, гэта накшталт Дадзены спосаб, але тое, што робяць
Вы думаеце, гэта будзе выглядаць як на вялікім экране?
І чаму гэта?
>> АЎДЫТОРЫЯ: Ці праўда, што на вялікім экране, гэта
зойме толькі частка поўнага прасторы?
Як палове гэтага, я думаю ,?
>> Неелі MEHTA: Так.
>> АЎДЫТОРЫЯ: А менш экранам, гэта будзе
каб заняць увесь экран, 12.
Неелі MEHTA: Так.
Права.
Так у якасці прыкладу, давайце проста паглядзіце сюды.
Так.
Так на што-небудзь, што гэта LG або bigger-- так мой кампутар адбываецца
для LG, таму што гэта даволі wide-- гэта зробіць
гэта бок аб бок, таму што гэта кол-LG-6.
Так, таму што гэта на вялікіх, гэта робіць яго шэсць слупкоў у шырыню і шэсць у шырыню. слупкі
Давайце паглядзім, што адбудзецца, калі я зрабіць гэта ў меншы.
Я проста хачу, каб ААН-поўны экран гэтым.
І я збіраюся сціснуць экран.
Я збіраюся паменшыць экран, так што Падобна на тое, я на меншым прыладзе.
Так што я збіраюся сціснуць яго, як гэта.
>> І вуаля.
У цяперашні час складзеныя таму што зараз мы пайшлі
ад вялікага, мэтай якіх гэта, верагодна, дадатковая невялікі памер экрана.
І вось цяпер ён кажа, добра, мы не у цэлым мы знаходзімся ў невялікі дадатковай зямлі.
Такім чынам, мы збіраемся выкарыстоўваць дадатковая малы памер.
І мы збіраемся XS-12, XS-12.
Такім чынам, гэта будзе складзены.
І толькі заўважыць, што ёсць рэч называецца супыну.
Кропка супыну, дзе Вы зрабілі пераход
ад асабліва малога да дробных, малога да вялікага, і гэтак далей.
>> Так што проста заўважыць, што, як я слізгаць гэта з, у рэшце рэшт, вы атрымаеце ў пункце
дзе яны буду скакаць, каб быць бок аб бок.
Там вы ідзяце.
Так што кропка супыну прама там.
Такім чынам, мы можам зрабіць гэта яшчэ складаней.
Цяпер мы можам казаць, што гэтыя рэчы павінны быць чатыры ў шырыню.
Гэта значыць, яны павінны прыняць каля траціны
прамове на вельмі вялікіх прылад.
На сярэдняй прылады, ён павінен прыняць да паловы экрана, таму што гэта MD-6.
На вельмі маленькім прыладзе, ён павінен прыняць да 12.
І так гэта выглядае даволі натуральна.
Давайце проста паспрабаваць гэта для сябе.
>> Так што на вялікім экране, яны чатырма шырокімі.
Парніковай Гэта няшмат.
І цяпер яны шэсць у шырыню.
Так што гэта шэсць, шэсць, шэсць.
Паменшыць яго яшчэ больш і тады яны будуць цалкам складзены.
Такім чынам, гэта, напрыклад, мае сэнс, калі вы выпрабоўваеце карты, як навіны карт,
Напрыклад, калі пры гэта на вельмі вялікім экране,
Гэта нармальна, калі ў вас ёсць некалькі бок аб бок таму што яны ўсе атрымліваюць досыць месцы.
Але яны павінны мець досыць месцы.
Так што на маленькім экране, Вы хацелі б даць ім
больш месца, прапарцыйна, старонкі.
>> Так як, напрыклад рэальным свеце, давайце, у нас ёсць Twitter.
І ў нас ёсць тэкставае поле, так Вы можаце цвіркалі на баку.
І ў нас ёсць спіс трэндаў тэмы на правай баку.
Так што на вялікім экране, мы павінны ўжо ім быць бок аб бок,
так што вы можаце ўбачыць іх на шкло.
Але на невялікім экране, мы павінны зрабіць 12 і 12,
так што тэмы трэндаў ніжэй вобласці цвіркалі.
Паколькі вобласць з'яўляецца твіт Галоўнае і на маленькім экране,
тэмы трэндаў ня незалежна ад таго, у той жа ступені.
І так мы іх прама пад, так што яны абодва могуць атрымаць досыць месцы.
Зрабіце пачуццё да гэтага часу?
>> АЎДЫТОРЫЯ: Так.
>> Неелі MEHTA: Цвёрдае рэчыва.
Дык вось усе прыклады я тут.
Давайце паспрабуем і зрабіць выклік.
Такім чынам, яшчэ раз, гэта задача-2.html для тых з вас, наступных разам у сябе дома.
Так што мой прыяцель, Марк Цукерберг, прыйшоў да мяне ў іншы дзень.
І ён, як Неелі, у мяне ёсць атрымаў даволі добра на вэб-дызайне.
Я магу зрабіць HTML.
Я зрабіў гэта мала, Новы рэдагаваць ў Facebook.
У мяне ёсць новая ідэя аб тым, як мы павінны ўкладваць Facebook.
І вось яно.
Прама тут.
Вось прыклад кода.
Так гэта называецца Fancybook.
>> У нас ёсць некаторыя абнаўлення статусу.
У нас ёсць Нема, Майк Kosowski, ***-- тры абнаўлення статусу.
І тады ў нас ёсць спіс сяброў онлайн прама пад ім.
Такім чынам, ён зрабіў сваю хатнюю працу.
Ён ведае трохі аб Bootstrap, ён зрабіў выгляд спісу,
ён зрабіў трохі HTML.
Такім чынам, ён мае вэб-старонку.
Але ён, як Неелі, я не зразумець спагадны дызайн наогул.
Ці ёсць у вас якія-небудзь экспертаў, якія можа мне дапамагчы з гэтым?
І, на шчасце, зараз вы Эксперты ў спагаднага дызайну.
>> Так што ён сказаў мне, што ён быў хоча Fancybook выглядаць так.
На вельмі маленькім прыладзе, як тэлефон, усё
павінны быць выкладзеныя, як тут.
Так у вас ёсць графік авансам, наверсе, а затым
Вы павінны мець чат бар ўнізе.
Але таблеткі ці асяроддзі Прылада, яна павінна быць палова на палову,
як у тэрміны павінны быць палова і спіс сяброў чат
павінна быць на іншы палове.
>> Тады на ноўтбуку, тэрміны павінны ўзяць на тры чвэрці
а затым чат хедж павінен ўзяць яшчэ адну чвэрць.
І так ён, як Неелі, у мяне ёсць гэта Код тут, але гэта не рэагаваць.
Яна павінна паводзіць сябе, як гэта.
Так што мой выклік вам даецца гэты код here--
Калі Вы абновіце старонку CodePens, вы ўбачыце, што гэта.
Ці, калі вы проста ўставіць у код на выклік-2, вы ўбачыце, што гэта.
>> Вось гэты прыклад кода.
Вы ўбачыце некаторыя xxxs.
Я хачу, каб вы змяніць xxxs, напрыклад, што тэрміны і пералік сяброў
варта гэтым спецыфікацыі тут.
Не хвалюйцеся аб тым, што гэта ўнутры тэрміны на дадзены момант.
Мы атрымліваем, што на наступным этапе.
Але цяпер, давайце паглядзім, калі мы атрымаем гэтыя рэчы, каб разбіць яго, як гэта.
Ці так гэта сэнс?
Так што калі вы знаходзіцеся дома, прыпыніць відэа і паспрабуйце
каб зрабіць ваш вэб-старонкі шукаць рэагаваць, як гэта.
Калі вы тут, прыняць як два, тры хвіліны.
Не саромейцеся мець зносіны з суседам, і паспрабаваць, і выправіць г-н Цукерберг
рэагаваць дызайн праблема.
Калі ў вас ёсць якія-небудзь пытанні, не саромейцеся, дайце мне ведаць.
Добры настрой?
Здзейснена?
Ніца.
>> АЎДЫТОРЫЯ: [неразборліва].
Неелі MEHTA: Што?
>> АЎДЫТОРЫЯ: Я добра.
>> Неелі MEHTA: О, добра.
Ніца.
АЎДЫТОРЫЯ: Справа ў тым, 12, гэта, што Bootstrap
лечыць дадзенае прастору экрана як 12 блокі па гарызанталі і затым дзеліць гэта выдумаў?
Як менавіта робіць дазатары працу для гэтага?
>> Неелі MEHTA: Так.
Такім чынам, пытанне ў тым, як робіць дазаванне
працаваць на Bootstrap, праўда?
>> АЎДЫТОРЫЯ: Так.
Неелі MEHTA: Таму, калі ў вас ёсць DIV клас = "радкі",
незалежна ад таго, наколькі вялікі экран, Bootstrap дасць вам 12 адзінак
такога ж памеру ў ўзяць так шмат памераў.
Такім чынам, у седлавіне 1, гэта заўсёды 8,33% ад памеру экрана,
што будзь гэта шырокі ці гэта такі шырокі.
І так, вядома, у меншым экранам, кожны слупок менш.
У вас яшчэ ёсць 12 слупкоў Шырокі, гэта менш.
Так што гэта да вас, каб пераканацца, што што рэчы займаюць больш калонку,
прапарцыйна, каб кампенсаваць Для гэтага недахопу месца.
Ці мае гэта сэнс?
>> АЎДЫТОРЫЯ: Так.
Дзякуй.
Неелі MEHTA: Добры пытанне.
АЎДЫТОРЫЯ: На вялікі экранам, вы можаце мець
тэрміны заняць да трох чвэрцяў?
>> Неелі MEHTA: Так.
Неелі MEHTA: Як хлопцы сябе адчуваеце?
Добра?
Прахладны.
Такім чынам, давайце вернемся.
І давайце паспрабуем выправіць гэтую частку сайта г-на Цукерберга.
Такім чынам, тэрміны з'яўляецца тут, у зверху, а спіс сяброў
знаходзіцца ў ніжняй часткі.
І такім чынам, мы проста павінны прысвоіць калоны, з памераў прапарцыйна,
у кожным з іх.
Так гэты першы ххх для шкале.
Якія класы мы пакласці ў тут?
Што вы, хлопцы, пакласці ў тут?
Так што памятаеце, на вялікім экране, ён павінен ўзяць тры чвэрці шырыні.
І так, які стыль дасць вам гэта?
На вялікім экране, тры чвэрці шырыні.
Які клас мы выкарыстоўваем там?
АЎДЫТОРЫЯ: Такім чынам, мы проста будзе рэдагавання, што першы асобнік класа.
Неелі MEHTA: Зараз.
Так.
>> АЎДЫТОРЫЯ: Мы не рэдагуючы кожны, індывідуальны асаблівасцю тэрміны?
Неелі MEHTA: Не цяпер, па меншай меры.
Так уся гэтая рэч блок.
Мы проста змяняючы праектаванне блока.
Дык вось мы Col-LG-9, таму што гэта дзевяць з 12 шырока на вялікім экране.
А потым на сярэднім экране, колькі калонак я павінен атрымаць?
АЎДЫТОРЫЯ: Ён павінен быць напалову.
Неелі MEHTA: Дакладна.
Дык колькі ж?
>> АЎДЫТОРЫЯ: Так шэсць.
Неелі MEHTA: Шэсць.
І тады асоба малога павінен be-- калі ён займае ўсю шырыню радка,
колькі павінна быць?
АЎДЫТОРЫЯ: 12.
Неелі MEHTA: 12.
Так.
А зараз мы павінны змяніць астатнія,
таму ён прымае астатнія прасторы.
Так кол-lg--
АЎДЫТОРЫЯ: Гэта збіраецца ўзяць на сябе ўвесь экран?
Неелі MEHTA: Яна займае чвэрць экрана на вялікі прылады,
як мы паказалі тут.
>> АЎДЫТОРЫЯ: Тры.
>> Неелі MEHTA: Тры.
І тады кол-MD-6 прыняць да астатняй часткі прасторы.
Col-XS-12.
Так што цяпер у нас ёсць графік займаючы тры чвэрці
старонкі ў вялікім экране і затым адна чвэрць на баку.
І потым, калі памер экрана ўніз, ён павінен змяніць памер адпаведна.
Так што гэта складзеныя ў цяперашні час, на вельмі маленькім экране.
І калі мы паменшым яе памер да трохі, яны павінны быць роўна палова, а палова.
Такім чынам, мы зрабілі гэта так далёка.
Вельмі выдатна.
І таму мы не будзем рабіць Іншая частка праблемы.
Вы можаце зрабіць гэта самастойна.
Але ў прынцыпе, вы павінны паспрабаваць зрабіць гэта рэагаваць
а well-- зрабіць графік прадметы, самі па сабе, якія рэагуюць.
Так што цяпер мы прайшлі усё, што вам трэба ведаць,
аб спагадны боку Bootstrap.
Любыя пытанні аб спагадны дызайн з Bootstrap
і як вы маглі б ісці аб тым, што рабіць?
Да?
>> АЎДЫТОРЫЯ: Гэта падобна калі мы мелі убудаванае відэа
і мы хацелі, каб кантраляваць маштаб, у якім відэа was--
памер відэа паходзіць ад ноўтбука на тэлефон.
Неелі MEHTA: Так.
Больш ці менш.
Вы павінны былі б сказаць відэа на ўзяць столькі ж месца, як гэта дадзена,
што крыху раздражняе часам.
Але асноўная ідэя тая ж.
Відэа, як і любы іншы аб'ект у старонка, як кнопка ці нешта,
так доўга, як вы выкарыстоўваеце калоны і шэрагі,
Вы можаце даць яму пэўную колькасць прасторы.
І так прымусіць яго гонар, што з'яўляецца Іншае пытанне, таму што як YouTube
убудоўвае маюць пэўную, пераважны памер.
Але тэарэтычна ў меры, яна будзе працаваць.
Прахладны?
>> АЎДЫТОРЫЯ: Я мяркую, тое, для малюнка, вы на самой справе
павінны мець розныя версіі той жа малюнак у розных памерах
для наўтбука ў параўнанні з iPhone?
Ды Пытанне ў тым, ці трэба нам ёсць выявы, якія рэагуюць, як добра.
І на самай справе, вы можаце зрабіць гэта.
Я думаю, што гэта ў CSS.
Але Bootstrap дазваляе Вы зрабіць гэта, а таксама.
Вы можаце мець ў адказ малюнка.
Вы можаце мець вашыя выявы змены памеру у адпаведнасці з памерам старонкі.
І ёсць вельмі новая рэч HTML5, найноўшая версія HTML,
і CSS3, найноўшы версія CSS, якая
дазволіць вам прасіць розныя малюнкі у залежнасці ад памеру экрана вы на.
Як правіла, гэта дастаткова добра, каб проста ваш лад проста сціснуць або вырасці да
Аднак большая яна павінна быць.
Але вы можаце, калі вы хочаце каб, ёсць адзін 32 на 32
для вельмі маленькіх экранаў, і 64 на 64 для вялікага экрана,
а затым служыць тым, выбарачна.
Вы можаце зрабіць гэта.
Гэта робіцца шляхам некаторых людзей.
Гэта ўсё яшчэ даволі пярэдні край.
Але кароткі адказ, спагадны images-- Bootstrap можа захаваць дзень там.
Прахладны?
>> АЎДЫТОРЫЯ: Дзякуй.
>> Неелі MEHTA: Дык давайце казаць вельмі хутка пра тое, як
каб атрымаць гэта ў вашым ўласным вэб-старонкі.
Дапусцім, вы хочаце зрабіць свой уласны вэб-сайт з дапамогай Bootstrap.
І так давайце проста проста прайсці праз гэта разам.
Дапусцім, вы зрабіць проста нармальны HTML-старонка.
Не саромейцеся прытрымлівацца ў усе любімае рэдактар.
Так што мы проста ёсць HTML-старонку.
Мы можам зрабіць! DOCTYPE HTML.
Гэта таксама HTML, наша старонка.
Нічога новага.
Мы зрабілі гэта раней.
Так вось у нас ёсць HTML і мы можам пакласці рэчы ўнутры тут.
Мы можам мець нашу кнопку.
І, як я ўжо казаў, гэта не абавязкова будзе працаваць.
Чаму гэта магло б не працуе?
Чаму мы не атрымліваем нашы прыемна, маляўнічыя кнопкі?
>> АЎДЫТОРЫЯ: Таму што мы не звязаць яго да праекту Bootstrap або файл?
Неелі MEHTA: Так.
Правільна.
Таму што гэта Bootstrap-- проста фантазія файл CSS.
Гэта серыя з стыляў, якія якія прывязаныя да элементаў.
Тут мы распавялі, што мы хочаце выкарыстоўваць гэтыя стылі.
Я буду памер, што да няшмат.
Мы сказалі гэта, мы хочам выкарыстоўваць гэтыя стылі, але мы ніколі не
сказаў яму, што стылі.
І гэта тое, што вашы Пытанне ад раней не было.
Вось адказ на гэтае пытанне.
Мы павінны знайсці спосаб, каб атрымаць стылі і ўключыць іх у нашай старонцы нейкім чынам.
І так Bootstrap воля паказаць нам, як гэта зрабіць.
>> Так што, калі вы ідзяце да пачатку тут, Прыступаем да працы.
Там гэта розныя спосабы, каб загрузіць яго.
Гэта, магчыма, не мае сэнсу абавязкова.
Bootstrap-- гэта дазволіць Вы захапіць сам файл CSS.
І вы ўключылі яго ў сваю старонку.
Зыходны код, калі вы хочаце ўзламаць на яго самі.
Вам не трэба гэта сапраўды.
Сасс гэта мова што складае ў CSS.
Думайце пра яго, як препроцессор.
Многае, як PHP з'яўляецца препроцессора HTML, Сасс гэта препроцессор для CSS.
Так што, калі вы хочаце, каб зрабіць гэта Такім чынам, вы можаце зрабіць гэта.
>> Самы просты спосаб выкарыстоўвае CDN, або змесціва сетку дастаўкі.
Гэта сайт, які проста падаюць копію Bootstrap
вельмі хутка для вас ўключыць у сваю старонку.
Дык вось прыклад.
Гэта дасць вам гэтую спасылку элемент.
Элемент спасылку распавядае ваш браўзэр, прыняць усе файлы захоўваюцца тут
і ўключыць яго ў нашай вэб-старонцы.
І ў гэтым выпадку, гэта СМЧ файл пачатковай загрузкі.
Такім чынам, мы проста скапіяваць гэты адрас, або што тэкст, і мы кінем яго ў
нашай галаве.
>> І я не пачне старонку для гэтага, але вы можаце давяраць, што гэта працуе.
Спасылка будзе атрымаць вам CSS.
Ўключыць яго ў свой старонкі, а затым вы будзеце
магчымасць выкарыстоўваць усе Bootstrap класы, якія вы ведаеце і любіце.
Калі вы хочаце, каб трымаць яго на месцы і ёсць на вашым уласным файлавай сістэмы
замест таго, каб перайсці да Інтэрнэт, каб схапіць яго,
Напрыклад, калі вы хочаце, каб выкарыстоўваць сайт у аўтаномным рэжыме,
Вы можаце выкарыстоўваць опцыю загрузкі.
Але па большай частцы, з дапамогай CDN даволі хутка, таму што такім чынам,
гэта абнаўляцца для вас, як добра.
Вы павінны ўручную абнавіць яго небудзь.
Зрабіце пачуццё?
>> Так шмат інструментаў, будзе пабудаваны гэты па змаўчанні. У вашым Pset7 і Pset8,
Я лічу, бутстрап аўтаматычна ўключаецца.
І ў CodePen, для Напрыклад, гэта ўжо
ўключаны, таму што я дададзены дадаць гэтую наладу.
Так што, калі вы калі-небудзь хацелі, каб пагуляць з ім, вы можаце проста пайсці на CodePen,
або пайсці на ID, ці нешта.
І вы маглі б Доступ Bootstrap там,
але гэта не заўсёды будуюцца , То па змаўчанні, у Інтэрнэце.
Зрабіце пачуццё?
>> Так.
гэтак жа, як у нас ёсць recap-- як пяць хвілін да канца.
Але, як Нагадаем, у новых вэб-старонак, Вы можаце ўключаць Bootstrap, як гэта.
І як толькі вы яго ўключалі, Вы можаце зрабіць усё прышпільных рэчаў тут.
Вы можаце пайсці на, і вы можаце проста прагледзець СМЧ, вы можаце дадаць некаторыя цікавыя стылі,
Вы можаце мець кампаненты як кнопкі,
і сталы, і спіс прадметы, якія мы згадвалі.
Там-то халаднавата убудовы JavaScript, якія вы, магчыма, хочаце, каб даследаваць.
Яны дадаць некаторую прахалоду інтэрактыўнасць на вэб-старонцы.
Як гэты робіць мадальны дыялог.
>> Так што некаторыя пацешныя рэчы вы можаце зрабіць з Bootstrap.
Так што мой вам рада ісці наперад і выкарыстоўваць яго ў сваіх праектах,
вынікайце інструкцыям мы толькі што зрабіў пра тое, як атрымаць яго,
і толькі што прачытаў, таму што Bootstrap Вы даведаецеся больш аб тым, што рабіць.
І такім чынам, мы пайшлі больш, сёння, як карыстацца
дакументацыя, тое, што будынак блокі, і як гэта канцэптуальна.
Так што цяпер мая задача, каб вас зрабіць сайт, выкарыстоўваючы Bootstrap.
Перайсці ў дакументацыі.
І выкарыстоўваць тыя інструменты, якія мы даведаўся так далёка, каб спрабаваць прааналізаваць іх
і зразумець іх.
І выкарыстоўваць гэтыя стылі і інструменты Вы бачыце там, у вашым вэб-сайце.
І гэта проста вялікі, эксперыментальны працэс.
>> Паспрабуйце пэўны стыль.
Ці значыць гэта працаваць?
Ці не?
Паспрабуйце пакласці рэчы разам.
Паглядзіце, што адбываецца.
Гэта вельмі самастойнай кіруючыся, працэс выяўлення.
Але сёння, мы даведаліся самыя асновы таго, што пачатковай загрузкі?
Чаму гэта працуе?
Як гэта працуе?
Як мы пачынаем выкарыстоўваць гэта, у першую чаргу?
І вось цяпер, што ты на працягу гэтага гарба, вы
павінны быць у стане зрабіць гэта даволі гладка самастойна.
>> Такім чынам, яшчэ раз, усё Код, які мы зрабілі тут.
Так што, калі вы калі-небудзь хацелі каб атрымаць пэндзаль на,
як тое, што хуткі чыць ліст для ўсіх стыляў?
Вы можаце пайсці ў гэтым узоры тут.
У нас ёсць некалькі прыкладаў стыляў тут.
Калі вы хочаце паспрабаваць праблемы зноў сябе,
Вы можаце паспрабаваць іх тут і праверыць рашэння.
Такім чынам, гэта будзе спасылка ўключаны на слайдах, якія
будзе адпраўлены да вас, вядома.
Але гэта таксама тут.
Вы можаце прыпыніць відэа, калі вы хочаце.
Уся інфармацыя вам трэба, гэта будзе прама тут, на гэтым сайце.
Так што калі хто мае якія-небудзь пытанні, мы можам ўзяць іх на працягу наступных некалькіх хвілін.
У адваротным выпадку, дзякуй усім вельмі падыходзіць для прагляду.