Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Yani merhaba için Burada izliyor herkes,
veya çevrimiçi izlerken, ya da uzaktan.
Benim adım Neel ise bu CS50 olduğunu.
Ve bugünün semineri Duyarlı Bootstrap ile Web Tasarım.
Bu bir konu var kalbime çok yakın.
Umarım, o olacak senin kalbine yakın
hem de bugünün Seminerin sonunda.
Yani Bootstrap.
Kaçınız yapmış herhangi web geliştirme tür önce?
Iyi bir miktar?
Biraz.
>> Yani Bootstrap Dünyanın en çoğu popüler, ön uç çerçevesi.
Ben seçtiğim by-- Bu kullanılan bir Rasgele websites-- çift
Lyft, Newsweek ve Vogue.
Bu web sitelerinin bir dizi kullanılır.
Bir web tasarım çerçevesi olduğunu Eğer web yapalım olacak
güzel ve duyarlı hem de.
Ve ben bu aşkın gidersiniz Burada iki kavram.
Güzel.
Yani normal web sitesi var Sadece HTML tarafından yapılan sol.
Siz sınıfta HTML öğrendim ve uzun uzadıya bölümünde.
Bootstrap yapmak için bir yoldur web siteleri güzel.
Üzerinde ne alabilir Ekranın sol tarafı
ve üzerinde ne çevirmek Çok ile ekranın sağ tarafında,
çok küçük bir kod.
>> Sen güzel mavi düğmeye olsun, olsun fantezi, ekranda kenarları yuvarlatılmış
liste görünümü almak, olsun kartları ve çok az kod ile ilgili.
Hiçbir CSS Aslında var ki Kendiniz yazmak zorunda.
Yani Bootstrap yapmanıza olanak sağlar Bu önceden inşa CSS sahip
Eğer koyabilirsiniz bileşenler Web sayfasının içinde
o olmadan güzel görünmesi için kendi çok çalışır.
Bu gerçekten bir önyükleme var, Bir başlangıç noktası,
Web geliştirme macera için.
Ve böylece sadece olduğunuzda Bir web sitesi alaycı,
Başlamak için çok iyi bir yer.
Sen iyi görünümlü web sitesi alabilirsiniz çok küçük bir çalışma ile.
Ve gerçekten de, biz gidiyoruz Bu kendimizi yapmak
gibi beş ders dakika-- 10 dakika içinde.
Bu yüzden oldukça kolay bazı büyük web siteleri yapmak.
Yani birinci kısmı.
>> İkinci part-- duyarlı.
İnsanlar, günümüzde, sadece do kendi dizüstü web'e erişim.
Aslında, 2014 itibariyle, daha fazla insan mobil cihazlar üzerinden web'e erişim,
telefonlar ya da tabletler ya da bu gibi hizmetleri veya benzeri web siteleri daha.
Ve web siteleri geleneksel olmuştur dizüstü ve masaüstü bilgisayarlar ile tasarlanmıştır
akılda.
Ve böylece web siteleri genellikle değil çok iyi telefonunuza uygun.
Hiç ziyaret ederse Telefonunuza harvard.edu,
bu sinir bozucu bir tür deneyim, değil mi?
Bu duyarlı değil çünkü.
Biz yapmaya çalışıyoruz duyarlı web siteleri,
Bu insanların ekran boyutlarına cevap.
>> Bir telefon Yani, bu kadar Telefonda gidecek.
Bir tablet varsa, bu kadar tablet üzerinde gidecek.
Bu maç için ayarlar kullanılıyor ekranı.
Ve böylece Bootstrap de bazı sağlar Bunun için çok kullanışlı araçlar.
Ve biz de bu tartışma için gidiyoruz.
Yani yine, iki parça için vardır Güzel ve sorumlu Bootstrap--.
Biz bu konuda konuşmak için gidiyoruz.
İlk olarak, güzel.
Ve sonra duyarlı.
>> Biz konum Yani tüm kodu today-- hakkında konuşacağız
Biz örnek bir sürü var gidiyoruz, bir çok zorluklar ve bu yüzden on--
hepsi burada bu web sitesinde yaşıyor.
Bu slayt biz dışarı gönderdi budur.
Burada eğer Yani, hissediyorum ücretsiz olduğunu yazmak zorunda değil.
Uzaktan takip ediyoruz ve eğer hissediyorum Bilgisayarınızda bu yukarı çekmek için ücretsiz
de.
Muhtemelen sırasında ihtiyacınız olacak Bu seminerin ders.
>> Yani bir kullanmak için gidiyoruz CodePen denilen sitesi,
hangi bir ortak kodlama olduğunu Bu seminer sırasında çevre.
Ve CodePen-- ve ben olacak Gerçek fast-- burada göstereceğim
Eğer yazmanıza olanak sağlar HTML işbirliği.
Ben gönderebilirsiniz, bunu yazabilir Siz, siz bunu düzenleyebilirsiniz.
Uzak olsanız bile, size Hala o şekilde erişebilirsiniz.
Sen HTML kodunu yazabilirsiniz Üst ve otomatik olacak
dönüştürülebilir alt web sayfası.
Bu yüzden sizin için bir yol var hızlı kod denemek için
şeyler her türlü yapmak zorunda kalmadan IDE, ya da kendi web sitesinde,
ya da her neyse.
>> Şimdi git ve bu yukarı çekin Web sitesi, uzaktan iseniz
ya da burada iseniz, Özellikle uzak iseniz.
is.gd/cs50boostrap.
Hiçbir kapaklar, hiçbir alt çizgi, hiçbir şey.
Kim o sizin Yani Burada, bana bir başparmak vazgeçmek
Eğer çekti zaman kadar Bu web sayfasında yukarı.
İyi?
>> HEDEF KİTLE: Evet.
>> NEEL MEHTA: Yani biz alırsınız Bir saniye içinde o kadar.
Bunun için ilk önce, biz almak için gidiyoruz, nasıl Eğer web siteleri güzel yapabilirim?
Biz, sıkıcı almayı öğrenmek için gidiyoruz Eski HTML, sana daha önce gösterdiğim gibi,
ve içine çevirmek Gerçekten güzel parçalar,
güzel widget gibi, güzel, renkli düğmeler ve etiket ve tablolar,
ve, özyükleme kullanılmıştır.
Bu yüzden tüm üzerinden gidebiliriz Sadece çekti CodePen.
Böyle biraz bakmak gerekir.
Herkes için bu neye benziyor?
>> HEDEF KİTLE: Evet.
>> NEEL MEHTA: Uzaktan iseniz, bunu yanı sıra bu gibi görünmelidir.
Eğer değilse, yakında nasıl göstereceğim Eğer böyle bakmak alabilirsiniz
Videonun bir gelecekte bir parçası.
Yani burada biz yazdım Çok temel HTML,
tür gibi ettik sınıfta kullanıyorum.
Oldukça basit.
Hayır fırfırlar.
Ve bazı şeyler var.
Biz, bir çok dizayn ettik çok temel başlangıç
Yalp çağrı! hangi ile yapabilirsiniz alan restoran bulmak,
ve değerlendirmeleri bulmak ve Bunların tümü üzerinde tarifi.
Bu çok iyi bir kavramdır.
Daha önce hiç yapılmadı.
O da, bir çok benzersiz bir isim.
>> Peki biz denemek için gidiyoruz sahibine yardım yapmak için
Yalp of! Onun web sitesi yapmak Gerçekten, gerçekten harika görünüyorsun.
Bu yüzden, birlikte sahibi başlamak Yalp! Biraz arama yaptı
Kasa ve biraz düğme, ve sonra belki biraz
Bir için Vurgulanan alanı Vurgulanan bir restoran, ve sonra
diğer restoranlar listesi bölgede olduğunuzu.
Yani biz sadece gidebilirsiniz HTML kodunu gerçekten hızlı.
HTML ile çocuklar ne kadar rahat?
Biz biraz yaptık bölüm ve ayrıca sınıfta.
İyi?
>> Yani sadece bir recap olarak, HTML sahip tüm ilgili
söylemek etiketleri veya elementler Bilgisayar nasıl web sayfası düzenlemek için.
Yani bu h1 Hoşgeldiniz, h1 başlatmak var-- Yalp için !, bilgisayar söyler h1-- sonu,
Büyük bir başlık çizmek o Yalp Hoşgeldiniz, diyor!
Orada içeride.
Biz de formları vardır.
Biz böyle girdileri olabilir, metin girişi, metin kutuları gibi verecek olan
Eğer yazmak.
Ayrıca düğmeler var.
Sen bir güzel, tıklanabilir düğme olsun.
Doğru bir şey yapmaz şimdi, ama sen bir düğme olsun.
Siz divs veya bölücüler, var olabilir Çeşitli gruplar halinde sayfanızı break up.
>> Sen, paragraflar olabilir düğmeleri var.
Eğer paragraflar varsa Eğer, ul sırasız listeleri vardır
ve bu, li içine listeleri.
Yani bunlar çok temel Bir web sayfasının yapı taşları.
Ve gerçekten, oldukça fazla Gördüğünüz her web sitesi
inşa edilecek gidiyor bu aynı araçları kullanarak.
Tabii ki, onlar her şeyi Biz çünkü bu kötü görünmüyor
Biraz baharat o kadar gidiyor.
Yani bu sıkıcı eski HTML ve başlangıç olsun Güzel siteye dönüştürülmesi
biz sadece birkaç dakika önce gördüm.
>> Yani çok basit başlayalım.
Yani biz burada bu düğme var.
Gördüğümüz gibi Bootstrap yılında, biz Güzel, güzel, mavi düğme var.
Ve bu özel CSS yaparak değil yapılır.
Burada özel CSS yok.
Yani sınıfları ekleyerek yapılır HTML öğelerine.
Eğer sınıfları veya HREF'ler, denedim ya çapa, ya da type = inputs-- için "metin"
HTML öğeleri, bu özelliklere sahip olabilir.
Onlar ekstra bilgi sahibi olabilir Eğer onlara diye.
>> Ve böylece, bu durumda, sınıflar özelliği vardır.
Eğer yazacağım Yani, düğme class = dizeleri içinde bir şey.
Ve bu niteliği anlatacağım Bilgisayar, bu herhangi bir eski düğme değil.
Bu ise bir düğme var düğmeleri bu sınıf.
Ve böylece Bootstrap, eğer verin senin elemanın belirli bir tarzı,
o bunu belli bir şekilde çekecek.
Yani btn ilkokul btn "yazmak.
btn düğmesi için bir kısaltma olarak.
Şimdi fark edeceksiniz Benim çirkin düğme döndü
Güzel, güzel, mavi düğme içine.
Biz bunu tıkladığınızda çok güzel görünüyor.
>> Ve bu yüzden ne olur ise btn sınıfı ve btn ilkokul sınıf
Bizim eleman üzerine.
Ve Bootstrap Ben, tamam, gitmek ve diyecekler Bu iki sınıf olduğunu biliyorum.
Bu iki olan herhangi bir eleman sınıflar böyle çizilmelidir.
Yani sen eklemek nasıl çekirdek bulunuyor Bootstrap içinde elemanlara stilleri.
Sadece onlara sınıfları eklemek ve uygun gördüğü şekilde bunu dışarı ağırlık vereceğiz.
Yani burada bir başka örnek.
Girdi, biz ekleyebilir Bir class = "form-kontrol".
Nerede ve yakında göstereceğim Ne sınıfları öğrenebilirsiniz
elemanın her türlü kullanılabilir.
Ama sınıf biz sadece katma, güzel, yuvarlak köşeler vardır
o var, güzel dolgu vardır Ona güzel bir mavi parıltı.
>> Biz de bu forma gidebilirsiniz.
Ve class = "form-inline" yapacak Bizim formu, hayal edebileceğiniz gibi, inline.
Yani bakıyor biraz daha biz zaten daha önce ne vardı gibi.
Biz geri kalanını stil gitmeden önce Yani sayfa, ne hakkında herhangi bir soru biz
mi?
Biz sadece ekli sınıflar Bizim çeşitli unsurları.
Ve daha sonra size göstereceğim nasıl yapabilirsiniz sınıflar mevcuttur anlamaya.
Biz sınıfları ekli olduğu Belirli stilleri var.
Ve bu tarayıcıyı söyler kullanarak sayfayı düzen nasıl
Bootstrap adlı sağlanan stilleri.
Dinleyicilerin Herhangi bir sorunuz?
>> Şimdiye kadar iyi?
Güzel.
Zorluklar bir çok Bootstrap adildir ile
bileşenleridir bilmenin Mevcut ve bunları nasıl kullanıyoruz.
Ve hepsi öğrenilir Ayrıca tecrübe ile
belgeleri okuyarak yoluyla, hangi biz yakında hakkında konuşacağım.
Yani biz bu div var.
Sadece sıkıcı, eski bir şey.
Biz bir şekilde bunu vurgulamak istiyorum.
Bootstrap Yani, orada bir Mevcut bileşenlerin çok.
Bu getbootstrap.com olup.
Bu çok yararlı bir kaynaktır.
Bazı şeyleri içerir da-- Burada bir düğme yapmak nasıl.
Ve nav bar yapabilirsiniz yapabilirsiniz etiketler, barlar ilerleyebilir,
Liste gruplarını yapabilirsiniz.
Temel olarak, her türlü var: size bir web sayfası görebilirsiniz.
>> İşte şu anda çalışacağım biri.
Bu paneli denir.
Hiç Google'ı kullanıyorsanız Şimdi, onlar kartları var.
Ya da herhangi bir Android cihaz kartları vardır.
Onlar küçük beyaz kutuları bunun içinde şeyler var.
Ve böylece biz denemek ve yapmak için gidiyoruz Kendimizi burada bir şeyler kullanarak bu
panel denir.
Bu yüzden sınıf eklerseniz = "paneli Bizim dış div paneli varsayılan "
o zaman biz = bir div sınıfı takmak - atalım Sadece bu belgelere bakın.
div class = "paneli başlığı" ve Sonra div class = "paneller-beden".
Yine, dert etmeyin Bu kodu ezberleme.
Bu online olacak.
>> Yani şimdi bizim sıkıcı yaptı ve eski div bu güzel, küçük karta dönüştü.
Güzel dolgu var, o sınırları vardır, o sıyrılıyor
Sayfanın geri kalanından, hangi oldukça serin.
O yüzden de gidelim ve bu al değiştirmek düğme yön güzel bakmak.
Seyirci Kim söylemek istiyor bana düğmeye ne yapabilirim
o Bootstrap kullanarak güzel görünmesi için?
Evet?
>> HEDEF KİTLE: Biz bir sınıf ekleyebilirsiniz.
Ve biz = "btn btn-birincil" sınıf yapabilirdi.
NEEL MEHTA: Evet.
Diğer bir grup var buttons-- için kullanılabilir renkler
ya da bu konuda herhangi bir şey için.
Biz btn-tehlikeyi yapmak ve kırmızı yapabilirsiniz.
Oraya gidiyoruz.
Biz yeşil hale getirmek için btn-başarı yapabilirsiniz.
Bir demet var btn-info-- Biz yapabiliriz Sizin için kullanılabilir olan şeyler.
Yani şimdi sizin için çok az bir meydan okuma var.
Yani bir şey daha var Ben terk ettiğini söyledi un tarzı.
Bu Top restoranlar.
>> Ve biz bir şey kullanmak istiyorsanız Bunu stil bir liste grubu çağırdı.
Yani benim sana meydan okuma getbootstrap.com-- için gitmek
Burada yukarı çekin edeceğiz.
getboostrap.com.
Bulmak, getbootstrap.com git Onlar liste grupları üzerinde bölümüne gidin.
Ve burada bir göreceksiniz örnek ve sağ sınıflar
Yapmak kullanabileceğiniz senin Bu güzel bir liste gruba listeleri.
Bu örnekler dışarı çalıştı kod örnekleri, ne
kodu ne HTML kodu kullanmanız Kullandığınız ve bu çıktılar neler.
>> Yani benim zorluk Ve sizlere getbootstrap.com gitmek,
ister burada ya da evde konum ve denemek ve bu ul stilleri eklemek için
güzel görünmesi için.
Ve bir liste grup stili kullanın.
Sen, bir kaç dakika almak istiyorum ve belgeleri arama
Bu kendinizi deneyin?
Eğer web geliştirme yapıyoruz Zira, Eğer bir sürü iş fark edeceksiniz
Okumaya olacak Bu belgeler.
Bu yüzden tanımak için iyi olduğunu düşünüyorum belgeleri okumak için nasıl,
nasıl nerede anlamaya, hangi kod kullanabilirsiniz örnekler,
Eğer kaldıraç ne.
>> Yani yine getbootstrap.com, Bileşenler sekmesine gidin,
ve ardından Grup Liste gidin.
Ve kod örnekleri görmek edeceğiz Eğer HTML o sığması için kullanabilirsiniz.
Yani birkaç dakika sürebilir ve denemek ve kendiniz keşfedebilirsiniz,
Burada ya da evde ister.
Evde iseniz, Videoyu duraklatmak, belki kendinizi deneyin.
Eğer giderseniz, buradayız bizim website-- Sayfayı yenilemeniz durumunda,
Orada bu görürsünüz.
Bu çok aynı kod sadece bir Orada yeni stiller ekleyerek.
Yani birkaç dakika sürebilir.
Beni iyi hissediyorum ne zaman haber ver Bunun veya ilgili size tamamen kaybolduk.
Kulağa hoş gelmek?
Güzel.
Hızlı bir kenara o sizin için Evde, biz beklerken,
Eğer GitHub sitesine giderseniz ben, bir kaç slaytlar önce koyun
Videonun başına doğru, Ben bir GitHub repo, depo var
Bu konuşma için.
We be Tüm bu kod örnekleri Sağ burada saklanır bahsediyoruz.
Yani, bu-1.html meydan giderseniz şu anda sahip tüm kodu
Bizim CodePen üzerinde.
Yani sadece go ahead ve kopyalayabilirsiniz Bu, ve kendi CodePen yapıştırın.
Ve bu şekilde, uydurabilecek Burada ne yapıyoruz ile.
Yani bu sayfayı açık olması yanı sıra biz Seminerin kalanı geçmesi.
Yine, bu sizin gibi ne bakmak istiyorum Ekranın alt kısmında aşağı bakın
Orada.
İyi hissediyorum?
Katı.
En başka herkes için bekleyelim ne yaptığınızı ile bitirmek.
>> Evet?
>> İZLEYİCİ: istediğim varsayalım home-- de Bootstrap kullanımı
NEEL MEHTA: Evet.
İZLEYİCİ: Ben, web sitesinde, bkz Başlarken sayfasında.
Bana seçenekleri ver Bootstrap, Kaynak Kodu, veya Sass.
Ben Bunlardan hangisi istiyorsun?
>> NEEL MEHTA: Evet.
Yani soru, nasıl alabilirim olduğunu kendimiz Bootstrap kullanmaya başladı?
Sadece olur sihirli burada çalışmak.
Biz saatle var ise Seminerin sonunda,
Ben nasıl yapabilirsiniz size göstereceğim kendi web sayfasında olsun.
Burada gibi, ben aslında ettik bazı ayarları koymak olduğunu
otomatik olarak sahip olacak yüklenmiş, ancak olacak
Eğer bunu yapmak için göstermek Kendi web sayfalarında çizmeyin.
>> HEDEF KİTLE: Teşekkür ederim.
>> NEEL MEHTA: Evet.
İyi soru.
İyi hissediyorum?
İyi hissediyorum?
Güzel.
Peki kim bana yaptıkları nasıl anlatmak istiyor Bu şey güzel ve Boostrappy bak?
Biz ul eklemek birinci sınıf nedir?
HEDEF KİTLE: class = "list-grup".
NEEL MEHTA: Evet. Liste grubu.
Ve biz lis ne eklemek mi o zaman?
Başka biri?
HEDEF KİTLE: Ve sonra, sonra Bu, class = "list-grup-kalemi".
>> NEEL MEHTA: Evet.
>> HEDEF KİTLE: Ve bu bir sonraki için de aynı.
>> NEEL MEHTA: li class = "list-grup-kalemi".
Orada sen gitmek.
Biz güzel bir liste grup var, beklediğimizden gibi.
Yani oraya gitmek.
10 dakika, biz yaptık Bu sıkıcı, eski Yalp! sayfa
güzel ve profesyonel görünüyor.
Ve bu sadece başlangıç.
Yani şimdi sen hissediyorum Bu konuda iyi, diyelim
Sadece go ahead ve hakkında konuşmak Birkaç daha fazla bileşen olduğunu
senin gibi kullanışlı gelebilir macera boyunca gidin.
>> Tabii ki, burada bir sürü olanlar var.
Ve şimdi sen öğrendim Liste gruplarının nasıl,
hemen hemen öğreteceğiz Kendinizi nasıl Bunlardan herhangi yapmak.
Ama, tabii, hadi deneyelim ve daha kendimizi bir çift yapmak
sizin için bir fikir edinmesini sadece bu yüzden nasıl bunları kullanmak gerekebilir.
Ben sadece gidiyorum Burada bu örneğe.
Yine, kod sadece yapıştırılan o Burada doğru buradan ulaşabilirsiniz.
Yani yukarı doğru çekin çekinmeyin.
>> Yani biz zaten geçtiniz Bu örneklerden bir çift.
Bu yüzden, düğmeleri hangi biz Zaten nasıl gördük.
Biz düğmeler büyük yapabilirsiniz.
Düğmesine class-- tarafından o gider btn-lg btn ve btn varsayılan beyaz yapar.
Yani bu bizim düğme daha büyük yapar daha başka türlü olabilir.
Eğer varsa bu, kullanışlı gelebilir Büyük düğme falan gönderin.
Biz, liste grubu örnek gördüm Biz formu örneği gördük.
>> Bir çok önemli biri simgeler.
Ve simgeler eklemek için bir yol vardır çek çek gibi ilginç şeyler,
işaretleri veya artılar ya da arkadaş simgeler, ya da yeniden simgeler,
web uygulaması veya her neyse.
Yani yine, burada içine eğer, bileşenleri, glyphicons,
Bootstrap için kullanılabilir simgeler.
Ayrıntılı bir var Burada tüm olanlar listesi.
Dolayısıyla, sadece bir örnek olarak, denemek ve bir ekleyelim.
>> Yani Facebook gibi, biz çalışırken konum Add Arkadaşa düğmesi var.
İlk bazı stil ekleyelim.
düğme class = "btn-başarı btn".
Ve işte başlıyoruz.
Burada bir simge ekleyelim.
Ne simgesi, sen düşünüyorsun Burada koymak için mantıklı olabilir?
Muhtemelen gördüm Bazı web sayfaları ya da her neyse,
ancak bir simge örneği ne olduğunu Bu düğmenin içinde de gidebilir?
Bu görünümü göz atmaktan çekinmeyin Eğer herhangi bir ilham gerekiyorsa.
Kullanışlı bir sürü var Burada mevcut olanları.
Evet?
>> HEDEF KİTLE: Belki glyphicon kullanıcı bir?
NEEL MEHTA: Tamam.
Bu.
Bu oldukça iyi.
Evet.
Facebook, bunu düşünmek Böyle biraz bakmak istiyorum.
Yani burada biz gitmek nasıl Sayfalarımızda simgeleri sözlerine ekledi.
Biz sadece bir span-- bir karış bir olduğunu var bir şey için nötr konteyner.
Bir div şey için bir kapsayıcıdır, Bir yayılma başka kapsayıcıdır.
divs satır sonları var etraflarında, açıklıklı yok.
Yani farklı yolları var jenerik kapları sahip.
Bu mantıklı değil gibi koymak için Bir paragraf ya da bir şey içinde.
Biz onu koymak lazım gerçi bir şey içinde,
böylece biz sadece bir yayılma içine koydu.
Yani span class = glyphicon glyphicon kullanıcı "yakın yayılma.
Ve biz şimdi var düğmenin içinde simgesi.
>> Yani tamamen farklı görünmüyor Eğer facebook.com ne görebilirsiniz.
Ve böylece bu can bu güzel Aslında herhangi bir yere yerleştirilebilir istediğiniz olmak.
Senin başlık Barlarda, listenizi gruplar halinde.
Her neyse.
Öyle olmak zorunda değildir Bir düğmeye içinde.
Bir örnek olarak, elimden Yani Burada aynı sınıf koydu.
"glyphicon glyphicon-kullanıcı".
Ve bu sadece aynı görünüyor.
Yani bunlar yayılma kullanabilirsiniz icons-- class = "glyphicon glyphicon-ne".
Ve bu ekleyelim istediğiniz yere simgeler.
Ve simgeleri çok önemli Bir web sitesi bir görünüm yapma parçası
profesyonel ve aferin.
Yani aşırıya, ama bu değil genellikle iyi bir şey bilmek.
>> Paneller, yine.
Ben sadece bir recap olarak yine yapacağım onlar tür yer çünkü.
Bunu fark edeceksiniz normal HTML dönüm
Bootstrap-afied bir içine sitesi site size gerekecek
web ekstra yapıyı ekleyin.
Örneğin, ekstra var Burada Divs sadece bu çünkü
bir panel yapmak için ihtiyaç vardır.
Yani sadece akılda tutmak Eğer fazladan bir yapıya sahip gerekecek.
Yani "panel-default".
Belki de panel başlığı var.
Ben 's panel başlığı düşünüyorum.
Evet.
Oraya gidiyoruz.
Yani, yine, bizim paneli var.
>> Bir şey daha biz Henüz tabloları kapağı yoktu.
Çirkin varsayılan görünüm türüne göre Tablolar,.
Bunun gibi.
Ancak tablolar, tabii ki, olarak çok önemli bir parçasıdır
Eğer web geliştirme yapacaklarının.
Pset7, örneğin, CS50 olarak Yakında çıkacaktır Finans,
tablolar bir çok kullanacağız.
Ve web dev bir sürü bir sürü kullanın bilgileri görüntülemek için tabloları,
hisse senetleri veya puanları, ya da her neyse gibi.
>> Yani tablolar styling aslında çok kolaydır.
Sen masaya masa sınıf ekleyin.
Ve, ben oldukça güzel görünüyor, demek cesaret.
Ekstra şeyler yapabilirsiniz, gibi "masa çizgili".
Ve burada sonuçları göreceksiniz.
Sen tablo sınırlanmıştır yapabilirsiniz.
Yapabilirsiniz bir çok seçenek var.
Ama temelde, ekleme, masa, masa sınıfı,
senin tablolar oldukça güzel görünmesini sağlayacaktır.
Yani kısa bir özet var daha önemli stilleri bazıları
ve bileşenleri olacak Bootstrap için kullanmanız gerekir.
Yani tamamladı düşünüyorum Bizim güzel bir parçası kadar.
Nasıl hemen tüm sorular web sitelerinin güzel yapmak?
Bu nasıl kullanabilirsiniz sizin yararınıza bileşenler?
İyi hissediyorum?
Evet?
HEDEF KİTLE: Belki bu saçma bir soru olduğunu,
ancak Wikipedia'da Bootstrap kullanabilir miyim?
Eğer bir Vikipedi sayfayı düzenlerken ediyorsanız?
NEEL MEHTA: Evet.
Soru Yani, ben Bir Wikipedia sayfası düzenleme,
Orada Bootstrap stilleri içerebilir?
>> HEDEF KİTLE: Evet.
>> NEEL MEHTA: Ve böylece Bootstrap olduğunu temelde büyük bir CSS stil sayfası.
Bir CSS stil sayfası sadece zaman diyor Ben, bu sınıf var bu stilleri ekleyin.
Bootstrap CSS stil sayfasına Yani .btn gibi bir şey olacak,
düğme sınıfı, bir gibi alacak yuvarlak köşe sınır ya da her neyse.
Yani temelde, sadece onu Bootstrap sınıfların demet ve stilleri bir demet
bu sınıflar için belirtilen.
Yani sürece bu CSS olduğu gibi, sayfanıza kurallar bu liste,
Eğer Bootstrap styling alırsınız.
Yani, tabii ki, şarta olduğunu sayfanıza Bootstrap stillerine sahip
ile başlayacak.
>> Ve böylece Wikipedia, muhtemelen olamazdı
Bunu Vikipedi, çünkü bunun özyükleme bulunmamaktadır.
Ama Bootstrap var mıydı varsa, muhtemelen bunu yapabilir.
Eğer isteseydi, sen-ebil dahil, ama bu belki
Sayfanın mevcut düzenini kırmak.
Ama çok güzel bir soru.
Siz Bootstrap kullanabilirsiniz dahil olduğu her yerde,
ancak varsayılan olarak yerleşik değil.
>> HEDEF KİTLE: Teşekkür ederim.
>> NEEL MEHTA: Evet.
Herhangi bir başka soru?
Evet.
Burada ya da evde olup olmadığınızı Yani, Sadece getboostrap.com-- tekrar hatırlamak,
Arkadaşınız getboostrap.com-- olduğunu.
Ne zaman kullandığınız Bootstrap, bu size vereceğim
almak hakkında talimatlar başladı, bileşenleri kullanmak nasıl.
Biraz serin JavaScript var eklentileri, biz buraya gitmek olmaz,
ama onlar da kontrol değersin.
Yani bu senin arkadaşın.
Bu almak için sadece önemli Bu nasıl kullanılacağı için kullanılır.
>> Öyleyse hakkında biraz sohbet edelim duyarlı web siteleri yapmak.
Daha önce söylediğim gibi Yani, insanlar kullanılır Onların dizüstü bilgisayarlar, onların telefonları kullanın.
Iyi tahmin edebileceğiniz gibi Ve, bu Bu çok farklı bir ekran boyutu.
Ve böylece aynı web sitesi benim telefonda iyi görünüyor
iyi bakmak için gitmiyor, mutlaka bir bilgisayarda.
Yani yapmanız gereken budur Web siteniz adapte olun.
Çeşitli uyum vardır Ekran Üzerinde olduğunu boyutları.
>> Bu ben olduğumu biliyorum, demek zorunda Bilgisayar, büyük bir dizüstü bilgisayar, ben genişletmek gerekir.
Ben telefonda olduğumu biliyorum, ben küçültmek gerekir.
Ve böylece Bootstrap bazı sağlar çok yararlı araçlar bunu yapmak için.
Yani Bootstrap seni mola izin 12 sütun halinde bir web sitesi.
Sen satır yapmak ve 12 sütun olabilir.
Ve sen bölümlemek O ancak istediğiniz.
Sen, tek, büyük bir şey olabilir hangi 12 sütun genişliğindedir.
İki şey olabilir her biri altı olduğu.
Sen, dört yaşında bir şey yapabilirim iki olan tek ya da altı olan tek.
Üç, üç, üç, üç yapabilirsiniz.
Yapabileceğiniz her türlü İstediğiniz arıza.
>> Yani belki web sayfası olması gerekir Üçüncü bir genişlik var sol sütun.
Yani dört sütun olacak Geniş ve sayfanın geri kalanı
Sekiz sütun genişliğinde olacaktır.
Yani bu bir örnektir.
Farklı bir örnek yukarı çekelim.
>> HEDEF KİTLE: Her zaman bunu mu daha bölünmüş olmak zorunda?
Bir yedi, beş bölünmüş olabilir mi?
>> NEEL MEHTA: Evet.
Yedi, beş olabilir.
Evet.
Sürece 12 ekler gibi ince.
Yani burada geri dönelim.
Yine, kod olduğunu burada, burada da mevcuttur
duyarlı Örneğin altında.
Yani sadece çekti, bazı Burada örnek duyarlı kodu.
Yani kullanarak bunu Satır denilen bir şey var.
Satır sadece başka bir sınıftır.
Bu üzerine eklemek başka bir stil var senin onlara kendi bileşenleri, divs.
>> Yani div demek class = "satır", bir satır için
Kendinize alan 12 sütun vermek.
Ve sonra bunun içine sütunları koydu.
Yani burada biz col-6 xs.
Xs endişe etmeyin.
Bir saniye içinde hakkında konuşacağım.
Ama temelde, biz bir tane var Geniş altıdır şey.
Biz sol diyoruz.
Ve böylece sol kutusu burada.
Biz ise bir şey var genişliğinde 12 sütun altı.
Ve bu bir sağ açık.
>> de sadece yapar verir senin div gri doldurmak.
Yani o kadar biz sadece var Onlar farklı olduğunu görüyoruz.
Ve böylece bu ilk örneği.
Bu sizin nasıl çok basit bir örnek Burada satır ve sütun kullanmak istiyorsunuz.
Sen class = "satırı" seçeneğini kullanarak bir satır tanımlar.
Ve sonra class = "col-xs-6" do Yarım, "col-xs-6" diğer yarısı yapmak.
Burada daha karmaşık bir örnek.
Hadi Minik bakalım Kocaman, kalan tek.
>> Biz Tiny iki sütun genişliğinde yapabilir, Biz Büyük altı sütun genişliğinde yapabilir,
Geniş ve dinlenme dört sütun.
Yani 12 kadar ekler.
Ve bu nedenle bu kapsayan sonuna kadar sayfanın genişliği.
Yine, biz dışarıda bir satır var.
Sonra div class = "col-xs-2" var daha sonra 6 ve daha sonra 4 ile.
Ve bu sağlayacak Bizim için yapı.
Ve böylece biz koymak ne olursa olsun halt biz burada içeride istiyoruz.
Yerine Tiny ki, biz bir düğme koyabilirsiniz.
düğme class = "btn birincil btn".
Ve böylece fark eden düğme tüm genişliği almaz,
ama en azından kısıtlı oluyor O kadar uzaya.
>> Böylece tüm iyi ve güzel.
Yani biz şimdi bizim web kadar zarar verebilir parçalar halinde sayfasında, bilge genişliği.
Biz bir sol istiyorum söyleyebilirim sütun ve bir sağ sütun, vb.
Ama biz üzerine gitmiş değil Eğer duyarlı hale nasıl.
Ve böylece Bootstrap adlı yanı yapalım.
Bu kırılma noktaları olarak adlandırılan bu şeyler vardır.
Bu yüzden ister bilmenin bir yolu vardır sen, sen bir tablet üzerinde konum, bir dizüstü bilgisayar üzerinde konum
Bir telefon yatay konum, veya bir telefonda dikey konum.
Bu ekran boyutu bilir.
Ve dört categories-- içine bu tatili Genellikle, dizüstü bilgisayarlar ise büyük ya da lg.
Tabletler ise md veya orta.
sm, küçük.
Yoksa xs, ekstra küçük.
Ve böylece sizin belirlediğiniz zaman Bir sütun, sen demek
altı sütun genişliğinde olmalıdır ekstra küçük aygıtta.
Biz col-xs-6 yaptım bu yüzden.
Biz gerektiği söylüyorsun Geniş 12 sütun altı olmak
ekstra küçük aygıtta.
O şey daha büyük olursa, biz sadece edeceğiz ekstra küçük boyutu kullanarak varsayılan.
O daha büyük bir şey varsa ekstra küçük, altı geniş olacak.
Ve böylece biz kaldıraç bunlar bizim sütun yapmak
Farklı miktarda almak Ekran boyutuna göre sütunlar.
Şimdi bu duyarlı boyutlandırma gidelim.
Bu yüzden bizim sütun var.
Ve bu "col-lg-6 col-xs-12", diyor.
Peki biliyor musun verilen Şimdiye kadar, sen ne
gidiyor düşünüyorum büyük ekranda olur?
Peki, bu tür var yol verildi, ama ne yapmak
Eğer bakacağız düşünüyorum büyük ekranda ister?
Ve neden böyle?
>> HEDEF KİTLE: Öyle mi o büyük ekranda, bu kadar
Sadece bir alacak Tam alan kısmı?
Bunun yarısı gibi, sanırım?
>> NEEL MEHTA: Evet.
>> HEDEF KİTLE: Ve küçük üzerine ekran gidiyor
tüm ekranı, 12 almak için.
NEEL MEHTA: Evet.
Sağ.
Örnek olarak, haydi Yani Sadece burada aşağı bakmak.
Evet.
Yani bir şey lg olduğunu ya da bigger-- yüzden benim bilgisayar olur
o çünkü lg edilecek Oldukça o yapacak wide--
yan yan bu col-lg-6 çünkü.
O büyük üzerinde, çünkü bunu yapar Yani Geniş altı sütun ve geniş altı sütun.
En I ne olur görelim küçük bir birine bu hale.
Ben sadece un-tam ekran, bu gidiyorum.
Ve ben Ekranı küçültmek için gidiyorum.
Ben ekran küçültmek için gidiyor, bu yüzden ben onu Ben küçük bir cihaz üzerinde duyuyorum gibi görünüyor.
Yani bu gibi küçültmek için gidiyorum.
>> Ve işte.
Şimdi yığılır Şimdi biz gitti çünkü
Büyük aşağıdaki amaçlara Bu muhtemelen Ekstra küçük ekran boyutu.
Ve böylece şimdi Tamam, biz değiliz diyor Büyük de, biz ekstra küçük arazi konum.
Yani biz kullanmak için gidiyoruz Ekstra küçük boyutlu.
Ve biz xs-12, xs-12 için gidiyoruz.
Yani yığılmış gidiyor.
Ve sadece orada olduğunu fark Bir şey, bir kesme noktası denir.
Bir kesme noktası nerede Eğer geçiş yaptı
küçük ekstra küçükten böylece büyük ve küçük.
>> Yani sadece bu slayt olarak fark dışarı, sonunda, sen noktasına alırsınız
nerede yan yana olmak atlarsınız.
Orada sen gitmek.
Yani orada kesme var.
Yani biz bunu daha da karmaşık yapabilirsiniz.
Şimdi bu, diyebiliriz şeyler dört genişliğinde olmalıdır.
Yani gerektiği olduğunu yaklaşık üçte kadar sürebilir
Çok büyük cihazlarda konuşma.
Orta aygıtta, o almalı Yarım ekranda yukarı o md-6 çünkü.
Çok küçük bir aygıtta, o 12 almak gerekir.
Ve böylece bu oldukça doğal görünüyor.
Sadece kendimiz için bunu deneyelim.
>> Büyük ekranda Yani, dört geniş konum.
Onu biraz küçültmek.
Ve şimdi altı geniş.
Yani bu altı, altı, altı.
Daha da ve daha sonra shrink Onlar tamamen dizilir.
Bu nedenle, örneğin, mantıklı eğer yapar Eğer haber kartları gibi kartları, yaşıyorsanız
Örneğin, eğer nerede o, çok büyük bir ekranda var
Eğer yan tarafından birkaç yan varsa Tamam hepsi yeterli oda olsun çünkü.
Ama yeterli oda olması gerekir.
, Küçük bir ekranda Yani Onlara vermek isterdim
Sayfanın oransal olarak daha fazla oda.
>> Bir gerçek dünya örnek olarak So en biz Twitter'a var diyelim.
Ve bu yüzden, metin kutusu var Eğer tarafında tweet olabilir.
Ve biz gidişli bir listesi var Sağ tarafta konular.
Yani bir büyük ekranda, we should Onları yan yana olmak var,
Böylece bir bardak onları görebilirsiniz.
Ama küçük bir ekranda, Biz 12 ve 12 yapmalıyım
Böylece gidişli konular tweet alanının altındadır.
Cik alanı olduğu için Önemli olan ve küçük bir ekranda,
gidişli konular yok mesele oldukça fazla.
Ve böylece biz, yani hemen altında onları koymak ikisi de yeterince yer alabilirsiniz.
Şimdiye kadar mantıklı?
>> HEDEF KİTLE: Evet.
>> NEEL MEHTA: Katı.
Tüm örnekler bu yüzden burada var.
Denemek ve bir meydan okuma yapalım.
Yani yine, bu meydan okuma-2.html için Evde birlikte aşağıdaki o sizin.
Yani benim dostum, Mark Zuckerberg, Geçen gün bana geldi.
Ve o ben var, gibi Neel var web tasarım oldukça iyi kazanılmış.
HTML yapabilirsiniz.
Ben, bu küçük yaptık Facebook yeni düzenleme.
Ben nasıl yeni bir fikrim var Biz Facebook stil gerekir.
Ve işte burada.
Tam burada.
İşte bazı örnek kod var.
Yani Fancybook denir.
>> Biz bazı durum güncellemelerini var.
Biz, Nemo, Mike Kosowski var ***-- üç durum güncellemeleri.
Ve sonra bir listesi var hemen altında çevrimiçi arkadaşlar.
Yani onun ödevini yapmış.
O konuda biraz bilir Bootstrap, o liste görünümünü yapılmış,
o HTML biraz yapmış.
Bu yüzden web sayfası vardır.
Ama o, böyle Neel var, bilmiyorum Hiç duyarlı tasarım anlamak.
Eğer herhangi bir uzmanlar var mı kim bu konuda bana yardımcı olabilir?
Ve neyse ki, sen şimdi duyarlı tasarım uzmanları.
>> Bana ki o olduğunu söyledi Peki Fancybook bu gibi görünmek istiyor.
Çok küçük bir aygıtta, Bir telefon, her şey gibi
Burada olduğu gibi, yığılmış olmalıdır.
Yani zaman çizelgesi var ayarlıyoruz kontör ve sonra
Eğer olmalıdır altta sohbet bar.
Ancak bir tablet ya da bir ortam üzerinde, Cihaz, bu yarı yarıya olmalıdır
zaman çizelgesi gibi olmalıdır Yarım ve sohbet arkadaş listesi
diğer yarısı olmalıdır.
>> Sonra bir dizüstü bilgisayar üzerinde, zaman çizelgesi dörtte üçünü kadar almalı
ve daha sonra sohbet çit gerekir Başka bir çeyrek kadar sürebilir.
Ve bu yüzden, böyle Neel, ben bu var Kod burada, ama duyarlı değil.
Böyle davranmaya ihtiyacı var.
Size Yani benim meydan Bu kodu verilir var--
Eğer yenilemek eğer senin CodePens, bunu göreceksiniz.
Ya da sadece kodu yapıştırın eğer meydan-2, bunu göreceksiniz.
>> İşte bu örnek kod.
Bazı XXXS görürsünüz.
Ben böyle olduğunu, XXXS değiştirmek istiyorum zaman çizelgesi ve arkadaşlarının listesi
Burada bu gözlük izler.
Ne dert etmeyin Şimdilik zaman çizelgesi içinde.
Bir sonraki adımda o alırsınız.
Ama şimdi, biz olsun bakalım bunlar bu gibi bölmek.
Yani mantıklı mı?
Yani evde iseniz, Videoyu duraklatmak ve denemek
web sayfası yapmak için Böyle duyarlı görünüyor.
Burada iseniz, almak İki, üç dakika gibi.
Bir komşu ile sohbet çekinmeyin ve Bay Zuckerberg denemek ve düzeltmek
duyarlı tasarım sorunu.
Eğer sorunuz varsa, bana bildirmekten çekinmeyin.
İyi hissediyorum?
Bitti?
Güzel.
>> HEDEF KİTLE: [duyulamaz].
NEEL MEHTA: ne olacak?
>> İZLEYİCİ: Ben iyiyim.
>> NEEL MEHTA: Oh, iyi.
Güzel.
HEDEF KİTLE: yaklaşık şey 12, o Bootstrap o
12 olarak verilen bir ekran alanını davranır Sonra genelinde birimler ve yukarı böler?
Tam olarak nasıl yapar Bunun için çalışma oranlanması?
>> NEEL MEHTA: Evet.
Yani soru nasıl oranlama yapar
Doğru, Bootstrap için mi çalışıyorsun?
>> HEDEF KİTLE: Evet.
NEEL MEHTA: Peki ne zaman Bir div class = "satır" var,
olursa olsun ne kadar büyük ekran, Bootstrap size 12 adet verecek
Aynı büyüklükte o kadar boyut kadar sürebilir.
Yani col 1, bu% 8.33 her zaman Ekranın büyüklüğü,
bu geniş olsun ya da geniş bu var.
Böylece, tabii ki, daha küçük Ekran, her bir sütun daha küçüktür.
Hala 12 sütun var Geniş, o daha küçük.
Yani size kalmış emin olmak için var şeyler daha sütunu sürebilir ki
orantılı, telafi etmek için alan bu eksikliği için.
bu mantıklı mı?
>> HEDEF KİTLE: Evet.
Teşekkür ederim.
NEEL MEHTA: İyi bir soru.
HEDEF KİTLE: Büyük Açık ekranında, olabilir
timeline dörtte üçünü almak?
>> NEEL MEHTA: Evet.
NEEL MEHTA: Nasıl adamlar hissediyorsun?
İyi?
Güzel.
Yani geri gelsin.
Ve deneyelim ve bu bölümü düzeltmek Sayın Zuckerberg'in web sitesinin.
Yani zaman çizelgeleri de, burada bir Üst ve arkadaşlarının listesi
altta yer almaktadır.
Ve böylece biz sadece atamanız gerekir orantılı boyutlandırma kolonların,
bunların her biri.
Yani bu ilk *** zaman çizelgesi içindir.
Ne sınıfları Burada koymak mı?
Siz ne buraya koydun?
Yani büyük bir ekranda, ihtiyacı hatırlıyorum genişliğinin dörtte üçünü kaplayacak şekilde.
Ve böylece ne tarz sana bu verecekti?
Büyük ekranda, üç genişliği dörtte.
Biz orada ne sınıf kullanıyorsunuz?
HEDEF KİTLE: Yani biz sadece olacağız sınıf ilk örneğini düzenleme.
NEEL MEHTA: Şimdilik.
Evet.
>> HEDEF KİTLE: Biz her düzenleme değil zaman çizelgesi bireysel özellik?
NEEL MEHTA: Şimdi olmaz, en azından.
Yani tüm bunlar bir bloktur.
Biz sadece değiştiriyoruz Bloğun tasarımı.
Yani burada biz col-lg-9 do it çünkü büyük ekranda 12 genişliğinde dışarı dokuz.
Sonra orta ekranda Ben kaç sütun almak gerekir?
HEDEF KİTLE: Bu gerekiyordu yarı yarıya olması.
NEEL MEHTA: Doğru.
Yani kaç?
>> HEDEF KİTLE: Yani altı.
NEEL MEHTA: Altı.
Ve sonra ekstra küçük o eğer göre-- gerekir satırın tüm genişliğini kaplıyor,
o kaç olmalıdır?
İZLEYİCİ: 12.
NEEL MEHTA: 12.
Evet.
Ve şimdi biz var Bu diğerleri değiştirmek
bu nedenle uzay geri kalanı kadar sürer.
Böylece col-lg--
HEDEF KİTLE: Bu gidiyor tüm ekranı kaplar?
NEEL MEHTA: Bir çeyrek kaplıyor Büyük bir aygıtta ekran,
biz burada gösterdi.
>> HEDEF KİTLE: Üç.
>> NEEL MEHTA: Üç.
Ve sonra col-md-6 almak alan geri kalanı kadar.
col-xs-12.
Yani şimdi biz zaman çizelgesi var dörtte üçü kadar çekici
Büyük ekranda sayfanın ve sonra tarafında dörtte biri.
Ve sonra ekran aşağı boyutu ise, buna göre yeniden boyutlandırmak gerekir.
Yani, şimdi yığılmış var çok küçük bir ekranda.
Ve biz biraz o kadar boyutu ise, bunlar tam yarı yarıya olmalıdır.
Yani biz o kadar yaptık.
Çok güzel.
Ve böylece biz yapmayacağım meydan diğer kısmı.
Sen kendin yapabilirsin.
Ama temelde, sen var denemek ve bu duyarlı hale
Eee-- zaman çizelgesi yapmak gibi öğeleri, kendilerini, duyarlı.
Yani şimdi biz geçtiniz bilmeniz gereken tüm
Bootstrap duyarlı tarafı hakkında.
Duyarlı hakkında tüm sorular Bootstrap tasarım
ve bunu nasıl yapıyor hakkında gitmek olabilir?
Evet?
>> HEDEF KİTLE: eğer benzer mi Biz gömülü bir video vardı
ve biz kontrol etmek istedim Ölçek hangi video Ben-- at
Video boyutu telefona dizüstü gidiyor.
NEEL MEHTA: Evet.
Az çok.
Sen video anlatmak zorundayız o verdi kadar yer kaplar,
hangi bazen biraz can sıkıcı bir durum.
Ama çekirdek fikir aynıdır.
Herhangi diğer bir nesne gibi bir video, sayfa, bir düğme veya ne olursa olsun gibi,
sürece kullandıkça sütunlar ve satırlar,
Bunu bir verebilir alan belirli bir miktar.
Ve böylece o onurlandırmak için getting Çünkü YouTube gibi farklı soru
Belli bir tercih boyutu var gömer.
Ama teorik olarak En az, o çalışmaya devam eder.
Güzel?
>> İZLEYİCİ: Ben, o zaman herhalde bir görüntü için, aslında do you
farklı sürümlerini olması gerekir Çeşitli boyutlarda aynı görüntü
iPhone karşı laptop için?
Evet soru yapmak biz gereken yanı sıra duyarlı görüntüleri var.
Ve gerçekten, bunu yapabilirsiniz.
Ben CSS olduğunu düşünüyorum.
Ama Bootstrap veriyor siz de bunu yapmak için.
Sen duyarlı görüntüleri olabilir.
Sen görüntüleri yeniden boyutlandırma olabilir Sayfanın ölçülerine göre yöntem.
Ve bir çok yeni şey var HTML5, HTML yeni sürümü,
ve CSS3, yeni CSS sürümü, hangi
Farklı resim isteğinde izin verir Eğer konum ekran boyutuna göre.
Genellikle, sadece yeterli iyi görüntü sadece küçültmek veya büyümek zorunda
Ancak büyük olması gerekiyor.
Ama sen, istediğiniz eğer , 32 tek 32 var
Çok küçük ekranlar ve için Büyük ekran için 64 ile 64,
ve daha sonra seçici olanlar hizmet vermektedir.
Bunu yapabilirsin.
Bazı kişiler tarafından yapılır.
Hala oldukça kesici kenar var.
Ama kısa cevap, duyarlı images-- Bootstrap gün orada kaydedebilirsiniz.
Güzel?
>> HEDEF KİTLE: Teşekkür ederim.
>> NEEL MEHTA: Yani atalım nasıl gerçek hızlı konuşmak
kendi web sayfasında bu olsun.
Diyelim ki sizin yanınızdaki yapmak istediğinizi varsayalım Bootstrap kullanarak kendi web sitesi.
Ve böylece sadece sadece atalım Birlikte içinden yürümek.
Diyelim ki sadece yapmak diyelim Normal bir HTML sayfası.
Içinde birlikte takip çekinmeyin ne olursa olsun en sevdiğiniz editörüdür.
Yani biz sadece bazı HTML sayfası var.
Biz yapabiliriz! DOCTYPE HTML.
Bu aynı zamanda html, bizim sayfası.
Herşey aynı.
Biz daha önce yaptık.
Yani burada bizim HTML ve Burada içine şeyler koyabilirsiniz.
Bizim düğmesine sahip olabilir.
Ve ben daha önce de söylediğim gibi, bu mutlaka işe gitmiyor.
Neden bu işe yaramayabilir?
Neden bizim almazsınız güzel, renkli düğme?
>> HEDEF KİTLE: Biz bağlamak vermedi Çünkü Bootstrap proje veya dosyaya?
NEEL MEHTA: Evet.
Doğru.
Bootstrap-- Çünkü var sadece bir fantezi CSS dosyası.
Bu stilleri bir dizi olduğunu daki elemanlara bağlıdır.
Burada biz o kadar söyledim Bu stilleri kullanmak istiyorum.
Ben boyutu o kadar biraz olacak.
Biz kullanmak istiyoruz bunu söyledim Bu stilleri, ama biz asla
stilleri nelerdir söyledim.
Ve bu ne sizin bulunuyor önceki soruydu.
Yani buna cevap.
Biz stilleri almak için bir yol bulmak gerekir ve her nasılsa bizim sayfaya bunları içerir.
Ve böylece Bootstrap irade nasıl bunu bize gösteriyor.
>> Yani üstüne giderseniz Burada, Başlarken.
Indirmek için farklı yollar var.
Bu mutlaka mantıklı olmayabilir.
Bootstrap-- bu izin verir CSS dosyasının kendisini yakala.
Ve kendi sayfasında dahil.
İsterseniz Kaynak Kodu olduğunu kendiniz üzerinde kesmek.
Gerçekten buna ihtiyacım yok.
Sass bir dildir Bu CSS içine derler.
Bir önişlemci gibi düşün.
PHP gibi çok bir önişlemci olduğunu HTML, CSS Sass için bir önişlemci olduğunu.
Bunu yapmak istiyorsanız Yani bu şekilde, bunu yapabilirsiniz.
>> En kolay yolu, bir CDN kullanarak veya içerik dağıtım ağı.
Bu bir web sitesi olduğunu, sadece Bootstrap bir kopyasını kadar hizmet vermektedir
sizin için çok hızlı Kendi sayfasında yer alıyor.
Yani burada bir örnek.
Size bu link elemanı vereceğim.
Bir bağlantı elemanı, tarayıcınızı söyler burada saklanır olursa olsun dosyaları almak
ve bizim web sayfası dahil.
Bu durumda, var: Bootstrap CSS dosyası.
Yani biz bu URL'yi kopyalayın, ya da sadece edeceğiz Bu metin, ve biz içine atmak olacak
Bizim kafa.
>> Ve ben bunun için sayfayı başlamaz, ama bu çalıştığını güvenebilirsiniz.
Bağlantı size CSS alırsınız.
Bunu dahil senin sayfa ve sonra olacak
Bootstrap hepsini kullanmak mümkün Bildiğiniz sınıfları ve sevgi.
Eğer yerel olarak tutmak istiyorsanız ve Kendi dosya sistemi üzerinde olması
yerine gitmek zorunda İnternet onu kapmak için,
gibi isterseniz site çevrimdışı kullanmak,
Download seçeneğini kullanabilirsiniz.
Ama çoğunlukla, kullanma CDN, bu şekilde çünkü oldukça hızlı
o da sizin için güncellenmiş tuttu.
Elle ya da güncellemek zorunda.
Mantıklı?
>> Yani araçları bir sürü bu yerleşik olacak varsayılan olarak. Daki Pset7 ve Pset8 olarak,
Ben Bootstrap olduğuna inanıyorum otomatik olarak dahil.
Ve CodePen bölgesindeki için Örnek, bu zaten
Dahil çünkü ben eklenen bu ayarı ekleyin.
Hiç oynamak istiyorsanız Yani Onunla, sadece CodePen gidebilirsiniz,
ya da kimlik, ya da her neyse gidin.
Ve mümkün olabilir Orada erişim Bootstrap,
ama her zaman yerleşik değil , varsayılan olarak, web.
Mantıklı?
>> Evet.
Sadece biz bir recap-- olarak sol beş dakika gibi.
Ama recap olarak, yeni web sayfalarında, Eğer böyle Bootstrap içerebilir.
Eğer bir kez ve dahil, Burada tüm eğlenceli şeyler yapabilirsiniz.
Sen gidebilirsiniz ve sadece incelemek CSS, bazı serin stilleri ekleyebilir,
Eğer bileşenleri olabilir düğmeler gibi,
ve tablolar ve liste bahsettiğimiz ürün.
Biraz serin JavaScript eklentileri var, hangi keşfetmek isteyebilirsiniz.
Bazı serin eklemek Web sayfasına etkileşim.
Bu gibi bir modal diyalog yapar.
>> Yani bazı eğlenceli şeyler var Eğer Bootstrap ile yapabilirsiniz.
Bu yüzden sana tavsiyem go ahead olduğunu ve kendi projelerinde kullanmak,
yönergeleri izleyin biz Sadece, bunu elde etmek olarak nasıl yaptım
ve sadece Bootstrap çünkü okumak Yapmanız gerekenler hakkında daha fazla öğreneceksiniz.
Ve böylece biz gittin üzerinde, bugün, nasıl kullanılacağı
dokümantasyon ne bina taşlarıdır ve nasıl kavramsal olduğunu.
Yani şimdi benim sana meydan okuma Bootstrap kullanarak bir web sitesi yapmak.
Dokümanlar gidin.
Ve biz ettik araçları kullanmak denemek ve onları ayrıştırmak için şimdiye kadar öğrenmiş
ve onları anlıyorum.
Ve bu stilleri ve araçları kullanmak web sitenizde oraya bakın.
Ve bu, sadece büyük bir var Deneysel süreç.
>> Belli bir stili deneyin.
İşe yarıyor mu?
Mu değil mi?
Birlikte bir şeyler koyarak deneyin.
Ne olur bak.
Bu çok kendi kendine var güdümlü, keşif süreci.
Ama bugün, biz öğrendim Bootstrap nedir çok temelleri?
Neden çalışır?
Nasıl çalışır?
Biz kullanmaya başlamak nasıl o, ilk etapta?
Ve şimdi sen olduğun Bu iyiye, sen
bunu yapmak mümkün olmalıdır oldukça sorunsuz kendiniz.
>> Yani bir kez daha, tüm Yaptığımız kod burada.
Hiç istiyorsanız yukarı bir fırça almak için,
gibi ne çabuk hile var tüm stilleri için yaprak?
Burada bu örnek geçebiliriz.
Biz burada bazı örnek stilleri var.
Eğer denemek istiyorsanız Yine kendiniz zorluklar,
Burada onları denemek ve çözümler kontrol.
Yani bu bağlantı olacak slaytlar, dahil olan
Elbette size gönderilecektir.
Ama o kadar da burada bulunuyor.
İstersen, videoyu durdurabilir.
İhtiyacınız olan tüm bilgiler Bu sitede, sağ burada olacak.
Herkes herhangi bir sorunuz varsa, biz So önümüzdeki birkaç dakika götürün.
Aksi takdirde, teşekkür ederiz tüm izlemek için çok.