Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Belə ki, salam etmək Burada daha çox tapa hər kəs,
və ya online izləmək, və ya uzaqdan.
My name Neel, bu CS50 edir.
Bugünkü seminar Cavab var Bootstrap ilə Web Design.
Bu bir mövzu var mənim ürək çox yaxın.
İnşallah olacaq ürək yaxın
eləcə də bugünkü seminarın sonunda.
Belə ki, Bootstrap.
Necə bir çox görülən hər hansı bir web inkişaf cür əvvəl?
A yaxşı məbləği?
Bir az.
>> Belə ki, Bootstrap dünyanın ən məşhur, ön-end çərçivəsində.
Mən seçdiyiniz by-- istifadə ki, bir təsadüfi websites-- neçə
Lyft, Newsweek, və Vogue.
Bu web bir sıra istifadə olunur.
Bu veb layihələndirmə çərçivə ki, sizin web etmək imkan verir
gözəl və məsuliyyətli, həm də.
Və mən bu artıq getmək lazımdır burada iki anlayışları.
Gözəl.
Belə ki, normal haqqinda yalnız HTML tərəfindən qəbul edilir sol.
Siz sinif HTML öyrəndim və uzunluğu bölməsində.
Bootstrap etmək üçün bir yoldur Web gözəl.
Siz nə edə bilər Ekranın sol tərəfində
və nə çevrilsin çox ilə ekranın sağ tərəfində,
çox, çox az kodu.
>> Siz gözəl mavi düyməsini almaq, siz almaq Bəzəkli, ekranda kənarları dairəvi
Siz siyahısını görmək almaq, siz almaq kartları, və çox az kodu ilə.
Heç bir CSS həqiqətən var ki, Siz özünüz yazmaq lazımdır.
Belə ki, Bootstrap sizə imkan verir Bu pre-built CSS var
Siz qoya bilər komponentləri web page daxilində
Bu olmadan gözəl baxmaq üçün Öz çox iş.
Bu, həqiqətən bir bootstrap var, bir başlanğıc nöqtəsi,
web inkişaf sərgüzəştləri üçün.
Və belə ki, yalnız olduğunuzda bir web rişxəndli,
başlamaq üçün çox yaxşı bir yer.
Siz yaxşı axtarır web əldə edə bilərsiniz çox, çox az iş ilə.
Həqiqətən, biz gedirik bu özümüzü etmək
kimi beş zamanı minutes-- 10 dəqiqə ərzində.
Belə ki, olduqca asandır bəzi böyük web etmək.
Belə ki, ilk hissəsi.
>> ikinci part-- cavab.
İnsanlar, hazırda, yalnız nə onların noutbuk web daxil.
Əslində, 2014-ci kimi, daha insanlar mobil cihazlar vasitəsilə web daxil,
telefonlar, və ya tablet, və ya kimi xidmətlər, və ya belə web çox.
Və saytları ənənəvi olmuşdur noutbuk və ya masa üstü ilə nəzərdə
Nəzərə.
Və belə saytları tez-tez deyil çox yaxşı telefonunuza uyğun.
Əgər ziyarət əgər telefon harvard.edu,
bir annoying cür təcrübə, sağ?
Bu cavab deyil, çünki var.
Biz etmək üçün çalışırıq cavab saytları,
ki, insanların ekran ölçüləri cavab.
>> Bir telefon varsa Belə ki, telefon getmək üçün gedir.
Bir tablet varsa, bu tablet getmək üçün gedir.
Bu uyğun ayarlar istifadə edilir ekran.
Və belə Bootstrap də bəzi təmin edir ki, çox faydalı kommunal.
Və biz də bu müzakirə olacaq.
Belə ki, yenə iki hissələri var Gözəl və məsuliyyətli Bootstrap--.
Biz bu barədə danışmaq olacaq.
Birincisi, gözəl.
Və sonra cavab.
>> Biz istəyirik ki, bütün indeksi today-- haqqında danışmaq olacaq
Biz nümunələri bir çox olacaq, problemlər bir çox və buna Us
bütün burada bu saytda yaşayır.
Bu slayd biz göndərdi edir.
Burada əgər Belə ki, hiss edə bilər pulsuz ki, yazmaq üçün yoxdur.
Siz uzaqdan seyr etdiyiniz halda, hiss Sizin kompüter bu qoparmaq üçün pulsuz
həmçinin.
Siz yəqin ki, zamanı lazımdır Bu seminarın kursu.
>> Beləliklə, biz bir istifadə etmək olacaq CodePen adlı haqqinda,
olan əməkdaşlıq kodlaşdırma edir Bu seminar zamanı ətraf mühit.
Və CodePen-- və mən lazımdır real fast-- burada sizə göstərmək
bu yazmaq imkan verir HTML birgə.
Mən göndərə bilərsiniz, onu yaza bilərsiniz Siz uşaqlar, uşaqlar onu redaktə edə bilərsiniz.
Uzaq etdiyiniz hətta əgər siz hələ ki, yol əldə edə bilərsiniz.
Siz HTML kodu yazın top və avtomatik olaraq lazımdır
çevriləcək altındakı web page.
Belə ki, sizin üçün bir yoldur tez kodu cəhd
məhsullarının hər cür olmadan Sizin IDE və ya öz saytında,
və ya hər hansı.
>> Belə ki, davam və bu qoparmaq bax, siz uzaq değilseniz
və ya burada, xüsusilə uzaq əgər.
is.gd/cs50boostrap.
No caps, heç bir çizgi, heç bir şey.
Olan sizin So Burada, yalnız mənə bir barmaqlarının vermək
Siz çıxardı zaman up ki, web page up.
Yaxşı?
>> Auditoriya: Bəli.
>> NEEL MEHTA: Beləliklə, biz almaq lazımdır yalnız ikinci ki.
Belə ki, ilk, biz almaq olacaq, necə Siz Web gözəl edə bilərəm?
Biz qazma etmək necə öyrənmək olacaq köhnə HTML, mən əvvəl göstərdi kimi,
və çevrilir həqiqətən gözəl komponentləri,
gözəl widgets kimi, gözəl, rəngli düymələr, və yazıları, və masalar,
və bütün Bootstrap istifadə.
Beləliklə, biz bütün artıq getmək bilər Yalnız çıxardı CodePen.
Bu kimi bir az baxmaq lazımdır.
Bu hər kəs üçün bu kimi görünür?
>> Auditoriya: Bəli.
>> NEEL MEHTA: Uzaq edirsinizsə, bu həmçinin bu kimi baxmaq lazımdır.
Əgər, mən tezliklə necə göstərəcək Siz bu kimi baxmaq əldə edə bilərsiniz
video bir gələcək hissəsində.
Belə ki, burada biz yazılı bir çox əsas HTML,
növ kimi var sinif istifadə edilmişdir.
Bu olduqca əsas deyil.
No frills.
Və biz bir heyəti var.
Biz çox tasarladık çox əsas başlamaq
YALP zəng! olan bilərsiniz sahəsində restoran tapmaq,
və təhlil tapmaq və o bütün istiqamətləri.
Bu, çox yaxşı bir anlayış var.
Bu əvvəl görülən heç oldu.
Bu da bir çox unikal adı var.
>> Belə ki, nə biz cəhd olacaq sahibi kömək nə etmək
YALP of! onun web etmək həqiqətən, həqiqətən, sərin baxmaq.
Belə ki, ilə sahibi başlayacaq YALP! bir az axtarış etdi
qutusu, və bir az düyməsini və sonra bəlkə bir az
Bir üçün qeyd sahəsi qeyd restoran, və sonra
başqa restoranlar siyahısı sahəsində olduğunu.
Belə ki, biz yalnız ilə getmək olar HTML code real sürətli.
HTML ilə uşaqlar necə rahat?
Biz bir az etdik bölmə və həmçinin sinif.
Layiqli?
>> Belə ki, yalnız bir recap kimi, HTML olmaması haqqında bütün
demək tags və ya elementləri Kompüter necə web page qoymaq.
Belə ki, bu h1 gəlmisiniz, h1 başlamaq burada YALP üçün !, kompüter deyir h1-- sonunda,
Böyük bir mövzu çəkmək Bu YALP xoş gəlmisiniz deyir!
orada daxilində.
Biz də formaları var.
Biz bu kimi giriş edə bilərsiniz, mətn giriş, mətn qutuları kimi göstərməyə olan
Siz yazın.
Siz həmçinin düymələri var.
Bir gözəl, tıklanabilir düyməsini almaq.
Bu doğru bir şey deyil İndi, lakin bir düyməsinə almaq.
Siz divs və ya arakəsmələr, ola bilər Müxtəlif qrupa səhifə parçalamaq.
>> Siz bəndlərə ola bilər Siz düymələri var.
Əgər bəndlərə varsa, Siz, ul unordered siyahıları var
ki, li daxilində siyahıları.
Belə ki, bu çox əsas var bir web page bloklar.
Şübhəsiz ki, olduqca çox Gördüyünüz hər veb
tikiləcək gedir bu eyni vasitələrdən istifadə.
Əlbəttə, onlar bütün nə biz istəyirik, çünki bu pis baxmaq
bir az ədviyyə qədər gedir.
Belə ki, bu qazma köhnə HTML və başlanğıc ili gözəl site onu dəyişdirir
ki, biz yalnız bir neçə dəqiqə əvvəl gördüm.
>> Belə ki, çox sadə başlamaq edək.
Beləliklə, biz burada bu düyməni var.
Biz gördüyümüz kimi Bootstrap olaraq, biz gözəl, gözəl, mavi düyməsinə var.
Və xüsusi CSS etməklə deyil həyata.
Burada heç bir xüsusi CSS var.
Bu dərsləri əlavə həyata HTML elementləri.
Siz dərsləri, və ya hrefs, denedim və ya Çapa, ya type = inputs-- üçün "text"
HTML elementləri bu atributları ola bilər.
Onlar əlavə məlumat ola bilər Siz onlara bilər.
>> Belə ki, bu halda, dərsləri atributu var.
Siz yazmaq istədiyiniz Belə ki, düyməsini class = strings daxilində bir şey.
Və atributu izah edəcək kompüter, bu hər hansı bir köhnə düyməsinə deyil.
Bu bir düyməsini var düymələri bu sinif.
Və belə Bootstrap, əgər vermək Sizin element müəyyən stil,
o, müəyyən bir yol cəlb edəcək.
Belə ki, btn-əsas btn "yazın.
btn düyməsini bir kısaltma olan.
İndi ki, görəcəksiniz Mənim çirkin düyməsini çevirdi
gözəl, gözəl, mavi düyməsini daxil.
Biz bunu basın zaman çox gözəl görünür.
>> Və belə ki, biz nə olur btn sinif və btn-ibtidai sinif
bizim element.
Və Bootstrap Mən OK, getmək və demək olacaq Bu iki sinif var ki, bilirik.
Bu iki hər hansı element dərsləri oxşar tərtib edilməlidir.
Belə ki, siz əlavə nə əsas var Bootstrap elementləri üslub.
Siz yalnız onlara dərsləri əlavə və Bu bildiyi kimi onu çəki edəcək.
Belə ki, burada bir misal var.
Daxil, biz əlavə edə bilərsiniz bir class = "form-nəzarət".
Harada və mən tezliklə göstərmək lazımdır nə dərsləri tapa bilərsiniz
element hər cür mövcuddur.
Amma sinif ki, biz yalnız əlavə, gözəl, dairəvi guşələrindən var
bu var, gözəl padding bu gözəl, mavi parıltı.
>> Biz də bu formada daxil edə bilərsiniz.
Və class = "form-inline" edəcək Bizim forması, siz təsəvvür edə bilər kimi, daxili.
Belə ki, axtarır bir az daha biz artıq əvvəl idi nə kimi.
Biz qalan stil getmək əvvəl belə səhifə nə haqqında hər hansı bir sualınız biz
etdi?
Biz yalnız əlavə dərsləri müxtəlif elementləri.
Mən sonra sizə göstərmək lazımdır necə edə bilərsiniz siniflər mövcud nə anlamaq.
Biz dərsləri verdiyini müəyyən üslub var.
Və brauzer deyir istifadə səhifə layout üçün necə
Bootstrap nin təqdim üslub.
Izləyənlərdən Hər hansı bir sualınız?
>> Yaxşı bu günə qədər?
Cool.
Problemlər bir çox Bootstrap yalnız ilə
komponentləri nə bilmədən mövcud və necə istifadə edirlər.
Və bütün öyrənildi də təcrübə və
sənədlərin oxu vasitəsilə, olan biz tezliklə haqqında danışmaq lazımdır.
Beləliklə, biz bu div var.
Bu, sadəcə bir qazma köhnə şey var.
Biz elə-belə qeyd etmək istəyirəm.
Bootstrap Belə ki, var bir mövcud komponentlərinin çox.
Bu getbootstrap.com edir.
Bu, çox faydalı istinad var.
Bu şeyi ehtiva like-- burada bir düyməsinə necə var.
Və nav bar edə bilərsiniz, siz yazıları, siz barlar inkişaf edə bilər,
Siz siyahısı qrupları edə bilərsiniz.
Əsasən, bu cür var bir web page görə bilərsiniz.
>> Burada indi çalışacağıq biri.
Bu panel deyirlər.
Əgər Google istifadə edin İndi, onlar kartları var.
Və ya hər hansı bir Android cihaz kartları var.
Onlar kiçik ağ qutuları var ki, daxilində heyəti var.
Və belə ki, biz cəhd və nə olacaq özümüz burada bir şey istifadə edərək
bir panel çağırıb.
Belə ki, biz sinif veririk əgər = "panel Bizim xarici div panel-default ",
sonra biz = bir div class əlavə - edək bu sənədləri yoxlamaq.
div class = "panel-mal" və sonra div class = "panelləri-bədən".
Yenə haqqında narahat olmayın Bu kodu ezberlemeye.
Bu mövcud online olacaq.
>> Belə ki, indi bizim qazma bunu və köhnə div bu gözəl, kiçik kart çevrildi.
Bu gözəl padding var, onu sərhədləri var, çıxır
Səhifənin qalan, olan olduqca sərin.
Belə ki, getmək edək və bu alın dəyişə düyməsini istiqamətləri gözəl baxmaq.
Tamaşaçı Kim demək istəyir Mənə düyməsini nə edə bilər
Bu Bootstrap istifadə gözəl baxmaq üçün?
Bəli?
>> Auditoriya: Biz bir sinif əlavə edə bilər.
Və biz = "btn btn-əsas" sinif edə bilər.
NEEL MEHTA: Bəli.
Digər bir dəstə var buttons-- üçün mövcud rəng
və ya məsələ üçün bir şey üçün.
Biz btn-təhlükə və qırmızı edə bilərsiniz.
Biz orada getmək.
Biz yaşıl etmək üçün btn-uğur edə bilərsiniz.
Bir dəstə var btn-info-- biz nə edə mövcuddur şeyi.
Belə ki, indi sizin üçün az problem var.
Belə ki, bir şey daha var Mən yazmayıblar ki, un-səpkili.
Bu Top Restoranlar.
>> Və biz bir şey istifadə etmək istəyirəm stil üçün siyahı qrup çağırıb.
Belə ki, mənim problem deyil getbootstrap.com-- getmək
Mən burada qoparmaq lazımdır.
getboostrap.com.
Tapmaq, getbootstrap.com gedin Onlar siyahısı qruplar artıq getmək bölmə.
Və burada bir görürsünüz nümunə və sağ dərsləri
etmək üçün istifadə edə bilərsiniz ki, sizin Bu gözəl siyahısı qrupa siyahıları.
Bu nümunələr işlənib hazırlanır code nümunələri, nə
code siz nə HTML kodu istifadə istifadə ki, nəticələr nə.
>> Belə ki, mənim problem səni etmək getbootstrap.com getmək,
olub burada və ya evdə etdiyiniz və cəhd və bu ul üslub əlavə etmək
gözəl baxmaq üçün.
Və siyahısı qrup stil istifadə edin.
Siz bir neçə dəqiqə almaq istəyirəm və sənədlərin axtarış
Bu özünüzü cəhd?
Siz web inkişaf edirik, çünki, Sizin iş bir çox dərk edəcəyik
oxumaq olacaq Bu sənədlər.
Mən tanış olmaq üçün yaxşı hesab edirəm sənədləri oxumaq üçün necə,
necə harada nə anlamaq üçün, nə code istifadə edə bilərsiniz nümunələri,
Siz leverage bilər nə.
>> Belə ki, yenə, getbootstrap.com, Components nişanı getmək,
və sonra Qrupu siyahısı üçün aşağıya fırladın.
Və kodu nümunələri görmək lazımdır ki, HTML ki, uyğun etmək üçün istifadə edə bilərsiniz.
Belə ki, bir neçə dəqiqə almaq və cəhd və özünüz araşdırmaq,
Siz burada və ya evdə olsanız.
Evdə edirsinizsə, video fasilə, bəlkə, və özünüz cəhd edin.
Əgər getmək əgər, buradayıq bizim website-- Siz səhifəni yenileyin əgər,
orada bu görəcəksiniz.
Bu, çox eyni code yalnız orada yeni üslub əlavə.
Belə ki, bir neçə dəqiqə çəkə.
Mənə yaxşı hiss izlə bu və ya haqqında tamamilə itirdi edirik.
Yaxşı gəlir?
Cool.
Quick kənara sizin üçün evdə, biz beklerken,
Siz GitHub site getmək əgər Mən bir neçə slaydlar əvvəl qoymaq
Video əvvəlində doğru, Mən bir GitHub repo, depo var
Bu müzakirəsi üçün.
Biz olarıq Bütün bu code nümunələri burada saxlanılır söhbət.
Belə ki, bu-1.html qarşı getmək əgər biz indi bütün kodu
bizim CodePen haqqında.
Belə ki, yalnız irəli getmək və köçürə bilərsiniz bu, öz CodePen yapışdırıb.
Və yolla, siz davam edə bilərsiniz biz burada yapýyorsun nə ilə.
Belə ki, bu səhifə açıq var, eləcə də biz Seminarın qalan keçir.
Yenə də, sizin nə kimi baxmaq istəyirəm Ekranın altındakı aşağı görmək
var.
Yaxşı hiss?
Solid.
Nin hər kəs üçün gözləyin bildirin onlar edirik nə ilə tamamlayın.
>> Bəli?
>> Auditoriya: Mən istədiyini düşünək home-- at Bootstrap istifadə etmək
NEEL MEHTA: Bəli.
Auditoriya: Mən, saytda görmək Səhifə Başlarken.
Onlar mənə variantları vermək Bootstrap, mənbə kodu, və ya Sass.
Mən bu hansı istəyirsiniz?
>> NEEL MEHTA: Bəli.
Belə ki, sual, necə əldə edirsiniz ki, özümüzü Bootstrap istifadə açılmış?
Bu, sadəcə olur magically burada çalışır.
Biz zaman varsa, belə ki, Seminarın sonunda,
Mən siz göstərmək lazımdır öz web page almaq.
Burada kimi, mən, həqiqətən, var bəzi parametrləri qoymaq ki,
avtomatik olaraq olacaq dolu, amma lazımdır
Siz bunu göstərmək Öz web pages danışıq.
>> Auditoriya: Təşəkkür edirəm.
>> NEEL MEHTA: Bəli.
Yaxşı sualdır.
Yaxşı hiss?
Yaxşı hiss?
Cool.
Belə ki, kim mənə onlar necə izah etmək istəyir bu şey gözəl və Boostrappy baxmaq?
Biz ul əlavə birinci sinif nədir?
Auditoriya: class = "list-qrupu".
NEEL MEHTA: Bəli. list-qrupu.
Və biz Lis nə əlavə edə sonra?
Başqa kimsə?
Auditoriya: Və sonra, sonra ki, class = "list-qrupu-item".
>> NEEL MEHTA: Bəli.
>> Auditoriya: Və bu növbəti bir eyni.
>> NEEL MEHTA: li class = "list-qrupu-item".
Burada getmək.
Biz gözəl siyahısı qrup, biz gözlənilən idi kimi.
Belə ki, orada siz gedin.
10 dəqiqə, biz etdik Bu qazma köhnə YALP! səhifə
gözəl və professional baxmaq.
Və yalnız başlanğıcı var.
Belə ki, indi hiss edirəm ki, Bu barədə yaxşı, edək
yalnız irəli getmək və haqqında danışmaq bir neçə daha çox komponentləri ki,
sizin kimi yararlı ola bilər Sizin macəra ərzində gedin.
>> Əlbəttə ki, burada bir çox olanlar var.
İndi öyrəndim ki, siyahısı qruplar necə,
olduqca çox öyrətmək olar özünüz necə bu hər hansı bir etmək.
Lakin, əlbəttə, yalnız edək və daha özümüzü bir neçə
Siz bir fikir almaq, sadəcə belə necə onları istifadə edə bilər.
Mən yalnız getmək üçün gedirəm Burada bu misal.
Yenə code Mən yalnız yapışdırılır ki, Burada burada mövcuddur.
Belə ki, qoparmaq üçün çekinmeyin.
>> Belə ki, biz artıq vasitəsilə getdi sonra bu nümunələri bir neçə.
Belə ki, biz, düymələri olan biz Artıq necə gördük.
Biz düymələri böyük edə bilərsiniz.
Düyməsini sinif ilə gedir btn-lg btn və btn-default ağ edir.
Belə ki, bu, bizim düyməsini böyük edir daha başqa cür ola bilər.
Siz varsa, yararlı ola bilər böyük düyməsinə və ya bir şey təqdim edir.
Biz siyahısı qrup nümunə gördüm biz forması nümunə gördüm.
>> Bir çox mühüm bir nişanlar var.
Və nişanlar əlavə etmək üçün bir yol var Check kimi maraqlı şeylər,
Marks, və ya müsbət, ya dost ikonlar, və ya yenidən başladın ikonlar,
web app və ya hər hansı.
Belə ki, yenə, burada daxil əgər biz, komponentləri, glyphicons,
Bootstrap üçün mövcuddur nişanlar var.
Tam var burada bütün olanları siyahısı.
Belə ki, yalnız bir nümunə kimi, Nin cəhd və bir əlavə edək.
>> Belə ki, Facebook kimi, biz çalışırıq istəyirik bir əlavə et Dostuna düyməsini var.
Ilk bəzi stil əlavə edək.
düyməsini class = "btn-müvəffəqiyyəti btn".
Və biz getmək.
Burada bir icon əlavə edək.
Nə icon, siz düşünürsünüz burada qoymaq mənada edə bilər?
Siz yəqin ki, gördüm Bəzi web pages və ya nə olursa olsun,
lakin bir icon nümunəsi budur ki, Bu düyməsinə daxilində də getmək bilər?
Bu görünüşü göz çekinmeyin Əgər hər hansı bir ilham lazımdır.
Faydalı bir çox var burada mövcud olanları.
Bəli?
>> Auditoriya: Bəlkə glyphicon istifadəçi bir?
NEEL MEHTA: OK.
Bu bir.
Bu olduqca yaxşı.
Bəli.
Facebook, mən hesab edirəm ki, kimi bir az görünür.
Belə ki, burada biz getmək necə Bizim pages nişanlar əlavə.
Biz yalnız bir span-- bir span bir var bir şey üçün neytral konteyner.
A div bir şey üçün bir konteyner edir, bir span başqa konteyner edir.
divs line fasilələri onların ətrafında, aşırımlı deyil.
Belə ki, müxtəlif yolları var generic qablar olan.
Bu mənada etmir kimi qoymaq üçün bir maddə və ya bir şey daxilində.
Biz bunu qoymaq üçün var baxmayaraq ki, bir şey daxili,
belə ki, biz yalnız bir span daxilində qoydu.
Belə ki span class = glyphicon glyphicon istifadəçi "yaxın span.
Və biz indi düyməsinə daxilində icon.
>> Belə ki, tamamilə fərqli baxmaq deyil Siz facebook.com haqqında nə görə bilərsiniz.
Və belə ki, bu edə bilərsiniz ki, gözəl həqiqətən yerdə yerləşdirilə istədiyiniz bilər.
Sizin header bar, Sizin siyahısı qruplar.
Nə olursa olsun.
Bu olmaq üçün yoxdur Bir düyməsinə daxilində.
Məsələn, mən belə Burada eyni sinif qoydu.
"Glyphicon glyphicon-user".
Və bu yalnız eyni görünür.
Belə ki, bu span istifadə edə bilərsiniz icons-- class = "glyphicon glyphicon-nə".
Və siz əlavə imkan verir istədiyiniz yerdə nişanlar.
Və nişanlar bir çox vacibdir Bir web nəzər edilməsi hissəsi
professional və yaxşı.
Belə ki, bu ləzzətini qaçırmaq, lakin bu deyil tez-tez yaxşı bir şey bilmək.
>> Panellər, yenidən.
Mən yalnız bir recap kimi yenə bu edəcəyik Onlar cür cəlb edirik, çünki.
Siz ki, görəcəksiniz Sizin normal HTML dönüş
Bootstrap-afied bir daxil site site lazımdır
web əlavə strukturu əlavə edin.
Məsələn, biz əlavə var burada divs yalnız o, çünki
bir panel etmək üçün tələb olunur.
Belə ki, yalnız nəzərə ki saxlamaq əlavə quruluşa sahib lazımdır.
Belə ki, "panel panel-default".
Bəlkə panel-header var.
Hesab edirəm ki, panel-mal edirəm.
Bəli.
Biz orada getmək.
Belə ki, daha bizim panel var.
>> Bir şey daha, biz hələ masalar əhatə etməyib.
Çirkin default görünüşü cür masalar.
Bunun kimi.
Amma masalar, əlbəttə, var çox vacib bir hissəsidir
Siz web inkişaf edəcəyik nə.
Pset7, məsələn, CS50 Tezliklə çıxacaq maliyyə,
Siz masalar bir çox istifadə edəcəyik.
Və web dev bir çox bir çox istifadə məlumat keçirmək üçün masalar,
səhmlər, və ya skorlari, və ya hər hansı kimi.
>> Belə ki, masalar dizayn həqiqətən çox asandır.
Siz masa masa sinif əlavə edin.
Və mən bu olduqca gözəl görünür, demək cəsarət.
Siz əlavə şeyi edə bilər, kimi "masa masa zolaqlı".
Və burada nəticələri görürsünüz.
Siz masa həmsərhəddir edə bilərsiniz.
Siz variantları bir çox var.
Amma əsasən, əlavə bir masa, masa sinif,
Sizin masalar olduqca gözəl baxmaq edəcək.
Belə ki, qısa rundown var daha əhəmiyyətli üslub bəzi
və komponentləri will Bootstrap üçün istifadə etmək lazımdır.
Beləliklə, mən wraps hesab edirəm ki, gözəl hissəsi up.
Haqqında indi hər hansı bir sualınız Web gözəl etmək üçün?
Bu istifadə edə bilərsiniz necə Sizin istifadə üçün komponentlər?
Yaxşı hiss?
Bəli?
Auditoriya: Bəlkə bu bir silly sual,
ancaq Vikipediya haqqında Bootstrap istifadə edə bilərəm?
Bir Wikipedia səhifə redaktə edirsinizsə?
NEEL MEHTA: Bəli.
Sual idi, belə ki, mən bir Wikipedia səhifə redaktə,
Mən orada Bootstrap üslub əlavə edə bilərsiniz?
>> Auditoriya: Bəli.
>> NEEL MEHTA: Və Bootstrap deyil əsasən böyük CSS stil.
A CSS stil yalnız zaman deyir Mən bu sinif bu üslub veririk.
Bootstrap üçün CSS stil So .btn kimi bir şey olacaq,
düyməsini sinif kimi olacaq dairəvi künc sərhəd və ya hər hansı.
Belə ki, əsasən, yalnız bir onu Bootstrap dərsləri dəstə və üslub bir dəstə
bu siniflər üçün müəyyən.
Belə ki, kimi uzun siz CSS kimi, Sizin səhifə qaydaları bu siyahı,
Siz Bootstrap üslubu olacaq.
Bu, əlbəttə, asılıdır Sizin səhifə Bootstrap üslub olan
ilə başlayacaq.
>> Və belə Wikipedia, Siz yəqin ki, bilmədi
Bunu Vikipediya, çünki bu Bootstrap yoxdur.
Amma bu Bootstrap var idi əgər, Siz yəqin ki, bunu edə bilər.
Istəyirdi əgər, siz ola bilər daxil, lakin bilər
səhifə mövcud susmaya qırmaq.
Amma çox yaxşı sualdır.
Siz Bootstrap istifadə edə bilərsiniz Bu daxil yerdə,
lakin bu ismarıcları inşa deyil.
>> Auditoriya: Təşəkkür edirəm.
>> NEEL MEHTA: Bəli.
Hər hansı bir daha suallar?
Bəli.
Siz burada və ya evdə olsanız belə, yalnız getboostrap.com-- yenidən xatırlayıram,
Dostuna getboostrap.com-- edir.
Zaman istifadə etdiyiniz Bootstrap, bu verəcək
almaq üçün necə haqqında təlimat başladı, komponentləri istifadə etmək necə.
Bəzi sərin JavaScript var plug-ins biz burada artıq getmək deyil,
lakin onlar həmçinin həyata yoxlanılması dəyər istəyirik.
Belə ki, bu sizin dostudur.
Bu almaq üçün yalnız vacibdir Bu istifadə etmək üçün necə istifadə olunur.
>> Belə ki, haqqında bir az söhbət edək cavab web edilməsi.
Mən əvvəl qeyd etdiyim kimi, insanlar istifadə onların noutbuk, onların telefonlar istifadə edin.
Yaxşı təsəvvür edə bilər kimi, bu daha bir çox fərqli ekran ölçüsü.
Və belə ki, eyni veb ki, mənim telefon yaxşı görünür
yaxşı baxmaq niyyətində deyil, mütləq bir kompüter.
Belə ki, nə var, nə var Sizin veb uyğunlaşdırmaq olun.
Müxtəlif uyğunlaşmağa ekran var ki, ölçüləri.
>> Mən bir Ben bilirik, demək kompüter, böyük bir laptop, mən genişləndirmək lazımdır.
Mən bir telefon deyiləm bilirik, mən shrink lazımdır.
Və belə Bootstrap bəzi təmin edir Çox, çox faydalı tools bunu.
Belə ki, Bootstrap siz fasilə imkan 12 sütun bir haqqinda.
Siz satır və 12 sütun ola bilər.
Və bölüm bilər o Lakin istədiyiniz.
Siz bir, böyük bir şey ola bilər olan 12 sütun genişdir.
Siz iki şeyi ola bilər altı hər var ki.
Siz dörd ki, bir şey edə bilərsiniz iki ki, bir və ya altı ki, bir.
Siz üç, üç, üç, üç edə bilərsiniz.
Siz edə bilərsiniz nə Istədiyiniz qəza.
>> Belə ki, bəlkə sizin web page bir olmalıdır üçüncü eni sol sütun.
Belə ki, dörd sütun olacaq geniş və səhifə istirahət
səkkiz sütun geniş olacaq.
Belə ki, bu bir nümunəsidir.
Başqa bir misal qoparmaq edək.
>> Auditoriya: həmişə mu daha split olmalıdır?
Bu yeddi, beş split ola bilər?
>> NEEL MEHTA: Bəli.
Bu yeddi, beş ola bilər.
Bəli.
Kimi uzun 12 edər kimi, gözəl var.
Belə ki, burada geri gedək.
Yenə kodu edir ki, burada, burada da mövcuddur
cavab Məsələn altında.
Mən yalnız qədər çıxardı bəzi Burada misal cavab kodu.
Belə ki, istifadə edə sıra deyilən bir şey.
Row başqa bir sinif edir.
Bu üzərinə əlavə bir stil var sizin onlara öz komponentləri etmək divs.
>> Belə ki, div, demək class = "sıra", bir sıra etmək
Özünüz alan 12 sütun vermək.
Və sonra siz ki, daxili sütun qoydu.
Belə ki, burada biz col--6 xs.
Xs narahat etməyin.
Biz sec haqqında danışmaq lazımdır.
Amma əsasən, biz bir var geniş altı şey.
Biz sol çağırırıq.
Və belə ki, sol qutusu burada.
Biz bir şey var geniş 12 sütun altı.
Və bir doğru deyil.
>> də yalnız markalar verir Sizin div boz doldurmaq.
Belə ki, biz yalnız var Onlar fərqli olduğunu görürük.
Və bu ilk nümunəsi.
Bu sizin necə bir çox sadə misal var Burada satır və sütun istifadə edir.
Siz class = "sıra" istifadə edərək bir sıra müəyyən edir.
Və sonra class = "col-XS-6" do yarısı "col-XS-6" digər yarısı etmək.
Burada daha mürəkkəb misal var.
, Bu Tiny baxaq Böyük, qalan bir.
>> Biz Tiny iki sütun geniş edə bilər, biz Böyük altı sütun geniş edə bilər,
geniş və qalan dörd sütun.
12 qədər edər.
Və bu əhatə qədər səhifənin eni.
Yenə xaricində bir sıra var.
Sonra biz div class = "col-XS-2" var sonra 6, və sonra 4 və.
Və təmin edəcək bizim üçün quruluşu.
Və belə ki, biz qoya bilər nə heck biz burada daxili istəyirik.
Əvəzində Tiny, biz bir düyməsinə bilər.
düyməsini class = "btn-əsas btn".
Və belə ki, görürsünüz, bizim düyməsinə bütün eni qədər deyil,
lakin ən azı məhdud oldu ki, çox yer.
>> Belə ki, bütün yaxşı və yaxşı.
Belə ki, indi bizim web qədər qıra bilər chunks daxil səhifə müdrik eni.
Biz bir sol var istəyirəm deyə bilərsiniz sütun və sağ sütun, və s.
Amma biz artıq getdi deyil Siz cavab etmək necə.
Və belə Bootstrap nin də bunu edək.
Bu breakpoints adlı bu şeylər var.
Belə ki, olub bilmədən bir yol var siz bir tablet etdiyiniz, bir laptop etdiyiniz
bir telefon üfüqi etdiyiniz, və ya bir telefon şaquli istəyirik.
Bu ekran ölçüsü bilir.
Və dörd categories-- bu pozur adətən, noutbuk var böyük və ya lg.
tablet edir md və ya orta.
sm, kiçik.
Və ya xs, kiçik bir əlavə.
Və belə ki, müəyyən zaman bir sütun, siz demək
bu altı sütun geniş olmalıdır əlavə kiçik cihaz.
Biz col-xs-6 niyə ki.
Biz onu söyləyərək edirik geniş 12 sütun altı olmaq
əlavə kiçik cihaz.
Bir şey böyük, əgər, biz yalnız lazımdır əlavə kiçik ölçüsü istifadə default.
Bu çox bir şey böyük varsa əlavə kiçik, altı geniş olacaq.
Və biz leverage bu bizim sütun etmək
müxtəlif məbləği almaq ekran ölçüsü əsasında sütun.
Bu cavab boyutlandırma gedək.
Belə ki, biz sütun var.
Və "col-lg-6 col-XS-12", deyir.
Belə ki, nə verilən bu günə qədər sizə nə
gedir edirəm Böyük ekranda baş?
Bəli, bu cür var yol verilmiş, lakin nə
siz baxmaq olacaq Böyük ekranda istəyirsiniz?
Və niyə ki?
>> Auditoriya: Ki Böyük ekranda, bu
yalnız bir etmək niyyətindədir tam kosmik hissəsi?
Bunun yarısı kimi, mən tahmin?
>> NEEL MEHTA: Bəli.
>> Auditoriya: Və kiçik on ekran, gedir
bütün ekran, 12 qədər.
NEEL MEHTA: Bəli.
Right.
Məsələn, edək, belə ki, burada aşağı baxmaq.
Bəli.
Belə ki, bir şey haqqında lg ki, və ya bigger-- mənim kompüter olur
Bu, çünki LG etmək pretty etmək olacaq wide--
yan bu yan Bu col-lg-6, çünki.
Böyük var, çünki edir, belə ki, geniş altı sütun və geniş altı sütun.
Mən əgər nə görmək edək kiçik bir bu edin.
Mən yalnız qeyri-tam ekran bu gedirəm.
Mən ekran kiçilməyə gedirəm.
Mən ekran kiçilməyə gedir, belə ki, edirəm ki, Mən kiçik bir cihaz am kimi görünür.
Mən bu kimi shrink üçün gedirəm.
>> Və voiture.
İndi dizilir indi biz getdi, çünki
böyük to-- bu yəqin ki, əlavə kiçik ekran ölçüsü.
Və belə ki, indi OK, biz deyilik deyir böyük, biz əlavə kiçik torpaq etdiyiniz.
Beləliklə, biz istifadə etmək olacaq əlavə kiçik ölçüsü.
Və biz XS-12, XS-12 olacaq.
Belə ki, dizilir olacaq.
Və yalnız var ki, qeyd bir şey bir breakpoint çağırıb.
A breakpoint harada Siz keçiş etdi
kiçik əlavə kiçik belə böyük və kiçik.
>> Belə ki, yalnız bu uçmaq kimi fark həyata, nəhayət, siz nöqtəsinə almaq lazımdır
onlar yan-yana olmaq tullanmaq lazımdır.
Burada getmək.
Belə ki, orada breakpoint var.
Beləliklə, biz daha mürəkkəb edə bilərsiniz.
İndi bu, demək olar şeyi dörd geniş olmalıdır.
Yəni onlar edir təxminən üçdə qədər
çox böyük cihazlar söz.
Orta cihaz, bu almaq lazımdır yarım ekran up md-6, çünki.
Çox kiçik bir cihaz, 12 tutmalıdır.
Və bu olduqca təbii görünür.
Yalnız özümüz üçün bu cəhd edək.
>> Böyük ekranda, belə ki, onlar dörd geniş istəyirik.
Bir az Shrink.
Və onlar indi altı genişdir.
Belə ki, bu altı altı altı edir.
Daha və sonra Shrink onlar tamamilə dizilir.
Bu Belə ki, məsələn, hissi əgər edir Siz xəbər kartları kimi kartları, qarşılaşdıqda
Məsələn, əgər harada Bu, çox böyük bir ekran var
yan bir neçə tərəfi var, əgər OK onlar bütün kifayət qədər otaq almaq olardı, çünki.
Lakin onlar kifayət qədər otaq lazımdır.
, Kiçik bir ekranda So Əgər siz onları vermək istəyirəm
səhifənin proporsional daha çox otaq,.
>> , Bir real dünya nümunə kimi So Biz Twitter var deyirlər.
Və biz belə ki, mətn qutusu var Siz tərəfdən tweet bilərsiniz.
Və biz uzanan bir siyahısı var sağ mövzular.
Belə ki, bir böyük ekranda, biz olmalıdır onlara yan-yana ola ki,
belə ki, bir şüşə onları görə bilərsiniz.
Amma kiçik bir ekranda, biz, 12 və 12 etməlidir
ki, yamaclarda mövzu tweet sahəsində aşağıdır.
Tweet sahəsi Çünki Əsas odur ki, və kiçik ekranda,
yamaclarda mövzu yoxdur məsələ kifayət qədər.
Və belə ki, biz belə, sağ aşağıda onları qoymaq onlar həm də kifayət qədər yer əldə edə bilərsiniz ki.
Bu günə qədər mənada etmək?
>> Auditoriya: Bəli.
>> NEEL MEHTA: Solid.
Bütün nümunələr belə mən burada var.
Nin cəhd və bir problem yoxdur.
Belə ki, yenə bu problem-2.html üçün evdə birlikdə aşağıdakı sizin.
Belə ki, mənim dostum, Mark Zuckerberg, digər gün mənə gəldi.
O mən, kimi Neel var web dizayn olduqca yaxşı kazanılmış.
HTML edə bilərsiniz.
Mən bu kiçik etdik Facebook yeni edit.
Mən necə üçün yeni bir fikir var biz Facebook stil lazımdır.
Və burada edir.
Burada.
Burada bir misal kodu var.
Belə ki, Fancybook deyirlər.
>> Biz bəzi status yenilikləri var.
Biz Nemo, Mike Kosowski var ***-- üç statusu yenilikləri.
Və sonra biz bir siyahısı var sağ aşağıda online dostlar.
Belə ki, onun ödev həyata.
O, haqqında bir az bilir Bootstrap, o siyahısını görmək etdi,
O HTML bir az görmüşdür.
Belə ki, o web səhifə var.
Lakin o, kimi Neel, mən deyil bütün cavab dizayn başa düşürük.
Əgər hər hansı bir mütəxəssislər var olan ki, mənə kömək edə bilər?
Və xoşbəxtlikdən, indi var cavab dizayn mütəxəssisləri.
>> O, mənə o idi ki, bildirib Belə ki, nə Fancybook bu kimi baxmaq istəyir.
Çox kiçik bir cihaz, telefon, hər şey kimi
Burada kimi, dizilir olmalıdır.
Belə ki, zaman çizelgesi var , upfront üst qədər və sonra
Siz olmalıdır altındakı chat bar.
Amma bir tablet və ya orta Cihaz, o, yarım yarım olmalıdır
İş qrafiki kimi olmalıdır yarım və chat dostları siyahısı
digər yarısı olmalıdır.
>> Sonra bir laptop, qrafiki üç dörddə tutmalıdır
və sonra chat hedcinq olmalıdır başqa dörddə biri qədər.
Və o, kimi Neel, mən bu var kodu bura, ancaq cavab deyil.
Bu kimi davranmaq lazımdır.
Sizə Belə ki, mənim problem Bu kodu verilir burada
Siz yenileyin əgər sizin CodePens, bu görəcəksiniz.
Və ya yalnız kodu yapışdırıb əgər problem-2, bu görəcəksiniz.
>> Bu misal kodu var.
Siz bir xxxs görəcəksiniz.
Mən sizə belə ki, xxxs dəyişdirmək istədiyiniz İş qrafiki və dostları siyahısı
Burada bu specs edir.
Nə narahat etməyin İndi zaman çizelgesi daxilində.
Biz növbəti addım olduğunu almaq lazımdır.
Amma indi, biz almaq əgər nin görək bu şeylər bu kimi parçalamaq üçün.
Belə ki, mənada edir?
Belə ki, evdə olduğunuz halda, video fasilə və cəhd edin
web page etmək bu kimi həssas baxmaq.
Burada edirsinizsə, almaq iki, üç dəqiqə kimi.
Bir qonşu ilə söhbət etmək çekinmeyin və cənab Zuckerberg cəhd və düzeltmek
cavab dizayn problem.
Əgər hər hansı bir sualınız varsa, Mənə bildirin çekinmeyin.
Yaxşı hiss?
Done?
Nice.
>> Auditoriya: [işitilemez].
NEEL MEHTA: Nə?
>> Auditoriya: Mən yaxşı deyiləm.
>> NEEL MEHTA: Oh, yaxşı.
Nice.
Auditoriya: haqqında şey 12, ki, Bootstrap bu
12 kimi bir ekran alanı alır sonra arasında kontur və qədər ayırır?
Necə yoxdur Bu iş oranlanarak?
>> NEEL MEHTA: Bəli.
Belə ki, sual, necə məhdudlaşdırıcı yoxdur
sağ, Bootstrap üçün işləmək?
>> Auditoriya: Bəli.
NEEL MEHTA: Belə ki, zaman Bir div class = "sıra" var,
nə qədər böyük ekran, Bootstrap sizə 12 dənə verəcək
eyni ölçüsü çox ölçüsü qədər.
Belə ki, col 1, bu 8.33% həmişə var Ekranın ölçüsü,
Bu geniş olub və ya geniş bu var.
Belə ki, əlbəttə, daha kiçik ekran, hər bir sütun kiçik.
Siz hələ 12 sütun var geniş, bir kiçik var.
Belə ki, bu qədər əmin etmək üçün var hər şeyi daha sütun qədər ki,
proporsional, kompensasiya kosmik ki, olmaması üçün.
Ki, hissi edirmi?
>> Auditoriya: Bəli.
Təşəkkür edirəm.
NEEL MEHTA: Yaxşı sualdır.
Auditoriya: böyük On ekran, siz ola bilər
İş qrafiki üç dörddə qədər?
>> NEEL MEHTA: Bəli.
NEEL MEHTA necə uşaqlar hiss olunur?
Yaxşı?
Cool.
Belə ki, geri gəlsin.
Və cəhd edək və bu hissəsi düzeltmek Cənab Zuckerberg veb.
Belə ki, vaxt da, burada qədər top, və dostları siyahısı
aşağı edir.
Və belə ki, biz yalnız təyin etmək lazımdır proporsional sizing ilə sütun,
bu hər.
Beləliklə, bu ilk *** qrafiki üçün.
Nə dərsləri biz burada qoymaq bilərəm?
Nə uşaqlar burada qoymaq idi?
Belə ki, bir böyük ekranda, ehtiyacı xatırlayıram enli üç dörddə qədər.
Və nə stil vermək olardı?
Böyük ekranda üç eni dörddə.
Biz orada nə sinif istifadə edirsiniz?
Auditoriya: Belə ki, yalnız olacaq sinif ki, birinci instansiya redaktə.
NEEL MEHTA: İndi.
Bəli.
>> Auditoriya: Biz hər redaktə deyilik İş qrafiki fərdi xüsusiyyət?
NEEL MEHTA: Not indi, ən azı.
Belə ki, bu bütün şey bir blok edir.
Biz yalnız dəyişir edirik blokunun dizayn.
Belə ki, burada biz col-lg-9 bunu, çünki Böyük ekranda 12 geniş həyata doqquz.
Və sonra orta ekranda, Mən neçə sütun almaq lazımdır?
Auditoriya: Bu ehtimal yarım yarım olacaq.
NEEL MEHTA: Sağ.
Belə ki, nə qədər var?
>> Auditoriya: Belə altı.
NEEL MEHTA: Six.
Və sonra əlavə kiçik onu əgər be-- lazımdır sıra bütün eni tutur,
Bu neçə olmalıdır?
Auditoriya: 12.
NEEL MEHTA: 12.
Bəli.
İndi biz var Bu digər olanları dəyişdirmək,
belə ki, kosmik qalan alır.
Belə ki, col-lg--
Auditoriya: Bu olacaq bütün ekran almaq?
NEEL MEHTA: Bu dörddə tutur Böyük bir cihaz ekran,
Biz burada göstərdi.
>> Auditoriya: üç.
>> NEEL MEHTA: Üç.
Və sonra col-MD-6 etmək kosmik qalan up.
col-XS-12.
Belə ki, indi biz qrafiki var üç dörddə alaraq
Böyük ekran səhifənin və sonra tərəfində dörddə biri.
Və sonra ekran aşağı ölçüsü, əgər, Bu müvafiq ölçüsünü lazımdır.
Belə ki, indi dizilir oldu çox kiçik bir ekranda.
Və biz bir az onu ölçüsü əgər, onlar məhz yarım yarım olmalıdır.
Belə ki, bu günə qədər etdik.
*** sərin.
Və belə ki, biz etməyəcək problem digər hissəsi.
Siz özünüz edə bilərsiniz.
Amma əsasən, siz var cəhd və bu məsuliyyətli etmək
well-- qrafiki etmək kimi maddələr, özləri cavab.
Belə ki, indi biz vasitəsilə getdi sonra Bildiyiniz üçün lazım olan bütün
Bootstrap reaksiyalı tərəfi haqqında.
Cavab suallarınız Bootstrap ilə dizayn
və necə bunu haqqında getmək bilər?
Bəli?
>> Auditoriya: əgər bənzəyir Biz əlaqədar video idi
və biz nəzarət etmək istədi miqyası olan video was-- at
video ölçüsü telefon laptop gedir.
NEEL MEHTA: Bəli.
Az və ya çox.
Siz video demək istədiyiniz Bu verilmiş qədər otaq qədər,
bəzən bir az annoying edir.
Amma əsas fikir eyni.
Hər hansı digər obyekt kimi video, səhifə bir düyməsinə və ya hər hansı kimi,
kimi uzun siz istifadə kimi sütun və satır,
Siz bir verə bilər kosmik müəyyən.
Və belə ki, şərəf üçün edilir əldə çünki YouTube kimi müxtəlif sual
müəyyən bir üstünlük ölçüsü var embeds.
Amma nəzəri at Ən azı, bu iş olardı.
Cool?
>> Auditoriya: Mən, onda güman Bir resim üçün, həqiqətən, sizin nə
müxtəlif versiyasını lazımdır müxtəlif ölçülü eyni image
IPhone qarşı laptop üçün?
Bəli sual, nə biz lazımdır eləcə də cavab şəkillər var.
And olsun ki, siz bunu edə bilərsiniz.
Mən CSS hesab edirəm.
Amma Bootstrap verir siz də bunu.
Siz cavab şəkillər ola bilər.
Siz images ölçüsünü ola bilər səhifə ölçülərinə görə.
Və bir çox yeni şey var HTML5 HTML yeni versiyası,
və CSS3, yeni CSS versiyası olan
Siz müxtəlif şəkillər tələb imkan verir Siz etdiyiniz ekran ölçüsü əsaslanır.
Adətən, bu, yalnız kifayət qədər yaxşı image yalnız shrink və ya inkişaf var
Lakin böyük bu olmalıdır.
Amma siz, istədiyiniz bilər, əgər 32 bir 32 var
çox kiçik ekranlar, və Bir böyük ekran üçün 64 ilə 64,
və sonra seçilmiş həmin xidmət edir.
Siz bunu edə bilərsiniz.
Bu, bəzi insanlar tərəfindən həyata.
Bu hələ olduqca qabaqcıl var.
Amma qısa cavab, cavab images-- Bootstrap var gün saxlaya bilərsiniz.
Cool?
>> Auditoriya: Təşəkkür edirəm.
>> NEEL MEHTA: Belə edək haqqında real sürətli danışmaq
öz web səhifə bu almaq üçün.
Gəlin sizin etmək istədiyiniz deyirlər Bootstrap istifadə öz web.
Və belə ki, yalnız edək birlikdə onun vasitəsilə gəzmək.
Siz yalnız etmək deyirlər bir normal HTML səhifə.
Boyunca izləmək üçün çekinmeyin nə sevimli redaktoru.
Belə ki, biz yalnız bəzi HTML səhifə var.
Biz bunu edə bilər! DOCTYPE html.
Bu da html, bizim səhifə.
Yeni bir şey.
Biz əvvəl bu etdik.
Belə ki, burada biz HTML və Biz burada daxili məhsulları qoya bilər.
Biz düyməsinə ola bilər.
Mən əvvəl qeyd etdiyim kimi, bu mütləq işə niyyətində deyil.
Niyə bu iş ola bilər?
Niyə biz almaq deyil gözəl, rəngarəng düyməsini?
>> Auditoriya: Biz keçid etmədiniz Bootstrap layihə və ya fayl?
NEEL MEHTA: Bəli.
Correct.
Bootstrap--, çünki bu yalnız bir xülya CSS fayl.
Bu üslub bir sıra var ki, Sizin elementləri əlavə olunur.
Burada biz ki, izah etdik bu üslub istifadə etmək istəyirik.
Mən ölçüsü qədər bir az lazımdır.
Biz istifadə istəyirik bunu izah etdik bu üslub, lakin biz heç vaxt
üslub var nə bildirib.
Və nə var əvvəlki sual idi.
Ki, cavab var.
Biz üslub almaq üçün bir yol tapmaq lazımdır və elə bizim səhifəsində daxil.
Və belə Bootstrap iradə necə ki, bunu bizə göstərir.
>> Belə ki, üst getmək əgər Burada Başlarken.
Yükləmək üçün müxtəlif yolları var.
Bu mütləq mənada bilər.
Bootstrap-- bu imkan verir Siz CSS faylını özü grab.
Və öz səhifəsinə daxil.
Əgər siz Mənbə Kodu Özünüz bu hack.
Siz, həqiqətən, bu lazım deyil.
Sass bir dil ki, CSS tərtib edir.
Preprocessor kimi düşünün.
PHP kimi çox bir preprocessor deyil HTML, CSS Sass üçün preprocessor edir.
Siz bunu istəyirsinizsə Belə ki, Bu yolla, siz bunu edə bilərsiniz.
>> en asan yol, bir CDN istifadə edir və ya content çatdırılması şəbəkə.
Bu veb var ki, yalnız Bootstrap surətini qədər xidmət
üçün çox sürətli Öz səhifə daxildir.
Belə ki, burada bir misal var.
Bu bu link element verəcəyik.
A link element, sizin browser edir burada saxlanılır nə faylları almaq
və bizim web page daxil.
Və bu halda, bu Bootstrap CSS faylı.
Belə ki, URL surəti, və ya yalnız lazımdır mətn və biz daxili atmaq lazımdır
başımızın.
>> Mən bu səhifəni başlamaq deyil, lakin bu çalışır ki, etibar edə bilərsiniz.
link CSS olacaq.
Onu daxil edin səhifə və sonra olacaq
Bootstrap bütün istifadə edə Bildiyiniz dərsləri və sevgi.
Siz yerli saxlamaq istəyirsinizsə və Öz fayl sistemi var
yerinə getmək üçün olan internet onu qapmaq üçün,
kimi istəyirsinizsə site offline istifadə,
Siz Download seçimi istifadə edə bilərsiniz.
Lakin çox hissəsi üçün istifadə CDN, yol, çünki olduqca sürətli deyil
Bu həmçinin sizin üçün yenilənir saxlanılır.
Siz özünüz və ya onu yeniləmək lazımdır.
Salam?
>> Belə ki, alətləri bir çox bu inşa edəcək default tərəfindən. Sizin Pset7 və Pset8 da,
Mən Bootstrap inanıram avtomatik daxildir.
Və CodePen in üçün Məsələn, bu artıq
daxil Çünki əlavə edib ki, qəbulu əlavə edin.
Əgər ətrafında oynamaq istəyirsinizsə Belə ki, bu, yalnız CodePen davam edə bilər,
ya ID, və ya hər hansı getmək.
Və edə bilər orada çıxış Bootstrap,
lakin həmişə inşa deyil , ismarıcları, web.
Salam?
>> Bəli.
yalnız biz bir recap-- kimi sol beş dəqiqə kimi.
Amma bir recap, yeni web pages, Bu kimi Bootstrap əlavə edə bilərsiniz.
Siz bir dəfə və bu daxil, Burada bütün fun stuff edə bilərsiniz.
Siz davam edə bilər, və yalnız diqqətlə oxumaq olar CSS, bəzi sərin üslub əlavə edə bilərsiniz,
Siz komponentləri ola bilər düymələri kimi,
və masalar, və siyahısı Qeyd etdiyimiz maddələr.
Bəzi sərin JavaScript plugins var, siz tədqiq edə bilərsiniz.
Onlar bir neçə sərin əlavə web page interaktiv.
Bu kimi bir modal dialoq edir.
>> Belə ki, bəzi fun stuff var Siz Bootstrap ilə edə bilərsiniz.
Belə ki, mənim məsləhət davam edir və öz layihələrində istifadə,
təlimatlara əməl edin, biz yalnız onu almaq üçün nə kimi etdi
və yalnız Bootstrap çünki oxumaq Siz nə etmək nə haqqında daha çox öyrənmək lazımdır.
Və belə ki, biz getdi sonra üzərində, bu gün necə istifadə
sənədləşdirmə, nə bina blokları var, və necə konseptual edir.
Belə ki, indi sizə problem deyil Bootstrap istifadə edərək, bir web etmək.
Docs daxil.
Və biz vasitələrdən istifadə cəhd və onları təhlil etmək üçün bu günə qədər öyrəndim
və onları başa düşürük.
Və o üslub və vasitələrdən istifadə Sizin veb var görəcəksiniz.
Və bu, yalnız bir böyük var eksperimental prosesi.
>> Müəyyən bir stil cəhd edin.
Işləyir?
Does deyil?
Birlikdə heyəti qoyulması cəhd edin.
Nə baxın.
Bu, çox özünü var idarəolunan, kəşf prosesi.
Ancaq bu gün biz öyrəndim Bootstrap nə çox əsasları?
Nə işləyir?
Bu necə işləyir?
Biz istifadə edərək başlamaq necə Bu, ilk növbədə?
Və belə ki, indi istəyirik ki, ki donqar üzərində, siz
bunu etmək lazımdır olduqca rəvan özünüz.
>> Belə ki, bir daha bütün etdik kodu burada.
Əgər istəyirsinizsə qədər fırça almaq üçün,
kimi, nə tez istifadə etmək var üslub bütün hesabatı?
Siz burada bu nümunə daxil edə bilərsiniz.
Biz burada bir misal üslub var.
Siz cəhd etmək istəyirsinizsə, daha özünüz problemlər,
Burada onlara cəhd edə bilərsiniz və həllər oldu.
Belə ki, bu link olacaq slaydlar, daxil olan
əlbəttə sizə qaytarılacaq.
Lakin bu qədər burada da var.
Istəyirsinizsə, video fasilə bilər.
Sizə lazım olan bütün məlumat Bu saytda, burada olacaq.
Hər hansı bir sualınız varsa, biz belə növbəti bir neçə dəqiqə onları almaq.
Əks halda, bütün təşəkkür edirik izləmək üçün çox.