Bu derste tekrar hoş geldiniz, kampınızda çalışmaya devam edeceğiz.
İlk kurulumu zaten yaptık.
Üstbilgi ve altbilgi Parshall'ın önyüklemeyi eklediğimiz bazı temel yerleşimlerini yaptık ve
yeni kamplar oluşturma işlevini ekledik.
Şimdi, bootstrap'ı kullanarak kamp sayfasını stil haline getireceğiz.
Öyleyse başlayalım.
Yapacağım ilk şey, sunucularımın çalıştığından emin olmaktır.
Ve şimdi elimizde olanı bir göz atın.
Kesinlikle biraz underwhelming.
Bu yüzden iki ana hedefim var.
Birincisi, buradaki başlıkta daha iyi bir başlığın olmasını istediğimizden bu daha hoş görünmesi gerekiyor.
Bootstrap'de bir jumbotron denilen şeyi kullanacağız ve sonra da kamplar, kampların
listesi dikey olarak böyle görünmemelidir.
Bunun yerine, daha küçük boyutlu bir tablo ızgarasından geçmesini ve ızgaranın duyarlı olmasını istiyoruz.
Bu başlık metnini biraz daha güzel görünmesi için ilk olarak başlatalım.
Bu yüzden, burada çalışacağım evet kampları açacağım.
Bu yüzden biraz yeniden boyutlandıracağım, çünkü epeyce HD postası yazacağız ve
bir terminalle hiçbir şey yapmayacağız.
Üstbilgide çalışmak için daha önce görmediğimiz bir başlık etiketi kullanacağız.
İşlevsel olarak div gibi bir şeyle aynı şekilde çalışır.
Tek fark, bunun biraz anlamsal anlamı olduğunu.
Sadece rasgele bir div yerine başlık kullanarak, ancak bunun sadece bir kapsayıcı olduğu önemli değildir.
Ve biz ona bir sınıf jumbotron vereceğiz ve daha sonra içerisine ekleyeceğiz ki aslında bu
H-1'i kopyalayacağız ve biz sadece bunda bırakıp Frigo'yu kurtaracağız ve sayfamızı yenileyeceğiz.
Şimdi Jumbotron denilen şey var.
Hâlâ harika değil.
Yapmamız gereken sonraki şey, her şeyi bir önyükleme konteyneri içinde yapmaktır.
Dolayısıyla burada gördüğümüz her şey girintilendirileceğim ve sınıf eşdeğeri olan bir
div eklemeye gidiyorum bunun gibi.
Ve sonra içindeki her şeyi yapıştıracağız ve bu, taraflarımız için bazı spesifikasyonlar ekleyecek.
Yenileyin.
Artık burada sol tarafa karşı işleriniz olmadığını görebilirsiniz.
Biraz yerimiz var ve JumboTron biraz daha yakından bakıyor ve sonunda bir
naf barı görünecek.
Bu da biraz daha güzel görünüyor.
Şimdilik sadece Jumbotronumuz var.
Şimdi, metnin kendisini değiştirelim.
Bunun yerine kamp sayfasında bu hoş geldiniz mesajı koyalım Kampa hoş geldiniz.
içeriği koymaktan çekinmeyin ve paragrafa bir paragraf
ekleyeceğim ve sadece küçük bir etiket satırı ekleyeceğiz ve sadece elimizi görün ve dünyanın her yerinden kamp alanlarını seçelim deyin.
İstediğiniz
Bunun gibi bir şey gerçekten önemli değil.
Yenilemeyi kaydederiz.
Tamam şimdi küçük bir etiket satırı var ve yapmak istediğimiz son şey bu linke dikkat etmek.
Yeni kamp bağlantısı ekle.
Bu yüzden onu kopyalayıp Jumbotron'a koyacağım.
Ancak bir düğmeye basacağım.
önyükleme düğmelerinden biri veya önce bir paragraf eklemek ve daha sonra bunun içine çapa etiketi koymak.
Bunu yapmak için
Ve bunu yalnızca boşluk için yapıyorum.
Bunun kendi çizgisinde olmasını istiyorsunuz ve daha sonra düğme sınıfına
birden fazla sınıf PTEN ETN birincil rengini ve bunun gibi geniş çizgi çizgilerini vereceğim ve kaydedeceğim.
Şimdi yeni bir kamp düğmesi oldu.
Üzerine tıklarız ve tamamen stil sahibi olan forma gideriz.
Küçük bir şey şu ki burada bu pencereyi yeniden boyutlandırırsam.
Metnimizin, Jumbotron'un en iyi kenarına karşı nasıl ilerlediğine dikkat edin.
Burada bir miktar boşluğumuz var ve bu boşluğu tutmak istiyoruz;
yapmamız gereken şey, Jumbotron'da başka bir konteynır eklemek; böylece div sınıfı konteynerle eşit ve ardından burada Jumbotron'un içinde kapanış div'sinde sonuna kadar
girip daha sonra içeri girintili olarak girmek istiyorlar. herşey.
Ve şimdi yenilersen.
Aynı görünüyordu, ama onu küçültürken şimdi orada biraz alanımız var.
Tamam, bu başlık kısmı.
Şimdi bu görüntü ızgarasında çalışmak istiyoruz ve sizinle birlikte hazır olacağım.
Kesinlikle biraz daha fazla iş var.
Tamam, o ızgaraya başlayalım ve div sınıfı öyle bir satıra eşit olacak şekilde bir satır oluşturarak
başlayacağız ve burada küçük bir mesajla başlayacağız.
Dolayısıyla bir div sınıfına eşit ekleyeceğiz ve bunun sadece tüm genişliği almasını sağlayacağız ve burada sadece
bir mesajımız olacak ve en popüler sitelerimizin bildiğiniz kamplar olduğunu söyleyen H-3. Pek
gibi görünmeyecek.
Şimdilik tekrar başlayalım ve sınıf sınıfımıza, üstümüzdeki sınıf okulumuzdaki her şeye ihtiyacımız olan şeyleri
ekleyerek başlayalım.
Bu, div sınıfının eşit olduğu sıradadır.
Ve şimdi bunu her döngü için konuşmak zorundayız çünkü aslında yapmak istediğimiz şey, her
kamp için satırın içindeki ızgaramız yerine, bir sütun sınıfı olan bir div ve önyükleme ızgarasını kullanarak
bir sütun yapmak istiyoruz.
Bu yüzden bunu yapacağım şimdi her döngü için bu kodu tümüyle girintili olacak
şekilde koyacağım.
Ve sonra, burada closing div etiketimize ihtiyacımız var.
Bu klasik sıra için ve bu konteyner içindir.
TAMAM.
Yani sınıfı sıralayıp div olarak sınıflandırıp bu resimde bir H ile ayrılmak yerine, yine de
bir görüntüye sahip olacağız, ancak bu div'ı değiştireceğiz, böylece bu sütun orta üç sütun sınıfında küçük bir
sütunda olacak 6 ve bu sadece ekranı daha büyük olduğunda biraz daha büyük görüntüler elde etmemizi sağlamak için bunu
duyarlı kılmak içindir.
Ve sonra onu küçülttüğümüzde, satır başına sadece iki görüntüye ineceksiniz ve daha sonra satır başına
bir görüntüye kadar daha da küçültüleceksiniz.
küçük bir sınıf yapacak küçük bir önyükleme sınıfı olacak küçük resim
sınıfına sahip olacak. Bu şekilde başlamak için görüntü.
Yani bunun içinden aslında başka bir div'ye ekleyeceğiz ve bu div,
RL'deki kampa eşit görüntü hizmetlerine sahibiz. Ve bundan ayrılmayacağız.
Ve şimdilik bunlardan kurtulup, tasarruf edelim ve taze olursak ne bulacağımızı görelim.
Tamam.
Şimdi bir resim ızgarımız var.
Sadece üç tane var, ancak bu ızgarayı alıyoruz.
Ve ben bunu duyarlı hale getirerek ne demek istediğimi göstereceğim.
Dolayısıyla, bir küçültme olarak, ekranın iki karesinde veya iki öğede nasıl değiştiğine dikkat edin.
Unutmayın 12 birim var.
İlk başta, onu dört parçaya bölüyoruz; burada her biri üç birim çıkarıyor ve ızgara burada
küçültüldüğünde her biri altı ünite, daha küçük ise otomatik olarak bir üniteye
gidiyor.
Ve bunu yazmak zorunda değiliz çünkü ekstra küçük varsayılan 12 adet kullanmaktır.
Yani bunu belirtmek zorunda değiliz.
Şimdi başlığı tekrar bu kampın adıyla alalım ve daha yeni bir önyükleme sınıfı yapmak
için sadece bir çağdan başlayalım. Bir div sınıfı bunun gibi başlıklara eşit.
Ve sonra içeride kamp alanı adı için bir H yazacak.
Tamam, kurtaralım nasıl bir şey görelim.
Oraya gidiyoruz.
Bu güzel küçük kartları alıyoruz.
Bu, bizim için bunu yapan küçük resim sınıfı.
Görüntülerimize sahibiz.
Ve bir grup imgede bir sürü görüntünün olması halinde neye benzediğini görelim.
Yani bunu yapmak zorunda değilsin, ama ben burada yapıştıracağım.
Bize biraz daha veri verin.
Yinelenen veriler olacak, ancak sorun yok.
Ve sonra doğru virgülleri ve böylece virgül eklediğimizden emin olmamız gerek ve orada bulunmaktır.
Şimdi yenilersek Ah sunucuyu yeniden başlatmamız gerekiyor.
Ve her seferinde uygulamayla uğraşıyoruz.
Evet.
Ve şimdi, yenersek, küçük bir sorunumuz olduğunu göreceksin.
Izgara biraz karışık.
Ve olan biten farklı yüksekliklerdeki görüntülere sahip olduğumuz.
Yani bu Salmon Creek biri onlardan farklı.
Bu durumda genişlik aynı olsa da.
Ve bu ızgarayı atıyor ve bunu düzeltmek için kolay bir yol var, ancak biraz can sıkıcı.
Ve sana bunu kampımızın yerine nasıl yapacağımızı göstereceğim.
Evet.
Sınıf sırası gününde bir stil niteliğini ekleyeceğim ve bunu geçici olarak yapacağım.
bir stil sayfasına taşıdık, ancak görebilmenizi kolaylaştıracak şekilde satır boyunca yapacağım.
Bunu harici
Bu nedenle, stilin esnek olması ve esnek sargının sarma olmasını sağlıyoruz.
Ve bunlar, ızgaramıza yardımcı olacak iki özelliktir.
Şimdi taze olsaydım Şimdi daha esnek olan ızgarayla son buluruz.
Farkımız önemli değil, çünkü farklı ızgaralar var, çünkü ızgaralar uyarlıyor Yani bu ikisi arasında daha
fazla boşluk var ve işte burada.
Temelde, herşeyin mükemmel şekilde hizalanmasını sağlayacak şekilde kendi çizgisinde birlikte olabilmemiz için
gereken en az alan miktarını belirtir.
Ve geri dönüp metnimize metni eklemek için yapabileceğimiz başka bir değişiklik daha var.
Merkezi, metnimizi oralarda merkezileştiren bir bootstrap olan Merkezi.
Ve sanırım biraz daha iyi görünüyor.
Ayrıca bir kişisel tercih meselesi ve şu an için kamp sayfası ile işimiz bitti.
Umarım bu, önyükleme desteğinin gerçekten bize nasıl yardımcı olabileceğini gösterir, bunu baştan
başa yapmakla karşılaştırıldığında özellikle kolaylaştırır.
Ve sana sadece hoş duyarlı ızgarayı gösterebilirim.
Yani mobil cihazda.
Bu güzel düzeni dört görüntüye kadar ulaştıracağız.
Tamam, böylece nasıl göründüğünden oldukça memnunum.
Bir sonraki video'da görüşürüz