Bu derste, bootstrap hakkında bugüne kadar öğrendiklerimizi kullanarak küçük bir
proje oluşturacağız.
Konuştuğumuz şu ana kadar, jumbotron ve ızgaralı sistem barındıran çok sayıda
bileşeni içerecek.
Ayrıca simgeler de dahil olmak üzere bir veya iki yeni şey ekledim.
Bunları nasıl yapacağımızı daha henüz görmedik.
Ve ayrıca, bu gezinme çubuğunu kaydırdığımda, üste sabit kaldığını göreceğiz, böylece henüz henüz
görmediğimiz sabit bir nav çubuğuna sahip olduğumuz yönde ilerleme kaydedilmiyor.
Ve son olarak, varsayılan önyüklenmeli bileşenlerin bazı renklerini değiştiriyoruz.
Yani bu aslında biraz farklı gri gölge.
Bu, mavinin gölgesidir ve nav çubuğunun bazı renkleri vardır.
Bu yüzden size herhangi bir kod yazmaya başlamadan önce hepsini nasıl yapacağımızı göstereceğim.
Bu görüntülerin çoğunlukla bir Web sitesinden Splash adlı harika bir kaynaktan
geldiğine dikkat çekmek için biraz zaman ayırın.
Dolayısıyla, sıçrama, istediğiniz her şeyi yapabileceğiniz bir dizi güzel, yüksek rez fotoğrafları sunar.
Buradaki lisansı okuyabilirsiniz, ancak istediğiniz kadar çok şey var.
Yaratıcı bir ortak lisans falan filan, eminim bunu umursamayacağımdan eminim ama
fotoğraflar harika ve bu sekiz parçadan birçoğunu kullanıyorum.
Aslında galerimizde.
Ve bu, burada bir resim bırakıyor; burada kendimi bir fotoğraf dersi almaya götürdüm
ve bu benim aldığım ilk şey yarım terbiyeli görünüyor.
Sanırım bu kadar sıcak görünmeyenlere kıyasla.
Neyse, önemli olmayan bu aynı resimleri kullanmak istiyorsanız.
Bu, herhangi bir resimle çalışacak.
Ancak aynısını istiyorsanız, bu dosya galerisi M'deki tüm bağlantıları dahil ettim. D ile birlikte bu videoyla birlikte
yükledik ve ayrıca koyu mavi ve açık gri kullanacağımız iki rengi
de dahil ettik.
TAMAM.
Dolayısıyla tüm bunlar yol boyunca projeye başlayalım.
Bu yüzden boş bir dosya galerisi var.
Hm
ve bu resim galerisi diyebiliriz ve yapmamız gereken ilk şey önyükleme stresini eklemektir.
Burada benim çizim eklerim
Ve sadece eski bir projeden CD uçlarını kopyalayacağım, böylece şimdi bunu yapacağım.
İşte başlıyoruz.
Önyükleme CDN'sine bağlanıyorum.
Ve buradayken önyükleme CSSA ve Jay kraliçesi kentini de alacağım ve nav bar dersinde yaptıklarımı ve buraya
yerleştirdik, böylece nav çubuğunu eklediğimizde ava gitmek zorunda değiliz Bu dosyalar
veya komut dosyası etiketleri için.
Dolayısıyla bir kurtarma ve yapabileceğimiz ilk şey, Jumbotron'umuza ekleyin.
Bu hoş ve kolaydır.
Yani bir div olacağız ve sınıf Jumbotron'a eşit olacak.
Ve sonra Jumbotron'un içinde sadece görüntü galerisi yazan bir H1 ile başlayacak.
Orada gidiyoruz, biz de kurtaracağız ve bunun işe yaramasına izin vereceğiz.
Yani bu dosya açılacak.
Bu yüzden Boucek'i de dahil ettik.
Yazı tipi değişikliğini görüyoruz.
Bu griyi Jumbotron'dan görüyoruz.
Şimdi, burada olduğu gibi bir kabın içinde olduğumuzdan emin olalım, ekrandaki
yol boyunca nereye gittiğimizin yerine.
Dolayısıyla div sınıfını kapsayıcıya eşit yapacağız.
İşte gidiyoruz ve bunu düzgün yapalım ve yenileyelim ve geri gideriz.
Pekâlâ, Jumbotron'a sahibiz ama bu paragrafa ekleyin.
Şimdi geri dönüp simgeyi yapacağız ancak bu, kaydedeceğimiz H-1'in altındaki bir paragraf etiketi.
İstediğiniz metni oraya koymaktan çekinmeyin ve şimdi Jumbotron ile işimiz bitti.
ve şimdi nav çubuğunu yapalım ve iki nedenden dolayı sıfırdan yeterince çubuk yazmayacağım.
Şimdi geri dönelim
Birincisi, kodun biraz olmasıdır.
Uzun zaman alacaktır.
Ve bu video.
Ama ikisi, sıfırdan başlayarak Ackbar'a asla neredeyse hiç girmediğim gerçeğidir.
NASCAR videosunda bahsettiğim gibi iş akışım çoğunlukla önyükleme sitesine veya bir NAV çubuğuyla
yapmış olduğum önceki bir siteye gitmem ve bunu kopyalamam.
Ve şimdi kontrol ettim ve istemediğim parçalardan kurtuluyorum.
Içine yeni parçalar ekledim.
İşte burada yapacağım yer.
Zaten nav çubuğunda yaptığımız yeterince kısmı her HTML uygulamasında söyledim.
İşte burada ve ben bunu kopyalayacağım ve sonra birazcık değişeceğiz.
Öyleyse içeri kopyalayalım ve geri döneceğim ve bunu sadece bunun gibi dosyanın en üstüne koyacağız.
Bakalım neye yeni geldiğimiz ve nav barımız var.
Yakın.
Markayı burada değiştirmek istiyoruz.
Eninde sonunda rengi değiştirmek istiyoruz ve şu anda üst tarafa sabitlenmediğinden
emin olmak istiyoruz, ancak oraya varacağız.
Geri dönelim ve markayı değiştirelim.
Bu yüzden, kahve yerine ben benim görüntülerini çağırdın bunu ne istersen de diyebilirsin.
Tabii ki işe yaradığından emin olun.
Size göstereceğim bir sonraki şey, şekerleme yerine veya varsayılan renk yerine rengi değiştirmek için yapabileceğimiz
hızlı bir değişikliktir.
Eğer ayette bir çubuk olursa ben şimdi bunu yapabilirim ve sana nasıl bir şey olduğunu göstereceğim.
Şimdilik karanlık çıkıyor ya da metnin açık olduğu yerlerde renkler ters çevriliyor ve karanlık bir arka plan
elde ediyoruz.
Buraya hala gideceğim mavi renk değil.
Ve yazı tipi de beyaz değil, ama geri dönüp gidereceğiz.
Bu şimdilik yeterince yakın.
Şimdi ızgaradaki gerçek resim galerisine odaklanabiliyoruz.
Ve çözüm üzerinde nasıl davrandığına bakarak başlayalım.
iki saniyeye iner ve sonra ikiye gider ve sonra nihayetinde küçük boyutta bir tane gider, burada görebilirsiniz.
Böylece, üç resim göründüğünde başlar ve sonra yeniden boyutlandırdığımda,
Üstelik bir görüntü var.
İlk olarak, bu genişlik için ızgarayı ayarlayarak başlayalım, burada üçümüz var.
Unutmayın 12 adet toplamımız var.
Öyleyse, üçümüzün karşılanması istiyorsak, her birini dört ünite olarak atayacağız.
O halde bunu Jumbotronun hemen altına koyalım.
Yine de konteynırın içinde div sınıfının satırlarını eşitleyeceğiz ve içimizde div sınıfı eşit olacaktır
ve bunun dört birim olmasını isteriz.
Dolayısıyla, sütun 4 çizgisini yapacağız ve enter'a basacağız ve sadece bazı metinler koyarak başlayabiliriz, sonra bunları
çoğaltacağım, çünkü bunlardan üçünü istiyoruz.
Ve girinti düzeltme konusunda endişelenmeyeceğim, çünkü sadece bir an daha büyük bir
değişiklik yapacağız.
Ancak yenileyelim ve bu üç sütunla karşılaşıyoruz.
Yapmak istediğimiz sonraki şey, bazı görüntülerin çekilmesini sağlamak ve hepsi başlamak ama sadece Golden
Gate Köprüsü fotoğrafımızın L'sini alıyor ve metin yerine resim etiketi ekleyeceğiz.
Golden Gate Köprüsü'ne eşit olduğunuz için hasta olduğunuzu ve üç defa yapıştıracağım ve kaydedeceğim.
Yani görüntü kaynağı
Ve geri dönersek, bu üç sütuna sahip olsak bile imajın çok büyük olduğu bir
problemimiz var.
Görüntüümüz kolonumuzun içinde kalıyor değil, küçülmüyor.
Bunu düzeltmek için ne yapacağımızı görebilirsiniz, biraz daha fazla önyükleme ekleyerek ekleyin.
Henüz bu güzel küçük sınıra etrafında yarattıklarını göstermedim ve buna küçük resim deniyor.
Tek yapmamız gereken, sınıfı küçük resimle eşit bir div yazmak ve sonra
içerisine koyduğumuz görüntü her ne ise sütuna sığacak şekilde ölçeklendirilecek.
Ayrıca sanırım bu küçük kenarı çok güzel görünüyor.
Bunu yapmak için aslında tek bir görüntüye geri dönmek ve bir div
sınıfına eşit eklemek için küçük resimlere eşit olmak ve bunları düzgün yapmak için elimizde kalan şeylerden kurtulacağım.
Ve bunu imajın etrafına sarıyor ve kaydediyoruz.
Şimdi yenilersen.
Bu ızgaranın içinde uygun alan miktarını alan tek bir resim elde edip edemeyeceğimizi göreceksiniz.
Bu sütun ve çevresindeki küçük bir kenarlığı var ve görüntü devasa değil, bu harika.
Bunu tekrar edersek işe yaradığından emin olalım.
Yani bu bir resim, bunu üç kez çoğaltalım ve ne yenilendiğini görelim.
Ve işte gidiyoruz.
Üç imajımız var.
Ben devam edip altı tane daha katacağım.
Burada yaptığımız gibi toplam dokuz kişi var.
Ve aslında ayrı satırlar eklemek zorunda değiliz.
Hepsini aynı sıraya koyabiliriz.
Bu yüzden şimdiye kadar sahip olduğumuz üç belgeyi de zamanlara kopyalayıp kaydedin.
Bu bize dokuz imaj verecek.
Yenilersem, otomatik olarak bir sonraki satıra sarılırlar.
Bu yüzden sadece bir sıraya sahip olmamız ve tıbbi olarak bildiğimiz sütunlara eklememiz gerekiyor.
Her resmin dört birimi almasını istersek, bu satır başına üç tane anlamına gelir ve o zaman üç sıra
resim oluşturmamız gerekir.
Geri dönüp videonun sonunda elflerin tüm görüntülerini değiştireceğim.
Seni onları izlemek istemiyorum.
Kopyalama ve yapıştırma çok ilginç, ancak bu şeridin geri kalanına odaklanalım.
Dolayısıyla, çarpma ortamı, aradığımız şeyi istemediğimiz bir görüntüye gittiğinde şu
orta kesme noktasında iki görüntü var.
Ve sonra orta kesme noktasından sonra küçük çarpıştık ve yine de 2'de kalmasını istiyoruz.
Bunu bizimkimizde düzeltmek için veya büyük kesme noktasında veya orta kesme noktasında
hemen gidip küçük ve ekstra küçük 1'de kalır.
Buraya geri gidebiliriz ve seçtiğiniz tüm bildiklerini değiştireceğiz ve komuta basarak tüm çağrı örneklerini büyük olarak seçeceksiniz ve
ardından imleci hareket ettirmek için sol veya sağ oku vuracağız.
Artık hepsini bir anda değiştirebilirim.
Ve ne yapmak istiyorum altı sütun ekleyebilirsiniz altı Perrow için istiyorum ve bu işe yarıyor.
Geri döndüğümde ve yenilersem sıra başına 3 kalacağını göreceksin ve sonra ortadaki kesme noktasına ulaştı
ve 2'ye gidiyorlar.
Fakat daha sonra küçük vurdum ve küçük çarptığımızda birine atlar ve çözümü 2'de kalır.
Bu nedenle, altı sütun orta yaparken bunu düzeltmek için sütun 6'yı yapabilir ve bu sürümü
tekrar yenileyebiliriz.
Orta derecede vurduk.
Ikiye gidiyoruz.
Küçük çarptık.
2'de kalırız ve daha sonra küçüklere gideriz ve sıra başına 11 resim görüyoruz.
Mükemmel.
Şebeke için yapmamız gereken tek şey bu ve burada birçok işlevselliği uyguluyoruz.
Bunu yapmak ve çalıştırmak çok hızlı.
Şimdi odaklanmak istediğimiz renklerin bazıları ve simgeler.
Önyüklemeyi kullanarak simgeleri nasıl eklediğimizi size göstereceğim.
alırken üstte bu simge simgeleri bulunur ve bunlardan bir demet arasından seçim yapabilirsiniz.
Bileşenlere giderseniz önyükleme
Ve kullanmak istediğimizi ve kullandığım birini bulacağız.
Sadece bir arama yapacağım sanırım kamera.
Yani burada bir kamera var ve o kamerayı kullanmıyorum.
Biraz farklı.
Kullandığım kamera daha retro bir kamera ve sana ona nasıl ekleneceğini göstereceğim.
Aslında önyükleme desteğinin bir parçası değil. Ancak önyükleme desteğiyle gelen normal kamera ile başlayalım.
Bu nedenle Clifford Kahn'ı yazıp, sonra Conn Dash kamera ile birlikte gidiyoruz.
Ve ileriye doğru kaydırırsanız, bir sınıfın Con ile eşit olduğu ve daha sonra
glif simgesinin adını çizebileceği bir span oluşturmak için onu nasıl kullanacağını açıklayabilirsiniz.
Şimdi bu alanı kopyalayalım ve bunu H-1'in içinde yaparak başlayacağız,
sadece H-1'in başlangıcına koyduk ve hızlı bir A-Kon çizgi kamerası istiyoruz ve kaydedeceğiz ve yenileyeceğiz.
Ve aynen, orada bir fotoğraf makinesi bulabilirsin.
Ve boşluğa istersek boşluklarla doldurabiliriz ya da oraya bir boşluk ekleyebiliriz.
Ve biz de nav çubuğu için aynı şeyi yapabileceğimiz bir yer buluyoruz ve burada Photo
checkup gidin denilen birini kullandık.
Bu sayfada fotoğraf resmi için bir arama yapabilirsiniz.
İşte burada.
Resim çizebilirse gidebilir.
Dolayısıyla burada nav bar markasına geçeceğiz ve tekrar bu aralıkta yapıştıracağız.
Ardından, sınıf görüntünün üzerine tıklanmalı ve oraya bir de alan ekleyeceğiz.
Sitemize geri dönüyoruz, şimdi orada küçük bir resim var.
Ve kameramız da var.
Ardından, gezinme çubuğuyla baş edelim ve şu an görebileceğiniz şekilde yukarı doğru sabitleyerek başlayalım.
Bu şekerlemeler saçıyor.
Ancak çözüm üzerinde orada kalır.
Ve bunu yapmak, NAV çubuğumuza eklemek zorunda olduğumuz tek bir sınıftır.
Dolayısıyla, burada nav çubuğu çizgisini sabit çizgi üstü olarak kaydetmek ve kaydetmek istiyoruz.
Ve eğer biz tazeyız, topuza sabitlendiğini göreceksin.
İçeriğimizin biraz geride kalması ve Jumbotron'un üzerinde o normal boşluğun olmasını
istiyoruz küçük bir sorun var.
Yapmamız gereken, vücudumuza bir miktar dolgu eklemek ve bunun 70 piksel olması.
Önyükleme belgeleri size şunu söyleyecektir: Hiç 70 piksel dolguyu unuttuysanız, bunun ne
dördün genişliğini istediğinizi belirtin.
Şimdi buraya gideceğiz ve şimdi bir stil sayfası oluşturacağız ve Galeri Dotsie SS
ve daha sonra üst gövde dolgu üst 70 piksel olarak adlandıracağım ve daha sonra bunu Galeri CS
olan stil sayfasına bağlamamız gerekiyor. S.
Şimdi bunun çalışıp çalışmadığına emin olalım.
Oraya gidiyoruz.
Aralıyoruz ve NFR yine de üste sabitleniyor, çünkü mükemmel görebiliyorsun.